/* team-scan.ch: Ergänzungen zum Designsystem von teambeschleuniger.ch (system.css).
   Gleiche Tokens, gleiche Regeln: Navy einzige Farbe, Radius 0, Rot nur für Formularfehler,
   Dreiecke nur im Motiv (Naht). */

/* ---------- Kopf ---------- */
.kopf-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: var(--t-klein); color: var(--auf-dunkel-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size 320ms var(--ease), color var(--d-ui) var(--ease); }
.kopf-link:hover, .kopf-link:focus-visible { color: var(--weiss); background-size: 100% 2px; }
.kopf-link .ic { width: 18px; height: 18px; }
@media (max-width: 639px) { .kopf-link { font-size: 0.8125rem; max-width: 11em; line-height: 1.25; } }

/* ---------- Bühne ---------- */
.scan-buehne-raster { display: grid; gap: var(--a-5); align-items: end; }
@media (min-width: 1000px) {
  .scan-buehne-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--spalt); }
  /* Pyramide endet über der Naht, die Navy-Spitze darf sie nicht überdecken */
  .buehne-inhalt.scan-buehne-raster { padding-bottom: calc(var(--naht-hoehe) + clamp(24px, 3vw, 48px)); }
}
.buehne-scan .buehne-titel { max-width: none; font-size: clamp(3rem, 1.2rem + 5.4vw, 7.2rem); line-height: 0.9; }
@media (min-width: 1000px) {
  .buehne-scan .buehne-titel { font-size: clamp(4rem, 0.6rem + 5.2vw, 7.2rem); }
  .buehne-scan .buehne-inhalt { padding-top: clamp(120px, 10vw, 150px); }
  .buehne-scan .scan-buehne-raster { align-items: center; }
}
.buehne-notiz { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: var(--t-klein); color: var(--auf-dunkel-3); }
.buehne-notiz .ic { width: 20px; height: 20px; color: var(--auf-dunkel-2); }
.buehne-notiz a { color: var(--weiss); font-weight: 700; }

/* ---------- Pyramide: fünf Ebenen, unten breit, oben schmal ---------- */
.pyramide { margin: 0; display: grid; gap: 10px; }
.pyramide .label { margin-bottom: 8px; color: var(--hellgrau); }
.py-reihe { --b: calc(100% - var(--stufe) * 14%); width: var(--b); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 6px; }
.py-name { font-weight: 900; font-size: var(--t-klein); letter-spacing: 0.01em; line-height: 1.2; }
.py-wert { grid-row: 1; grid-column: 2; font-size: var(--t-klein); color: var(--auf-dunkel-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.py-wert b { font-weight: 900; color: var(--weiss); }
.py-wert span { margin-left: 6px; font-size: var(--t-label); font-weight: 900; letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--hellgrau); }
.py-spur { grid-column: 1 / -1; position: relative; display: block; height: clamp(30px, 3.4vw, 44px); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.py-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--wert, 0) * 100%); background: var(--weiss); }
.py-lesart { margin-top: 6px; text-align: center; font-size: var(--t-klein); color: var(--auf-dunkel-3); }
.pyramide-vorschau { opacity: 0.92; }
.pyramide-vorschau .py-fill { background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); }
@media (prefers-reduced-motion: no-preference) {
  .pyramide-vorschau .py-fill, .pyramide-ergebnis .py-fill { animation: py-wachsen 1200ms var(--ease) both; animation-delay: calc(300ms + var(--stufe) * 140ms); }
}
@keyframes py-wachsen { from { width: 0; } }
@media (max-width: 999px) {
  .pyramide-vorschau { display: none; }
  .pyramide-ergebnis { margin-top: var(--a-2); }
  .py-reihe { --b: calc(100% - var(--stufe) * 9%); }
}

/* ---------- Die fünf Ebenen ---------- */
.ebenen-liste { margin-top: var(--a-5); border-top: 2px solid var(--dunkelgrau); }
.ebene { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; row-gap: 6px; padding: 26px 0 30px; border-bottom: 1px solid var(--hellgrau); }
.ebene .ic-box, .hebel-eintrag .ic-box { grid-row: 1 / span 3; width: 56px; height: 56px; display: grid; place-items: center; border: 1.5px solid var(--navy); border-radius: 50%; color: var(--navy); }
.ebene .ic-box .ic, .hebel-eintrag .ic-box .ic { width: 26px; height: 26px; }
.ebene .label { color: var(--grau-666); }
.ebene h3 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.8rem); line-height: 1; letter-spacing: -0.035em; }
.ebene p { max-width: 38em; color: var(--grau-666); }
@media (min-width: 900px) {
  .ebene { grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; padding-left: calc(var(--stufe) * 3%); }
  .ebene .ic-box { grid-row: 1 / span 2; }
  .ebene .label { grid-column: 2; }
  .ebene h3 { grid-column: 2; }
  .ebene p { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Ablauf ---------- */
.ablauf-raster { align-items: start; }
.ablauf-raster .titel-h3 { margin-top: var(--a-3); }

/* ---------- Scan: ohne JavaScript ein langes Formular ---------- */
.scan { background: var(--grund); padding-block: var(--luft); }
.scan-form { display: grid; gap: var(--a-6); }
.frage { border: 0; margin-inline: auto; padding: 0; min-width: 0; }
.frage-kopf { display: grid; gap: var(--a-2); padding: 0; margin-bottom: var(--a-2); }
.frage-kopf .label { color: var(--navy); }
.frage-titel { display: block; font-weight: 900; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.035em; color: var(--anthrazit); max-width: 21em; text-wrap: balance; }
.frage-nr { font-weight: 400; color: var(--grau-666); }
.frage-hilfe { color: var(--grau-666); max-width: 40em; margin-bottom: var(--a-3); }
.optionen { display: grid; gap: 12px; max-width: 56rem; }
.option { position: relative; display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 18px; padding: 18px 20px; background: var(--weiss); border: 2px solid var(--hellgrau); cursor: pointer; font-size: var(--t-gross); line-height: 1.45; transition: border-color var(--d-schnell) var(--ease), background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), transform var(--d-ui) var(--ease); }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-buchstabe { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 900; font-size: 0.9375rem; transition: background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease); }
.option-haken { opacity: 0; transform: scale(0.6); transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease); }
.option-haken .ic { width: 24px; height: 24px; }
.option:hover { border-color: var(--navy); }
.option:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.option:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.option:has(input:checked) .option-buchstabe { background: var(--weiss); border-color: var(--weiss); color: var(--navy); }
.option:has(input:checked) .option-haken { opacity: 1; transform: none; }
.option:active { transform: scale(0.995); }
@media (max-width: 639px) { .option { grid-template-columns: 32px 1fr 20px; gap: 14px; padding: 16px; font-size: var(--t-body); } .option-buchstabe { width: 32px; height: 32px; font-size: 0.8125rem; } }

.frage-angaben .formular-scan { max-width: 56rem; box-shadow: none; border: 2px solid var(--hellgrau); }
@media (min-width: 640px) { .zwei-felder-breit { grid-template-columns: 1.6fr 1fr; } }

/* ---------- Scan mit JavaScript: eine Frage pro Bildschirm ---------- */
.js .scan { display: none; }
.scan-an body { background: var(--grund); }
.scan-an .kopf, .scan-an .fuss, .scan-an main > section:not(.scan), .scan-an .skip { display: none; }
.scan-an .scan { display: flex; flex-direction: column; min-height: 100svh; padding: 0; }
.scan-an .scan-leiste, .scan-an .scan-steuerung { display: block; }
.scan-an .scan-leiste[hidden], .scan-an .scan-steuerung[hidden] { display: block; }
.scan-an .scan-form { flex: 1; display: block; padding-block: calc(76px + clamp(28px, 6vh, 72px)) calc(96px + clamp(24px, 5vh, 56px)); }
.scan-an .frage { display: none; width: min(100% - 2 * var(--g), 64rem); }
.scan-an .frage.aktiv { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .scan-an .frage.aktiv { animation: frage-rein 480ms var(--ease) both; }
  .scan-an .frage.aktiv.rueckwaerts { animation-name: frage-zurueck; }
  .scan-an .frage.aktiv .option { animation: frage-rein 520ms var(--ease) both; }
  .scan-an .frage.aktiv .option:nth-child(2) { animation-delay: 60ms; }
  .scan-an .frage.aktiv .option:nth-child(3) { animation-delay: 120ms; }
}
@keyframes frage-rein { from { opacity: 0; transform: translateX(32px); } }
@keyframes frage-zurueck { from { opacity: 0; transform: translateX(-32px); } }

.scan-leiste { position: fixed; inset: 0 0 auto; z-index: 40; background: var(--verlauf-akt-navy); color: var(--weiss); box-shadow: 0 12px 30px -18px rgba(0, 27, 61, 0.6); }
.scan-leiste-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 76px; }
.scan-logo { width: 130px; height: auto; flex: none; }
.fortschritt { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; max-width: 34rem; margin-left: auto; }
.fortschritt-text { font-size: var(--t-label); font-weight: 900; letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--auf-dunkel-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fortschritt-spur { position: relative; display: block; height: 4px; background: rgba(255, 255, 255, 0.22); }
.fortschritt-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--weiss); transition: width 520ms var(--ease); }
.scan-zu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 700 var(--t-klein) var(--schrift); color: var(--auf-dunkel-2); background: none; border: 0; cursor: pointer; }
.scan-zu:hover { color: var(--weiss); }
.scan-zu .ic { width: 22px; height: 22px; }
@media (max-width: 639px) {
  .scan-logo { display: none; }
  .fortschritt { margin-left: 0; grid-template-columns: 1fr; gap: 8px; }
  .scan-zu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.scan-steuerung { position: fixed; inset: auto 0 0; z-index: 40; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--hellgrau); }
.scan-steuerung-inner { display: flex; justify-content: space-between; gap: 12px; padding-block: 14px; width: min(100% - 2 * var(--g), 64rem); }
.scan-steuerung .btn { min-height: 52px; }
.scan-steuerung .btn[disabled] { visibility: hidden; }
.pf-zurueck .ic { transform: rotate(180deg); }
.pf-zurueck .ic + .ic { transform: rotate(180deg) translateX(-140%); }
.btn:hover .pf-zurueck .ic:first-child { transform: rotate(180deg) translateX(140%); }
.btn:hover .pf-zurueck .ic + .ic { transform: rotate(180deg); }
.scan-an .frage-angaben .btn[type="submit"] { width: 100%; }
@media (min-width: 640px) { .scan-an .frage-angaben .btn[type="submit"] { width: auto; } }
.scan-angaben .scan-steuerung [data-weiter] { visibility: hidden; }

/* Warten während der Auswertung */
.warten { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--g); background: var(--verlauf-navy-licht), var(--verlauf-navy); color: var(--weiss); text-align: center; }
.warten[hidden] { display: none; }
.warten-inhalt { width: min(100%, 28rem); }
/* Sanduhr, kantig wie das Dreieck-Motiv: oben rinnt der Sand aus, unten wächst die Pyramide der fünf Ebenen
   Schicht für Schicht. 3.6 s pro Runde, ohne Drehung. */
.sanduhr { display: block; width: 96px; height: auto; margin: 0 auto var(--a-4); overflow: visible; }
.su-glas { fill: none; stroke: var(--weiss); stroke-width: 2.5; stroke-linejoin: miter; stroke-miterlimit: 10; }
.su-deckel { fill: var(--weiss); }
.su-sand-oben { fill: rgba(255, 255, 255, 0.92); }
.su-schicht { fill: rgba(255, 255, 255, 0.92); }
.su-strahl { stroke: rgba(255, 255, 255, 0.92); stroke-width: 2; stroke-dasharray: 3 3; }
@media (prefers-reduced-motion: no-preference) {
  .su-sand-oben { animation: su-oben 3.6s linear infinite; }
  .su-schicht[style*="--i:0"] { animation: su-s0 3.6s linear infinite; }
  .su-schicht[style*="--i:1"] { animation: su-s1 3.6s linear infinite; }
  .su-schicht[style*="--i:2"] { animation: su-s2 3.6s linear infinite; }
  .su-schicht[style*="--i:3"] { animation: su-s3 3.6s linear infinite; }
  .su-schicht[style*="--i:4"] { animation: su-s4 3.6s linear infinite; }
  .su-strahl { animation: su-strahl 3.6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .su-sand-oben { transform: translateY(26px); } .su-schicht:nth-child(n+4) { opacity: 0; } .su-strahl { opacity: 0; } }
/* Oben: bis 78 % leer, dann bleibt er leer; ab 90 % ist die neue Runde voll (während die Schichten ausblenden) */
@keyframes su-oben { 0% { transform: translateY(0); } 78% { transform: translateY(52px); } 88% { transform: translateY(52px); opacity: 1; } 89% { opacity: 0; } 90% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
/* Schicht i erscheint bei i x 15 %, alle bleiben bis 86 % und blenden bis 94 % gemeinsam aus */
@keyframes su-s0 { 0%, 3% { opacity: 0; transform: translateY(-4px); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes su-s1 { 0%, 18% { opacity: 0; transform: translateY(-4px); } 23%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes su-s2 { 0%, 33% { opacity: 0; transform: translateY(-4px); } 38%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes su-s3 { 0%, 48% { opacity: 0; transform: translateY(-4px); } 53%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes su-s4 { 0%, 63% { opacity: 0; transform: translateY(-4px); } 68%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes su-strahl { 0% { opacity: 1; stroke-dashoffset: 0; } 76% { opacity: 1; stroke-dashoffset: -24; } 80%, 100% { opacity: 0; } }
.warten-titel { font-weight: 900; font-size: var(--t-h4); line-height: 1.15; letter-spacing: -0.02em; }
.warten-text { margin-top: 8px; color: var(--auf-dunkel-2); }

/* ---------- Ergebnis ---------- */
.gesamt-zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--a-3); padding-top: var(--a-3); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.gesamt-wert { font-weight: 900; font-size: clamp(3.6rem, 2rem + 6vw, 7.5rem); line-height: 0.85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.gesamt-von { font-weight: 400; font-size: 0.42em; letter-spacing: -0.02em; color: var(--auf-dunkel-2); }
.gesamt-text { font-size: var(--t-klein); color: var(--auf-dunkel-2); }
.buehne-ergebnis .buehne-titel.titel-lang { max-width: 10em; }
.buehne-ergebnis .btn .ic { width: 20px; height: 20px; }
.abschluss .btn .ic { width: 20px; height: 20px; }

.hebel { margin-top: var(--a-5); display: grid; gap: var(--a-4); }
@media (min-width: 900px) { .hebel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } .hebel-eintrag:first-child { grid-column: 1 / -1; } }
.hebel-eintrag { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; row-gap: 6px; align-content: start; padding-top: 24px; border-top: 2px solid var(--dunkelgrau); }
.hebel-eintrag .label { color: var(--grau-666); }
.hebel-eintrag h3 { font-size: var(--t-h4); line-height: 1.1; letter-spacing: -0.025em; }
.hebel-eintrag p { color: var(--anthrazit); font-size: var(--t-gross); line-height: 1.55; max-width: 34em; }
.hebel-eintrag:first-child h3 { font-size: var(--t-h3); }
.hebel-balken { grid-column: 2; display: block; height: 6px; margin-top: 10px; background: var(--grund); max-width: 22rem; }
.hebel-balken span { display: block; height: 100%; width: calc(var(--wert) * 100%); background: var(--navy); }

.einordnung { display: grid; gap: var(--a-4); }
@media (min-width: 1000px) { .einordnung { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: var(--spalt); } }
.einordnung .titel-h3 { margin-top: var(--a-3); }

.antworten-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; border-top: 2px solid var(--dunkelgrau); border-bottom: 1px solid var(--hellgrau); cursor: pointer; list-style: none; }
.antworten-details summary::-webkit-details-marker { display: none; }
.antworten-details summary::after { content: "+"; font-weight: 300; font-size: 2rem; line-height: 1; color: var(--navy); transition: transform var(--d-ui) var(--ease); }
.antworten-details[open] summary::after { transform: rotate(45deg); }
.antworten-details summary:hover h2 { color: var(--navy); }
.prosa-breit { max-width: none; margin-top: var(--a-3); overflow-x: auto; }
.prosa-breit table { font-size: 0.9375rem; min-width: 640px; }
.prosa-breit td:last-child, .prosa-breit th:last-child { text-align: right; }
.neustart { margin-top: var(--a-4); }
.neustart .ic { width: 20px; height: 20px; }

/* Der Fragentitel bekommt den Fokus nur fürs Vorlesen (tabindex -1), ohne sichtbaren Rahmen */
.frage-kopf:focus, .frage-kopf:focus-visible { outline: none; }