/* Schriften liegen auf dem eigenen Server, Teilsatz Latein aus den Originaldateien im Brand-Ordner.
   Fehlt eine Datei, greift Arial, so wie es das Brand Book vorsieht. */
@font-face{font-family:'Archivo';src:url('fonts/archivo-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-600.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-800.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('fonts/public-sans-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('fonts/public-sans-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('fonts/public-sans-600.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}

/* Layout: schmale Textspalte auf 120er-Raster, Wechsel aus dunklen und hellen Baendern, Portraets als tragendes Bildelement, Karminrot ausschliesslich auf dem Call to Action. Farben und Schriften nach TGC Brand Book V1.0. */
:root{
  --nacht:#0D141C;
  --papier:#F2F0EA;
  --licht:#7FB2FF;
  --tief:#2F64B8;
  --stahl:#C5CBD3;
  --schiefer:#3D4651;
  --karmin:#D7263D;
  --papier-tief:#E7E4DC;
  --linie-hell:rgba(13,20,28,.14);
  --linie-dunkel:rgba(197,203,211,.16);
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --text:'Public Sans','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--papier);color:var(--nacht);
  font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.band{width:100%}
.band--dunkel{background:var(--nacht);color:var(--stahl)}
.band--tief{background:var(--papier-tief)}
.inner{
  max-width:1120px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-block:clamp(56px,7vw,104px);
}
h1,h2,h3,.zahl{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.05;color:var(--papier)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1}
h3{font-size:1.07rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.eyebrow{font-family:var(--text);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tief)}
.band--dunkel .eyebrow{color:var(--licht)}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.55;max-width:52ch}
.stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.stack--eng{gap:14px}
.band--dunkel h2,.band--dunkel h3{color:var(--papier)}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--nacht);border-bottom:1px solid var(--linie-dunkel)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--nacht)}
.kopf .inner{padding-block:14px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;color:var(--papier);letter-spacing:-.01em;text-decoration:none}
.marke .kuerzel{border:1.5px solid var(--papier);padding:3px 7px;font-size:.82rem;letter-spacing:.06em;line-height:1}
.marke .lang{font-size:.95rem}
.nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{color:var(--stahl);text-decoration:none;font-size:.9rem;font-weight:500;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--papier);border-bottom-color:var(--licht)}
.cta{display:inline-block;background:var(--karmin);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;padding:12px 22px;border:1px solid var(--karmin)}
.cta:hover{background:#bd1e33;border-color:#bd1e33}
.cta--klein{padding:9px 16px;font-size:.88rem}
.cta--geist{background:transparent;color:var(--papier);border-color:var(--stahl)}
.cta--geist:hover{background:transparent;border-color:var(--papier);color:#fff}
a:focus-visible,.cta:focus-visible{outline:2px solid var(--licht);outline-offset:3px}

/* Hero */
.hero .inner{padding-block:clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-inhalt{max-width:46ch}
.hero h1 span{color:var(--licht)}
.hero .lead{color:var(--stahl)}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.claim{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--licht)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.portraet{position:relative;aspect-ratio:520/813;background-size:cover;background-position:center top;max-width:100%}
.portraet::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(13,20,28,.97) 0%,rgba(13,20,28,.8) 26%,rgba(13,20,28,.35) 60%,rgba(13,20,28,0) 100%)}
.portraet .name{position:absolute;left:14px;bottom:12px;z-index:1;font-family:var(--display);font-weight:800;color:#fff;font-size:.95rem;line-height:1.2}
.portraet .name small{display:block;font-family:var(--text);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stahl);margin-top:3px}
.foto-stefan{background-image:url(bilder/stefan-gross.jpg)}
.foto-andre{background-image:url(bilder/andre-gross.jpg)}
.foto-platz{background:repeating-linear-gradient(135deg,rgba(242,240,234,.06) 0 10px,transparent 10px 20px);border:1px solid var(--linie-dunkel);display:flex;align-items:center;justify-content:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.foto-platz::after{display:none}

/* Faktenstreifen */
.fakten{background:#191F26;border-top:1px solid var(--linie-dunkel);border-bottom:1px solid var(--linie-dunkel)}
.fakten .inner{padding-block:18px;display:flex;gap:10px 36px;flex-wrap:wrap;color:var(--stahl);font-size:.88rem}
.fakten b{color:var(--papier);font-weight:600}

/* Karten */
.gitter{display:grid;gap:clamp(14px,1.6vw,20px)}
.gitter--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gitter--3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.gitter--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.karte{background:#fff;border:1px solid var(--linie-hell);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.band--dunkel .karte{background:rgba(242,240,234,.05);border-color:var(--linie-dunkel);color:var(--stahl)}
.rolle{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tief)}
.band--dunkel .rolle{color:var(--licht)}
.zitat{font-family:var(--display);font-weight:500;font-size:1.12rem;line-height:1.35;color:var(--nacht)}
.schluss{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2}

/* Domaenen */
.domaene{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--linie-dunkel);align-items:baseline}
.domaene .nr{font-family:var(--display);font-weight:800;color:var(--licht);font-size:.85rem;letter-spacing:.04em}
.domaene .name{color:var(--papier);font-weight:600;font-size:.98rem}
.domaene .frage{color:var(--stahl);font-size:.9rem;line-height:1.4;display:block;margin-top:2px}

/* Ergebnisbeispiel */
.balken{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.balken-kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.balken-kopf .name{font-weight:600;font-size:.95rem}
.balken-kopf .wert{font-family:var(--display);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.spur{height:12px;background:var(--papier-tief);border:1px solid var(--linie-hell);margin-top:6px}
.fuellung{height:100%;background:var(--tief)}
.fuellung.hell{background:var(--licht)}
.fussnote{font-size:.8rem;color:var(--schiefer)}
.band--dunkel .fussnote{color:#6b747e}

/* Schritte und Stufen */
.schritt{border-top:2px solid var(--nacht);padding-top:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.schritt .wochen{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tief)}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.liste li{display:flex;gap:12px;line-height:1.45}
.liste li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.52em;background:var(--tief)}
.band--dunkel .liste li::before{background:var(--licht)}

/* Faelle */
.fall{border-top:1px solid var(--linie-hell);padding-top:20px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fall .feld{min-width:0}
.fall .label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tief);display:block;margin-bottom:6px}
.fall .ergebnis{font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.3}

/* Profile */
.profil{display:flex;flex-direction:column;gap:16px;min-width:0}
.profil .bild{aspect-ratio:62/100;background-size:cover;background-position:center}
.pf-andre{background-image:url(bilder/andre.jpg)}
.pf-stefan{background-image:url(bilder/stefan.jpg)}
.pf-max{background-image:url(bilder/max.jpg)}
.profil .funktion{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--licht);margin-top:3px}
.profil p{font-size:.95rem}

/* Abschluss */
.kontaktzeile{font-family:var(--display);font-weight:600;color:var(--papier);font-size:1.05rem;user-select:all}

/* Rechtsseiten */
.seite-recht .inner{max-width:780px}
.seite-recht h1{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--nacht);line-height:1.1}
.seite-recht h3{margin-top:14px;font-size:1rem;text-transform:uppercase;letter-spacing:.08em}
.seite-recht p{font-size:.97rem}
.seite-recht .zurueck{font-size:.85rem;color:var(--tief);text-decoration:none;border-bottom:1px solid var(--linie-hell);align-self:flex-start}
.seite-recht .block{display:flex;flex-direction:column;gap:6px}
.seite-recht .notiz{border:1px dashed var(--linie-hell);padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:rgba(47,100,184,.05)}
.seite-recht .notiz .rolle{color:var(--karmin)}
.seite-recht a{color:var(--tief)}

/* Karussell Diagnostic-Ergebnis */
.kar{margin-top:clamp(22px,3vw,40px);border-top:1px solid var(--linie-dunkel);padding-top:clamp(20px,2.5vw,32px)}
.kar-kopf{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.kar-kopf h3{font-size:clamp(1.15rem,2vw,1.5rem);max-width:30ch;margin-top:6px}
.kar-steuer{display:flex;align-items:center;gap:10px}
.kar-knopf{font:inherit;font-size:1rem;line-height:1;cursor:pointer;background:transparent;color:var(--papier);border:1px solid var(--linie-dunkel);padding:9px 14px}
.kar-knopf:hover{border-color:var(--licht);color:var(--licht)}
.kar-knopf:focus-visible{outline:2px solid var(--licht);outline-offset:2px}
.kar-stand{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--licht);min-width:14ch;text-align:center}
.kar-bild{display:block}
.kar-bild[hidden]{display:none}
.kar-punkte{display:flex;gap:8px;margin-top:18px}
.kar-punkt{width:34px;height:3px;border:0;padding:0;background:var(--linie-dunkel);cursor:pointer}
.kar-punkt[aria-current="true"]{background:var(--licht)}
.kar-punkt:focus-visible{outline:2px solid var(--licht);outline-offset:3px}
.kar-titel{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--licht);margin-bottom:10px}
.kar-satz{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.2;color:var(--papier);margin-bottom:16px;max-width:46ch}

/* Ebene 1: Gesamtbild */
.ebene1{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center}
.gesamt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gesamt .kachel{border:1px solid var(--linie-dunkel);padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.gesamt .kachel.eigen{background:rgba(127,178,255,.12);border-color:rgba(127,178,255,.45)}
.gesamt .zahl{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--papier);font-variant-numeric:tabular-nums}
.gesamt .lab{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stahl)}
.radar{width:100%;height:auto;display:block;max-width:100%}
.legende{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:.82rem;color:var(--stahl)}
.legende i{display:inline-block;width:22px;height:0;border-top-width:2px;border-top-style:solid;margin-right:7px;vertical-align:middle}

/* Ebene 2: Heatmap */
.hm{display:flex;flex-direction:column;gap:6px;min-width:620px}
.hm-roll{overflow-x:auto}
.hm-zeile{display:grid;grid-template-columns:200px minmax(0,1fr) 74px;gap:10px;align-items:stretch}
.hm-dim{display:flex;gap:8px;align-items:flex-start;padding-top:6px;min-width:0}
.hm-dim .nr{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--licht);flex:0 0 auto}
.hm-dim .name{font-size:.86rem;font-weight:600;color:var(--papier);line-height:1.25}
.hm-felder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.feld{padding:8px 9px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;min-height:62px}
.feld .fname{font-size:.71rem;line-height:1.2;color:var(--nacht);opacity:.92;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.feld .fwert{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--nacht);font-variant-numeric:tabular-nums}
.feld.s1{background:rgba(127,178,255,.10)}
.feld.s2{background:rgba(127,178,255,.24)}
.feld.s3{background:rgba(127,178,255,.42)}
.feld.s4{background:rgba(127,178,255,.64)}
.feld.s5{background:rgba(127,178,255,.86)}
.feld.s1 .fname,.feld.s1 .fwert,.feld.s2 .fname,.feld.s2 .fwert{color:var(--papier)}
.feld--schwach{outline:1px solid var(--licht);outline-offset:-1px}
.hm-wert{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px}
.hm-wert b{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--papier);font-variant-numeric:tabular-nums}
.hm-wert span{font-size:.78rem;color:var(--stahl);font-variant-numeric:tabular-nums}
.hm-legende{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:.78rem;color:var(--stahl);align-items:center}
.hm-legende em{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.hm-legende b{display:inline-block;width:20px;height:12px;min-height:0;padding:0}

/* Ebene 3: Prüffragen */
.pf-weg{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.84rem;color:var(--stahl);margin-bottom:14px}
.pf-weg span.stufe{border:1px solid var(--linie-dunkel);padding:4px 9px}
.pf-weg span.stufe.jetzt{border-color:var(--licht);color:var(--licht)}
.pf-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-karte{border:1px solid var(--linie-dunkel);background:rgba(242,240,234,.05);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-kopf{display:flex;gap:10px;align-items:baseline}
.pf-id{font-family:var(--display);font-weight:800;font-size:.76rem;color:var(--licht);font-variant-numeric:tabular-nums}
.pf-karte h4{font-family:var(--display);font-weight:600;font-size:1rem;margin:0;color:var(--papier)}
.pf-frage{font-family:var(--display);font-weight:500;font-size:1.02rem;line-height:1.35;color:var(--papier)}
.pf-zeile{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;font-size:.86rem;line-height:1.4}
.pf-zeile b{font-weight:600;color:var(--licht);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pf-tag{font-size:.72rem;border:1px solid var(--linie-dunkel);padding:3px 8px;color:var(--stahl)}

@media (max-width:860px){
  .ebene1{grid-template-columns:minmax(0,1fr)}
  .pf-gitter{grid-template-columns:minmax(0,1fr)}
  .hm-zeile{grid-template-columns:150px minmax(0,1fr) 62px}
}

/* Fuss */
.fuss{background:var(--nacht);border-top:1px solid var(--linie-dunkel);color:var(--stahl)}
.fuss .inner{padding-block:28px;display:flex;gap:16px 28px;flex-wrap:wrap;align-items:center;font-size:.85rem}
.fuss .entwurf{margin-left:auto;color:#6b747e}
.fuss a{color:var(--stahl);text-decoration:none;border-bottom:1px solid var(--linie-dunkel)}
.fuss a:hover{color:var(--papier)}

@media (max-width:820px){
  .hero .inner{grid-template-columns:minmax(0,1fr)}
  .duo{max-width:460px}
}
@media (max-width:560px){.nav{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}