/* Zahnarztpraxis Luisa Schmidt: Gestaltungssystem. Quelle der Wahrheit für alle Seiten, gebaut aus Entwurf E (abgenommen 15.10.2026). */

/* ============ Tokens ============ */
:root {
  --grund: #fbf8f7;
  --rose: #eee3e2;
  --sand: #ebe5e2;
  --grau: #8a7e7e;
  --grau-tief: #5e5454;
  --tinte: #2b2525;
  --leise: #6a5f5f;
  --rot: #e00038;
  --rot-tief: #b4002d;
  --abstand: clamp(4rem, 8.5vw, 7.5rem);   /* Abstand zwischen Abschnitten, 120 px am Desktop */
  --kopf-abstand: 2.5rem;                 /* Abstand vom Abschnittskopf zum Inhalt */
  --radius: 28px;                         /* große Karten */
  --radius-klein: 22px;                   /* kompakte Karten, Zeilen */
  --schatten: 0 12px 36px rgba(43, 37, 37, .08);
  --schatten-hover: 0 22px 48px rgba(43, 37, 37, .14);
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* Eintreten, Hover, Loslassen: schnell am Anfang */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* Bewegung auf der Seite */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Basis ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { margin: 0; font-family: "Onest", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.55; color: var(--tinte); background: var(--grund); -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 8px; }
.breite { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.sprung { position: absolute; left: -999rem; }
.sprung:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 50; }

/* ============ Typografie ============ */
h1 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; margin: 0 0 1.25rem; text-wrap: balance; }
h1 em { font-style: normal; color: var(--rot); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5rem; text-wrap: balance; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.klein { font-size: .875rem; color: var(--leise); }

/* Abschnittskopf: Überschrift plus Vorspann, darunter immer derselbe Abstand zum Inhalt */
.titel { margin: 0 0 var(--kopf-abstand); max-width: 42rem; }
.titel h2 { margin: 0; }
.vorspann { margin: .9rem 0 0; max-width: 38rem; font-size: 1.15rem; line-height: 1.5; color: var(--leise); }
.vorspann.stark { color: var(--tinte); font-size: 1.2rem; }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: var(--kopf-abstand); }
.kopfzeile .titel { margin-bottom: 0; }
.kopfzeile > .weiter { margin-bottom: .35rem; white-space: nowrap; }

/* ============ Knöpfe ============ */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.2rem; padding: .6rem 1.5rem; border-radius: 999px; background: var(--rot); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .16s var(--ease-out); }
a.knopf, a.knopf:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--rot-tief); color: #fff; transform: translateY(-1px); } }
.knopf:active { transform: scale(.97); transition-duration: .1s; }
.knopf svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Sekundär: weiß mit feinem Rand, beim Hover wird nur der Rand dunkel. Gleiche Komponente wie Sprachenumschalter und Menü-Knopf. */
.knopf.leise { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--sand); }
.knopf.leise:hover { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }
.knopf.leise svg { stroke: var(--rot); }
/* Schwebende Knöpfe unten rechts: am Desktop nur WhatsApp, am Handy dazu „Online-Termin“ (dort fällt der Termin-Knopf im Kopf weg) */
.schwebend { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 35; display: flex; gap: .6rem; align-items: center; }
.wa { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.15rem .65rem .9rem; border-radius: 999px; background: linear-gradient(140deg, #6a5e5e 0%, #2b2525 55%, #7a1030 130%); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 12px 30px rgba(43, 37, 37, .28); transition: transform .16s var(--ease-out), background-color .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .wa:hover { background: linear-gradient(140deg, #ff2d5c 0%, var(--rot) 55%, #8f0024 130%); transform: translateY(-1px); } }
.wa:active, .termin-schwebend:active { transform: scale(.96); }
.wa svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.termin-schwebend { display: none; min-height: 0; padding: .75rem 1.15rem; font-size: .95rem; box-shadow: 0 12px 30px rgba(224, 0, 56, .3); }

/* WhatsApp-Symbol ist eine Fläche, kein Strich: in der Farbe des umgebenden Symbols */
use[href="#s-whatsapp"] { fill: currentColor; stroke: none; }
.knopf.leise use[href="#s-whatsapp"], .kontaktliste use[href="#s-whatsapp"] { fill: var(--rot); }

/* ============ Textlink ============ */
.weiter { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .3em; transition: color .18s var(--ease-out); }
a.weiter:hover { color: var(--rot); }

/* ============ Karten ============ */
.karte { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); }
.karte.flach { box-shadow: inset 0 0 0 1.5px var(--sand); }
/* Klickbare Karte: die ganze Fläche ist der Link, hebt sich beim Hover, Titel und Textlink werden rot */
.karte.klick { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.karte.klick:active { transform: scale(.985); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) { .karte.klick:hover { transform: translateY(-3px); box-shadow: var(--schatten-hover); } }
.karte.klick h3 { transition: color .15s; }
.karte.klick:hover h3, .karte.klick:hover .weiter { color: var(--rot); }
.karte.klick .weiter { margin-top: auto; }
.karte.klick p { color: var(--leise); }

/* ============ Körnung und Symbole ============ */
.korn { position: relative; isolation: isolate; }
.korn::after { content: ""; position: absolute; inset: 0; background-image: var(--korn); background-size: 300px 300px; mix-blend-mode: overlay; opacity: .7; pointer-events: none; border-radius: inherit; }
.korn.stark::after { opacity: 1; mix-blend-mode: soft-light; }
.ikon { width: 4.5rem; height: 4.5rem; display: block; }
.ikon use, .ikon path, .ikon rect, .ikon circle { fill: url(#verlauf); filter: url(#koernung); }

/* ============ Kopf (schwebend, mit Unschärfe): immer 32 px Abstand zum oberen Rand, am Seitenanfang wie beim Scrollen ============ */
.kopfhalter { position: sticky; top: 0; z-index: 40; padding: 2rem clamp(.75rem, 2vw, 1.5rem) 0; }
.kopf { max-width: 88rem; margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; padding: .55rem .6rem .55rem 1rem; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-radius: 999px; box-shadow: 0 10px 40px rgba(43, 37, 37, .10), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.marke { display: flex; align-items: center; gap: .65rem; text-decoration: none; line-height: 1.1; }
.marke img { width: 44px; height: 44px; }
.marke span { display: block; font-size: .8rem; color: var(--leise); }
.marke strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.navi { margin-left: .75rem; display: flex; gap: .25rem; align-items: center; }
.navi > a, .navi summary { padding: .55rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1rem; white-space: nowrap; cursor: pointer; list-style: none; transition: background-color .15s; }
.navi summary::-webkit-details-marker { display: none; }
.navi summary::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.15em) rotate(45deg); transition: transform .2s var(--ease-out); }
.navi details[open] summary::after { transform: translateY(.1em) rotate(225deg); }
.navi > a:hover, .navi summary:hover, .navi details[open] summary { background: var(--rose); }
.navi details { position: relative; }
.navi details div { position: absolute; left: 0; top: calc(100% + .9rem); z-index: 5; background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(43, 37, 37, .18); padding: .5rem; display: grid; min-width: 17rem; }
.navi details div::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.navi details div a { padding: .55rem .9rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background-color .15s; }
.navi details div a:hover { background: var(--rose); }
.navi details div a.alle { margin-top: .3rem; padding-top: .75rem; border-top: 1.5px solid var(--sand); border-radius: 0 0 10px 10px; color: var(--rot); }
/* Rechte Gruppe: Telefon, Sprache, Termin mit gleichem Abstand */
.kopf .tel { margin-left: auto; margin-right: -.5rem; font-weight: 700; text-decoration: none; padding-inline: 0; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; transition: color .15s; }
.kopf .tel:hover { color: var(--rot); }
.kopf .tel svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kopf .knopf { min-height: 2.9rem; padding-inline: 1.2rem; font-size: .95rem; }
.kopf .sprache { margin-right: -.5rem; }
.sprache { position: relative; }
.sprache summary, .menue { list-style: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.9rem; padding: .5rem .9rem; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--tinte); background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); transition: box-shadow .15s; }
.sprache summary:hover, .sprache[open] summary, .menue:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.sprache summary::-webkit-details-marker { display: none; }
.sprache summary::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.15em) rotate(45deg); transition: transform .2s var(--ease-out); }
.sprache[open] summary::after { transform: translateY(.1em) rotate(225deg); }
.sprache div { position: absolute; right: 0; top: calc(100% + .6rem); background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(43, 37, 37, .18); padding: .5rem; display: grid; min-width: 10rem; }
.sprache div a { padding: .55rem .9rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; transition: background-color .15s; }
.sprache div a:hover { background: var(--rose); }
.menue { display: none; }

/* Mobilmenü: Vollbild-Ebene mit eigenem Kopf, Inhalt scrollt, Handlungsknöpfe im Fluss unter der Navigation */
.mobilmenu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--grund);
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s; }
.mobilmenu.offen { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@media (min-width: 1241px) { .mobilmenu { display: none; } }
html.menue-offen { overflow: hidden; }
.mobilmenu__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; padding: 0 1rem 0 1.25rem; border-bottom: 1.5px solid var(--sand); flex: none; }
.mobilmenu__kopf .marke img { width: 40px; height: 40px; }
.mobilmenu__zu { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); color: var(--tinte); cursor: pointer; }
.mobilmenu__zu svg { width: 22px; height: 22px; transition: transform .4s var(--ease-out); }
.mobilmenu.offen .mobilmenu__zu svg { transform: rotate(90deg); }
.mobilmenu__inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom)); }
.mobilmenu__navi > a, .mobilmenu__gruppe summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: .6rem 0; border-bottom: 1.5px solid var(--sand);
  color: var(--tinte); font-size: 1.05rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.mobilmenu__navi > a[aria-current] { color: var(--rot); }
.mobilmenu__gruppe summary { list-style: none; }
.mobilmenu__gruppe summary::-webkit-details-marker { display: none; }
.mobilmenu__gruppe .winkel { width: 22px; height: 22px; color: var(--rot); transition: transform .2s var(--ease-out); }
.mobilmenu__gruppe[open] .winkel { transform: rotate(180deg); }
.mobilmenu__gruppe[open] summary { border-bottom-color: transparent; }
.mobilmenu .unter { display: grid; padding: 0 0 .75rem; border-bottom: 1.5px solid var(--sand); }
.mobilmenu .unter a { padding: .5rem .75rem; border-radius: 10px; color: var(--tinte); font-size: .95rem; text-decoration: none; }
.mobilmenu .unter a:hover, .mobilmenu .unter a:active, .mobilmenu .unter a[aria-current] { background: var(--rose); }
.mobilmenu .unter .unter__alle { color: var(--rot); font-weight: 600; }
.mobilmenu__aktionen { display: grid; gap: .6rem; margin-top: 1.5rem; }
.mobilmenu__aktionen > div { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mobilmenu__aktionen .knopf { width: 100%; padding-inline: .75rem; }
.mobilmenu__info { margin-top: 1.5rem; padding: 1.1rem 1.15rem; border-radius: var(--radius-klein); background: #fff; box-shadow: var(--schatten); font-size: .98rem; }
.mobilmenu__zeitkopf { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.status { margin-inline-start: auto; padding: .2rem .65rem; border-radius: 99px; font-size: .82rem; font-weight: 700; background: var(--sand); color: var(--leise); }
.status--offen { background: #e4f3e8; color: #1f6b3a; }
.mobilmenu__info .zeiten { margin: 0; display: grid; gap: .4rem; }
.mobilmenu__info .zeiten div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; }
.mobilmenu__info .zeiten dt { color: var(--leise); }
.mobilmenu__info .zeiten dd { margin: 0; }
.mobilmenu__ort { display: flex; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1.5px solid var(--sand); }
.mobilmenu__ort svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobilmenu__ort a { font-weight: 700; color: inherit; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.mobilmenu__sprachen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.mobilmenu__sprachen a { padding: .5rem .9rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); color: var(--tinte); font-weight: 600; font-size: .92rem; text-decoration: none; }
.mobilmenu__sprachen a[aria-current] { background: var(--tinte); box-shadow: none; color: #fff; }
/* Einblendung: Einträge kommen nacheinander von unten, beim Schließen ohne Verzögerung zurück */
.mobilmenu__navi > :nth-child(1) { --i: 1; } .mobilmenu__navi > :nth-child(2) { --i: 2; } .mobilmenu__navi > :nth-child(3) { --i: 3; } .mobilmenu__navi > :nth-child(4) { --i: 4; }
.mobilmenu__aktionen { --i: 5; } .mobilmenu__info { --i: 6; } .mobilmenu__sprachen { --i: 7; }
.mobilmenu__navi > *, .mobilmenu__aktionen, .mobilmenu__info, .mobilmenu__sprachen { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.mobilmenu.offen .mobilmenu__navi > *, .mobilmenu.offen .mobilmenu__aktionen, .mobilmenu.offen .mobilmenu__info, .mobilmenu.offen .mobilmenu__sprachen {
  opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(40ms + var(--i, 0) * 30ms); }
@media (prefers-reduced-motion: reduce) {
  .mobilmenu, .mobilmenu.offen, .mobilmenu__navi > *, .mobilmenu__aktionen, .mobilmenu__info, .mobilmenu__sprachen, .mobilmenu__zu svg { transition: none !important; transform: none !important; }
}

/* ============ Einstieg ============ */
.wasch { position: relative; isolation: isolate; }
.wasch::before { content: ""; position: absolute; inset: -14rem 0 0 0; z-index: -1; background: radial-gradient(60% 75% at 82% 32%, #ecd6d8 0%, rgba(236, 214, 216, 0) 70%), radial-gradient(45% 55% at 6% 95%, #e6dedb 0%, rgba(230, 222, 219, 0) 70%), linear-gradient(180deg, #f3eeec 0%, var(--grund) 100%); }
.wasch::after { content: ""; position: absolute; inset: -14rem 0 0 0; z-index: -1; background-image: var(--korn); background-size: 300px 300px; mix-blend-mode: overlay; opacity: .8; pointer-events: none; }
.einstieg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding-block: clamp(2rem, 5vw, 4rem) clamp(6rem, 9vw, 8rem); }
.einstieg .lies { margin: 0 0 1.75rem; font-size: 1.15rem; line-height: 1.5; color: var(--leise); max-width: 30rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.buehne { position: relative; aspect-ratio: 1; max-width: 32rem; justify-self: end; width: 100%; }
.blob { position: absolute; border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
.blob.farbe { inset: 2% -8% 0 4%; background: linear-gradient(140deg, #e9dcdc 0%, #c9b7b7 30%, #8a7e7e 60%, #e00038 100%); transform: rotate(-10deg); }
.blob.foto { inset: 14% 10% 10% 12%; overflow: hidden; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
.blob.foto img { width: 100%; height: 100%; object-fit: cover; }
.buehne .ikon { position: absolute; width: 8.5rem; height: 8.5rem; right: -1rem; bottom: 4%; filter: drop-shadow(0 18px 30px rgba(43, 37, 37, .25)); }

/* ============ Fakten ============ */
.fakten { position: relative; z-index: 2; margin-top: -2.75rem; }
.fakten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fakten li { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-klein); }
.fakten .ikon { width: 2.6rem; height: 2.6rem; flex: none; }
.fakten b { display: block; font-size: 1rem; line-height: 1.2; margin-bottom: .1rem; }
.fakten span span { display: block; font-size: .9rem; line-height: 1.3; color: var(--leise); }

/* ============ Abschnitte: oben immer ein Abstand, unten keiner; farbige Abschnitte und der letzte Abschnitt vor dem Fuß tragen ihn auch unten ============ */
main > :last-child { padding-bottom: var(--abstand); }
.aktuell, .behandlungen, .ablauf, .praxis, .wissen, .fragen, .kontakt { padding-block: var(--abstand) 0; }
/* Farbige Blöcke tragen den vollen Abstand auf beiden Seiten, damit es an der Naht symmetrisch bleibt */
.fragen, .kontakt { padding-bottom: var(--abstand); }

/* ============ Aktuelles ============ */
.meldungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.meldung { padding: 1.75rem; }
.meldung time { display: block; font-weight: 700; color: var(--rot); font-size: .95rem; margin-bottom: .6rem; }

/* ============ Behandlungen ============ */
.felder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.feld { background: linear-gradient(160deg, #fff 0%, var(--sand) 100%); padding: .85rem .85rem 1.75rem; }
.feld .bild { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 1.25rem; }
.feld .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .feld:hover .bild img { transform: scale(1.04); } }
.feld h3, .feld p, .feld .weiter { margin-inline: .9rem; }

/* ============ Ablauf ============ */
.ablauf .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 4rem; align-items: start; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.4rem; border-radius: var(--radius-klein); }
.schritte li::before { content: counter(s); display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%; color: #fff; font-weight: 800; font-size: 1.6rem; background-image: var(--korn), linear-gradient(140deg, #f6dfe0, #8a7e7e 70%, #e00038); background-blend-mode: overlay, normal; }
.schritte p { margin: 0; color: var(--leise); }

/* ============ Praxis ============ */
.praxis .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem 4rem; align-items: start; }
/* Nur die deutsche Überschrift „Die Praxis im Ostend“ bleibt am Desktop einzeilig; übersetzte Titel dürfen umbrechen */
@media (min-width: 1101px) { .praxis h2.einzeilig { text-wrap: nowrap; } }
.collage { position: relative; aspect-ratio: 1; }
.collage .foto { position: absolute; overflow: hidden; }
.collage .foto img { width: 100%; height: 100%; object-fit: cover; }
.collage .f1 { inset: 0 28% 30% 0; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }
.collage .f2 { inset: 40% 0 0 32%; border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
.collage .f3 { width: 34%; aspect-ratio: 1; left: 2%; bottom: 0; border-radius: 50%; }
/* Startseite: die kleine Runde sitzt oben rechts und überlappt die große Form */
.praxis .collage .f3 { left: auto; right: 10%; top: -4%; bottom: auto; }
.praxis .text p { color: var(--leise); }
.merkmale { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.merkmale li { display: flex; gap: .8rem; align-items: baseline; }
.merkmale li::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: linear-gradient(140deg, #8a7e7e, #e00038); transform: translateY(.05rem); }
.sterne { margin-top: 1.75rem; border-radius: var(--radius-klein); padding: 1.1rem 1.5rem; color: #fff; background: linear-gradient(140deg, #8a7e7e 0%, #5e5454 55%, #e00038 130%); display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.sterne b { font-size: 2.6rem; line-height: .9; font-weight: 800; letter-spacing: -.04em; }
.praxis .sterne p { margin: 0; color: #fff; position: relative; z-index: 1; }
.sterne a { text-underline-offset: .3em; text-decoration-thickness: 1px; transition: text-decoration-thickness .15s; }
.sterne a:hover { text-decoration-thickness: 2px; }

/* ============ Gut zu wissen ============ */
.wissen { background: linear-gradient(180deg, var(--grund), #fff); }
.wissen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.wissen li { padding: 1.75rem; display: flex; flex-direction: column; }
.wissen li > :last-child { margin-top: auto; }
.wissen li > p:last-child { margin-top: 0; }  /* ohne Link darunter bleibt der Text oben */
.wissen .ikon { margin-bottom: 1.1rem; }
.wissen p { color: var(--leise); }
.wissen .sprachen { margin: 0; color: var(--tinte); }
.sprachen a { margin-right: .9rem; }

/* ============ Fragen ============ */
.fragen { background: #fff; }
.fragen .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 4rem; align-items: start; }
/* Aufklappbare Frage: Frage und Antwort haben links und rechts dieselbe Flucht, das Plus sitzt mittig und dreht sich zum Kreuz */
.fragen details { background: var(--grund); border-radius: 20px; margin-bottom: .6rem; padding-inline: 1.4rem; }
.fragen summary { list-style: none; cursor: pointer; padding: 1.05rem 3rem 1.05rem 0; font-weight: 700; font-size: 1.05rem; line-height: 1.4; position: relative; transition: color .15s; }
.fragen summary:hover { color: var(--rot); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.5rem; height: 1.5rem; transform: translateY(-50%); background: linear-gradient(var(--rot), var(--rot)) center / 2px .9rem no-repeat, linear-gradient(var(--rot), var(--rot)) center / .9rem 2px no-repeat; transition: transform .2s var(--ease-out); }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen details p { margin: 0; padding: 0 3rem 1.25rem 0; color: var(--leise); }

/* ============ Kontakt ============ */
.kontakt { background: var(--grund); border-radius: 48px 48px 0 0; }
.kontakt .skizze { justify-self: start; }
.kontakt .zeiten div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.kontakt .spalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem 4rem; align-items: start; }
.woche { display: grid; gap: 1rem; }
.achse, .tag { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.achse div { grid-column: 2; position: relative; height: 1.2rem; font-size: .9rem; color: var(--leise); }
.achse div span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.achse div span:first-child { transform: none; }
.achse div span:last-child { transform: translateX(-100%); }
.spur { position: relative; height: 1.2rem; background: linear-gradient(var(--sand), var(--sand)) center / 100% 2px no-repeat; }
.spur i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #c9bcbc, #a89b9b); }
.spur b { position: absolute; top: -.45rem; bottom: -.45rem; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--rot); }
.tag.heute-zeile .name { font-weight: 700; }
.tag.heute-zeile .spur i { background: linear-gradient(90deg, #8a7e7e, #5e5454); }
.tag .zeit { grid-column: 2; font-size: .95rem; color: var(--leise); margin-top: -.6rem; }
/* Kontaktliste: Zeilen mit Symbol, im Kontaktblock und im Fuß dieselbe Komponente */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.kontaktliste li { display: flex; align-items: flex-start; gap: .75rem; }
.kontaktliste svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .25rem; fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kontaktliste a { display: inline-block; padding-block: .2rem; text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .3em; transition: color .15s; }
.kontaktliste a:hover { color: var(--rot); }
.kontaktkarte { padding: 1.75rem; font-style: normal; }
.kontaktkarte h3 { margin-bottom: 1.1rem; }
.kontaktkarte .knoepfe { margin-top: 1.5rem; }

/* ============ Fuß ============ */
/* Der Fuß liegt über dem schwebenden WhatsApp-Knopf: beim Scrollen verschwindet der Knopf dahinter */
/* Fuß: dunkler Verlauf mit Körnung, wie die Bewertungskarte und die Schrittzahlen */
.fuss { position: relative; z-index: 36; background: linear-gradient(140deg, #6a6060 0%, #3a3232 45%, #221d1d 100%); color: #fff; padding-block: var(--abstand) 1.5rem; font-size: .95rem; }
.fuss.korn::after { opacity: 1; mix-blend-mode: soft-light; background-size: 220px 220px; }
.fuss .spalten { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem 3rem; margin-bottom: 3.5rem; }
.fuss .marke { margin-bottom: 1.5rem; color: #fff; }
.fuss .marke span { color: rgba(255, 255, 255, .65); }
.fuss address { font-style: normal; margin: 0 0 1.25rem; color: rgba(255, 255, 255, .8); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss .kontaktliste { margin: 0 0 1.75rem; gap: .6rem; }
.fuss .kontaktliste li { align-items: center; }
.fuss .kontaktliste svg { margin-top: 0; }
.fuss h4 { font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 1rem; }
.fuss .zeiten + h4 { margin-top: 2rem; }
/* Fußlinks: Unterstrich ist immer da, aber unsichtbar, und blendet beim Hover ein (Unterstriche selbst lassen sich nicht animieren, die Farbe schon) */
.fuss a:not(.knopf) { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .3em; color: rgba(255, 255, 255, .85); transition: color .18s var(--ease-out), text-decoration-color .18s var(--ease-out); }
.fuss a:not(.knopf):hover { color: #fff; text-decoration-color: var(--rot); }
.fuss .zeiten dt { color: rgba(255, 255, 255, .55); }
.fuss .sterne-klein { display: flex; gap: .6rem; align-items: baseline; margin: 1.75rem 0 0; color: rgba(255, 255, 255, .8); }
.fuss .sterne-klein b { font-size: 1.6rem; color: #fff; }
.fuss .unten { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, .6); }
.fuss .unten span { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
/* Agentur-Logo rechts in der Fußzeile, wie bei Greundiek */
.fuss a.macher, .fuss a.macher:hover { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .15s var(--ease-out); }
.fuss .macher img { height: 1.5rem; width: auto; opacity: .8; transition: opacity .15s var(--ease-out); }
.fuss a.macher:hover { color: #fff; text-decoration: none; }
.fuss .macher:hover img { opacity: 1; }

#folgt { position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); margin: 0; background: var(--tinte); color: #fff; padding: .8rem 1.4rem; border-radius: 999px; font-size: .95rem; width: max-content; max-width: calc(100vw - 2rem); z-index: 45; }

/* ============ Umbrüche ============ */
/* Unter 1240 px passt die volle Kopfzeile nicht mehr in eine Reihe: Menü-Knopf statt Navigation */
@media (max-width: 1240px) {
  .navi, .kopf .tel, .kopf .sprache { display: none; }
  .menue { display: inline-flex; margin-left: auto; }
}
@media (max-width: 1100px) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten ul, .wissen ul, .fuss .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meldungen { grid-template-columns: 1fr; }
  .ablauf .zwei, .praxis .zwei, .fragen .zwei { grid-template-columns: 1fr; }
  .collage { max-width: 32rem; }
  .kontakt .spalten { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .kopfhalter { padding: 1.25rem .6rem 0; }
  .fakten { margin-top: -1.75rem; }
  .kopf { gap: .5rem; padding: .45rem .45rem .45rem .75rem; }
  .marke img { width: 38px; height: 38px; }
  .kopf .marke span { display: none; }
  .kopf .marke strong { font-size: .95rem; }
  .kopf > .knopf { display: none; }
  .schwebend { left: 1rem; right: 1rem; bottom: 1rem; }
  .schwebend > a { flex: 1; justify-content: center; }
  .termin-schwebend { display: inline-flex; }
  .menue { min-height: 2.7rem; padding-inline: .8rem; }
  .einstieg { grid-template-columns: 1fr; }
  .buehne { max-width: 22rem; justify-self: center; grid-row: 1; }
  .buehne .ikon { width: 5.5rem; height: 5.5rem; right: 0; }
  .blob.farbe { inset: 2% 2% 0 2%; transform: none; }
  .felder, .fakten ul, .wissen ul, .fuss .spalten { grid-template-columns: 1fr; }
  .fuss .spalten { gap: 2rem; }
  .feld { padding: .7rem .7rem 1.4rem; }
  .schritte li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
  .schritte li::before { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; }
  .sterne { grid-template-columns: 1fr; }
  .achse, .tag { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; }
  .achse .fein { display: none; }
  .kontakt { border-radius: 28px 28px 0 0; }
}
/* ============ Unterseiten: Einstieg, Pfad, Kurzinfos ============ */
.abschnitt { padding-block: var(--abstand) 0; }
.hero-unter .einstieg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 5vw, 4.5rem); }
.hero-unter .einstieg .lies { max-width: 34rem; }
.hero-unter h1 { font-size: clamp(2.4rem, 4.8vw, 3.8rem); }
.hero-unter.mit-fakten .einstieg { padding-bottom: clamp(6rem, 9vw, 8.5rem); }
.hero-unter .buehne { max-width: 32rem; }
/* Collage mit Bildwechsel: je Form liegen zwei Bilder übereinander, das Skript blendet alle paar Sekunden eines um */
.collage .foto img { position: absolute; inset: 0; transition: opacity 1.2s ease, filter 1.2s ease; }
.collage .foto img.weg { opacity: 0; filter: blur(3px); }
/* Variante Band: Text oben, breites Foto darunter, die Kacheln überlappen das Foto */
.hero-band .einstieg, .hero-band.mit-fakten .einstieg { padding-bottom: 0; }
.hero-band .band { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; }
.hero-band .band img { width: 100%; height: 100%; object-fit: cover; }
/* Variante Symbol: Behandlungssymbol auf weißer Form über der Farbform */
.hero-symbol .buehne { max-width: 24rem; }
.hero-symbol .blob.farbe { inset: 4% -6% 2% 6%; }
.hero-symbol .blob.weiss { inset: 16% 12% 12% 14%; background: #fff; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; box-shadow: var(--schatten); }
.hero-symbol .buehne .ikon { position: absolute; inset: 31% 27% 27% 29%; width: auto; height: auto; filter: none; }
/* Variante Collage im Einstieg: eigene Anordnung, damit sie sich von der Startseite unterscheidet (große Form rechts, mittlere unten links, kleine oben links) */
.hero-collage .collage { width: 100%; max-width: 30rem; justify-self: end; }
.hero-collage .collage .f1 { inset: 0 0 16% 24%; border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%; }
.hero-collage .collage .f2 { inset: 50% 44% 0 0; border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%; }
.hero-collage .collage .f3 { width: 28%; left: 6%; top: 8%; bottom: auto; border-radius: 50%; }

/* Bildschiene: ein Bild in der weichen Form, Pfeile blättern */
.slider.bildschiene .schiene > li { flex: 0 0 100%; }
.bildschiene .rahmen { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.bildschiene .rahmen img { width: 100%; height: 100%; object-fit: cover; }
.bildschiene .schiene { margin: -1.25rem; padding: 1.25rem; }
.bildschiene .pfeile { margin: 1rem 0 0; justify-content: flex-end; }
/* Variante Skizze (Kontakt): echte Karte aus OpenStreetMap-Daten als Illustration, ohne Rahmen, wischt zum Rand hin aus (Maske um den Praxis-Punkt) */
/* Maske aus drei weichen Ellipsen um den Praxis-Punkt (ergibt eine organische Form wie bei den Blobs), die Ränder laufen lange vor der Kante aus; die Ebenen atmen langsam gegeneinander */
.skizze { display: block; width: 100%; max-width: 36rem; aspect-ratio: 6 / 5; text-decoration: none;
  --m1: radial-gradient(ellipse 36% 40% at calc(var(--px, 50%) + 4%) calc(var(--py, 50%) - 6%), #000 0 28%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  --m2: radial-gradient(ellipse 40% 33% at calc(var(--px, 50%) - 9%) calc(var(--py, 50%) + 10%), #000 0 28%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  --m3: radial-gradient(ellipse 32% 38% at calc(var(--px, 50%) + 16%) calc(var(--py, 50%) + 12%), #000 0 26%, rgba(0, 0, 0, .55) 56%, transparent 100%);
  -webkit-mask-image: var(--m1), var(--m2), var(--m3); mask-image: var(--m1), var(--m2), var(--m3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-over; mask-composite: add;
  animation: skizze-atmen 14s ease-in-out infinite alternate; }
.hero-skizze .skizze { width: 130%; max-width: none; justify-self: end; margin: -8% -26% -12% 0; }
@keyframes skizze-atmen { from { -webkit-mask-position: 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0; } to { -webkit-mask-position: 2% -2%, -3% 2%, 2% 3%; mask-position: 2% -2%, -3% 2%, 2% 3%; } }
@media (prefers-reduced-motion: reduce) { .skizze { animation: none; } }
.skizze svg { width: 100%; height: 100%; display: block; overflow: hidden; transform: translate(var(--sx, 0px), var(--sy, 0px)); transform-origin: var(--px, 50%) var(--py, 50%); transition: transform .7s var(--ease-out); }
.skizze .marker { transform-box: fill-box; transform-origin: 50% 50%; }
.skizze .etikett { x: var(--ex); width: var(--ew); transition: x .45s var(--ease-out), width .45s var(--ease-out), stroke .2s; }
.skizze .etikett-text, .skizze .etikett-hinweis { transition: opacity .25s; }
.skizze .etikett-hinweis { opacity: 0; }
.skizze .strasse { fill: none; stroke: #e2dad7; stroke-linecap: round; stroke-linejoin: round; }
.skizze .strasse.fuss { stroke-width: 1.2; }
.skizze .strasse.klein { stroke-width: 2.2; }
.skizze .strasse.mittel { stroke-width: 4; stroke: #d9d0cc; }
.skizze .strasse.gross { stroke-width: 7; stroke: #cfc4c0; }
.skizze .fluss { fill: none; stroke: #e9e2df; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.skizze .park { fill: #eee7e3; stroke: none; }
.skizze .gebaeude { fill: #e6dedb; stroke: none; }
.skizze .bahn { fill: none; stroke: #bfb4b1; stroke-width: 2; stroke-dasharray: 7 5; }
.skizze text { font-family: "Onest", system-ui, sans-serif; font-size: 12px; font-weight: 600; fill: var(--grau); letter-spacing: .02em; paint-order: stroke; stroke: var(--grund); stroke-width: 4px; stroke-linejoin: round; }
.skizze .strassenname { font-size: 11px; font-weight: 500; }
.skizze .quelle { font-size: 8px; font-weight: 400; fill: #b4a9a6; stroke: none; letter-spacing: 0; }
.skizze .punkt { fill: var(--rot); }
.skizze .halo { fill: var(--rot); opacity: .25; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; }
.skizze .etikett { fill: #fff; stroke: var(--sand); stroke-width: 1.5; }
.skizze .etikett-text, .skizze .etikett-hinweis { fill: var(--tinte); font-weight: 700; stroke: none; }
@keyframes halo { 0% { transform: scale(.5); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes huepfen { 0%, 100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-9px) scale(1.12); } 55% { transform: translateY(0) scale(1); } 75% { transform: translateY(-3px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .skizze .halo { animation: none; transform: none; opacity: .18; } .skizze svg { transition: none; } }
/* Überfahren mit der Maus: Karte zoomt sanft zum Praxis-Punkt und folgt der Maus ein Stück (Skript setzt --sx/--sy), der Marker hüpft, der Halo pulst schneller, das Etikett zeigt den Weg */
@media (hover: hover) and (pointer: fine) {
  .skizze:hover svg { transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(1.06); }
  .skizze:hover .marker { animation: huepfen .9s var(--ease-out); }
  .skizze:hover .halo { animation-duration: 1.3s; }
  .skizze:hover .etikett { stroke: var(--tinte); x: var(--hx); width: var(--hw); }
  .skizze:hover .etikett-text { opacity: 0; }
  .skizze:hover .etikett-hinweis { opacity: 1; transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) { .skizze:hover svg { transform: none; } .skizze:hover .marker { animation: none; } }

/* Variante Mitte: zentriert, Symbol als Abzeichen */
.hero-mitte .einstieg.ohne-bild { grid-template-columns: minmax(0, 46rem); justify-content: center; text-align: center; }
.hero-mitte .einstieg .lies { margin-inline: auto; }
.hero-mitte .knoepfe, .hero-mitte .pfad { justify-content: center; }
.hero-mitte .abzeichen { width: 5.5rem; height: 5.5rem; margin: 0 auto 1.25rem; }
/* Vorführseite der Varianten: Leisten dazwischen, Verläufe nicht über die Leisten hinaus */
.vorfuehrung-leiste { background: var(--tinte); color: #fff; padding: .9rem 0; margin-top: var(--abstand); }
.vorfuehrung-leiste:first-child { margin-top: 0; }
.vorfuehrung-leiste b { font-size: 1.05rem; }
.vorfuehrung-leiste span { color: rgba(255, 255, 255, .7); margin-left: 1rem; }
.vorfuehrung .wasch::before, .vorfuehrung .wasch::after { inset: 0; }
@media (max-width: 1100px) { .komponenten [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }
.fakten.drei ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karte.flach.liste { padding: 1.5rem 1.75rem; }
.karte.flach.liste .merkmale { margin: 0; gap: .8rem; }
.hero-unter .einstieg.ohne-bild { grid-template-columns: minmax(0, 46rem); }
.pfad { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .92rem; color: var(--leise); }
.pfad li + li::before { content: "/"; margin-right: .5rem; color: var(--grau); }
.pfad a { text-decoration: none; transition: color .15s; }
.pfad a:hover { color: var(--rot); }
.infos { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.infos li { display: inline-flex; gap: .4rem; align-items: baseline; padding: .5rem .95rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); font-size: .92rem; color: var(--leise); }
.infos b { color: var(--tinte); }

/* Drei flache Kacheln mit Symbol (wie „Gut zu wissen“), für Unterseiten */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kacheln li { padding: 1.75rem; display: flex; flex-direction: column; }
.kacheln .ikon { margin-bottom: 1.1rem; }
.kacheln p { color: var(--leise); }
.kacheln p:last-child { margin-bottom: 0; }

/* Textblock neben dem Abschnittskopf (Kosten, Hinweise) */
.textblock .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 4rem; align-items: start; }
.textblock .zwei p { color: var(--leise); }
.textblock .merkmale { margin-top: 1.25rem; }

/* Block direkt unter dem Einstieg (Behandlungsseiten: „Wann Sie kommen sollten“), überlappt den Einstieg wie die Kacheln */
.block { position: relative; z-index: 2; margin-top: -2.75rem; }
.block > .karte { padding: clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 3rem; align-items: start; }
.block .titel { margin-bottom: 0; }
.block .merkmale { margin: .35rem 0 0; gap: .8rem; }
/* Kartenraster direkt unter dem Einstieg (Aktuelles): überlappt wie der Block */
.block.raster { margin-top: -3.5rem; }

/* Kosten und Kasse: Text links, rechts die Kurzfakten als Spalte */
/* Der Abschnitt direkt vor den weißen FAQ trägt unten den vollen Abstand (Naht); „Gut zu wissen“ nicht, der Verlauf endet dort schon in Weiß */
main > section:not(.wissen):has(+ .fragen) { padding-bottom: var(--abstand); }
.kosten .zwei { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start; }
.kosten .zwei p { color: var(--leise); }
.kosten .merkmale { margin-top: 1.25rem; }
.fakten-spalte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.fakten-spalte li { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-klein); }
.fakten-spalte .ikon { width: 2.6rem; height: 2.6rem; flex: none; }
.fakten-spalte b { display: block; font-size: 1rem; line-height: 1.2; margin-bottom: .1rem; }
.fakten-spalte span span { display: block; font-size: .9rem; line-height: 1.3; color: var(--leise); }

/* Bewertungen: drei Stimmen aus Google, Sterne in Rot, Autor mit Initial */
.bewertungen .schiene > li { display: flex; }
.bewertung { padding: 1.75rem; display: flex; flex-direction: column; width: 100%; }
.pfeile { align-items: center; }
.pfeile .weiter { margin-right: 1rem; white-space: nowrap; }
.sterne-reihe { display: flex; gap: .2rem; margin-bottom: 1rem; }
.sterne-reihe svg { width: 1.1rem; height: 1.1rem; fill: var(--rot); }
.bewertung blockquote { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.55; }
.bewertung footer { margin-top: auto; font-size: .92rem; color: var(--leise); }
.bewertung footer b { color: var(--tinte); font-weight: 700; }

/* Weitere Behandlungen: Bildkarten als Schiene mit Pfeilen */
.weitere { background: #fff; }
.fragen + .weitere { padding-top: 0; }
/* Die Schiene bekommt rundum Luft für die Schatten der Karten (Innenabstand, außen wieder abgezogen); am Desktop sind genau drei Karten zu sehen, am Touchgerät lässt sie sich wischen */
.slider .schiene { list-style: none; margin: -1.5rem -1.25rem -2rem; padding: 1.5rem 1.25rem 2rem; display: flex; gap: 1.25rem; overflow: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
/* Nur die sichtbaren Karten tragen einen Schatten, sonst ragt der Schatten der nächsten Karte in die Sicht (das Skript vergibt .sichtbar) */
.slider .schiene .karte { box-shadow: none; transition: box-shadow .3s var(--ease-out), transform .2s var(--ease-out); }
.slider .schiene > li.sichtbar .karte { box-shadow: var(--schatten); }
.slider .schiene > li.sichtbar .karte.klick:hover { box-shadow: var(--schatten-hover); }
@media (hover: none) { .slider .schiene { overflow-x: auto; } }
.slider .schiene::-webkit-scrollbar { display: none; }
.slider .schiene > li { flex: 0 0 calc((100% - 2.5rem) / 3); scroll-snap-align: start; }
.slider .feld { padding: .85rem .85rem 1.5rem; }
.slider .feld h3 { font-size: 1.15rem; }
.pfeile { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-bottom: .35rem; }
.pfeil { width: 2.9rem; height: 2.9rem; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); display: grid; place-items: center; cursor: pointer; transition: box-shadow .15s var(--ease-out), transform .16s var(--ease-out); }
.pfeil:active { transform: scale(.94); transition-duration: .1s; }
.pfeil:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.pfeil svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Aufruf am Seitenende: eine Karte mit Text, Sprechzeiten und Knöpfen. Der Hintergrund bleibt der der Seite, nur nach weißen Abschnitten (Weitere Behandlungen) wird er weiß */
.aufruf { padding-bottom: var(--abstand); }
.weitere + .aufruf, .wissen + .aufruf { background: #fff; }
.aufruf .karte { padding: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center; background: linear-gradient(140deg, #fff 0%, var(--rose) 100%); }
.aufruf h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.aufruf p { color: var(--leise); margin: .75rem 0 0; max-width: 32rem; }
.aufruf h3 { font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); margin: 0 0 .9rem; }
.aufruf .knoepfe { flex-direction: column; align-items: stretch; }
.zeiten { margin: 0; display: grid; gap: .6rem; }
.zeiten div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; }
.zeiten dt { color: var(--leise); }
.zeiten dd { margin: 0; }

@media (max-width: 1100px) {
  .fakten.drei ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kacheln { grid-template-columns: 1fr; }
  .textblock .zwei, .kosten .zwei, .block > .karte { grid-template-columns: 1fr; }
  .slider .schiene > li { flex-basis: calc((100% - 1.25rem) / 2); }
  .aufruf .karte { grid-template-columns: minmax(0, 1fr) auto; }
  .aufruf .karte > div:first-child { grid-column: 1 / -1; }
  .hero-unter .einstieg { grid-template-columns: 1fr; }
  .hero-unter .buehne, .hero-collage .collage { max-width: 22rem; justify-self: start; }
  .hero-skizze .skizze { width: 110%; max-width: 32rem; margin: -2% -5% -8% -5%; justify-self: start; }
  .hero-mitte .einstieg.ohne-bild { grid-template-columns: minmax(0, 46rem); }
}
@media (max-width: 760px) {
  .fakten.drei ul { grid-template-columns: 1fr; }
  .hero-symbol .blob.farbe { inset: 4% 2% 2% 2%; }
  .block { margin-top: -1.75rem; }
  .slider .schiene > li { flex-basis: 84%; }
  .pfeile .weiter { flex-basis: 100%; margin-right: 0; }
  .kopfzeile .pfeile { justify-content: flex-start; }
  .aufruf .karte { grid-template-columns: 1fr; }
  .aufruf .karte > div:first-child { grid-column: auto; }
  .aufruf { border-radius: 28px 28px 0 0; }
}
/* ============ Weitere Komponenten (Bibliothek, Freigabe je Baustein) ============ */
/* Formular */
.formular { display: grid; gap: 1rem; }
.formular .zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feld-gruppe { display: grid; gap: .4rem; }
.feld-gruppe label { font-weight: 700; font-size: .95rem; }
.eingabe { width: 100%; min-height: 3.2rem; padding: .7rem 1.1rem; border: 0; border-radius: var(--radius-klein); background: #fff; box-shadow: inset 0 0 0 1.5px var(--sand); font: inherit; color: var(--tinte); transition: box-shadow .15s; }
.eingabe::placeholder { color: var(--grau); }
.eingabe:hover { box-shadow: inset 0 0 0 1.5px var(--grau); }
.eingabe:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--tinte); }
textarea.eingabe { min-height: 8rem; resize: vertical; }
select.eingabe { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--leise); }
.haken input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--rot); flex: none; }
.formular .klein { margin: 0; }
.formular .knoepfe { margin-top: .5rem; }

/* Anfahrt: Karte neben der Kontaktkarte */
.anfahrt .zwei { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: stretch; }
.anfahrt .kontaktkarte { display: flex; flex-direction: column; }
.anfahrt .kontaktkarte .knoepfe { margin-top: auto; padding-top: 1.5rem; }
/* Interaktive Karte (OpenStreetMap), per Filter in die Farbwelt der Seite gezogen */
.landkarte { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand); }
.landkarte .skizze { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; animation: none; }
.landkarte .karte-flaeche { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.landkarte.geladen .karte-flaeche { opacity: 1; }
.landkarte.gescheitert .karte-flaeche { display: none; }
/* Marker und Bedienelemente der Karte im Stil der Seite */
.karte-marker { width: 26px; height: 26px; position: relative; cursor: default; }
.karte-marker .punkt { position: absolute; inset: 5px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(224, 0, 56, .35); }
.karte-marker .halo { position: absolute; inset: -8px; border-radius: 50%; background: var(--rot); opacity: .25; animation: halo-css 2.6s ease-out infinite; }
@keyframes halo-css { 0% { transform: scale(.5); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .karte-marker .halo { animation: none; opacity: .18; } }
.landkarte .maplibregl-ctrl-top-right { top: .75rem; right: .75rem; }
.landkarte .maplibregl-ctrl-group { border-radius: 999px; box-shadow: var(--schatten); background: #fff; overflow: hidden; margin: 0; }
.landkarte .maplibregl-ctrl-group button { width: 2.25rem; height: 2.25rem; }
.landkarte .maplibregl-ctrl-group button + button { border-top: 1px solid var(--sand); }
.landkarte .maplibregl-ctrl-bottom-right { bottom: .55rem; right: .6rem; }
.landkarte .maplibregl-ctrl-attrib { font: 500 .68rem/1.4 "Onest", system-ui, sans-serif; color: var(--leise); background: rgba(255, 255, 255, .82); border-radius: 999px; padding: .15rem .6rem; margin: 0; }
.landkarte .maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; }
.landkarte .maplibregl-ctrl-attrib a:hover { color: var(--rot); }
.landkarte .maplibregl-cooperative-gesture-screen { font-family: "Onest", system-ui, sans-serif; border-radius: var(--radius); }
.landkarte .maplibregl-canvas:focus { outline: none; }
.landkarte::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--sand); border-radius: inherit; }
.karte-quelle { position: absolute; left: .75rem; top: .75rem; font-size: .7rem; color: var(--leise); background: rgba(255, 255, 255, .85); padding: .2rem .55rem; border-radius: 999px; text-decoration: none; }
.karte-quelle:hover { color: var(--rot); }

/* Personenkarte (Team) */
.personen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.person { padding: .85rem .85rem 1.5rem; }
.person .bild { aspect-ratio: 4 / 5; border-radius: var(--radius-klein); overflow: hidden; margin-bottom: 1.1rem; background: var(--sand); display: grid; place-items: center; color: var(--leise); }
.person .bild img { width: 100%; height: 100%; object-fit: cover; }
.person h3, .person p { margin-inline: .9rem; }
.person .rolle { color: var(--rot); font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.person p { color: var(--leise); margin-bottom: 0; }

/* Logo-Reihe (Labore, Partner) */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; }
.logos li { display: grid; place-items: center; min-height: 6.5rem; padding: 1.25rem; color: var(--leise); }
.logos img { max-height: 3rem; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }

/* Tabelle */
.tabellen-halter { overflow-x: auto; border-radius: var(--radius-klein); }
.tabelle { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius-klein); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--sand); }
.tabelle th, .tabelle td { padding: .9rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--sand); }
.tabelle th { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); font-weight: 700; background: var(--grund); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td { color: var(--leise); }
.tabelle td:first-child { color: var(--tinte); font-weight: 700; }

/* Zahlenreihe */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.zahlen li { padding: 1.75rem; }
.zahlen b { display: block; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--rot); margin-bottom: .6rem; }
.zahlen span { color: var(--leise); }

/* Galerie */
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.galerie li { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.galerie li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Artikel: Fließtext für Aktuelles, Rechtstexte, Erklärungen. Lesespalte 52 rem, Bilder dürfen breiter */
.artikel { max-width: 52rem; }
.artikel > time, .artikel .stand { display: block; font-weight: 700; color: var(--rot); font-size: .95rem; margin-bottom: 1.5rem; }
.artikel > p:first-of-type { font-size: 1.15rem; color: var(--tinte); }
.artikel h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.5rem 0 .9rem; }
.artikel h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.artikel p, .artikel li { color: var(--leise); line-height: 1.65; }
.artikel p { margin-bottom: 1.1rem; }
.artikel ul, .artikel ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.artikel li { margin-bottom: .35rem; }
.artikel li::marker { color: var(--rot); font-weight: 700; }
/* Textlinks im Artikel; Knöpfe bleiben die Knopf-Komponente */
.artikel a:not(.knopf) { text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .3em; transition: color .15s; }
.artikel a:not(.knopf):hover { color: var(--rot); }
/* Hervorhebung: gleicher Stil wie der Infokasten, mit Text und wahlweise Titel */
.artikel blockquote { margin: 1.75rem 0; padding: 1.5rem 1.75rem; border-radius: var(--radius-klein); background: #fff; box-shadow: var(--schatten); color: var(--tinte); font-size: 1.05rem; line-height: 1.55; }
.artikel blockquote h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.artikel blockquote p { margin: 0; color: var(--tinte); }
.artikel > :last-child { margin-bottom: 0; }
.artikel figure { margin: 2rem 0; }
.artikel figure .rahmen { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 16 / 9; }
.artikel figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artikel figcaption { margin-top: .6rem; font-size: .9rem; color: var(--leise); }
/* Infokasten: hervorgehobene Angaben wie Zeiten, Adresse, Telefon */
.artikel .kasten { margin: 1.75rem 0; padding: 1.5rem 1.75rem; border-radius: var(--radius-klein); background: #fff; box-shadow: var(--schatten); }
.artikel .kasten h3 { margin: 0 0 .9rem; font-size: 1.05rem; }
.artikel .kasten dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.5rem; }
.artikel .kasten dt { color: var(--leise); }
.artikel .kasten dd { margin: 0; color: var(--tinte); font-weight: 600; }
.artikel .kasten .knoepfe { margin-top: 1.25rem; }
/* Zwei Bilder nebeneinander */
.artikel .bildpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.artikel .bildpaar .rahmen { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.artikel .bildpaar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artikel .teilen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1.5px solid var(--sand); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; font-size: .95rem; color: var(--leise); }
@media (max-width: 760px) {
  .artikel .bildpaar { grid-template-columns: 1fr; }
  .artikel .kasten dl { grid-template-columns: 1fr; gap: .15rem; }
  .artikel .kasten dd { margin-bottom: .6rem; }
}

/* Meldungsseite: Artikel links, rechts eine schmale Spalte mit Kontaktkarte */
.meldung-seite { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem 4rem; align-items: start; }
/* Einstieg der Meldungsseite: Text so breit wie die Lesespalte darunter (Gesamtbreite minus Seitenleiste minus Lücke) */
.hero-meldung .einstieg.ohne-bild { grid-template-columns: minmax(0, calc(100% - 24rem)); }
.hero-meldung .einstieg .lies { max-width: none; }
@media (max-width: 1100px) { .hero-meldung .einstieg.ohne-bild { grid-template-columns: minmax(0, 46rem); } }
.meldung-seite aside { position: sticky; top: 7.5rem; }
@media (max-width: 1100px) { .meldung-seite { grid-template-columns: 1fr; } .meldung-seite aside { position: static; } }

/* Archivliste (alle Meldungen) */
.archiv { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.archiv a.karte.klick { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; height: auto; padding: 1.1rem 1.5rem; text-decoration: none; }
.archiv a.karte.klick .weiter { margin-top: 0; }
.archiv time { font-weight: 700; color: var(--rot); font-size: .95rem; white-space: nowrap; }
.archiv h3 { margin: 0; font-size: 1.1rem; }
.archiv .weiter { white-space: nowrap; }

/* Dokumente (Downloads) */
.dokumente { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.dokumente a.karte.klick { display: flex; flex-direction: row; align-items: center; gap: 1rem; height: auto; padding: 1rem 1.25rem; text-decoration: none; }
.dokumente .ikon { width: 2.6rem; height: 2.6rem; flex: none; }
.dokumente b { display: block; }
.dokumente span { display: block; font-size: .9rem; color: var(--leise); }

/* Hinweisleiste über dem Kopf (Urlaub, Notdienst, Vertretung) */
.hinweisleiste { background: var(--tinte); color: #fff; font-size: .95rem; }
.hinweisleiste .breite { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding-block: .7rem; }
.hinweisleiste .etikett { display: inline-flex; padding: .2rem .7rem; border-radius: 999px; background: var(--rot); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.hinweisleiste a { color: #fff; }

/* Bild und Text (allgemeiner Abschnitt) */
.bildtext .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem 4rem; align-items: center; }
.bildtext .rahmen { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.bildtext .rahmen img { width: 100%; height: 100%; object-fit: cover; }
.bildtext .text p { color: var(--leise); }
.bildtext.gespiegelt .rahmen { order: 2; }

@media (max-width: 1100px) {
  .personen, .zahlen { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfahrt .zwei, .bildtext .zwei { grid-template-columns: 1fr; }
  .bildtext.gespiegelt .rahmen { order: 0; }
  .archiv a.karte.klick { grid-template-columns: 1fr; gap: .35rem; }
}
@media (max-width: 760px) {
  .formular .zeile { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .galerie li:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* ============ Bewegung ============ */
/* 1 Erscheinen beim Scrollen: das Skript vergibt .erscheint, beim Sichtbarwerden .da, danach nimmt es beide Klassen wieder weg */
.erscheint { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.erscheint.da { opacity: 1; transform: none; }
/* 2 Aufklappen weicher: Menüs rutschen heran, FAQ-Antworten fahren auf */
@keyframes einblenden { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.navi details[open] div, .sprache[open] div, .menue[open] div { animation: einblenden .16s var(--ease-out); }
.navi details div { transform-origin: top left; }
.sprache div, .menue div { transform-origin: top right; }
@keyframes aufklappen { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.fragen .antwort { display: grid; grid-template-rows: 1fr; }
.fragen .antwort > p { min-height: 0; overflow: hidden; }
.fragen details[open] .antwort { animation: aufklappen .25s var(--ease-out); }
/* 3 Der Einstieg atmet: die Farbform verändert langsam ihre Kontur, der Zahn schwebt */
@keyframes atmen {
  0% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
  50% { border-radius: 46% 54% 42% 58% / 56% 44% 58% 44%; }
  100% { border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%; }
}
@keyframes schweben { from { translate: 0 0; } to { translate: 0 -8px; } }
.blob.farbe { animation: atmen 14s ease-in-out infinite alternate; }
.buehne .ikon { animation: schweben 5s ease-in-out infinite alternate; }
/* 4 Seitenwechsel: kurzes Überblenden, wo der Browser es kann */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
/* Schwebende Knöpfe kommen beim Laden von unten */
@keyframes hoch { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
.schwebend { animation: hoch .4s var(--ease-out) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .erscheint { transform: none; transition: opacity .3s ease; }
  .knopf:hover, .knopf:active, .wa:hover, .wa:active, .karte.klick:hover, .karte.klick:active, .pfeil:active, .feld:hover .bild img { transform: none; }
  .collage .foto img { transition: opacity .6s ease; filter: none; }
  .blob.farbe, .buehne .ikon, .schwebend, .navi details[open] div, .sprache[open] div, .menue[open] div, .fragen details[open] .antwort { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}