: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(--tinte);}

.logo-shield {padding: var(--logo-clear); flex-shrink: 0; margin-right: calc(var(--logo-clear) * -1);}
.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(--tinte-45); padding: 6px 0;
 transition: color 0.2s ease;
}
.station .st-dot {
 width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
 background: var(--tinte-20);
 transition: background 0.25s ease, box-shadow 0.25s ease;
}
.station .st-track {width: 32px; height: 4px; border-radius: 2px; background: var(--tinte-20); margin: 0 8px; transition: background 0.25s ease;}
.station.done {color: var(--tinte-70);}
.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);}

.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.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;}


.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 22px;}

.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-body {padding: 14px 26px 10px;}
.liniennetz svg {width: 100%; height: auto; display: block;}

.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: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;
}


.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: 13px; height: 4px; border-radius: 2px; background: var(--tinte-08);}
.skala-fill {
 position: absolute; left: 12.5%; top: 13px; 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: 9px; 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);}


.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-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;}
.vorlaeufig-tag {
 display: inline-block; font-family: var(--disp); font-weight: 700; font-size: 11px; color: var(--tinte-70); background: var(--grau-40); border-radius: 999px; padding: 3px 10px; vertical-align: middle;
}

@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-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;}
.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;}
}