/* Wörz Gebäudedienste · Starter nach Rezept gebaeudedienste-sauber · style.css
   Nur Variablen aus tokens.css. Leitidee „Die Bahn“: Abzieher über Glas. Gerade Kanten, waagerechte Masken,
   Uhrzeiten als Monument, Fliesengrau als Fläche, ein Blau nur für Besichtigung und Anrufen. */

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--farbe-grund); color: var(--farbe-text); scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body { margin: 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: var(--zeilenhoehe-text); font-weight: 400; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--schrift-headline); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; hyphens: manual; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); font-stretch: 140%; line-height: 1.0; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-stretch: 120%; line-height: 1.05; }
h3 { font-size: 1.3125rem; font-stretch: 115%; line-height: 1.15; letter-spacing: -0.01em; }
p { text-wrap: pretty; max-width: var(--mass); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--farbe-grund); }
[hidden] { display: none !important; }
a.tab, .tab a, a[href^="tel:"]:not(.kontakt-tel) { white-space: nowrap; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rahmen { width: min(100% - 2 * var(--raster-rand), var(--raster-max)); margin-inline: auto; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); }
.label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.meta { font-size: 0.875rem; color: var(--farbe-leise); }
.dunkel .meta, .fuss .meta { color: var(--dunkel-leise); }
.ziffern, .preis, time, .tab { font-variant-numeric: tabular-nums; }
.platzhalter-text { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--farbe-signal) 10%, transparent) 6px 12px); outline: 1px dashed var(--farbe-leise); padding: 0 .3em; border-radius: var(--radius-klein); }
.platzhalter-kasten { border: 1px dashed var(--farbe-leise); padding: var(--raum-4); margin-block: var(--raum-5); background: var(--farbe-flaeche); max-width: var(--mass); }
main { padding-top: var(--kopf-hoehe); display: block; }
main:focus { outline: none; }

/* Sprunglinks in eigener Landmarke */
.sprung { position: fixed; z-index: 1000; top: 8px; left: 8px; display: flex; gap: 8px; }
.sprung a { position: absolute; translate: 0 -160px; background: var(--farbe-dunkel); color: var(--farbe-grund); padding: 10px 14px; text-decoration: none; font-weight: 600; border-radius: var(--radius-klein); white-space: nowrap; }
.sprung a:focus { translate: 0 0; position: static; }

/* ---------- Links und Knöpfe ---------- */
.strich { text-decoration: none; background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dauer-xs) var(--ease-aus); padding-bottom: 2px; }
.strich:hover, .strich:focus-visible, .strich[aria-current="page"] { background-size: 100% 1.5px; transition: background-size var(--dauer-s) var(--ease); }
.textlink, .fliess a, .textseite a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.textlink:hover { text-decoration-thickness: 2px; }

.knopf { --f: var(--farbe-signal); --t: var(--farbe-grund); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--button-hoehe); padding: 10px 20px; border: 1.5px solid var(--f); border-radius: var(--radius-button); background: var(--f); color: var(--t); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; overflow: hidden; transition: color var(--dauer-xs) var(--ease), scale var(--ui-dauer-xs) var(--ui-ease); }
.knopf svg { width: 18px; height: 18px; flex: none; }
/* Füllung vom Eintrittspunkt (fuellung-vom-eintrittspunkt): Kreis wächst ab --x/--y */
.knopf[data-fuellung]::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 260%; aspect-ratio: 1; translate: -50% -50%; scale: 0; border-radius: 50%; background: var(--farbe-dunkel); transition: scale var(--dauer-rezept-2) var(--ease-aus); }
.knopf[data-fuellung]:hover::before { scale: 1; transition: scale var(--dauer-rezept-5) var(--ease); }
.knopf:active { scale: .97; }
.knopf-text { position: relative; }
/* Nebenhandlung: Kontur zeichnet sich (kontur-button-zeichnen, Variante zeichnen) */
.knopf-zweit { --f: transparent; --t: var(--farbe-text); border-color: transparent; background: none; }
.knopf-zweit::after { content: ""; position: absolute; inset: 0; border: 1.5px solid currentColor; border-radius: inherit; clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-rezept-2) var(--ease-aus); pointer-events: none; }
.knopf-zweit::before { content: ""; position: absolute; inset: 0; border: 1.5px solid currentColor; border-radius: inherit; opacity: .28; pointer-events: none; }
.knopf-zweit:not(:hover)::after { clip-path: inset(0 100% 0 0); }
.knopf-zweit:hover::after { transition: clip-path var(--dauer-rezept-5) var(--ease); }
.dunkel .knopf-zweit, .fuss .knopf-zweit { --t: var(--farbe-grund); }
.knopf-hell { --f: var(--farbe-grund); --t: var(--farbe-dunkel); }
.knopf-hell[data-fuellung]::before { background: var(--farbe-flaeche); }
.knopf-hell[data-fuellung]:hover { color: var(--farbe-dunkel); }
.knopf[data-state="laden"] .knopf-text { opacity: .0; }
.knopf-laden { position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0; }
.knopf[data-state="laden"] .knopf-laden { opacity: 1; animation: drehen 700ms linear infinite; }
@keyframes drehen { to { rotate: 1turn; } }
.pfeil { width: 28px; height: 16px; transition: translate var(--dauer-xs) var(--ease-aus); }
a:hover > .pfeil, a:hover .pfeil, a:focus-visible .pfeil { translate: 8px 0; transition: translate var(--dauer-s) var(--ease); }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kopf-hoehe); background: var(--farbe-grund); view-transition-name: kopf; }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: var(--raum-6); }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marke-zeichen { width: 30px; height: 30px; color: var(--farbe-dunkel); flex: none; }
.marke-name { font-family: var(--schrift-headline); font-weight: 800; font-stretch: 175%; font-size: 1.375rem; letter-spacing: 0.01em; line-height: 1; }
.marke-zusatz { font-size: 0.8125rem; color: var(--farbe-leise); line-height: 1.2; }
.hauptnav ul { display: flex; gap: var(--raum-5); }
.hauptnav a { font-weight: 500; font-size: 0.96875rem; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopf-tel svg { width: 16px; height: 16px; }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-leise); flex: none; }
.status-punkt[data-offen="1"] { background: #1E7B47; box-shadow: 0 0 0 3px color-mix(in srgb, #1E7B47 22%, transparent); }
.kopf-menue { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 1.5px solid var(--farbe-text); border-radius: var(--radius-button); font-weight: 600; cursor: pointer; }
.kopf-menue svg { width: 18px; height: 18px; }
/* Lesefortschritt: der Abzieher fährt über die Kopflinie */
.kopf-bahn { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--farbe-linie); overflow: visible; }
.kopf-bahn::after { content: ""; position: absolute; inset: 0; background: var(--farbe-dunkel); transform-origin: 0 50%; scale: 0 1; }
@supports (animation-timeline: scroll()) {
  .kopf-bahn::after { animation: fortschritt linear both; animation-timeline: scroll(root); }
}
@keyframes fortschritt { to { scale: 1 1; } }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding-block: clamp(40px, 7vw, 96px) var(--raum-8); }
.seitenkopf h1 { font-size: var(--groesse-h1-seite); line-height: .98; max-width: 14ch; }
.seitenkopf .lead { margin-top: var(--raum-5); font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); max-width: 48ch; }
.krumen ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--farbe-leise); margin-bottom: var(--raum-5); }
.krumen li + li::before { content: "/"; margin-right: 6px; }
.krumen a { text-decoration: none; }
.dunkel .krumen ol { color: var(--dunkel-leise); }
.krumen a:hover { text-decoration: underline; }
.steigt .maske { display: block; clip-path: inset(-0.6em -100vw -0.12em -100vw); padding-bottom: .06em; margin-bottom: -.06em; }
.steigt .maske > span { display: block; animation: steigen var(--dauer-l) var(--ease) calc(var(--start, 0ms) + var(--i, 0) * 80ms) both; }
.taucht { animation: auftauchen var(--dauer-m) var(--ease) calc(var(--start, 0ms) + 240ms) both; }
html.mit-intro { --start: 900ms; }
@keyframes steigen { from { translate: 0 105%; } }
@keyframes auftauchen { from { opacity: 0; translate: 0 8px; } }

/* ---------- Sektionsübergänge ---------- */
.sektion { padding-block: var(--raum-sektion); position: relative; overflow-x: clip; }
.flaeche { background: var(--farbe-flaeche); }
.dunkel { background: var(--farbe-dunkel); color: var(--farbe-grund); }
/* Bahn: eine Fläche wird beim Hereinscrollen von links nach rechts „abgezogen“, an der Kante die Gummilippe.
   Text steht sofort (Rezept); nur der Grund bewegt sich, an den Scroll gekoppelt, nichts läuft von selbst. */
@supports (animation-timeline: view()) {
  html:not(.ruhig) .bahn { background: none; isolation: isolate; }
  html:not(.ruhig) .bahn::before, html:not(.ruhig) .bahn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    animation: bahn-ab linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  html:not(.ruhig) .bahn::before { background: var(--farbe-flaeche); }
  html:not(.ruhig) .bahn::after { background: linear-gradient(to left, var(--klinge) 0 3px, transparent 3px); animation-name: bahn-ab, klinge-weg; }
}
@keyframes bahn-ab { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes klinge-weg { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* Fuge: Haarlinie zwischen gleichfarbigen Sektionen; der Abzieher zieht sie beim Scrollen von links nach rechts */
.fuge { position: relative; height: 34px; }
.fuge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--farbe-linie); }
.fuge i { position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: var(--farbe-text); transform-origin: 0 50%; }
.fuge b { position: absolute; top: 0; left: 0; width: 4px; height: 34px; background: var(--klinge); border-radius: 1px; }
.fuge b::after { content: ""; position: absolute; left: -14px; top: 15px; width: 14px; height: 4px; background: var(--klinge); }
@supports (animation-timeline: view()) {
  html:not(.ruhig) .fuge i { animation: fuge-zieht linear both; animation-timeline: view(); animation-range: cover 10% cover 60%; }
  html:not(.ruhig) .fuge b { animation: fuge-klinge linear both; animation-timeline: view(); animation-range: cover 10% cover 60%; }
}
.fuge b { left: calc(100% - 4px); }
@keyframes fuge-zieht { from { scale: 0 1; } }
@keyframes fuge-klinge { from { left: 0; } to { left: calc(100% - 4px); } }
/* Überlagern: dunkles Band fährt über die stehende Sektion (section-overlap-uebergang) */
.ueberlagert { position: relative; }
.ueberlagert > .steht { position: sticky; top: var(--kopf-hoehe); }
@supports (animation-timeline: view()) {
  html:not(.ruhig) .ueberlagert > .steht > * { animation: zuruecktreten linear both; animation-timeline: --ueber; animation-range: entry 0% entry 100%; }
  .ueberlagert { timeline-scope: --ueber; }
  .ueberlagert > .faehrt { view-timeline-name: --ueber; }
}
.ueberlagert > .faehrt { position: relative; z-index: 2; }
@keyframes zuruecktreten { to { scale: .96; opacity: .35; } }

/* ---------- Signatur: Referenzfoto öffnet sich einmal mit waagerechter Maske (clip-path-bild-reveal) ---------- */
.abzug { position: relative; overflow: hidden; background: var(--farbe-flaeche); }
.abzug img { width: 100%; height: 100%; object-fit: cover; }
html.js:not(.ruhig) .abzug[data-abzug] img { clip-path: inset(0 100% 0 0); }
html.js:not(.ruhig) .abzug[data-abzug]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--klinge); opacity: 0; }
html.js:not(.ruhig) .abzug.offen img { clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-rezept-5) var(--ease); }
html.js:not(.ruhig) .abzug.offen::after { animation: klinge-faehrt var(--dauer-rezept-5) var(--ease) both; }
@keyframes klinge-faehrt { 0% { opacity: 1; left: 0; } 92% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 4px); } }

/* ---------- Start: Hero 5/7, Foto randabfallend ---------- */
.held { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - var(--kopf-hoehe)); max-height: 980px; }
.held-text { padding: clamp(32px, 6vh, 80px) var(--raster-spalt) var(--raum-8) max(var(--raster-rand), (100vw - var(--raster-max)) / 2); display: flex; flex-direction: column; justify-content: center; gap: var(--raum-5); }
.held h1 { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem); max-width: 11ch; }
.held-region { font-size: 1.125rem; max-width: 34ch; }
.objektfrage { margin-top: var(--raum-4); }
.objektfrage-titel { font-family: var(--schrift-headline); font-stretch: 120%; font-weight: 700; font-size: 1.125rem; margin-bottom: var(--raum-3); }
.objektknoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 460px; }
.objektknopf { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 10px 14px; background: var(--farbe-flaeche); border-radius: var(--radius-klein); text-decoration: none; font-weight: 600; font-size: .96875rem; line-height: 1.2; }
.objektknopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--farbe-dunkel); clip-path: inset(0 100% 0 0); transition: clip-path var(--dauer-rezept-2) var(--ease-aus); }
.objektknopf:hover, .objektknopf:focus-visible { color: var(--farbe-grund); transition: color var(--dauer-xs) var(--ease); }
.objektknopf:hover::before, .objektknopf:focus-visible::before { clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-s) var(--ease); }
.objektknopf .pfeil { width: 20px; height: 12px; flex: none; }
.held-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--raum-5); margin-top: var(--raum-2); }
.held-tel .knopf { font-variant-numeric: tabular-nums; }
.held-status { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--farbe-leise); }
.held-bild { position: relative; margin: 0; min-height: 420px; }
.held-bild picture, .held-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-bild figcaption { position: absolute; left: 0; bottom: 0; background: var(--farbe-grund); padding: 12px 18px 0 0; display: flex; gap: 18px; align-items: baseline; }
.held-bild figcaption b { font-family: var(--schrift-headline); font-stretch: 120%; font-size: 1.75rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Intro „Drei Bahnen“ (intro-ohne-wartezeit): der Abzieher zieht die Wortmarke in S-Linie ab, Seite steht darunter schon */
.intro { display: none; }
html.mit-intro .intro { display: block; position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.intro-bahn { position: absolute; left: 0; right: 0; height: calc(100% / 3 + 1px); overflow: hidden; animation: bahn-weg var(--dauer-bahn) var(--ease-aus) both; }
.intro-bahn:nth-child(1) { top: 0; animation-delay: 80ms; }
.intro-bahn:nth-child(2) { top: calc(100% / 3); animation-name: bahn-weg-links; animation-delay: 380ms; }
.intro-bahn:nth-child(3) { top: calc(200% / 3); animation-delay: 680ms; }
.intro-bahn > span { position: absolute; left: 0; right: 0; height: 300%; background: var(--farbe-flaeche); display: grid; place-items: center; }
.intro-bahn:nth-child(2) > span { top: -100%; } .intro-bahn:nth-child(3) > span { top: -200%; }
.intro-wort { font-family: var(--schrift-headline); font-weight: 800; font-stretch: 200%; font-size: min(26vw, 52vh); line-height: .8; letter-spacing: -0.02em; color: var(--farbe-dunkel); }
.intro-klinge { position: absolute; top: 0; bottom: 0; width: 6px; background: var(--klinge); left: 0; animation: intro-klinge var(--dauer-bahn) var(--ease-aus) both; }
.intro-bahn:nth-child(1) .intro-klinge { animation-delay: 80ms; } .intro-bahn:nth-child(3) .intro-klinge { animation-delay: 680ms; }
.intro-bahn:nth-child(2) .intro-klinge { animation-name: intro-klinge-links; animation-delay: 380ms; }
@keyframes bahn-weg { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes bahn-weg-links { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes intro-klinge { from { left: -6px; } to { left: 100%; } }
@keyframes intro-klinge-links { from { left: 100%; } to { left: -6px; } }
html.intro-weg .intro { display: none !important; }

/* ---------- Start: Ein Werktag (Dienstplan) ---------- */
.werktag-kopf { margin-bottom: var(--raum-8); }
.werktag-kopf p { margin-top: var(--raum-4); }
.werktag { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--raster-spalt) * 2); align-items: start; }
.werktag-tafel { position: sticky; top: calc(var(--kopf-hoehe) + 24px); display: grid; gap: var(--raum-5); }
.uhr { font-family: var(--schrift-headline); font-weight: 700; font-stretch: 120%; font-size: var(--groesse-monument); line-height: .86; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; display: block; clip-path: inset(-0.2em -100vw 0 -100vw); height: .9em; white-space: nowrap; }
.uhr > span { display: block; }
.uhr.wechselt > span { animation: steigen var(--dauer-s) var(--ease) both; }
.tagband { position: relative; height: 44px; }
.tagband-skala { position: absolute; inset: 14px 0 auto 0; height: 14px; background: repeating-linear-gradient(to right, var(--farbe-leise) 0 1px, transparent 1px calc(100% / 24)); opacity: .55; }
.tagband-skala::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--farbe-leise); }
.tagband-fenster { position: absolute; top: 14px; height: 14px; background: var(--farbe-dunkel); left: calc(var(--von) / 24 * 100%); width: calc((var(--bis) - var(--von)) / 24 * 100%); }
.tagband-fenster.winter { background: repeating-linear-gradient(-45deg, var(--farbe-dunkel) 0 3px, transparent 3px 6px); }
.tagband-zahlen { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; font-size: .75rem; color: var(--farbe-leise); font-variant-numeric: tabular-nums; }
.tagband-marke { position: absolute; top: 4px; width: 3px; height: 34px; background: var(--farbe-signal); left: calc(var(--zeit, 5.5) / 24 * 100%); translate: -1px 0; transition: left var(--dauer-s) var(--ease); }
.werktag-bild { aspect-ratio: 3 / 2; border-radius: var(--radius-klein); }
.werktag-bild img { position: absolute; inset: 0; }
.werktag-bild img[data-aktiv] { z-index: 1; }
.werktag-schritte { display: grid; }
.schritt { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: var(--raum-3); padding-block: var(--raum-6); border-top: 1px solid var(--farbe-linie); }
.schritt:first-child { border-top: 0; }
.schritt-zeit { font-family: var(--schrift-headline); font-stretch: 120%; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--farbe-leise); transition: color var(--dauer-xs) var(--ease); }
.schritt[data-aktiv] .schritt-zeit { color: var(--farbe-signal); }
.schritt h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); }
.schritt .textlink { font-weight: 600; margin-top: var(--raum-2); align-self: flex-start; }
.schritt-mobil { display: none; }

/* ---------- Start: Objektarten als Zeilen ---------- */
.zeilen { border-top: 1px solid var(--farbe-text); }
.zeile-link { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr) 40px; gap: var(--raster-spalt); align-items: baseline; padding: var(--raum-5) var(--raum-2); border-bottom: 1px solid var(--farbe-text); text-decoration: none; }
.zeile-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--farbe-flaeche); clip-path: inset(0 100% 0 0); transition: clip-path var(--dauer-rezept-2) var(--ease-aus); }
.zeile-link::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--klinge); opacity: 0; transition: opacity var(--dauer-xs) var(--ease-aus); }
.zeile-link:hover::before, .zeile-link:focus-visible::before { clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-s) var(--ease); }
.zeile-name { font-family: var(--schrift-headline); font-weight: 700; font-stretch: 130%; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; }
.zeile-turnus { color: var(--farbe-leise); }
.zeile-preis { font-weight: 600; font-variant-numeric: tabular-nums; }
.zeile-link .pfeil { align-self: center; justify-self: end; }
.zeilen-fuss { margin-top: var(--raum-4); }

/* ---------- Start: Ansprechbar ---------- */
.ansprech { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--raster-spalt); align-items: end; }
.ansprech-satz { font-family: var(--schrift-headline); font-weight: 700; font-stretch: 120%; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }
.ansprech-satz a { color: var(--farbe-signal); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ansprech-satz a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.person { display: flex; gap: var(--raum-4); align-items: center; }
.monogramm { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--farbe-dunkel); color: var(--farbe-grund); font-family: var(--schrift-headline); font-stretch: 140%; font-weight: 700; font-size: 1.25rem; border-radius: var(--radius-klein); }
.ansprech-liste { display: grid; gap: var(--raum-3); margin-top: var(--raum-5); }
.ansprech-liste li { display: flex; gap: 12px; align-items: baseline; }
.ansprech-liste li::before { content: ""; width: 14px; height: 2px; background: var(--farbe-text); flex: none; translate: 0 -4px; }

/* ---------- Stellenband (dunkel, fährt über) ---------- */
.stellenband { padding-block: var(--raum-sektion); }
.stellenband h2 { font-size: clamp(2.25rem, 1rem + 5vw, 5rem); font-stretch: 140%; line-height: .98; max-width: 13ch; }
.stellenband-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--raster-spalt); align-items: end; }
.lohn { display: grid; gap: 4px; padding-top: var(--raum-4); border-top: 1px solid var(--dunkel-linie); }
.lohn b { font-family: var(--schrift-headline); font-stretch: 120%; font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.sprachen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--raum-5); }
.sprachen span { font-size: .9375rem; }
.handlungen { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-top: var(--raum-6); }

/* ---------- Fuß (studio-visitenkarte-footer, Variante praxis) ---------- */
.fuss { background: var(--farbe-dunkel); color: var(--farbe-grund); padding-top: var(--raum-9); overflow: hidden; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 7fr)); gap: var(--raum-7) var(--raster-spalt); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fuss-tel-block { grid-column: 1 / span 5; }
.fuss-tel { font-family: var(--schrift-headline); font-stretch: 120%; font-weight: 700; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; display: inline-block; margin-block: var(--raum-3); }
.fuss-tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.fuss-spalte { grid-column: span 2; display: grid; align-content: start; gap: var(--raum-2); }
.fuss-spalte.breit { grid-column: span 3; }
.fuss .label { color: var(--dunkel-leise); }
.fuss a { text-decoration: none; }
.fuss-links { display: grid; gap: 6px; }
.fuss-links a:hover, .fuss-unten a:hover { text-decoration: underline; }
.fuss-status { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; }
.fuss-unten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--raum-3) var(--raum-6); padding-block: var(--raum-5); border-top: 1px solid var(--dunkel-linie); margin-top: var(--raum-6); font-size: .875rem; color: var(--dunkel-leise); }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 6px var(--raum-5); }
.link-knopf, .bewegung-schalter { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: .2em; min-height: 24px; }
.bewegung-schalter[aria-pressed="true"]::before { content: "✓ "; }
.wortmarke { font-family: var(--schrift-headline); font-weight: 800; font-stretch: 200%; font-size: 29.5vw; line-height: .9; padding-top: .02em; letter-spacing: -0.03em; margin: var(--raum-6) 0 -0.06em calc(-0.04em); color: var(--farbe-grund); white-space: nowrap; user-select: none; }
@supports (animation-timeline: view()) {
  html:not(.ruhig) .wortmarke { animation: bahn-ab linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}
.fuss-zeiten { border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.fuss-zeiten th { text-align: left; font-weight: 400; padding: 2px 16px 2px 0; color: var(--dunkel-leise); }
.fuss-zeiten td { padding: 2px 0; }

/* ---------- Mobile Leiste (mobile-bottom-navigation, Variante kontakt) ---------- */
.unten { display: none; }
.blatt { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--farbe-dunkel); color: var(--farbe-grund); }
.blatt[open] { display: grid; grid-template-rows: auto 1fr auto; animation: blatt-auf var(--ui-dauer-m) var(--ui-ease) both; }
.blatt::backdrop { background: transparent; }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--raster-rand); height: var(--kopf-hoehe); }
.blatt nav ul { display: grid; padding: var(--raum-5) var(--raster-rand); }
.blatt nav a { display: block; font-family: var(--schrift-headline); font-stretch: 130%; font-weight: 700; font-size: clamp(1.75rem, 1rem + 4vw, 2.75rem); line-height: 1.15; text-decoration: none; padding-block: 6px; border-bottom: 1px solid var(--dunkel-linie); }
.blatt nav a[aria-current="page"] { color: var(--dunkel-leise); }
.blatt[open] nav li { animation: steigen-klein var(--ui-dauer-m) var(--ui-ease) calc(60ms + var(--i) * var(--ui-stagger)) both; }
@keyframes steigen-klein { from { opacity: 0; translate: 0 12px; } }
.blatt-fuss { display: grid; gap: var(--raum-3); padding: var(--raum-5) var(--raster-rand) calc(var(--raum-5) + env(safe-area-inset-bottom)); }
.blatt-fuss .knopf { width: 100%; }
.rund { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1.5px solid currentColor; border-radius: var(--radius-button); cursor: pointer; }
.rund svg { width: 16px; height: 16px; }
@keyframes blatt-auf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Dialoge (dialog-modal-nativ) ---------- */
.dialog { border: 0; padding: 0; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); background: var(--farbe-grund); color: var(--farbe-text); border-radius: var(--radius-gross); }
.dialog::backdrop { background: color-mix(in srgb, var(--farbe-dunkel) 70%, transparent); }
.dialog[open] { animation: dialog-auf var(--ui-dauer-m) var(--ui-ease) both; }
.dialog > form, .dialog > div { padding: var(--raum-6); display: grid; gap: var(--raum-4); }
.dialog h2 { font-size: 1.625rem; }
.dialog-fuss { display: flex; flex-wrap: wrap; gap: var(--raum-3); justify-content: flex-end; margin-top: var(--raum-2); }
@keyframes dialog-auf { from { opacity: 0; translate: 0 8px; } }
.schalter { display: flex; gap: 12px; align-items: flex-start; }
.schalter small { display: block; color: var(--farbe-leise); font-size: .875rem; }
.schalter input { width: 20px; height: 20px; accent-color: var(--farbe-signal); margin-top: 3px; }

/* ---------- Formulare ---------- */
.feld { display: grid; gap: 6px; }
.feld > label, .feld > legend, .gruppe > legend { font-weight: 600; }
.frei { font-weight: 400; color: var(--farbe-leise); font-size: .875rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input:not([type]), select, textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: var(--farbe-grund); font-size: 1rem; }
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--farbe-signal); outline-offset: 1px; border-color: var(--farbe-signal); }
.feld .hilfe { font-size: .875rem; color: var(--farbe-leise); }
.fehler { display: none; color: var(--farbe-fehler); font-size: .9375rem; font-weight: 500; }
.feld.ist-fehler .fehler, .gruppe.ist-fehler .fehler { display: block; }
.feld.ist-fehler input, .feld.ist-fehler select, .feld.ist-fehler textarea { border-color: var(--farbe-fehler); border-width: 2px; }
.gruppe { border: 0; padding: 0; margin: 0; display: grid; gap: var(--raum-3); min-width: 0; }
/* Auswahl-Kacheln mit animierter Marke (checkbox-radio-animiert) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 6px; }
.kachel { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; background: var(--farbe-grund); border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); cursor: pointer; font-weight: 500; line-height: 1.25; }
.kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kachel .marke-box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--farbe-leise); border-radius: var(--radius-klein); display: grid; place-items: center; background: var(--farbe-grund); transition: background-color var(--dauer-xs) var(--ease-aus), border-color var(--dauer-xs) var(--ease-aus); }
.kachel input[type="radio"] + .marke-box { border-radius: 50%; }
.kachel .marke-box svg { width: 12px; height: 12px; color: var(--farbe-grund); }
.kachel .marke-box path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--dauer-xs) var(--ease-aus); }
.kachel:has(input:checked) { border-color: var(--farbe-dunkel); background: var(--farbe-grund); box-shadow: inset 0 0 0 1px var(--farbe-dunkel); }
.kachel:has(input:checked) .marke-box { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.kachel:has(input:checked) .marke-box path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dauer-s) var(--ease); }
.kachel:has(input:focus-visible) { outline: var(--fokus-ring); outline-offset: 2px; }
.kachel small { display: block; font-weight: 400; color: var(--farbe-leise); font-size: .8125rem; }

/* ---------- Tabellen (vergleichstabelle-sticky, tabellenziffern) ---------- */
.tabelle-huelle { position: relative; max-width: 100%; contain: inline-size; overflow-x: auto; border-top: 2px solid var(--farbe-text); -webkit-overflow-scrolling: touch; }
.tabelle-huelle:focus-visible { outline-offset: 4px; }
.lv { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: 640px; }
.lv caption { text-align: left; padding: 0 0 var(--raum-3); }
.lv th, .lv td { padding: 12px 12px; border-bottom: 1px solid var(--farbe-linie); text-align: left; vertical-align: top; background: var(--farbe-flaeche); }
.lv thead th { position: sticky; top: 0; z-index: 2; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--farbe-text); white-space: nowrap; }
.lv tbody th { font-weight: 500; position: sticky; left: 0; z-index: 1; min-width: 200px; }
.lv thead th:first-child { left: 0; z-index: 3; }
.lv td { text-align: center; width: 13%; }
.lv .ja svg { width: 18px; height: 18px; margin-inline: auto; }
.lv .nein { color: var(--farbe-leise); }
.lv tr.preis-zeile th, .lv tr.preis-zeile td { font-weight: 600; border-top: 1px solid var(--farbe-text); }
.lv td.markiert { position: relative; }
.lv td .wert { display: inline-block; }
.lv-steuer { display: flex; flex-wrap: wrap; gap: var(--raum-4) var(--raum-6); align-items: center; margin-bottom: var(--raum-5); }
.umschalter { display: inline-flex; padding: 3px; background: var(--farbe-grund); border: 1px solid var(--farbe-leise); border-radius: var(--radius-gross); position: relative; }
.umschalter button { position: relative; z-index: 1; min-height: 40px; padding: 6px 14px; background: none; border: 0; border-radius: var(--radius-klein); cursor: pointer; font-weight: 600; font-size: .9375rem; }
.umschalter button[aria-pressed="true"] { background: var(--farbe-dunkel); color: var(--farbe-grund); }
.lv-hinweis { margin-top: var(--raum-4); }
@media (min-width: 760px) { .tabelle-huelle { overflow: visible; } .lv thead th { top: var(--kopf-hoehe); } }

/* ---------- Leistungsliste (akkordeon-hoehe-auto, Variante leistungen) ---------- */
.akk { border-top: 1px solid var(--farbe-text); }
.akk details { border-bottom: 1px solid var(--farbe-text); interpolate-size: allow-keywords; }
.akk summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: var(--raum-4); align-items: center; padding: var(--raum-5) 0; cursor: pointer; }
.akk summary::-webkit-details-marker { display: none; }
.akk summary h2, .akk summary h3 { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); font-stretch: 130%; }
.akk .akk-preis { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.akk-zeichen { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--farbe-text); border-radius: var(--radius-klein); }
.akk-zeichen svg { width: 14px; height: 14px; transition: rotate var(--dauer-rezept-2) var(--ease-aus); }
.akk details[open] .akk-zeichen svg { rotate: 45deg; transition: rotate var(--dauer-rezept-4) var(--ease); }
.akk details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-rezept-2) var(--ease-aus), content-visibility var(--dauer-rezept-2) allow-discrete; }
.akk details[open]::details-content { block-size: auto; transition: block-size var(--dauer-rezept-4) var(--ease), content-visibility var(--dauer-rezept-4) allow-discrete; }
.akk-inhalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raster-spalt); padding-bottom: var(--raum-7); }
.akk-inhalt.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.akk-bild { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-klein); }
.akk-bild img { width: 100%; height: 100%; object-fit: cover; }
.fakten { display: grid; gap: 0; border-top: 1px solid var(--farbe-linie); }
.fakten > div { display: grid; grid-template-columns: minmax(110px, 2fr) minmax(0, 5fr); gap: var(--raum-4); padding: 10px 0; border-bottom: 1px solid var(--farbe-linie); }
.fakten dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-leise); padding-top: 3px; }
.fakten dd { font-variant-numeric: tabular-nums; }
.dunkel .fakten dt { color: var(--dunkel-leise); }
.dunkel .fakten, .dunkel .fakten > div { border-color: var(--dunkel-linie); }
.dunkel .abzug { background: var(--dunkel-linie); }
address { font-style: normal; }
.akk-text { display: grid; gap: var(--raum-4); align-content: start; }
.faq summary { grid-template-columns: minmax(0, 1fr) 44px; }
.faq summary h3 { font-size: 1.25rem; font-stretch: 110%; }
.faq .akk-inhalt { display: block; }

/* ---------- Ablauf (prozess-timeline-wachsende-linie) ---------- */
.ablauf { position: relative; display: grid; gap: var(--raum-6); padding-left: 44px; counter-reset: ablauf; max-width: 760px; }
.ablauf::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--farbe-linie); }
.ablauf::after { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--farbe-dunkel); transform-origin: 50% 0; scale: 1 1; }
@supports (animation-timeline: view()) {
  html:not(.ruhig) .ablauf::after { scale: 1 0; animation: linie-wachsen linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
}
@keyframes linie-wachsen { to { scale: 1 1; } }
.ablauf li { position: relative; counter-increment: ablauf; display: grid; gap: 4px; }
.ablauf li::before { content: counter(ablauf); position: absolute; left: -44px; top: -2px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--farbe-dunkel); color: var(--farbe-grund); font-size: .75rem; font-weight: 700; border-radius: var(--radius-klein); font-variant-numeric: tabular-nums; z-index: 1; }
.ablauf h3 { font-size: 1.25rem; }
.flaeche .ablauf::before { background: color-mix(in srgb, var(--farbe-leise) 40%, transparent); }

/* ---------- Leistungsseite: Antwort zuerst ---------- */
.lkopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: min(76svh, 760px); }
.lkopf-text { padding: clamp(32px, 6vw, 80px) var(--raster-spalt) var(--raum-8) max(var(--raster-rand), (100vw - var(--raster-max)) / 2); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--raum-5); }
.lkopf h1 { font-size: clamp(2.25rem, 1rem + 4vw, 4.75rem); max-width: 12ch; }
.lkopf .lead { font-size: 1.1875rem; max-width: 40ch; }
.lkopf-bild { position: relative; margin: 0; min-height: 360px; }
.lkopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.antwort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--farbe-text); }
.antwort > div { padding: var(--raum-5) var(--raum-5) var(--raum-5) 0; border-right: 1px solid var(--farbe-linie); display: grid; gap: 6px; align-content: start; }
.antwort > div + div { padding-left: var(--raum-5); }
.antwort > div:last-child { border-right: 0; }
.antwort b { font-family: var(--schrift-headline); font-stretch: 120%; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.antwort-cta { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; margin-top: var(--raum-6); }
.zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raster-spalt) calc(var(--raster-spalt) * 2); align-items: start; }
.zwei > h2 { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
.punkte { display: grid; gap: var(--raum-6); }
.punkte li { display: grid; gap: 6px; padding-top: var(--raum-4); border-top: 1px solid var(--farbe-linie); }
.weiter-link { display: grid; gap: 4px; padding-block: var(--raum-8); text-decoration: none; }
.weiter-name { display: flex; align-items: center; gap: var(--raum-5); font-family: var(--schrift-headline); font-weight: 700; font-stretch: 140%; font-size: clamp(2rem, 1rem + 4.6vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.weiter-name .pfeil { width: clamp(32px, 4vw, 56px); height: auto; }
.weiter-link:hover .weiter-name span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .1em; }
.ansprechkarte { display: flex; gap: var(--raum-5); align-items: center; flex-wrap: wrap; padding: var(--raum-6); background: var(--farbe-flaeche); border-radius: var(--radius-klein); }
.ansprechkarte p { max-width: 46ch; }
.ansprechkarte .knopf { margin-left: auto; }

/* ---------- Anfrage (mehrschritt-anfrage, Variante senkrecht) ---------- */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: calc(var(--raster-spalt) * 2); align-items: start; }
.anfrage-seite .fuss-tel { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); }
.anfrage-seite { position: sticky; top: calc(var(--kopf-hoehe) + 24px); display: grid; gap: var(--raum-5); }
.stepper { display: grid; gap: 0; counter-reset: s; }
.st { position: relative; padding-left: 56px; padding-bottom: var(--raum-6); }
.st::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--farbe-linie); }
.st:last-child::before { display: none; }
.st-kopf { display: flex; align-items: center; gap: var(--raum-4); min-height: 32px; }
.st-nr { position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--farbe-leise); border-radius: var(--radius-klein); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--farbe-grund); transition: background-color var(--dauer-xs) var(--ease); }
.st[data-zustand="aktiv"] .st-nr { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: var(--farbe-grund); }
.st[data-zustand="fertig"] .st-nr { background: var(--farbe-flaeche); border-color: var(--farbe-dunkel); }
.st[data-zustand="fertig"]::before { background: var(--farbe-dunkel); }
.st-nr svg { width: 14px; height: 14px; }
.st h2 { font-size: 1.375rem; font-stretch: 115%; outline: none; }
.st[data-zustand="offen"] h2 { color: var(--farbe-leise); }
.st-kurz { color: var(--farbe-leise); margin-top: 4px; }
.st-aendern { margin-left: auto; background: none; border: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; padding: 0 4px; font-weight: 600; }
.st-inhalt { display: grid; gap: var(--raum-5); padding-top: var(--raum-5); }
.st:not([data-zustand="aktiv"]) .st-inhalt { display: none; }
.st:not([data-zustand="fertig"]) .st-kurz, .st:not([data-zustand="fertig"]) .st-aendern { display: none; }
.st-weiter { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.zwei-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); }
.flaeche-feld { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--raum-4); align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--farbe-dunkel); min-height: 44px; }
.plz-antwort { min-height: 1.6em; font-weight: 500; }
.plz-antwort[data-art="ja"]::before { content: "✓ "; color: #1E7B47; }
.fehlerliste { border: 2px solid var(--farbe-fehler); padding: var(--raum-5); border-radius: var(--radius-klein); background: var(--farbe-grund); display: grid; gap: var(--raum-2); }
.fehlerliste h2 { font-size: 1.25rem; color: var(--farbe-fehler); outline: none; }
.fehlerliste ul { list-style: disc; padding-left: 1.2em; }
.fehlerliste a { color: var(--farbe-fehler); font-weight: 600; }
.erfolg { padding: var(--raum-7); background: var(--farbe-flaeche); border-top: 2px solid var(--farbe-dunkel); display: grid; gap: var(--raum-4); }
.erfolg h2 { outline: none; }
.vt-schritt { view-transition-class: schritt; }
::view-transition-group(*.schritt) { animation-duration: var(--ui-dauer-m); animation-timing-function: var(--ui-ease); }
/* Datei-Ablage (datei-upload-ablage) */
.ablage { position: relative; display: grid; place-items: center; gap: 6px; text-align: center; min-height: 140px; padding: var(--raum-5); border: 1.5px dashed var(--farbe-leise); border-radius: var(--radius-gross); background: var(--farbe-grund); cursor: pointer; transition: background-color var(--dauer-xs) var(--ease-aus), border-color var(--dauer-xs) var(--ease-aus); }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ablage:has(input:focus-visible) { outline: var(--fokus-ring); outline-offset: 3px; }
.ablage.ueber { border-color: var(--farbe-dunkel); background: var(--farbe-flaeche); border-style: solid; }
.ablage svg { width: 28px; height: 28px; }
.ablage b { font-weight: 600; }
.dateien { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.datei { position: relative; display: grid; grid-template-rows: 96px auto; background: var(--farbe-grund); border: 1px solid var(--farbe-linie); border-radius: var(--radius-klein); overflow: hidden; animation: auftauchen var(--ui-dauer-m) var(--ui-ease) both; }
.datei img, .datei .datei-typ { width: 100%; height: 96px; object-fit: cover; background: var(--farbe-flaeche); }
.datei .datei-typ { display: grid; place-items: center; font-weight: 700; letter-spacing: .06em; }
.datei p { padding: 6px 8px; font-size: .8125rem; line-height: 1.3; word-break: break-word; }
.datei.ungueltig { border-color: var(--farbe-fehler); }
.datei.ungueltig p { color: var(--farbe-fehler); }
.datei button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; background: var(--farbe-grund); border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); cursor: pointer; }
.datei button::after { content: ""; position: absolute; inset: -6px; }
.datei button svg { width: 12px; height: 12px; }

/* ---------- Objekte ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--raum-7); }
.filter button { min-height: 44px; padding: 8px 16px; background: var(--farbe-grund); border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); cursor: pointer; font-weight: 600; }
.filter button[aria-pressed="true"] { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: var(--farbe-grund); }
.filter-status { margin-bottom: var(--raum-5); }
.objekt-gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--raster-spalt) calc(var(--raster-spalt) * 2); align-items: end; padding-block: var(--raum-7); border-top: 1px solid var(--farbe-text); }
.objekt-gross:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.objekt-gross:nth-of-type(even) .abzug { order: 2; }
.objekt-gross .abzug { aspect-ratio: 3 / 2; border-radius: var(--radius-klein); }
.objekt-gross h2 { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem); }
.objekt-gross .fakten { margin-top: var(--raum-5); }
.objekt-zeilen { border-top: 1px solid var(--farbe-text); }
.objekt-zeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--raster-spalt); padding: var(--raum-4) 0; border-bottom: 1px solid var(--farbe-linie); align-items: baseline; font-variant-numeric: tabular-nums; }
.objekt-zeile b { font-weight: 600; }
.objekt-kopfzeile { color: var(--farbe-leise); padding-block: var(--raum-3); }
[data-objekt][hidden] { display: none !important; }
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.stimme { display: grid; gap: var(--raum-4); align-content: start; padding-top: var(--raum-5); border-top: 2px solid var(--farbe-text); }
.stimme blockquote p { font-family: var(--schrift-headline); font-stretch: 110%; font-weight: 600; font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; }
.leer { padding: var(--raum-7) 0; }

/* ---------- Karriere ---------- */
.kkopf { background: var(--farbe-dunkel); color: var(--farbe-grund); padding-block: clamp(48px, 8vw, 112px) var(--raum-9); }
.kkopf h1 { font-size: var(--groesse-h1-seite); max-width: 13ch; line-height: .98; }
.kkopf .lead { margin-top: var(--raum-5); font-size: 1.25rem; max-width: 40ch; }
.kfakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raster-spalt); margin-top: var(--raum-8); border-top: 1px solid var(--dunkel-linie); padding-top: var(--raum-5); }
.kfakten b { display: block; font-family: var(--schrift-headline); font-stretch: 120%; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.kfakten span { color: var(--dunkel-leise); font-size: .9375rem; }
.stellen { border-top: 1px solid var(--farbe-text); }
.stelle { border-bottom: 1px solid var(--farbe-text); }
.stelle summary { grid-template-columns: minmax(0, 1fr) auto 44px; }
.stelle-kurz { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--farbe-leise); font-size: .9375rem; margin-top: 6px; }
.stelle-kurz b { color: var(--farbe-text); font-weight: 600; }
.stelle-inhalt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); padding-bottom: var(--raum-7); }
.stelle-inhalt h4 { font-family: var(--schrift-headline); font-stretch: 115%; font-size: 1.0625rem; margin: 0 0 8px; }
.stelle-inhalt ul { display: grid; gap: 6px; }
.stelle-inhalt li { display: flex; gap: 10px; }
.stelle-inhalt li::before { content: ""; width: 10px; height: 2px; background: currentColor; flex: none; translate: 0 .75em; }
.stelle-handlung { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; }
.sprachwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sprachwahl button { min-height: 40px; padding: 6px 12px; background: none; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); cursor: pointer; font-weight: 600; }
.sprachwahl button[aria-pressed="true"] { background: var(--farbe-dunkel); color: var(--farbe-grund); border-color: var(--farbe-dunkel); }

/* ---------- Betrieb ---------- */
.protokoll { background: var(--farbe-grund); border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); padding: var(--raum-5); font-variant-numeric: tabular-nums; display: grid; gap: var(--raum-3); }
.protokoll-kopf { display: flex; justify-content: space-between; gap: var(--raum-4); flex-wrap: wrap; border-bottom: 2px solid var(--farbe-text); padding-bottom: var(--raum-3); }
.protokoll ol { display: grid; }
.protokoll li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--farbe-linie); font-size: .96875rem; }
.protokoll li svg { width: 16px; height: 16px; margin-top: 3px; }
.farben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raster-spalt); }
.farbe-tuch { display: grid; gap: 8px; }
.farbe-tuch i { display: block; height: 10px; border-radius: 1px; background: var(--c); }
.siegel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.siegel-karte { padding: var(--raum-5); background: var(--farbe-grund); border-radius: var(--radius-klein); display: grid; gap: var(--raum-3); align-content: start; }
.siegel-zeichen { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid var(--farbe-text); border-radius: 50%; font-family: var(--schrift-headline); font-stretch: 130%; font-weight: 700; font-size: .875rem; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.team-person { display: grid; gap: var(--raum-3); padding-top: var(--raum-5); border-top: 1px solid var(--farbe-text); align-content: start; }
.team-person .monogramm { width: 100%; height: auto; aspect-ratio: 4 / 3; font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem); background: var(--farbe-flaeche); color: var(--farbe-dunkel); }
.team-person[hidden] { display: none; }

/* ---------- Kontakt ---------- */
.kontakt-tel { font-family: var(--schrift-headline); font-stretch: 120%; font-weight: 700; font-size: min(var(--groesse-monument), 11.2vw); line-height: .9; letter-spacing: -0.03em; text-decoration: none; font-variant-numeric: tabular-nums; display: inline-block; color: var(--farbe-signal); }
.kontakt-tel:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .08em; }
.kontakt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-7) var(--raster-spalt); }
.kontakt-raster > div { display: grid; gap: var(--raum-3); align-content: start; padding-top: var(--raum-4); border-top: 1px solid var(--farbe-text); }
.zeiten-tabelle { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; }
.zeiten-tabelle caption { text-align: left; padding-bottom: 6px; }
.zeiten-tabelle th, .zeiten-tabelle td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--farbe-linie); font-weight: 400; }
.zeiten-tabelle tr[data-heute] th, .zeiten-tabelle tr[data-heute] td { font-weight: 700; }
.orte { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.karte { position: relative; aspect-ratio: 16 / 9; background: var(--farbe-flaeche); border-radius: var(--radius-klein); overflow: hidden; }
.karte svg { width: 100%; height: 100%; }
.karte-einwilligung { position: absolute; left: var(--raum-4); bottom: var(--raum-4); right: var(--raum-4); max-width: 420px; background: var(--farbe-grund); padding: var(--raum-4); border-radius: var(--radius-klein); display: grid; gap: var(--raum-3); }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.merken { display: flex; gap: 8px; align-items: center; font-size: .9375rem; }
.merken input { width: 20px; height: 20px; accent-color: var(--farbe-signal); }

/* ---------- Textseiten, 404 ---------- */
.textseite .inhalt { max-width: 760px; padding-block: var(--raum-8) var(--raum-10); }
.textseite h1 { font-size: var(--groesse-h1-seite); margin-bottom: var(--raum-5); }
.textseite { overflow-wrap: break-word; }
.textseite h1, .textseite h2 { hyphens: auto; }
.textseite h2 { font-size: 1.5rem; margin: var(--raum-7) 0 var(--raum-3); font-stretch: 115%; }
.textseite p, .textseite address { margin-bottom: var(--raum-3); font-style: normal; }
.fehlerseite { min-height: calc(100svh - var(--kopf-hoehe) - 120px); display: grid; align-content: center; gap: var(--raum-5); padding-block: var(--raum-9); }
.null-vier { position: relative; font-family: var(--schrift-headline); font-weight: 800; font-stretch: 200%; font-size: clamp(6rem, 2rem + 22vw, 20rem); line-height: .8; letter-spacing: -0.04em; color: var(--farbe-flaeche); -webkit-text-stroke: 2px var(--farbe-text); }
.null-vier span { position: absolute; inset: 0; color: var(--farbe-text); -webkit-text-stroke: 0; clip-path: inset(0 0 0 0); }
html:not(.ruhig) .null-vier span { animation: bahn-weg 900ms var(--ease) 400ms both; }
.weiter-liste { display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-6); font-size: 1.25rem; font-weight: 600; }

/* ---------- Seitenwechsel „Abzieher“ (vt-cross-document-mpa, richtungsbewusste-uebergaenge) ----------
   Die neue Seite wird hinter einer Gummilippe aufgedeckt, als würde eine Glasscheibe abgezogen.
   vor = links nach rechts, rueck = rechts nach links, tiefer (Übersicht → Detail) = von oben nach unten, hoeher = von unten nach oben. */
@view-transition { navigation: auto; }
.abzieher { display: none; }
html.vt-wisch .abzieher { display: block; position: fixed; inset: 0; z-index: 600; pointer-events: none; view-transition-name: abzieher; }
.abzieher i { position: absolute; background: var(--klinge); display: none; }
.abzieher i::before { content: ""; position: absolute; background: var(--farbe-flaeche); }
.abzieher i::after { content: ""; position: absolute; background: var(--klinge); }
html.wisch-vor .abzieher .k-vor, html.wisch-rueck .abzieher .k-rueck, html.wisch-tiefer .abzieher .k-tiefer, html.wisch-hoeher .abzieher .k-hoeher { display: block; }
.k-vor { top: 0; bottom: 0; right: 0; width: 8px; }
.k-vor::before { top: 0; bottom: 0; left: 8px; width: 12px; }
.k-vor::after { top: calc(50% - 5px); right: 8px; width: 96px; height: 10px; }
.k-rueck { top: 0; bottom: 0; left: 0; width: 8px; }
.k-rueck::before { top: 0; bottom: 0; right: 8px; width: 12px; }
.k-rueck::after { top: calc(50% - 5px); left: 8px; width: 96px; height: 10px; }
.k-tiefer { left: 0; right: 0; bottom: 0; height: 8px; }
.k-tiefer::before { left: 0; right: 0; top: 8px; height: 12px; }
.k-tiefer::after { left: calc(50% - 5px); bottom: 8px; width: 10px; height: 96px; }
.k-hoeher { left: 0; right: 0; top: 0; height: 8px; }
.k-hoeher::before { left: 0; right: 0; bottom: 8px; height: 12px; }
.k-hoeher::after { left: calc(50% - 5px); top: 8px; width: 10px; height: 96px; }
::view-transition-group(kopf), ::view-transition-group(unten) { animation-duration: 0s; z-index: 10; }
::view-transition-group(abzieher) { z-index: 5; animation: none; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: alt-steht var(--dauer-wisch) linear both; }
::view-transition-new(root) { animation: neu-vor var(--dauer-wisch) var(--ease) both; }
::view-transition-new(abzieher) { animation: klinge-vor var(--dauer-wisch) var(--ease) both; }
html:active-view-transition-type(rueck)::view-transition-new(root) { animation-name: neu-rueck; }
html:active-view-transition-type(rueck)::view-transition-new(abzieher) { animation-name: klinge-rueck; }
html:active-view-transition-type(tiefer)::view-transition-new(root) { animation-name: neu-tiefer; }
html:active-view-transition-type(tiefer)::view-transition-new(abzieher) { animation-name: klinge-tiefer; }
html:active-view-transition-type(hoeher)::view-transition-new(root) { animation-name: neu-hoeher; }
html:active-view-transition-type(hoeher)::view-transition-new(abzieher) { animation-name: klinge-hoeher; }
@keyframes alt-steht { to { filter: brightness(.9); } }
@keyframes neu-vor { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes neu-rueck { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes neu-tiefer { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes neu-hoeher { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes klinge-vor { from { translate: -100% 0; } 94% { opacity: 1; } to { translate: 0 0; opacity: 0; } }
@keyframes klinge-rueck { from { translate: 100% 0; } 94% { opacity: 1; } to { translate: 0 0; opacity: 0; } }
@keyframes klinge-tiefer { from { translate: 0 -100%; } 94% { opacity: 1; } to { translate: 0 0; opacity: 0; } }
@keyframes klinge-hoeher { from { translate: 0 100%; } 94% { opacity: 1; } to { translate: 0 0; opacity: 0; } }
/* Bild wird Seite: Bild der Leistung wächst zum Kopfbild der Leistungsseite (vt-shared-element-morph) */
::view-transition-group(held) { animation-duration: var(--dauer-wisch); animation-timing-function: var(--ease); z-index: 4; }
::view-transition-old(held), ::view-transition-new(held) { height: 100%; object-fit: cover; overflow: clip; }
/* Ruhig: nur kurze Überblendung */
html:active-view-transition-type(ruhig)::view-transition-old(root) { animation: ruhig-raus 100ms linear both; }
html:active-view-transition-type(ruhig)::view-transition-new(root) { animation: ruhig-rein 150ms linear both; }
@keyframes ruhig-raus { to { opacity: 0; } }
@keyframes ruhig-rein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: ruhig-raus 100ms linear both !important; }
  ::view-transition-new(root) { animation: ruhig-rein 150ms linear both !important; }
  ::view-transition-group(*) { animation-duration: 150ms !important; }
  .abzieher { display: none !important; }
}

/* ---------- Reduzierte Bewegung (System oder Schalter im Fuß) ---------- */
@media (prefers-reduced-motion: reduce) {
  html .intro { display: none !important; }
  .steigt .maske > span, .taucht, .uhr.wechselt > span, .blatt[open], .blatt[open] nav li, .dialog[open], .datei, .null-vier span { animation: none !important; }
  .abzug img { clip-path: none !important; } .abzug::after { display: none !important; }
  .tagband-marke { transition: none; }
}
html.ruhig .intro { display: none !important; }
html.ruhig :is(.steigt .maske > span, .taucht, .uhr.wechselt > span, .blatt[open], .blatt[open] nav li, .dialog[open], .datei, .null-vier span) { animation: none !important; }
html.ruhig .tagband-marke { transition: none; }
html.ruhig .akk details::details-content { transition: none; }
@media (prefers-reduced-motion: reduce) { .akk details::details-content { transition: none; } }

/* ---------- Kontrastmodus ---------- */
@media (forced-colors: active) {
  .knopf, .objektknopf, .kachel, .umschalter button, .filter button { border: 1px solid ButtonText; }
  .abzieher, .intro { display: none !important; }
  .tagband-fenster, .tagband-fenster.winter, .tagband-marke { forced-color-adjust: none; background: CanvasText; }
  .link-knopf, .bewegung-schalter { border: 1px solid ButtonText; padding: 2px 6px; }
  .status-punkt { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* ---------- Druck ---------- */
@media print { .kopf, .unten, .wortmarke, .abzieher, .intro, .starter-hinweis, .blatt { display: none !important; } main { padding-top: 0; } .bahn::before, .bahn::after { display: none; } }

/* ---------- Hinweis Fundus ---------- */
.starter-hinweis { position: relative; z-index: 1; background: var(--farbe-text); color: var(--farbe-grund); font-size: .8125rem; padding: 10px var(--raster-rand); text-align: center; }
.starter-hinweis a { color: inherit; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .hauptnav ul { gap: var(--raum-4); }
  .kopf-tel-text { display: none; }
}
@media (max-width: 960px) {
  :root { --kopf-hoehe: 60px; }
  .hauptnav, .kopf-tel, .kopf-anfrage { display: none; }
  .kopf-menue { display: inline-flex; }
  .marke-zusatz { display: none; }
  .held { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; }
  .held-bild { order: -1; aspect-ratio: 4 / 5; min-height: 0; max-height: 72svh; width: 100%; }
  .held-text { padding: var(--raum-6) var(--raster-rand) var(--raum-8); }
  .held-bild figcaption { padding: 10px 14px 0 var(--raster-rand); }
  .werktag { grid-template-columns: minmax(0, 1fr); }
  .werktag-tafel { position: static; }
  .werktag-tafel .uhr, .werktag-tafel .werktag-bild { display: none; }
  .werktag-tafel { position: sticky; top: var(--kopf-hoehe); z-index: 3; background: var(--farbe-flaeche); padding-block: 10px; margin-inline: calc(-1 * var(--raster-rand)); padding-inline: var(--raster-rand); }
  .schritt { min-height: 0; padding-block: var(--raum-7); }
  .schritt-mobil { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-klein); margin-bottom: var(--raum-3); }
  .zeile-link { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 4px; }
  .zeile-name { grid-column: 1 / -1; }
  .zeile-link .pfeil { grid-row: 2 / span 2; grid-column: 2; }
  .zeile-turnus, .zeile-preis { grid-column: 1; }
  .ansprech, .stellenband-raster, .anfrage-raster, .zwei, .objekt-gross, .objekt-gross:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .objekt-gross:nth-of-type(even) .abzug { order: 0; }
  .zwei > h2, .anfrage-seite { position: static; }
  .lkopf { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lkopf-bild { order: -1; aspect-ratio: 3 / 2; min-height: 0; }
  .lkopf-text { padding: var(--raum-6) var(--raster-rand) var(--raum-6); }
  .antwort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .antwort > div:nth-child(2) { border-right: 0; }
  .antwort > div:nth-child(3) { padding-left: 0; }
  .antwort > div:nth-child(n+3) { border-top: 1px solid var(--farbe-linie); }
  .akk-inhalt, .stelle-inhalt { grid-template-columns: minmax(0, 1fr); }
  .stimmen, .siegel, .team, .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .farben, .kfakten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--raum-5); }
  .fuss-tel-block { grid-column: 1 / -1; }
  .fuss-spalte, .fuss-spalte.breit { grid-column: span 6; }
  .objekt-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .objekt-zeile > :first-child { grid-column: 1 / -1; }
  .objekt-kopfzeile { display: none; }
  .unten { display: grid; position: fixed; inset: auto 0 0 0; z-index: 60; grid-template-columns: 1fr 1.4fr 1fr; background: var(--farbe-grund); border-top: 1px solid var(--farbe-text); padding-bottom: env(safe-area-inset-bottom); view-transition-name: unten; transition: translate var(--ui-dauer-s) var(--ui-ease); }
  .unten a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; text-decoration: none; font-weight: 600; font-size: .9375rem; }
  .unten svg { width: 18px; height: 18px; }
  .unten .unten-signal { background: var(--farbe-signal); color: var(--farbe-grund); }
  .unten.weg { translate: 0 110%; transition: translate var(--ui-dauer-xs) var(--ui-ease-aus); }
  body { padding-bottom: 56px; }
}
@media (max-width: 560px) {
  .objektknoepfe { grid-template-columns: minmax(0, 1fr); }
  .zwei-felder, .flaeche-feld { grid-template-columns: minmax(0, 1fr); }
  .antwort { grid-template-columns: minmax(0, 1fr); }
  .antwort > div, .antwort > div + div { padding-left: 0; border-right: 0; border-top: 1px solid var(--farbe-linie); }
  .antwort > div:first-child { border-top: 0; }
  .fuss-spalte, .fuss-spalte.breit { grid-column: 1 / -1; }
  .farben, .kfakten { grid-template-columns: minmax(0, 1fr); }
  .st { padding-left: 46px; }
  .ansprechkarte .knopf { margin-left: 0; }
  .marke-name { font-size: 1.25rem; }
}