/* ==========================================================================
   PFLEGEDIENST LINDENHOF — ambulante Pflege
   Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt,
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler.

   Herkunft
   --------
   Uebersetzt aus dem Claude-Design-Entwurf "Pflegedienst Lindenhof.dc.html"
   nach `docs/regeln/vorlagen.md`. Der Entwurf lud Font Awesome, Poppins und
   Open Sans von fremden Servern und arbeitete mit sc-for, sc-if und
   style-hover — nichts davon laeuft in einem Browser ohne die
   Claude-Design-Umgebung.

   Drei Abweichungen vom Entwurf, alle begruendet:

   1. Poppins ist ersetzt durch Jost. Poppins steht auf der Hausliste der
      Schriften, die generierte Entwuerfe verraten (`_shared/kfz/README.md`),
      und lag ohnehin nicht selbst gehostet vor. Jost ist die naechste
      geometrische Grotesk im Bestand und traegt dieselbe freundliche,
      runde Anmutung.
   2. Font Awesome ist ersetzt durch 20 gezeichnete Symbole aus
      `_shared/pflege/icons.svg.html`. Inline, ohne Abruf.
   3. Zwei Farben sind abgedunkelt, weil sie unter der Lesbarkeitsgrenze
      lagen — siehe unten.

   Farblogik
   ---------
   Marineblau #16395a fuehrt: Ueberschriften, Baender, Fuss, Kontaktkarte.
   Gruen ist die Zuwendungsfarbe und tritt in zwei Staerken auf:
     --green      #6fb241  nur als FLAECHE ohne Text darauf (Kanten, Rahmen,
                           Symbolkreise, das Zahlenband)
     --green-ink  #47772c  fuer alles, was Text ist oder Text traegt
                           (Knoepfe, Links, Augenbrauen)
   Der Entwurf benutzte #6fb241 auch fuer Text und fuer weisse Schrift auf
   gruenem Knopf. Beides sind 2,6:1 und damit unlesbar.

   Gemessene Kontraste (relative Luminanz nach WCAG 2.1):
     --navy      #16395a auf Weiss      11,9:1
     --ink       #55636f auf Weiss       6,2:1
     --muted     #64737f auf Weiss       4,9:1
     --green-ink #47772c auf Weiss       5,3:1   auf --wash 4,9:1
     Weiss auf   --green-ink             5,3:1
     Weiss auf   --navy                 11,9:1
     --on-navy       #c3d3e0 auf navy    7,8:1
     --on-navy-soft  #a9c0d3 auf navy    6,3:1

   Der Entwurf hatte #8fa0ad fuer Kleintext (2,7:1) und #55636f fuer
   Fliesstext. Der Fliesstext bleibt, der Kleinton ist auf #64737f gesetzt.

   Aufbau der Datei
   ----------------
   Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist
   der Ausgangszustand, breitere Fenster bekommen Spalten dazu.
   ========================================================================== */

/* ── Schriften (selbst gehostet, latin-Teilmenge, 73 KB) ───────────────────
   Jost liegt als variable Datei mit wght 400–600 vor (geprueft in halm-2).
   Ueberschriften deshalb mit 600, nicht mit 700.                          */

@font-face {
  font-family: "Jost";
  src: url("../vendor/fonts/jost-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../vendor/fonts/open-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --font-title: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --navy: #16395a;
  --navy-2: #1e4b74;
  --navy-deep: #122f4a;

  --green: #6fb241;      /* nur Flaeche, nie Text */
  --green-ink: #47772c;  /* Text, Knoepfe, Links */
  --green-wash: #f0f7ea;

  --paper: #ffffff;
  --wash: #f3f7f9;
  --wash-2: #e8eef2;

  --line: #e2e9ee;
  --line-strong: #cfd9e1;

  --ink: #55636f;
  --muted: #64737f;

  --on-navy: #c3d3e0;
  --on-navy-soft: #a9c0d3;

  --focus: #16395a;
  --focus-halo: #ffffff;

  --wrap: 1170px;
  --pad: clamp(1rem, 4vw, 1.75rem);
  --notice: 26px;    /* Hoehe der Demo-Hinweisleiste, fix im Markup */
  --quickbar: 58px;  /* Hoehe der Handy-Leiste am unteren Bildrand */
  --radius: 4px;
  --shadow-sm: 0 6px 20px rgb(22 57 90 / .07);
  --shadow-lg: 0 12px 34px rgb(22 57 90 / .13);
}

.is-dark {
  --focus: #ffffff;
  --focus-halo: #122f4a;
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--notice) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--notice);
  padding-bottom: var(--quickbar);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.28;
  margin: 0 0 .6em;
  text-wrap: pretty;
}

h1 { font-size: clamp(1.9rem, 6vw, 3.25rem); line-height: 1.22; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-ink); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

::selection { background: var(--green-ink); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--font-title);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin: 0 0 .85rem;
}

.rule {
  width: 70px;
  height: 3px;
  background: var(--green);
  border: 0;
  margin: 1.5rem 0 0;
}

.rule--center { margin-inline: auto; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -.18em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 50%;
  top: calc(var(--notice) + .5rem);
  transform: translate(-50%, -250%);
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.2rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .9rem;
}

.skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 2px;
}

/* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* ── Knoepfe ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .95rem;
  padding: 1rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}

.btn:hover { text-decoration: none; }

.btn--green { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.btn--green:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }

.btn--ghost { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }

.btn--quiet { background: transparent; border-color: transparent; color: var(--navy); padding-inline: .4rem; }
.btn--quiet:hover { color: var(--green-ink); }

.btn--sm { padding: .75rem 1.35rem; font-size: .88rem; }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */

.topbar {
  background: var(--navy);
  color: var(--on-navy);
  font-size: .82rem;
  line-height: 1.5;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1.4rem;
  padding-block: .6rem;
}

.topbar__set { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar .icon { color: var(--green); width: 1rem; height: 1rem; }
.topbar a { color: #fff; }
.topbar a:hover { color: #fff; }

/* Telefon und Mail stehen auf dem Handy in der Leiste am unteren Bildrand. */
.topbar__contact { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  background: var(--paper);
  border-bottom: 3px solid var(--green);
  box-shadow: 0 2px 12px rgb(22 57 90 / .10);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 72px;
  padding-block: .7rem;
}

.brand { display: flex; align-items: center; gap: .8rem; }
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
}

.brand__mark .icon { width: 1.5rem; height: 1.5rem; }

.brand__name {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--navy);
}

.brand__sub {
  display: block;
  font-size: .64rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .18rem;
}

.nav { display: none; }
.header__cta { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgb(22 57 90 / .93) 0%, rgb(22 57 90 / .80) 100%),
    var(--ew-kopfbild, url("../img/team.jpg"));
  background-size: cover;
  background-position: center 28%;
  color: #fff;
}

.hero__inner { padding-block: clamp(3.5rem, 12vw, 8rem) clamp(4.5rem, 13vw, 9rem); }
.hero__body { max-width: 640px; }

.hero__badge {
  display: inline-block;
  background: var(--green-ink);
  color: #fff;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.hero h1 { color: #fff; margin-bottom: 1.2rem; }

.hero__sub {
  font-size: clamp(1rem, 2.3vw, 1.13rem);
  line-height: 1.85;
  color: #dbe6ef;
  margin-bottom: 2.1rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ── Drei Merkmale ──────────────────────────────────────────────────────── */

.highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-block: 2.5rem;
}

.highlight {
  background: var(--paper);
  padding: 2rem 1.85rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border-bottom: 4px solid var(--green);
}

.highlight__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-wash);
  color: var(--green-ink);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}

.highlight__icon .icon { width: 1.5rem; height: 1.5rem; }
.highlight p { font-size: .95rem; margin: 0; }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */

.section { padding-block: clamp(3rem, 9vw, 5.75rem); }
.section--wash { background: var(--wash); }

.section__head { max-width: 690px; margin-bottom: 2.5rem; }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head p:last-of-type { margin-bottom: 0; }

/* ── Ueber uns ──────────────────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: 1fr; gap: 2.75rem; align-items: center; }

/* Der gruene Rahmen liegt hinter dem Bild und ragt links unten heraus.
   Auf dem Handy faellt er weg — dort ist zu wenig Platz, und er wuerde nur
   Raender fressen. */
.about__media { position: relative; }

.about__frame { display: none; }

.about__img {
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgb(22 57 90 / .18);
}

.about__badge {
  position: absolute;
  right: 0;
  /* Unten, nicht oben: oben rechts steht im Foto der Kopf der Pflegekraft,
     bei 360 px deckte die Plakette ihn vollstaendig zu. */
  bottom: 1.5rem;
  background: var(--navy);
  color: #fff;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 10px 26px rgb(22 57 90 / .3);
}

.about__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
}

.about__lbl {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  margin-top: .4rem;
}

.usps {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.usps li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .98rem;
  color: var(--navy);
  line-height: 1.5;
}

.usps .icon { color: var(--green-ink); margin-top: .16rem; }

.pdl {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.pdl__img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.pdl__name { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.pdl__role { display: block; font-size: .88rem; }

/* ── Leistungen ─────────────────────────────────────────────────────────── */

.services { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.service {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 2.1rem 1.85rem;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid transparent;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.service:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgb(22 57 90 / .14);
  border-top-color: var(--green);
}

.service__icon {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
}

.service__icon .icon { width: 1.55rem; height: 1.55rem; }
.service p { font-size: .95rem; margin-bottom: 1rem; }

.service__tag {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-ink);
}

/* ── Zahlenband ─────────────────────────────────────────────────────────── */

/* Der Entwurf legte hier ein Foto mit background-attachment: fixed unter das
   Gruen — also Parallaxe, und die ist der Premium-Stufe vorbehalten
   (docs/VORLAGEN-STUFEN.md). Das Foto war bei 94 % Deckung ohnehin kaum zu
   sehen; jetzt steht dort die Flaeche selbst. */
.stats {
  background: var(--green-ink);
  padding-block: clamp(2.5rem, 7vw, 3.75rem);
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1rem;
  text-align: center;
}

.stat__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2rem, 7vw, 2.9rem);
  color: #fff;
  line-height: 1;
}

.stat__lbl {
  display: block;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #eaf5e0;
  margin-top: .7rem;
}

/* ── Kosten und Fragen ──────────────────────────────────────────────────── */

.costs { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }

.callout {
  background: var(--wash);
  border-left: 4px solid var(--green);
  padding: 1.3rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.75rem;
}

.callout__title {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: .35rem;
}

.callout p { font-size: .93rem; margin: 0; }

/* Die Frageliste ist <details>/<summary>: aufklappen ohne eine Zeile
   Javascript, mit Tastatur bedienbar und im Browser durchsuchbar. */
.faq { display: flex; flex-direction: column; gap: .75rem; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  list-style: none;
  transition: background-color 150ms ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--green-wash); }
.faq summary .icon { color: var(--green-ink); transition: transform 200ms ease; }
.faq details[open] summary .icon { transform: rotate(180deg); }

.faq__body {
  padding: 0 1.3rem 1.2rem;
  border-top: 1px solid var(--wash-2);
  font-size: .96rem;
}

.faq__body p { padding-top: 1rem; margin: 0; }

.faq__note { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }

/* ── Team ───────────────────────────────────────────────────────────────── */

.team { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.person {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.person__media { height: 250px; }
.person__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.person__body { padding: 1.35rem 1.25rem 1.5rem; text-align: center; }
.person__name { font-family: var(--font-title); font-weight: 600; font-size: 1.08rem; color: var(--navy); }
.person__role { display: block; font-size: .88rem; color: var(--green-ink); font-weight: 600; margin: .25rem 0 .6rem; }
.person__note { font-size: .88rem; margin: 0; }

/* ── Zitat ──────────────────────────────────────────────────────────────── */

.quote {
  background: var(--navy);
  padding-block: clamp(3rem, 9vw, 5.5rem);
  text-align: center;
  color: #fff;
}

.quote blockquote {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1.65;
  color: #fff;
  margin: 0 auto 1.5rem;
  max-width: 860px;
}

.quote__who { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1rem; }
.quote__where { display: block; font-size: .88rem; color: var(--on-navy-soft); margin-top: .2rem; }

/* ── Karriere ───────────────────────────────────────────────────────────── */

.job {
  background: var(--wash);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.job__body { padding: clamp(2rem, 6vw, 3.5rem) var(--pad); }

.job__badge {
  display: inline-block;
  background: var(--green-ink);
  color: #fff;
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 2px;
  margin-bottom: 1.2rem;
}

.perks { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.85rem; }

.perks li {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font-family: var(--font-title);
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 20px;
}

.job__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.job__media { min-height: 260px; display: grid; }
/* Das Bild fuellt die Kachel. height: 100% greift nur, weil der Kasten ein
   Grid ist — bei blossem min-height haette es keine Bezugshoehe. */
.job__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* ── Kontakt ────────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }

.contactcard {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius);
  padding: 2.1rem 1.85rem;
}

.contactcard h3 { color: #fff; margin-bottom: 1.5rem; }
.contactcard a { color: #fff; }
.contactcard .icon { color: var(--green); margin-top: .3rem; }

.contactlist { display: flex; flex-direction: column; gap: 1.15rem; font-size: .95rem; line-height: 1.7; }
.contactlist > div { display: flex; gap: .85rem; }
.contactlist .small { display: block; font-size: .84rem; color: var(--on-navy-soft); }

.contactcard__foot {
  margin-top: 1.85rem;
  border-top: 1px solid rgb(255 255 255 / .15);
  padding-top: 1.5rem;
}

.contactcard__foot .label {
  display: block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  margin-bottom: .7rem;
}

.contactcard__foot p { font-size: .9rem; }

.form {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.85rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.form h3 { margin-bottom: .4rem; }
.form__intro { font-size: .93rem; color: var(--muted); margin-bottom: 1.6rem; }

.field { margin-bottom: 1rem; }
.field--pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.field--pair .field { margin-bottom: 0; }

.field label {
  display: block;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fbfcfd;
  padding: .8rem .95rem;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
}

.field textarea { resize: vertical; min-height: 120px; }

.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

.consent input { margin-top: .3rem; flex: none; width: 17px; height: 17px; accent-color: #47772c; }

.form__req { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }

/* Gezeichnete Umgebungskarte, uebernommen aus _shared/arztpraxis.
   Kein Kartendienst, kein Abruf, keine Koordinaten (V12). */
.map {
  --map-bg: #eef2f6;
  --map-block: #e0e6ec;
  --map-road: #ffffff;
  --map-frame: #cfd8e0;
  --map-ink: #5c6875;
  --map-accent: #47772c;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 320 / 220;
  border-radius: var(--radius);
  margin-top: 1.75rem;
  border: 1px solid var(--line);
}

.map__note { font-size: .82rem; color: var(--muted); margin: .7rem 0 0; }

/* ── Fuss ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--navy-deep);
  color: var(--on-navy-soft);
  padding-top: clamp(2.5rem, 8vw, 4.25rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.footer h2 {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.1rem;
}

.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.footer__brandname { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: #fff; }
.footer p { font-size: .9rem; line-height: 1.8; }
.footer__list { display: flex; flex-direction: column; gap: .65rem; font-size: .9rem; list-style: none; padding: 0; margin: 0; }
.footer a { color: var(--on-navy-soft); }
.footer a:hover { color: #fff; }

.footer__social { display: flex; gap: .6rem; }

.footer__social a {
  width: 38px; height: 38px;
  border-radius: 3px;
  background: rgb(255 255 255 / .08);
  color: #fff;
  display: grid;
  place-items: center;
}

.footer__social a:hover { background: var(--green-ink); }

.footer__tel {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .4rem;
}

.footer__legal { border-top: 1px solid rgb(255 255 255 / .10); }

.footer__legalinner {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-block: 1.3rem;
  font-size: .85rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }

/* ── Platzhalter fuer noch fehlende Fotos ───────────────────────────────── */

.ph {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .55rem;
  height: 100%;
  min-height: 200px;
  color: #6f7c88;
  background-color: var(--wash-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(22 57 90 / .045) 0 10px,
    transparent 10px 20px
  );
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius);
}

.ph .icon { width: 2rem; height: 2rem; opacity: .8; }

.ph__txt {
  font-family: var(--font-title);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ── Handy-Leiste am unteren Bildrand ───────────────────────────────────── */

.quickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--quickbar);
  background: var(--navy);
  border-top: 1px solid var(--navy-2);
}

.quickbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .88rem;
}

.quickbar a:hover { text-decoration: none; background: var(--navy-2); }
.quickbar a + a { background: var(--green-ink); }
.quickbar a + a:hover { background: var(--navy-2); }

/* Zurueck nach oben — erst ab Rechnerbreite, sonst kollidiert er mit der
   Leiste am unteren Bildrand. */
.totop { display: none; }

/* ══ Ab 700px ════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  .topbar__contact { display: flex; }

  .highlights { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .usps { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .field--pair { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .about__img { height: 400px; }
  .job { grid-template-columns: 1.25fr 1fr; }
  .job__media { min-height: 380px; }
  .footer__legalinner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ══ Ab 1000px ═══════════════════════════════════════════════════════════ */

@media (min-width: 1000px) {
  html { scroll-padding-top: calc(var(--notice) + 88px + 1rem); }

  .header {
    position: sticky;
    top: var(--notice);
    z-index: 60;
  }

  .header__inner { min-height: 88px; }
  .brand__mark { width: 50px; height: 50px; }
  .brand__name { font-size: 1.3rem; }
  .brand__sub { font-size: .7rem; }

  .nav { display: flex; align-items: center; gap: 1.6rem; }

  .nav a {
    font-family: var(--font-title);
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy);
    padding-block: .4rem;
    border-bottom: 2px solid transparent;
  }

  .nav a:hover { color: var(--green-ink); border-bottom-color: var(--green); text-decoration: none; }

  .header__cta { display: inline-flex; }

  /* Die drei Merkmale schieben sich unter den Hero, so wie im Entwurf. */
  .highlights { margin-top: -85px; padding-block: 0 0; position: relative; z-index: 10; gap: 1.85rem; }
  .highlights--spaced { margin-bottom: 0; }

  .services { grid-template-columns: repeat(3, 1fr); gap: 1.85rem; }
  .team { grid-template-columns: repeat(4, 1fr); gap: 1.85rem; }

  .about { grid-template-columns: 1fr 1.05fr; gap: 4.4rem; }
  .about__media { padding: 0 0 1.6rem 1.6rem; }

  .about__frame {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58%;
    height: 58%;
    border: 10px solid var(--green);
    border-radius: var(--radius);
  }

  .about__img { height: 470px; }
  .about__badge { right: -.6rem; bottom: 1.9rem; }

  .costs { grid-template-columns: 1fr 1.15fr; gap: 4.4rem; }
  .contact { grid-template-columns: 1fr 1.3fr; gap: 1.85rem; }

  .contactcard { padding: 2.6rem 2.4rem; }
  .form { padding: 2.6rem 2.5rem; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.75rem; }

  .quickbar { display: none; }
  body { padding-bottom: 0; }

  .totop {
    display: grid;
    place-items: center;
    position: fixed;
    right: 22px;
    bottom: 28px;
    z-index: 80;
    width: 46px;
    height: 46px;
    border-radius: 3px;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 6px 18px rgb(22 57 90 / .3);
  }

  .totop:hover { background: var(--green-ink); color: #fff; text-decoration: none; }
}

/* ── Bewegung aus ───────────────────────────────────────────────────────── */

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

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .service:hover { transform: none; }
}

/* ── Druck ──────────────────────────────────────────────────────────────── */

@media print {
  #ew-demo-notice, .quickbar, .totop, .header, .hero__actions { display: none; }
  body { padding: 0; color: #000; }
  .hero { background: none; color: #000; }
  .hero h1, .hero__sub { color: #000; }
  .faq details { border: 1px solid #999; }
  .faq__body { display: block !important; }
}

/* ── Rechtliches ───────────────────────────────────────────────────────────
   Sprungziel fuer Impressum, Datenschutz und Verwandtes. Die Fusszeile
   verweist darauf; ohne dieses Ziel waeren das Verweise ins Leere (V12). */

.legalnote {
  max-width: 1170px;
  margin-inline: auto;
  padding: 1.75rem clamp(1rem, 4vw, 1.75rem) 2.5rem;
  font-size: .85rem;
  line-height: 1.7;
  color: #5b6570;
  background: #ffffff;
}

.legalnote h2 {
  font-size: 1rem;
  margin: 0 0 .35rem;
  color: #22252a;
}

.legalnote p { margin: 0; max-width: 62ch; }