/* ============================================
   Kevin Grimberg – Eventproduktion & Ablaufregie
   Zentrales Stylesheet für alle Seiten
   ============================================ */

/* ---------- Selbst gehostete Fonts (DSGVO-konform, kein Google-CDN) ----------
   Die .woff2-Dateien in den Ordner /fonts legen – Download-Anleitung in LIES-MICH.md.
   Solange die Dateien fehlen, greifen automatisch die System-Fallbacks. */
@font-face{
  font-family:'Anton';
  src:url('../fonts/anton-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibmplexmono-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibmplexmono-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --ink:#14181d;        /* Text / dunkle Flächen */
  --paper:#fafaf7;      /* Hintergrund */
  --concrete:#ebece7;   /* Sektion "Über mich" */
  --signal:#e8420c;     /* Akzentfarbe (High-Vis-Orange) */
  --mid:#6f757b;        /* Sekundärtext */
  --line:#d6d8d2;       /* Linien / Rahmen */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono','Courier New',monospace}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- Navigation ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;
  font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
}
.logo span{color:var(--signal)}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--mid)}
.nav-links a:hover{color:var(--ink)}

.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:600;font-size:.92rem;
  padding:12px 24px;border:none;cursor:pointer;
  transition:background .15s;
  font-family:'Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.btn:hover{background:var(--signal)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal);background:transparent}

/* ---------- Hero ---------- */
header.hero{padding:88px 0 64px;border-bottom:1px solid var(--line)}
.kicker{
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal);
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:9px;height:9px;background:var(--signal);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.kicker::before{animation:none}}

h1{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;
  font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:1.02;letter-spacing:.01em;text-transform:uppercase;
  margin-bottom:24px;
}
h1 em{font-style:normal;color:var(--signal)}
.sub{font-size:1.15rem;color:var(--mid);max-width:620px;margin-bottom:36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);max-width:640px;
}
.stat{background:var(--paper);padding:20px 22px}
.stat b{display:block;font-family:'Anton','Arial Narrow',Impact,sans-serif;font-size:2rem;line-height:1}
.stat span{font-size:.8rem;color:var(--mid);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Sektionen allgemein ---------- */
section{padding:80px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:40px;flex-wrap:wrap}
h2{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-size:clamp(1.7rem,3.5vw,2.5rem);text-transform:uppercase;letter-spacing:.02em}
.sec-tag{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.78rem;color:var(--mid);text-transform:uppercase;letter-spacing:.1em}

/* ---------- Leistungen (Run of Show) ---------- */
.cue{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.cue:last-of-type{border-bottom:1px solid var(--line)}
.cue .tc{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.85rem;color:var(--signal);font-weight:500;padding-top:4px}
.cue h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.cue p{color:var(--mid);max-width:640px;font-size:.98rem}

/* ---------- Bildergalerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.imgslot{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#dcded8,#dcded8 12px,#e6e8e2 12px,#e6e8e2 24px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.imgslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgslot .ph{
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.72rem;color:var(--mid);
  text-transform:uppercase;letter-spacing:.1em;text-align:center;padding:12px;
}

/* ---------- Über mich ---------- */
#ueber{background:var(--concrete)}
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.about p{margin-bottom:18px}
.about strong{color:var(--signal)}
.portrait{aspect-ratio:4/5}

/* ---------- Referenzen ---------- */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:48px}
.logos div{
  background:var(--paper);padding:32px 16px;text-align:center;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.78rem;color:var(--mid);
  text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;justify-content:center;min-height:96px;
}
.logos img{max-height:44px;width:auto;margin:0 auto;filter:grayscale(1);opacity:.75;transition:all .2s}
.logos div:hover img{filter:none;opacity:1}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:32px}
blockquote{border-left:3px solid var(--signal);padding-left:22px}
blockquote p{font-size:1.05rem;font-weight:500;margin-bottom:12px}
blockquote cite{font-style:normal;font-family:'IBM Plex Mono','Courier New',monospace;font-size:.78rem;color:var(--mid)}

/* ---------- Kontakt ---------- */
#kontakt{background:var(--ink);color:var(--paper)}
#kontakt h2{color:var(--paper)}
#kontakt .sec-tag{color:#9aa0a6}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.c-info p{color:#b9bec3;margin-bottom:24px}
.c-line{
  display:block;text-decoration:none;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.95rem;
  padding:14px 0;border-bottom:1px solid #2a3038;color:var(--paper);
}
a.c-line:hover{color:var(--signal)}
.c-line small{display:block;color:#8a9096;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}

.field{margin-bottom:18px}
.field label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#9aa0a6;margin-bottom:6px}
.field input,.field textarea{
  width:100%;background:#1d2229;border:1px solid #2a3038;color:var(--paper);
  padding:13px 14px;font-family:'Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:.95rem;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:#9aa0a6;margin-bottom:22px}
.consent input{margin-top:4px;width:auto}
#kontakt .btn{background:var(--signal);color:#fff}
#kontakt .btn:hover{background:#ff5a24}
#kontakt .btn:disabled{background:#3a4048;cursor:not-allowed}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#8a9096;border-top:1px solid #2a3038;padding:28px 0;font-size:.85rem}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#b9bec3;text-decoration:none;margin-left:20px}
footer a:hover{color:var(--paper)}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.legal{padding:72px 0;max-width:760px}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:40px}
.legal h2{font-size:1.3rem;margin:40px 0 14px;text-transform:none;font-family:'Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:700}
.legal h3{font-size:1.05rem;margin:24px 0 10px;font-weight:700}
.legal p, .legal li{color:#3d4349;margin-bottom:12px;font-size:.98rem}
.legal ul{padding-left:22px;margin-bottom:16px}
.legal .todo{
  background:#fff3ec;border:1px solid var(--signal);padding:14px 18px;
  font-size:.88rem;color:#8a3413;margin:20px 0;
}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav-links{display:none}
  .about,.contact,.quotes{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .cue{grid-template-columns:1fr;gap:6px}
  .stat b{font-size:1.5rem}
}