/* Dibicon Quizfunnel "Kursplatz-Auswertung" · Klon-Modus
   Maße und Verhältnisse: Skelett peter-at_solar_termin_2026-08. Farbe, Schrift, Radien: DESIGN.md.
   Drei Oberflächen aus einem Quelltext: html[data-theme="a|b|c"]. Gemessen wird A. */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Marken-Werte (DESIGN.md) ---------- */
:root{
  --navy:#000A3A; --navy-2:#0D1644; --blau:#003DD4; --blau-h:#1A52E8;
  --hell:#F6F6F6; --warm:#F0EFEF; --weiss:#FFFFFF; --gedaempft:#94A3B8;
  /* Hellgrau mit Navy-Stich fuer den Quiz-Kasten, neutrales Grau steht auf der Bannliste.
     Auf dunklem Grund die helle Entsprechung, damit Sekundaertext nicht blass wirkt. */
  --quiz-flaeche:#EFF2F9; --leise-dunkel:#B8C4DA;
  --gruen:#22C55E; --rot:#EF4444; --linie-dunkel:#242B50;
  --verlauf:linear-gradient(90deg,#000A3A,#003DD4);
  --r-klein:6px; --r-knopf:8px; --r-karte:24px;
  --kurve:cubic-bezier(.22,.61,.36,1);
  --kopf-h:135px;              /* Countdown 92 + Leiste 43, ab 768: 70 + 43 */
  --q-titel:20px;              /* Frage-Titel. Aufnahme zeigt 20px mobil / 24px Rechner. Eichliste nennt 16px. */
  --schrift:"Montserrat",Georgia,serif;
  /* Abgeleitet aus Deep Navy, damit Text auf hellen Flächen AA hält (gedaempft #94A3B8 schafft auf Weiß nur 2,6:1) */
  --tinte-85:rgba(0,10,58,.85); --tinte-70:rgba(0,10,58,.72); --tinte-62:rgba(0,10,58,.64); --tinte-45:rgba(0,10,58,.45); --tinte-18:rgba(0,10,58,.18);
  --hell-88:rgba(255,255,255,.88);
}
/* A · hell wie das Vorbild */
html{
  --grund:#FFFFFF; --text:#000A3A; --leise:rgba(0,10,58,.72); --linie:rgba(0,10,58,.14);
  --kopf-bg:#FFFFFF; --kopf-text:#000A3A; --kopf-linie:rgba(0,10,58,.12);
  --hero-bg:#FFFFFF; --hero-text:#000A3A; --hero-leise:rgba(0,10,58,.72);
  --karte-bg:#FFFFFF; --karte-linie:rgba(0,10,58,.16);
  --tab-akzent-bg:rgba(0,61,212,.07);
  --dunkel-bg:#000A3A; --fuss-bg:#000A3A; --zahl:#000A3A;
  --haken-bg:#000A3A; --haken-fg:#FFFFFF;
  color-scheme:light;
}
/* B · Navy-Marke */
html[data-theme="b"]{
  --grund:#000A3A; --text:#FFFFFF; --leise:#94A3B8; --linie:#242B50;
  --kopf-bg:#000A3A; --kopf-text:#FFFFFF; --kopf-linie:#242B50;
  --hero-bg:#000A3A; --hero-text:#FFFFFF; --hero-leise:#94A3B8;
  --karte-bg:#0D1644; --karte-linie:#242B50;
  --tab-akzent-bg:rgba(0,61,212,.24);
  --dunkel-bg:#0D1644; --fuss-bg:#0D1644; --zahl:#22C55E;
  --haken-bg:#FFFFFF; --haken-fg:#000A3A;
  color-scheme:dark;
}
/* C · geteilt: Kopf und Angebots-Kopf Navy, ab dem Quiz hell */
html[data-theme="c"]{
  --kopf-bg:#000A3A; --kopf-text:#FFFFFF; --kopf-linie:#242B50;
  --hero-bg:#000A3A; --hero-text:#FFFFFF; --hero-leise:#94A3B8; --zahl:#22C55E;
  --haken-bg:#FFFFFF; --haken-fg:#000A3A;
}

/* ---------- Grund ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:16px;line-height:1.5;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,61,212,.15)}
a,summary{-webkit-tap-highlight-color:rgba(0,61,212,.15);touch-action:manipulation}
:focus-visible{outline:3px solid var(--blau-h);outline-offset:2px;border-radius:var(--r-klein)}
.dunkel :focus-visible,.prinzip :focus-visible,.fuss :focus-visible{outline-color:#FFFFFF}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:fixed;left:16px;top:12px;z-index:100;background:var(--blau);color:#fff;padding:12px 16px;border-radius:var(--r-knopf);text-decoration:none}
.sprung:not(:focus){width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
.wrap-schmal{max-width:1004px;padding-left:32px;padding-right:32px}
[data-anker]{scroll-margin-top:calc(var(--kopf-h) + 16px)}

/* Einblenden beim Scrollen: Leben-Pass (leben.css, .leben-auftritt) */

/* ---------- b01 Countdown + b02 Kopf (kleben gemeinsam, fest oben wie beim Vorbild) ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50}
.cd{background:var(--verlauf);color:#fff;padding:10px 20px}
.cd-innen{display:flex;flex-direction:column;align-items:center;gap:10px}
.cd-text{font-size:16px;line-height:24px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.cd-text .trenner::before{content:"·";opacity:.85}
.cd-kaesten{display:flex;gap:10px;align-items:center}
.cd-k{display:flex;align-items:center;gap:5px}
.cd-z{display:block;width:50px;padding:10px 0;border-radius:var(--r-klein);background:rgba(255,255,255,.15);text-align:center;
  font-size:20px;line-height:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cd-e{font-size:12px;line-height:12px}
.cd[data-zustand="neu"] .cd-kaesten{opacity:.55}

.leiste{background:var(--kopf-bg);color:var(--kopf-text);border-bottom:1px solid var(--kopf-linie)}
.leiste-innen{max-width:1240px;margin:0 auto;padding:0 16px;height:42px;display:flex;align-items:stretch;justify-content:space-between;gap:12px}
.marke{position:relative;display:flex;align-items:center;min-width:44px;text-decoration:none}
.marke::after{content:"";position:absolute;inset:-2px -8px}
.marke img{height:17px;width:auto}
.marke .logo-hell{display:none}
html[data-theme="b"] .marke .logo-dunkel,html[data-theme="c"] .marke .logo-dunkel{display:none}
html[data-theme="b"] .marke .logo-hell,html[data-theme="c"] .marke .logo-hell{display:block}
.zaehler{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1;white-space:nowrap;min-width:0}
.zaehler b{font-weight:700;color:var(--zahl);font-variant-numeric:tabular-nums;display:inline-flex;gap:4px}
.zaehler .zahl{display:inline-block;min-width:2ch;text-align:right}
.zaehler .pfeil{flex:none;width:14px;height:14px;border-radius:50%;background:var(--gruen);display:grid;place-items:center}
.zaehler .pfeil svg{width:8px;height:8px}
.zaehler .pfeil.puls{animation:puls .9s var(--kurve)}
@keyframes puls{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ---------- b03 Angebots-Kopf ---------- */
.s-hero{background:var(--hero-bg);color:var(--hero-text)}
.s-hero .wrap{padding-left:16px;padding-right:16px;padding-top:calc(var(--kopf-h) + 12px)}
.hero-raster{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}
.pille{justify-self:start;display:inline-block;background:var(--verlauf);color:#fff;font-size:14px;line-height:20px;padding:6px 12px;border-radius:var(--r-klein)}
html[data-theme="b"] .pille,html[data-theme="c"] .pille{background:var(--blau)}
.h1{font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-align:left}
.hero-unterzeile{font-size:16px;line-height:1.5;color:var(--hero-leise)}
.punkte{display:flex;flex-direction:column;gap:8px}
.punkt{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.35}
.punkt .zeichen{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--haken-bg);color:var(--haken-fg)}
.punkt .zeichen svg{width:16px;height:16px}
.punkt-geschenk{color:var(--blau)}
.punkt-geschenk .zeichen{background:linear-gradient(180deg,#000A3A,#003DD4);color:#fff}
html[data-theme="b"] .punkt-geschenk,html[data-theme="c"] .punkt-geschenk{color:#fff}
html[data-theme="b"] .punkt-geschenk .t,html[data-theme="c"] .punkt-geschenk .t{background:var(--blau);padding:1px 8px;border-radius:var(--r-klein);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme="b"] .punkt-geschenk .zeichen,html[data-theme="c"] .punkt-geschenk .zeichen{background:var(--blau)}
.hero-bild{display:none}
.buch{position:relative;width:176px;aspect-ratio:636/900;transform:perspective(900px) rotateY(-16deg) rotateZ(1.2deg);transform-origin:left center;
  border-radius:0 6px 6px 0;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,14px 18px 28px rgba(0,10,58,.28),3px 4px 8px rgba(0,10,58,.22)}
.buch img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.buch::after{content:"";position:absolute;inset:0 auto 0 0;width:10px;border-radius:0;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%,rgba(0,10,58,.22))}

/* ---------- b04 Quiz ---------- */
.s-quiz{background:var(--grund)}
html[data-theme="c"] .s-quiz{padding-top:0}
.s-quiz .wrap{padding-left:16px;padding-right:16px;padding-top:8px}
.quizblock{display:flex;flex-direction:column;gap:16px}
.quiz-kopf{position:relative}
/* Bis 767 steht der Pfeil in einer eigenen Spalte rechts neben der H2 und zeigt auf den Kastenrand, wie im Vorbild
   ("von rechts oben auf das Quiz"). Vorher lief die Spitze auf jeder Handybreite durch die Frage
   (design-council 18.10.2026, gemessen gegen alle sieben Fragetitel von 320 bis 767). */
.h2-quiz{font-size:20px;line-height:1.2;font-weight:700;text-align:left;padding-right:48px}
.pfeil-hand{position:absolute;right:0;bottom:-30px;width:38px;height:80px;color:var(--blau);z-index:3;pointer-events:none}
html[data-theme="b"] .pfeil-hand{color:#FFFFFF}
.quiz-kasten{position:relative;background:var(--quiz-flaeche);color:#000A3A;border-radius:var(--r-karte);padding:16px;--q-leise:var(--tinte-70)}
.quiz-innen{margin:0 auto;max-width:800px}
.quiz-innen.schmal{max-width:400px}
.q-fortschritt{padding:8px 0;overflow:hidden}
.q-balken{height:2px;background:rgba(34,197,94,.28);position:relative;overflow:hidden}
.q-balken i{position:absolute;inset:0;background:var(--gruen);transform-origin:left center;transform:scaleX(.08);transition:transform .45s var(--kurve)}
.q-buehne{min-height:180px}
.q-schritt{animation:q-rein .32s var(--kurve) both}
@keyframes q-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-titel{font-size:var(--q-titel);line-height:1.3;font-weight:400;text-align:center;padding-top:8px;text-wrap:balance}
.q-titel:focus{outline:none}
.q-frage-zeile{font-size:16px;line-height:1.5;text-align:center;margin-top:8px}
.q-zusatz{font-size:14px;line-height:1.45;text-align:center;color:var(--q-leise);margin-top:6px}
.q-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:10px}
.q-kachel{appearance:none;border:1px solid transparent;background:#fff;border-radius:var(--r-knopf);cursor:pointer;min-height:98px;padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  font-size:15px;line-height:1.2;letter-spacing:.02em;color:#000A3A;
  box-shadow:0 1px 2px rgba(0,10,58,.10),0 4px 10px rgba(0,10,58,.10);transition:transform .15s var(--kurve),box-shadow .15s var(--kurve),border-color .15s}
.q-kachel svg{width:28px;height:28px;flex:none}
.q-kacheln.gross .q-kachel{min-height:143px;padding:14px 8px 12px;gap:10px}
.q-kacheln.gross .q-kachel svg{width:96px;height:72px}
.q-kacheln.nurtext .q-kachel{min-height:58px}
/* Rolle und Zulassung (seit 06.11.2026): Zeilen untereinander, auf jeder Breite lesbar und gut zu tippen */
.q-kacheln.liste{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.q-kacheln.liste .q-kachel{flex-direction:row;justify-content:flex-start;text-align:left;min-height:56px;padding:12px 16px;gap:12px}
.q-kacheln.liste .q-kachel::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--blau);background:#fff}
.q-kacheln.liste .q-kachel[aria-pressed="true"]::before{background:var(--blau);box-shadow:inset 0 0 0 3px #fff}
/* Schluss-Bildschirm für Gründer und Teilnehmer: nur Text und Zurück */
.q-aussortiert .q-titel{padding-top:20px}
.q-aussortiert .q-satz{text-align:center;max-width:44ch;margin:14px auto 0}
.q-aussortiert .q-fuss{justify-content:center}
.q-aussortiert .q-zurueck{min-height:44px;padding:10px 18px;border:1px solid var(--q-leise);border-radius:var(--r-knopf);color:#000A3A;font-size:15px}
.q-raus .quiz-kopf{display:none}
.q-kachel:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,10,58,.12),0 10px 20px rgba(0,10,58,.14)}
.q-kachel:active{transform:translateY(0)}
.q-kachel[aria-pressed="true"]{border-color:var(--blau);box-shadow:0 0 0 2px var(--blau)}
.q-fuss{min-height:72px;display:flex;align-items:flex-end;padding:20px 0 0}
.q-zurueck{appearance:none;border:0;background:none;cursor:pointer;color:var(--q-leise);font-size:13px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:8px;
  padding:0 12px 0 10px;min-height:32px;position:relative;border-radius:var(--r-klein)}
.q-zurueck::after{content:"";position:absolute;inset:-8px -6px}
.q-zurueck:hover{color:#000A3A}
.q-zurueck svg{width:14px;height:14px}
/* Eingabe-Bildschirme */
.q-form{display:flex;flex-direction:column;gap:10px;padding-top:20px}
.q-felder-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.q-feld label{font-size:14px;line-height:1.3;color:var(--tinte-85)}
.q-eingabe{width:100%;height:44px;border:1px solid #000A3A;border-radius:var(--r-knopf);background:#fff;color:#000A3A;padding:0 12px;font-size:18px;line-height:1.2}
.q-eingabe::placeholder{color:var(--tinte-62);opacity:1}
.q-eingabe:focus-visible{outline:2px solid #000A3A;outline-offset:0;border-radius:var(--r-knopf)}
.q-feld.fehler .q-eingabe,.q-feld.fehler .q-tel{border-color:var(--rot)}
.q-fehler{display:none;align-items:flex-start;gap:6px;font-size:14px;line-height:1.35;color:#000A3A;background:rgba(239,68,68,.10);border-radius:0 0 var(--r-knopf) var(--r-knopf);padding:8px 12px;margin-top:-8px}
.q-feld.fehler .q-fehler{display:flex}
.q-fehler svg{flex:none;width:12px;height:12px;margin-top:3px;color:var(--rot)}
.q-hinweis{font-size:14px;line-height:1.45;color:var(--tinte-85)}
.q-tel{display:flex;border:1px solid #000A3A;border-radius:var(--r-knopf);background:#fff;overflow:hidden}
.q-tel:focus-within{outline:2px solid #000A3A}
.q-tel select{appearance:none;-webkit-appearance:none;border:0;border-right:1px solid #000A3A;background-color:#fff;color:#000A3A;height:42px;padding:0 26px 0 10px;font-size:16px;border-radius:0;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000A3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:10px 6px}
.q-tel input{flex:1;min-width:0;border:0;height:42px;padding:0 12px;font-size:18px;background:#fff;color:#000A3A;border-radius:0}
.q-tel select:focus-visible,.q-tel input:focus-visible{outline:none}
.knopf{appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blau);color:#fff;
  font-size:16px;line-height:24px;font-weight:600;border-radius:var(--r-knopf);padding:12px 16px 12px 20px;min-height:49px;transition:background-color .2s,transform .15s var(--kurve)}
.knopf:hover{background:var(--blau-h)}
.knopf:active{transform:translateY(1px)}
.knopf svg{flex:none;width:18px;height:18px}
.q-weiter{width:100%;min-height:55px;letter-spacing:.06em;font-weight:600;margin-top:2px}
.q-weiter[aria-busy="true"]{pointer-events:none;opacity:.85}
.q-weiter .dreher{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dreh 1s linear infinite}
.q-weiter[aria-busy="true"] .dreher{display:block}
.q-weiter[aria-busy="true"] svg{display:none}
.q-recht{font-size:12px;line-height:1.45;color:var(--tinte-85)}
.q-recht a{color:inherit;text-underline-offset:2px}
/* Ladebildschirm */
.q-lade{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 0 12px}
.q-lade .q-titel{padding-top:20px;padding-bottom:20px}
.q-ring{width:126px;height:126px;margin:20px 0;border-radius:50%;border:2px solid var(--tinte-18);border-right-color:#000A3A;animation:dreh 1.1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.q-beweis{display:flex;gap:8px;align-items:flex-start;justify-content:center;font-size:16px;line-height:1.45;padding:20px 0;max-width:420px}
.q-beweis svg{flex:none;width:16px;height:16px;margin-top:4px;color:#000A3A}
/* Fester Rahmen ab Schritt 8 */
.q-rahmen{display:flex;flex-direction:column;align-items:stretch}
.q-gruen{align-self:center;display:inline-flex;gap:6px;align-items:flex-start;background:#fff;border-radius:var(--r-klein);padding:6px 10px;margin:10px 0;font-size:12px;line-height:1.4;color:var(--tinte-85);text-align:left}
.q-gruen svg{flex:none;width:12px;height:12px;margin-top:2px;color:#000A3A}
.q-rahmen .q-titel{padding-top:0}
.q-karte{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:stretch;background:#fff;border-radius:var(--r-knopf);overflow:hidden;margin-top:20px;min-height:92px}
.q-karte-text{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 12px;text-align:center}
.q-karte-z1{font-size:14px;line-height:1.3;font-weight:700}
.q-karte-z1 .verwischt{display:inline-block;filter:blur(5px);-webkit-user-select:none;user-select:none;pointer-events:none;font-variant-numeric:tabular-nums;padding:0 2px}
.q-karte-z2,.q-karte-z3{font-size:12px;line-height:1.35;color:var(--tinte-85)}
.q-karte-bild{background:linear-gradient(135deg,#000A3A,#0D1644);display:grid;place-items:center;padding:8px}
.q-karte-bild img{height:76px;width:auto;border-radius:0;box-shadow:4px 5px 10px rgba(0,10,58,.45)}
.q-satz{font-size:16px;line-height:1.4;color:var(--tinte-85);margin-top:14px}

/* ---------- b05 Vertrauen ---------- */
.s-vertrauen{background:var(--grund)}
.s-vertrauen .wrap{padding:32px 16px 64px}
.vertrauen{display:flex;flex-direction:column;gap:32px}
.v-gruppe{display:flex;flex-direction:column;align-items:center;gap:8px}
.v-gruppe + .v-gruppe{border-top:1px solid var(--linie);padding-top:32px}
.v-titel{font-size:16px;line-height:1.5;color:var(--leise);text-align:center}
.logo-band{display:flex;gap:24px;justify-content:center;align-items:center}
.logo-band img{width:88px;height:88px}
.logo-platte{width:88px;height:88px;border-radius:var(--r-knopf);background:#fff;border:1px solid var(--karte-linie);display:grid;place-items:center;padding:8px}
.logo-platte img{width:100%;height:auto}
/* Kundenlogos auf weißen Platten: b05 (zwölf), b07 (je eins), d05 (die vier Fallstudien).
   Gleiche Höhe statt gleicher Breite, sonst wirken breite Wortmarken laut und hohe Zeichen winzig. */
.kunden-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:440px;margin-top:8px}
.kunden-logos li{height:72px;background:#fff;border:1px solid var(--karte-linie);border-radius:var(--r-knopf);display:grid;place-items:center;padding:10px 12px}
.kunden-logos img,.fall-logo img{width:auto;height:auto;max-width:100%;max-height:36px}
.kunden-logos img.hoch{max-height:48px}
.kunden-logos .nur-gross{display:none}

/* ---------- b06 Prinzip ---------- */
.prinzip{background:var(--verlauf);color:#fff;padding:60px 0}
.prinzip .wrap{padding:32px 16px;display:flex;flex-direction:column;gap:40px}
.h2{font-size:22px;line-height:1.25;font-weight:700;text-align:center;text-wrap:balance}
.schritte{display:flex;flex-direction:column;max-width:940px;margin:0 auto;width:100%}
.schritt{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px}
.schritt .bild{display:none}
.schritt .nr{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center}
.schritt .nr b{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:#000A3A;display:grid;place-items:center;font-size:20px;font-weight:400}
.schritt .nr i{flex:1;width:1px;background:#fff}
.schritt:last-child .nr i{display:none}
.schritt .inhalt{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:8px;padding:4px 0 40px}
.schritt:last-child .inhalt{padding-bottom:0}
.schritt h3{font-size:18px;line-height:1.5;font-weight:700}
.schritt a{position:relative;align-self:flex-start;font-size:16px;line-height:1.5;color:#fff;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.schritt a::after{content:"";position:absolute;inset:-10px -8px}
.schritt a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- b07 Fallstudie ---------- */
.stimmen{background:var(--grund)}
.stimmen .wrap{padding:32px 16px 24px;display:flex;flex-direction:column;gap:40px}
/* Vier Fallstudien statt Kundenfoto (Arta 17.10.2026). Ergebnis groß, Firma darunter, ein Satz Beleg. */
.faelle{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:940px;margin:0 auto;width:100%}
.fall{background:var(--karte-bg);border:1px solid var(--karte-linie);border-radius:var(--r-karte);padding:24px;display:flex;flex-direction:column}
.fall-logo{align-self:flex-start;height:72px;min-width:120px;max-width:100%;background:#fff;border:1px solid var(--karte-linie);border-radius:var(--r-knopf);display:grid;place-items:center;padding:10px 16px;margin-bottom:20px}
.fall-logo img{max-width:200px;max-height:40px}
.fall-logo img.hoch{max-height:50px}
.fall-zahl{display:flex;flex-direction:column;gap:2px}
.fall-zahl b{font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:var(--blau);font-variant-numeric:tabular-nums}
html[data-theme="b"] .fall-zahl b{color:#fff}
/* Pfeil als Zeichnung: Montserrat hat kein →, die Ersatzschrift sitzt je Gerät anders */
.fall-wert{display:flex;align-items:center;gap:10px;align-self:flex-start;white-space:nowrap}
.fall-wert svg{width:24px;height:24px;flex:none;opacity:.7}
.fall-zahl > span{font-size:14px;line-height:1.4;color:var(--tinte-85)}   /* wie .fall-ort: mit --leise soff die Zeile ab (design-council 18.10.2026, Runde 2) */
html[data-theme="b"] .fall-zahl > span{color:var(--leise)}
.fall-name{font-size:18px;line-height:1.35;font-weight:700;margin-top:16px}
.fall-ort{font-size:14px;line-height:1.4;color:var(--tinte-85);margin-top:2px}   /* 14px dünn: mit --leise nur 4,1:1 am Pixel (Leben-Pass Tor E, 18.10.2026) */
html[data-theme="b"] .fall-ort{color:var(--leise)}
.fall-satz{font-size:16px;line-height:1.5;margin-top:12px}

/* ---------- b08 Vergleich ---------- */
.vergleich{background:var(--grund)}
.vergleich .wrap{padding:0 0 48px;display:flex;flex-direction:column;gap:32px}
.vergleich .h2{padding:0 16px}
.vg-tabelle{width:100%;max-width:940px;margin:0 auto;border-collapse:separate;border-spacing:0;table-layout:fixed}
.vg-tabelle col.c1{width:auto}.vg-tabelle col.c2{width:66px}.vg-tabelle col.c3{width:96px}
/* Kriterien in Fließtextgröße, Spaltenkopf 14 (xs): mit 14 und 13 lasen sie sich am Handy kleiner als der
   Rest der Seite (design-council 18.10.2026). Gemessen: kein Überlauf in den Zellen von 320 bis 767. */
.vg-tabelle th,.vg-tabelle td{height:64px;padding:0 8px;border-bottom:1px solid var(--linie);font-size:16px;line-height:1.35;font-weight:400;text-align:left;vertical-align:middle}
.vg-tabelle thead th{font-weight:700}
.vg-tabelle thead th.c-gegner{font-size:14px;line-height:1.3;text-align:center;padding:0 6px}
.vg-tabelle th{overflow-wrap:break-word;hyphens:manual}
.vg-tabelle .c-wir,.vg-tabelle .c-gegner{text-align:center}
.vg-tabelle .c-wir{background:var(--tab-akzent-bg);border-left:1px solid var(--blau);border-right:1px solid var(--blau);border-bottom-color:rgba(0,61,212,.25)}
.vg-tabelle thead .c-wir{border-top:1px solid var(--blau);border-radius:var(--r-knopf) var(--r-knopf) 0 0}
.vg-tabelle tbody tr:last-child td{border-bottom-color:transparent}
.vg-tabelle tbody tr:last-child .c-wir{border-bottom:1px solid var(--blau);border-radius:0 0 var(--r-knopf) var(--r-knopf)}
.vg-tabelle .c-wir img{height:12px;width:auto;margin:0 auto}
.vg-tabelle .logo-hell{display:none}
html[data-theme="b"] .vg-tabelle .logo-dunkel{display:none}
html[data-theme="b"] .vg-tabelle .logo-hell{display:block}
.vg-z{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin:0 auto;color:#fff}
.vg-z svg{width:16px;height:16px}
.vg-ja{background:var(--gruen)}.vg-nein{background:var(--rot)}
.vg-teils{background:transparent;border:2px solid var(--tinte-45);color:var(--tinte-85)}
html[data-theme="b"] .vg-teils{border-color:var(--gedaempft);color:var(--gedaempft)}

/* ---------- b09 FAQ + b10 Abschluss ---------- */
.dunkel{background:var(--dunkel-bg);color:#fff}
.fragen .wrap{padding:80px 20px}
.faq{display:flex;flex-direction:column;gap:40px;max-width:1160px;margin:0 auto}
.faq-kopf h2{font-size:20px;line-height:1.4;font-weight:400}
.faq-liste{min-width:0}
.faq details{border-top:1px solid #fff}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:20px;line-height:1.4;font-weight:400}
.faq summary .plus{flex:none;width:24px;height:24px;margin-top:2px;transition:transform .25s var(--kurve)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq-antwort{padding-bottom:24px;font-size:16px;line-height:1.55;color:var(--hell-88);animation:q-rein .3s var(--kurve) both}
.faq-knopf{margin-top:40px;display:flex}
.faq-knopf .knopf{min-height:49px}

/* ---------- b11 Fuß ---------- */
.fuss{background:var(--fuss-bg);color:#fff}
html[data-theme="b"] .fuss{border-top:1px solid #242B50}
.fuss .wrap{padding:80px 20px 24px;display:flex;flex-direction:column;gap:40px}
.fuss-oben{display:flex;flex-direction:column;gap:40px}
.fuss-titel{font-size:16px;color:var(--leise-dunkel);margin-bottom:32px;font-weight:400}
.fuss-links{display:flex;flex-direction:column;gap:16px}
.fuss-links a{position:relative;align-self:flex-start;text-decoration:none;font-size:16px;line-height:1.5;transition:opacity .2s}
.fuss-links a::after{content:"";position:absolute;inset:-10px -12px}
.fuss-links a:hover{opacity:.6}
.fuss-anschrift{font-style:normal;font-size:16px;line-height:1.5;color:var(--leise-dunkel)}
.fuss-marke{width:160px;height:auto}   /* Arta 17.10.2026: vorher volle Breite, „viel zu groß" */
.fuss-unten{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5}

/* ================= Danke-Seite ================= */
.d-kopf{background:var(--hero-bg);color:var(--hero-text)}
.d-kopf .wrap{padding:32px 20px 0;display:flex;flex-direction:column;align-items:center;gap:20px}
.d-marke img{height:30px;width:auto}
.d-marke .logo-hell{display:none}
html[data-theme="b"] .d-marke .logo-dunkel,html[data-theme="c"] .d-marke .logo-dunkel{display:none}
html[data-theme="b"] .d-marke .logo-hell,html[data-theme="c"] .d-marke .logo-hell{display:block}
.d-fortschritt{width:100%;max-width:760px}
.d-prozent{display:block;text-align:right;font-size:16px;line-height:1.5;padding-right:28px;font-variant-numeric:tabular-nums}
.d-balken{height:14px;border-radius:var(--r-knopf);background:rgba(0,10,58,.08);overflow:hidden;margin-top:8px}
html[data-theme="b"] .d-balken,html[data-theme="c"] .d-balken{background:rgba(255,255,255,.14)}
.d-balken i{display:block;height:100%;width:100%;border-radius:var(--r-knopf);background:var(--blau);transform-origin:left center;transform:scaleX(.87)}
.js .d-balken i{animation:d-fuellen 1.2s var(--kurve) both}
@keyframes d-fuellen{from{transform:scaleX(.2)}to{transform:scaleX(.87)}}
.d-auftrag{background:var(--hero-bg);color:var(--hero-text)}
.d-auftrag .wrap{padding:48px 20px 0;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.d-h1{font-size:26px;line-height:1.3;font-weight:400;text-align:center}
.d-h1 span{display:block}
.e-satz{font-size:16px;line-height:1.6;color:var(--hero-leise);max-width:500px;text-align:center}
.d-video{background:var(--hero-bg)}
.d-video .wrap{padding:40px 20px 0}
.video-rahmen{position:relative;width:100%;max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-knopf);overflow:hidden;background:#000A3A}
.video-rahmen img,.video-rahmen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ton-pille{position:absolute;left:10px;top:10px;z-index:2;appearance:none;border:2px solid #fff;background:var(--blau);color:#fff;border-radius:var(--r-knopf);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;line-height:1;padding:0 12px;min-height:34px}
.ton-pille::after{content:"";position:absolute;inset:-6px}
.ton-pille svg{width:16px;height:16px}
.abspiel{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,10,58,.35);transition:transform .2s var(--kurve)}
.abspiel svg{width:22px;height:22px;margin-left:3px}
.untertitel-leiste{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;width:90%;pointer-events:none}
.untertitel-leiste span{background:#000A3A;color:#fff;font-size:13px;line-height:1.3;padding:1px 6px;border-radius:0;white-space:nowrap}
.untertitel-leiste span b{background:var(--blau);font-weight:400;padding:0 3px;border-radius:0}
.untertitel-leiste:empty{display:none}
.d-aktion{background:var(--hero-bg);color:var(--hero-text)}
.d-aktion .wrap{padding:20px 20px 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}   /* 32 schob den Knopf bei 390x844 um 9px unter den ersten Bildschirm (design-council 18.10.2026, Runde 2) */
.d-vorzeile{font-size:14px;line-height:1.5;color:var(--tinte-85);max-width:420px}   /* wie .fall-ort: 14px mit 72 % nur 4,2:1 am Pixel */
html[data-theme="b"] .d-vorzeile,html[data-theme="c"] .d-vorzeile{color:var(--hero-leise)}
.d-knopf{padding:12px 20px 12px 24px}
.d-zeile{background:var(--hero-bg);color:var(--hero-text)}
.d-zeile .wrap{padding:28px 20px 72px;display:flex;flex-direction:column;align-items:center;gap:12px}
.d-zeile p{font-size:18px;line-height:1.5;text-align:center}
.d-zeile .logo-platte{width:132px;height:64px;padding:8px 14px}
.d-logos{max-width:340px;margin-top:4px}
.d-logos li{height:64px}
.einwand .wrap{padding:80px 20px}
.h2-zwei{font-size:26px;line-height:1.35;font-weight:400;text-align:center}
.h2-zwei span{display:block}
.gold{display:inline-block !important;margin-top:4px;background:var(--blau);color:#fff;padding:1px 10px;border-radius:var(--r-klein)}
.hell-flaeche .gold{background:none;color:var(--blau);padding:0}
html[data-theme="b"] .hell-flaeche .gold{background:var(--blau);color:#fff;padding:1px 10px}
.einwand .e-satz{color:var(--hell-88);margin:20px auto 0}
.e-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:1160px;margin:48px auto 0}
.e-kachel{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--r-knopf);overflow:hidden;cursor:pointer;background:#0D1644;text-align:left}
@supports (width:1cqi){.e-kachel{container-type:inline-size}}
.e-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--kurve)}
.e-kachel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,10,58,.55),rgba(0,10,58,0) 62%)}
.e-kachel:hover img{transform:scale(1.03)}
.e-kachel:hover .abspiel{transform:scale(1.08)}
.e-frage{position:absolute;z-index:2;left:6%;top:50%;transform:translateY(-50%) rotate(-2deg);max-width:64%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-size:clamp(16px,4.4vw,22px);line-height:1.12;font-weight:700;color:#000A3A}
@supports (width:1cqi){.e-frage{font-size:clamp(16px,4.9cqi,28px)}}
.e-frage .z{background:#fff;padding:3px 9px;border-radius:0;white-space:normal;overflow-wrap:break-word}
.e-frage .z.hl{background:var(--blau);color:#fff}
.e-frage .z:not(.hl) strong{background:var(--blau);color:#fff;padding:0 3px;margin:0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.e-kachel .abspiel{z-index:3;left:82%}
.e-hinweis{margin-top:20px;text-align:center;font-size:14px;color:var(--gedaempft);min-height:21px}
/* d06 Antwort als Reel (Arta, 16.10.2026): Eugens Antworten sind hochkant. Ein Tipp öffnet sie über den ganzen Handy-Bildschirm,
   am Rechner mittig in voller Höhe. Bedienung unten in Daumenreichweite, Schließen zusätzlich oben (Design-Prüfer 16.10.2026).
   Das Danke-Video oben bleibt quer. */
html.reel-offen,html.reel-offen body{overflow:hidden}
.reel{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,10,58,.94);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior:contain;opacity:0;transition:opacity .2s var(--kurve)}
.reel.da{opacity:1}
.reel[hidden]{display:none}
.reel-buehne{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;background:#000A3A}
.reel-buehne video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000A3A;cursor:pointer}
.reel-kopf{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;padding:10px 10px 40px 16px;
  background:linear-gradient(180deg,rgba(0,10,58,.72),rgba(0,10,58,0));pointer-events:none}
.reel-frage{flex:1;padding-top:11px;color:#fff;font-size:15px;line-height:1.35;font-weight:700;text-shadow:0 1px 3px rgba(0,10,58,.7)}
.reel-oben-zu{pointer-events:auto}
.reel-mitte{z-index:1;pointer-events:none;opacity:0;transition:opacity .2s}
.reel.pausiert .reel-mitte{opacity:1}
.reel-leiste{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 12px 12px;background:linear-gradient(0deg,rgba(0,10,58,.85),rgba(0,10,58,0))}
.reel-zeile{display:flex;align-items:center;gap:10px}
.reel-zeitleiste{--anteil:0%;flex:1;min-width:0;display:block;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.reel-zeitleiste::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#fff 0 var(--anteil),rgba(255,255,255,.32) var(--anteil) 100%)}
.reel-zeitleiste::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:#fff}
.reel-zeitleiste::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.32)}
.reel-zeitleiste::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.reel-zeitleiste::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.reel-knoepfe{display:flex;align-items:center;gap:8px}
.reel-spiel,.reel-ton,.reel-oben-zu{flex:none;appearance:none;border:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.reel-spiel svg,.reel-ton svg{width:20px;height:20px}
.reel-oben-zu svg{width:18px;height:18px}
.reel-spiel:hover,.reel-ton:hover,.reel-oben-zu:hover{background:rgba(255,255,255,.28)}
.reel-ton.mit-text{width:auto;padding:0 14px 0 12px;border-radius:var(--r-knopf);background:var(--blau);display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;font-weight:700}
.reel-ton.mit-text svg{width:16px;height:16px}
.reel-ton.mit-text:hover{background:var(--blau-h)}
.reel-zeit{flex:none;color:#fff;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.reel-zu{flex:none;margin-left:auto;appearance:none;border:0;min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-knopf);background:rgba(255,255,255,.16);
  color:#fff;font:inherit;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background-color .2s}
.reel-zu svg{width:16px;height:16px}
.reel-zu:hover{background:rgba(255,255,255,.28)}
@media (min-width:768px){
  .reel{padding:24px}
  .reel-buehne{height:min(100%,960px);border-radius:var(--r-knopf);overflow:hidden;box-shadow:0 24px 60px rgba(0,10,58,.5)}
}
/* d03: runder Halte-Knopf, solange das Danke-Video stumm läuft. Ein Tipp aufs Video schaltet den Ton ein wie die Pille. */
#danke-video video{cursor:pointer}
.video-halt{position:absolute;right:10px;bottom:10px;z-index:2;appearance:none;border:0;width:44px;height:44px;border-radius:50%;background:rgba(0,10,58,.62);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.video-halt svg{width:18px;height:18px}
.video-halt:hover{background:var(--blau)}
@media (prefers-reduced-motion:reduce){.reel,.reel-mitte{transition:none}}
.worte{background:var(--hell);color:#000A3A}
html[data-theme="b"] .worte{background:#000A3A;color:#fff}
.worte .wrap{padding:80px 20px}
.h2-leicht{font-size:26px;line-height:1.35;font-weight:400;text-align:center;max-width:620px;margin:0 auto;text-wrap:balance}
.worte-unter{font-size:16px;line-height:1.5;text-align:center;color:rgba(0,10,58,.72);max-width:520px;margin:12px auto 0}
html[data-theme="b"] .worte-unter{color:#94A3B8}
.w-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:940px;margin:40px auto 0;align-items:start}
.w-karte{background:#fff;color:#000A3A;border-radius:var(--r-knopf);padding:20px;display:flex;flex-direction:column;gap:14px}
html[data-theme="b"] .w-karte{background:#0D1644;color:#fff;border:1px solid #242B50}
.w-karte blockquote{font-size:16px;line-height:1.5}
.w-karte .zeit{font-size:14px;line-height:1.4;color:rgba(0,10,58,.72);display:flex;align-items:center;gap:8px}
html[data-theme="b"] .w-karte .zeit{color:#94A3B8}
.w-karte .zeit svg{width:14px;height:14px;color:var(--blau)}
html[data-theme="b"] .w-karte .zeit svg{color:#fff}
.bericht .wrap{padding:80px 20px 40px;display:flex;flex-direction:column;align-items:center}
.bericht .video-rahmen{max-width:760px;margin-top:40px}
.bericht-zeile{font-size:16px;line-height:1.5;color:var(--hell-88);text-align:center;margin-top:10px}
.gruender-block .wrap{padding:40px 20px 96px;display:flex;flex-direction:column;align-items:center}
.g-karte{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:760px;width:100%;margin-top:40px;text-align:center}
.g-karte img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.g-karte p{font-size:16px;line-height:1.6;color:var(--hell-88)}
.g-karte p + p{margin-top:8px}
[data-nur]{display:none}
[data-nur="anruf"]{display:block}
.ruhig .wrap{padding:48px 20px 96px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.ruhig .buch{width:150px;margin:12px 0 8px;transform:perspective(900px) rotateY(-12deg)}
.ruhig .e-satz + .e-satz{margin-top:-6px}
.ruhig .schluss{font-size:16px;line-height:1.5;color:var(--hero-text);max-width:500px;margin-top:8px}

/* ================= ab 480 ================= */
@media (min-width:480px){
  .zaehler{font-size:14px;gap:6px}
  .marke img{height:20px}
  .h1{font-size:38px;letter-spacing:-.015em}
  .s-hero .wrap,.s-quiz .wrap{padding-left:32px;padding-right:32px}
  .hero-bild{display:block;justify-self:start;padding:8px 0 8px 12px}
}
/* ================= ab 768 ================= */
@media (min-width:768px){
  :root{--q-titel:24px}
  .leiste-innen{padding:0 40px}
  .zaehler{font-size:16px;gap:8px}
  .zaehler .pfeil{width:16px;height:16px}
  .marke img{height:22px}
  .punkte{gap:20px}
  .punkt{font-size:20px}
  .h2-quiz{font-size:28px;padding-right:0}
  .quiz-kasten{padding:32px}
  /* Ab Tablet ist die Frage einzeilig und breit. Der Pfeil rueckt neben den zentrierten Text,
     sonst ragt seine Spitze in die Schrift (design-council 21.09.2026, bei 1280 und 1440 gesehen). */
  .pfeil-hand{right:6%;top:calc(100% + 4px);bottom:auto;width:44px;height:80px}
  .q-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .q-kacheln.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
  .q-kacheln.zwei{grid-template-columns:repeat(2,minmax(0,200px));justify-content:center}
  .q-kachel{min-height:82px}
  .q-kacheln.gross .q-kachel,.q-kacheln.gross.drei .q-kachel{min-height:177px;padding:14px 8px 12px}
  .q-kacheln.gross .q-kachel svg,.q-kacheln.gross.drei .q-kachel svg{width:120px;height:90px}
  .q-karte{grid-template-columns:minmax(0,1fr) 136px}
  .s-vertrauen .wrap{padding:32px 32px 32px}
  .prinzip .wrap{padding:40px 40px 56px}
  .h2{font-size:38px}
  .schritt{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);column-gap:24px}
  .schritt .nr{grid-column:2}
  .schritt .nr b{width:56px;height:56px;font-size:24px}
  .schritt .inhalt{grid-column:3;padding-top:6px}
  .schritt .bild{display:grid;place-items:center;grid-column:1;grid-row:1;padding-bottom:40px}
  .schritt .bild svg{width:128px;height:128px}
  .schritt:nth-child(even) .inhalt{grid-column:1}
  .schritt:nth-child(even) .bild{grid-column:3}
  .schritt h3{font-size:24px}
  .stimmen .wrap{padding:40px 40px 32px}
  .faelle{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .kunden-logos{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .kunden-logos .nur-gross{display:grid}
  .d-logos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px}
  .vergleich .wrap{padding:0 40px 48px}
  .vg-tabelle col.c1,.vg-tabelle col.c2,.vg-tabelle col.c3{width:33.333%}
  .vg-tabelle th,.vg-tabelle td{padding:0 24px;font-size:18px}
  .vg-tabelle thead th.c-gegner{font-size:18px}
  .vg-tabelle .c-wir img{height:20px}
  .fragen .wrap{padding:80px 40px}
  .fuss .wrap{padding:80px 40px 24px}
  .fuss-oben{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .fuss-anschrift{text-align:right}
  .fuss-unten{flex-direction:row;justify-content:space-between;align-items:center;font-size:16px}
  .d-kopf .wrap{padding-top:28px}
  .d-h1,.h2-zwei,.h2-leicht{font-size:30px}
  .e-satz{max-width:660px}
  .e-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .w-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .einwand .wrap,.worte .wrap{padding:112px 40px}
  .bericht .wrap{padding:112px 40px 48px}
  .g-karte{flex-direction:row;text-align:left;gap:40px}
  .g-karte img{width:200px;height:200px}
}
/* ================= ab 900: Countdown in einer Reihe ================= */
@media (min-width:900px){
  :root{--kopf-h:113px}
  .cd{padding:15px 20px}
  .cd-innen{flex-direction:row;justify-content:center;gap:15px}
  .cd-kaesten{gap:15px}
  .cd-k{gap:10px}
  .cd-z{width:60px;font-size:24px;line-height:20px}
  .cd-e{font-size:14px;line-height:14px}
}
/* ================= ab 992 ================= */
@media (min-width:992px){
  .hero-raster{grid-template-columns:minmax(0,512px) minmax(0,1fr);column-gap:24px;row-gap:40px}
  .hero-raster > .pille,.hero-raster > .h1,.hero-raster > .hero-unterzeile{grid-column:1 / -1}
  .hero-bild{padding:0 0 40px 56px}   /* ohne Abstand stieß das Buch an die Quiz-Überschrift (design-council 18.10.2026, Runde 2) */
  .buch{width:152px}
  /* b05 bleibt gestapelt: zwölf Logos brauchen die volle Breite, nebeneinander würden die breiten Wortmarken winzig */
  .kunden-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vergleich .wrap{padding:0 40px 56px}
  .faq{flex-direction:row;justify-content:space-between;align-items:stretch}
  .faq-kopf{flex:1;max-width:340px}
  .faq-liste{flex:1;max-width:760px}
  .fragen .wrap{padding:128px 40px}
  .fuss .wrap{padding-top:128px}
}
@media (max-width:379px){
  .zaehler .vorwort{display:none}
  .cd-text{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .q-ring{animation:none}
  .d-balken i{animation:none}
}