/* ============================================================================
   Praxis Helmut Salchegger — Heilmassage, TCM & Qi Gong
   ----------------------------------------------------------------------------
   Aufbau dieser Datei:
     01  Schriften
     02  Design-Tokens (Farben, Typografie, Abstände)
     03  Grundlagen & Reset
     04  Bausteine (Knöpfe, Platzhalter, Enso, Typo-Klassen)
     05  Kopfzeile & Navigation
     06  Hero
     07  Über mich
     08  Anwendungsbereiche
     09  Ablauf
     10  Preise
     11  FAQ
     12  Kontakt & Formular
     13  Fußzeile
     14  Rechtliche Unterseiten
     15  Bewegung & Barrierefreiheit
   ========================================================================= */


/* ── 01  SCHRIFTEN ──────────────────────────────────────────────────────────
   Lokal eingebunden, NICHT über das Google-CDN. Das ist Absicht: so werden
   beim Seitenaufruf keine Daten an Google übertragen und es braucht kein
   Cookie-Banner. Anleitung zum Herunterladen steht in der README.md.

   Solange die Dateien fehlen, greift die Fallback-Kette weiter unten —
   die Seite bleibt also in jedem Fall lesbar.                                */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ── 02  DESIGN-TOKENS ───────────────────────────────────────────────────── */

:root {

  /* Farben — warmes Schwarz, Salbei-Jade, Messing.
     Alle Kombinationen erfüllen WCAG AA (mind. 4.5:1 für Fließtext).        */
  --grund:        #14110F;   /* Seitenhintergrund, tiefes Warmschwarz        */
  --grund-2:      #1C1815;   /* gehobene Bänder                              */
  --grund-3:      #241F1A;   /* Karten, Eingabefelder                        */
  --grund-4:      #0E0C0B;   /* tiefstes Band (Qi Gong)                      */

  --tinte:        #F5F0E8;   /* Fließtext & Überschriften, 15.9:1            */
  --tinte-2:      #B9AFA2;   /*  8.4:1                                       */
  --tinte-3:      #8A8073;   /*  4.8:1 — Untergrenze für Text                */

  --jade:         #7A9B7E;   /* Akzent, Knöpfe                    6.1:1      */
  --jade-hell:    #93B497;   /* Hover                                        */
  --jade-dunkel:  #5F7D63;

  --messing:      #C9A227;   /* Augenbrauen, Linien, Ziffern      7.7:1      */
  --messing-matt: rgba(201, 162, 39, .35);

  --warnung:      #E8C35B;   /* [BITTE PRÜFEN]-Marker                        */
  --fehler:       #E88B7D;   /* Formularfehler                    6.9:1      */

  --linie:        rgba(245, 240, 232, .12);
  --linie-stark:  rgba(245, 240, 232, .22);

  /* Schrift */
  --schrift-titel: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype',
                   Georgia, 'Times New Roman', serif;
  --schrift-text:  'Inter', system-ui, -apple-system, 'Segoe UI',
                   Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fließende Typo-Skala: skaliert stufenlos zwischen 360px und 1400px */
  --gr-hero:  clamp(2.9rem,  1.6rem + 5.6vw, 6.4rem);
  --gr-h2:    clamp(2.05rem, 1.4rem + 2.7vw, 3.6rem);
  --gr-h3:    clamp(1.18rem, 1.1rem + 0.3vw, 1.35rem);
  --gr-fuehr: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --gr-text:  1.0625rem;         /* 17px — bewusst über dem 16px-Minimum   */
  --gr-klein: 0.9375rem;
  --gr-mini:  0.75rem;

  /* Abstände — 4/8er-Rhythmus */
  --a-1: .25rem;  --a-2: .5rem;   --a-3: .75rem;  --a-4: 1rem;
  --a-5: 1.5rem;  --a-6: 2rem;    --a-7: 3rem;    --a-8: 4rem;
  --a-9: 6rem;    --a-10: 8rem;

  --band-abstand: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --rand:         clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --huelle-breit: 76rem;

  /* Formen */
  --rund-klein: 10px;
  --rund:       18px;
  --rund-gross: 26px;
  --pille:      999px;

  /* Bewegung — dezent, ease-out beim Erscheinen */
  --dauer:  .32s;
  --kurve:  cubic-bezier(.2, .7, .3, 1);

  --kopf-hoehe: 76px;
}


/* ── 03  GRUNDLAGEN ──────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Anker landen nicht unter der fixierten Kopfzeile */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--a-5));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menue-offen { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  /* Die WONK- und SOFT-Achsen von Fraunces: leicht unregelmäßige, weiche
     Details statt maschineller Perfektion — das ist die typografische
     Grundhaltung dieser Seite. */
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 100;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--a-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

::selection { background: var(--jade); color: var(--grund); }

/* Tastatur-Fokus: immer deutlich sichtbar, nie entfernt */
:focus-visible {
  outline: 3px solid var(--messing);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprungmarke {
  position: fixed;
  top: var(--a-3);
  left: var(--a-3);
  z-index: 200;
  padding: var(--a-3) var(--a-5);
  background: var(--jade);
  color: var(--grund);
  font-weight: 600;
  border-radius: var(--pille);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dauer) var(--kurve);
}
.sprungmarke:focus-visible { transform: translateY(0); }

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

.huelle {
  width: 100%;
  max-width: var(--huelle-breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Alle vertikalen Sektionsabstände kommen aus dieser einen Regel. */
.band {
  position: relative;
  padding-block: var(--band-abstand);
}
.band--gehoben { background: var(--grund-2); }
.band--tief    { background: var(--grund-4); overflow: hidden; }


/* ── 04  BAUSTEINE ───────────────────────────────────────────────────────── */

/* Augenbraue — kleines Label über jeder Überschrift, in Messing */
.augenbraue {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  margin: 0 0 var(--a-4);
  color: var(--messing);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.augenbraue::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
}

.titel {
  font-size: var(--gr-h2);
  line-height: 1.04;
  margin-bottom: var(--a-5);
}

.mini-titel {
  font-family: var(--schrift-text);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 var(--a-4);
}

.fuehrung {
  font-size: var(--gr-fuehr);
  line-height: 1.5;
  color: var(--tinte);
  margin-bottom: var(--a-5);
  text-wrap: pretty;
}

.band p:not(.fuehrung):not(.augenbraue) { color: var(--tinte-2); }

.abschnitt-kopf {
  max-width: 34rem;
  margin: 0 auto var(--a-8);
  text-align: center;
}
.abschnitt-kopf .augenbraue { justify-content: center; }
.abschnitt-kopf--links {
  margin-inline: 0;
  text-align: left;
}
.abschnitt-kopf--links .augenbraue { justify-content: flex-start; }

.liste-punkte li {
  position: relative;
  padding-left: var(--a-5);
  margin-bottom: var(--a-2);
  color: var(--tinte-2);
}
.liste-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jade);
}

/* ── Knöpfe ── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-3);
  /* min-height sichert das 44px-Touchziel unabhängig vom Padding */
  min-height: 52px;
  padding: var(--a-3) var(--a-6);
  border: 1px solid transparent;
  border-radius: var(--pille);
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              transform .15s var(--kurve);
}
.knopf:active { transform: scale(.975); }

.knopf--voll {
  background: var(--jade);
  color: var(--grund);
}
.knopf--voll:hover { background: var(--jade-hell); }

.knopf--rand {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--tinte);
}
.knopf--rand:hover {
  border-color: var(--jade);
  color: var(--jade-hell);
}

.knopf--klein { min-height: 44px; padding: var(--a-2) var(--a-5); }
.knopf--breit { width: 100%; }
.knopf__icon  { width: 18px; height: 18px; flex: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  min-height: 44px;          /* Touchziel */
  color: var(--jade);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--messing-matt);
  transition: color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.text-link:hover { color: var(--jade-hell); box-shadow: inset 0 -1px 0 var(--jade); }
.text-link__icon { width: 13px; height: 13px; }

/* ── Bild-Platzhalter ──
   Bleibt sichtbar, bis echte Bilder eingesetzt werden. Zeigt das
   gewünschte Format direkt an. */
.platzhalter {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(245, 240, 232, .035) 11px 22px
    ),
    var(--grund-3);
}
.platzhalter--hoch { aspect-ratio: 4 / 5; }
.platzhalter::after {
  content: attr(data-format);
  position: absolute;
  inset: auto 0 50% 0;
  transform: translateY(50%);
  text-align: center;
  padding-inline: var(--a-4);
  color: var(--tinte-3);
  font-family: var(--schrift-text);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ── [BITTE PRÜFEN]-Marker ──
   Bewusst auffällig. Suchen Sie im Code nach "pruefen", um alle Stellen
   zu finden. Beide Regeln können nach dem Ausfüllen gelöscht werden. */
.pruefen {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--rund-klein);
  background: rgba(232, 195, 91, .16);
  border: 1px dashed rgba(232, 195, 91, .55);
  color: var(--warnung);
  font-family: var(--schrift-text);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
}
.pruefen-block {
  padding: var(--a-4);
  border-radius: var(--rund-klein);
  background: rgba(232, 195, 91, .07);
  border-left: 2px solid var(--warnung);
}

/* ── Enso — das Praxis-Zeichen ── */
.enso {
  display: inline-block;
  color: var(--jade);
}
.enso svg { width: 100%; height: 100%; }

/* Atmet auf einem 10-Sekunden-Zyklus: 6 Atemzüge pro Minute, die
   Ruheatmung im Qi Gong. Nur im Logo — sonst wäre es Dekoration. */
.enso--atmet svg {
  animation: atem 10s ease-in-out infinite;
  transform-origin: center;
}
@keyframes atem {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: 1;   }
}

.enso--gross {
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(46rem, 80vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--jade);
  opacity: .05;
  pointer-events: none;
}

/* Sektionstrenner */
.trenner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-5);
  padding-block: var(--a-6);
}
.trenner::before,
.trenner::after {
  content: "";
  height: 1px;
  width: min(11rem, 22vw);
  background: linear-gradient(90deg, transparent, var(--messing-matt));
}
.trenner::after { background: linear-gradient(90deg, var(--messing-matt), transparent); }
.trenner .enso { width: 26px; height: 26px; color: var(--messing); opacity: .8; }


/* ── 05  KOPFZEILE ───────────────────────────────────────────────────────── */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
  border-bottom: 1px solid transparent;
}
/* Wird per JS gesetzt, sobald gescrollt wurde */
.kopf.ist-gescrollt {
  background: rgba(20, 17, 15, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--a-5);
  height: var(--kopf-hoehe);
  max-width: var(--huelle-breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--a-3);
  min-height: 44px;          /* Touchziel */
  text-decoration: none;
  flex: none;
}
.marke__zeichen { width: 34px; height: 34px; flex: none; }
.marke__wort {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 30;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}

.kopf__nav {
  display: none;
  margin-inline: auto;
  gap: var(--a-6);
}
.kopf__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  font-size: var(--gr-klein);
  color: var(--tinte-2);
  text-decoration: none;
  transition: color var(--dauer) var(--kurve);
}
.kopf__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 11px;
  height: 1px;
  background: var(--jade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer) var(--kurve);
}
.kopf__nav a:hover { color: var(--tinte); }
.kopf__nav a:hover::after { transform: scaleX(1); }

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  margin-left: auto;
}
.kopf__aktionen .knopf { display: none; }

.burger {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  cursor: pointer;
}
.burger__strich {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--tinte);
  border-radius: 2px;
  transition: transform var(--dauer) var(--kurve),
              opacity var(--dauer) var(--kurve);
}
.burger[aria-expanded="true"] .burger__strich:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__strich:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ── Mobiles Menü ── */
.mobilmenue {
  position: fixed;
  inset: var(--kopf-hoehe) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-6);
  padding: var(--a-7) var(--rand) calc(var(--a-7) + env(safe-area-inset-bottom));
  background: var(--grund);
  overflow-y: auto;
  animation: menue-auf var(--dauer) var(--kurve);
}
.mobilmenue[hidden] { display: none; }
@keyframes menue-auf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobilmenue__nav { display: flex; flex-direction: column; }
.mobilmenue__nav a {
  padding-block: var(--a-4);
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: 1.55rem;
  text-decoration: none;
}
.mobilmenue__fuss { display: grid; gap: var(--a-4); }
.mobilmenue__adresse {
  color: var(--tinte-3);
  font-size: var(--gr-klein);
  text-align: center;
}


/* ── 06  HERO ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--kopf-hoehe) + var(--a-8));
  padding-bottom: clamp(3rem, 1rem + 8vw, 6.5rem);
  overflow: hidden;
}

.hero__bild { position: absolute; inset: 0; background: var(--grund-3); }
.hero__bild img,
.hero__bild .platzhalter {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  /* Sehr langsamer Ken-Burns-Zoom — reine Atmosphäre, 40 Sekunden */
  animation: langsam-heran 40s ease-out forwards;
}

/* Der Bildausschnitt sitzt bewusst rechts: links bleibt die ruhige Wandfläche
   für die Überschrift frei, die Hände bleiben im Bild. */
.hero__bild img {
  object-position: 66% 50%;
  /* Das Foto ist neutralgrau, die Seite warm. Ein Hauch Sepia bringt es auf
     dieselbe Temperatur, ohne dass es getönt wirkt. */
  filter: sepia(.28) brightness(.94) contrast(1.05);
}

@keyframes langsam-heran {
  from { transform: scale(1.06); }
  to   { transform: scale(1);    }
}

/* Zweistufiger Schleier. Ausgelegt auf ein HELLES Foto: Die linke Bildhälfte
   ist eine hellgraue Wand, dort steht die Überschrift. Bei nur 70 % Deckung
   käme der Text auf 4,1:1 und würde WCAG AA verfehlen — deshalb links 92 %.
   Wird das Foto später gegen ein dunkleres getauscht, dürfen diese Werte
   wieder sinken. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20, 17, 15, .54) 0%,
      rgba(20, 17, 15, .20) 26%,
      rgba(20, 17, 15, .52) 58%,
      rgba(20, 17, 15, .92) 100%),
    linear-gradient(100deg,
      rgba(20, 17, 15, .74) 0%,
      rgba(20, 17, 15, .56) 34%,
      rgba(20, 17, 15, .18) 62%,
      transparent 82%);
}

.hero__inhalt {
  position: relative;
  width: 100%;
  max-width: var(--huelle-breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.hero__titel {
  font-size: var(--gr-hero);
  font-variation-settings: 'SOFT' 55, 'WONK' 1, 'opsz' 144;
  line-height: .98;
  letter-spacing: -.028em;
  margin-bottom: var(--a-5);
  max-width: 14ch;
}

.hero__text {
  max-width: 40ch;
  font-size: var(--gr-fuehr);
  line-height: 1.55;
  color: var(--tinte-2);
  margin-bottom: var(--a-6);
}

.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }


/* ── 07  ÜBER MICH ───────────────────────────────────────────────────────── */

.ueber { display: grid; gap: var(--a-7); }
.ueber__bild .platzhalter,
.ueber__bild img { border-radius: var(--rund-gross); }

/* Die Vorlage ist quadratisch, das Layout will Hochformat. 4:5 schneidet
   je rund 10 % links und rechts weg — das rückt das Portrait enger ans
   Gesicht, Kopf und Schultern bleiben vollständig im Bild. */
.ueber__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Beim quadratischen Original wirkt nur der waagrechte Wert (mittig).
     Der senkrechte greift erst, wenn hier später ein hochformatiges Foto
     eingesetzt wird — 40 % hält das Gesicht dann im oberen Bereich. */
  object-position: 50% 40%;
  /* Der Studiohintergrund ist kühlgrau, die Seite warmbraun. Minimale
     Korrektur, damit das Portrait nicht kalt danebensteht — bewusst schwach,
     Hauttöne sollen natürlich bleiben. */
  filter: saturate(.94) sepia(.07);
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a-4);
  margin: var(--a-7) 0;
  padding-block: var(--a-5);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.kennzahl dt {
  color: var(--tinte-3);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--a-1);
}
.kennzahl dd {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  /* Untergrenze bewusst niedrig: Bei 320px muss "30 Jahre" einzeilig in eine
     80px-Spalte passen. Weil je nach Gerät eine andere Ersatzschrift greift,
     braucht es dabei Reserve statt Punktlandung. */
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
  line-height: 1;
  color: var(--messing);
  /* Tabellenziffern: die Zahlen stehen exakt untereinander */
  font-variant-numeric: tabular-nums;
  /* Zahl und Einheit bleiben zusammen in einer Zeile */
  white-space: nowrap;
}

/* Einheit hinter der Zahl. Die Rangfolge entsteht allein über die Größe —
   rund halb so groß wie die Zahl. Die Farbe wird von der Zahl geerbt, damit
   beides als eine Einheit gelesen wird und bei einem späteren Farbwechsel
   nichts auseinanderläuft. Größe fest statt in em, sonst schrumpfte sie am
   Handy unter die Lesbarkeitsgrenze. */
.kennzahl__einheit {
  font-family: var(--schrift-text);
  font-size: clamp(.8125rem, .75rem + .2vw, .9375rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: inherit;
  margin-left: .12em;
}


/* ── 08  ANWENDUNGSBEREICHE ──────────────────────────────────────────────── */

.bereich__gitter { display: grid; gap: var(--a-7); }

.bereich__bild { margin-top: var(--a-6); }
.bereich__bild .platzhalter,
.bereich__bild img { border-radius: var(--rund); }

.bereich__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Dieselbe Wärmung wie beim Hero-Bild. Alle vier Fotos sind Schwarzweiß —
     ohne den gemeinsamen Sepia-Anteil würden sie kühlgrau aus dem warmen
     Layout herausfallen. */
  filter: sepia(.28) contrast(1.03);
}

.methoden {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}
.methode {
  padding-block: var(--a-5);
  border-bottom: 1px solid var(--linie);
}
.methode__titel {
  font-size: var(--gr-h3);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 30;
  margin-bottom: var(--a-2);
}
.methode__text { color: var(--tinte-2); margin: 0; }

.band--tief .methoden { border-top-color: var(--linie-stark); }


/* ── 09  ABLAUF ──────────────────────────────────────────────────────────── */

.ablauf {
  display: grid;
  gap: var(--a-5);
  counter-reset: schritt;
}
.schritt {
  position: relative;
  padding: var(--a-6);
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  transition: border-color var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve);
}
.schritt:hover { border-color: var(--messing-matt); transform: translateY(-3px); }

.schritt__nr {
  display: block;
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--messing);
  opacity: .75;
  margin-bottom: var(--a-4);
}
.schritt__titel { font-size: var(--gr-h3); margin-bottom: var(--a-3); }
.schritt__text  { color: var(--tinte-2); margin: 0; }


/* ── 10  PREISE ──────────────────────────────────────────────────────────── */

.preis-gitter { display: grid; gap: var(--a-7); }

.preis-karte {
  padding: clamp(var(--a-5), 3vw, var(--a-7));
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
}

.preistabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gr-klein);
}
.preistabelle th,
.preistabelle td {
  padding: var(--a-4) var(--a-2);
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}
.preistabelle thead th {
  color: var(--tinte-3);
  font-family: var(--schrift-text);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding-top: 0;
}
.preistabelle tbody th {
  font-family: var(--schrift-text);
  font-weight: 500;
  color: var(--tinte);
}
.preistabelle td { color: var(--tinte-2); }
.preistabelle tbody tr:last-child th,
.preistabelle tbody tr:last-child td { border-bottom: 0; }

/* Achtung Spezifität: `.preistabelle td` (Klasse + Element) wiegt schwerer
   als ein blosses `.preis` (nur Klasse). Ohne das vorangestellte
   `.preistabelle td` wurden text-align und color hier stillschweigend von
   der allgemeinen Zellenregel weiter oben überstimmt. */
.preistabelle td.preis {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  white-space: nowrap;
}
.preistabelle thead th:last-child { text-align: right; }

.hinweis {
  margin-top: var(--a-6);
  padding-top: var(--a-6);
  border-top: 1px solid var(--linie);
}
.hinweis p { font-size: var(--gr-klein); }


/* ── 11  FAQ ─────────────────────────────────────────────────────────────── */

.faq-gitter { display: grid; gap: var(--a-7); }
.faq { border-top: 1px solid var(--linie); }

.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  /* min-height sichert das Touchziel auch bei kurzen Fragen */
  min-height: 56px;
  padding-block: var(--a-4);
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 30;
  font-size: var(--gr-h3);
  cursor: pointer;
  list-style: none;
  transition: color var(--dauer) var(--kurve);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--jade-hell); }

/* Plus-Zeichen, das beim Öffnen zum Minus wird */
.frage summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--messing), var(--messing)) center/13px 1.5px no-repeat,
    linear-gradient(var(--messing), var(--messing)) center/1.5px 13px no-repeat;
  transition: transform var(--dauer) var(--kurve);
}
.frage[open] summary::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--messing), var(--messing)) center/13px 1.5px no-repeat;
}

.frage__antwort {
  padding-bottom: var(--a-5);
  padding-right: var(--a-6);
  max-width: 62ch;
}
.frage__antwort p { color: var(--tinte-2); }


/* ── 12  KONTAKT & FORMULAR ──────────────────────────────────────────────── */

.kontakt-gitter { display: grid; gap: var(--a-6); }

.kontaktkarte { display: grid; gap: var(--a-4); align-content: start; }

.direkt {
  display: block;
  padding: var(--a-5);
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  text-decoration: none;
  transition: border-color var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve);
}
.direkt:hover { border-color: var(--jade); background: var(--grund-2); }

.direkt__kopf {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  color: var(--tinte-3);
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: var(--a-2);
}
.direkt__icon { width: 15px; height: 15px; color: var(--jade); }
.direkt__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: 1.45rem;
  line-height: 1.25;
  /* Lange Adressen brechen statt zu überlaufen */
  overflow-wrap: anywhere;
}
.direkt__wert--klein { font-size: 1.05rem; }

.karte-block {
  padding: var(--a-5);
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.karte-block__notiz {
  margin-top: var(--a-4);
  font-size: var(--gr-klein);
  color: var(--tinte-3);
}

.adresse {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: var(--a-4);
}

.zeiten { display: grid; gap: var(--a-2); }
.zeit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--a-4);
  font-size: var(--gr-klein);
}
.zeit dt { color: var(--tinte-2); }
.zeit dd { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Formular ── */
.formular-huelle {
  padding: clamp(var(--a-5), 3vw, var(--a-7));
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
}

.formular { display: grid; gap: var(--a-5); }
.feld { display: grid; gap: var(--a-2); }
.feld-paar { display: grid; gap: var(--a-5); }

.feld label {
  font-size: var(--gr-klein);
  font-weight: 500;
  color: var(--tinte);
}
.pflicht { color: var(--messing); }

.feld input:not([type="checkbox"]),
.feld select,
.feld textarea {
  width: 100%;
  /* 16px Minimum verhindert das automatische Zoomen auf iOS */
  min-height: 52px;
  padding: var(--a-3) var(--a-4);
  background: var(--grund);
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-klein);
  font-size: 1rem;
  transition: border-color var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve);
}
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.feld select {
  appearance: none;
  /* Eigener Pfeil, damit das Feld in beiden Systemen gleich aussieht */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinte-2) 50%),
    linear-gradient(135deg, var(--tinte-2) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--a-8);
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: var(--tinte-3); }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(122, 155, 126, .2);
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--messing);
  outline-offset: 2px;
}

.feld__hilfe {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-3);
  line-height: 1.5;
}
/* Fehler stehen direkt beim Feld, nicht gesammelt am Seitenanfang */
.feld__fehler {
  margin: 0;
  font-size: var(--gr-klein);
  font-weight: 500;
  color: var(--fehler);
}
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--fehler); }

.feld--zustimmung { margin-top: calc(var(--a-1) * -1); }
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--a-3);
  align-items: start;
  cursor: pointer;
  font-size: var(--gr-klein);
  line-height: 1.55;
  color: var(--tinte-2);
}
.zustimmung input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--jade);
  cursor: pointer;
  flex: none;
}
.zustimmung a { color: var(--jade); }

.formular__fuss {
  margin: 0;
  font-size: .8125rem;
  color: var(--tinte-3);
  line-height: 1.55;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.meldung {
  padding: var(--a-4) var(--a-5);
  margin-bottom: var(--a-5);
  border-radius: var(--rund-klein);
  border-left: 3px solid;
  font-size: var(--gr-klein);
}
.meldung[hidden] { display: none; }
.meldung--ok {
  background: rgba(122, 155, 126, .12);
  border-color: var(--jade);
  color: var(--tinte);
}
.meldung--fehler {
  background: rgba(232, 139, 125, .12);
  border-color: var(--fehler);
  color: var(--tinte);
}


/* ── 13  FUSSZEILE ───────────────────────────────────────────────────────── */

.fuss {
  padding-block: var(--a-8) calc(var(--a-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--grund);
}

.fuss__oben {
  display: grid;
  gap: var(--a-6);
  padding-bottom: var(--a-6);
  border-bottom: 1px solid var(--linie);
}

.fuss__marke { display: flex; align-items: center; gap: var(--a-4); }
.fuss__marke .marke__zeichen { width: 38px; height: 38px; }
.fuss__name {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: 1.2rem;
  margin: 0;
}
.fuss__rolle {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-3);
}

.fuss__nav { display: flex; flex-wrap: wrap; gap: 0 var(--a-5); }
.fuss__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  font-size: var(--gr-klein);
  color: var(--tinte-2);
  text-decoration: none;
  transition: color var(--dauer) var(--kurve);
}
.fuss__nav a:hover { color: var(--jade-hell); }

.fuss__unten {
  display: grid;
  gap: var(--a-4);
  padding-top: var(--a-6);
  font-size: var(--gr-klein);
}
.fuss__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--a-2);
  margin: 0;
  color: var(--tinte-2);
}
.fuss__kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fuss__kontakt a:hover { color: var(--jade-hell); }
.fuss__punkt { color: var(--tinte-3); }

.fuss__recht { display: flex; flex-wrap: wrap; gap: 0 var(--a-5); }
.fuss__recht a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  color: var(--tinte-3);
  text-decoration: none;
}
.fuss__recht a:hover { color: var(--tinte); }


/* ── 14  RECHTLICHE UNTERSEITEN ──────────────────────────────────────────── */

.recht-kopf {
  padding-top: calc(var(--kopf-hoehe) + var(--a-8));
  padding-bottom: var(--a-6);
}

.recht {
  max-width: 44rem;
  padding-bottom: var(--band-abstand);
}
.recht h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
  margin: var(--a-8) 0 var(--a-4);
  padding-top: var(--a-5);
  border-top: 1px solid var(--linie);
}
.recht h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--a-6); }
.recht h3 {
  font-size: var(--gr-h3);
  margin: var(--a-6) 0 var(--a-3);
}
.recht p,
.recht li { color: var(--tinte-2); }
.recht p { max-width: 68ch; }

.recht a:not(.knopf):not(.text-link) {
  color: var(--jade);
  text-decoration-color: var(--messing-matt);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.recht a:not(.knopf):not(.text-link):hover { color: var(--jade-hell); }

.recht ul { margin: 0 0 var(--a-4); }
.recht ul li {
  position: relative;
  padding-left: var(--a-5);
  margin-bottom: var(--a-2);
  max-width: 66ch;
}
.recht ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--jade);
}

.daten-block {
  padding: var(--a-5);
  margin-bottom: var(--a-5);
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  line-height: 1.8;
  font-style: normal;
}
.daten-block a { text-decoration: none; }

.stand {
  margin-top: var(--a-8);
  padding-top: var(--a-5);
  border-top: 1px solid var(--linie);
  font-size: var(--gr-klein);
  color: var(--tinte-3);
}


/* ── 15  BEWEGUNG & BARRIEREFREIHEIT ─────────────────────────────────────── */

/* Sanftes Einblenden beim Scrollen. Startzustand nur setzen, wenn JS aktiv
   ist — sonst bliebe der Inhalt bei deaktiviertem JavaScript unsichtbar. */
.js .auftauchen {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
  transition-delay: var(--verzug, 0ms);
}
.js .auftauchen.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Wer im System reduzierte Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .auftauchen { opacity: 1; transform: none; }
  .enso--atmet svg { animation: none; }
  .hero__bild img,
  .hero__bild .platzhalter { animation: none; transform: none; }
}

/* Höherer Kontrastbedarf */
@media (prefers-contrast: more) {
  :root {
    --tinte-2: #DDD5C9;
    --tinte-3: #B5AB9D;
    --linie: rgba(245, 240, 232, .28);
    --linie-stark: rgba(245, 240, 232, .45);
  }
}


/* ══ BREAKPOINTS ═══════════════════════════════════════════════════════════
   Mobile First. Die Seite ist bis 320px Breite ohne horizontales Scrollen
   benutzbar.                                                                */

/* ── NUR HANDY (bis 767px): Hero-Inhalt höher setzen ──
   Auf schmalen Displays ist der Hero sehr hoch, der Text begann dadurch erst
   bei 32 % der Bildschirmhöhe. Zusätzlicher Abstand nach unten schiebt den
   bodenbündigen Inhaltsblock entsprechend nach oben.

   ► REGLER: nur --hero-hoch ändern.
     10svh = 10 % höher (aktuell) · 15svh = deutlicher · 0 = wie ursprünglich
   Ab Tablet greift diese Regel nicht — dort bleibt alles unverändert.        */
@media (max-width: 47.99em) {
  .hero {
    --hero-hoch: 10svh;
    padding-bottom: calc(clamp(3rem, 1rem + 8vw, 6.5rem) + var(--hero-hoch));
  }
}

/* ── ab 560px: kleine Tablets, große Handys quer ── */
@media (min-width: 35em) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
  .ablauf    { grid-template-columns: repeat(2, 1fr); gap: var(--a-5); }
  .fuss__unten {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ── ab 768px: Tablets ── */
@media (min-width: 48em) {
  .ueber {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--a-8);
    align-items: start;
  }
  /* Portrait bleibt beim Scrollen stehen, solange Text daneben läuft */
  .ueber__bild { position: sticky; top: calc(var(--kopf-hoehe) + var(--a-5)); }

  .bereich__gitter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--a-8);
    align-items: start;
  }
  .bereich__kopf { position: sticky; top: calc(var(--kopf-hoehe) + var(--a-6)); }

  .preis-gitter,
  .faq-gitter {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--a-8);
    align-items: start;
  }
  .preis-gitter .abschnitt-kopf,
  .faq-gitter .abschnitt-kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--a-6));
    margin-bottom: 0;
  }

  .kontakt-gitter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-6); }

  .fuss__oben {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .fuss__nav { justify-content: flex-end; }
}

/* ── ab 960px: Desktop — hier erscheint die volle Navigation ── */
@media (min-width: 60em) {
  :root { --kopf-hoehe: 84px; }

  .kopf__nav { display: flex; }
  .kopf__aktionen .knopf { display: inline-flex; }
  .burger { display: none; }
  .mobilmenue { display: none !important; }

  .ablauf { grid-template-columns: repeat(4, 1fr); }

  .hero__titel { letter-spacing: -.033em; }
}

/* ── ab 1200px: mehr Luft ── */
@media (min-width: 75em) {
  .bereich__gitter { gap: var(--a-9); }
  .ueber          { gap: var(--a-9); }
}

/* ── Querformat auf niedrigen Handy-Displays ── */
@media (max-height: 34em) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--kopf-hoehe) + var(--a-7)); }
  .mobilmenue__nav a { padding-block: var(--a-3); font-size: 1.2rem; }
}


/* ── DRUCKANSICHT ────────────────────────────────────────────────────────── */
@media print {
  .kopf, .mobilmenue, .hero__bild, .hero__schleier,
  .platzhalter, .enso--gross, .trenner, .formular-huelle { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .band--gehoben, .band--tief { background: #fff; padding-block: 1.5rem; }
  a { color: #000; }
  .recht a::after { content: " (" attr(href) ")"; font-size: .85em; }
}