/* ==========================================================================
   Schriften – lokal eingebunden
   --------------------------------------------------------------------------
   Bewusst NICHT über Google Fonts: Ein externer Aufruf würde bei jedem
   Seitenbesuch die IP-Adresse der Besucher an Google übertragen. Das ist
   ohne Einwilligung datenschutzrechtlich angreifbar. Lokal eingebunden
   verlässt kein Datenpaket den eigenen Server.
   Marcellus und Jost stehen unter der SIL Open Font License, das
   Selbsthosten ist davon ausdrücklich gedeckt.
   ========================================================================== */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300-latin.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400-latin.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin.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: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-400-latin-ext.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: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-400-latin.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;
}

/* ==========================================================================
   Miriam Zieler — Praxis für körperorientierte systemische Therapie
   Handgeschriebenes CSS. Kein Framework, kein Build-Step, kein JavaScript.
   ========================================================================== */

:root {
  /* Palette – direkt aus dem Design-Screenshot gesampelt */
  --dark:        #29422a;
  --dark-deep:   #1e3120;
  --sage:        #91bb86;
  --sage-light:  #a9cb9f;
  --sage-pale:   #cfe0c8;
  --black:       #000000;
  --ink:         #14200f;

  --font-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --font-body:    "Jost", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1180px;
  --gutter: 6vw;
  --header-h: 190px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--sage);
  -webkit-font-smoothing: antialiased;
}
/* height:auto ist hier zwingend: Die width/height-Attribute im HTML (nötig,
   damit beim Laden nichts springt) wirken sonst als feste Pixelhöhe und
   überstimmen das aspect-ratio der jeweiligen Bildregel. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0 0 0.7em;
}
h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
h4 { font-size: 1rem; letter-spacing: 0.09em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 820px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.95em 1.9em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* schwarzer Button mit salbeigrüner Schrift – wie im Design */
.btn-dark { background: var(--black); color: var(--sage); }
.btn-dark:hover { background: var(--dark); color: var(--sage-light); }

.btn-sage { background: var(--sage); color: var(--dark); }
.btn-sage:hover { background: var(--sage-light); }

.btn-outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.btn-outline:hover { background: var(--dark); color: var(--sage); }

/* helle Umriss-Variante für dunkle Flächen (Einwilligungsbanner) */
.btn-outline-light { background: transparent; color: var(--sage-pale); border-color: var(--sage-pale); }
.btn-outline-light:hover { background: var(--sage-pale); color: var(--dark); }

/* ==========================================================================
   Einwilligungsbanner
   --------------------------------------------------------------------------
   Beide Schaltflächen sind gleich groß und gleich gut sichtbar. Ein
   optisch abgeschwächtes "Ablehnen" wäre datenschutzrechtlich angreifbar.
   ========================================================================== */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--dark-deep);
  color: var(--sage-pale);
  border-top: 1px solid rgba(207, 224, 200, .25);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
}
.consent[hidden] { display: none; }
.consent-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.consent-titel {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--sage-light);
  margin: 0 0 0.5rem;
}
.consent-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 68ch;
  opacity: 0.9;
}
.consent-text a { border-bottom: 1px solid currentColor; white-space: nowrap; }
.consent-buttons {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
}
.consent-buttons .btn { white-space: nowrap; }

@media (max-width: 820px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .consent-buttons .btn { flex: 1; text-align: center; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--dark);
  position: relative;
  padding: 1.6rem 0 1.2rem;
}
/* Logo mittig; das Burger-Icon liegt absolut rechts, damit das Logo
   unabhängig von seiner Breite exakt zentriert bleibt. */
.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 3vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-logo img {
  width: 130px;
  height: auto;
}

/* --- Navigation --- */
.main-nav {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  gap: 2.6rem;
  flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-item > a {
  display: inline-block;
  color: var(--sage-pale);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.25em 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.nav-item > a:hover,
.nav-item > a[aria-current="page"],
.nav-item:hover > a,
.nav-item:focus-within > a {
  color: #fff;
  border-bottom-color: var(--sage);
}

/* CSS-only Dropdown */
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 235px;
  background: var(--dark-deep);
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 60;
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; }
.nav-sub a {
  display: block;
  padding: 0.55em 1.4em;
  color: var(--sage-pale);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-sub a:hover { background: var(--dark); color: #fff; }

/* Burger (nur mobil sichtbar) */
#nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  width: 30px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
}
.nav-toggle-label span {
  display: block;
  height: 2px;
  background: var(--sage-pale);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 5.5rem 0; }
.section--sage { background: var(--sage); color: var(--ink); }
.section--dark { background: var(--dark); color: var(--sage-pale); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--sage-light); }
.section--dark a { color: #fff; }

.section-title {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* --- Hero (dunkelgrün, direkt unter dem Header) --- */
.hero {
  background: var(--dark);
  text-align: center;
  padding: 2rem 0 3.5rem;
}
.hero h1 {
  color: var(--sage-light);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  letter-spacing: 0.07em;
  max-width: 30ch;
  margin: 0 auto;
}
/* Name als eigene, ruhigere Zeile unter dem Praxistitel */
.hero-name {
  display: block;
  margin-top: 0.75em;
  font-size: 0.82em;
  letter-spacing: 0.16em;
  color: var(--sage-pale);
  opacity: 0.9;
}
.page-hero {
  background: var(--dark);
  text-align: center;
  padding: 3rem 0 3.5rem;
}
.page-hero h1 { color: var(--sage-light); margin-bottom: 0; }
.page-hero p {
  color: var(--sage-pale);
  max-width: 60ch;
  margin: 1.2rem auto 0;
  opacity: 0.9;
}

/* --- Angebots-Panels (Startseite und Übersichtsseite) ------------------
   Jedes Panel ist ein einziger großer Link (Bild, Titel, Text, Hinweis).
   Dadurch ist die ganze Kachel klickbar, nicht nur ein kleiner Button.
   ---------------------------------------------------------------------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
/* Gestaffelter Schatten statt eines einzelnen weichen Flecks.
   Entscheidend ist die erste, sehr enge Ebene direkt an der Unterkante –
   dieser "Kontaktschatten" lässt die Kachel auf der Fläche aufliegen
   statt darüber zu schweben. Die beiden weicheren Ebenen darunter geben
   die Tiefe. Bewusst anders als der versetzte Rahmen bei den Bildern. */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--dark);
  color: var(--sage-pale);
  box-shadow:
    0 2px 3px rgba(20, 32, 15, .40),
    0 10px 20px rgba(20, 32, 15, .26),
    0 22px 44px rgba(20, 32, 15, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.panel:hover,
.panel:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 3px 5px rgba(20, 32, 15, .42),
    0 18px 32px rgba(20, 32, 15, .30),
    0 36px 68px rgba(20, 32, 15, .24);
}
.panel-media {
  display: block;
  overflow: hidden;          /* begrenzt den Zoom des Bildes beim Hover */
}
.panel-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.panel:hover .panel-media img { transform: scale(1.06); }

.panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.8rem 1.7rem 2rem;
}
.panel-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.2rem;
  color: var(--sage-light);
  margin-bottom: 0.9rem;
}
.panel-text {
  flex: 1;                    /* schiebt den Hinweis nach unten -> gleiche Höhe */
  font-size: 0.94rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}
.panel-link {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25em;
  align-self: flex-start;
}
.panel:hover .panel-link { color: #fff; }

/* --- Vollflächiges Bild mit Textspalte darüber --- */
.feature {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 620px;
  display: flex;
  align-items: center;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,32,15,.72) 0%, rgba(20,32,15,.55) 55%, rgba(20,32,15,.15) 100%);
}
/* Gleiches 3-Spalten-Raster wie die Panels, damit der Textblock exakt
   auf deren Außenkanten sitzt (statt frei auszulaufen). */
.feature .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.feature-text {
  grid-column: 1 / -1;   /* volle Rasterbreite: bündig mit erster und letzter Karte */
  color: #f3f0e6;
  text-align: justify;
}
.feature-text p:first-child { margin-bottom: 1.6em; }
.feature-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Zwei-Spalten Bild/Text --------------------------------------------
   Hochformatiges Bild neben dem Fließtext. Die Bildspalte ist etwas
   schmaler als die Textspalte, damit das hohe Bild den Text nicht erschlägt.
   `.split--reverse` schiebt das Bild auf die rechte Seite – so lässt sich
   die Seitenfolge im Wechsel setzen (links / rechts / links …).
   ---------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}
/* Bildrahmen: dünne Linie, diagonal hinter das Bild versetzt.
   Nimmt dem Foto die "schwebende" Wirkung und gibt ihm eine Kante,
   die aussieht wie ein gerahmter Print. Der Versatz spiegelt sich
   bei .split--reverse, damit er immer nach außen zeigt. */
.media {
  position: relative;
  margin: 0;
}
.media::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--dark);
  pointer-events: none;
}
.split--reverse .media::before { inset: 20px 20px -20px -20px; }

.media img {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 660px;
  object-fit: cover;
  box-shadow: 0 16px 38px rgba(20, 32, 15, .3);
}
.section--dark .media::before { border-color: var(--sage); }
/* Bild nach rechts – Spaltenbreiten mitdrehen, damit der Text
   auch hier die breitere Spalte behält */
.split--reverse { grid-template-columns: 1.15fr 0.85fr; }
.split--reverse .media { order: 2; }

/* Bei sehr langen Texten steht das Bild oben bündig mit der Überschrift,
   statt mittig in der Spalte zu schweben. Es bleibt dabei fest an seiner
   Stelle und scrollt normal mit der Seite weg. */
.split--sticky { align-items: start; }
.split--wide img { aspect-ratio: 3/2; max-height: none; }
.split-text > :first-child { margin-top: 0; }

/* --- Checklisten --- */
.check-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.65em;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--dark);
  transform: rotate(45deg);
}
.section--dark .check-list li::before { background: var(--sage); }

/* --- Schlichte Liste --- */
.plain-list li {
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(20,32,15,.18);
}
.section--dark .plain-list li { border-bottom-color: rgba(207,224,200,.22); }
.plain-list li:last-child { border-bottom: none; }
.plain-list strong { font-weight: 500; }

/* ==========================================================================
   Methoden (Ankerbereiche auf einer Seite)
   ========================================================================== */
/* Methoden-Abschnitt: nutzt .split, braucht nur die Sprungmarken-Korrektur.
   Die Methodenbilder sind 4:5 zugeschnitten (nicht 2:3 wie auf den
   Therapieseiten), deshalb hier ein eigenes Seitenverhältnis. */
.method { scroll-margin-top: 1.5rem; }
.method .media img {
  aspect-ratio: 4 / 5;
  max-height: 620px;
}
.method-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.method-nav a {
  border: 1px solid var(--sage);
  color: var(--sage-pale);
  padding: 0.5em 1.1em;
  font-size: 0.82rem;
  transition: background-color .18s ease, color .18s ease;
}
.method-nav a:hover { background: var(--sage); color: var(--dark); }

/* --- Breites Banner über einem Raster ----------------------------------
   Steht im selben Container wie das Raster darunter und ist dadurch
   automatisch exakt gleich breit – auch bei jeder anderen Fensterbreite.
   ---------------------------------------------------------------------- */
.banner {
  position: relative;
  margin: 0 0 3.5rem;
}
/* Gleicher versetzter Rahmen wie bei den Bildern und Preiskarten. */
.banner::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--dark);
  pointer-events: none;
}
.banner img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  box-shadow: 0 14px 32px rgba(20, 32, 15, .28);
}

/* ==========================================================================
   Preiskarten (Konditionen)
   ========================================================================== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
/* Gleicher versetzter Rahmen wie bei den Bildern (.media), damit die Karten
   nicht frei auf der Fläche schweben. Trick: Die Rahmenlinie hat dieselbe
   Farbe wie der Kartenhintergrund – innerhalb der Karte ist sie dadurch
   unsichtbar, sichtbar bleibt nur der herausstehende Teil. */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  color: var(--sage-pale);
  padding: 2.2rem 2rem;
  box-shadow: 0 14px 32px rgba(20, 32, 15, .28);
}
.price-card::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--dark);
  pointer-events: none;
}
.price-card > * { position: relative; }
.price-card h2 {
  font-size: 1.15rem;
  color: var(--sage-light);
  margin-bottom: 1.6rem;
}
.price-list {
  flex: 1;              /* schiebt den Link nach unten -> Karten gleich hoch */
  margin-bottom: 1.8rem;
}
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(207, 224, 200, .18);
}
.price-list li:last-child { border-bottom: none; }
.price-list span { opacity: 0.85; }
.price-list b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: #fff;
  white-space: nowrap;
}
.price-link {
  align-self: flex-start;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25em;
  transition: color .18s ease;
}
.price-link:hover { color: #fff; }

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* --- Linke Spalte: Adresse, Karte, Erreichbarkeit --- */
.contact-info h3 {
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  margin-bottom: 0.8rem;
}
.contact-info h3 + address,
.contact-info h3 + .contact-list { margin-top: 0; }
.contact-info address {
  font-style: normal;
  margin-bottom: 1.6rem;
}
.contact-info > h3:not(:first-child) { margin-top: 2.4rem; }

.contact-list { margin-bottom: 1.2rem; }
.contact-list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(20, 32, 15, .16);
}
.contact-list li:last-child { border-bottom: none; }
.contact-list span {
  flex: 0 0 5.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: 0.25em;
  opacity: 0.7;
}
.contact-list a { border-bottom: 1px solid transparent; }
.contact-list a:hover { border-bottom-color: currentColor; }

/* --- Karte (Zwei-Klick-Lösung) --- */
.map {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.6rem;
  background: var(--dark);
  overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 1.8rem;
  color: var(--sage-pale);
}
.map-placeholder p { margin: 0; font-size: 0.88rem; max-width: 34ch; }
.map-alt { font-size: 0.8rem; opacity: 0.8; }
.map-alt a { color: var(--sage); border-bottom: 1px solid currentColor; }
.map-alt a:hover { color: #fff; }

/* --- Rechte Spalte: Formular als dunkle Karte --- */
.form-card {
  background: var(--dark);
  color: var(--sage-pale);
  padding: 2.2rem 2rem 2.4rem;
}
.form-card h3 {
  color: var(--sage-light);
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  margin-bottom: 1.6rem;
}

/* Honigtopf gegen Spam: aus dem sichtbaren Bereich geschoben statt
   display:none – manche Roboter erkennen ausgeblendete Felder und
   überspringen sie dann. Screenreader überspringen es über aria-hidden. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  opacity: 0.8;
}
/* Felder als leicht aufgehellte Flächen statt harter weißer Kästen */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid rgba(207, 224, 200, .28);
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: #fff;
  transition: border-color .18s ease, background-color .18s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(207, 224, 200, .5); }
.contact-form input:hover,
.contact-form textarea:hover { border-color: rgba(207, 224, 200, .45); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--sage);
  background: rgba(255, 255, 255, .12);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { justify-self: start; margin-top: 0.4rem; }
.form-note {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.legal h2 { margin-top: 2.2em; font-size: 1.15rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal li { margin-bottom: 0.4em; padding-left: 1.2em; position: relative; }
.legal li::before { content: "–"; position: absolute; left: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: var(--sage-pale);
  padding: 4.5rem 0 2rem;
  font-size: 0.92rem;
}

/* Oberer Bereich: Name, Qualifikationen, Siegel – zentriert */
.footer-main { text-align: center; }
.footer-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.15rem;
  color: var(--sage-light);
  margin-bottom: 0.9rem;
}
.footer-credentials {
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.9;
  opacity: 0.88;
}
/* Transparentes PNG – liegt direkt auf dem dunklen Footer.
   Die blau/gelben Logofarben haben dort 4:1 bis 7:1 Kontrast,
   auf Weiß wären es nur 1,5:1 bis 2,7:1. */
.footer-badge {
  display: inline-block;
  margin-top: 2.6rem;
  transition: opacity .18s ease;
}
.footer-badge:hover { opacity: 0.8; }
.footer-badge img { width: 150px; height: auto; }

.footer-rule {
  border: none;
  border-top: 1px solid rgba(207, 224, 200, .28);
  margin: 3rem 0 1.6rem;
}

/* Untere Leiste: Kontaktdaten links, Rechtliches rechts */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
  opacity: 0.85;
}
.footer-bottom p { margin: 0; }
.footer-contact .sep { margin: 0 0.5em; opacity: 0.55; }

/* Rechte Seite der Fußleiste: Rechtslinks + Social-Icons */
.footer-end {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.footer-legal { display: flex; gap: 1.8rem; }
.footer-legal a { border-bottom: 1px solid transparent; }
.footer-legal a:hover { border-bottom-color: currentColor; }

.footer-social {
  display: flex;
  gap: 0.6rem;
}
.footer-social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(207, 224, 200, .4);
  border-radius: 50%;
  color: var(--sage-pale);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.footer-social a:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--dark);
}
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .panel-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* mehr Abstand, damit der versetzte Rahmen nicht in die nächste Karte läuft */
  .price-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .price-card::after { inset: 12px -12px -12px 12px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* einspaltig steht das Bild immer oben – auch bei .split--reverse */
  .media { order: 0; }
  .split--reverse .media { order: 0; }
  /* einspaltig ergibt Mitlaufen keinen Sinn – Bild steht oben */
  .banner { margin-bottom: 2.5rem; }
  .banner img { aspect-ratio: 3 / 2; }
  /* Versatz nach links, damit er rechts nicht über den Rand ragt */
  .banner::before { inset: 14px 14px -14px -14px; }
  .media img { aspect-ratio: 4/3; max-height: 420px; }
  /* Versatzrahmen einrücken, damit er nicht aus dem Viewport ragt */
  /* Einspaltig zeigt der Versatz nach links unten statt nach rechts unten.
     Rechts steht kein Platz zur Verfügung – dort erzeugte der Überstand
     horizontales Scrollen. Links fängt ihn der Seitenrand auf. */
  .media::before,
  .split--reverse .media::before { inset: 14px 14px -14px -14px; }
  .feature { min-height: 0; padding: 4rem 0; }
  .feature-text { max-width: none; text-align: left; }
  .feature::before {
    background: linear-gradient(180deg, rgba(20,32,15,.75), rgba(20,32,15,.75));
  }
}

@media (max-width: 820px) {
  .header-logo img { width: 96px; }
  .nav-toggle-label { display: flex; }

  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 1.2rem;
    padding: 0 3vw;
  }
  #nav-toggle:checked ~ .main-nav { display: flex; }
  .nav-item > a {
    display: block;
    padding: 0.8em 0;
    border-bottom: 1px solid rgba(207,224,200,.2);
  }
  /* Dropdowns auf Mobil dauerhaft ausklappen */
  .nav-sub {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.5rem;
    min-width: 0;
  }
  .nav-sub a { padding: 0.55em 0 0.55em 1.4em; opacity: 0.85; }

  .section { padding: 3.5rem 0; }
  .form-row { grid-template-columns: 1fr; }
  /* Footer-Leiste einspaltig und zentriert statt links/rechts */
  .footer-bottom { flex-direction: column; text-align: center; gap: 1.4rem; }
  .footer-contact .sep { display: block; height: 0; overflow: hidden; margin: 0; }
  .footer-end { flex-direction: column; gap: 1.2rem; }
  .footer-legal { justify-content: center; }
  .footer-badge img { width: 130px; }
}