@charset "UTF-8";
/* fonts.css wird in index.html direkt verlinkt, nicht per @import.
   @import würde eine Kette bilden: style.css muss erst geladen und geparst
   sein, bevor der Browser fonts.css überhaupt entdeckt. Das kostet LCP. */

/* =========================================================================
   Tierphysiotherapie Feingefühl - Sylvia Schreiber, Neuss

   Farbwelt und Logo sind aus der bestehenden Marke übernommen
   (Terrakotta #a6776d, Apricot #f2d6be). Kontraste wurden auf WCAG AA
   angehoben, Layout und Typografie sind neu.

   Alle Flächen laufen über Rollen-Tokens (--surface-1/2/3, --tint, --accent).
   Dark Mode tauscht nur diese Tokens, keine Komponente kennt Hex-Werte.

   01 Tokens
   02 Reset & Basis
   03 Typografie
   04 Layout
   05 Buttons & Links
   06 Kleinteile
   07 Header & Navigation
   08 Sticky-CTA (mobil)
   09 Hero & Vertrauensleiste
   10 Warum
   11 Leistungen
   12 Ablauf
   13 Über mich
   14 Stimmen
   15 Preise
   16 FAQ
   17 Kontakt & Formular
   18 Partner & Footer
   19 Bewegung
   20 Responsive
   ========================================================================= */


/* 01 Tokens ============================================================== */

:root {
  color-scheme: light;

  /* Markenpalette */
  --clay-300: #d3ab9f;
  --clay-400: #bd8d80;
  --clay-500: #a6776d;
  --clay-600: #8b5548;
  --clay-700: #6d4034;

  /* Rollen: Flächen */
  --surface-1: #fdf8f2;   /* Seitengrund */
  --surface-2: #f8ede3;   /* ruhige Sektion */
  --surface-3: #ffffff;   /* Karte, helle Sektion */
  --tint:      #f6ddc8;   /* Apricot-Akzentfläche */
  --tint-fg:   #6d4034;

  /* Rollen: Text */
  --text:        #3b342e;
  --text-strong: #2a2521;
  --text-muted:  #6c635b;
  --text-faint:  #78706a;   /* auf hellen Flächen noch WCAG AA (>4.5:1) */

  /* Rollen: Linien.
     --line-interactive umrandet Bedienelemente und muss deshalb 3:1 zum
     Hintergrund halten (WCAG 1.4.11). --line-strong ist nur Dekoration. */
  --line:        #ecdfd2;
  --line-strong: #ddc9b6;
  --line-interactive: #a6776d;

  /* Rollen: Akzent */
  --accent:       #8b5548;
  --accent-hover: #6d4034;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(166, 119, 109, .18);

  --star:    #b07d12;
  --ok-bg:   #e7f2ec;
  --ok-fg:   #1d5b3f;
  --err-bg:  #fbeae6;
  --err-fg:  #8f3521;
  --err-line:#b4462f;

  /* Kontaktband: in beiden Modi dunkel, ein bewusster Farbblock am Abschluss */
  --dark-bg:     #211b17;
  --dark-fg:     #e5d9cf;
  --dark-fg-str: #fdf8f2;
  --dark-muted:  #c2ae9f;
  --dark-line:   rgba(253, 248, 242, .14);
  --dark-raise:  rgba(253, 248, 242, .06);
  --form-bg:     #fdf8f2;

  /* Typografie */
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --step-2:  clamp(1.1875rem, 1.1rem + 0.6vw, 1.4375rem);
  --step-3:  clamp(1.3125rem, 1.2rem + 0.8vw, 1.625rem);
  --step-4:  clamp(1.5rem, 1.3rem + 1.3vw, 2.125rem);
  --step-5:  clamp(1.875rem, 1.55rem + 1.9vw, 2.625rem);
  --step-6:  clamp(2.125rem, 1.75rem + 2.1vw, 3.125rem);

  /* Raum */
  --wrap: 1160px;
  --wrap-narrow: 730px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);

  /* Form: drei Radien, feste Zuordnung.
     pill = interaktiv (Button, Chip) · card = Karte/Fläche · input = Feld */
  --r-card: 20px;
  --r-input: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(78, 45, 36, .05), 0 2px 8px rgba(78, 45, 36, .04);
  --shadow-md: 0 2px 4px rgba(78, 45, 36, .04), 0 10px 28px -8px rgba(78, 45, 36, .12);
  --shadow-lg: 0 4px 8px rgba(78, 45, 36, .05), 0 24px 56px -16px rgba(78, 45, 36, .18);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 74px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --surface-1: #191512;
    --surface-2: #201a16;
    --surface-3: #241d19;
    --tint:      #33261d;
    --tint-fg:   #eecbb0;

    --text:        #e2d7cc;
    --text-strong: #f7f1ea;
    --text-muted:  #b3a698;
    --text-faint:  #a1958a;

    --line:        #362d26;
    --line-strong: #4a3d34;
    --line-interactive: #8a6f5e;

    --accent:       #e6bb9c;
    --accent-hover: #f2d3b9;
    --accent-fg:    #241d19;
    --accent-soft:  rgba(230, 187, 156, .2);

    --star:    #d9a53c;
    --ok-bg:   #1d3329;
    --ok-fg:   #a7d9bf;
    --err-bg:  #3a231d;
    --err-fg:  #f0b3a1;
    --err-line:#d4715a;

    --dark-bg:    #221c18;
    --form-bg:    #2c241f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 28px -8px rgba(0, 0, 0, .45);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 56px -16px rgba(0, 0, 0, .55);
  }
}


/* 02 Reset & Basis ======================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--accent-soft);
}

body.is-locked { overflow: hidden; }

section[id], div[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

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

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:where(a) {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:where(a):hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--tint); color: var(--tint-fg); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--text-strong);
  color: var(--surface-1);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-input) var(--r-input);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--surface-1); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 03 Typografie ========================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-6); line-height: 1.08; letter-spacing: -.028em; }
h2 { font-size: var(--step-5); letter-spacing: -.024em; }
h3 { font-size: var(--step-2); line-height: 1.28; letter-spacing: -.015em; }
h4 { font-size: var(--step-1); line-height: 1.32; letter-spacing: -.012em; }

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

strong, b { font-weight: 600; color: var(--text-strong); }

.lead {
  font-size: var(--step-2);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }


/* 04 Layout ============================================================== */

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

.section { padding-block: var(--section-y); }
.section--quiet { background: var(--surface-2); }
.section--plain { background: var(--surface-3); }


/* 05 Buttons & Links ===================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .9em 1.6em;
  min-height: 52px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn:hover {
  --btn-bg: var(--accent-hover);
  --btn-bd: var(--accent-hover);
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  --btn-bd: var(--line-interactive);
  box-shadow: none;
}
.btn--ghost:hover {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--accent-hover);
  --btn-bd: var(--clay-400);
}

.btn--lg { padding: 1.05em 2em; min-height: 58px; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row--center { justify-content: center; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}
.arrow-link::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  transition: transform .2s var(--ease);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.arrow-link:hover { color: var(--accent-hover); }
.arrow-link:hover::after { transform: translateX(4px); }


/* 06 Kleinteile ========================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .95em .45em .75em;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
}
.chip .icon { width: 1.05em; height: 1.05em; color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .5em;
  line-height: 1.5;
}
.tick-list li:last-child { margin-bottom: 0; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 1.05em;
  height: 1.05em;
  background: var(--accent);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.note {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.note .icon { width: 1.2em; height: 1.2em; color: var(--accent); margin-top: .22em; }
.note p { margin: 0; }


/* 07 Header & Navigation ================================================= */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.header.is-stuck {
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(78, 45, 36, .5);
}

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* flex: none plus nowrap: die Marke behaelt immer ihre natuerliche Breite.
   Vorher konnte "TIERPHYSIO NEUSS" bei Platzmangel still auf zwei Zeilen
   umbrechen und den Header verziehen. Jetzt bleibt sie stabil, und der
   Platzmangel zeigt sich dort, wo die Breakpoints ihn abfangen. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  flex: none;
}
.brand__name, .brand__role { white-space: nowrap; }
.brand img { width: 50px; height: 38px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.brand__role {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .5rem .7rem;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--text-strong); }
.nav a.is-active { background: var(--tint); color: var(--tint-fg); }

.header__cta { display: flex; align-items: center; gap: .5rem; }
.header__cta .btn { min-height: 44px; padding: .55em 1.2em; font-size: .94rem; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .45rem .7rem;
  border-radius: var(--r-pill);
  color: var(--text-strong);
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ease);
}
.header__phone:hover { background: var(--surface-2); color: var(--text-strong); }
.header__phone .icon { color: var(--accent); }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-interactive);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-strong);
}
.burger .icon { width: 1.4em; height: 1.4em; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--surface-1);
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.mobile-nav__link .icon { color: var(--accent); width: 1.05em; height: 1.05em; }
.mobile-nav__actions { display: grid; gap: .7rem; margin-top: 1.6rem; }


/* 08 Sticky-CTA (mobil) ================================================== */

/* Sichtbar ab dem ersten Pixel, nicht erst nachdem der Hero zu 40 Prozent
   rausgescrollt ist. Grund: die Fold-Rechnung lief vorher gegen 844 px, das ist
   die Geraetehoehe eines iPhone 14 Pro, nicht die Browserhoehe. Safari nimmt
   oben die Statusleiste und unten die Adressleiste weg, sichtbar bleiben rund
   686 px. Der WhatsApp-Button im Hero beginnt bei 658 px, es schaute also ein
   28 px hoher Streifen eines 69 px hohen Buttons raus, mitten in Safaris
   Blur-Zone. Zusammen mit der erst spaeter eingeblendeten Leiste hatte der
   erste Bildschirm damit keine einzige Handlungsmoeglichkeit.
   Die Hoehe ist ueber body { padding-bottom } unter 900 px ohnehin reserviert,
   das dauerhafte Einblenden verschiebt also kein Layout. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  gap: .5rem;
  padding: .55rem .65rem calc(.55rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-1) 95%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.sticky-cta a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  padding: .45rem .3rem;
  border-radius: var(--r-input);
  text-decoration: none;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
}
.sticky-cta a .icon { width: 1.3rem; height: 1.3rem; color: var(--accent); }
.sticky-cta a.sticky-cta__primary { background: var(--accent); color: var(--accent-fg); }
.sticky-cta a.sticky-cta__primary .icon { color: var(--accent-fg); }


/* 09 Hero & Vertrauensleiste ============================================= */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3vw, 2.75rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(85% 65% at 8% 0%, var(--surface-2) 0%, transparent 62%),
    radial-gradient(65% 55% at 100% 28%, var(--tint) 0%, transparent 68%),
    var(--surface-1);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
}

.hero h1 { margin-bottom: .5em; }

/* Die h1 nennt Kategorie und Ort, weil die Mehrheit über genau diesen Begriff
   sucht und im Fold zuerst Bestätigung braucht. Der Nutzen folgt in der
   Subline. Etwas kleiner als --step-6, weil "Hundephysiotherapie" ein sehr
   langes Kompositum ist und bei voller Displaygröße dreizeilig umbrechen
   würde. */
.hero h1 {
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.65rem);
  /* Der Umbruch sitzt fest im Markup statt per max-width, weil
     text-wrap: balance sonst "in" auf die erste Zeile ziehen würde. */
  text-wrap: normal;
}
.hero__place { display: block; color: var(--accent); }

/* Name und Rolle unter dem Bild, nicht darauf. Bei einem Hausbesuch entscheidet
   der Besucher über eine konkrete Person, nicht über eine Marke. */
.hero__byline {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
}
/* Bewertung direkt an der Person, nicht als separate Vertrauensleiste im Hero.
   Der Textstapel des Heros bleibt bei drei Elementen (h1, Subline, CTAs), Name,
   Rolle und Bewertung haengen an der Bildspalte. */
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .6rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}
.hero__rating strong { color: var(--text-strong); font-weight: 700; }
.hero__rating:hover { color: var(--text-strong); }
.hero__rating-stars { display: flex; gap: .08rem; color: var(--star); }
.hero__rating-stars .icon { width: .9rem; height: .9rem; fill: currentColor; stroke: none; }

.hero__byline strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__sub {
  font-size: var(--step-2);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1.9rem;
  max-width: 34ch;
}

/* Der Zuschnitt sitzt in der Datei, nicht im CSS. Das Ausgangsbild hatte
   Totraum oben UND links, und object-fit kann nur eine Achse beschneiden.
   Deshalb ist die Datei auf 1216x839 vorgeschnitten und der Rahmen hat genau
   dieses Verhältnis, es wird also nichts mehr abgeschnitten. */
.hero__media img {
  width: 100%;
  aspect-ratio: 1216 / 839;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}

.trustbar { border-top: 1px solid var(--line); background: var(--surface-1); }
.trustbar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 3vw, 2.25rem);
  padding-block: 1.35rem;
}
.trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
}
.trustbar__item .icon { width: 1.3em; height: 1.3em; color: var(--accent); margin-top: .1em; }
.trustbar__item strong { display: block; color: var(--text-strong); font-weight: 600; }


/* 09b Wann hilft es ======================================================
   Bewusst ohne Karten und ohne Linien: reine Typografie mit viel Luft. Der
   Besucher scannt sechs Situationen und sucht seine eigene. Alles andere waere
   visuelles Rauschen an der Stelle, an der er sich wiedererkennen soll. */

.cases {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 5vw, 4rem);
}
.case dt {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.3;
  color: var(--text-strong);
  margin-bottom: .35rem;
}
.case dd {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: 1.6;
}

.cases-foot {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: 1.2rem 1.4rem;
  background: var(--tint);
  border-radius: var(--r-card);
  color: var(--tint-fg);
}
.cases-foot .icon { color: var(--tint-fg); }
.cases-foot strong { color: var(--tint-fg); }
.cases-foot a { color: var(--tint-fg); font-weight: 600; }


/* 10 Hinweise =========================================================== */

.disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.1rem 1.3rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
}


/* 11 Leistungen ========================================================== */
/* Asymmetrisches Raster: Reihe 1 = 7/5, Reihe 2 = 5/7. Vier Zellen für vier
   Themen, kein Vierer-Karten-Gleichschritt. Zwei Zellen apricot getönt. */

.services {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.service:nth-child(1) { grid-column: span 7; }
.service:nth-child(2) { grid-column: span 5; }
.service:nth-child(3) { grid-column: span 5; }
.service:nth-child(4) { grid-column: span 7; }

.service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.service--tinted { background: var(--tint); border-color: transparent; }
.service--tinted h3 { color: var(--tint-fg); }
/* deckend, nicht transparent: sonst rutscht der Kontrast auf der
   Apricot-Fläche unter WCAG AA */
.service--tinted .service__intro { color: var(--tint-fg); }
.service--tinted .service__icon { background: color-mix(in srgb, var(--tint-fg) 12%, transparent); }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Bild-Banner randlos oben in der Karte. Die negativen Ränder heben das
   Kartenpolster auf, die oberen Ecken folgen dem Kartenradius. Verhältnis 3:2
   entspricht genau den Dateien, es wird also nichts beschnitten. */
.service__media {
  margin: calc(clamp(1.5rem, 2.4vw, 2.1rem) * -1);
  margin-bottom: clamp(1.25rem, 2vw, 1.6rem);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  overflow: hidden;
}
.service__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
/* Nur im 12-Spalten-Raster: die 7-spaltige Karte ist dort breiter als ihre
   5-spaltige Nachbarin. Bei festem 3:2 waere ihr Banner deutlich hoeher und
   Icon plus Ueberschrift starteten auf verschiedener Hoehe. Unterhalb von
   901px sind alle Karten gleich breit, dann gilt wieder 3:2 fuer alle. */
@media (min-width: 901px) {
  .service:nth-child(1) .service__media img {
    aspect-ratio: 2 / 1;
    object-position: 50% 45%;
  }
}

.service__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: var(--r-input);
  background: var(--tint);
  color: var(--tint-fg);
}
.service__icon .icon { width: 1.55rem; height: 1.55rem; }
.service h3 { margin-bottom: .45em; }
.service__intro {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-bottom: 1.1rem;
}

/* Der Ausbildungsnachweis steht in der Karte, die die Methode beschreibt,
   nicht nur in "Ueber mich". Dort zertifiziert er das Verfahren, hier die
   Person, das ist keine Wiederholung sondern Platzierung. */
.service__credential {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: auto 0 0;
  padding-top: clamp(1.25rem, 2vw, 1.6rem);
  border-top: 1px solid color-mix(in srgb, var(--tint-fg) 22%, transparent);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tint-fg);
}
.service__credential .icon {
  width: 1.2em;
  height: 1.2em;
  margin-top: .15em;
  color: var(--tint-fg);
}

/* Lange Aufzählungen zweispaltig, damit die Karten nicht zu Listen-Türmen werden */
.service__list { columns: 2; column-gap: 1.75rem; font-size: var(--step--1); }
.service__list li { break-inside: avoid; }
.service--narrow .service__list { columns: 1; }


/* 12 Ablauf ============================================================== */

/* Breites Band ueber den vier Schritten: genau dort stellt sich der Besucher
   den Termin vor. Quelle ist 3:2, der Rahmen 2:1, es werden also 25 Prozent
   der Hoehe abgeschnitten. object-position bei 32 Prozent behaelt ihr
   angeschnittenes Gesicht und die Haende, weg fallen leere Teppichflaechen
   unten. Auf dem Handy volles 3:2, damit die Szene lesbar bleibt. */
.ablauf-media { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ablauf-media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  counter-reset: step;
}
.step { position: relative; counter-increment: step; padding-top: 2.85rem; }
.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.step::after {
  content: "";
  position: absolute;
  top: 1.14rem;
  left: 2.8rem;
  right: -1rem;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
.step h3 { font-size: var(--step-1); margin-bottom: .35em; }
.step p { font-size: var(--step--1); color: var(--text-muted); margin: 0; }


/* 13 Über mich =========================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Hochformat 4:5, genau das Verhältnis der Datei. Es wird also nichts
   beschnitten und object-position ist damit wirkungslos. */
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.about__sig {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--accent);
  margin-top: 1.6rem;
}
.about__sig span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .55rem;
}

.credentials {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.credential {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.credential img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
  border-radius: 6px;
}
/* Ersatz fuer Nachweise ohne verwertbares Logo. Ein Foto einer Urkunde ist
   bei 46px ein grauer Fleck, ein Icon transportiert dieselbe Aussage. */
.credential__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-input);
  background: var(--tint);
  color: var(--tint-fg);
}
.credential__icon .icon { width: 1.4rem; height: 1.4rem; }
.credential div { font-size: .82rem; line-height: 1.4; color: var(--text-muted); }
.credential strong { display: block; font-size: .92rem; color: var(--text-strong); }


/* 14 Stimmen ============================================================= */
/* Bewusst ohne Karten: zwei Spalten, durch eine Haarlinie getrennt. */

/* Bewertungsschnitt: echte Zahl aus dem Google-Profil, mit Quelle benannt.
   Bewusst NICHT als aggregateRating im Schema, siehe README. */
.rating {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1.4rem .8rem 1.2rem;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.rating__score {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.rating__meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-align: left;
}
.rating__stars { display: flex; gap: .1rem; color: var(--star); }
.rating__stars .icon { width: .95rem; height: .95rem; fill: currentColor; stroke: none; }

.quotes {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.quotes__rule { background: var(--line); align-self: stretch; }

.quote { margin: 0; display: flex; flex-direction: column; }
.quote__stars { display: flex; gap: .12rem; margin-bottom: 1rem; color: var(--star); }
.quote__stars .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; }
.quote blockquote {
  margin: 0 0 1.35rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--text-strong);
}
.quote figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.quote__avatar {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--tint-fg);
  font-weight: 700;
  font-size: .88rem;
  flex: none;
}
.quote figcaption strong { display: block; color: var(--text-strong); }

.quotes-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}


/* 15 Preise ============================================================== */

.prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.price--featured {
  border-color: var(--clay-400);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.price__label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .45rem;
}
.price h3 { font-size: var(--step-2); margin-bottom: .5em; }
.price__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.price__meta .chip { background: var(--surface-2); border-color: transparent; }
.price .tick-list { font-size: var(--step--1); margin-bottom: 1.25rem; }
.price__note {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
}
.price__foot { margin-top: auto; }
.price__amount { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .9rem; }
.price__amount b {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.price__amount span { font-size: var(--step--1); color: var(--text-faint); }

.badge-ribbon {
  position: absolute;
  top: -.75rem;
  left: clamp(1.5rem, 2.4vw, 2rem);
  padding: .3em .8em;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.price-notes {
  display: grid;
  gap: .8rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background: var(--surface-2);
  border-radius: var(--r-card);
}


/* 15b Einsatzgebiet ======================================================
   Eigene Layout-Familie: vier Textblöcke mit sparsamer Oberlinie, keine
   Karten, keine Hairline pro Zeile. */

/* Chip-Wolke: bei 25 Einträgen die passende Komponente. Der Besucher sucht
   seinen Stadtteil und findet ihn beim Scannen, ohne 25 Listenzeilen. */
.area-chips {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 52rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.area-chips li {
  padding: .45em 1em;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.area-foot {
  justify-content: center;
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: 1.1rem 1.35rem;
  background: var(--surface-2);
  border-radius: var(--r-card);
}


/* 16 FAQ ================================================================= */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem .25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--text-strong);
  transition: color .18s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__q .icon {
  margin-left: auto;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--accent);
  transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q { color: var(--accent); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }

.faq__a {
  padding: 0 2.5rem 1.5rem .25rem;
  color: var(--text-muted);
  animation: faqIn .28s var(--ease);
}
.faq__a p { margin-bottom: .8em; }
.faq__a p:last-child { margin-bottom: 0; }

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.faq-foot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--step--1);
}


/* 17 Kontakt & Formular ================================================== */

/* Das Band ist in beiden Farbmodi dunkel. Alles darin arbeitet deshalb mit
   festen Werten, nicht mit den umschaltenden Rollen-Tokens, sonst kippt der
   Kontrast im Dark Mode in die falsche Richtung. */
.contact { background: var(--dark-bg); color: var(--dark-fg); }
.contact h2 { color: var(--dark-fg-str); }
.contact .eyebrow { color: #f6ddc8; }
.contact .lead { color: var(--dark-muted); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Beweis am Entscheidungspunkt. Feste Sternfarbe, weil das Band in beiden
   Farbmodi dunkel ist. */
.contact__proof {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  color: var(--dark-fg);
}
.contact__proof-stars { display: flex; gap: .1rem; color: #e0ac41; }
.contact__proof-stars .icon { width: .95rem; height: .95rem; fill: currentColor; stroke: none; }

.contact__hours {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--dark-line);
  font-size: var(--step--1);
  color: var(--dark-muted);
}
.contact__hours .icon { width: 1.25em; height: 1.25em; color: #f6ddc8; margin-top: .2em; }
.contact__hours strong { display: block; color: var(--dark-fg-str); font-weight: 600; }

.channels { display: grid; gap: .7rem; margin-top: 1.6rem; }
.channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.15rem;
  background: var(--dark-raise);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--dark-fg);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.channel:hover {
  background: rgba(253, 248, 242, .12);
  border-color: rgba(253, 248, 242, .28);
  transform: translateX(3px);
  color: var(--dark-fg-str);
}
.channel__icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: var(--r-input);
  background: #f6ddc8;
  color: #3a2a20;
  flex: none;
}
.channel__icon .icon { width: 1.3rem; height: 1.3rem; }
.channel__text { min-width: 0; }
.channel__text strong {
  display: block;
  color: var(--dark-fg-str);
  font-size: 1.0625rem;
  font-weight: 600;
}
.channel__text span { font-size: var(--step--1); color: var(--dark-muted); }
.channel > .icon:last-child {
  margin-left: auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--dark-muted);
}

.form-card {
  background: var(--form-bg);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.form-card h3 { color: var(--text-strong); margin-bottom: .3em; }
.form-card__intro { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 1.6rem; }

.field { margin-bottom: 1rem; }
.field > label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: .35rem;
}
.field__hint { font-weight: 400; color: var(--text-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .95rem;
  background: var(--surface-3);
  border: 1.5px solid var(--line-interactive);
  border-radius: var(--r-input);
  color: var(--text-strong);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5548' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--err-line); }

.field__error {
  display: none;
  margin-top: .3rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--err-fg);
}
.field.has-error .field__error { display: block; }

.form-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }

.form-consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: 1.3rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
.form-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .2rem;
  accent-color: var(--accent);
  flex: none;
}
.form-consent.has-error { color: var(--err-fg); }

.form-status {
  display: none;
  gap: .7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: .85rem 1.05rem;
  border-radius: var(--r-input);
  font-size: var(--step--1);
}
.form-status.is-shown { display: flex; }
.form-status--ok { background: var(--ok-bg); color: var(--ok-fg); }
.form-status--err { background: var(--err-bg); color: var(--err-fg); }
.form-status .icon { width: 1.2em; height: 1.2em; margin-top: .2em; }
.form-status p { margin: 0; }
.form-status a { color: inherit; font-weight: 600; }

.form-foot {
  margin-top: .9rem;
  font-size: .78rem;
  color: var(--text-faint);
  text-align: center;
}


/* 18 Partner & Footer ==================================================== */

.partner {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--surface-2);
  text-align: center;
}
.partner p {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: 1.15rem;
}
.partner img { height: 40px; width: auto; margin-inline: auto; opacity: .8; transition: opacity .2s var(--ease); }
.partner a:hover img { opacity: 1; }

.footer {
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.25rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.footer h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: .9rem;
}
.footer p, .footer li { font-size: var(--step--1); color: var(--text-muted); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer__brand img { width: 56px; height: auto; margin-bottom: .9rem; }

.socials { display: flex; gap: .55rem; margin-top: 1.15rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--accent);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--tint); transform: translateY(-2px); }
.socials .icon { width: 1.15rem; height: 1.15rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem 1.5rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.6rem);
  font-size: .82rem;
  color: var(--text-faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }


/* 19 Bewegung ============================================================ */
/* Zweck: Hierarchie. Inhalte kommen in Leserichtung an, statt alles auf
   einmal zu zeigen. Nur transform und opacity, damit es auf dem Compositor
   läuft. Bei prefers-reduced-motion sofort sichtbar. */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Die Wortmarke hat eine echte Hell-Variante (Schriftzug creme, Schwung
   aufgehellt), die per <picture> und prefers-color-scheme geladen wird. Der
   frühere Behelf mit hellem Träger dahinter ist damit weg.
   Das Fresco-Partnerlogo ist Fremdmaterial, dort bleibt der Träger. */
@media (prefers-color-scheme: dark) {
  .partner img {
    background: #fdf8f2;
    border-radius: 8px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* 20 Responsive ========================================================== */

@media (max-width: 1120px) {
  .header__phone { display: none; }
  .service__list { columns: 1; }
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .header__cta .btn { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .hero__grid,
  .about__grid,
  .contact__grid { grid-template-columns: 1fr; }

  /* Mobiler Fold: Bild und Abstaende gestrafft, damit der primaere CTA und der
     erste Vertrauenspunkt ohne Scrollen sichtbar sind. */
  .hero { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 2rem; }
  .hero__grid { gap: 1.25rem; }
  .hero__media { order: -1; }
  /* Auf dem Handy zaehlt jeder Pixel im Fold, deshalb hier ein flacherer
     Ausschnitt als in der Datei. 40 Prozent vertikal laesst ihr Haar oben
     genug Luft und nimmt die Hoehe unten beim Hundekoerper weg. */
  .hero__media img { aspect-ratio: 5 / 3; object-position: 50% 40%; }
  .hero__byline { margin-top: .7rem; }
  .hero__rating { margin-top: .45rem; }
  .hero h1, .hero__sub { max-width: none; }
  .hero__byline { margin-top: .8rem; }
  .hero h1 { margin-bottom: .4em; }
  .hero__sub { margin-bottom: 1.2rem; }

  .about__media { max-width: 20rem; }

  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:nth-child(n) { grid-column: span 1; }

  .trustbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .ablauf-media img { aspect-ratio: 3 / 2; }
  .step:nth-child(2)::after { display: none; }

  .prices { grid-template-columns: 1fr; }
  .price--featured { order: -1; }


  .quotes { grid-template-columns: 1fr; }
  .quotes__rule { display: none; }
  .quotes .quote + .quote { padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--line); }

  .sticky-cta { display: flex; }
  body { padding-bottom: 4.35rem; }
}

@media (max-width: 620px) {
  /* .brand__role bleibt hier bewusst sichtbar. Vorher stand hier ein
     display: none, und damit sagte der Header auf dem Handy nur "Feingefuehl",
     also weder was angeboten wird noch wo. Platzgruende gab es dafuer keine:
     gemessen bleiben bei 390 px 116 px frei, bei 320 px noch 46 px. Wichtiger
     als am Desktop, weil .hero__media { order: -1 } die h1 auf dem Handy
     hinter Bild, Name und Bewertung schiebt, sie startet erst bei 405 px. */
  .services { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .step::after { display: none; }
  .trustbar__inner { grid-template-columns: 1fr; gap: .7rem; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
  .btn-row .btn { width: 100%; }
  .cases { grid-template-columns: 1fr; gap: 1.5rem; }
  .quotes-foot { flex-direction: column; gap: .9rem; }
  .quote blockquote { font-size: var(--step-1); }
}

@media (min-width: 1001px) {
  .mobile-nav { display: none; }
}


/* Druck =================================================================== */

@media print {
  .header, .sticky-cta, .mobile-nav, .form-card, .skip-link { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section { padding-block: 1.5rem; }
  .faq__a { display: block !important; }
}