/* ============================================================
   SCHRIFTEN – lokal ausgeliefert (keine Verbindung zu Google).
   Newsreader und Karla, SIL Open Font License, Zeichensätze latin + latin-ext.
   ============================================================ */
/* Karla normal – latin-ext */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/karla-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal – latin */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/karla-normal-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;
}
/* Karla normal – latin-ext */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/karla-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal – latin */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/karla-normal-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;
}
/* Karla normal – latin-ext */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/karla-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal – latin */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/karla-normal-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;
}
/* Newsreader italic – latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(schriften/newsreader-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader italic – latin */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(schriften/newsreader-italic-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;
}
/* Newsreader italic – latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/newsreader-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader italic – latin */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/newsreader-italic-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;
}
/* Newsreader normal – latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(schriften/newsreader-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal – latin */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(schriften/newsreader-normal-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;
}
/* Newsreader normal – latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/newsreader-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal – latin */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/newsreader-normal-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;
}
/* Newsreader normal – latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/newsreader-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal – latin */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/newsreader-normal-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;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Helle, warme Palette angelehnt an gruen-therapie.de
     (Weiß/Creme, Greige #E5E3DE, Oliv-Grau #535749, fast schwarzer Text) */
  --bg:            #FCFBF8;
  --surface:       #F5F0EA;
  --surface-deep:  #E5E3DE;   /* früher Dunkelgrün; jetzt helles Greige für Hero, Termin, Fußzeile */
  --on-deep:       #1E201B;
  --text:          #1E201B;
  --muted:         #5C6055;
  --brand:         #535749;
  --on-brand:      #FCFBF8;
  --accent:        #5B6E2C;
  --line:          #E3DED5;
  --line-strong:   #C1BFB8;

  --ff-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-text: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.7rem);
  --step-4:  clamp(2.3rem, 1.7rem + 3vw, 4.2rem);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(2.75rem, 6vw, 5rem);
  --measure: 62ch;
  --radius: 3px;
}
:root[data-theme="dark"]{
  --bg:           #0E1A16;
  --surface:      #16251F;
  --surface-deep: #08110E;
  --on-deep:      #E4E0D3;
  --text:         #E8E4D8;
  --muted:        #9AA9A0;
  --brand:        #A9C189;
  --on-brand:     #0E1A16;
  --accent:       #B7CC8E;
  --line:         #2A3A33;
  --line-strong:  #3E5147;
}

/* ============================================================
   BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-text);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--ff-display); font-weight:400; line-height:1.12; letter-spacing:-.012em; margin:0}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1); line-height:1.25}
p{margin:0 0 1em; max-width:var(--measure)}
.lead{font-size:var(--step-1); line-height:1.5; color:var(--muted); font-family:var(--ff-display); font-weight:300}

.quote{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:var(--step-2); line-height:1.35; margin:0; max-width:26ch;
}
.quote-wide{max-width:34ch}
.quote cite{
  display:block; font-style:normal; font-family:var(--ff-text);
  font-size:var(--step--1); letter-spacing:.03em; margin-top:.9rem; opacity:.62;
}
.salut{font-weight:700; margin-bottom:.35rem}

.wrap{width:min(100% - 2*var(--gutter), 1180px); margin-inline:auto}
.narrow{max-width:66ch}
section{padding-block:var(--section-y); overflow:hidden} /* zurücksinkender Inhalt (seite.js) ragt nicht in den nächsten Abschnitt */
.skip{position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--on-brand); padding:.75rem 1rem; z-index:200}
.skip:focus{left:.5rem; top:.5rem}

/* Abschnittsmarke: kleine Ziffernlose Kennung links der Überschrift */
.sec-head{display:grid; gap:.9rem; margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec-head p{margin:0}
.sec-head .lead{margin-top:.6rem} /* Überschrift → Einleitung überall 24 px */
.kicker{
  font-size:var(--step--1); color:var(--accent); font-weight:700;
  letter-spacing:.02em; margin:0;
}

/* ============================================================
   KOPFZEILE
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:1rem; min-height:4rem}
.brand{
  font-family:var(--ff-display); font-size:1.18rem; letter-spacing:.01em;
  text-decoration:none; display:flex; align-items:baseline; gap:.5rem; margin-right:auto;
}
.brand span{font-size:.72rem; font-family:var(--ff-text); color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.nav{display:none}
@media (min-width:62rem){
  .nav{display:flex; gap:1.6rem; align-items:center}
  .nav a{text-decoration:none; font-size:.94rem; color:var(--muted); padding-block:.4rem; border-bottom:1px solid transparent}
  .nav a:hover{color:var(--text); border-bottom-color:var(--line-strong)}
}
.menu-btn{
  display:inline-flex; align-items:center; gap:.5rem; background:none; border:1px solid var(--line-strong);
  color:var(--text); font-family:inherit; font-size:.9rem; padding:.5rem .8rem; border-radius:var(--radius); cursor:pointer;
}
@media (min-width:62rem){ .menu-btn{display:none} }
.drawer{display:none; border-bottom:1px solid var(--line); background:var(--surface)}
.drawer[data-open="true"]{display:block}
.drawer ul{list-style:none; margin:0; padding:.5rem 0 1rem}
.drawer a{display:block; padding:.7rem var(--gutter); text-decoration:none; border-bottom:1px solid var(--line)}
@media (min-width:62rem){ .drawer{display:none !important} }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-text); font-size:1rem; font-weight:700; line-height:1.2;
  padding:.95rem 1.5rem; border-radius:var(--radius); text-decoration:none; cursor:pointer;
  border:1px solid var(--brand); background:var(--brand); color:var(--on-brand);
  transition:opacity .15s ease;
}
.btn:hover{opacity:.87}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text); opacity:1}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--surface-deep); color:var(--on-deep);
  padding-block:clamp(3.5rem,10vw,7.5rem);
  position:relative; overflow:hidden; isolation:isolate;
}
.hero::before, .pagehead::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:url("bilder/hintergrund-kopf.webp"); 
  background-size:cover; background-position:center 35%;
  opacity:.13;
}
/* Unterseiten-Kopf ist flach und breit: Bild vergrößern und auf die Blätter
   (unten Mitte im Foto) ausrichten, damit kaum Himmel zu sehen ist */
.pagehead::before{background-size:170% auto; background-position:60% 78%}
.hero::after, .pagehead::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,
    var(--surface-deep) 0%,
    color-mix(in srgb, var(--surface-deep) 82%, transparent) 45%,
    color-mix(in srgb, var(--surface-deep) 35%, transparent) 100%);
}
@media (max-width:48rem){
  .hero::after, .pagehead::after{background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-deep) 78%, transparent) 0%,
    var(--surface-deep) 78%);}
}

/* Logo */
.logo{height:2.35rem; width:auto; display:block}
.logo-dark{display:none}
:root[data-theme="dark"] .topbar .logo-light{display:none}
:root[data-theme="dark"] .topbar .logo-dark{display:block}
footer .logo{height:3.1rem; margin-bottom:1.25rem}

/* Fotos */
.shot{width:100%; height:auto; display:block; border-radius:var(--radius)}
.shot-wide{margin-top:2.75rem}
.hero h1{max-width:15ch; font-weight:300}
.hero h1 em{font-style:italic}
.hero-grid{display:grid; gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:62rem){
  /* Rechts nur das Baumbild: so hoch wie der Text links, mindestens 34rem */
  .hero-grid{grid-template-columns:1.05fr 1fr; align-items:stretch}
}
.hero-media{display:grid; gap:1.75rem}
.hero-img{
  width:100%; display:block; border-radius:var(--radius);
  aspect-ratio:4/5; object-fit:cover; object-position:center 30%;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
@media (max-width:61.999rem){
  .hero-img{aspect-ratio:4/3; object-position:center 22%}
}
@media (min-width:62rem){ .hero-img{height:100%; min-height:34rem; aspect-ratio:auto} }
.hero p{color:color-mix(in srgb, var(--on-deep) 78%, transparent)}
.hero .btn{background:var(--on-deep); color:var(--surface-deep); border-color:var(--on-deep)}
.hero .btn-ghost{background:transparent; color:var(--on-deep); border-color:color-mix(in srgb, var(--on-deep) 40%, transparent)}
/* Motto im Hero: zwischen zwei kurzen Linien, gesperrte Versalien */
.hero-motto{margin:2rem 0 0; padding-block:1.4rem; max-width:34rem; position:relative}
.hero-motto::before,.hero-motto::after{
  content:""; position:absolute; left:0; width:3.5rem; height:2px;
  background:color-mix(in srgb, var(--on-deep) 70%, transparent);
}
.hero-motto::before{top:0}
.hero-motto::after{bottom:0}
.hero-motto p{
  margin:0; font-family:var(--ff-text); text-transform:uppercase;
  letter-spacing:.08em; font-size:var(--step-0); line-height:1.6;
  color:color-mix(in srgb, var(--on-deep) 88%, transparent);
}
.hero-motto cite{
  display:block; margin-top:.6rem; font-style:normal; font-size:var(--step--1);
  letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-deep) 55%, transparent);
}
.hero-note{font-size:var(--step--1); margin-top:1.25rem; color:color-mix(in srgb, var(--on-deep) 62%, transparent)}

/* Qualifikationen als Definitionsliste statt Badge-Reihe */
/* Qualifikationen (Abschnitt „Grün Konzept“), am PC zweispaltig */
.quals{margin-top:clamp(3rem,7vw,4.5rem)}
.quals h3{margin-bottom:1rem}
.creds{margin:0; border-top:1px solid var(--line-strong)}
@media (min-width:56rem){ .creds{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem)} }
.creds div{display:flex; justify-content:space-between; gap:1.5rem; padding:.8rem 0; border-bottom:1px solid var(--line)}
.creds dt{color:var(--muted); font-size:var(--step--1)}
.creds dd{margin:0; text-align:right; font-family:var(--ff-display); font-size:1.02rem}

/* Hero beim Laden: Texte tauchen nacheinander auf (gleiche Bewegung wie beim Scrollen),
   zuletzt das Baumbild. „both“ hält den Startzustand während der Verzögerung. */
@keyframes auftauchen{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
/* Gleiches Auftauchen im Seitenkopf aller Unterseiten (Kicker → Titel → Zitat/Einleitung) */
.hero-text > *, .pagehead .wrap > *{animation:auftauchen 1.7s cubic-bezier(.2,.7,.3,1) both}
.hero-text > :nth-child(1), .pagehead .wrap > :nth-child(1){animation-delay:.2s}
.hero-text > :nth-child(2), .pagehead .wrap > :nth-child(2){animation-delay:.7s}
.hero-text > :nth-child(3), .pagehead .wrap > :nth-child(3){animation-delay:1.2s}
.hero-text > :nth-child(4), .pagehead .wrap > :nth-child(4){animation-delay:1.7s}
.hero-media{animation:auftauchen 1.7s cubic-bezier(.2,.7,.3,1) 2.2s both}
@media (prefers-reduced-motion: reduce){ .hero-text > *, .pagehead .wrap > *, .hero-media{animation:none} }

/* ============================================================
   SCROLL-EFFEKTE (sanftes Einblenden)
   ============================================================ */
/* seite.js setzt .rv nur auf Elemente unterhalb des sichtbaren Bereichs,
   ohne JS bleibt alles sichtbar */
.rv{opacity:0; transform:translateY(28px); transition:opacity 1.3s cubic-bezier(.2,.7,.3,1), transform 1.3s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
.rv[data-delay="1"]{transition-delay:.15s}
.rv[data-delay="2"]{transition-delay:.3s}
.rv[data-delay="3"]{transition-delay:.45s}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} }



/* ============================================================
   ZWEISPALTER
   ============================================================ */
.split{display:grid; gap:clamp(2rem,5vw,4rem); align-items:start}
/* Handy/Tablet (untereinander): immer erst Text, dann Bild – sonst folgen
   Bilder zweier Abschnitte direkt aufeinander (z. B. Baum → Porträt) */
@media (max-width:55.999rem){ .split > :has(> .shot:only-child){order:2} }
@media (min-width:56rem){ .split{grid-template-columns:1fr 1fr} }
@media (min-width:56rem){ .split.text-first{grid-template-columns:1.1fr .9fr} }
/* Bild wächst auf die Höhe der Textspalte */
@media (min-width:56rem){
  .split-fill{align-items:stretch}
  .split-fill .shot{height:100%; object-fit:cover}
}

/* ============================================================
   ABSCHNITTSHINTERGRÜNDE (Wechsel hell/Fläche, damit sich Abschnitte abheben)
   ============================================================ */
#stephan, #anliegen{background:var(--surface)}

/* ============================================================
   ANLIEGEN
   ============================================================ */
.tags{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem}
.tags li{border:1px solid var(--line-strong); border-radius:99px; padding:.45rem 1rem; font-size:.95rem}
.disclaimer{
  margin-top:2rem; padding-left:1rem; border-left:2px solid var(--line-strong);
  font-size:var(--step--1); color:var(--muted); max-width:70ch;
}

/* ============================================================
   BUCHUNG
   ============================================================ */
.booking{background:var(--surface-deep); color:var(--on-deep)}
.booking h2, .booking h3{color:var(--on-deep)}
.booking p{color:color-mix(in srgb, var(--on-deep) 78%, transparent)}
.booking .kicker{color:var(--accent)}
/* Startseite: Bild links, Text rechts – kompakter als die übrigen Abschnitte */
.booking-band{padding-block:clamp(2.5rem,5vw,4rem)}
.booking-band h2{margin-top:.4rem}
.booking-band .quote{margin:1.1rem 0 0; max-width:34ch}
.booking-band .booking-text{margin:1.1rem 0 0; max-width:52ch}
.booking-band .btn-row{margin-top:1.5rem}
.book-opts{display:grid; gap:1.25rem; margin-top:2.5rem}
@media (min-width:48rem){ .book-opts{grid-template-columns:1.15fr .85fr; align-items:stretch} }
/* Karten heben sich als helle Flächen vom grau-beigen Band ab; die Hauptkarte
   (BERGMANN) zusätzlich mit Akzentstreifen wie die Studienboxen */
.book-card{
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  padding:clamp(1.5rem,4vw,2.25rem); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:.75rem;
}
.book-card.primary{border-left:3px solid var(--accent)}
.book-card h3{font-family:var(--ff-display); font-weight:400; font-size:var(--step-2); line-height:1.2; color:var(--text)}
.book-card p{margin:0; font-size:.98rem; color:var(--muted)}
.book-card .btn{margin-top:auto; align-self:flex-start}
.book-card .btn-ghost{background:transparent; color:var(--text); border-color:var(--line-strong)}
.book-card.primary .btn{background:var(--on-deep); color:var(--surface-deep); border-color:var(--on-deep)}

/* ============================================================
   FORMULAR
   ============================================================ */
form{margin-top:2rem; max-width:44rem}
fieldset{border:0; padding:0; margin:0 0 1.75rem}
legend{font-weight:700; font-size:.95rem; padding:0 0 .6rem}
.field{display:grid; gap:.35rem; margin-bottom:1.1rem}
.field label{font-size:.92rem; font-weight:500}
.field .hint{font-size:var(--step--1); color:var(--muted)}
input[type=text],input[type=tel],input[type=email],textarea{
  font:inherit; font-size:1rem; color:var(--text); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:.75rem .85rem; width:100%;
}
input:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%, transparent)}
textarea{min-height:6.5rem; resize:vertical}
.choices{display:flex; flex-wrap:wrap; gap:.5rem}
.choice{position:relative}
.choice input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.choice span{
  display:block; border:1px solid var(--line-strong); border-radius:99px;
  padding:.5rem 1rem; font-size:.95rem; cursor:pointer; user-select:none;
}
.choice input:checked + span{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
/* Warteliste: optionaler Zeitraum (aufklappbar) */
.zeitraum{margin:0 0 1.2rem; border:1px solid var(--line); border-radius:var(--radius); padding:.75rem 1rem; background:var(--bg)}
.zeitraum summary{cursor:pointer; font-weight:500}
.zeitraum[open] summary{margin-bottom:.5rem}
.zeitraum .hint{font-size:var(--step--1); color:var(--muted); margin:0 0 .7rem}
.zeitraum-felder{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.zeitraum-felder .field{margin:0}
/* Eigener Kalender für Datumsfelder (assets/datumswahl.js) */
.dw-feld{display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:.6rem .75rem; cursor:pointer; text-align:left}
.dw-feld:hover{border-color:var(--text)}
.dw-feld:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.dw-feld.dw-leer span{color:var(--muted)}
.dw-feld svg{width:1.15rem; height:1.15rem; flex:none; fill:none; stroke:var(--muted); stroke-width:1.7}
.dw-blatt{position:absolute; z-index:400; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:6px; box-shadow:0 12px 32px rgba(30,32,27,.14); padding:.8rem .8rem .6rem; font-family:"Karla", system-ui, sans-serif}
.dw-blatt[hidden]{display:none}
.dw-kopf{display:flex; align-items:center; justify-content:space-between; margin:0 0 .5rem}
.dw-monat{font-family:"Newsreader", Georgia, serif; font-size:1.2rem}
.dw-pfeil{width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); font-size:1.1rem; cursor:pointer}
.dw-pfeil:disabled{opacity:.3; cursor:default}
.dw-raster{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dw-wt{font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:center; padding:.2rem 0 .35rem}
.dw-tag{aspect-ratio:1/1; border:0; border-radius:var(--radius); background:transparent; color:var(--text); font:inherit; font-size:.95rem; cursor:pointer}
.dw-tag:hover:not(:disabled){background:var(--surface)}
.dw-tag:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.dw-tag:disabled{color:var(--line-strong); cursor:default}
.dw-heute{box-shadow:inset 0 0 0 1px var(--brand)}
.dw-gewaehlt,.dw-gewaehlt:hover:not(:disabled){background:var(--brand); color:var(--bg); font-weight:600}
.dw-fuss{display:flex; justify-content:space-between; margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--line)}
.dw-link{background:none; border:0; color:var(--accent); font:inherit; font-size:.9rem; cursor:pointer; padding:.3rem .2rem}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:var(--step--1); color:var(--muted); max-width:60ch}
.consent input{margin-top:.28rem; width:1.05rem; height:1.05rem; flex:none}
.form-status{margin-top:1rem; font-size:.95rem; padding:.9rem 1rem; border-radius:var(--radius); display:none}
.form-status[data-shown="true"]{display:block}
.form-status[data-kind="ok"]{background:color-mix(in srgb,var(--accent) 16%, transparent); border:1px solid var(--accent)}
.form-status[data-kind="err"]{background:color-mix(in srgb,#b3261e 12%, transparent); border:1px solid #b3261e}
.form-status[data-kind="info"]{background:var(--surface); border:1px solid var(--line-strong)}
.mensch{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:.8rem 1rem;
  margin:0 0 1.25rem; max-width:24rem; background:var(--bg)}
.mensch-feld{display:flex; align-items:center; gap:.6rem; font-weight:500; cursor:pointer}
.mensch-feld input{width:1.2rem; height:1.2rem; accent-color:var(--brand)}
.mensch-status{font-size:var(--step--1); color:var(--muted)}
.mensch-status[data-ok]{color:var(--accent); font-weight:700}
.hp{position:absolute; left:-9999px}

/* ============================================================
   PREISE
   ============================================================ */
.prices{background:var(--surface)}
.price-figure{
  font-family:var(--ff-display); font-size:clamp(1.8rem,4.5vw,2.75rem); line-height:1;
  font-weight:300; margin:0;
}
.price-sub{color:var(--muted); margin:.6rem 0 0}
.facts{margin:2.5rem 0 0; border-top:1px solid var(--line-strong)}
.facts div{padding:1.25rem 0; border-bottom:1px solid var(--line)}
.facts dt{font-weight:700; font-size:.98rem; margin-bottom:.3rem}
.facts dd{margin:0; color:var(--muted); max-width:62ch}

/* ============================================================
   KONTAKT
   ============================================================ */
/* Kontakt: Bild links (schmaler), Text rechts mit Platz für die Überschrift; Bild so hoch wie die Spalte */
@media (min-width:56rem){ .contact-split{grid-template-columns:.8fr 1.2fr} }
.contact-split .sec-head{margin-bottom:1.75rem}
/* Kontaktangaben am PC zweispaltig, damit die Textspalte so kompakt ist wie das Foto */
@media (min-width:56rem){ .contact-split .contact-list{grid-template-columns:1fr 1fr; gap:1.4rem 2.5rem} }
.contact-route{margin-top:.75rem}
.contact-list{margin:0; display:grid; gap:1.4rem}
.contact-list dt{font-size:var(--step--1); color:var(--muted); margin-bottom:.15rem}
.contact-list dd{margin:0; font-size:1.06rem}
.contact-list a{text-decoration-thickness:1px; text-underline-offset:3px}
.map-box{border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.map-consent{padding:clamp(1.5rem,4vw,2rem); text-align:center; display:grid; gap:.9rem; place-items:center}
.map-consent p{margin:0; font-size:var(--step--1); color:var(--muted); max-width:42ch}

/* ============================================================
   FUSSZEILE
   ============================================================ */
footer{background:var(--surface-deep); color:var(--on-deep); padding-block:clamp(3rem,7vw,4.5rem)}
.foot-grid{display:grid; gap:2.5rem}
@media (min-width:48rem){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr} }
footer h2{font-size:1.05rem; font-family:var(--ff-text); font-weight:700; margin-bottom:.9rem}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
footer a{color:color-mix(in srgb,var(--on-deep) 82%, transparent); text-decoration:none}
footer a:hover{color:var(--on-deep); text-decoration:underline}
footer address{font-style:normal; color:color-mix(in srgb,var(--on-deep) 82%, transparent); line-height:1.7}
.foot-bottom{
  margin-top:3rem; padding-top:1.5rem; font-size:var(--step--1);
  border-top:1px solid color-mix(in srgb,var(--on-deep) 20%, transparent);
  color:color-mix(in srgb,var(--on-deep) 60%, transparent);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
}

/* ============================================================
   MOBILE AKTIONSLEISTE
   ============================================================ */
.actionbar{
  position:fixed; inset:auto 0 0 0; z-index:99; display:grid; grid-template-columns:1fr 1.25fr;
  background:var(--bg); border-top:1px solid var(--line);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); gap:.6rem;
}
.actionbar .btn{padding:.85rem 1rem; font-size:.97rem}
/* PC: dezente schwebende Leiste unten rechts, erscheint erst nach dem Scrollen (seite.js setzt .actionbar-sichtbar) */
@media (min-width:62rem){
  .actionbar{
    inset:auto 1.5rem 1.5rem auto; display:flex; gap:.5rem;
    padding:.45rem; border:1px solid var(--line); border-radius:calc(var(--radius) + .45rem);
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(6px);
    box-shadow:0 6px 24px rgba(0,0,0,.10);
    opacity:0; transform:translateY(.75rem); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .actionbar .btn{padding:.55rem 1rem; font-size:.9rem}
  .actionbar-sichtbar .actionbar{opacity:1; transform:none; pointer-events:auto}
}
@media (min-width:62rem) and (prefers-reduced-motion: reduce){ .actionbar{transition:none} }
@media (max-width:61.999rem){ body{padding-bottom:5.25rem} }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.pagehead{
  background:var(--surface-deep); color:var(--on-deep);
  padding-block:clamp(2.75rem,7vw,5rem);
  position:relative; isolation:isolate; /* für das Blätter-Hintergrundbild wie im Hero */
}
.pagehead h1{max-width:20ch}
.pagehead .kicker{color:var(--accent)}
/* Kleiner Zurück-Link oben auf Unterseiten (führt an die vorige Stelle der Startseite) */
.zurueck-wrap{margin-top:calc(-1 * clamp(1rem,3vw,2.25rem)); margin-bottom:clamp(1.25rem,3vw,2rem)}
.zurueck{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--step--1); color:color-mix(in srgb, var(--on-deep) 70%, transparent);
  text-decoration:none; padding:.35rem 0;
}
.zurueck span{transition:transform .2s ease}
.zurueck:hover, .zurueck:focus-visible{color:var(--on-deep)}
.zurueck:hover span{transform:translateX(-3px)}
.pagehead .lead{color:color-mix(in srgb, var(--on-deep) 78%, transparent)}
.pagehead p{color:color-mix(in srgb, var(--on-deep) 82%, transparent)}

/* Fliesstext auf Unterseiten */
.wrap.narrow h2{font-size:var(--step-2); margin:2.75rem 0 .9rem}
.wrap.narrow h2:first-child{margin-top:0}
.wrap.narrow h3{margin:1.9rem 0 .5rem}
.narrow ol.steps{padding-left:1.15rem; margin:0 0 1.5rem; max-width:var(--measure)}
.narrow ol.steps li{margin-bottom:.85rem}

/* Hinweiskasten (vor dem Livegang loeschen) */
.hinweis{
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:1rem 1.15rem; margin-bottom:2.5rem;
  font-size:var(--step--1); color:var(--muted); max-width:var(--measure);
}

/* Zwei-Klick-Einbettung */
.embed{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  min-height:min(78vh, 720px); display:grid;
}
.embed[data-loaded="true"]{background:var(--bg)}
.embed > iframe{width:100%; height:min(78vh,720px); border:0; display:block}
/* Widget-iframe: Höhe setzt SimplyBook selbst passend zum Inhalt */
.embed-widget iframe{width:100%; border:0; display:block}
.embed-laedt{padding:2rem; text-align:center; color:var(--muted); margin:0}
.embed-consent{
  place-self:center; text-align:center; display:grid; gap:1rem; justify-items:center;
  padding:clamp(1.5rem,5vw,3rem); max-width:46ch;
}
.embed-consent h2{font-size:var(--step-1); margin:0}
.embed-consent p{margin:0; font-size:var(--step--1); color:var(--muted)}
.embed-alt{border-top:1px solid var(--line); padding-top:1rem; margin-top:.5rem !important}

/* ============================================================
   STUDIENLAGE
   ============================================================ */
.studien{
  border:1px solid var(--line-strong); border-left-width:3px; border-left-color:var(--accent);
  border-radius:var(--radius); padding:clamp(1.15rem,3vw,1.75rem);
  margin:2rem 0 2.5rem; max-width:var(--measure); background:var(--surface);
}
.studien-grad{
  margin:0 0 1.25rem; font-weight:700; font-size:var(--step--1);
  letter-spacing:.02em; color:var(--accent);
}
.studien-grad[data-grad="hinweise"]{color:var(--muted)}
.studien-hinweis{margin:-.75rem 0 1.25rem; font-size:var(--step--1); color:var(--muted)}
.studien-liste{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
.studie{display:grid; gap:.3rem}
.studie b{font-family:var(--ff-display); font-weight:500; font-size:1.06rem; line-height:1.3}
.studie .meta{font-size:var(--step--1); color:var(--muted)}
.studien-fazit{
  margin:1.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:var(--step--1);
}
ul.bewertung{list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.7rem; max-width:var(--measure)}
ul.bewertung li{padding-left:1.25rem; position:relative}
ul.bewertung li::before{
  content:""; position:absolute; left:0; top:.65em; width:.45rem; height:.45rem;
  border-radius:50%; background:var(--accent);
}

/* Einzelner Button im dunklen Buchungsabschnitt */
.booking .btn-row .btn{background:var(--on-deep); color:var(--surface-deep); border-color:var(--on-deep)}

/* ============================================================
   VERFÜGBARKEITS-MATRIX (Warteliste)
   ============================================================ */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.slot-alle{
  font:inherit; font-size:.85rem; color:var(--text); background:transparent; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:.4rem .85rem; margin:0 0 .8rem;
}
.slot-alle:hover{border-color:var(--text)}
.slot-alle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.slot-grid-wrap{overflow-x:auto; margin:0 0 .5rem; -webkit-overflow-scrolling:touch}
.slot-grid{border-collapse:collapse; width:100%; min-width:30rem}
.slot-grid caption{text-align:left; font-size:.92rem; font-weight:500; padding:0 0 .6rem}
.slot-grid th,.slot-grid td{padding:.3rem; text-align:center}
.slot-grid thead th{font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding-bottom:.5rem}
.slot-grid tbody th{text-align:right; font-weight:500; font-size:.85rem; white-space:nowrap; padding-right:.7rem}
.slot-time{display:block; font-weight:400; font-size:.72rem; color:var(--muted)}
.slot-cell{position:relative; display:inline-block}
.slot-cell input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.slot-cell span{display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
  border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; user-select:none;
  font-size:.85rem; color:var(--on-brand)}
.slot-cell input:checked + span{background:var(--brand); border-color:var(--brand)}
.slot-cell input:checked + span::after{content:"\2713"}
.slot-cell input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
fieldset{min-width:0} /* sonst drückt die Tabelle die ganze Seite in die Breite */
/* Handy: Tabelle so kompakt, dass alle sechs Tage ohne seitliches Scrollen passen */
@media (max-width:30rem){
  .slot-grid{min-width:0}
  .slot-grid th,.slot-grid td{padding:.2rem .1rem}
  .slot-grid tbody th{padding-right:.4rem; font-size:.8rem}
  .slot-time{font-size:.66rem}
  .slot-cell span{width:1.85rem; height:1.85rem}
}