:root {

 --vdi-blau: #003DA4;
 --vdi-hellblau: #9DD0F4;
 --vdi-orange: #FE5000;
 --vdi-tuerkis: #00C7B1;
 --vdi-dunkelblau: #000C19;
 --vdi-hellgrau: #D9D9D6;


 --blau: var(--vdi-blau);
 --blau-dark: #002E7C;
 --blau-70: #4D77BF;
 --blau-10: #E6ECF6;
 --hell: var(--vdi-hellblau);
 --hell-40: #D8ECFB;
 --hell-20: #EBF6FD;
 --hell-10: #F5FAFE;
 --orange: var(--vdi-orange);
 --orange-dark: #D64200;
 --orange-50: #FFA880;
 --orange-10: #FFEDE6;
 --tuerkis: var(--vdi-tuerkis);
 --tuerkis-55: #8CE7DD;
 --tuerkis-12: #E0F8F6;
 --grau: var(--vdi-hellgrau);
 --grau-40: #F0F0EF;


 --tinte: var(--vdi-dunkelblau);
 --tinte-70: #4D555E;
 --tinte-45: #666D75;
 --tinte-20: #CCCED1;
 --tinte-08: #EBECED;
 --grund: #FFFFFF;
 --karte: #FFFFFF;


 --f1: #FE5000;
 --f2: #666D75;
 --f3: #003DA4;
 --f4: #FFA880;
 --f5: #9DD0F4;
 --f6: #8CE7DD;
 --f7: #000C19;
 --f8: #00C7B1;


 --disp: 'Rajdhani', 'Nunito Sans', Tahoma, system-ui, sans-serif;
 --body: 'Nunito Sans', Tahoma, system-ui, sans-serif;


 --r-md: 10px;
 --r-lg: 14px;
 --shadow: 0 2px 6px rgba(0, 12, 25, 0.05), 0 12px 32px rgba(0, 12, 25, 0.09);
 --shadow-lift: 0 4px 10px rgba(0, 12, 25, 0.07), 0 20px 48px rgba(0, 12, 25, 0.13);


 --logo-width: 104px;
 --logo-clear: calc(var(--logo-width) * 0.0802);

 --maxw: 1100px;
}

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
html, body {height: 100%; max-width: 100%; overflow-x: hidden;}
body {
 font-family: var(--body);
 background: var(--grund);
 color: var(--tinte);
 line-height: 1.6;
  font-size: 16.5px;
 width: 100%;
 overflow-x: clip;
 position: relative;
 overscroll-behavior-x: none;
}

button, a {font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; touch-action: manipulation;}
::selection {background: var(--blau); color: #fff;}
:focus-visible {outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px;}


.tag {
  font-family: var(--disp); font-weight: 700; font-size: 12.5px;
}


.muster {position: absolute; pointer-events: none; z-index: 2; display: block;}
.muster-hero {top: -6px; right: 0; width: 84px; height: 84px;}
.muster-panel {right: 18px; bottom: -14px; width: 72px; height: 72px; opacity: 0.9;}
.signet-eck {position: absolute; top: 0; right: 0; width: 34px; height: 34px; display: block;}
.dachzeile, .kopf, .haltband, main, .fussleiste {position: relative; z-index: 1; max-width: 100%;}


.dachzeile {
 background: var(--tinte); color: #fff;
 font-size: 12.5px; font-weight: 700;
 display: flex; justify-content: space-between; gap: 16px;
 padding: 7px 22px;
}
.dachzeile span:last-child {color: var(--hell); font-weight: 600;}


.kopf {background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 rgba(0,12,25,0.08);}
.kopf-inner {
 max-width: var(--maxw); margin: 0 auto; padding: 8px 22px;
 display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.logo {
 display: inline-flex; align-items: baseline; text-decoration: none;
 font-family: var(--disp); font-weight: 700; font-size: 26px; line-height: 1; color: var(--blau); flex-shrink: 0;
}
.logo .wort-2 {color: var(--hell);}

.logo-shield {padding: var(--logo-clear); flex-shrink: 0; margin-right: calc(var(--logo-clear) * -1); display: block; text-decoration: none;}
.logo-shield:focus-visible {outline: 2px solid var(--blau); outline-offset: 2px;}
.vdi-logo {display: block; width: var(--logo-width); height: auto;}

.stations {display: flex; align-items: center;}
.station {
 display: flex; align-items: center; gap: 8px;
 font-family: var(--disp); font-weight: 600; font-size: 13px;
 color: var(--hell); padding: 6px 0;
 transition: color 0.2s ease;
}
.station .st-dot {
 width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
 background: var(--hell);
 transition: background 0.25s ease, box-shadow 0.25s ease;
}
.station .st-track {width: 32px; height: 4px; border-radius: 2px; background: var(--hell); margin: 0 8px; transition: background 0.25s ease;}
.station.done {color: var(--blau);}
.station.done .st-dot {background: var(--blau);}
.station.done .st-track {background: var(--blau);}
.station.active {color: var(--blau); font-weight: 700;}
.station.active .st-dot {background: #fff; box-shadow: 0 0 0 3.5px var(--orange); animation: dotPulse 2.2s ease-out infinite;}
@keyframes dotPulse {
 0%, 100% {box-shadow: 0 0 0 3.5px var(--orange);}
 50% {box-shadow: 0 0 0 5px var(--orange);}
}


.haltband {
 max-width: var(--maxw); margin: 0 auto; padding: 14px 22px 0;
 display: none; align-items: center;
}
.haltband.visible {display: flex;}
.hb-dots {display: flex; align-items: center; flex: 1;}
.hb-seg {flex: 1; height: 4px; border-radius: 2px; background: var(--tinte-08);}
.hb-seg.done {background: var(--tuerkis);}
.hb-dot {width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--tinte-20);}
.hb-dot.done {background: var(--tuerkis);}
.hb-dot.now {width: 15px; height: 15px; background: #fff; box-shadow: 0 0 0 3px var(--orange);}
.hb-label {font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--tinte-70); margin-left: 16px; white-space: nowrap;}


main {max-width: var(--maxw); margin: 0 auto; padding: 0 22px;}
.screen {display: none; padding: 32px 0 64px;}
.screen.active {display: block; animation: screenIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.05);}
@keyframes screenIn {from {opacity: 0; transform: translateY(16px) scale(0.99);} to {opacity: 1; transform: none;}}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--disp); font-weight: 700; font-size: 13px;
  color: var(--blau);
 background: var(--hell-20); border-radius: 999px; padding: 6px 16px 6px 11px;
 margin-bottom: 20px;
}
.eyebrow::before {content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--orange);}

h1 {
 font-family: var(--disp); font-weight: 700; color: var(--blau);
 font-size: 54px; line-height: 1.0; margin-bottom: 18px;
}
h1 .w {display: inline-block; animation: wordUp 0.65s cubic-bezier(0.2, 0.85, 0.25, 1.1) both;}
@keyframes wordUp {from {opacity: 0; transform: translateY(22px) rotate(1.5deg);} to {opacity: 1; transform: none;}}
h1 .hl {position: relative; white-space: nowrap;}
h1 .hl::after {
 content: ''; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 0.3em;
 background: var(--hell); border-radius: 3px; z-index: -1;
 transform: scaleX(0); transform-origin: left;
 animation: hlIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.9s;
}
@keyframes hlIn {to {transform: scaleX(1);}}

.locator-dot {
 display: inline-block; width: 0.22em; height: 0.22em; border-radius: 50%;
 background: var(--orange); margin-left: 0.07em; position: relative;
}
.locator-dot::after {
 content: ''; position: absolute; inset: -0.15em; border-radius: 50%;
 border: 3px solid var(--orange); opacity: 0;
 animation: locatorPulse 2.4s ease-out infinite 1.4s;
}
@keyframes locatorPulse {
 0% {transform: scale(0.5); opacity: 0.9;}
 70% {transform: scale(1.5); opacity: 0;}
 100% {opacity: 0;}
}

.lead {font-size: 18.5px; color: var(--tinte-70); max-width: 540px; margin-bottom: 24px;}
.lead b {color: var(--tinte); font-weight: 800;}


.hero {display: grid; gap: 36px; margin-top: 10px; align-items: center;}
.hero-netz {order: -1; position: relative;}
.hero-netz svg.netz-svg {width: 100%; height: auto; display: block;}
.hero-text > * {animation: fadeUp 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) both;}
.hero-text > *:nth-child(2) {animation-delay: 0.08s;}
.hero-text > *:nth-child(3) {animation-delay: 0.16s;}
.hero-text > *:nth-child(4) {animation-delay: 0.26s;}
.hero-text > *:nth-child(5) {animation-delay: 0.36s;}
@keyframes fadeUp {from {opacity: 0; transform: translateY(14px);} to {opacity: 1; transform: none;}}

.badge-row {display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px;}
.pill {
 font-weight: 800; font-size: 13.5px;
 padding: 7px 16px; border-radius: 999px; color: var(--tinte);
}
.pill.p-hell {background: var(--hell-40);}
.pill.p-tuerkis {background: var(--tuerkis-12);}
.pill.p-orange {background: var(--orange-10);}

.alters-check {display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 700; font-size: 15px; color: var(--tinte); cursor: pointer;}
.alters-check input {width: 20px; height: 20px; margin: 0; accent-color: var(--blau); cursor: pointer; flex-shrink: 0;}
.alters-hinweis {margin: -6px 0 14px; font-weight: 700; font-size: 13.5px; color: var(--orange);}
.cta-zeile {display: flex; align-items: center; gap: 18px; flex-wrap: wrap;}
.cta-hinweis {font-size: 13.5px; color: var(--tinte-45); max-width: 240px; line-height: 1.45;}


.intro-unten {display: grid; gap: 20px; margin-top: 42px;}
.soft-card {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px;}
.soft-card h3 {font-family: var(--disp); font-weight: 700; font-size: 23px; color: var(--blau); margin-bottom: 16px;}

.schritte {display: grid; gap: 16px;}
.schritt {display: flex; gap: 14px; align-items: flex-start;}
.schritt-num {
 width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
 display: flex; align-items: center; justify-content: center;
 font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--tinte);
}
.schritt:nth-child(1) .schritt-num {background: var(--hell);}
.schritt:nth-child(2) .schritt-num {background: var(--tuerkis);}
.schritt:nth-child(3) .schritt-num {background: var(--orange-50);}
.schritt b {display: block; font-weight: 800; font-size: 15.5px;}
.schritt span {font-size: 14px; color: var(--tinte-70);}

.consent ul {list-style: none; margin-bottom: 12px;}
.consent li {position: relative; padding: 5px 0 5px 30px; font-size: 14.5px; color: var(--tinte-70); font-weight: 600;}
.consent li::before {
 content: ''; position: absolute; left: 0; top: 7px;
 width: 19px; height: 19px; border-radius: 50%; background: var(--tuerkis-12);
}
.consent li::after {
  content: ''; position: absolute; left: 3.75px; top: 11px;
  width: 9px; height: 5px;
 border-left: 2.5px solid var(--blau); border-bottom: 2.5px solid var(--blau);
 transform: rotate(-45deg);
}
.consent .fine {font-size: 13px; color: var(--tinte-45);}


.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 10px;
 font-family: var(--disp); font-weight: 700;
 font-size: 19px; line-height: 1.1;
 padding: 15px 32px; border-radius: 999px;
 transition: background 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.4), box-shadow 0.18s ease;
}
.btn .arrow {transition: transform 0.18s ease;}
.btn:hover .arrow {transform: translateX(4px);}
.btn-primary {background: var(--blau); color: #fff; box-shadow: 0 6px 20px rgba(0, 61, 164, 0.28);}
.btn-primary:hover {background: var(--blau-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 61, 164, 0.32);}
.btn-primary:active {transform: translateY(0) scale(0.98);}
.btn-dunkel {background: var(--tinte); color: #fff; box-shadow: var(--shadow);}
.btn-dunkel:hover {background: var(--blau); transform: translateY(-2px); box-shadow: var(--shadow-lift);}
.btn-hell {background: var(--karte); color: var(--blau); box-shadow: var(--shadow);}
.btn-hell:hover {transform: translateY(-2px); box-shadow: var(--shadow-lift);}
.btn-ghost {background: none; color: var(--tinte-45); font-family: var(--body); font-size: 14.5px; font-weight: 700; padding: 12px;}
.btn-ghost:hover {color: var(--blau);}


.deck-wrap {display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%;}
.deck {
 position: relative; width: 100%; max-width: 420px;
 height: min(58vh, 500px); min-height: 400px; margin: 18px 0 18px;
 touch-action: pan-y;
}
.swipe-card {
 position: absolute; inset: 0;
 background: var(--karte); border-radius: var(--r-lg);
 display: flex; flex-direction: column; overflow: hidden;
 will-change: transform; user-select: none;
 box-shadow: var(--shadow);
}
.swipe-card.top {cursor: grab; box-shadow: var(--shadow-lift);}
.swipe-card.top.fest, .swipe-card.top.fest:active {cursor: default;}

.swipe-card.deal {animation: cardIn 0.45s cubic-bezier(0.2, 0.85, 0.3, 1.15) backwards;}
@keyframes cardIn {from {opacity: 0; transform: translateY(18px) scale(0.94);} to {opacity: 1;}}
.swipe-card.top:active {cursor: grabbing;}
.swipe-card.back-1 {transform: scale(0.95) translateY(18px);}
.swipe-card.back-2 {transform: scale(0.90) translateY(36px);}
.swipe-card.back-1, .swipe-card.back-2 {pointer-events: none;}
.swipe-card.gone {transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.4, 1), opacity 0.3s ease; opacity: 0; pointer-events: none; z-index: 10;}
.swipe-card.restack {transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.1), box-shadow 0.35s ease;}

.karten-kopf {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px;}
.linien-badge {display: inline-flex; align-items: center; gap: 9px; min-width: 0;}
.linien-badge .lb-code {
 font-family: var(--disp); font-weight: 700; font-size: 14.5px;
 color: #fff; background: var(--lc, var(--tinte));
 padding: 3px 10px 3px; border-radius: 999px; flex-shrink: 0; line-height: 1.2;
}
.linien-badge.hell .lb-code {color: var(--tinte);}
.linien-badge .lb-name {
 font-family: var(--body); font-weight: 800; font-size: 11px; color: var(--tinte-70);
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karten-typ {
 font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 999px;
 background: var(--tinte-08); color: var(--tinte-70); flex-shrink: 0;
}

.karten-visual {
 flex: 1; margin: 4px 16px 0; border-radius: var(--r-md);
 display: flex; align-items: center; justify-content: center;
 position: relative; min-height: 140px;
 background: color-mix(in srgb, var(--lc, var(--tinte)) 14%, #FFFFFF);
}
.karten-visual svg {width: 88px; height: 88px; stroke: var(--lc, var(--tinte));}

.karten-visual img {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: cover; border-radius: var(--r-md);
 user-select: none; -webkit-user-drag: none;
}
.karten-visual .kv-tag {z-index: 2;}
.karten-visual .kv-tag {
 position: absolute; left: 14px; bottom: 12px;
 font-weight: 800; font-size: 12px; color: var(--tinte-70);
 background: rgba(255,255,255,0.8); border-radius: 999px; padding: 3px 11px;
}
.karten-statement {padding: 18px 22px 26px;}
.karten-statement p {
 font-family: var(--disp); font-weight: 600;
 font-size: 25px; line-height: 1.22; color: var(--tinte);
}

.verdict {
 position: absolute; top: 16px;
 font-family: var(--disp); font-weight: 700; font-size: 15px;
 padding: 7px 16px; border-radius: 999px; opacity: 0;
 pointer-events: none; z-index: 5; box-shadow: var(--shadow);
}
.verdict.yes {right: 14px; background: var(--tuerkis); color: var(--tinte); transform: rotate(5deg);}
.verdict.no {left: 14px; background: var(--grau); color: var(--tinte); transform: rotate(-5deg);}

.swipe-actions {display: flex; align-items: center; gap: 20px;}
.swipe-btn {
 width: 62px; height: 62px; border-radius: 50%;
 background: var(--karte); box-shadow: var(--shadow);
 display: flex; align-items: center; justify-content: center;
 transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.4), background 0.15s ease, box-shadow 0.15s ease;
}
.swipe-btn svg {width: 24px; height: 24px;}
.swipe-btn:hover {transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lift);}
.swipe-btn.yes {background: var(--orange); box-shadow: 0 6px 20px rgba(254, 80, 0, 0.30);}
.swipe-btn.yes:hover {background: var(--orange-dark);}
.swipe-skip {font-weight: 800; font-size: 13px; color: var(--tinte-45); padding: 8px 4px;}
.swipe-skip:hover {color: var(--blau);}
.swipe-hint {text-align: center; font-size: 14px; font-weight: 600; color: var(--tinte-70); margin-bottom: 14px;}
.swipe-hint b {color: var(--tinte); font-weight: 800;}
.key-hints {display: none;}
.key-hints.ohne-pfeile > span:not(:first-child) {display: none;}


.sk-wrap {max-width: 760px; margin: 0 auto;}
.sk-frage {
 font-family: var(--disp); font-weight: 700; color: var(--blau);
 font-size: 34px; line-height: 1.05; margin: 12px 0 28px;
}
.either {display: flex; flex-direction: column;}
.either-opt {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 24px; text-align: left;
 border: 2.5px solid transparent;
 transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease;
}
.either-opt:hover {transform: translateY(-3px); box-shadow: var(--shadow-lift);}
.either-opt.selected {border-color: var(--blau); background: var(--hell-10);}
.either-opt .ab {
 display: inline-flex; align-items: center; justify-content: center;
 width: 32px; height: 32px; border-radius: 50%;
 font-family: var(--disp); font-weight: 700; font-size: 16px;
 background: var(--hell-40); color: var(--blau); margin-bottom: 12px;
 transition: background 0.15s ease;
}
.either-opt.selected .ab {background: var(--blau); color: #fff;}
.either-opt .opt-text {display: block; font-family: var(--disp); font-weight: 600; font-size: 24px; line-height: 1.2;}
.either-divider {
 align-self: center; margin: 14px 0;
 font-weight: 800; font-size: 13px; color: var(--tinte-45);
}

.these-card {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 30px 26px; margin: 8px 0 22px;
}
.these-card p {font-family: var(--disp); font-weight: 600; font-size: 26px; line-height: 1.25;}
.these-kicker {font-family: var(--body); font-weight: 800; font-size: 14.5px; color: var(--tinte-70); text-transform: none;}
.likert {display: flex; gap: 12px;}
.likert button {
 flex: 1; padding: 16px 8px; border-radius: 999px;
 background: var(--karte); box-shadow: var(--shadow);
 font-size: 15.5px; font-weight: 800;
 border: 2.5px solid transparent;
 transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.likert button:hover {transform: translateY(-2px);}
.likert button.selected {border-color: var(--blau); background: var(--blau); color: #fff;}
.sk-step {margin-top: 32px; font-weight: 700; font-size: 13.5px; color: var(--tinte-45); display: flex; justify-content: space-between;}


.netz-doc {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; margin: 10px 0 28px; max-width: 900px;}

.netz-kopf {
 position: relative; background: var(--blau); color: #fff;
 padding: 24px 56px 18px 26px;
 display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.netz-kopf h2 {font-family: var(--disp); font-weight: 700; font-size: 29px; line-height: 1.05; color: #fff;}
.netz-kopf .ausgabe {font-weight: 700; font-size: 13px; color: var(--hell);}
.netz-kopf .signet-eck {position: absolute; right: 14px; top: 14px; width: 26px; height: 26px;}
.netz-body {padding: 14px 26px 10px;}
.liniennetz svg {width: 100%; height: auto; display: block;}
#liniennetz .nlabel, #liniennetz .nstop, #liniennetz .du-node {opacity: 1; animation: none;}

.mobil-netz {display: none; position: relative; padding: 6px 0 4px 2px;}
.mobil-netz::before {
 content: ''; position: absolute; left: 9px; top: 30px; bottom: 22px;
 width: 3.5px; border-radius: 2px; background: var(--tinte-20);
}
.mn-du {
 display: flex; align-items: center; gap: 10px;
 font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--orange);
 margin-bottom: 16px;
}
.mn-du-dot {
 width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
 background: #fff; box-shadow: 0 0 0 3.5px var(--tinte);
 position: relative; z-index: 1;
}
.mn-du-dot::after {
 content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--orange);
}
.mn-row {padding-left: 24px; margin-bottom: 16px;}
.mn-row:not(.ist-richtung) {opacity: 0.68;}
.mn-row:last-child {margin-bottom: 4px;}
.mn-label {display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap;}
.mn-label b {font-weight: 800; font-size: 15px;}
.mn-label em {
 font-style: normal; font-family: var(--disp); font-weight: 700; font-size: 11px; color: #fff;
 background: var(--orange); border-radius: 999px; padding: 2px 10px;
}
.mn-code {
 font-family: var(--disp); font-weight: 700; font-size: 13px;
 padding: 2px 9px 2px; border-radius: 999px; flex-shrink: 0;
}
.mn-bar {position: relative; height: 7px; min-width: 56px;}
.mn-fill {
 position: absolute; inset: 0; border-radius: 4px;
 transform-origin: left center; transform: scaleX(0);
 animation: mnGrow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes mnGrow {to {transform: scaleX(1);}}
.mn-dot {
 position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
 width: 13px; height: 13px; border-radius: 50%;
 background: #fff; border: 3px solid var(--tinte);
 opacity: 0; animation: nFade 0.4s ease forwards;
}

.netz-fuss {
 background: var(--grau-40); padding: 13px 26px;
 font-weight: 700; font-size: 13.5px; color: var(--tinte-70);
 display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}


.muster-chip {
 margin: 16px 26px 6px; padding: 12px 18px; border-radius: var(--r-md);
 background: var(--orange-10); font-size: 14.5px; font-weight: 600; color: var(--tinte-70);
}
.muster-chip b {color: var(--tinte); font-weight: 800;}
.stil-zeile {
 display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
 margin: 0 0 22px;
}
.stil-intro {font-weight: 800; font-size: 14.5px; color: var(--tinte-70); margin-right: 3px;}
.stil-chip {
 font-weight: 800; font-size: 13.5px; padding: 7px 15px; border-radius: 999px;
 background: var(--karte); box-shadow: var(--shadow); color: var(--tinte);
}
.bruecke {
 background: var(--tuerkis-12); border-radius: var(--r-lg);
 padding: 18px 22px; margin: 0 0 24px; max-width: 900px;
 font-size: 15px; font-weight: 600; color: var(--tinte-70);
}
.bruecke b {color: var(--tinte); font-weight: 800;}

.zukunft-panel {display: grid; gap: 20px; margin-bottom: 26px;}
.zukunft {
 background: var(--hell-20); border-radius: var(--r-lg);
 padding: 24px 26px; font-size: 17.5px; font-weight: 600; line-height: 1.6;
}
.zukunft b {color: var(--blau); font-weight: 800;}
.rolle {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 20px 22px; display: flex; gap: 16px; align-items: center;
}
.rolle-avatar {
 width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
 background: var(--tuerkis); color: var(--tinte);
 display: flex; align-items: center; justify-content: center;
 font-family: var(--disp); font-weight: 700; font-size: 24px;
}
.rolle-txt .rolle-k {font-weight: 800; font-size: 12.5px; color: var(--tinte-45);}
.rolle-txt .rolle-name {font-weight: 800; font-size: 16.5px; margin: 2px 0 1px;}
.rolle-txt .rolle-tut {font-size: 14.5px; font-weight: 600; color: var(--tinte-70);}

.no-test-note {font-size: 14px; font-weight: 600; color: var(--tinte-45); margin: 0 4px 26px; max-width: 620px;}


.tafel {
 background: var(--tinte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 margin: 10px 0 26px; padding: 20px; color: #fff;
}
.tafel-kopf {
 display: grid; grid-template-columns: 86px 1fr 62px; gap: 14px;
 padding: 2px 16px 12px;
 font-family: var(--disp); font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,0.6);
}
.tafel-row {
 display: grid; grid-template-columns: 86px 1fr 62px; gap: 14px;
 padding: 16px; align-items: center; border-radius: var(--r-md);
 background: rgba(255,255,255,0.07);
 width: 100%; text-align: left; color: #fff;
 animation: tafelIn 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.1) backwards;
 transition: background 0.15s ease, transform 0.15s ease;
}
.tafel-row:hover {background: rgba(255,255,255,0.12); transform: translateY(-1px);}
.tafel-row.geklickt {background: rgba(0, 199, 177, 0.22);}
.tafel-row.geklickt .t-gleis::after {content: ' ✓';}
.tafel-row + .tafel-row {margin-top: 10px;}
.tafel-row:nth-child(2) {animation-delay: 0.12s;}
.tafel-row:nth-child(3) {animation-delay: 0.24s;}
@keyframes tafelIn {from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: none;}}
.tafel-row .t-zeit {font-family: var(--disp); font-weight: 700; font-size: 15.5px; color: var(--hell);}
.tafel-row .t-ziel {min-width: 0;}
.tafel-row .t-typ {display: block; font-weight: 800; font-size: 12px; color: rgba(255,255,255,0.6);}
.tafel-row .t-titel {display: block; font-weight: 800; font-size: 16.5px; color: #fff; margin: 1px 0;}
.tafel-row .t-sub {display: block; font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,0.65);}
.tafel-row .t-gleis {
 font-family: var(--disp); font-weight: 700; font-size: 17px;
 width: 38px; height: 38px; border-radius: 50%; justify-self: end;
 background: var(--hell); color: var(--tinte);
 display: flex; align-items: center; justify-content: center;
}

.vdi-panel {
 position: relative; overflow: hidden;
 background: var(--hell-20); border-radius: var(--r-lg);
 padding: 28px; margin-bottom: 24px;
}
.vdi-panel h3 {font-family: var(--disp); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--blau); margin-bottom: 8px;}
.vdi-panel p {font-size: 15.5px; font-weight: 600; color: var(--tinte-70); margin-bottom: 20px; max-width: 560px;}
.vdi-panel .vdi-txt, .vdi-panel .btn {position: relative; z-index: 3;}


.fussleiste {margin-top: 24px;}
.fussleiste-inner {
 max-width: var(--maxw); margin: 0 auto; padding: 18px 22px 26px;
 font-weight: 700; font-size: 12.5px; color: var(--tinte-45);
 display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

.dev-tools {
 position: fixed; right: 18px; bottom: 18px; z-index: 40;
 width: min(330px, calc(100vw - 28px));
 font-family: var(--body); color: var(--tinte);
}
.dev-toggle, .dev-open {
 border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer;
}
.dev-toggle {
 display: block; margin-left: auto; padding: 11px 18px;
 background: var(--tinte); color: #fff; box-shadow: 0 8px 24px rgb(0 12 25 / 0.22);
}
.dev-panel {
 margin-top: 8px; padding: 16px; border: 2px solid var(--tinte);
 border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgb(0 12 25 / 0.22);
}
.dev-panel label {display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800;}
.dev-panel select {
 width: 100%; min-height: 44px; padding: 8px 34px 8px 10px;
 border: 2px solid var(--tinte-20); border-radius: 10px;
 background: #fff; color: var(--tinte); font: inherit; font-weight: 700;
}
.dev-open {width: 100%; margin-top: 10px; padding: 11px 15px; background: var(--orange); color: #fff;}
.dev-panel p {margin: 9px 0 0; color: var(--tinte-45); font-size: 12px; font-weight: 700;}
@media (max-width: 719px) {
 .dev-tools {right: 14px; bottom: 14px;}
}


.netz-svg .nl {
 fill: none; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round;
 stroke-dasharray: 100; stroke-dashoffset: 100;
 animation: nlDraw 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes nlDraw {to {stroke-dashoffset: 0;}}
.netz-svg .nstop {opacity: 0; animation: nFade 0.4s ease forwards;}
.netz-svg .nlabel {opacity: 0; animation: nFade 0.5s ease forwards;}
@keyframes nFade {to {opacity: 1;}}
.netz-svg .du-node {opacity: 0; animation: duPop 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.35) forwards 1.15s; transform-origin: center; transform-box: fill-box;}
@keyframes duPop {from {opacity: 0; transform: scale(0.4);} to {opacity: 1; transform: scale(1);}}
.netz-svg .du-pulse {
 transform-origin: center; transform-box: fill-box; opacity: 0;
 animation: duPulse 2.6s ease-out infinite 1.9s;
}
@keyframes duPulse {
 0% {transform: scale(0.6); opacity: 0.8;}
 70% {transform: scale(1.8); opacity: 0;}
 100% {opacity: 0;}
}


@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;}
 .netz-svg .nl {stroke-dashoffset: 0;}
 .netz-svg .nstop, .netz-svg .nlabel, .netz-svg .du-node, h1 .w, .hero-text > * {opacity: 1;}
 .netz-svg .du-pulse, .locator-dot::after {display: none;}
 h1 .hl::after {transform: scaleX(1);}
}


@media (max-width: 719px) {
 :root {--logo-width: 64px;}
 h1 {font-size: 41px;}
 .kopf-inner {padding: 8px 16px; gap: 10px; flex-wrap: wrap; row-gap: 4px;}
 .logo {font-size: 22px;}
 .logo-shield {margin-right: 0;}
 .stations {order: 3; width: 100%; justify-content: center;}
 .station {gap: 5px;}
 .station .st-name {display: none; font-size: 11px;}
 .station.active .st-name {display: inline;}
 .station .st-dot {width: 11px; height: 11px;}
 .station .st-track {width: 10px; margin: 0 4px;}
 .dachzeile span:last-child {display: none;}
 .deck {max-width: 100%;}
 .tafel-kopf, .tafel-row {grid-template-columns: 62px 1fr 46px; gap: 10px;}
 .tafel-row .t-gleis {width: 34px; height: 34px; font-size: 15px;}
 .muster-hero {width: 56px; height: 56px; top: -4px; right: 0;}
 .muster-panel {width: 56px; height: 56px; right: 12px; bottom: -12px;}
 .hero-netz {order: 1;}

 .liniennetz .netz-svg {display: none;}
 .mobil-netz {display: block;}
 .netz-kopf {padding: 20px 48px 16px 20px;}
 .netz-kopf h2 {font-size: 26px;}
 .netz-body {padding: 14px 20px 10px;}
 .muster-chip {margin: 14px 20px 6px;}
}


@media (min-width: 720px) {
 .hero {grid-template-columns: 1fr 1.05fr; gap: 48px;}
 .hero-netz {order: 1;}
 .intro-unten {grid-template-columns: 1.15fr 1fr; align-items: stretch;}
 .screen {padding: 44px 0 74px;}

 .key-hints {
 display: flex; justify-content: center; gap: 26px;
 font-size: 13.5px; font-weight: 600; color: var(--tinte-45); margin-bottom: 16px;
}
 .kbd {
 display: inline-flex; align-items: center; justify-content: center;
 min-width: 27px; height: 25px; padding: 0 7px; margin-right: 7px;
 border-radius: 8px; background: var(--karte); box-shadow: var(--shadow);
 font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--tinte);
}
 .swipe-hint {display: none;}

 .either {flex-direction: row; align-items: stretch;}
 .either-opt {flex: 1; padding: 28px; min-height: 150px;}
 .either-opt .opt-text {font-size: 27px;}
 .either-divider {margin: 0 22px; align-self: center;}
 .sk-frage {font-size: 42px;}

 .zukunft-panel {grid-template-columns: 1.4fr 1fr;}
 .netz-doc, .zukunft-panel {max-width: 900px;}
 .tafel, .vdi-panel {max-width: 900px;}
 .vdi-panel {display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-right: 110px;}
 .vdi-panel .vdi-txt p {margin-bottom: 0;}
 .vdi-panel .btn {flex-shrink: 0;}
}




.station {cursor: default;}
.step-wrap {max-width: 760px; margin: 0 auto;}
.step-wrap .eyebrow {margin-bottom: 14px;}
.step-foot {max-width: 760px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;}
.undo-btn {display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px 10px 6px;}
.undo-btn svg {width: 20px; height: 20px;}
.undo-btn[hidden] {display: none;}
.step-foot .key-hints {margin-bottom: 0;}


.skala {
 position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
 width: 100%; max-width: 420px; margin: 0 auto; padding-top: 6px;
}
.skala-track {position: absolute; left: 12.5%; right: 12.5%; top: 15.5px; height: 4px; border-radius: 2px; background: var(--tinte-08);}
.skala-fill {
 position: absolute; left: 12.5%; top: 15.5px; height: 4px; border-radius: 2px;
 width: 0; background: var(--sk, var(--tuerkis));
 transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.skala-fill.preview {opacity: 0.45;}
.skala-stop {
 position: relative; z-index: 1;
 display: flex; flex-direction: column; align-items: center; gap: 9px;
 padding: 4px 2px 6px; border-radius: var(--r-md);
 font-weight: 800; font-size: 13.5px; color: var(--tinte-45); line-height: 1.15; text-align: center;
 transition: color 0.2s ease;
}
.skala-stop .ss-dot {
 width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
 background: #fff; box-shadow: inset 0 0 0 3px var(--tinte-20);
 transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.4), box-shadow 0.2s ease, background 0.2s ease;
}
.skala-stop:hover {color: var(--tinte);}
.skala-stop:hover .ss-dot {transform: scale(1.12);}
.skala-stop.done .ss-dot {background: var(--sk, var(--tuerkis)); box-shadow: none;}
.skala-stop.now {color: var(--tinte);}
.skala-stop.now .ss-dot {background: #fff; box-shadow: 0 0 0 3.5px var(--orange); transform: scale(1.18);}
.skala-stop.preview .ss-dot {box-shadow: 0 0 0 3.5px var(--orange-50); transform: scale(1.1);}
.skala-stop:focus-visible {outline: 3px solid var(--orange); outline-offset: 0;}
.skala.locked .skala-stop {pointer-events: none;}
.skala.mini {max-width: 100%; padding-top: 2px;}
.skala.mini .skala-track, .skala.mini .skala-fill {top: 8.5px; height: 3px;}
.skala.mini .skala-stop {font-size: 12px; gap: 7px; padding: 2px 0 4px;}
.skala.mini .ss-dot {width: 12px; height: 12px; box-shadow: inset 0 0 0 2.5px var(--tinte-20);}
.skala.mini .skala-stop.now .ss-dot {
 background: var(--sk, var(--tuerkis));
 box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--orange);
 transform: scale(1.12);
}

.deck-skala {width: 100%; max-width: 420px; margin: 0 auto 4px;}
.deck-hint {text-align: center; font-size: 13.5px; font-weight: 600; color: var(--tinte-45); margin: 8px 0 12px;}
.deck-hint b {color: var(--tinte-70); font-weight: 800;}
.verdict.yes {background: var(--tuerkis);}
.verdict.no {background: var(--grau);}
.karten-visual.neutral {background: var(--hell-20);}
.karten-visual.neutral svg {stroke: var(--blau);}


.wahl {display: grid; gap: 12px;}
.wahl-opt {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 18px 20px; text-align: left; width: 100%;
 display: flex; align-items: center; gap: 14px;
 border: 2.5px solid transparent;
 transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease;
}
.wahl-opt:hover {transform: translateY(-2px); box-shadow: var(--shadow-lift);}
.wahl-opt.selected {border-color: var(--blau); background: var(--hell-10);}
.wahl-opt .ab {
 display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
 width: 32px; height: 32px; border-radius: 50%;
 font-family: var(--disp); font-weight: 700; font-size: 15px;
 background: var(--hell-40); color: var(--blau);
 transition: background 0.15s ease;
}
.wahl-opt.selected .ab {background: var(--blau); color: #fff;}
.wahl-opt .ab.lc {color: #fff;}
.wahl-opt .ab.lc.hell {color: var(--tinte);}
.wahl-opt .opt-text {font-family: var(--disp); font-weight: 600; font-size: 21px; line-height: 1.2;}
.wahl-opt.quiet {background: var(--grau-40); box-shadow: none;}
.wahl-opt.quiet .opt-text {font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--tinte-70);}
.wahl-opt.quiet .ab {background: var(--tinte-08); color: var(--tinte-45);}


.fb-card {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; margin: 8px 0 22px;}
.fb-kopf {position: relative; background: var(--blau); color: #fff; padding: 22px 56px 18px 26px;}
.fb-kopf h2 {font-family: var(--disp); font-weight: 700; font-size: 29px; line-height: 1.05; color: #fff;}
.fb-kopf .signet-eck {position: absolute; right: 14px; top: 14px; width: 26px; height: 26px;}
.fb-body {padding: 20px 26px 24px; font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--tinte-70);}
.fb-body b {color: var(--tinte); font-weight: 800;}
.fb-linien {display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px;}
.fb-linie {display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; background: var(--grau-40); border-radius: 999px; padding: 5px 14px 5px 5px; color: var(--tinte);}
.fb-card.mythos .fb-kopf {background: var(--tinte);}
.fb-card.mythos .fb-kopf h2 {color: var(--hell);}


.liste {display: grid; gap: 12px;}
.liste-row {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px 20px 12px; transition: background 0.2s ease;}
.liste-row .lr-label {font-weight: 800; font-size: 12px; color: var(--tinte-45); margin-bottom: 4px;}
.liste-row p {font-family: var(--disp); font-weight: 600; font-size: 20px; line-height: 1.2; margin-bottom: 12px;}
.liste-row.done {background: var(--hell-10);}

.regler {
 position: relative; width: 100%; padding: 4px 0 2px; cursor: pointer;
 touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none;
}
.regler:focus-visible {outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--r-md);}
.rg-bahn {position: relative; height: 32px; margin-bottom: 4px;}
.rg-track, .rg-fill {position: absolute; left: 12.5%; top: 13px; height: 6px; border-radius: 3px;}
.rg-track {right: 12.5%; background: var(--tinte-08);}
.rg-fill {width: 0; background: var(--blau); transition: width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);}
.rg-tick {
 position: absolute; top: 11px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
 background: #fff; box-shadow: inset 0 0 0 2.5px var(--tinte-20); transition: background 0.2s ease, box-shadow 0.2s ease;
}
.rg-tick.done {background: var(--blau); box-shadow: none;}
.rg-knopf {
 position: absolute; top: 4px; left: 12.5%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
 background: #fff; box-shadow: 0 0 0 3.5px var(--orange), 0 3px 10px rgba(0, 12, 25, 0.18);
 transition: left 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, transform 0.15s ease;
}
.regler.zieht .rg-fill, .regler.zieht .rg-knopf {transition: none;}
.regler.zieht .rg-knopf {transform: scale(1.12);}
.regler.leer .rg-knopf {background: var(--grau-40); box-shadow: 0 0 0 3px var(--tinte-20), 0 2px 6px rgba(0, 12, 25, 0.12);}
.rg-labels {display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2px;}
.rg-labels span {text-align: center; font-weight: 800; font-size: 12px; line-height: 1.15; color: var(--tinte-45); padding: 0 2px; transition: color 0.2s ease;}
.rg-labels span.now {color: var(--tinte);}


.ergebnis-karte {margin: 0 0 20px; max-width: 900px;}
.ergebnis-karte h3 {font-size: 22px; margin-bottom: 8px;}
.ergebnis-karte p {font-size: 15px; font-weight: 600; color: var(--tinte-70); margin-bottom: 16px; max-width: 620px;}
.ergebnis-karte p.fine {font-size: 13px; color: var(--tinte-45); margin: 12px 0 0;}
.ergebnis-karte .skala {margin: 4px 0 0;}
.demo-frage {margin-top: 18px;}
.demo-frage .dq {font-weight: 800; font-size: 15px; margin-bottom: 10px;}
.demo-pills {display: flex; flex-wrap: wrap; gap: 8px;}
.demo-frage ~ .fine {margin: 22px 0 0; font-size: 13px; color: var(--tinte-45);}
.demo-pill {
 font-weight: 800; font-size: 13.5px; padding: 8px 15px; border-radius: 999px;
 background: var(--karte); box-shadow: var(--shadow); color: var(--tinte);
 border: 2.5px solid transparent;
 transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.demo-pill:hover {transform: translateY(-2px);}
.demo-pill.selected {border-color: var(--blau); background: var(--blau); color: #fff;}
.demo-actions {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;}
.bruecke-vertieft {background: var(--hell-20);}
.stil-chip.pick {background: var(--tinte); color: #fff;}

@media (max-width: 719px) {
 .skala-stop {font-size: 12.5px;}
 .fb-kopf {padding: 20px 48px 16px 20px;}
 .fb-kopf h2 {font-size: 26px;}
 .fb-body {padding: 18px 20px 22px; font-size: 16px;}
 .wahl-opt .opt-text {font-size: 19px;}
 .liste-row p {font-size: 18px;}
}
@media (min-width: 720px) {
 .wahl.zwei {grid-template-columns: 1fr 1fr;}
 .step-wrap.wide {max-width: 900px;}
}
@media (prefers-reduced-motion: reduce) {
 .skala-fill, .skala-stop .ss-dot, .wahl-opt, .demo-pill {transition: none;}
}



.einstimmung {font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--tinte-70); max-width: 640px; margin: 0 0 20px;}
.sk-frage.klein {font-size: 24px; margin-top: 26px;}


.wahl-janein {max-width: 520px;}
.wahl-opt.ja-nein .ab svg {width: 18px; height: 18px;}
.wahl-opt.ja-nein.ja .ab {background: var(--tuerkis-12); color: var(--tuerkis);}
.wahl-opt.ja-nein.nein .ab {background: var(--grau-40); color: var(--tinte-45);}
.wahl-opt.ja-nein.ja.selected .ab {background: var(--tuerkis); color: #fff;}
.wahl-opt.ja-nein.nein.selected .ab {background: var(--tinte-45); color: #fff;}


.wahl-opt.mehrfach .ab {background: var(--grau-40); color: transparent;}
.wahl-opt.mehrfach .ab svg {width: 17px; height: 17px;}
.wahl-opt.mehrfach.selected .ab {background: var(--blau); color: #fff;}
.wahl-opt.mehrfach .opt-text {font-family: var(--body); font-weight: 700; font-size: 16.5px; line-height: 1.35;}


.format-kacheln {display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 4px;}
.format-kachel {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 20px 22px; text-align: left; border: 2.5px solid transparent;
 display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "icon titel" "icon text"; gap: 2px 14px;
 transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, border-color 0.15s ease;
}
.format-kachel:hover {transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--hell);}
.format-kachel svg {grid-area: icon; width: 30px; height: 30px; align-self: start; fill: none; stroke: var(--blau);}
.format-kachel b {grid-area: titel; font-family: var(--disp); font-weight: 700; font-size: 23px; line-height: 1.15;}
.format-kachel span {grid-area: text; font-size: 14.5px; font-weight: 600; color: var(--tinte-70); line-height: 1.45;}
.format-kachel.keins {background: var(--grau-40); box-shadow: none; grid-template-columns: 1fr; grid-template-areas: "titel" "text";}
.format-kachel.keins b {font-family: var(--body); font-weight: 800; font-size: 16px;}


.inhalt-liste {display: grid; gap: 10px; margin-bottom: 20px;}
.inhalt-row {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: left;
 padding: 15px 18px; display: flex; align-items: center; gap: 14px; border: 2.5px solid transparent;
 transition: transform 0.15s ease, border-color 0.15s ease;
}
.inhalt-row:hover {transform: translateY(-2px); border-color: var(--hell);}
.inhalt-row .ir-feld {
 flex-shrink: 0; font-family: var(--disp); font-weight: 700; font-size: 13.5px;
 padding: 3px 10px; border-radius: 999px; line-height: 1.25;
}
.inhalt-row .ir-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.inhalt-row .ir-txt b {font-weight: 800; font-size: 16px; line-height: 1.25;}
.inhalt-row .ir-txt span {font-size: 13.5px; font-weight: 600; color: var(--tinte-70); line-height: 1.4;}
.inhalt-row .ir-dauer {flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--tinte-45);}
.inhalt-karte {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 8px;}
.inhalt-karte .ik-kopf {display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px;}
.inhalt-karte .ik-format {font-weight: 800; font-size: 11.5px; color: var(--blau);}
.inhalt-karte .ik-dauer {font-weight: 800; font-size: 12.5px; color: var(--tinte-45);}
.inhalt-karte h2 {font-family: var(--disp); font-weight: 700; font-size: 27px; line-height: 1.12; margin-bottom: 8px;}
.inhalt-karte p {font-size: 16px; font-weight: 600; color: var(--tinte-70); line-height: 1.55;}
.ik-platzhalter {margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--grau-40); font-size: 14px; font-weight: 600; color: var(--tinte-70);}


.richtung-doc {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; margin: 10px 0 20px; max-width: 900px;}
.richt-kopf {
 position: relative; background: var(--blau); color: #fff; padding: 22px 56px 18px 26px;
 display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.richt-kopf .linien-badge .lb-name {color: #fff;}
.richt-kopf .richt-kicker {font-family: var(--disp); font-weight: 700; font-size: 20px; color: var(--hell);}
.richt-kopf .signet-eck {position: absolute; right: 14px; top: 14px; width: 26px; height: 26px;}
.richt-body {padding: 24px 26px 26px;}
.richt-satz {font-family: var(--disp); font-weight: 600; font-size: 34px; line-height: 1.15; margin-bottom: 14px;}
.richt-satz b {font-weight: 700; color: var(--blau);}
.richt-berufe {font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--tinte); margin-bottom: 12px;}
.richt-berufe b {font-weight: 800;}
.richt-kontext {font-size: 16.5px; font-weight: 600; line-height: 1.55; color: var(--tinte-70); margin-bottom: 14px;}
.richt-kontext b {font-weight: 800; color: var(--tinte);}
.richt-schluss {font-size: 16px; font-weight: 600; color: var(--tinte-70); line-height: 1.55; margin-bottom: 14px;}
.richt-zukunft {font-size: 15px; font-weight: 600; color: var(--tinte-45); line-height: 1.5; padding-top: 14px; border-top: 0; background: var(--hell-10); border-radius: var(--r-md); padding: 14px 16px;}
.vorlaeufig-hinweis {margin-top: 14px;}


.index-karte {max-width: 900px; margin-bottom: 22px;}
.index-karte h3 {font-size: 20px; margin-bottom: 10px;}
.index-karte .idx-titel {font-size: 22px;}
.idx-titel b {color: var(--blau);}
.idx-text {font-size: 15.5px; font-weight: 600; color: var(--tinte-70); line-height: 1.55;}
.idx-satz {font-family: var(--disp); font-weight: 600; font-size: 24px; line-height: 1.2; margin-bottom: 10px;}
.idx-satz b {font-weight: 700; color: var(--blau);}
.idx-mut {font-size: 15.5px; font-weight: 600; color: var(--tinte-70); line-height: 1.55; margin-bottom: 8px;}
.idx-ton {font-size: 14.5px; font-weight: 600; color: var(--tinte-45); line-height: 1.5;}

@media (max-width: 719px) {
 .richt-kopf {padding: 20px 48px 16px 20px;}
 .richt-satz {font-size: 27px;}
 .richt-body {padding: 20px 20px 22px;}
 .richt-berufe {font-size: 17px;}
 .inhalt-karte h2 {font-size: 23px;}
 .format-kachel b {font-size: 20px;}
 .sk-frage.klein {font-size: 21px;}
}
@media (min-width: 720px) {
 .format-kacheln {grid-template-columns: 1fr 1fr;}
 .format-kachel.keins {grid-column: 1 / -1;}
}
@media (prefers-reduced-motion: reduce) {
 .format-kachel, .inhalt-row {transition: none;}
 .liniennetz .nl, .liniennetz .nstop, .liniennetz .nlabel, .liniennetz .du-node,
 .mn-fill, .mn-dot {animation: none; opacity: 1; transform: none;}
}


/* Ende-Umbau (Variante A): Hinweis-Balken, „Kurz gefragt“, Tipps-Seite */
.entwicklung-balken {
 display: flex; align-items: center; gap: 10px;
 background: var(--hell-20); color: var(--blau);
 border-radius: var(--r-md); padding: 9px 14px; margin: -8px 0 26px;
 font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.eb-punkt {flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tuerkis);}
.btn.erg-weiter {white-space: normal; max-width: 100%; text-align: left;}

.kurz-frage {margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--tinte-08);}
.kq {display: flex; align-items: flex-start; gap: 11px; font-family: var(--disp); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--tinte); margin-bottom: 12px;}
.kq label {cursor: pointer;}
.kq-num {
 flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -2px;
 background: var(--blau); color: #fff; font-size: 15px;
 display: flex; align-items: center; justify-content: center;
}
.kq-hinweis {font-size: 14px; font-weight: 600; color: var(--tinte-45); margin: -6px 0 12px;}
.kurz-optionen {display: grid; gap: 10px;}
.kurz-opt {
 background: var(--karte); border: 2px solid var(--tinte-08); border-radius: var(--r-md);
 padding: 12px 16px; min-height: 52px; text-align: left;
 font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--tinte);
 transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.kurz-opt:hover {border-color: var(--hell); transform: translateY(-1px);}
.kurz-opt.selected {border-color: var(--blau); background: var(--hell-10); box-shadow: inset 0 0 0 1px var(--blau);}
.kurz-opt.mehrfach {display: flex; align-items: center; gap: 12px;}
.ko-box {
 flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--tinte-20);
 display: flex; align-items: center; justify-content: center; color: transparent;
}
.ko-box svg {width: 15px; height: 15px;}
.kurz-opt.mehrfach.selected .ko-box {background: var(--blau); border-color: var(--blau); color: #fff;}
.kurz-opt.exklusiv {background: var(--grau-40); border-color: transparent; color: var(--tinte-70);}
.kurz-opt.exklusiv.selected {border-color: var(--tinte-45); box-shadow: none; background: var(--grau-40);}
.kurz-opt.exklusiv.selected .ko-box {background: var(--tinte-45); border-color: var(--tinte-45);}
.kurz-frage.offen .kq {color: var(--orange-dark);}
.kurz-fehlt {color: var(--orange-dark); font-weight: 800; font-size: 14px; margin-top: 8px;}
.wunsch {
 display: block; width: 100%; min-height: 104px; resize: vertical;
 border: 2px solid var(--tinte-20); border-radius: var(--r-md); background: #fff;
 padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--tinte);
}
.wunsch::placeholder {color: var(--tinte-45); font-weight: 600;}
.wunsch:focus {outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--hell-40);}
.step-wrap.kurz .demo-actions {margin-top: 26px;}

.tipps-spalte {max-width: 900px;}
.mini-ergebnis {
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow);
 border-left: 6px solid var(--blau); padding: 18px 22px 14px; margin-bottom: 38px;
}
.mini-kopf {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px;}
.mini-kicker {font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--tinte-45);}
.mini-badges {display: flex; flex-wrap: wrap; gap: 8px 14px; min-width: 0;}
.mini-badges .linien-badge .lb-name {font-size: 12px; color: var(--tinte);}
.mini-satz {font-family: var(--disp); font-weight: 600; font-size: 23px; line-height: 1.2; margin-bottom: 8px;}
.mini-satz b {font-weight: 700; color: var(--blau);}
.link-knopf {
 display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
 font-weight: 800; font-size: 14.5px; color: var(--blau);
 text-decoration: underline; text-underline-offset: 3px;
}
.link-knopf svg {width: 16px; height: 16px;}

.tipps-block {margin-bottom: 38px;}
.tipps-kopf h2 {font-family: var(--disp); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--blau); margin-bottom: 4px;}
.tipps-kopf p, .region-leer {font-size: 15.5px; font-weight: 600; color: var(--tinte-70); margin-bottom: 16px;}
.tipp-link {text-decoration: none;}
.extern-ic {flex: none; width: 14px; height: 14px;}

.video-liste {display: grid; gap: 12px;}
.video-link {
 display: flex; align-items: flex-start; gap: 14px;
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px;
 transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-link:hover, .termin:hover {transform: translateY(-2px); box-shadow: var(--shadow-lift);}
.vl-play {
 flex: none; width: 46px; height: 46px; border-radius: 50%;
 background: var(--tinte); color: #fff; box-shadow: 0 0 0 3px var(--lc, var(--blau));
 display: flex; align-items: center; justify-content: center; margin: 3px 0 0 3px;
}
.vl-play svg {width: 20px; height: 20px; margin-left: 3px;}
.vl-txt {display: flex; flex-direction: column; gap: 5px; min-width: 0;}
.vl-txt b {font-weight: 800; font-size: 16.5px; line-height: 1.3; color: var(--tinte);}
.vl-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 700; color: var(--tinte-45);}
.vl-feld {font-family: var(--disp); font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 1px 8px;}
.vl-extern {display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--blau);}

.region-wahl {font-size: 15px; font-weight: 600; color: var(--tinte-70); background: var(--hell-10); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;}
.region-wahl b {color: var(--tinte); font-weight: 800;}
.termin-liste {display: grid; gap: 10px; margin-bottom: 12px;}
.termin {
 display: flex; align-items: center; gap: 16px;
 background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 18px;
 transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tm-datum {
 flex: none; width: 58px; height: 62px; border-radius: var(--r-md);
 background: var(--blau); color: #fff; font-family: var(--disp); line-height: 1;
 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.tm-datum b {font-size: 26px; font-weight: 700;}
.tm-datum span {font-size: 13px; font-weight: 700; color: var(--hell); text-transform: uppercase;}
.tm-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;}
.tm-txt b {font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--tinte);}
.tm-meta {font-size: 13.5px; font-weight: 700; color: var(--tinte-45);}
.tm-ort {color: var(--tinte); font-weight: 800;}
.tm-info {font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--tinte-70);}
.termin > .extern-ic {width: 18px; height: 18px; color: var(--blau);}
.uebersicht {
 display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
 font-weight: 800; font-size: 15px; color: var(--blau);
 text-decoration: underline; text-underline-offset: 3px;
}

.nachwuchs-karte {
 position: relative; overflow: hidden;
 background: var(--blau); color: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow);
 padding: 30px 30px 32px; margin-bottom: 28px;
}
.nw-txt {position: relative; z-index: 3; max-width: 580px;}
.nw-kicker {font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--hell);}
.nachwuchs-karte h2 {font-family: var(--disp); font-weight: 700; font-size: 31px; line-height: 1.08; color: #fff; margin: 4px 0 10px;}
.nachwuchs-karte p {font-size: 16px; font-weight: 600; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin-bottom: 20px;}
.nachwuchs-karte .signet-eck {position: absolute; right: 14px; top: 14px; width: 26px; height: 26px;}
.muster-nw {right: 20px; bottom: -16px; width: 104px; height: 104px; opacity: 0.95;}
.nw-link .extern-ic {width: 16px; height: 16px;}

.tipps-hilfe {background: var(--hell-10); border-radius: var(--r-lg); padding: 16px 18px; margin: -20px 0 38px;}
.tipps-hilfe h3 {font-family: var(--disp); font-weight: 700; font-size: 20px; color: var(--blau); margin-bottom: 10px;}
.hilfe-danke {font-weight: 800; color: var(--blau);}

.neustart-frage[hidden], .tipps-hilfe[hidden], .tipps-block[hidden], .nachwuchs-karte[hidden], .kurz-fehlt[hidden] {display: none;}
.neustart-frage {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: var(--grau-40); border-radius: var(--r-md); padding: 14px 16px; max-width: 560px;}
.neustart-frage p {width: 100%; font-size: 14.5px; font-weight: 700; color: var(--tinte-70);}
.btn-ghost.stark {color: var(--orange-dark);}

@media (min-width: 720px) {
 .kurz-optionen {grid-template-columns: 1fr 1fr;}
 .kurz-opt.exklusiv {grid-column: 1 / -1;}
 .video-liste {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 719px) {
 .entwicklung-balken {margin: -12px 0 20px; font-size: 13px; align-items: flex-start;}
 .eb-punkt {margin-top: 6px;}
 .kq {font-size: 19.5px;}
 .kurz-opt {font-size: 15px;}
 .mini-satz {font-size: 20px;}
 .tipps-kopf h2 {font-size: 24px;}
 .nachwuchs-karte {padding: 24px 20px 108px;}
 .nachwuchs-karte h2 {font-size: 26px;}
 .termin {gap: 12px; padding: 12px 14px;}
 .tm-datum {width: 52px; height: 56px;}
}
@media (prefers-reduced-motion: reduce) {
 .kurz-opt, .video-link, .termin {transition: none;}
}


.recht {max-width: 780px; padding-top: 28px; padding-bottom: 56px;}
.recht h1 {font-size: 46px; margin-bottom: 8px;}
.recht-zurueck {display: block; width: fit-content; margin-bottom: 14px; font-weight: 700; font-size: 14px; color: var(--blau); text-decoration: none;}
.recht-zurueck:hover {text-decoration: underline;}
.recht-karte {margin-top: 18px;}
.recht-karte h2 {font-family: var(--disp); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--blau); margin-bottom: 10px;}
.recht-karte p, .recht-karte li {font-size: 15.5px; color: var(--tinte-70);}
.recht-karte b {color: var(--tinte);}
.recht-karte p + p, .recht-karte ul + p {margin-top: 10px;}
.recht-karte ul {padding-left: 20px; margin-top: 8px;}
.recht-karte li + li {margin-top: 6px;}
.recht-karte a, .recht-stand a {color: var(--blau); font-weight: 700; overflow-wrap: anywhere;}
.recht-stand {margin-top: 22px; font-size: 13px; color: var(--tinte-45);}
.recht-links {display: flex; gap: 18px;}
.recht-links a {color: inherit; text-decoration: none;}
.recht-links a:hover {color: var(--blau); text-decoration: underline;}
.consent .fine a {color: var(--blau); font-weight: 700;}
@media (max-width: 719px) {.recht h1 {font-size: 36px;}}


/* ---- v9: abwechslungsreiche Frageformate, Wusstest-Du-Seiten, Handy ohne Scrollen ---- */

/* Pegel (E1) */
.pegel-wahl {gap: 10px;}
.pegel-opt {padding: 14px 18px;}
.pegel {width: 26px; height: 22px; flex-shrink: 0;}
.pegel rect {fill: var(--hell-40); transition: fill 0.15s ease;}
.pegel rect.an {fill: var(--blau);}
.pegel-opt.selected .pegel rect.an {fill: var(--orange);}

/* Stufen-Kacheln (A1, A3) */
.stufen {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 460px; margin: 0 auto;}
.stufe {
 background: var(--karte); border-radius: var(--r-md); box-shadow: var(--shadow);
 padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 7px;
 border: 2.5px solid transparent;
 transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), border-color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) {.stufe:hover {transform: translateY(-2px);} .stufe:hover .st-treppe i.an {opacity: 1;}}
.st-treppe {display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 38px;}
.st-treppe i {flex: 1; border-radius: 2px; background: var(--tinte-08);}
.st-treppe i.an {background: var(--sk, var(--blau)); opacity: 0.5; transition: opacity 0.15s ease;}
.stufe.now .st-treppe i.an {opacity: 1;}
.stufe.now {border-color: var(--sk, var(--blau)); background: color-mix(in srgb, var(--sk, var(--blau)) 10%, #fff);}
.st-label {font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--tinte-70); text-align: center;}
.stufe.now .st-label {color: var(--tinte);}
.stufen.locked .stufe {pointer-events: none;}
.stufe:focus-visible {outline: 3px solid var(--orange); outline-offset: 0;}

/* Story-Bildkachel (A1) */
.swipe-card.story::before {content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--lc); z-index: 4;}
.swipe-card.story .karten-kopf {position: absolute; top: 5px; left: 0; right: 0; z-index: 3; padding: 12px 12px;}
.swipe-card.story .linien-badge {background: rgba(255,255,255,0.94); border-radius: 999px; padding: 3px 12px 3px 3px; max-width: 72%;}
.swipe-card.story .linien-badge .lb-name {color: var(--tinte); font-size: 12px;}
.swipe-card.story .karten-typ {background: rgba(255,255,255,0.88);}
.swipe-card.story .karten-visual {position: absolute; inset: 0; margin: 0; border-radius: 0; min-height: 0;}
.swipe-card.story .karten-visual img {border-radius: 0;}
.swipe-card.story .karten-visual::after {content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,12,25,0) 30%, rgba(0,12,25,0.86) 100%);}
.swipe-card.story .kv-tag {display: none;}
.swipe-card.story .karten-statement {position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px 20px 20px;}
.swipe-card.story .karten-statement p {color: #fff; font-size: 24px; text-shadow: 0 1px 12px rgba(0,12,25,0.35);}
.fmt-story .deck-skala {max-width: 460px;}

/* Auf-den-Punkt-Auswahl kompakt */
.pick-wahl.viele .opt-text {font-size: 18px;}

/* Schnell-Check (A5) */
.stempel {display: flex; gap: 8px; justify-content: center; margin: -4px 0 14px;}
.stempel-feld {
 width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--tinte-20);
 display: inline-flex; align-items: center; justify-content: center; color: #fff;
 transition: background 0.2s ease, border-color 0.2s ease;
}
.stempel-feld svg {width: 17px; height: 17px;}
.stempel-feld.ja {background: var(--tuerkis); border: 2px solid var(--tuerkis); animation: stempelIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.5);}
.stempel-feld.nein {background: var(--grau-40); border: 2px solid var(--tinte-08);}
.stempel-feld.jetzt {border: 2.5px solid var(--orange); background: #fff;}
@keyframes stempelIn {from {transform: scale(0.4);} to {transform: scale(1);}}
.wahl-janein.kacheln {grid-template-columns: 1fr 1fr; max-width: 520px; gap: 12px; margin-inline: auto;}
.kacheln .wahl-opt.ja-nein {flex-direction: column; justify-content: center; text-align: center; padding: 20px 10px; min-height: 128px; gap: 10px;}
.kacheln .wahl-opt.ja-nein .ab {width: 52px; height: 52px;}
.kacheln .wahl-opt.ja-nein .ab svg {width: 26px; height: 26px;}
.kacheln .wahl-opt .opt-text {font-size: 19px;}

/* Wertekarten-Stapel (A6) */
.werte-stapel {position: relative; margin: 6px 0 26px;}
.ws-hinten {position: absolute; left: 12px; right: 12px; bottom: -8px; top: 8px; background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); opacity: 0.75; transform: rotate(-1.4deg);}
.ws-hinten.zwei {left: 26px; right: 26px; bottom: -15px; top: 15px; opacity: 0.5; transform: rotate(1.6deg);}
.these-card.werte-karte {position: relative; margin: 0; border-top: 6px solid var(--tuerkis); animation: cardIn 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.15);}
.wk-label {display: inline-block; font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--tinte); background: var(--tuerkis-12); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;}

/* Halbzeit-Marke (A4) */
.halbzeit {display: inline-block; margin-left: 8px; font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--tinte); background: var(--hell); border-radius: 999px; padding: 1px 10px; vertical-align: 1px; animation: stempelIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.5);}

/* Chat (B3) */
.chat {display: flex; flex-direction: column; gap: 12px; max-width: 580px;}
.chat-zeile {display: flex; gap: 10px; align-items: flex-end; animation: blaseIn 0.35s cubic-bezier(0.2, 0.85, 0.3, 1.1);}
.chat-zeile.rechts {justify-content: flex-end;}
.chat-verlauf {display: flex; flex-direction: column; gap: 6px; opacity: 0.5;}
.chat-zeile.alt {animation: none;}
.chat-zeile.alt .chat-avatar {width: 28px; height: 28px; border-radius: 8px;}
.chat-zeile.alt .chat-avatar svg {width: 14px; height: 14px;}
.chat-zeile.alt .chat-blase {font-size: 15px; padding: 9px 13px; box-shadow: none; border: 1px solid var(--tinte-08);}
.chat-zeile.alt .chat-blase.du {font-size: 14px; border: 0;}
@keyframes blaseIn {from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: none;}}
.chat-avatar {width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--blau); display: flex; align-items: center; justify-content: center;}
.chat-avatar svg {width: 20px; height: 20px;}
.chat-blase {background: var(--karte); box-shadow: var(--shadow); border-radius: 18px 18px 18px 4px; padding: 14px 16px; font-family: var(--disp); font-weight: 600; font-size: 22px; line-height: 1.25; max-width: 88%;}
.chat-blase.klein {font-family: var(--body); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--tinte-70);}
.chat-blase.du {background: var(--blau); color: #fff; border-radius: 18px 18px 4px 18px; font-family: var(--body); font-weight: 800; font-size: 17px;}
.chat-antworten {display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 2px;}
.chat-chip {
 background: var(--karte); border: 2px solid var(--blau); color: var(--blau);
 border-radius: 999px; padding: 10px 20px; font-weight: 800; font-size: 16px; min-width: 62%; text-align: center;
 transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Hover nur mit Maus: auf dem Handy bliebe er nach dem Tippen auf dem nächsten Chip stehen und sähe wie vorgewählt aus. */
@media (hover: hover) {.chat-chip:hover {background: var(--blau); color: #fff; transform: translateX(-3px);}}

/* Gegenüber (A7) */
.gegenueber {display: flex; flex-direction: column; gap: 0;}
.gg-karte {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px 8px; transition: background 0.2s ease;}
.gg-karte.done {background: var(--hell-10);}
.gg-label {display: inline-block; font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--blau); background: var(--hell-20); border-radius: 999px; padding: 2px 11px; margin-bottom: 6px;}
.gg-karte p {font-family: var(--disp); font-weight: 600; font-size: 19px; line-height: 1.22; margin-bottom: 10px;}
.gg-oder {position: relative; z-index: 2; align-self: center; margin: -9px 0; font-family: var(--disp); font-weight: 700; font-size: 13px; color: #fff; background: var(--orange); border-radius: 999px; padding: 2px 14px;}

/* Regler-Paare (B2) */
.liste.paare .liste-row p {font-size: 18px;}
.paare-hinweis {font-size: 14px; margin-bottom: 12px;}

/* Wusstest-Du-Seite */
.step-wrap.wusstest {max-width: 760px;}
.wd-kopf {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.step-wrap .wd-kopf .eyebrow {margin-bottom: 0;}
.wd-nr {font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--tinte-45);}
.wd-titel {font-family: var(--disp); font-weight: 700; color: var(--blau); font-size: 30px; line-height: 1.05; margin: 10px 0 12px;}
.wd-karussell {background: var(--karte); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; position: relative;}
.wd-karussell::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hell); z-index: 1;}
.wd-spur {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;}
.wd-spur::-webkit-scrollbar {display: none;}
.wd-spur:focus-visible {outline: 3px solid var(--orange); outline-offset: -3px;}
.wd-fakt {flex: 0 0 100%; scroll-snap-align: start; padding: 14px 18px 10px 22px; display: flex; flex-direction: column; gap: 6px; margin: 0;}
.wd-zahl-zeile {display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;}
.wd-zahl {font-family: var(--disp); font-weight: 700; font-size: 46px; line-height: 1; color: var(--blau); letter-spacing: -0.5px;}
.wd-text {font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--tinte-70);}
.wd-quelle {font-size: 11.5px; font-weight: 700; color: var(--tinte-45); margin-top: auto; padding-top: 4px;}
.wd-ring {width: 56px; height: 56px; flex-shrink: 0;}
.wd-ring .rg-grund {fill: none; stroke: var(--hell-40); stroke-width: 9;}
.wd-ring .rg-wert {fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round;}
.wd-personen {height: 30px; width: auto; flex-shrink: 0;}
.wd-personen g {fill: var(--hell-40);}
.wd-personen g.an {fill: var(--orange);}
.wd-balken {display: grid; gap: 5px; margin: 2px 0;}
.wb-zeile {display: grid; grid-template-columns: minmax(84px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--tinte-70); line-height: 1.2;}
.wb-bahn {height: 10px; background: var(--grau-40); border-radius: 5px; overflow: hidden;}
.wb-bahn i {display: block; height: 100%; background: var(--blau); border-radius: 5px; transform-origin: left; animation: balkenIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards 0.15s;}
.wb-zeile.erste .wb-bahn i {background: var(--orange);}
@keyframes balkenIn {from {transform: scaleX(0);} to {transform: scaleX(1);}}
.wb-wert {font-family: var(--disp); font-weight: 700; font-size: 13.5px; color: var(--tinte); min-width: 56px; text-align: right;}
.wd-nav {display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 6px 18px; border-top: 1px solid var(--tinte-08);}
.wd-punkte {display: flex;}
.wd-punkt {width: 24px; height: 28px; display: inline-flex; align-items: center; justify-content: center;}
.wd-punkt::before {content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--tinte-20); transition: width 0.2s ease, background 0.2s ease;}
.wd-punkt.an::before {width: 18px; background: var(--orange);}
.wd-mehr {font-weight: 800; font-size: 14px; color: var(--blau); padding: 8px 6px;}
.wd-mehr.am-ende {visibility: hidden;}
.wd-vdi {display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--tinte-70); margin: 10px 2px 0; line-height: 1.35;}
.wd-vdi svg {width: 20px; height: 20px; flex-shrink: 0; background: var(--blau); border-radius: 5px; padding: 4px; box-sizing: content-box;}
.wd-vdi b {color: var(--blau); font-weight: 800;}
.wd-du {margin-top: 10px; background: var(--blau); color: #fff; border-radius: var(--r-lg); padding: 13px 18px 15px;}
.wd-du-kicker {display: block; font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--hell); margin-bottom: 3px;}
.wd-du p {font-size: 15.5px; font-weight: 600; line-height: 1.5;}
.wd-du b {font-weight: 800; color: #fff; box-shadow: inset 0 -2px 0 var(--orange);}
.wd-weiter-zeile {margin-top: 12px; display: flex; flex-direction: column; gap: 10px;}
.wd-ausblick {font-size: 15px; font-weight: 700; color: var(--tinte); line-height: 1.4;}

/* Ergebnis: Satz zur Kombination */
.richt-kombi {font-size: 16.5px; font-weight: 600; line-height: 1.55; color: var(--tinte); background: var(--hell-10); border-left: 4px solid var(--orange); padding: 10px 14px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 0 0 14px;}
.richt-kombi b {font-weight: 800; color: var(--blau);}

@media (min-width: 720px) {
 .wahl-janein.kacheln {gap: 16px;}
 .gegenueber {flex-direction: row; align-items: stretch;}
 .gg-karte {flex: 1; display: flex; flex-direction: column;}
 .gg-skala {margin-top: auto;}
 .gg-oder {margin: 0 -14px; align-self: center;}
 .step-wrap.wusstest {max-width: 1000px;}
 .wd-titel {font-size: 40px;}
 .wd-spur {display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible;}
 .wd-fakt + .wd-fakt {border-left: 1px solid var(--tinte-08);}
 .wd-fakt {padding: 18px 20px 14px 24px;}
 .wd-nav {display: none;}
 .wd-weiter-zeile {flex-direction: row; align-items: center; justify-content: space-between; gap: 20px;}
 .wd-du p {font-size: 16.5px;}
 /* Die Anleitung über Aussagen bleibt klein; die alte Desktop-Regel für .sk-frage machte sie 42px groß */
 .step-wrap .sk-frage.these-kicker {font-size: 15px; margin: 4px 0 12px;}
 /* Laptop-Höhe: Karte schrumpft mit dem Fenster, damit die Skala darunter sichtbar bleibt */
 .fmt-story .deck, .fmt-karte .deck {height: clamp(340px, calc(100vh - 480px), 500px); min-height: 0;}
 .pick-wahl.viele {grid-template-columns: 1fr 1fr;}
 .pick-wahl.viele .wahl-opt {padding: 14px 18px;}
 .pick-wahl.viele .wahl-opt.quiet {grid-column: 1 / -1;}
}
@media (min-width: 720px) and (max-height: 960px) {
 .fmt-story .deck-hint, .fmt-karte .deck-hint {display: none;}
}

/* Handy: Frage- und Wusstest-Seiten passen ohne Scrollen auf einen Bildschirm */
@media (max-width: 719px) {
 body.schritt-modus .dachzeile, body.schritt-modus .fussleiste {display: none;}
 body.schritt-modus .haltband {padding-top: 8px;}
 #s-step.screen {padding: 12px 0 10px;}
 .step-wrap .eyebrow {margin-bottom: 8px; font-size: 12.5px; padding: 4px 13px 4px 10px;}
 .step-wrap .sk-frage {font-size: 26px; margin: 4px 0 14px;}
 .step-wrap .sk-frage.these-kicker {font-size: 14px; margin: 2px 0 10px;}
 .step-wrap .einstimmung {font-size: 14.5px; line-height: 1.45; margin-bottom: 10px;}
 .step-foot {margin-top: 6px;}
 .undo-btn {padding: 6px 10px 6px 4px; font-size: 13.5px;}
 .these-card {padding: 18px 18px; margin: 4px 0 16px;}
 .these-card p {font-size: 21px;}
 .wahl {gap: 9px;}
 .wahl-opt {padding: 13px 16px;}
 .fmt-story .deck, .fmt-karte .deck {height: clamp(300px, 47vh, 420px); min-height: 0; margin: 6px 0 12px;}
 .fmt-story .deck-hint, .fmt-karte .deck-hint {display: none;}
 .fmt-story .einstimmung, .fmt-karte .einstimmung {display: none;}
 .fmt-karte .karten-statement {padding: 14px 18px 18px;}
 .fmt-karte .karten-statement p {font-size: 21px;}
 .swipe-card.story .karten-statement p {font-size: 22px;}
 .pick-wahl.viele {grid-template-columns: 1fr 1fr; gap: 8px;}
 .pick-wahl.viele .wahl-opt {padding: 10px 10px; gap: 8px; align-items: center;}
 .pick-wahl.viele .wahl-opt .ab {width: 28px; height: 28px; font-size: 13px;}
 .pick-wahl.viele .opt-text {font-size: 15px; line-height: 1.2; hyphens: auto;}
 .pick-wahl.viele .wahl-opt.quiet {grid-column: 1 / -1;}
 .liste.paare {gap: 10px;}
 .liste.paare .liste-row {padding: 14px 16px 8px;}
 .liste.paare .liste-row p {font-size: 17px; margin-bottom: 8px;}
 .step-wrap.fmt-paare .demo-actions {margin-top: 12px;}
 .chat-blase {font-size: 20px;}
 .werte-karte p {font-size: 21px;}
 .gg-karte p {font-size: 17.5px;}
 .wd-titel {font-size: 27px; margin: 8px 0 10px;}
 .wd-zahl {font-size: 42px;}
 .wd-weiter-zeile .btn {width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
 .stufe, .chat-chip, .wb-bahn i, .stempel-feld, .chat-zeile, .halbzeit {transition: none; animation: none;}
}

/* Zukunftsthemen (A1) nach Thomas: Themenkarte in der Mitte, vier Antwortfelder in abgestuften Blautönen */
.felder-frage {text-align: center; margin: 6px 0 4px;}
.step-wrap .sk-frage.felder-frage {margin: 6px auto 4px; max-width: 620px;}
.felder-hinweis {text-align: center; font-size: 14px; color: var(--tinte-45); margin: 0 0 16px;}
.felder-brett {
 display: grid; gap: 12px; width: 100%; max-width: 460px; margin: 0 auto;
 grid-template-columns: 1fr 1fr;
 grid-template-areas: "lo ro" "karte karte" "lu ru";
}
.feld-opt {
 min-height: 58px; padding: 8px 10px; border-radius: 14px;
 font-family: var(--body); font-weight: 800; font-size: 16.5px; line-height: 1.15; color: var(--blau);
 border: 2px solid color-mix(in srgb, var(--blau) 30%, transparent);
 box-shadow: 0 2px 6px rgba(0, 12, 25, 0.06);
 transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.16s ease, filter 0.16s ease;
}
.feld-opt.f1 {background: #EEF7FD;}
.feld-opt.f2 {background: #CEE7F9;}
.feld-opt.f3 {background: var(--vdi-hellblau); border-color: color-mix(in srgb, var(--blau) 45%, transparent);}
.feld-opt.f4 {background: var(--vdi-blau); color: #fff; border-color: #002A73;}
@media (hover: hover) {.feld-opt:hover {transform: translateY(-2px); box-shadow: var(--shadow-lift);}}
.feld-opt:focus-visible {outline: 3px solid var(--orange); outline-offset: 2px;}
.feld-opt.ueber {
 transform: scale(1.06);
 box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--vdi-orange), 0 10px 28px rgba(0, 61, 164, 0.35);
 filter: brightness(1.06);
}
.feld-opt.selected {box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--vdi-orange);}
.themen-karte {
 justify-self: center; width: min(100%, 340px);
 display: flex; flex-direction: column; overflow: hidden;
 background: var(--vdi-blau); border: 3px solid var(--vdi-blau); border-radius: 18px;
 box-shadow: 0 6px 22px rgba(0, 12, 25, 0.22);
 touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
 position: relative; z-index: 2;
 animation: themaIn 0.38s cubic-bezier(0.2, 0.85, 0.3, 1.15) backwards;
}
@keyframes themaIn {from {opacity: 0; transform: translateY(14px) scale(0.95);}}
.themen-karte.zieht {cursor: grabbing; z-index: 20; box-shadow: 0 18px 40px rgba(0, 12, 25, 0.35); animation: none;}
.themen-karte.zieht {transition: transform 0.12s ease-out, opacity 0.12s ease;}
.themen-karte.ueber-feld {opacity: 0.55;}
.feld-opt {position: relative;}
.feld-opt.ueber {z-index: 25;}
.themen-karte.zurueck {transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.15);}
.themen-karte.landet {transition: transform 0.34s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.34s ease; opacity: 0; z-index: 20; animation: none;}
.tk-titel {
 font-family: var(--disp); font-weight: 700; font-size: 21px; line-height: 1.1; color: #fff;
 text-align: center; padding: 8px 10px 7px;
}
.tk-bild {height: clamp(120px, calc(100vh - 610px), 300px); border-radius: 12px; overflow: hidden; background: var(--hell-20); margin: 0 4px;}
.tk-bild img {width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none;}
.tk-text {
 font-family: var(--body); font-weight: 800; font-size: 15px; line-height: 1.25; color: #fff;
 text-align: center; padding: 8px 12px 10px;
}
@media (max-width: 719px) {
 .fmt-felder .eyebrow {display: none;}
 .step-wrap .sk-frage.felder-frage {font-size: 24px; margin: 2px auto 2px;}
 .felder-hinweis {font-size: 13px; margin-bottom: 10px;}
 .felder-brett {gap: 10px;}
 .feld-opt {min-height: 52px;}
 .tk-bild {height: clamp(120px, calc(100vh - 580px), 300px);}
}
@media (min-width: 720px) {
 .step-wrap .sk-frage.felder-frage {font-size: 36px;}
 .felder-brett {
  max-width: 760px; gap: 18px 22px; align-items: center;
  grid-template-columns: 1fr 340px 1fr;
  grid-template-areas: "lo karte ro" "lu karte ru";
 }
 .feld-opt {min-height: 96px; font-size: 19px;}
 .tk-bild {height: clamp(170px, calc(100vh - 560px), 300px);}
}
@media (prefers-reduced-motion: reduce) {
 .themen-karte, .themen-karte.zurueck, .themen-karte.landet, .feld-opt {animation: none; transition: none;}
}