/* Interview-Formate — Unterseite iljakagan.de/interviewformate
   Standalone-CSS (beeinflusst die Hauptseite nicht).
   CI: #101010 · Akzent #4FBFB1 · Commissioner · Rahmen #F1EFEA ±1°
   Kein Tracking, keine Fremd-Requests (Schrift/Uploads eigener Server). */

@font-face{
  font-family:'Commissioner';
  src:url('comm_slnt_cyr.woff2') format('woff2');
  font-weight:100 900;
  font-style:oblique 0deg 10deg;
  font-display:swap;
}

:root{
  --grund:#101010;
  --tiefer:#0A0A0A;
  --bett:#1A1A1A;
  --text:#E8E6E3;
  --leise:#9A9A96;
  --linie:#6E6E6E;
  --rahmen:#F1EFEA;
  --akzent:#4FBFB1;
  --glas:linear-gradient(180deg,rgba(241,239,234,.055),rgba(241,239,234,.016));
  --glas-rand:rgba(241,239,234,.10);
  --glas-kante:inset 0 1px 0 rgba(241,239,234,.14);
  --glas-schatten:0 24px 60px -32px rgba(0,0,0,.92);
  --schrift:'Commissioner',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gr-hero:clamp(2.3rem,5.4vw,4.4rem);
  --gr-titel:clamp(1.8rem,3.6vw,2.9rem);
  --gr-zwis:clamp(1.25rem,2.1vw,1.6rem);
  --gr-text:1.09rem;
  --gr-klein:.95rem;
  --ziel:2.75rem;
  --breit:68rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--grund);color:var(--text);
  font:400 var(--gr-text)/1.65 var(--schrift);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}

.sprung{position:absolute;left:-100vw;top:0;background:var(--akzent);color:#06231f;
  padding:.6rem 1rem;z-index:99}
.sprung:focus{left:.5rem;top:.5rem}

.wrap{max-width:var(--breit);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(241,239,234,.08)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.4rem;flex-wrap:wrap}
.marke{font-weight:650;letter-spacing:.01em;text-decoration:none;font-size:1.02rem}
.marke small{display:block;font-weight:400;color:var(--leise);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.hauptnav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.95rem}
.hauptnav a{text-decoration:none;color:var(--leise);padding:.35rem 0;border-bottom:2px solid transparent}
.hauptnav a:hover,.hauptnav a[aria-current="page"]{color:var(--text);border-color:var(--akzent)}

/* Hero */
.hero{position:relative;padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,7vh,5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;
  background:
    radial-gradient(60% 50% at 70% 0%,rgba(79,191,177,.10),transparent 60%),
    radial-gradient(45% 40% at 15% 20%,rgba(241,239,234,.05),transparent 65%);
  pointer-events:none}
.hero .wrap{position:relative}
.kicker{color:var(--akzent);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 1rem}
h1{font-size:var(--gr-hero);line-height:1.08;margin:0 0 1.2rem;font-weight:640;letter-spacing:-.015em;text-wrap:balance}
.stellen{font-size:var(--gr-zwis);color:var(--leise);max-width:44rem;margin:0 0 2rem}
.tat-reihe{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.35rem;border-radius:999px;
  background:var(--rahmen);color:#101010;font-weight:600;text-decoration:none;border:1px solid var(--rahmen);
  transition:transform .18s ease,box-shadow .18s ease}
.knopf:hover{color:#101010;transform:translateY(-1px);box-shadow:0 10px 30px -12px rgba(241,239,234,.35)}
.knopf.gruen{background:#25D366;border-color:#25D366}
.knopf.gruen:hover{box-shadow:0 10px 30px -12px rgba(37,211,102,.5)}
.knopf.ghost{background:transparent;color:var(--text);border:1px solid var(--glas-rand)}
.knopf.ghost:hover{border-color:var(--akzent);color:var(--akzent);box-shadow:none}
.knopf svg{width:1.15em;height:1.15em;flex:none}
.tat-hinweis{color:var(--leise);font-size:var(--gr-klein);margin:.6rem 0 0}

/* Faktenleiste */
.fakten{border-block:1px solid rgba(241,239,234,.09);background:var(--tiefer)}
.fakten .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.2rem;padding-block:1.4rem}
.fakten b{display:block;font-size:1.02rem;font-weight:620}
.fakten span{color:var(--leise);font-size:var(--gr-klein)}

/* Sektionen */
.abschnitt{padding:clamp(3rem,8vh,5.5rem) 0}
.abschnitt.eng{padding-block:clamp(2rem,5vh,3.5rem)}
.abschnitt > .wrap > h2{font-size:var(--gr-titel);line-height:1.15;margin:0 0 .8rem;font-weight:640;letter-spacing:-.01em;text-wrap:balance}
.vorspann{color:var(--leise);max-width:46rem;margin:0 0 2.2rem}

/* Karten */
.raster{display:grid;gap:1.3rem}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.karte{background:var(--glas);border:1px solid var(--glas-rand);border-radius:1.1rem;
  padding:1.5rem 1.4rem;box-shadow:var(--glas-schatten);box-shadow:var(--glas-schatten),var(--glas-kante);
  display:flex;flex-direction:column;gap:.5rem}
.karte h3{margin:.15rem 0;font-size:1.22rem;font-weight:620;line-height:1.3}
.karte p{margin:0;color:var(--leise);font-size:var(--gr-klein)}
.karte .zahl{color:var(--akzent);font-size:2rem;font-weight:660;line-height:1}
.karte a.textlink{margin-top:auto;padding-top:.6rem;font-size:var(--gr-klein)}

/* Bildrahmen ±1° */
.rahmen{background:var(--rahmen);padding:.5rem .5rem .5rem;border-radius:.35rem;box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
  transform:rotate(-.9deg)}
.rahmen.rechts{transform:rotate(.9deg)}
.rahmen img{border-radius:.15rem;aspect-ratio:3/2;object-fit:cover;width:100%}
.rahmen figcaption{color:#3b3a37;font-size:.8rem;padding:.5rem .3rem .15rem;font-weight:500}

/* Fall-Karten auf Start */
.fall{display:grid;gap:1.6rem;align-items:center;grid-template-columns:1.05fr .95fr;margin-bottom:clamp(2.5rem,6vh,4rem)}
.fall:nth-child(even){grid-template-columns:.95fr 1.05fr}
.fall:nth-child(even) .fall-bild{order:2}
.fall-bild{position:relative}
.fall h3{font-size:var(--gr-zwis);margin:.2rem 0 .5rem;font-weight:640}
.fall p{color:var(--leise);margin:0 0 .9rem}
.chip-reihe{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1rem}
.chip{font-size:.78rem;letter-spacing:.05em;color:var(--leise);border:1px solid var(--glas-rand);
  border-radius:999px;padding:.22rem .7rem}
.quelle{color:var(--leise);font-size:.82rem;border-left:2px solid var(--akzent);padding-left:.7rem;margin:1rem 0}

/* Video-Fassade (Click-to-Load) */
.fassade{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:.35rem;overflow:hidden}
.fassade img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fassade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,0) 55%,rgba(16,16,16,.72));pointer-events:none}
.fassade .spiel{position:absolute;inset:0;margin:auto;width:4.6rem;height:4.6rem;border-radius:50%;
  background:rgba(16,16,16,.82);border:1px solid rgba(241,239,234,.4);display:grid;place-items:center;z-index:2;
  transition:transform .2s ease,background .2s ease}
.fassade:hover .spiel{transform:scale(1.06);background:var(--akzent)}
.fassade .spiel::before{content:"";width:0;height:0;border-left:.95rem solid var(--rahmen);
  border-top:.6rem solid transparent;border-bottom:.6rem solid transparent;margin-left:.22rem}
.fassade:hover .spiel::before{border-left-color:#06231f}
.fassade-zeile{position:absolute;left:.9rem;bottom:.7rem;z-index:2;color:var(--text);font-size:.82rem;font-weight:550}
.fassade video{width:100%;aspect-ratio:16/9;border-radius:.35rem;background:#000}
.rahmen-hinweis{color:var(--leise);font-size:.8rem;margin:.55rem 0 0}

/* Ablauf / Scrollytelling */
.verlauf{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.verlauf-bild{position:sticky;top:5.2rem;align-self:start}
.verlauf-bild .rahmen{transition:opacity .35s ease}
.verlauf-schritte{display:flex;flex-direction:column;gap:1.1rem}
.schritt{background:var(--glas);border:1px solid var(--glas-rand);border-radius:1rem;padding:1.3rem 1.4rem;
  opacity:.55;transition:opacity .35s ease,border-color .35s ease}
.schritt.aktiv{opacity:1;border-color:color-mix(in srgb,var(--akzent) 45%,transparent)}
.schritt .nr{color:var(--akzent);font-weight:660;font-size:.9rem;letter-spacing:.16em}
.schritt h3{margin:.35rem 0 .4rem;font-size:1.18rem;font-weight:620}
.schritt p{margin:0;color:var(--leise);font-size:var(--gr-klein)}

/* Preise */
.preis-tabelle{width:100%;border-collapse:collapse;font-size:var(--gr-klein)}
.preis-tabelle th,.preis-tabelle td{text-align:left;padding:.75rem .8rem;border-bottom:1px solid rgba(241,239,234,.10);vertical-align:top}
.preis-tabelle th{color:var(--leise);font-weight:550;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.preis-tabelle td:first-child{font-weight:560;color:var(--text)}
.preis-tabelle td:last-child{color:var(--akzent);font-weight:620}
.preis-fuss{color:var(--leise);font-size:.85rem;margin-top:.9rem}

/* Zitate */
.zitat{font-size:1.18rem;line-height:1.55;margin:0 0 .7rem;font-weight:480;max-width:42rem}
.zitat-autor{color:var(--leise);font-size:var(--gr-klein)}

/* Liste Referenzen */
.reihe-liste{columns:2;column-gap:2.5rem;margin:1rem 0 0;padding:0;list-style:none}
.reihe-liste li{break-inside:avoid;margin-bottom:.55rem;color:var(--leise);font-size:var(--gr-klein)}
.reihe-liste b{color:var(--text);font-weight:560}

/* FAQ */
.faq details{border-bottom:1px solid rgba(241,239,234,.10);padding:.4rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.7rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--akzent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .antwort{color:var(--leise);padding-bottom:1rem;max-width:46rem}

/* Kontaktformular */
.formular{display:grid;gap:1rem;max-width:34rem}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld label{font-size:var(--gr-klein);color:var(--leise)}
.feld input,.feld select,.feld textarea{background:var(--bett);border:1px solid var(--glas-rand);border-radius:.6rem;
  color:var(--text);font:inherit;padding:.75rem .9rem}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:transparent}
.honig{position:absolute;left:-9999px}
.form-status{min-height:1.4rem;font-size:var(--gr-klein);color:var(--akzent)}
.kontakt-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}

/* CTA-Abschluss */
.cta-abschluss{background:linear-gradient(180deg,var(--bett),var(--grund));border-block:1px solid rgba(241,239,234,.08)}
.cta-abschluss .wrap{display:grid;gap:1.4rem;justify-items:start;padding-block:clamp(2.5rem,7vh,4rem)}
.cta-abschluss h2{margin:0;font-size:var(--gr-titel);font-weight:640}
.cta-abschluss p{margin:0;color:var(--leise);max-width:42rem}

/* Fuß */
.fuss{border-top:1px solid rgba(241,239,234,.08);padding:2.5rem 0 3rem;background:var(--tiefer)}
.fuss .wrap{display:grid;gap:1.8rem}
.fuss-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.fuss h3{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin:0 0 .7rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:var(--gr-klein)}
.quellen-sektion p{font-size:var(--gr-klein);color:var(--leise);margin:.2rem 0}
.quellen-sektion a{color:var(--leise)}
.fuss-zeile{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--leise);font-size:.85rem;border-top:1px solid rgba(241,239,234,.08);padding-top:1.2rem}

/* Seitennavigation (Brotkrumen) */
.brot{color:var(--leise);font-size:.85rem;margin:1.4rem 0 0}
.brot a{color:var(--leise)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.1rem}
.galerie figure{margin:0}
.galerie .rahmen{transform:rotate(-.6deg)}
.galerie .rahmen:nth-child(even){transform:rotate(.6deg)}
.galerie img{aspect-ratio:4/5}
.galerie figcaption{font-size:.78rem}
.galerie-platz{border:1px dashed var(--glas-rand);border-radius:.35rem;aspect-ratio:4/5;display:grid;place-items:center;
  color:var(--leise);font-size:.8rem;text-align:center;padding:1rem}

/* Projekt-Kopf */
.projekt-kopf .kicker{margin-bottom:.6rem}
.projekt-fakten{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.4rem 0 0;color:var(--leise);font-size:var(--gr-klein)}
.projekt-fakten b{display:block;color:var(--text);font-weight:600}

/* Reveal-Animation (JS-gestützt, ohne JS sichtbar) */
@media (prefers-reduced-motion:no-preference){
  .js .aufstieg{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .js .aufstieg.sichtbar{opacity:1;transform:none}
  .js .aufstieg.v2{transition-delay:.12s}
  .js .aufstieg.v3{transition-delay:.24s}
  /* Scroll-getriebene Hero-Tiefe (Compositor, progressive enhancement) */
  @supports (animation-timeline:scroll()){
    .hero-inhalt{animation:schweben linear both;animation-timeline:scroll(root);animation-range:0 60vh}
    @keyframes schweben{to{transform:translateY(-2.5rem);opacity:.35}}
  }
}

/* Responsiv */
@media (max-width:52rem){
  .fall,.kontakt-raster,.verlauf{grid-template-columns:1fr}
  .fall:nth-child(even) .fall-bild{order:0}
  .verlauf-bild{display:none}
  .reihe-liste{columns:1}
  .fuss-grid{grid-template-columns:1fr}
  .hauptnav{font-size:.88rem;gap:.8rem}
}

@media print{
  .kopf,.hauptnav,.cta-abschluss,.tat-reihe,.fassade,.fuss .quellen-sektion{display:none}
  body{background:#fff;color:#111}
  .karte,.schritt{border-color:#ddd;box-shadow:none}
}

/* --- Ergänzungen Runde 2 --- */
.bauhinweis{background:#241f10;color:#e6d69c;font-size:.85rem;text-align:center;
  padding:.45rem 1rem;border-bottom:1px solid rgba(230,214,156,.22)}
.bauhinweis a{color:#e6d69c}
.sprachwahl{display:flex;gap:.25rem;font-size:.85rem;align-items:center}
.sprachwahl a{color:var(--leise);text-decoration:none;padding:.12rem .38rem;border-radius:.3rem;border:1px solid transparent}
.sprachwahl a:hover{color:var(--text)}
.sprachwahl a[aria-current="true"]{color:var(--akzent);border-color:rgba(79,191,177,.45)}
.bild-folgt{border:1px dashed var(--glas-rand);border-radius:.35rem;aspect-ratio:4/5;
  display:grid;place-items:center;color:var(--leise);font-size:.82rem;text-align:center;padding:1rem;
  background:rgba(241,239,234,.02)}
.bild-folgt.wide{aspect-ratio:3/2}
.quelle a{color:var(--leise);font-size:.78rem}
.quelle a:hover{color:var(--akzent)}
/* Platzhalter in Video-Fassaden: Text unten, damit der Play-Kreis frei bleibt */
.fassade .bild-folgt{border:none;aspect-ratio:16/9;align-content:end;padding-bottom:2.8rem;
  background:rgba(241,239,234,.04)}

/* --- Runde 3 --- */
.popup{background:var(--bett);color:var(--text);border:1px solid var(--glas-rand);border-radius:1rem;
  padding:1.8rem 1.8rem 1.5rem;max-width:34rem;box-shadow:var(--glas-schatten)}
.popup::backdrop{background:rgba(10,10,10,.75);backdrop-filter:blur(3px)}
.popup h3{margin:0 0 .6rem;font-size:1.25rem;font-weight:640}
.popup p{color:var(--leise);font-size:var(--gr-klein);margin:0 0 .9rem}
.popup .quelle{margin-top:1rem}
.popup-taten{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.weiter-nav{border-top:1px solid rgba(241,239,234,.08);background:var(--tiefer)}
.weiter-nav .wrap{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-block:1.1rem;flex-wrap:wrap}
.weiter-nav .label{color:var(--leise);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.weiter-nav a{text-decoration:none;font-weight:600}
.weiter-nav a:hover{color:var(--akzent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.videoserie video{width:100%;aspect-ratio:16/9;border-radius:.35rem;background:#000}
.technik-hinweis{color:var(--leise);font-size:.8rem;margin:.55rem 0 0}
.kontakt-schutz{color:var(--leise);font-size:.78rem}