/* =========================================================================
   meetngrow.de — Stylesheet
   Aufbau dieser Datei:
     1. Schriften
     2. Stellschrauben (:root)
     3. Grundlagen
     4. Kopf und Fuss
     5. Bausteine (Knopf, Vorzeile, Bildrahmen)
     6. Die Bloecke der Startseite
     7. Unterseiten, Blog, Formular
     8. Ein Block pro Bildschirm  <- zum Abschalten diesen Teil loeschen
   ========================================================================= */


/* ----------------------------------------------------------------- 1. Schriften
   Liegen selbst auf dem Server, es wird nichts von Google nachgeladen.
   Lizenz: SIL Open Font License, siehe assets/fonts/OFL-*.txt         */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/open-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ----------------------------------------------------------------- 2. Stellschrauben
   Hier stehen alle Farben und Groessen an einer Stelle.               */

:root {
  /* Farben — uebernommen von der bisherigen Seite */
  --sand:        #f2e4db;   /* Beige-Feld "Zur Person", passend zur Strichzeichnung */
  --mint:        #f1f6f2;   /* Feld "Mein Angebot" */
  --salbei:      #82a189;   /* Knoepfe, Praxis-Karte */
  --salbei-tief: #5d7c66;   /* Hover, kraeftige Beschriftungen */
  --ocker:       #c58227;   /* grosse Ueberschriften, Zitate */
  --creme:       #fdf1e9;   /* Fusszeile */
  --tinte:       #2f2f2d;   /* Fliesstext */
  --tinte-leise: #6f6f6b;   /* Vorzeilen, Bildunterschriften */
  --linie:       #e0d8d2;
  --weiss:       #ffffff;

  /* Schrift */
  --schrift-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --schrift-text:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gr-display: clamp(2.75rem, 6.2vw, 4.75rem);
  --gr-h2:      clamp(2rem, 4.2vw, 3.25rem);
  --gr-h3:      clamp(1.1rem, 1.5vw, 1.3rem);
  --gr-text:    clamp(0.9375rem, 0.55vw + 0.8rem, 1.0625rem);
  --gr-klein:   0.8125rem;
  --gr-vorzeile: 0.72rem;

  /* Mass */
  --kopf:  4.25rem;         /* Hoehe der Kopfleiste */
  --breit: 78rem;           /* maximale Inhaltsbreite */
  --rand:  clamp(1.25rem, 6vw, 3.75rem);
}


/* ----------------------------------------------------------------- 3. Grundlagen */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--kopf);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 400;
  color: var(--tinte);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

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

a { color: var(--salbei-tief); text-underline-offset: 0.18em; }
a:hover { color: var(--ocker); }

:focus-visible {
  outline: 2px solid var(--ocker);
  outline-offset: 3px;
  border-radius: 2px;
}

.zur-hauptsache {
  position: absolute; left: -9999px;
  background: var(--weiss); color: var(--tinte);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.zur-hauptsache:focus { left: 1rem; top: 1rem; }

/* nur fuer Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* rueckt Inhalt ein und begrenzt die Breite — in jedem Block dasselbe */
.breit {
  width: 100%;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}


/* ----------------------------------------------------------------- 4. Kopf und Fuss */

.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf);
  display: flex; align-items: center;
  background: rgb(255 255 255 / 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgb(255 255 255 / 0.72); backdrop-filter: blur(12px) saturate(1.2); }
}
.kopf[data-gescrollt] { border-bottom-color: var(--linie); }

.kopf .breit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.marke { display: inline-flex; align-items: center; }
.marke img { height: 2.6rem; width: auto; }

.hauptmenue ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1.1rem, 2.6vw, 2.4rem);
}
.hauptmenue a {
  color: var(--tinte);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
.hauptmenue a:hover,
.hauptmenue a[aria-current="page"] { color: var(--salbei-tief); border-bottom-color: var(--salbei); }

.fuss {
  background: var(--creme);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}
.fuss .breit { text-align: center; }
.fuss nav {
  display: flex; flex-wrap: wrap; gap: 0 0.6rem;
  align-items: baseline; justify-content: center;
}
.fuss__zeile { margin: 0.9rem 0 0; font-size: 0.75rem; opacity: 0.75; }
.fuss a { color: var(--tinte-leise); text-decoration: none; }
.fuss a:hover { color: var(--ocker); text-decoration: underline; }


/* ----------------------------------------------------------------- 5. Bausteine */

.knopf {
  display: inline-block;
  background: var(--salbei);
  color: var(--weiss);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  padding: 0.95em 2.4em;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s, transform 0.25s;
}
.knopf:hover { background: var(--salbei-tief); color: var(--weiss); transform: translateY(-2px); }
.knopf:active { transform: none; }

/* die kleine Grossbuchstaben-Zeile ueber den Ueberschriften */
.vorzeile {
  font-size: var(--gr-vorzeile);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 1.1rem;
  line-height: 1.6;
  font-weight: 400;
}

.gr-display { font-size: var(--gr-display); }
.gr-h2 { font-size: var(--gr-h2); }
.ocker { color: var(--ocker); }

/* Einklappbarer Textteil.
   Auf grossen Fenstern immer offen und unsichtbar — der Text liest sich
   durchgehend. Auf Telefonen zugeklappt, damit der Block auf einen
   Bildschirm passt. main.js steuert das Auf und Zu; ohne JavaScript
   steht im HTML "open", der Text ist also nie verborgen. */
.mehr > summary { display: none; }
.mehr > p:first-of-type { margin-top: 0; }

@media (max-width: 960px) {
  .mehr > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--salbei-tief);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--salbei);
  }
  .mehr > summary::-webkit-details-marker { display: none; }
  .mehr > summary::after { content: "\00A0\25BE"; }
  .mehr[open] > summary { margin-bottom: 1rem; }
  .mehr[open] > summary::after { content: "\00A0\25B4"; }
}

/* Bild, das seinen Rahmen ausfuellt, ohne ihn hoeher zu machen */
.fuellbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* ----------------------------------------------------------------- 6. Die Bloecke der Startseite
   Muster fuer alle: <section class="…"> randlos, traegt Hoehe und
   Hintergrund; darin ein <div class="breit"> fuer die Einrueckung.     */

.block {
  position: relative;
  min-height: 100svh;
  padding-top: var(--kopf);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* --- Buehne ------------------------------------------------------- */
/* Das Bild beginnt unter der weissen Kopfleiste — wie auf der alten Seite,
   wo oben ein weisses Band ueber die ganze Breite lief. */
.buehne__bild { position: absolute; inset: var(--kopf) 0 0 50%; }
.buehne .breit { max-width: var(--breit); }
.buehne__text { max-width: 30rem; padding-block: 2rem; }
.buehne h1 { margin-bottom: 0.55em; }
.buehne__lauf { margin-bottom: 1.6em; }
.buehne__gruss { color: var(--salbei-tief); margin-bottom: 2em; }

/* --- Mein Angebot ------------------------------------------------- */
.angebot { background: var(--weiss); }
/* das Mint-Feld laeuft rechts bis an den Fensterrand */
.angebot__grund { position: absolute; inset: 0 0 0 50%; background: var(--mint); }
.angebot .breit {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 2.5rem;
}
.angebot__text { max-width: 38rem; }
.angebot__text h2 { margin-bottom: 0.5em; }
.angebot__lauf { font-size: 0.9375rem; line-height: 1.85; }
.angebot .knopf { margin-top: 2rem; }
/* Das Bild sitzt im oberen Drittel des Mint-Feldes und nimmt rund
   60 Prozent seiner Breite ein — so war es auf der alten Seite. */
.angebot__bild { position: relative; aspect-ratio: 4 / 3.2; align-self: start; }
.angebot__bild img { position: absolute; top: 6%; left: 13%; width: 76%; aspect-ratio: 0.84; object-fit: cover; }

/* --- Zur Person --------------------------------------------------- */
.person { background: var(--weiss); }
.person__grund { position: absolute; inset: 0 50% 0 0; background: var(--sand); }
.person .breit {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: 1.75rem;
}
.person__zeichnung { text-align: center; }
.person__zeichnung img { margin-inline: auto; max-height: 48svh; width: auto; }
.person__losung {
  font-size: var(--gr-klein);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-top: 1.5rem;
  text-align: left;   /* stand auf der alten Seite unten links im Sandfeld */
}
.person__losung b { color: var(--tinte); font-weight: 600; letter-spacing: 0.16em; }
.person__text { max-width: 34rem; }
/* Auf der alten Seite endeten in dieser Spalte alle Zeilen an derselben
   rechten Kante. Das ist beibehalten. */
.person__text--rechts { text-align: right; margin-left: auto; }
.person__text--rechts .knopf { margin-left: auto; }
.person__text h2 { margin-bottom: 0.6em; }
.person__lauf { font-size: 0.9375rem; line-height: 1.85; }
.person .knopf { margin-top: 1.8rem; }

/* --- Zitat -------------------------------------------------------- */
.zitat {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(0, 1.35fr) 1fr;
}
.zitat__spalte { position: relative; display: grid; grid-auto-rows: 1fr; }
.zitat__feld { position: relative; overflow: hidden; }
.zitat__mitte {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: calc(var(--kopf) + 2rem) clamp(1.5rem, 4vw, 3.5rem) 2rem;
  background: var(--weiss);
}
.zitat__marke { width: clamp(48px, 5vw, 68px); opacity: 0.85; margin-bottom: 1.5rem; }
.zitat blockquote {
  margin: 0; font-family: var(--schrift-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1.32; color: var(--ocker); text-wrap: balance;
}
.zitat figcaption {
  margin-top: 1.6rem; font-size: var(--gr-vorzeile);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinte-leise);
}
.zitat .knopf { margin-top: 2.2rem; }

/* --- Behandlungsfokus (bewusst laenger als ein Bildschirm) -------- */
.fokus { background: var(--weiss); justify-content: flex-start; }
.fokus .breit { padding-block: clamp(2.5rem, 5vw, 4rem); }
.fokus h2 { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
/* Zwei Spalten. Links steht oben der Vorspann, rechts beginnen die Themen
   sofort — genau wie auf der alten Seite. Kommt ein Thema dazu, gehoert es
   in eine der beiden Listen; die Spalten fuellen sich nicht von selbst um. */
.fokus__spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 12vw, 7rem);
  align-items: start;
}
.fokus__vorspann { font-size: 0.9375rem; margin-bottom: 2rem; }
.fokus__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem;
}
.fokus__liste li { break-inside: avoid; }
.fokus__liste b {
  display: block;
  font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--salbei-tief);
  line-height: 1.5;
}
.fokus__liste b::before {
  content: "\03A8"; /* Psi — Zeichen der bisherigen Seite */
  color: var(--ocker);
  font-family: var(--schrift-display);
  font-size: 1.15em; margin-right: 0.5em;
  text-transform: none;
}
.fokus__liste p { font-size: 0.875rem; line-height: 1.7; margin: 0.3rem 0 0 1.6rem; color: var(--tinte-leise); }
.fokus__hinweis {
  margin-top: 2rem;
  font-size: var(--gr-klein); color: var(--tinte-leise);
}

/* --- Goldstein-Zitat --------------------------------------------- */
.goldstein { background: var(--weiss); }
.goldstein .breit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: 2.5rem;
}
.goldstein blockquote {
  margin: 0; max-width: 30rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.55; color: var(--salbei-tief);
}
.goldstein blockquote p + p { margin-top: 1.1em; }
.goldstein figcaption {
  margin-top: 1.8rem; font-size: var(--gr-klein);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinte); font-weight: 600;
}
.goldstein__bild { position: relative; aspect-ratio: 3 / 2.2; }

/* --- Praxis ------------------------------------------------------- */
/* Die Salbei-Karte lief auf der alten Seite bis an den linken Fensterrand
   und nahm gut ein Drittel der Breite ein. Deshalb sitzt das Raster hier
   am Abschnitt selbst und nicht in einem eingerueckten .breit. */
.praxis {
  background: var(--weiss);
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 6vw, 5rem);
}
.praxis__karte {
  background: var(--salbei); color: var(--weiss);
  padding: clamp(2rem, 4vw, 3.25rem);
  padding-left: var(--rand);
  display: flex; flex-direction: column; justify-content: center;
}
.praxis__karte .vorzeile { color: rgb(255 255 255 / 0.72); }
.praxis__karte a {
  color: var(--weiss); text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.45);
  display: inline-block; padding: 0.2rem 0;
}
.praxis__karte a:hover { color: var(--weiss); border-bottom-color: var(--weiss); }
/* Auf der alten Seite stand die Anschrift in Grossbuchstaben. Die
   Umwandlung macht das CSS — im HTML steht normale Schreibweise, damit
   Vorleseprogramme die Adresse richtig aussprechen. */
.praxis__anschrift {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  line-height: 2.3;
}
.praxis__anschrift a[href^="mailto"] { font-weight: 600; }
/* Rechts stand auf der alten Seite schlicht Name und Qualifikation,
   in derselben Groesse wie der Fliesstext und in Salbei. Keine grosse
   Ueberschrift, keine Trennlinien. */
.praxis__person {
  padding-right: var(--rand);
  max-width: 26rem;
  color: var(--salbei);
  font-size: 0.9375rem;
  line-height: 1.9;
}

/* --- Kosten ------------------------------------------------------- */
.kosten { background: var(--weiss); }
.kosten .breit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: 2.5rem;
}
.kosten__text { max-width: 34rem; }
.kosten__text h2 { margin-bottom: 0.6em; }
.kosten__text p { font-size: 0.9375rem; }
.kosten .knopf { margin-top: 1.8rem; }
.kosten__bild { position: relative; aspect-ratio: 4 / 3; }

/* --- Galerie ------------------------------------------------------ */
.galerie { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.galerie__feld { position: relative; overflow: hidden; }
.galerie img { transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.galerie__feld:hover img { transform: scale(1.05); }


/* ----------------------------------------------------------------- 7. Unterseiten, Blog, Formular */

.seite { padding: calc(var(--kopf) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 7vw, 5rem); }
.seite__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.seite__kopf h1 { margin-bottom: 0.4em; }
.seite__vorspann { font-size: 1.0625rem; color: var(--tinte-leise); max-width: 38rem; }

/* Fliesstext linksbuendig — angenehmer zu lesen als zentriert */
.seite__inhalt { max-width: 44rem; text-align: left; }
.seite__inhalt h2 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  margin: 2.5em 0 0.6em;
}
.seite__inhalt h2:first-child { margin-top: 0; }
.seite__inhalt h3 { font-size: var(--gr-h3); margin: 2em 0 0.5em; }
.seite__inhalt ul, .seite__inhalt ol { padding-left: 1.3em; }
.seite__inhalt li { margin-bottom: 0.5em; }
.seite__inhalt dl { margin: 0; }
.seite__inhalt dt { font-weight: 600; margin-top: 1.2em; }
.seite__inhalt dd { margin: 0.2em 0 0; }

/* Blog-Uebersicht */
.beitraege {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.beitrag a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  background: var(--weiss);
  border: 1px solid var(--linie);
  transition: border-color 0.25s, transform 0.25s;
}
.beitrag a:hover { border-color: var(--salbei); transform: translateY(-3px); }
.beitrag__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mint); }
.beitrag__bild img { width: 100%; height: 100%; object-fit: cover; }
.beitrag__inhalt { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.beitrag time { font-size: var(--gr-vorzeile); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); }
.beitrag h2 { font-size: 1.3rem; margin: 0.55rem 0 0.7rem; }
.beitrag p { font-size: 0.875rem; color: var(--tinte-leise); line-height: 1.65; margin: 0; }
.beitrag__weiter { margin-top: auto; padding-top: 1.1rem; font-size: 0.8125rem; color: var(--salbei-tief); }
.beitrag a:hover .beitrag__weiter { color: var(--ocker); }

/* einzelner Beitrag */
.beitrag-kopf { max-width: 44rem; }
.beitrag-kopf time { font-size: var(--gr-vorzeile); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); }
.beitrag-kopf h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0.5rem 0 0; }
.beitrag-bild { margin: clamp(2rem, 4vw, 3rem) 0; }
.beitrag-bild img { width: 100%; max-height: 60svh; object-fit: cover; }
.zurueck { display: inline-block; margin-top: 3rem; font-size: 0.875rem; text-decoration: none; }
.zurueck::before { content: "\2190\00A0"; }

/* Blaettern zwischen Beitraegen */
.blaettern { background: var(--mint); padding: clamp(2rem, 4vw, 3rem) 0; }
.blaettern .breit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.blaettern a {
  text-decoration: none; color: var(--tinte);
  font-family: var(--schrift-display); font-size: 1.05rem; line-height: 1.35;
  display: block; padding: 0.35rem 0;
}
.blaettern a span {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--schrift-text); font-size: var(--gr-vorzeile);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise);
}
.blaettern a:hover { color: var(--ocker); }
.blaettern__zurueck { grid-column: 2; text-align: right; }
.blaettern__vor { grid-column: 1; }
@media (max-width: 640px) {
  .blaettern .breit { grid-template-columns: 1fr; }
  .blaettern__zurueck, .blaettern__vor { grid-column: 1; text-align: left; }
}

/* Formular */
.formular { max-width: 34rem; display: grid; gap: 1.35rem; }
.feld { display: grid; gap: 0.4rem; }
.feld > span { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--tinte-leise); }
.feld input, .feld textarea {
  font: inherit; font-size: 0.9375rem; color: var(--tinte);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linie); background: var(--weiss);
  border-radius: 0; width: 100%;
}
.feld input:focus, .feld textarea:focus { border-color: var(--salbei); outline: 2px solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px rgb(130 161 137 / 0.25); }
.feld textarea { min-height: 11rem; resize: vertical; }
.pflicht { color: var(--ocker); }
.haken { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.8125rem; line-height: 1.6; color: var(--tinte-leise); }
.haken input { margin: 0.25rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--salbei); }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 0.9rem 1.1rem; font-size: 0.875rem; border-left: 3px solid var(--salbei); background: var(--mint); }
.meldung[data-art="fehler"] { border-left-color: var(--ocker); background: #fdf3e6; }
.meldung:empty { display: none; }

/* Kontakt-Nebenspalte */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.kontakt-direkt { background: var(--mint); padding: clamp(1.75rem, 3vw, 2.5rem); }
.kontakt-direkt h2 { font-size: var(--gr-h3); margin-bottom: 1rem; }
.kontakt-direkt address { font-style: normal; line-height: 2; font-size: 0.9375rem; }
.abstand-oben { margin-top: 1.75rem; }

/* Verweise mitten im Text bekommen eine groessere Beruehrflaeche, ohne
   dass sich der Zeilenabstand veraendert: das Polster wird durch einen
   gleich grossen negativen Aussenabstand wieder ausgeglichen. */
.seite__inhalt a,
.kontakt-direkt a,
.fuss a,
.haken a {
  padding-block: 0.35rem;
  margin-block: -0.35rem;
  display: inline-block;
}


/* ----------------------------------------------------------------- 8. Ein Block pro Bildschirm
   Loeschen, wenn die Startseite ganz normal scrollen soll.
   Die Bloecke behalten dann ihre volle Hoehe, nur das Einrasten faellt weg. */

.startseite { scroll-snap-type: y proximity; }
.startseite .block,
.startseite .zitat,
.startseite .galerie { scroll-snap-align: start; }
/* Der Behandlungsfokus ist absichtlich laenger als ein Bildschirm —
   dort waere ein starres Einrasten stoerend. */
.startseite .fokus { scroll-snap-align: start; scroll-snap-stop: normal; }

@media (max-height: 700px) {
  /* Flache Fenster — Handy im Querformat, kleine Altgeraete, geteilte
     Bildschirme. Dort passt der Text nicht auf eine Bildschirmhoehe,
     ein starres Raster waere nur hinderlich. */
  .startseite { scroll-snap-type: none; }
  .block, .zitat, .galerie { min-height: 0; height: auto; }
}


/* ----------------------------------------------------------------- Anpassung an kleinere Fenster */

@media (max-width: 960px) {
  :root { --kopf: 3.75rem; }

  .buehne { padding-top: 0; }
  .buehne__bild { position: relative; inset: auto; height: 38svh; }
  .buehne .breit { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
  .buehne__text { max-width: 34rem; }

  .angebot__grund { inset: auto 0 0 0; height: 46%; }
  .angebot .breit { grid-template-columns: 1fr; gap: 1.75rem; }
  .angebot__bild { order: 2; aspect-ratio: 16 / 9; }
  .angebot__text { order: 1; }
  .angebot__lauf { font-size: 0.875rem; line-height: 1.7; }

  .person__grund { inset: 0 0 auto 0; height: 42%; }
  .person .breit { grid-template-columns: 1fr; gap: 1.75rem; }
  .person__zeichnung img { max-height: 26svh; }
  .person__losung { margin-top: 0.9rem; }
  .person__lauf { font-size: 0.875rem; line-height: 1.7; }

  .zitat { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  .zitat__spalte { grid-auto-rows: auto; grid-auto-flow: column; }
  .zitat__mitte { padding-top: 2.5rem; }

  .fokus__spalten { grid-template-columns: 1fr; gap: 0; }
  .fokus__spalten > div + div { margin-top: 1.6rem; }

  .goldstein .breit,
  .kosten .breit { grid-template-columns: 1fr; gap: 1.75rem; }

  .praxis {
    grid-template-columns: 1fr;
    align-content: center;
    row-gap: 1.75rem;
  }
  .praxis__karte { padding-inline: var(--rand); }
  .praxis__person { padding-inline: var(--rand); max-width: none; }

  /* rechtsbuendig wirkt in einer schmalen Spalte unruhig */
  .person__text--rechts { text-align: left; }
  .person__text--rechts .knopf { margin-left: 0; }
  .goldstein__bild, .kosten__bild { aspect-ratio: 16 / 9; }
  .goldstein blockquote { font-size: 1.0625rem; }

  .kontakt-raster { grid-template-columns: 1fr; }
}

/* Feinabstimmung fuer Telefone: hier wird an Bildhoehen, Abstaenden und
   Zeilenabstand gedreht, bis jeder Block auf eine Bildschirmhoehe passt.
   Gemessen bei 390x844; darunter schaltet sich das Einrasten ohnehin ab. */
@media (max-width: 700px) {
  .buehne__bild { height: 29svh; }
  .buehne .breit { padding-block: 1rem; }
  .buehne .vorzeile { margin-bottom: 0.7rem; }
  .buehne h1 { margin-bottom: 0.35em; }
  .buehne__lauf { font-size: 0.875rem; line-height: 1.62; margin-bottom: 1.1em; }
  .buehne__gruss { font-size: 0.875rem; margin-bottom: 1.35em; }

  .angebot .breit { gap: 1.25rem; }
  .angebot__bild { aspect-ratio: 16 / 7; }
  .angebot__bild img { inset: 6% 12% auto; width: 76%; aspect-ratio: 16 / 9; }
  .angebot .knopf { margin-top: 1.15rem; }
  .angebot__lauf { font-size: 0.8438rem; line-height: 1.56; }

  .person .breit { gap: 1.25rem; }

  .goldstein .breit { gap: 1.25rem; }
  .goldstein__bild { aspect-ratio: 16 / 8; }
  .goldstein blockquote { font-size: 1rem; line-height: 1.5; }
  .goldstein figcaption { margin-top: 1.1rem; }

  .kosten .breit { gap: 1.25rem; }
  .kosten__bild { aspect-ratio: 16 / 9; }

  .fokus .breit { padding-block: 2rem; }
  .fokus__vorspann { margin-bottom: 1.75rem; }
  .fokus__liste { gap: 1.1rem; }
  .fokus__hinweis { margin-top: 1.75rem; }
}

@media (max-width: 640px) {
  .galerie { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .zitat__marke { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}