/* zahnarzt-hohenberg.de — Nachbau ohne WordPress/Divi (designernils, September 2026).
   Farben, Schriften und Aufbau wie das Original, aber auf einem System statt auf
   Einzelwerten (Überarbeitung 25.09.2026 nach Nils: Komposition, Typo, Responsiveness):
   · eine Typo-Skala, die fließend mit der Breite wächst (clamp), Fließtext 17 px,
     nichts Lesbares unter 15 px, Überschriften ausgeglichen umbrochen
   · ein Abstandsraster (--s-1 … --s-7), ein Abschnittsrhythmus (--abschnitt)
   · Textspalten höchstens ~65 Zeichen
   · Umbrüche dort, wo der Inhalt nicht mehr passt (600 / 768 / 900 / 1100 px)
   Barrierearm: Fokusrahmen 3 px, Kontraste ≥ 4,5:1, Bewegung nur ohne „reduzieren“. */

@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(schrift/lato-v24-latin-regular.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(schrift/lato-v24-latin-700.woff2) format("woff2"); }
@font-face { font-family: "Zen Old Mincho"; font-style: normal; font-weight: 900; font-display: swap; src: url(schrift/zen-old-mincho-v12-latin-900.woff2) format("woff2"); }

:root {
  --blau: #0E3C7F;
  --blau-tief: #0A2E63;
  --hellblau: #C9DEFD;
  --beige: #FFEDCA;
  --beige-tief: #FFE2A8;
  --weiss: #F8F9FF;
  --text: #2F4858;
  --leitblau: #283B6A;
  --ueberschrift: "Zen Old Mincho", Georgia, "Times New Roman", serif;
  --schrift: Lato, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typo-Skala: fließend zwischen 375 und 1440 px Fensterbreite */
  --t-hero: clamp(2.5rem, 1.62rem + 3.75vw, 5rem);        /* 40 → 80 */
  --t-h1: clamp(2.125rem, 1.8rem + 1.4vw, 3rem);           /* 34 → 48 */
  --t-h2: clamp(1.625rem, 1.49rem + .56vw, 2rem);          /* 26 → 32 */
  --t-h3: clamp(1.25rem, 1.16rem + .38vw, 1.5rem);         /* 20 → 24 */
  --t-h4: 1.1875rem;                                       /* 19 */
  --t-lead: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);   /* 18 → 21 */
  --t-text: 1.0625rem;                                     /* 17 */
  --t-klein: .9375rem;                                     /* 15 */

  /* Abstandsraster */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --abschnitt: clamp(64px, 3rem + 5vw, 120px);

  --breit: 1270px;   /* Inhaltszeilen, 85 px Rand bei 1440 wie im Original */
  --eng: 1170px;     /* Kopf und Fuß, 135 px Rand bei 1440 */
  --rand: clamp(20px, 5vw, 48px);
  --mass: 34em;      /* ≈ 62–68 Zeichen Lato bei 17 px */
  --absatz: 1.4em;   /* deutlich größer als der Zeilenabstand, damit Absätze sich lösen */
  --radius: 15px;
  --kurve: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-2); }
body { margin: 0; font: 400 var(--t-text)/1.6 var(--schrift); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
/* Fotos bekommen eine feine Kante, damit helle Bildränder nicht in die Fläche laufen */
.anna__bild img, .faq__bild img, .team-karte img, .galerie img, #vorstellung img, .team__bild, .philosophie__bild { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }
p { margin: 0 0 var(--absatz); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ueberschrift); font-weight: 900; color: var(--blau); text-wrap: balance; hyphens: manual; }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h4 { font-size: var(--t-h4); line-height: 1.35; }
strong { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.fuss :focus-visible, .karte-info--dunkel :focus-visible, .band :focus-visible, .kachel:focus-visible { outline-color: var(--beige); }
.symbol { width: 1em; height: 1em; flex: none; }
.text { max-width: var(--mass); text-wrap: pretty; }

.zeile { width: min(var(--breit), 100% - 2 * var(--rand)); margin-inline: auto; }
.zeile--eng { width: min(var(--eng), 100% - 2 * var(--rand)); margin-inline: auto; }

.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--blau); color: #fff; font-weight: 700; border-radius: 8px; text-decoration: none; }
.sprung:focus { top: 12px; }

/* ── Knöpfe ─────────────────────────────────────────────────────── */
/* Zwei Stufen, nach better-colors „eine Aktion gefüllt“ und better-ui:
   · .knopf        Hauptaktion (Termin, Senden): gefüllt, Blau auf hellem Grund,
                   Beige auf blauem Grund, mit Lichtkante oben und weichem Schatten
   · .knopf--zwei  Nebenaktion (weiterlesen, anrufen): Beige wie der Kopf, blauer Schattenring
                   statt Rahmen (nimmt keinen Platz, passt auf jeden Grund)
   Links, die weiterführen, tragen einen Pfeil; auf der Pfeilseite ist der
   Innenabstand 2 px kleiner (optischer Ausgleich). Pfeil 2,5 px wie die fette Schrift. */
:root {
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --knopf-schatten: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(14, 32, 77, .18), 0 4px 12px -2px rgba(14, 32, 77, .22);
  --knopf-schatten-hover: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(14, 32, 77, .18), 0 8px 20px -4px rgba(14, 32, 77, .28);
  --knopf-ring: inset 0 0 0 1.5px var(--blau), 0 1px 2px rgba(14, 32, 77, .08);
  --knopf-ring-hover: inset 0 0 0 2px var(--blau), 0 2px 6px rgba(14, 32, 77, .12);
}
.knopf { --knopf-x: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px var(--knopf-x); border: 0; border-radius: 14px; font: 700 clamp(1rem, .95rem + .25vw, 1.125rem)/1.35 var(--schrift); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; background: var(--blau); color: #fff; box-shadow: var(--knopf-schatten); transition-property: background-color, box-shadow, transform; transition-duration: .16s; transition-timing-function: var(--kurve); }
.band .knopf, .fuss .knopf, .karte-info--dunkel .knopf { background: var(--beige); color: var(--blau); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .2), 0 4px 12px -2px rgba(0, 0, 0, .25); }
.knopf--zwei, .band .knopf--zwei { background: var(--beige); color: var(--blau); box-shadow: var(--knopf-ring); }
a.knopf:not([href^="tel"]):not(.kopf__termin-kurz) { padding-inline-end: calc(var(--knopf-x) - 2px); }
a.knopf:not([href^="tel"]):not(.kopf__termin-kurz)::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; transition: transform .16s var(--kurve); }
.knopf:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--blau-tief); box-shadow: var(--knopf-schatten-hover); }
  .band .knopf:hover, .fuss .knopf:hover, .karte-info--dunkel .knopf:hover { background: var(--beige-tief); }
  .knopf--zwei:hover, .band .knopf--zwei:hover { background: var(--beige-tief); box-shadow: var(--knopf-ring-hover); }
  a.knopf:hover::after { transform: translateX(3px); }
}
@media (max-width: 380px) { .knopf { --knopf-x: 22px; white-space: normal; } }

/* ── Meldung (aus der Verwaltung) ───────────────────────────────── */
/* Schwebt unten mittig über der Seite, bis man sie wegklickt (hb.js). Jede Art
   hat eine Farbe, die sonst nirgends auf der Seite vorkommt, und nennt sich
   selbst („Praxis geschlossen:“). Sie kommt kurz nach dem Laden herein, damit
   eine schon weggeklickte Meldung nicht aufblitzt. */
.meldung { --m-grund: #115E59; --m-text: #fff; position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); width: min(760px, 100% - 2 * var(--s-2)); margin-inline: auto; background: var(--m-grund); color: var(--m-text); border-radius: 18px; box-shadow: 0 2px 6px rgba(10, 20, 40, .16), 0 18px 48px rgba(10, 20, 40, .28); font-size: var(--t-text); line-height: 1.55; animation: meldung-rein .5s var(--kurve) .5s both; }
.meldung--geschlossen { --m-grund: #EDA83A; --m-text: #2B1B00; }
.meldung--wichtig { --m-grund: #8A1C1C; --m-text: #fff; }
.meldung__innen { display: flex; gap: 14px; align-items: flex-start; padding: var(--s-2) var(--s-1) var(--s-2) var(--s-3); }
.meldung__innen > .symbol { width: 26px; height: 26px; margin-top: 1px; }
.meldung p { margin: 0; flex: 1; padding-block: 1px; }
.meldung__art { font-weight: 700; }
.meldung a { font-weight: 700; text-decoration-thickness: 2px; white-space: nowrap; }
.meldung :focus-visible { outline-color: currentColor; }
.meldung__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px 0 -10px 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s var(--kurve); }
.meldung__zu .symbol { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .meldung__zu:hover { background: color-mix(in srgb, currentColor 14%, transparent); } }
.meldung__zu:active { transform: scale(.96); }
@media (min-width: 900px) { .meldung { font-size: var(--t-lead); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); } .meldung__innen { padding: 20px var(--s-2) 20px var(--s-4); align-items: center; } .meldung__zu { margin-block: -8px; } }
.meldung--geht { animation: meldung-raus .25s ease-out both; }
@keyframes meldung-rein { from { opacity: 0; transform: translateY(24px); } }
@keyframes meldung-raus { to { opacity: 0; transform: translateY(8px); } }
/* Damit sie am Seitenende nichts dauerhaft verdeckt: Platz unter dem Fuß */
body:has(.meldung:not([hidden])) .fuss__unten { padding-bottom: 150px; }
@media (min-width: 900px) { body:has(.meldung:not([hidden])) .fuss__unten { padding-bottom: 130px; } }

/* ── Kopf ───────────────────────────────────────────────────────── */
.oben { background: var(--beige); border-bottom: 1px solid rgba(14, 60, 127, .2); display: none; }
.oben .zeile--eng { display: flex; justify-content: flex-end; gap: var(--s-4); padding: 10px 0; font: 700 var(--t-klein)/1.5 var(--schrift); color: var(--blau); }
.oben a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.oben a:hover { text-decoration: underline; }
.oben .symbol { width: 18px; height: 18px; }
@media (min-width: 900px) { .oben { display: block; } }

header { position: relative; z-index: 50; } /* view-transition-name macht den Kopf zum Stapelkontext; ohne Ebene malt der animierte Hero über das Handy-Menü */
.kopf { background: var(--beige); position: relative; }
.kopf .zeile--eng { display: flex; align-items: center; gap: var(--s-3); padding: 14px 0; }
.kopf__logo { margin-right: auto; }
.kopf__logo img { width: clamp(150px, 120px + 7vw, 220px); }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; }
.kopf__nav a { display: block; text-decoration: none; font: 700 var(--t-klein)/1.3 var(--schrift); color: var(--text); }
.kopf__nav a:hover { color: var(--blau); text-decoration: underline; }
.kopf__nav a[aria-current="page"] { color: var(--blau); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.kopf__rechts { display: flex; align-items: center; gap: 12px; } /* better-layout: 12 px zwischen gefüllten Knöpfen */
.kopf__termin-kurz { --knopf-x: 14px; min-height: 44px; padding-block: 8px; border-radius: 10px; font-size: var(--t-klein); }
.kopf__termin { display: none; }
/* Anrufen auf Handy und Tablet: dasselbe Symbol wie die Kopfzeile am Rechner */
.kopf__anruf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--blau); --symbol-innen: var(--beige); transition: color .15s var(--kurve), transform .16s var(--kurve); }
.kopf__anruf .symbol { width: 40px; height: 40px; }
.kopf__anruf-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* sichtbar nur im zweizeiligen Kopf */
.kopf__anruf:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .kopf__anruf:hover { color: var(--blau-tief); } }
.kopf__knopf { margin-inline-start: 12px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--blau); cursor: pointer; }
.kopf__knopf .symbol { width: 28px; height: 28px; }
.kopf__knopf .zu { display: none; }
@media (max-width: 899px) { .js .kopf__knopf[hidden] { display: inline-flex; } } /* schon vor hb.js sichtbar, damit der Kopf nicht springt */
.kopf__knopf[aria-expanded="true"] .auf { display: none; }
.kopf__knopf[aria-expanded="true"] .zu { display: block; }

@media (max-width: 899px) {
  /* Ohne JavaScript steht das Menü unter dem Logo; mit JavaScript klappt es auf. */
  .kopf .zeile--eng { flex-wrap: wrap; }
  .kopf__nav { order: 3; width: 100%; }
  .kopf__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
  .kopf__nav a { padding: 12px 0; font-size: 1.0625rem; }
  .js .kopf .zeile--eng { flex-wrap: nowrap; gap: var(--s-2); }
  .js .kopf__nav { order: 0; width: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: var(--beige); border-top: 1px solid rgba(14, 60, 127, .2); box-shadow: 0 16px 24px rgba(14, 32, 77, .12); display: none; }
  .js .kopf__nav.offen { display: block; }
  .js .kopf__nav ul { display: block; width: min(var(--eng), 100% - 2 * var(--rand)); margin-inline: auto; padding: var(--s-1) 0 var(--s-2); }
  .js .kopf__nav a { padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid rgba(14, 60, 127, .1); }
  .js .kopf__nav li:last-child a { border-bottom: 0; }
}
@media (min-width: 900px) {
  .kopf .zeile--eng { padding: 24px 0; gap: var(--s-5); }
  .kopf__knopf, .kopf__termin-kurz, .kopf__anruf { display: none; }
  .kopf__nav ul { display: flex; gap: var(--s-4); }
  .kopf__nav a { padding: 8px 0; }
  .kopf__termin { display: inline-flex; }
}
.kopf__termin-kurz { white-space: nowrap; gap: .28em; }
/* Handy unter 30rem: In einer Zeile blieben bei 390 px nur 4 px zwischen Anruf, Termin und Menü
   (better-layout: 12 px zwischen gefüllten Knöpfen, 24 px um den randlosen Menü-Knopf).
   Deshalb oben Logo und Menü, darunter Anrufen (Nebenaktion wie .knopf--zwei) und Termin gleich breit. */
@media (max-width: 29.99rem) {
  .js .kopf .zeile--eng { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 12px 0 16px; }
  .js .kopf__rechts { display: contents; }
  .js .kopf__logo { grid-area: 1 / 1; margin: 0; }
  .js .kopf__knopf { grid-area: 1 / 2; justify-self: end; margin: 0 -10px 0 0; } /* Symbol bündig mit der Knopfkante darunter */
  .js .kopf__anruf, .js .kopf__termin-kurz { grid-row: 2; width: auto; min-height: 48px; border-radius: 10px; }
  .js .kopf__anruf { grid-column: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; padding: 8px 12px; background: var(--beige); box-shadow: var(--knopf-ring); font: 700 var(--t-klein)/1.35 var(--schrift); text-decoration: none; transition-property: background-color, box-shadow, transform; transition-duration: .16s; transition-timing-function: var(--kurve); }
  .js .kopf__anruf .symbol { width: 24px; height: 24px; }
  .js .kopf__anruf-wort { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .js .kopf__termin-kurz { grid-column: 2; --knopf-x: 12px; }
}
@media (max-width: 29.99rem) and (hover: hover) and (pointer: fine) { .js .kopf__anruf:hover { background: var(--beige-tief); box-shadow: var(--knopf-ring-hover); } }

/* ── Abschnitte ─────────────────────────────────────────────────── */
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--hell { background: var(--weiss); }
.abschnitt--blau { background: var(--hellblau); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * .6); }
.abschnitt h2 { margin-bottom: var(--s-3); }
.abschnitt--eng + .abschnitt--eng { padding-top: 0; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 768px) {
  .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(var(--s-5), 5vw, 70px); }
  .zwei--oben { align-items: start; }
  .zwei--mitte { align-items: center; }
}

/* ── Startseite: Eröffnung ──────────────────────────────────────── */
.hero { background: linear-gradient(180deg, rgba(248, 249, 255, .88) 0%, rgba(248, 249, 255, .45) 100%), url(bilder/start-hero-800.webp) 62% center / cover no-repeat; padding: var(--abschnitt) 0 calc(var(--abschnitt) + 150px); }
@media (min-width: 768px) { .hero { background-image: linear-gradient(180deg, rgba(248, 249, 255, .82) 0%, rgba(248, 249, 255, .28) 100%), url(bilder/start-hero-1200.webp); background-position: center; } }
@media (min-width: 1100px) { .hero { padding-bottom: calc(var(--abschnitt) + 210px); } }
.hero .zeile { color: var(--blau); }
.hero__marke { font: 700 clamp(1.25rem, 1.1rem + .7vw, 1.75rem)/1.3 var(--schrift); margin: 0 0 var(--s-3); }
.hero h1 { font-size: var(--t-hero); line-height: 1.06; max-width: 13.5em; margin-bottom: var(--s-3); }
.hero__lead { font-size: var(--t-lead); line-height: 1.6; max-width: 36em; margin: 0; }

/* Drei Karten: Termin, Adresse, Öffnungszeiten */
.infokarten { background: var(--weiss); display: flow-root; }
.infokarten .zeile { display: grid; border-radius: var(--radius); overflow: hidden; margin-top: -150px; position: relative; box-shadow: 0 8px 60px rgba(14, 32, 77, .1); }
@media (min-width: 1100px) { .infokarten .zeile { margin-top: -210px; } }
.karte-info { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-4) var(--s-3); background: var(--hellblau); color: var(--text); }
.karte-info--dunkel { background: var(--blau); color: var(--weiss); }
.karte-info > .symbol { width: 48px; height: 48px; color: var(--blau); --symbol-innen: var(--hellblau); }
.karte-info--dunkel > .symbol { color: var(--weiss); --symbol-innen: var(--blau); }
.karte-info h2 { align-self: stretch; font-size: var(--t-h3); line-height: 1.3; color: inherit; margin: var(--s-3) 0 var(--s-1); padding-top: var(--s-3); border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.karte-info p, .karte-info address { font-size: var(--t-lead); line-height: 1.5; font-style: normal; margin: 0 0 var(--s-2); }
.karte-info a:not(.knopf) { text-decoration: none; }
.karte-info a:not(.knopf):hover { text-decoration: underline; }
.karte-info .knopf { margin-top: auto; }
.zeiten { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: var(--s-4); row-gap: 2px; margin: 0; font-size: var(--t-lead); line-height: 1.5; }
.zeiten dt, .zeiten dd { margin: 0; white-space: nowrap; }
.zeiten dd { font-variant-numeric: tabular-nums; }
@media (min-width: 640px) and (max-width: 899px) {
  .infokarten .zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .karte-info { padding: var(--s-5) var(--s-4); }
  /* Die dritte Karte liegt quer: links Symbol und Titel, rechts die Zeiten auf
     der Höhe des Titels. Eine Linie trennt sie von der gleichfarbigen Karte darüber. */
  .karte-info:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: start; box-shadow: inset 0 1px 0 rgba(14, 60, 127, .18); }
  .karte-info:last-child > .symbol { grid-column: 1; grid-row: 1; }
  .karte-info:last-child h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .karte-info:last-child .zeiten { grid-column: 2; grid-row: 2; padding-top: calc(var(--s-3) + 1px); margin-top: var(--s-3); border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
}
@media (min-width: 900px) {
  .infokarten .zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karte-info { padding: var(--s-5) clamp(24px, 3.4vw, 50px); }
  .karte-info p, .karte-info address, .zeiten { font-size: clamp(1.0625rem, .8rem + .45vw, 1.25rem); }
  .zeiten { column-gap: var(--s-3); }
}
@media (min-width: 1100px) { .karte-info { padding-block: 60px; } }

/* Anna */
.anna__zitat { margin: 0 0 var(--s-3); padding-left: var(--s-4); border-left: 3px solid var(--beige-tief); font-weight: 700; color: var(--leitblau); max-width: 34em; }
.anna__text { padding-left: calc(var(--s-4) + 3px); max-width: 38em; }
.anna__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-left: calc(var(--s-4) + 3px); margin-top: var(--s-4); }
.anna__name { margin: 0; line-height: 1.3; }
.anna__name strong { display: block; font: 900 var(--t-h3)/1.3 var(--ueberschrift); color: var(--blau); }
.anna__name span { font-size: var(--t-klein); }
.anna__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 22px; }
@media (max-width: 767px) { .anna__bild { max-width: 420px; } }
@media (min-width: 768px) { .anna .zwei { grid-template-columns: 3fr 2fr; } }
@media (min-width: 1100px) { .anna { padding-bottom: 0; } .anna .zwei { grid-template-columns: 762fr 508fr; column-gap: 0; } .anna__bild { margin-bottom: -72px; position: relative; z-index: 1; } }

/* Leistungen (Startseite) */
.leistungen-start .zwei { margin-bottom: var(--s-6); }
.leistungen-start h2 { max-width: 18em; }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } }
@media (min-width: 1100px) { .kacheln { gap: 35px 38px; } }
.kachel { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); height: 100%; min-height: 150px; padding: var(--s-3) var(--s-3) var(--s-3); background: var(--blau); color: var(--weiss); border-radius: 10px; box-shadow: 0 5px 40px rgba(14, 32, 77, .08); text-decoration: none; font: 700 clamp(1rem, .93rem + .3vw, 1.125rem)/1.35 var(--schrift); transition: background-color .16s var(--kurve), transform .16s var(--kurve); }
@media (min-width: 1100px) { .kachel { min-height: 190px; padding: 35px 40px 32px; } }
.kachel .symbol { width: 48px; height: 48px; }
@media (max-width: 400px) { .kachel { padding: var(--s-2); min-height: 132px; } .kachel .symbol { width: 40px; height: 40px; } }
.kachel span { hyphens: manual; }
@media (hover: hover) and (pointer: fine) { .kachel:hover { background: var(--blau-tief); transform: translateY(-2px); } }
.fragen-cta { text-align: center; padding-top: var(--s-6); }
.fragen-cta h2 { font-size: var(--t-h3); line-height: 1.3; margin: 0 auto var(--s-2); max-width: 26em; }
.fragen-cta p { max-width: 38em; margin: 0 auto var(--s-3); }

/* FAQ */
.faq h2 { color: #011954; }
.faq__einleitung { margin-bottom: var(--s-4); max-width: var(--mass); }
.faq details { border-bottom: 1px solid rgba(47, 72, 88, .2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: 18px 0; cursor: pointer; list-style: none; font: 700 var(--t-lead)/1.4 var(--schrift); color: #011954; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .symbol { width: 22px; height: 22px; transition: transform .3s var(--kurve); }
.faq details[open] summary .symbol { transform: rotate(45deg); }
.faq details.schliesst summary .symbol { transform: none; }
.faq__antwort { overflow: hidden; }
.faq details p { margin: 0; padding-bottom: var(--s-3); max-width: var(--mass); }
.faq__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 768px) { .faq .zwei { align-items: center; } }
@media (max-width: 767px) { .faq__bild { max-width: 420px; } }

/* ── Unterseiten: blaue Eröffnung ──────────────────────────────── */
.band { background: var(--blau); color: var(--weiss); }
.band .zeile { display: grid; }
.band__text { padding: var(--s-6) 0 var(--s-5); align-self: center; }
.band h1 { font-size: var(--t-h1); line-height: 1.1; color: var(--weiss); margin-bottom: var(--s-3); max-width: 14em; }
.band p { font-size: var(--t-lead); line-height: 1.6; max-width: 34em; }
.band .knopf { margin-top: var(--s-3); }
.band__bild { overflow: hidden; }
.band__bild img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 899px) { .band__bild { margin-inline: calc(-1 * var(--rand)); } }
@media (min-width: 900px) {
  /* Das Foto läuft bis an den rechten Fensterrand (im Original endete es davor). */
  .band { overflow-x: clip; }
  .band .zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(var(--s-5), 5vw, 70px); }
  .band__text { padding: var(--s-6) 0; }
  .band__bild { position: relative; min-height: clamp(420px, 38vw, 600px); margin-inline-end: calc((min(var(--breit), 100vw - 2 * var(--rand)) - 100vw) / 2); }
  .band__bild img { position: absolute; inset: 0; aspect-ratio: auto; }
}

/* Sprungliste („Unsere Philosophie →“) */
.sprungliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sprungliste a { display: inline-flex; align-items: center; gap: var(--s-1); padding: 6px 0; text-decoration: none; font-weight: 700; color: var(--blau); }
.sprungliste a:hover { text-decoration: underline; }
.sprungliste .symbol { width: 18px; height: 18px; transition: transform .16s var(--kurve); }
@media (hover: hover) and (pointer: fine) { .sprungliste a:hover .symbol { transform: translateX(3px); } }

/* Haken-Liste */
.haken { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 12px; }
.haken li { display: flex; gap: 12px; align-items: flex-start; color: var(--blau); font-weight: 700; line-height: 1.5; }
.haken .symbol { width: 24px; height: 24px; color: var(--blau); }

/* Unsere Praxis */
#vorstellung .text p, .philosophie__text p { max-width: var(--mass); }
#vorstellung img, .team__bild, .philosophie__bild { border-radius: var(--radius); }
.philosophie__bild { margin-top: var(--s-4); }
@media (min-width: 900px) { .philosophie { grid-template-columns: 734fr 466fr; } }
@media (max-width: 767px) { #vorstellung img { max-width: min(420px, 100%); } }

/* Team-Karten */
.team-karten { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
@media (min-width: 1100px) { .team-karten { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) 70px; } }
.team-karte { background: var(--hellblau); border-radius: var(--radius); padding: var(--s-4); }
.team-karte img { width: min(208px, 100%); aspect-ratio: 2 / 3; object-fit: cover; object-position: center 15%; border-radius: var(--radius); margin: 0 auto var(--s-3); }
.team-karte h3 { font-size: var(--t-h4); margin-bottom: var(--s-1); }
.team-karte ul { margin: 0; padding-left: 1.1em; font-size: var(--t-klein); line-height: 1.6; }
.team-karte li + li { margin-top: 4px; }

/* Ausstattung */
.ausstattung { background: var(--weiss); border-radius: var(--radius); padding: var(--s-4) var(--s-3); box-shadow: 0 2px 20px rgba(14, 32, 77, .08); }
@media (min-width: 768px) { .ausstattung { padding: var(--s-5); } }
.ausstattung__kopf { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.ausstattung__kopf h2 { margin: 0; }
@media (min-width: 900px) { .ausstattung__kopf { grid-template-columns: 688fr 437fr; column-gap: var(--s-6); align-items: end; } }
.ausstattung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5) var(--s-6); }
@media (min-width: 640px) { .ausstattung__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ausstattung__liste .symbol { width: 44px; height: 44px; color: var(--blau); margin-bottom: var(--s-2); }
.ausstattung__liste h3 { font-size: var(--t-h4); margin-bottom: var(--s-1); }
.galerie { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.galerie img { width: 100%; aspect-ratio: 265 / 342; object-fit: cover; border-radius: 10px; }

/* Leistungsseite: Überblick als Kacheln wie auf der Startseite, darunter weiße
   Karten auf hellblauer Fläche, das Symbol in einer blauen Marke */
/* Kein falscher Boden: Die hellblaue Fläche beginnt schon hinter der zweiten
   Kachelreihe, der Blick läuft ohne Kante in die Karten weiter. */
.ueberblick { padding-bottom: 0; background: linear-gradient(to bottom, #fff calc(100% - 72px), var(--hellblau) calc(100% - 72px)); }
.leistungen-einzeln { padding-top: var(--s-6); }
.ueberblick h2 { margin-bottom: var(--s-4); }
.ueberblick .kachel { min-height: 0; }
@media (min-width: 1100px) { .ueberblick .kachel { min-height: 150px; padding: 28px 32px; } }
.leistungen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .leistungen-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); } }
@media (min-width: 1100px) { .leistungen-liste { gap: var(--s-5); } }
.leistung { background: #fff; border-radius: 20px; padding: var(--s-4) var(--s-3); height: 100%; scroll-margin-top: var(--s-3); box-shadow: 0 1px 2px rgba(14, 32, 77, .05), 0 10px 32px rgba(14, 32, 77, .07); }
@media (min-width: 480px) { .leistung { padding: var(--s-4); } }
@media (min-width: 1100px) { .leistung { padding: var(--s-5); } }
.leistung__marke { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--blau); color: #fff; margin-bottom: var(--s-3); }
.leistung__marke .symbol { width: 36px; height: 36px; }
.leistung h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.leistung p { max-width: var(--mass); }
.leistung:target { outline: 3px solid var(--blau); outline-offset: 4px; }
.leistungen-einzeln .aufforderung { background: var(--beige); }

/* Beige Aufforderung */
.aufforderung { display: grid; gap: var(--s-3); align-items: center; background: var(--beige); border-radius: var(--radius); padding: var(--s-4) var(--s-3); margin-top: var(--s-6); }
.aufforderung h2 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: var(--s-1); }
@media (min-width: 768px) { .aufforderung { grid-template-columns: 1fr auto; column-gap: var(--s-5); padding: var(--s-4) var(--s-5); } }

/* Kontakt */
.anfahrt h3 { font: 700 var(--t-text)/1.5 var(--schrift); color: var(--blau); margin: var(--s-4) 0 var(--s-1); }
.anfahrt p { max-width: var(--mass); }
.anfahrt__bild { width: 100%; border-radius: var(--radius); outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.anfahrt__seite { display: grid; gap: var(--s-3); align-content: start; }
.visitenkarte { display: flex; gap: var(--s-2); align-items: center; }
.visitenkarte img { width: 84px; height: 84px; border-radius: 50%; }
.visitenkarte p { margin: 0; line-height: 1.35; }
.visitenkarte strong { display: block; font: 900 var(--t-h4)/1.35 var(--ueberschrift); color: var(--blau); }
.visitenkarte span { display: block; font-size: var(--t-klein); }
/* Links der Anfahrtstext, rechts Gebäudefoto und Anna, beim Lesen mitlaufend */
.kontakt-anfahrt .zwei { gap: var(--s-5); }
@media (min-width: 768px) and (max-width: 999px) { .kontakt-anfahrt .zwei { grid-template-columns: minmax(0, 1fr); } .anfahrt__seite { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
@media (min-width: 1000px) {
  .kontakt-anfahrt .zwei { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(var(--s-5), 6vw, 96px); }
  .anfahrt__seite { position: sticky; top: var(--s-4); padding-top: .4em; }
}
.infokarten--kontakt { background: #fff; padding-bottom: var(--s-6); }
.infokarten--kontakt .zeile { margin-top: 0; }

/* Karte (zwei Klicks, OpenStreetMap) */
.karte { position: relative; min-height: 360px; background: #E8ECF3 url(karte/vorschau.webp) center / cover no-repeat; border-radius: var(--radius); overflow: hidden; margin-top: var(--s-6); }
.karte__hinweis { position: absolute; inset: auto var(--s-2) var(--s-2) var(--s-2); max-width: 520px; background: rgba(255, 255, 255, .97); border-radius: 12px; padding: var(--s-3); box-shadow: 0 8px 24px rgba(14, 32, 77, .18); }
.karte__hinweis p { font-size: var(--t-klein); line-height: 1.5; margin: 0 0 var(--s-2); }
.karte__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.karte__hinweis .knopf { --knopf-x: 22px; min-height: 44px; padding-block: 10px; font-size: 1rem; }
.karte__hinweis a:not(.knopf) { font-size: var(--t-klein); font-weight: 700; color: var(--blau); }
.karte.geladen .karte__hinweis { display: none; }
.karte__leinwand { position: absolute; inset: 0; }
.karte__pin { background: none; border: 0; }

/* Formular: hellblaue Fläche, links die Einleitung, rechts das Formular auf einer weißen Karte */
/* Kein falscher Boden: Überschrift und Kartenkopf stehen noch auf Weiß, die
   hellblaue Fläche steigt erst hinter der Formularkarte auf. */
.kontaktformular { background: #fff; padding-top: 0; overflow-x: clip; }
.kontaktformular__raster { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-6); }
.kontaktformular__raster::before { content: ""; z-index: -1; align-self: stretch; grid-column: 1 / -1; grid-row: 2; margin: 120px calc((100% - 100vw) / 2) calc(-1 * var(--abschnitt)); background: var(--hellblau); }
.kontaktformular__raster > .kontaktformular__kopf { grid-row: 1; grid-column: 1; }
.kontaktformular__raster > .formular { grid-row: 2; grid-column: 1; }
@media (min-width: 1000px) { .kontaktformular__raster::before { grid-row: 1; margin-top: 300px; } .kontaktformular__raster > .formular { grid-row: 1; grid-column: 2; } .kontaktformular__raster > .kontaktformular__kopf { grid-column: 1; } }
.kontaktformular__kopf p { max-width: 34em; }
@media (min-width: 1000px) { .kontaktformular__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .kontaktformular__kopf { padding-top: var(--s-2); } }
.formular { background: #fff; border-radius: 20px; padding: var(--s-4) var(--s-3); box-shadow: 0 1px 2px rgba(14, 32, 77, .06), 0 12px 40px rgba(14, 32, 77, .1); display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .formular { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-5); } .formular .voll { grid-column: 1 / -1; } }
.formular label { display: block; font-weight: 700; font-size: var(--t-klein); margin-bottom: 6px; color: var(--text); }
.formular .optional { font-weight: 400; color: #55697A; }
.formular input, .formular textarea { width: 100%; font: 400 var(--t-text)/1.5 var(--schrift); color: var(--text); background: var(--weiss); border: 1.5px solid #6F7F96; border-radius: 10px; padding: 12px 14px; min-height: 52px; transition: border-color .16s var(--kurve), background-color .16s var(--kurve); }
@media (hover: hover) and (pointer: fine) { .formular input:hover, .formular textarea:hover { border-color: var(--blau); } }
.formular input:focus, .formular textarea:focus { background: #fff; }
.formular textarea { min-height: 180px; resize: vertical; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.formular [aria-invalid="true"] { border-color: #A3202F; }
.formular .fehler { color: #A3202F; font-size: var(--t-klein); font-weight: 700; margin: 6px 0 0; }
.formular .fehler:empty { display: none; }
.formular .hinweis { font-size: var(--t-klein); line-height: 1.6; margin: 0; padding: var(--s-2); background: var(--weiss); border-radius: 10px; color: var(--text); }
.formular .hinweis a { color: var(--blau); font-weight: 700; }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__stand { font-weight: 700; margin: var(--s-2) 0 0; }
.formular__stand:empty { display: none; }

/* Rechtstexte, Danke */
.recht { max-width: 800px; padding-block: var(--abschnitt); }
.recht h1 { font-size: var(--t-h1); line-height: 1.15; margin-bottom: var(--s-5); }
.recht h2 { font-size: var(--t-h2); margin: var(--s-6) 0 var(--s-3); }
.recht h3 { font-size: var(--t-h3); margin: var(--s-5) 0 var(--s-2); }
.recht h4 { font: 700 var(--t-text)/1.5 var(--schrift); color: var(--blau); margin: var(--s-4) 0 var(--s-1); }
.recht p, .recht li { overflow-wrap: break-word; }
.recht a { color: var(--blau); }
.recht .knopf { margin-top: var(--s-3); }

/* ── Fuß ────────────────────────────────────────────────────────── */
.fuss { background: var(--blau); color: var(--weiss); }
.fuss .zeile--eng { display: grid; gap: var(--s-5) var(--s-4); padding: var(--s-6) 0 var(--s-5); }
@media (min-width: 600px) { .fuss .zeile--eng { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fuss .zeile--eng { grid-template-columns: 1.1fr .8fr 1.1fr 1fr; column-gap: var(--s-5); padding-top: 80px; } }
.fuss__logo img { width: 220px; }
.fuss__titel { font: 700 var(--t-text)/1.4 var(--schrift); margin: var(--s-3) 0 var(--s-2); }
.fuss h2 { font: 700 var(--t-text)/1.4 var(--schrift); color: #fff; margin: 0 0 var(--s-2); }
.fuss p { font-size: var(--t-klein); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-block; padding: 5px 0; text-decoration: none; font-size: var(--t-klein); line-height: 1.45; }
.fuss a:hover { text-decoration: underline; }
.fuss__kontakt a { padding-block: 3px; }
.fuss__kontakt a, .fuss__kontakt p { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 var(--s-1); text-decoration: none; font-size: var(--t-klein); line-height: 1.5; }
.fuss__kontakt .symbol { width: 18px; height: 18px; margin-top: 3px; }
.fuss .knopf { margin-top: var(--s-2); }
.fuss__kontakt .fuss__notdienst { display: block; margin: var(--s-2) 0 0; font-size: var(--t-klein); line-height: 1.5; }
.fuss__kontakt .fuss__notdienst a { display: inline; padding: 0; text-decoration: underline; font-size: inherit; }
.karte-info__notdienst { font-size: var(--t-klein) !important; margin: var(--s-2) 0 0 !important; }
.karte-info .karte-info__notdienst a { text-decoration: underline; font-weight: 700; color: var(--blau); }
.fuss__unten { border-top: 1px solid rgba(248, 249, 255, .2); }
.fuss__unten .zeile--eng { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; font-size: .875rem; }
.fuss__unten p { margin: 0; font-size: .875rem; }
.fuss__unten ul { display: flex; gap: var(--s-3); }
.fuss__unten a { font-size: .875rem; }

/* ── Bewegung: ruhig und kurz, nur ohne „Bewegung reduzieren“ ─────── */
@media (prefers-reduced-motion: no-preference) {
  /* Seitenwechsel: Der Inhalt blendet über, der Kopf bleibt stehen
     (View Transitions; Browser ohne Unterstützung wechseln wie bisher). */
  /* Sprünge innerhalb der Seite gleiten, damit das Auge mitkommt */
  html { scroll-behavior: smooth; }

  @view-transition { navigation: auto; }
  header { view-transition-name: kopf; }
  ::view-transition-group(kopf) { animation: none; }
  ::view-transition-old(root) { animation: vt-raus .2s ease-out both; }
  ::view-transition-new(root) { animation: vt-rein .45s var(--kurve) both; }
  @keyframes vt-raus { to { opacity: 0; } }
  @keyframes vt-rein { from { opacity: 0; transform: translateY(10px); } }

  /* Eröffnung beim Laden: Zeile für Zeile, das Foto setzt sich sanft.
     Reines CSS, läuft also schon beim ersten Bild, ohne auf JavaScript zu warten. */
  .hero__marke, .hero h1, .hero__lead, .band__text > * { animation: rein .8s var(--kurve) both; }
  .hero h1, .band__text > h1 + * { animation-delay: .09s; }
  .hero__lead, .band__text > :nth-child(3) { animation-delay: .18s; }
  .band__text > :nth-child(n+4) { animation-delay: .27s; }
  .infokarten:not(.infokarten--kontakt) .zeile { animation: rein .9s var(--kurve) .3s both; }
  .band__bild img { animation: foto 1.1s var(--kurve) both; }
  .hero { animation: foto-grund 1.2s var(--kurve) both; }
  @keyframes rein { from { opacity: 0; transform: translateY(16px); } }
  @keyframes foto { from { opacity: 0; transform: scale(1.03); } }
  @keyframes foto-grund { from { background-position-y: 46%; } }

  /* Beim Scrollen (hb.js markiert die Blöcke) */
  .js [data-auf] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--kurve), transform .7s var(--kurve); }
  .js [data-auf].da { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Die Meldung erscheint auch dann mit kurzer Verzögerung, nur ohne Bewegung */
@media (prefers-reduced-motion: reduce) { .meldung { animation: meldung-da 0s .5s both !important; } }
@keyframes meldung-da { from { visibility: hidden; } }