/* Teil 2 von 2, nach basis.css laden (Reihenfolge = Kaskade); Tokens stehen nur in basis.css. */
/* == Bausteine und Bühne der Vorschau (vgv.css; bewusste Abweichung UR-6/UR-7: Navigation ab 940 px, langer Knopf ab 1240 px, Telefon ab 940 px, Nummer ab 1120 px; die Vorlage vgv.css:139 schaltet erst bei 1200 px) == */
.kopf .kopf-lang{display:none}
@media (min-width:1240px){
.kopf .kopf-kurz{display:none}
.kopf .kopf-lang{display:inline-flex}
}
/* V019/UR-80: unter 480 px weicht „Anfragen“ dem Anruf-Knopf mit Wort (Anfrage bleibt über Bühne und Menü) */
@media (max-width:479px){.kopf .kopf-kurz{display:none}}
/* UR-58/UR-80: 360–479 px zeigt der Anruf-Knopf das Wort „Anrufen“ und ist gefüllt (anders als der graue Menü-Knopf); darunter nur das Symbol */
.kopf-telefon-wort{display:none}
@media (min-width:360px) and (max-width:479px){.kopf-telefon{gap:4px;padding:0 8px;font-size:.875rem;color:var(--weiss);background:var(--blau-tief)}.kopf-telefon-wort{display:inline}}
@media (max-width:409px){.knopf-gross{padding-inline:16px}}
@media (max-width:599px){.kontakt .magnet-feld,.kontakt .knopf{width:100%}}
.magnet-feld{display:inline-block;padding:12px;margin:-12px}
[data-magnet]{transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .5s var(--kurve)}
[data-magnet].zieht{transition:transform .12s linear}
[data-magnet] .knopf-text{display:inline-block;transform:translate(calc(var(--tx,0px) * .3),calc(var(--ty,0px) * .3));transition:inherit}
.h1-leicht{font-weight:300;letter-spacing:-.035em}
.h1-marke{color:var(--blau-tief);background:linear-gradient(100deg,var(--blau-tief),var(--blau) 55%,var(--ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.aktionen{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.t-aussage{order:5;margin-top:var(--s-3)}
.aktionen .magnet-feld,.aktionen .magnet-feld .knopf{width:100%}
.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-voll);font-size:.8125rem;font-weight:650;color:var(--ink);white-space:nowrap;
background:var(--glas-3);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffb2,0 10px 24px -12px #142c5273}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blau)}
.chip-2::before{background:var(--ziegel)}
/* Schilder in freien Zonen der Szene (720×420), unter 768 px im Fluss. Begründung: test_illustrationen_szene_css, test_feinschliff16_css */
.chip-1{left:12px;top:0}
.chip-2{right:8px;top:0}
.chip-3{left:8px;bottom:0}
.t-aussage{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.aussage{font:500 clamp(1.1875rem,.9rem + .9vw,1.5rem)/1.38 var(--titel);letter-spacing:-.015em;max-width:44ch;margin:0;hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;-webkit-hyphenate-limit-lines:2;overflow-wrap:anywhere}
.markiert{font-weight:760;background:linear-gradient(transparent 60%,#142c5259 60% 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.einstieg-seite .t-bild{min-height:220px}
.szene{position:relative;width:min(100%,calc(40svh*720/420));margin-inline:auto;padding-top:10px;padding-bottom:44px}
.szene .zeichnung{width:100%;height:auto}
.szene-schilder{list-style:none;margin:0;padding:0}
.szene .chip{font-size:.875rem;padding-block:5px}
.einstieg-seite h1{font-size:clamp(2.125rem,1rem + 3.6vw,4rem)}
.einstieg-gebiet .t-bild{order:5;display:flex;justify-content:center;padding:clamp(16px,.75rem + 1.5vw,32px)}
.einstieg-kontakt h1{margin:var(--s-4) 0 var(--s-5)}
.karte-figur{margin:0;display:grid;gap:14px}
.zwei-spalten{display:grid;gap:0 var(--s-7)}
.quellen-titel{margin-top:var(--s-6)}
.leistung-gross{width:min(62%,260px);margin:28px auto;filter:drop-shadow(0 18px 26px #1f45804c)}
@media (min-width:768px){
.aktionen{margin-top:var(--s-3)}
.aktionen .magnet-feld,.aktionen .magnet-feld .knopf{width:auto}
.t-aussage{margin:0}
.chip{font-size:.875rem;padding:8px 14px;background:var(--glas-2);-webkit-backdrop-filter:var(--unschaerfe-klein);backdrop-filter:var(--unschaerfe-klein)}
.chip-3{left:12px;bottom:2px}.szene{padding-bottom:52px}
}
/* Fluss unter der Zeichnung: schmal oder niedrig; steht NACH dem 768-px-Block (padding-bottom:0 gewinnt). Begründung: test_illustrationen_szene_css */
@media (max-width:767px){.t-bild{padding-block:12px}}
@media (max-width:767px),(max-height:500px){.szene{padding-bottom:0}.szene-schilder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:8px;padding-inline:12px}.chip-2,.chip-3{position:static}}
@media (max-width:349px),(max-height:500px){.chip-1{position:static}.szene{padding-top:0}.szene-schilder{justify-content:center}}
/* == 9. Inhaltsbausteine */
/* Fallkarten */
.t-fall p{font-size:1.0625rem}
.t-fall strong{font:740 1.1875rem/1.3 var(--titel);letter-spacing:-.015em}
/* Verwaltungen */
.t-miete{display:flex;flex-direction:column;min-height:400px}
.t-miete p{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);max-width:40ch}
.h-riesig{font-size:clamp(2.25rem,1.2rem + 3.6vw,4.25rem);line-height:1;letter-spacing:-.045em;font-weight:800;margin:22px 0 16px}
.leistung-symbol{width:72px;height:72px;margin-bottom:18px;filter:drop-shadow(0 10px 16px #1f458040)}
.leistung-symbol.gross{width:clamp(96px,5rem + 4vw,150px);height:auto;margin:24px 0 0;filter:drop-shadow(0 18px 26px #08142c73)}
.wasserzeichen{position:absolute;right:-18px;bottom:-6px;width:min(62%,380px);opacity:.16;z-index:0!important;pointer-events:none}
.schritte{position:relative;z-index:1;display:grid;gap:var(--spalt)}
.schritt{padding:24px 24px 26px}
.schritt p{font-size:1.0625rem}
.schritt-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;color:var(--blau)}
.schritt-kopf svg{width:40px;height:40px}
.nummer{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;font:780 1.5rem/1 var(--titel);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--weiss);box-shadow:inset 0 0 0 2.5px var(--blau),0 8px 18px -8px #1f45808c}
.nummer::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 0 2px #5c86cf80,0 0 22px 4px #5c86cf73;opacity:0}
.schritt:last-child .nummer{color:var(--weiss);background:linear-gradient(150deg,#3563AE,var(--blau-tief))}
/* Zeitleiste (senkrecht) */
.zeitleiste .schritt{padding-left:92px}
.zeitleiste .schritt-kopf{position:absolute;left:24px;top:22px;margin:0}
/* Gebietsschema */
.t-karte{margin:0;display:flex;flex-direction:column;gap:14px;padding:clamp(16px,.75rem + 1.5vw,36px)}
.t-karte figcaption{font-size:calc(var(--t-text) - 1px);line-height:1.5;max-width:324px;margin-inline:auto}
.karte{width:100%}
.karte-hoch{max-width:324px;margin-inline:auto}
.karte-quer{display:none;max-width:624px;margin-inline:auto}
@media (min-width:720px){.karte-quer{display:block}.karte-hoch{display:none}.t-karte figcaption{max-width:624px}}
@media (min-width:1024px){.t-karte.s-7{padding:16px}}
.sprungliste{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-4)}
.sprungliste li{hyphens:manual;overflow-wrap:normal}
.sprungliste a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-voll);font-weight:600;font-size:.9375rem;text-decoration:none;background:#ffffffb2;box-shadow:inset 0 0 0 1.5px currentColor}
:is(.flaeche-tinte,.flaeche-blau) .sprungliste a{background:#ffffff14}
@media (hover:hover){.sprungliste a:hover{text-decoration:underline}}
.liste-titel{margin:0 0 var(--s-2);font-size:var(--t-klein);font-weight:600}
.inhaltsliste ul{display:block;margin:0}
.inhaltsliste a{display:flex;border-radius:0;padding:10px 0;background:0 0;box-shadow:inset 0 -1px 0 var(--linie-zart);text-decoration:underline}
/* Wer */
.monogramm{position:absolute;right:-.04em;bottom:-.2em;z-index:0!important;font:900 clamp(5rem,3rem + 5vw,8rem)/1 var(--titel);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #2b569d1f;pointer-events:none;user-select:none}
.plus{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--blau);transition:transform .4s var(--kurve)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--blau)}
.plus::after{transform:rotate(90deg);transition:transform .4s var(--kurve)}
.frage[open] .plus{transform:rotate(180deg)}
.frage[open] .plus::after{transform:rotate(0)}
/* Kurzfassung, Listen, Leistungskarten */
.kurz .punkte{margin-bottom:var(--s-4)}
.zahlliste{counter-reset:z;display:grid;gap:10px}
.zahlliste li{counter-increment:z;position:relative;padding:10px 0 10px 52px;min-height:44px}
.zahlliste li::before{content:counter(z);position:absolute;left:0;top:6px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:760 1rem/1 var(--titel);color:var(--weiss);background:linear-gradient(150deg,#3563AE,var(--blau-tief))}
.stapel{display:grid;gap:var(--spalt)}
.stapel>.kachel{background:var(--glas-3)}
@media (max-width:767px) and (min-height:700px){
.stapel>.kachel{position:sticky;box-shadow:inset 0 1px 0 #fff,0 -12px 30px -18px #142c5266}
.stapel>:nth-child(1){top:84px}.stapel>:nth-child(2){top:98px}.stapel>:nth-child(3){top:112px}.stapel>:nth-child(4){top:126px}
}
.quellen{font-size:var(--t-klein);line-height:1.55}
.kontakt-bild{display:none;color:var(--blau)}
@media (min-width:768px){.kontakt-bild{display:block;width:clamp(150px,10rem + 6vw,260px)}}
.lesemodus{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lesemodus[hidden]{display:none}
.lesemodus .hilfe{color:var(--linie-zart)}
@media (min-width:1024px){
.t-bild{grid-row:1}
.t-aussage{grid-column:8/span 5;grid-row:2}
.einstieg-seite .t-bild{grid-row:1/span 2}
.einstieg-mit-aussage .t-bild{grid-row:1}
.einstieg-mit-aussage .t-aussage{grid-row:2}
.einstieg-gebiet .t-bild{grid-column:8/span 5}
.zwei-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}.zwei-spalten>h3{grid-column:1/-1}.zwei-spalten>:last-child:nth-child(odd){grid-column:1/-1}
.bento-fall{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.bento-fall .kopfspalte{grid-column:1/span 4;grid-row:1/span 2;position:sticky;top:110px;padding-top:20px}
.t-fall-1{grid-column:5/span 8}
.t-fall-2{grid-column:5/span 4;align-self:stretch}
.t-fall-3{grid-column:9/span 4;align-self:stretch}
.bento-fall-1 .kopfspalte{grid-column:1/-1;grid-row:auto;position:static}
.bento-fall-1 .t-fall-1{grid-column:1/-1}
.bento-fall-2 .kopfspalte{grid-row:1}
.bento-fall-2 .t-fall-1{grid-column:5/span 4}
.bento-fall-2 .t-fall-2{grid-column:9/span 4}
.bento-verwaltung{grid-template-columns:repeat(12,minmax(0,1fr))}
.t-miete{grid-column:1/span 7;grid-row:span 2;min-height:540px}
.t-weg,.t-sonder{grid-column:8/span 5}
.quer .schritte{grid-template-columns:repeat(4,minmax(0,1fr))}
.quer .verbinder{display:block;left:52px;right:52px;top:51px;bottom:auto;width:auto;height:3px}
.quer .verbinder::before{transform-origin:0 50%;background:linear-gradient(90deg,var(--blau),var(--ziegel))}
.quer .verbinder::after{top:0;bottom:0;left:0;width:30%;height:auto;background:linear-gradient(90deg,#fff0,#fff,#fff0)}
/* Symbole der Schritte wie in der Vorlage: Schritt 1–3 einfarbig (weiß + Schriftfarbe), Schritt 4 behält die Plakette in Ziegelrot */
.schritte-feld.quer .schritt:not(:last-child) .schritt-kopf svg [stroke="#A84B26"]{stroke:currentColor}
.schritte-feld.quer .schritt:not(:last-child) .schritt-kopf svg [fill="#F7EBE2"]{fill:#fff}
.schritte-feld.quer .schritt-kopf svg :is([fill="#C9D8EE"],[fill="#EBF3FF"]){fill:#fff}
}
:root[data-lesemodus]{--deckend:1;--unschaerfe:none;--unschaerfe-klein:none}
[data-lesemodus] .hintergrund,[data-lesemodus] .fx,[data-lesemodus] .fortschritt{display:none}
[data-lesemodus] *,[data-lesemodus] *::before,[data-lesemodus] *::after{animation:none!important;transition:none!important}
[data-lesemodus] [data-reveal],[data-lesemodus] [data-reveal] .ort{opacity:1!important;transform:none!important}
[data-lesemodus] [data-magnet],[data-lesemodus] [data-neigung]{transform:none}
[data-lesemodus] [data-tiefe]{translate:none}
@media (prefers-contrast:more){
.wasserzeichen,.monogramm{display:none}
.chip,.stapel>.kachel{box-shadow:inset 0 0 0 2px var(--ink)}
.h1-marke{-webkit-text-fill-color:currentColor;background:none}
}
@media (forced-colors:active){
.h1-marke{-webkit-text-fill-color:currentColor;background:none}
.plus,.wahl label,.sprungliste a,.fehler-liste{border:1px solid CanvasText}
.monogramm,.wasserzeichen{display:none}
.plus::before,.plus::after{background:CanvasText}
.optionen:has(.feld-fehler) .wahl label,.eingabe[aria-invalid=true]{border:3px solid CanvasText}
}
@media print{
.lesemodus,.chip,.sprungliste{display:none}
.plakette,.markiert,.aussage strong{background:none;box-shadow:inset 0 0 0 1px #000}
.karte .ort,.karte .angebot,.karte>circle[r="16"],.karte>path[stroke="#9FB7DB"]{stroke:#142C52}
}
/* == Ergänzungen der Vorlagen == */
.einstieg-solo .t-held{grid-column:1/-1}
.t-bild .leistung-symbol{width:min(62%,260px);height:auto;margin:28px auto;filter:drop-shadow(0 18px 26px #1f45804c)}
.t-miete .leistung-symbol{width:clamp(96px,5rem + 4vw,150px);height:auto;margin:24px 0 0;filter:drop-shadow(0 18px 26px #08142c73)}
.aussage-kachel{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.aussage strong{font-weight:760;background:linear-gradient(transparent 60%,#ffffff40 60% 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.aussage p{margin:0}
.leistung .fliess p>strong:first-child{font-weight:700;color:var(--text)}
.kopfspalte .einleitung,.abschnitt-kopf .einleitung{max-width:60ch}
.antwort .textlink{margin-top:var(--s-2)}
@media (forced-colors:active){.aussage strong{background:none;text-decoration:underline}}
@media (min-width:1120px){.kopf-telefon-nummer{display:inline}}
.kontaktangaben p{margin:var(--s-3) 0 0}
@media (min-width:940px) and (max-width:1119px){.kopf-telefon{position:relative}.kopf-telefon .kopf-telefon-nummer{position:absolute;top:100%;right:0;padding:6px 10px;border-top:6px solid transparent;background:var(--ink);background-clip:padding-box;color:var(--weiss);border-radius:var(--r-s);font-size:.9375rem;white-space:nowrap;z-index:1;outline:1px solid transparent}.kopf-telefon:focus-visible:not([data-still]) .kopf-telefon-nummer{display:block}}
@media (hover:hover) and (min-width:940px) and (max-width:1119px){.kopf-telefon:hover:not([data-still]) .kopf-telefon-nummer{display:block}}