/* ------------------------------------------------------------------
   Beziehungscoach Dan
   Gemeinsames Stylesheet für alle Seiten.

   Farben und Schriften sind unten als Variablen definiert.
   Wenn du etwas ändern willst, ändere sie hier einmal,
   und es gilt auf allen Seiten.
   ------------------------------------------------------------------ */

:root{
  color-scheme: dark;

  /* Farben. Die Seite ist bewusst durchgehend dunkel,
     unabhaengig von der Einstellung des Besuchers. */
  --grund:      #0D1512;   /* Seitenhintergrund */
  --flaeche:    #16201C;   /* feste Karten ohne Glaseffekt */
  --flaeche-2:  #1C2823;   /* zweite Ebene */
  --tinte:      #E7EEE9;   /* Fliesstext und Ueberschriften */
  --tinte-weich:#A6B3AB;   /* Nebentext */
  --tinte-zart: #8D9A92;   /* Bildunterschriften, Labels */
  --linie:      #2A3833;
  --gruen:      #83B7A2;   /* Hauptakzent */
  --gruen-hell: #172E27;
  --gold:       #D3AE66;   /* sparsamer Zweitakzent, grosse Ziffern */
  --gold-text:  #D3AE66;
  --knopf-text: #080C0A;   /* Schrift auf gefuellten Buttons */
  --gold-hell:  #26200F;

  /* Glaseffekt */
  --glas:        rgba(255,255,255,.055);
  --glas-stark:  rgba(255,255,255,.09);
  --glas-rand:   rgba(255,255,255,.14);
  --glas-schatten: 0 18px 50px -22px rgba(0,0,0,.7);
  --unschaerfe:  saturate(150%) blur(18px);

  /* Farbflecken im Hintergrund */
  --fleck-1: rgba(46,93,79,.55);
  --fleck-2: rgba(168,129,58,.24);
  --fleck-3: rgba(131,183,162,.20);
  --fleck-4: rgba(20,32,27,.9);

  /* Schriften */
  --serif: "Petrona", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Masse */
  --spalte: 720px;
  --weit:   960px;
  --breit:  1140px;
  --rund:   20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100%;
}

/* Weicher Farbverlauf im Hintergrund, auf dem das Glas aufliegt.
   Bewusst nur aus Farbe gebaut, ohne Fotos: keine Lizenzfragen,
   nichts nachzuladen, funktioniert in hell und dunkel. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%,  var(--fleck-3) 0%, transparent 62%),
    radial-gradient(55% 40% at 88% 4%,  var(--fleck-2) 0%, transparent 60%),
    radial-gradient(70% 55% at 78% 62%, var(--fleck-1) 0%, transparent 65%),
    radial-gradient(50% 40% at 18% 85%, var(--fleck-2) 0%, transparent 62%),
    var(--grund);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--gruen)}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--gruen);outline-offset:3px;border-radius:6px;
}

.spalte{max-width:var(--spalte);margin:0 auto;padding:0 24px}
.weit{max-width:var(--weit);margin:0 auto;padding:0 24px}
.breit{max-width:var(--breit);margin:0 auto;padding:0 24px}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,5.2vw,62px);line-height:1.06}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.16}
h3{font-size:21px;line-height:1.3}
p{margin:0 0 18px;max-width:64ch}
.lead{font-size:20px;line-height:1.6;color:var(--tinte-weich)}
.label{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gruen);
  margin:0 0 18px;
}
.zart{color:var(--tinte-zart);font-size:14px}

/* ---------- Glas ---------- */
.glas{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);
  border-radius:var(--rund);
  box-shadow:var(--glas-schatten);
}
/* Falls der Browser kein backdrop-filter kann, wird das Glas einfach fester */
@supports not (backdrop-filter: blur(4px)){
  .glas{background:var(--glas-stark)}
}

/* ---------- Kopfleiste ---------- */
.kopf{
  position:sticky;top:0;z-index:20;
  background:var(--glas-stark);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--glas-rand);
}
.kopf .breit{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.marke{font-family:var(--serif);font-size:19px;font-weight:600;text-decoration:none;color:var(--tinte);line-height:1.15}
.marke span{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{font-size:15px;text-decoration:none;color:var(--tinte-weich)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinte)}
/* Der Button in der Navigation behaelt seine eigene Textfarbe.
   Ohne diese Zeile gewinnt .nav a und der Text wird unsichtbar. */
.nav a.knopf{color:var(--knopf-text)}
.nav a.knopf:hover{color:var(--knopf-text)}

/* ---------- Ausklappmenü "Themen" ---------- */
.menue{position:relative}
.menue-knopf{
  font-family:var(--sans);font-size:15px;color:var(--tinte-weich);
  background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:inherit;
}
.menue-knopf:hover,.menue-knopf[aria-expanded="true"]{color:var(--tinte)}
.menue-knopf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.menue-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.menue-inhalt{
  display:none;position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  min-width:580px;padding:18px;z-index:30;
  /* Hier bewusst deckend, damit die Überschrift dahinter nicht durchscheint */
  background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:0 28px 60px -26px rgba(23,33,28,.45);
  grid-template-columns:1fr 1fr;gap:6px;
}
.menue.offen .menue-inhalt{display:grid}
/* Mit Maus geht das Menü schon beim Darüberfahren auf.
   Auf dem Touchscreen bleibt der Klick zuständig. */
@media (hover:hover) and (pointer:fine){
  .menue:hover .menue-inhalt{display:grid}
}
/* Unsichtbare Brücke, damit der Mauszeiger die Lücke überqueren kann */
.menue::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.menue-inhalt a{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 14px;border-radius:14px;text-decoration:none;color:var(--tinte);
}
.menue-inhalt a:hover{background:var(--gruen-hell)}
.menue-inhalt a b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;white-space:nowrap}
.menue-inhalt a span{display:block;font-size:13px;color:var(--tinte-zart);line-height:1.45;margin-top:2px}
.menue-inhalt a svg{width:22px;height:22px;flex:0 0 22px;margin-top:3px;
  stroke:var(--gruen);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.knopf{
  display:inline-block;font-family:var(--sans);font-size:16px;font-weight:700;
  text-decoration:none;padding:15px 30px;border-radius:999px;
  background:var(--gruen);color:var(--knopf-text);border:1px solid var(--gruen);
  box-shadow:0 10px 24px -12px rgba(46,93,79,.7);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.knopf:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(46,93,79,.8)}
.knopf.leise{
  background:var(--glas-stark);color:var(--gruen);border-color:var(--glas-rand);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;
}
.knopf-zeile{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:30px 0 0}
.knopf-zeile .zart{flex-basis:100%;margin:0}

/* ---------- Abschnitte ---------- */
section{padding:84px 0}
section.eng{padding:56px 0}
.trenner{border:0;border-top:1px solid var(--linie);margin:0;opacity:.6}

/* ---------- Auftakt ---------- */
.auftakt{padding:76px 0 90px}
/* Die Überschrift darf hier über die volle Breite laufen, nicht nur
   über die Textspalte. Deshalb kein max-width, nur ein ruhiger Umbruch. */
.auftakt h1{max-width:none;text-wrap:balance}
.auftakt .lead{max-width:60ch;margin-top:26px}

/* ---------- Listen mit Symbolen ---------- */
.liste{list-style:none;padding:0;margin:0;display:grid;gap:15px}
.liste li{position:relative;padding-left:38px;color:var(--tinte-weich);max-width:62ch}
.liste li::before{
  content:"";position:absolute;left:0;top:.18em;
  width:24px;height:24px;border-radius:50%;
  background:var(--gruen-hell);
  box-shadow:inset 0 0 0 1px var(--linie);
}
.liste li::after{
  content:"";position:absolute;left:5px;top:calc(.18em + 5px);
  width:14px;height:14px;background:var(--gruen);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Symbol: Fragezeichen im Kreis, für die Problemlisten */
.liste li::after{
  -webkit-mask-image:var(--symbol);mask-image:var(--symbol);
  --symbol:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
}
/* Symbol: Haken, für die Ergebnis- und Wunschlisten */
.liste.haken li::after{
  --symbol:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5 9.5 18 20 6.5'/></svg>");
}
/* Symbol: Pfeil nach vorn, für Ablauf- und Wegbeschreibungen */
.liste.pfeil li::after{
  --symbol:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='m13 6 6 6-6 6'/></svg>");
}
.liste.stimme li{color:var(--tinte);font-family:var(--serif);font-size:19px;line-height:1.5}

/* ---------- Karten ---------- */
.karten{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.karte{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);
  border-radius:var(--rund);
  box-shadow:var(--glas-schatten);
  padding:30px 28px;
}
@supports not (backdrop-filter: blur(4px)){ .karte{background:var(--glas-stark)} }
.karte h3{margin-bottom:10px}
.karte p:last-child{margin-bottom:0}
.karte .preis{font-family:var(--serif);font-size:15px;color:var(--gold-text);margin:0 0 14px;font-weight:600}

/* Symbol oben in einer Karte */
.kartensymbol{
  width:46px;height:46px;border-radius:14px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gruen-hell);box-shadow:inset 0 0 0 1px var(--linie);
}
.kartensymbol svg{width:24px;height:24px;stroke:var(--gruen);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Phasen-Zeitstrahl ---------- */
.phasen{display:grid;gap:0;margin:36px 0 0}
.phase{
  display:grid;grid-template-columns:74px 1fr;gap:0 24px;
  padding:28px 0;border-top:1px solid var(--linie);
}
.phase:last-child{border-bottom:1px solid var(--linie)}
.phase .zahl{
  font-family:var(--serif);font-size:30px;color:var(--gold);
  line-height:1;padding-top:4px;
}
.phase h3{margin-bottom:4px}
.phase .dauer{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-zart);margin:0 0 12px;font-weight:700}
.phase p{margin:0;color:var(--tinte-weich)}

/* ---------- Die fünf Phasen als anklickbarer Block ---------- */
.phasenblock{
  display:block;text-decoration:none;color:inherit;margin-top:34px;
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);
  border-radius:var(--rund);
  box-shadow:var(--glas-schatten);
  padding:34px 32px;
  transition:transform .18s ease, box-shadow .18s ease;
}
@supports not (backdrop-filter: blur(4px)){ .phasenblock{background:var(--glas-stark)} }
.phasenblock:hover{transform:translateY(-3px);box-shadow:0 26px 60px -26px rgba(23,33,28,.5)}
.phasenliste{display:grid;gap:0;margin:0;padding:0;list-style:none}
.phasenliste li{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:0 18px;
  padding:16px 0;border-top:1px solid var(--linie);
}
.phasenliste li:first-child{border-top:0}
.phasenliste .roem{font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1}
.phasenliste .was{font-family:var(--serif);font-size:20px;color:var(--tinte)}
.phasenliste .dauer{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinte-zart);font-weight:700;text-align:right}
.phasenblock .anstoss{
  display:flex;align-items:center;gap:12px;margin-top:26px;
  font-weight:700;color:var(--gruen);
}
.phasenblock .anstoss svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease}
.phasenblock:hover .anstoss svg{transform:translateY(2px)}

/* ---------- Weiche auf der Startseite: zwei Kacheln ---------- */
.kacheln{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:38px}
.kachel{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--glas-stark);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);border-radius:24px;
  box-shadow:var(--glas-schatten);
  padding:32px 30px 28px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@supports not (backdrop-filter: blur(4px)){ .kachel{background:var(--flaeche)} }
.kachel:hover{transform:translateY(-4px);border-color:var(--gruen);box-shadow:0 26px 60px -26px rgba(23,33,28,.5)}
.kachel .kachel-marke{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin:0 0 10px}
.kachel h3{font-size:24px;margin-bottom:12px}
.kachel p{color:var(--tinte-weich);margin:0 0 20px}
.kachel .anstoss{margin-top:auto;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--gruen)}
.kachel .anstoss svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.kachel:hover .anstoss svg{transform:translateX(4px)}
.kachel-leise{margin:22px 0 0;color:var(--tinte-weich);font-size:15.5px}

/* ---------- Drei Schritte kompakt, direkt vor der Buchung ---------- */
.schritte{list-style:none;margin:28px 0 8px;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:schritt}
.schritte li{counter-increment:schritt;position:relative;padding:18px 18px 18px 58px;
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:16px}
.schritte li::before{content:counter(schritt);position:absolute;left:18px;top:16px;
  font-family:var(--serif);font-size:26px;line-height:1;color:var(--gold)}
.schritte b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--tinte);margin-bottom:4px}
.schritte span{display:block;font-size:14.5px;line-height:1.5;color:var(--tinte-weich)}

/* ---------- Landingpages: schlanke Kopfleiste ---------- */
.kopf.schlank .nav{gap:0}

/* ---------- Kundenstimmen ---------- */
.stimmen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:34px}
.stimme-karte{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px dashed var(--gold);
  border-radius:var(--rund);
  padding:28px 26px;
  display:flex;flex-direction:column;gap:14px;
}
@supports not (backdrop-filter: blur(4px)){ .stimme-karte{background:var(--glas-stark)} }
.stimme-karte .marke-oben{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);
}
.stimme-karte .text{
  font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--tinte-weich);
  flex:1;font-style:italic;
}
.stimme-karte .wer{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--tinte-zart)}
.stimme-karte .kreis{
  width:38px;height:38px;border-radius:50%;background:var(--gruen-hell);
  box-shadow:inset 0 0 0 1px var(--linie);flex:0 0 38px;
}

/* ---------- Portrait ---------- */
.portrait{
  display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;
}
.portrait img{width:100%;height:auto;border-radius:var(--rund);filter:saturate(.94);
  box-shadow:var(--glas-schatten)}
.portrait .bu{margin:12px 0 0;font-size:13px;color:var(--tinte-zart);line-height:1.5}

/* ---------- Bilderpaar ---------- */
.bilderpaar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0 0}
.bilderpaar figure{margin:0}
.bilderpaar img{width:100%;height:auto;aspect-ratio:6/7;object-fit:cover;object-position:center;
  border-radius:var(--rund);filter:saturate(.92);box-shadow:var(--glas-schatten)}
.bu{font-size:13px;color:var(--tinte-zart);line-height:1.5;margin:0}
@media (max-width:620px){.bilderpaar{grid-template-columns:1fr}}

/* ---------- Zitat ---------- */
blockquote{
  margin:0;padding:0 0 0 26px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:23px;line-height:1.45;color:var(--tinte);
}
blockquote cite{display:block;margin-top:12px;font-family:var(--sans);font-size:13px;font-style:normal;color:var(--tinte-zart);letter-spacing:.06em}

/* ---------- Qualifikationen ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.chips li{
  font-size:13.5px;padding:7px 15px;border-radius:999px;
  background:var(--glas-stark);color:var(--tinte);border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* ---------- Hinweiskasten ---------- */
.hinweis{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);border-left:3px solid var(--gruen);
  border-radius:var(--rund);padding:24px 28px;color:var(--tinte-weich);
}
@supports not (backdrop-filter: blur(4px)){ .hinweis{background:var(--glas-stark)} }
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{color:var(--tinte)}

/* ---------- Platzhalter, die du noch ersetzen musst ---------- */
.todo{
  background:var(--gold-hell);border:1px dashed var(--gold);
  border-radius:12px;padding:18px 22px;color:var(--tinte);font-size:15px;
}
.todo b{color:var(--gold-text)}

/* ---------- Buchungskalender ---------- */
.buchung{margin:28px 0 0}
.buchung-hinweis{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px dashed var(--linie);
  border-radius:var(--rund);padding:32px 30px;color:var(--tinte-weich);
}
.buchung-hinweis p{margin:0 0 14px;max-width:58ch}
.buchung-hinweis p:last-child{margin-bottom:0}
.buchung-hinweis strong{color:var(--tinte);font-family:var(--serif);font-size:19px;font-weight:600}
.calendly-inline-widget{border-radius:var(--rund);overflow:hidden}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--linie);padding:18px 0}
details summary{
  cursor:pointer;font-family:var(--serif);font-size:19px;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gruen);font-family:var(--sans);font-size:20px}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--tinte-weich)}

/* ---------- Abschluss-Aufruf ---------- */
.abschluss{padding:0;margin:84px 0}
.abschluss .innen{
  background:var(--glas-stark);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);
  border-radius:28px;
  box-shadow:var(--glas-schatten);
  padding:56px 48px;
}
@supports not (backdrop-filter: blur(4px)){ .abschluss .innen{background:var(--flaeche)} }
.abschluss h2{margin-bottom:16px}

/* ---------- Fuß ---------- */
.fuss{padding:44px 0 56px;font-size:14.5px;color:var(--tinte-zart);
  border-top:1px solid var(--linie);margin-top:20px}
.fuss a{color:var(--tinte-weich);text-decoration:none;margin-right:20px}
.fuss a:hover{color:var(--tinte)}
.fuss .zeilen{display:flex;flex-wrap:wrap;gap:12px 0;justify-content:space-between;align-items:baseline}

/* ---------- Formular ---------- */
form{display:grid;gap:16px;max-width:520px}
label{font-size:14px;font-weight:700;color:var(--tinte);display:block;margin-bottom:6px}
input,textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--tinte);
  background:var(--glas-stark);border:1px solid var(--glas-rand);border-radius:12px;
  padding:12px 14px;
}
textarea{min-height:130px;resize:vertical}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tinte-weich)}
.zustimmung input{width:auto;margin-top:4px}


/* ---------- Sprungziele nicht unter der festen Kopfleiste verstecken ---------- */
[id]{scroll-margin-top:104px}

/* ---------- Menü-Knopf fürs Handy (nur auf Seiten mit vollem Menü) ---------- */
.menue-mobil{display:none}
.mobil-menue{display:none}

/* ---------- Buchung: Knopf zuerst, Datenschutzhinweis klein darunter ---------- */
.buchung-start{
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);border-radius:var(--rund);
  padding:26px 26px 22px;
}
.buchung-start .knopf{font-size:17px;padding:16px 32px}
.buchung-start .klein{font-size:13.5px;line-height:1.55;color:var(--tinte-zart);margin:14px 0 0;max-width:62ch}

/* ---------- Leiste unten am Handy auf den Landingpages ---------- */
.leiste-unten{display:none}

@media (max-width:720px){
  [id]{scroll-margin-top:12px}

  .menue-mobil{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;border-radius:12px;cursor:pointer;
    background:var(--glas-stark);border:1px solid var(--glas-rand);color:var(--tinte);
  }
  .menue-mobil svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .kopf .breit .rechts{display:flex;align-items:center;gap:10px}
  .mobil-menue:not([hidden]){
    display:grid;gap:2px;padding:8px 24px 18px;
    background:var(--flaeche);border-bottom:1px solid var(--linie);
    box-shadow:0 18px 30px -20px rgba(23,33,28,.35);
  }
  .mobil-menue a{
    display:block;padding:13px 4px;font-size:17px;text-decoration:none;color:var(--tinte);
    border-bottom:1px solid var(--linie);
  }
  .mobil-menue a:last-child{border-bottom:0}
  .mobil-menue a[aria-current="page"]{color:var(--gruen);font-weight:700}

  /* Startseite: Überschrift etwas kleiner, damit die Auswahl früher sichtbar ist */
  .auftakt.weiche{padding:34px 0 56px}
  .auftakt.weiche h1{font-size:28px;line-height:1.12}
  .auftakt.weiche .lead{font-size:17px;margin-top:16px}
  .auftakt.weiche .kacheln{margin-top:24px}

  /* Größere Tippflächen in der Fußzeile */
  .fuss a{display:inline-block;padding:11px 0;margin-right:22px}

  .leiste-unten{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--glas-stark);
    -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
    border-top:1px solid var(--glas-rand);
    transform:translateY(110%);visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .leiste-unten.sichtbar{transform:none;visibility:visible;transition:transform .22s ease}
  .leiste-unten .knopf{flex:1;text-align:center;padding:14px 20px}
  body.mit-leiste .fuss{padding-bottom:110px}
}

/* ---------- Eintragen fuer den Guide (E-Mail-Adresse) ---------- */
.formular-kasten{
  background:var(--glas-stark);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-rand);border-radius:28px;
  box-shadow:var(--glas-schatten);padding:44px 40px;
}
@supports not (backdrop-filter: blur(4px)){ .formular-kasten{background:var(--flaeche)} }
.eintragen{display:grid;gap:18px;max-width:460px;margin-top:26px}
.eintragen .zustimmung span{font-size:14.5px;line-height:1.55}
.eintragen .zart{margin:0}
.eintragen p{margin:0}

/* ---------- Bewertungssiegel ---------- */
.siegel{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.siegel img{width:150px;height:auto}
.siegel p{margin:0;color:var(--tinte-weich);font-size:15px;max-width:40ch}

@media (max-width:720px){
  .formular-kasten{padding:30px 24px}
}

@media (max-width:720px){
  body{font-size:16px}
  section{padding:60px 0}
  .auftakt{padding:52px 0 64px}
  /* Auf dem Handy passen Marke, vier Links und Button nicht nebeneinander.
     Die Links wandern in die Fusszeile, oben bleibt nur der Aufruf. */
  .kopf{position:static}
  .kopf .breit{gap:12px}
  .nav a:not(.knopf){display:none}
  .nav .menue{display:none}
  .nav a.knopf{padding:10px 14px;font-size:13.5px;white-space:nowrap}
  .nav{flex-wrap:nowrap;gap:8px}
  .kopf .breit{padding-left:16px;padding-right:16px}
  .marke{font-size:17px}
  .marke span{font-size:9px}
  .portrait{grid-template-columns:1fr;gap:24px}
  .portrait img{max-width:240px}
  .phase{grid-template-columns:52px 1fr;gap:0 16px}
  .phase .zahl{font-size:24px}
  .phasenblock{padding:26px 22px}
  .phasenliste li{grid-template-columns:40px 1fr;gap:0 12px}
  .phasenliste .dauer{grid-column:2;text-align:left;margin-top:2px}
  .abschluss .innen{padding:36px 26px}
  .karte{padding:26px 22px}
}