/* ==========================================================================
   sageroom — Design-System
   Tokens, Komponenten, Utilities. Kontrastwerte berechnet (WCAG 2.x).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Farbe — Salbei-Palette. Alle Neutralflaechen tragen einen Gruenanteil,
     damit die Marke die Flaeche traegt und nicht nur die Akzente.
     Kontrastwerte berechnet (WCAG 2.x), jeweils gegen --bg. */
  --bg:#F6F8F3;          /* Salbei-Off-White */
  --surface:#E9EFE4;     /* Salbei hell, Sektionswechsel */
  --surface-3:#DBE4D5;   /* dritte Ebene */
  --sage-xl:#DDE6D8;     /* Marken-Tint */
  --sage-l:#B5C6AF;      /* Trenner, Icon-Flaechen */
  --sage:#677C61;        /* Markenfarbe – NICHT als Textfarbe (4,24:1) */
  --sage-d:#3C4D3A;      /* Text/Buttons auf hell – 8,48:1 */
  --sage-dd:#2C3A2B;     /* Footer, tiefste Flaeche – Weiss darauf 12,02:1 */
  --clay:#A85E30;        /* einziger warmer Akzent, Weiss darauf 4,87:1 */
  --clay-d:#8A4C26;      /* Akzent als Text – 6,25:1 */
  --ink:#1E251F;         /* 14,66:1 */
  --ink-2:#465046;       /* 7,87:1 */
  --ink-3:#5B655A;       /* 5,69:1 */
  --line:#D2DCCC;        /* dekorative Haarlinie */
  --line-strong:#6D7B68; /* Formularrahmen – 4,19:1, auf allen Flaechen ueber 3:1 */

  /* Abstände */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:40px; --s-7:64px; --s-8:96px; --s-9:128px;

  /* Radius, Container */
  --radius:4px;
  --container:1200px;
  --measure:62ch;

  /* Bewegung */
  --motion-fast:150ms; --motion-base:300ms; --motion-slow:400ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Typo */
  --font-display:"Spectral",Georgia,"Times New Roman",serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-text);font-size:1.0625rem;line-height:1.65;
  font-optical-sizing:auto;text-rendering:optimizeLegibility}
img,picture,svg{max-width:100%;display:block;height:auto}
button,input,textarea,select{font:inherit;color:inherit}

/* --- Typografie --------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--ink);
  margin:0 0 var(--s-3);text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2.125rem,1.35rem + 2.9vw,3.5rem);line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(1.6875rem,1.35rem + 1.3vw,2.25rem);line-height:1.20;letter-spacing:-.01em}
h3{font-size:clamp(1.3125rem,1.2rem + .45vw,1.5625rem);line-height:1.28}
h4,.ct{font-family:var(--font-text);font-size:1.1875rem;font-weight:600;line-height:1.35;
  margin:0 0 var(--s-2);letter-spacing:0;overflow-wrap:break-word;hyphens:auto}
p{margin:0 0 var(--s-4);max-width:var(--measure);text-wrap:pretty}
.lead{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);line-height:1.55;color:var(--ink-2)}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage-d);margin:0 0 var(--s-3)}
small,.small{font-size:.9375rem;line-height:1.55;color:var(--ink-3)}
em{font-style:italic}
a{color:var(--clay-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--motion-fast) var(--ease)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus,var(--sage-d));outline-offset:3px;border-radius:2px}
/* Auf dunklen Flächen waere --sage-d gleich der Hintergrundfarbe (1,00:1). */
.dark,.site-footer,.dark *,.site-footer *{--focus:#fff}

/* --- Layout ------------------------------------------------------------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)}
@media(min-width:768px){.wrap{padding-inline:var(--s-6)}}
section{padding-block:var(--s-7)}
@media(min-width:768px){section{padding-block:var(--s-8)}}
.tint{background:var(--surface)}
.tint-sage{background:var(--sage-xl)}
.dark{background:var(--sage-d);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark p{color:#EBEFEA}
.dark a{color:#fff}
.section-head{max-width:var(--measure);margin-bottom:var(--s-6)}
.grid{display:grid;gap:var(--s-4)}
/* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen, sonst sprengen
   lange Zeichenketten (z. B. die [OFFEN]-Marker) das Raster. */
.grid>*{min-width:0}
.hero-grid>*{min-width:0}
/* Tablet-Hochformat beachten: iPad mini ist 744px, iPad 10,9" 820px, iPad Pro 11" 834px
   CSS-Breite. Ein Breakpoint bei 768px laesst das mini im Telefon-Layout — deshalb 640px. */
@media(min-width:640px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
.hairline{border:0;border-top:1px solid var(--line);margin-block:var(--s-6)}
.skip{position:absolute;left:-9999px;top:0;background:var(--sage-d);color:#fff;
  padding:var(--s-3) var(--s-4);z-index:200;text-decoration:none}
.skip:focus{left:var(--s-3);top:var(--s-3)}
main,section[id],[id^="f-"]{scroll-margin-top:88px}
main:focus{outline:none}

/* --- Header ------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgb(35 40 35 / .06)}
.header-in{display:flex;align-items:center;gap:var(--s-4);min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--font-text);font-size:.9375rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;flex:0 0 auto}
.brand:hover{color:var(--ink)}
.brand svg{flex:0 0 auto}
.nav{margin-left:auto;display:none}
.nav ul{display:flex;align-items:center;gap:var(--s-3);list-style:none;margin:0;padding:0}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.9375rem;font-weight:500;
  padding-block:var(--s-2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--sage-l)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--sage-d)}
.has-sub{position:relative}
.sub-toggle{background:none;border:0;cursor:pointer;color:var(--ink-2);font-size:.9375rem;
  font-weight:500;display:inline-flex;align-items:center;gap:6px;padding:var(--s-2) 0;
  border-bottom:2px solid transparent}
.sub-toggle:hover{color:var(--ink);border-bottom-color:var(--sage-l)}
.sub-toggle svg{transition:transform var(--motion-fast) var(--ease)}
.sub-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 12px);left:-16px;min-width:270px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-2);
  box-shadow:0 6px 24px rgb(35 40 35 / .08);display:none}
.sub[data-open]{display:block}
.sub ul{flex-direction:column;align-items:stretch;gap:0}
.sub a{display:block;padding:10px var(--s-3);border-bottom:0;border-radius:var(--radius);color:var(--ink)}
.sub a:hover{background:var(--surface);border-bottom:0}
.sub .desc{display:block;font-size:.8125rem;color:var(--ink-3);font-weight:400}
/* Spezifitaet: .btn setzt display:inline-flex und steht weiter unten,
   daher hier bewusst mit zwei Klassen selektieren. */
.btn.header-cta{display:none;flex:0 0 auto;padding:0 18px;font-size:.9375rem;min-height:44px}
/* Ohne JS gibt es keinen Burger, sondern eine sichtbare Linkliste.
   .js wird als erste JS-Anweisung am <html> gesetzt (Progressive Enhancement). */
.burger{display:none;margin-left:auto;align-items:center;gap:8px;background:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px var(--s-3);
  cursor:pointer;font-size:.9375rem;font-weight:600;min-height:44px}
.js .burger{display:inline-flex}
@media(max-width:1099px){
  .nav{display:block;margin-left:0;width:100%}
  .header-in{flex-wrap:wrap;padding-block:var(--s-3)}
  .nav ul{flex-wrap:wrap;gap:var(--s-3) var(--s-4)}
  .sub{position:static;border:0;box-shadow:none;padding:0;background:none;min-width:0;display:block}
  .sub ul{flex-direction:row;flex-wrap:wrap;gap:var(--s-3) var(--s-4)}
  .sub .desc{display:none}
  .sub-toggle{display:none}
  .js .nav{display:none}
  .js .header-in{flex-wrap:nowrap;padding-block:0}
}
@media(min-width:1100px){
  .nav,.js .nav{display:block}.btn.header-cta{display:inline-flex}
  .burger,.js .burger{display:none}
  .sub-toggle{display:inline-flex}.sub{position:absolute;display:none;background:var(--bg);
    border:1px solid var(--line);box-shadow:0 6px 24px rgb(35 40 35 / .08);padding:var(--s-2);min-width:270px}
  .sub[data-open]{display:block}.sub ul{flex-direction:column;gap:0}.sub .desc{display:block}
}
/* Mobile-Overlay */
.mnav{position:fixed;inset:0;z-index:150;background:var(--bg);padding:var(--s-4);
  overflow:auto;display:none}
.mnav[data-open]{display:block}
.mnav-top{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.mnav ul{list-style:none;margin:var(--s-5) 0 0;padding:0}
.mnav li+li{border-top:1px solid var(--line)}
.mnav a{display:block;padding:var(--s-4) 0;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-size:1.375rem;font-weight:600}
.mnav .btn{margin-top:var(--s-5);width:100%;justify-content:center}
.x{background:none;border:0;cursor:pointer;padding:10px;min-height:44px;min-width:44px}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--font-text);font-size:1rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-d);color:#fff}
.btn-secondary{background:transparent;color:var(--sage-d);border-color:var(--sage-d)}
.btn-secondary:hover{background:var(--sage-xl);color:var(--sage-d)}
.dark .btn-secondary{color:#fff;border-color:#fff}
.dark .btn-secondary:hover{background:rgb(255 255 255 / .12);color:#fff}
.btn:active{transform:translateY(1px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-block:var(--s-5)}
.textlink{font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* --- Hero --------------------------------------------------------------- */
.hero{padding-block:var(--s-7) var(--s-8)}
.hero-grid{display:grid;gap:var(--s-6);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:7fr 5fr;gap:var(--s-7)}}
.hero h1{margin-bottom:var(--s-4)}
.portrait{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--sage-xl);
  display:flex;align-items:center;justify-content:center}
.portrait span{font-size:.875rem;color:var(--ink-3);text-align:center;padding:var(--s-4);max-width:26ch}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;margin:var(--s-5) 0 0;padding:0}
.chips li{display:flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--ink-2);font-weight:500}
.chips svg{flex:0 0 auto;color:var(--sage-d)}

/* --- Karten ------------------------------------------------------------- */
.card{background:var(--surface);border-radius:var(--radius);padding:var(--s-5)}
.tint .card{background:var(--bg)}
.card>*:last-child{margin-bottom:0}
.card-lg{padding:var(--s-5)}
@media(min-width:768px){.card-lg{padding:var(--s-6)}}
.card .ct{color:var(--ink)}
.card .icon{color:var(--sage-d);margin-bottom:var(--s-3)}
.pathcard{display:flex;flex-direction:column;gap:var(--s-3)}
.pathcard .note{font-size:.9375rem;color:var(--ink-3);font-style:italic}
.pathcard .textlink{margin-top:auto}
.quotes{columns:1;column-gap:var(--s-4)}
@media(min-width:640px){.quotes{columns:2}}
@media(min-width:1024px){.quotes{columns:3}}
/* Zwei Empfehlungen nebeneinander — aber nie auf dem Telefon. Vorher stand die
   Spaltenzahl als inline-style im Markup und schlug damit jede Medienabfrage:
   Auf 375px brachen die Zitate in zwei 150px schmale Spalten mit Trennungen
   mitten im Wort. */
.quotes.quotes-paar{columns:1}
@media(min-width:640px){.quotes.quotes-paar{columns:2}}
.quote{background:var(--bg);border-radius:var(--radius);padding:var(--s-5);
  break-inside:avoid;margin:0 0 var(--s-4);border:1px solid var(--line)}
.tint .quote,.tint-sage .quote{background:var(--bg)}
.quote p{color:var(--ink);margin-bottom:var(--s-3)}
.quote{border-top:2px solid var(--clay)}
.quote .mark{display:none}
.quote cite{font-style:normal;font-size:.9375rem;color:var(--ink-2);font-weight:600}
.situation{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5)}
.tint .situation{background:var(--bg)}
.situation h3{font-family:var(--font-text);font-size:1.125rem;font-weight:600;
  color:var(--sage-d);margin-bottom:var(--s-2)}
.situation p{margin-bottom:0;font-size:1rem;color:var(--ink-2)}

/* --- Schwerpunkte -------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);list-style:none;margin:0 0 var(--s-5);padding:0}
.tags li{background:var(--sage-xl);color:var(--ink);border-radius:var(--radius);max-width:100%;
  padding:8px var(--s-3);font-size:.9375rem;font-weight:500}
.tint .tags li{background:var(--bg)}

/* --- Schritte ----------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);counter-reset:s}
@media(min-width:640px){.steps.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps.cols-4{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;position:relative;padding-top:var(--s-6)}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;background:var(--sage-d);color:#fff;
  display:grid;place-items:center;font-size:.9375rem;font-weight:600;font-family:var(--font-text)}
.steps h3{font-family:var(--font-text);font-size:1.0625rem;font-weight:600;margin-bottom:var(--s-2)}
.steps p{margin-bottom:0;font-size:1rem;color:var(--ink-2)}
.steps.stacked{gap:var(--s-6)}
.steps.stacked li{padding-top:0;padding-left:58px}
.steps.stacked h3{font-family:var(--font-display);font-size:1.3125rem}

/* --- Tabellen ----------------------------------------------------------- */
.table-scroll{overflow-x:auto;margin-bottom:var(--s-5);-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:2px solid var(--sage-d);outline-offset:3px}
.table-scroll[data-scrollable]{cursor:grab}
table{border-collapse:collapse;width:100%;font-size:1rem;min-width:520px}
caption{text-align:left;font-size:.9375rem;color:var(--ink-3);padding-bottom:var(--s-3)}
th,td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{font-weight:600;color:var(--ink);border-bottom:2px solid var(--sage-l);
  font-size:.9375rem}
tbody th{font-weight:600;color:var(--ink)}
td .price{font-weight:600;white-space:nowrap}

/* --- Preisliste ---------------------------------------------------------- */
.p-caption{font-size:.9375rem;color:var(--ink-3);margin-bottom:var(--s-3)}
.prices{margin:0 0 var(--s-5);padding:0;border-top:1px solid var(--line)}
.p-row{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:baseline;
  justify-content:space-between;padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.p-name{margin:0;font-weight:600;color:var(--ink);flex:1 1 16rem;min-width:0}
.p-note{display:block;font-weight:400;font-size:.9375rem;color:var(--ink-3);margin-top:2px}
.p-meta{margin:0;display:flex;align-items:baseline;gap:var(--s-4);flex:0 0 auto}
.p-dur{font-size:.9375rem;color:var(--ink-3);white-space:nowrap}
.p-price{font-family:var(--font-display);font-size:1.375rem;font-weight:600;color:var(--sage-d);
  white-space:nowrap;min-width:5.5rem;text-align:right}
@media(max-width:479px){
  .p-meta{width:100%;justify-content:space-between}
  .p-price{text-align:left;min-width:0}
}

/* --- Listen ------------------------------------------------------------- */
.ticks{list-style:none;margin:0 0 var(--s-5);padding:0;max-width:var(--measure)}
.ticks li{position:relative;padding-left:30px;margin-bottom:var(--s-3)}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;
  border-radius:50%;background:var(--sage-l)}
.ticks strong{color:var(--ink)}
.qa{max-width:var(--measure);margin-bottom:var(--s-6)}
.qa dt{font-weight:600;color:var(--ink);margin-bottom:var(--s-2);font-size:1.0625rem}
.qa dd{margin:0 0 var(--s-5);color:var(--ink-2)}
.numlist{margin:0 0 var(--s-5) 1.25em;padding:0;max-width:var(--measure)}
.numlist li{margin-bottom:var(--s-3)}

/* --- Hinweisblöcke ------------------------------------------------------ */
.note-box{background:var(--surface);border-left:3px solid var(--sage);border-radius:var(--radius);
  padding:var(--s-5);max-width:var(--measure)}
.note-box>*:last-child{margin-bottom:0}
.note-box h3{font-family:var(--font-text);font-size:1.0625rem;font-weight:600}
.help-box{background:var(--sage-xl);border-radius:var(--radius);padding:var(--s-5);max-width:var(--measure)}
.help-box>*:last-child{margin-bottom:0}
.help-box dl{margin:0}
.help-box dt{font-weight:600;margin-top:var(--s-3)}
.help-box dd{margin:0;color:var(--ink-2)}
.open{background:#FFF8EC;border:1px dashed var(--clay);border-radius:var(--radius);
  padding:2px 8px;font-size:.9375rem;color:var(--clay-d);font-weight:600;
  font-family:var(--font-text);display:inline;overflow-wrap:break-word;hyphens:auto}

/* --- Formular ----------------------------------------------------------- */
.form{max-width:34rem}
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field .hint{display:block;font-size:.875rem;color:var(--ink-3);font-weight:400;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;min-height:48px;padding:12px 16px;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--radius);font-size:1.0625rem}
textarea{min-height:110px;resize:vertical}
input:user-invalid,textarea:user-invalid{border-color:var(--clay-d);border-width:2px}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--s-4);
  max-width:var(--measure);font-size:.9375rem;line-height:1.55}
.check input{margin-top:2px;width:24px;height:24px;flex:0 0 auto;accent-color:var(--sage-d)}
.check input:user-invalid{outline:2px solid var(--clay-d);outline-offset:2px}
.check:has(input:user-invalid) label{color:var(--clay-d)}
.req{color:var(--clay-d)}
.form-errors{background:#FDF2EA;border-left:3px solid var(--clay-d);border-radius:var(--radius);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);color:var(--clay-d);font-weight:600}
.form-errors:focus{outline:2px solid var(--clay-d);outline-offset:2px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--clay-d);border-width:2px}

/* --- Footer ------------------------------------------------------------- */
.site-footer{background:var(--sage-dd);color:#fff;padding-block:var(--s-7) var(--s-5);margin-top:var(--s-8)}
.site-footer h2{font-family:var(--font-text);font-size:.8125rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sage-l);margin-bottom:var(--s-3)}
.footer-grid{display:grid;gap:var(--s-6)}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgb(255 255 255 / .3)}
.site-footer a:hover{border-bottom-color:#fff;color:#fff}
.site-footer p{color:#E3EADF;font-size:.9375rem}
.footer-brand{display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s-3)}
.legal{border-top:1px solid rgb(255 255 255 / .2);margin-top:var(--s-6);padding-top:var(--s-5)}
.legal-links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-4);font-size:.9375rem}
.disclaimer{font-size:.875rem;color:#D8E2D4;max-width:80ch;line-height:1.6}

/* --- Breadcrumb --------------------------------------------------------- */
.crumbs{padding-block:var(--s-4) 0;font-size:.875rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}

/* --- Bewegung: dekorative Einblendung, progressive Enhancement -------- */
/* Dekorative Einblendung: bewusst NUR transform, nie opacity.
   Grund: Bei opacity:0 waeren Inhalte unsichtbar, falls der Timeline-Fortschritt
   nicht greift (Druck, Screenshot, Reader-Modus, Teil-Support). Inhalt darf nie
   von einer Animation abhaengen. Reine Progressive Enhancement, kein JS-Fallback. */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    @keyframes settle{from{transform:translateY(14px)}}
    main>section>.wrap>*{
      animation:settle var(--motion-slow) var(--ease) backwards;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* --- Salbeizweige im Hintergrund ----------------------------------------- */
/* Zwei Zweige zeichnen sich beim Scrollen: einer waechst von unten rechts nach
   oben links, der andere von links herein. Vier Entscheidungen dahinter:

   1. z-index:-1 — die Zweige liegen HINTER allem, nie darueber. Dadurch
      verschwinden sie unter den getoenten Baendern (.tint, .dark) und tauchen
      in den hellen Abschnitten wieder auf. Das ist gewollt: ein Strich ueber
      dem Fliesstext waere ein Lesbarkeitsproblem, und die Zielgruppe ist der
      falsche Ort fuer solche Experimente.
   2. Erst ab 1024px ein Zweig, ab 1280px beide. Auf dem Telefon steht der Text
      ueber die volle Breite; dort laegen die Zweige staendig hinter Buchstaben
      statt neben ihnen.
   3. Der Ausgangszustand ist der FERTIG gezeichnete Zweig. Nur wo
      Scroll-Timelines wirklich unterstuetzt werden, faengt er bei null an.
      Wo das Feature fehlt (Firefox hinter Flag), stehen die Zweige da — statt
      unsichtbar zu bleiben.
   4. Die Adern sind schwaecher als die Umrisse. Gleich starke Striche machen
      aus einer Federzeichnung ein Gitter. */
.salbei{
  position:fixed;inset:0;
  z-index:-1;pointer-events:none;
  display:none;
  /* Groessencontainment braucht es nicht — die Box ist durch inset schon
     bestimmt. Layout und Paint genuegen. */
  contain:layout paint;
}
.salbei .zw{position:absolute;top:0;bottom:0;width:min(32vw,360px)}
.salbei .zw-links{left:0}
.salbei .zw-rechts{right:0}
.salbei svg{width:100%;height:100%}
.salbei path{
  fill:none;stroke:var(--sage);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.30;
  /* Jeder Pfad traegt pathLength="1", ist also auf die Laenge 1 normiert.
     Deshalb genuegt ein einziges dasharray fuer alle Striche —
     unabhaengig davon, wie lang sie tatsaechlich sind. */
  stroke-dasharray:1;stroke-dashoffset:0;
}
.salbei .ader{opacity:.18;stroke-width:.9}
@media (min-width:1024px){.salbei{display:block}}
/* Unter 1280px bleibt nur der rechte Zweig — zwei Zweige ruecken dem Text
   sonst zu nah. */
@media (max-width:1279px){.salbei .zw-links{display:none}}

@keyframes salbei-wachsen{to{stroke-dashoffset:0}}

/* --- Einzelblaetter auf den getoenten Baendern --------------------------- */
/* Die grossen Zweige liegen hinter allem und verschwinden unter den getoenten
   Flaechen. Dort setzt sich der Faden mit einzelnen Blaettern fort, die beim
   Hereinscrollen des Bandes gezeichnet werden.

   Der Stapel ist der springende Punkt: Das Band wird zum Bezugsrahmen, das
   Blatt liegt auf Ebene 0 — also ueber der Bandfarbe, aber unter dem Inhalt auf
   Ebene 1. Deshalb ist es sichtbar und stoert trotzdem keinen Buchstaben. */
/* overflow:CLIP, nicht hidden. `hidden` macht aus dem Band einen
   Scroll-Container — und dann loesen die view()-Zeitachsen der Blaetter gegen
   dieses Band auf statt gegen die Seite. Da das Band nicht scrollt, steht die
   Zeitachse still und die Blaetter frieren auf halbem Weg ein. `clip` schneidet
   genauso ab, ohne einen Scroll-Container zu erzeugen. */
main .tint,main .tint-sage,main .dark{position:relative;overflow:clip}
main .tint>.wrap,main .tint-sage>.wrap,main .dark>.wrap{position:relative;z-index:1}

.blatt-deko{
  position:absolute;z-index:0;pointer-events:none;
  width:clamp(90px,13vw,190px);
  display:none;
  /* Benannte Zeitachse: die Pfade im SVG haben keine eigene sinnvolle Box fuer
     view(). Die Huelle stellt sie bereit, die Pfade beziehen sich darauf. */
  view-timeline-name:--blatt;view-timeline-axis:block;
}
.blatt-deko svg{width:100%;height:auto;display:block}
.blatt-deko path{
  fill:none;stroke:var(--sage);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.34;
  stroke-dasharray:1;stroke-dashoffset:0;
}
.blatt-deko .ader{opacity:.2;stroke-width:.9}
/* Auf der dunklen Flaeche traegt Gruen nicht — dort helle Striche. */
main .dark .blatt-deko path{stroke:#fff;opacity:.16}
main .dark .blatt-deko .ader{opacity:.1}

/* Vier Plaetze im Wechsel: mal links unten, mal rechts oben. Gedreht wird ueber
   eine Variable, damit die Bewegung unten dieselbe Regel benutzen kann. */
.blatt-deko--0{left:-2%;bottom:6%;--dreh:-8deg}
.blatt-deko--1{right:-3%;top:8%;--dreh:166deg}
.blatt-deko--2{right:-1%;bottom:9%;--dreh:14deg}
.blatt-deko--3{left:-3%;top:7%;--dreh:194deg}
.blatt-deko{transform:rotate(var(--dreh,0deg))}

@media (min-width:1024px){.blatt-deko{display:block}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Der Strich wird gezogen, waehrend das Band ins Bild kommt. */
    .blatt-deko path{
      stroke-dashoffset:1;
      animation:salbei-wachsen linear forwards;
      animation-timeline:--blatt;
      animation-range:entry 20% cover 40%;
    }
    .blatt-deko .ader{animation-range:entry 35% cover 55%}

    /* Dazu ein knappes Aufrichten — nur transform, nie opacity: ein Blatt, das
       bei nicht greifender Zeitachse unsichtbar bliebe, waere ein Fehler. */
    @keyframes blatt-aufrichten{
      from{transform:rotate(calc(var(--dreh,0deg) + 6deg)) translateY(16px)}
    }
    .blatt-deko{
      animation:blatt-aufrichten linear backwards;
      animation-timeline:view();
      animation-range:entry 20% cover 45%;
    }
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll(root block)){
    .salbei path{
      stroke-dashoffset:1;
      animation:salbei-wachsen linear forwards;
      /* animation-timeline gehoert NICHT in die Kurzschreibweise — das
         Shorthand setzt sie sonst wieder auf auto zurueck. */
      animation-timeline:scroll(root block);
      animation-range:var(--r0) var(--r1);
    }
  }
}

/* --- Druck --------------------------------------------------------------- */
@media print{
  .site-header,.mnav,.burger,.skip,.crumbs,.salbei,.blatt-deko{display:none!important}
  body{font-size:11pt;background:#fff;color:#000}
  .dark,.site-footer,.tint,.tint-sage,.card,.quote,.help-box,.note-box,.situation,.tags li{
    background:#fff!important;color:#000!important;border:0}
  .dark *,.site-footer *,.dark h2,.dark h3,.dark p{color:#000!important}
  .site-footer{border-top:1pt solid #000;margin-top:16pt;padding-block:8pt}
  .btn{background:#fff!important;color:#000!important;border:1pt solid #000!important;
    min-height:0;padding:2pt 6pt}
  section{padding-block:12pt}
  a{color:#000}
  a[href^="http"]::after,a[href^="tel:"]::after,a[href^="mailto:"]::after{
    content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  h1,h2,h3{break-after:avoid}
  table,.card,.quote,.help-box,.note-box,.steps li{break-inside:avoid}
  .portrait{display:none}
}

/* --- Touch-Bedienung ----------------------------------------------------- */
/* Gilt fuer Tablets im Querformat, wo die Desktop-Navigation aktiv ist, aber
   mit dem Finger bedient wird. WCAG 2.5.8 verlangt 24px, 2.5.5 empfiehlt 44px. */
/* Notrufnummern sind auf dem Telefon die wichtigsten Tap-Ziele der ganzen Website.
   Sie werden deshalb unabhaengig vom Eingabegeraet gross und deutlich ausgezeichnet. */
.help-box a[href^="tel:"],.disclaimer a[href^="tel:"]{
  display:inline-flex;align-items:center;min-height:44px;font-weight:600;
  text-underline-offset:4px}
.help-box dd{margin-bottom:var(--s-1)}

@media (pointer:coarse){
  .brand{min-height:44px}
  .site-footer p a,.dark p a,.note-box a,.qa dd a,.ticks a,.help-box a{
    display:inline-flex;align-items:center;min-height:44px}
  .nav a,.sub-toggle{min-height:44px;display:inline-flex;align-items:center}
  .sub a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .legal-links a,.site-footer li a{display:inline-flex;align-items:center;min-height:44px}
  .textlink{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .chips li{min-height:36px}
  .x{min-height:48px;min-width:48px}
}

/* ==========================================================================
   WordPress-Ergaenzungen — alles ab hier ist neu gegenueber dem Prototypen.
   Reihenfolge: Schriften, Editor-Inhalt, Blog, WordPress-Standardklassen.
   ========================================================================== */

/* --- Lokale Schriften ---------------------------------------------------- */
/* Die WOFF2-Dateien liegen unter assets/fonts/ und werden mitgeliefert: Inter
   400/500/600 und Spectral 600, jeweils auf latin + latin-ext beschnitten
   (zusammen rund 190 kB, davon 85 kB vorgeladen). Kein Google-Fonts-Aufruf,
   deshalb kein Consent-Banner (Abschnitt 8.9). Beide Familien stehen unter der
   SIL Open Font License 1.1; die Lizenztexte liegen daneben. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/inter-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/inter-500.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/inter-600.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/spectral-600.woff2") format("woff2");
}

/* --- Barrierefreiheits-Helfer (WordPress-Konvention) --------------------- */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{
  background:var(--sage-d);color:#fff;clip-path:none;height:auto;width:auto;
  padding:var(--s-3) var(--s-4);left:var(--s-3);top:var(--s-3);z-index:200}

/* --- Redaktionell gepflegter Inhalt -------------------------------------- */
/* Alles, was aus dem Editor kommt: Seiteninhalt, Beitraege, Ergaenzungen.
   Bewusst eng gefuehrt — der Editor soll das Design-System nicht verlassen koennen. */
.prose{max-width:var(--measure)}
.prose > *:first-child{margin-top:0}
.prose h2{margin-top:var(--s-7)}
.prose h3{margin-top:var(--s-6)}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 var(--s-4);max-width:var(--measure)}
.prose li{margin-bottom:var(--s-2)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose blockquote{
  margin:var(--s-6) 0;padding:var(--s-4) var(--s-5);background:var(--sage-xl);
  border-left:3px solid var(--sage);border-radius:var(--radius)}
.prose blockquote p:last-child{margin-bottom:0}
.prose figure{margin:var(--s-6) 0}
.prose figcaption{font-size:.9375rem;color:var(--ink-3);margin-top:var(--s-2)}
.prose img{border-radius:var(--radius)}
.prose code{
  font-size:.9375rem;background:var(--surface);padding:2px 6px;border-radius:2px}
.prose table{width:100%;border-collapse:collapse;margin:var(--s-6) 0}
.prose th,.prose td{
  text-align:left;padding:var(--s-3);border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600}
.editor-content{padding-block:var(--s-6)}

/* Ausrichtungsklassen des Editors */
.alignleft{float:left;margin:0 var(--s-4) var(--s-3) 0}
.alignright{float:right;margin:0 0 var(--s-3) var(--s-4)}
.aligncenter{margin-inline:auto;display:block}
.alignwide,.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{
  font-size:.9375rem;color:var(--ink-3);margin-top:var(--s-2)}

/* --- Blog ---------------------------------------------------------------- */
.post-image{margin:var(--s-6) 0 var(--s-6)}
.post-image img{border-radius:var(--radius)}
.searchform{max-width:520px;display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap}
.searchform .field{flex:1 1 220px;margin-bottom:0}
.pagination{margin-top:var(--s-6)}
.pagination .nav-links{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.pagination a,.pagination span.current{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);
  border:1px solid var(--line-strong);border-radius:var(--radius);text-decoration:none}
.pagination span.current{background:var(--sage-d);color:#fff;border-color:var(--sage-d)}
.widget{margin-bottom:var(--s-4)}

/* --- Admin-Leiste -------------------------------------------------------- */
/* Ohne diese Regel schiebt die WordPress-Adminleiste den klebenden Header
   unter ihren eigenen Balken. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}
body.admin-bar .mnav{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .mnav{top:46px}
}

/* --- Formular-Rueckmeldungen des Kontaktformulars ------------------------ */
.form-status{
  margin-bottom:var(--s-5);padding:var(--s-4);border-radius:var(--radius);
  border:1px solid var(--line-strong);background:var(--surface)}
.form-status.is-success{border-color:var(--sage-d);background:var(--sage-xl)}
.form-status.is-error{border-color:var(--clay-d);background:#FFF8EC}
.form-status p:last-child{margin-bottom:0}
/* Honigtopf: fuer Menschen und Screenreader unsichtbar und nicht fokussierbar,
   fuer Formularroboter dagegen ein ganz normales Feld (Abschnitt 1.3). */
.hp-field{
  position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;
  overflow:hidden}

/* --- Tabellen auf dem Telefon -------------------------------------------- */
/* Bis 639px werden Tabellen nicht seitlich gescrollt, sondern gestapelt:
   eine Karte je Zeile, Spaltenname als Etikett darueber. Grund: Auf /orientierung/
   lagen 51 Prozent der Tabelle ausserhalb des Bildschirms, ohne jeden Hinweis —
   und das ist die Seite, auf der die rechtliche Abgrenzung steht. Dieselbe
   Ueberlegung wie beim Preisblock in Abschnitt 6.10: Liste statt Tabelle. */
@media(max-width:639px){
  .table-scroll{overflow-x:visible}
  .table-scroll table{min-width:0}
  .table-scroll thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap}
  .table-scroll tbody tr{
    display:block;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
  .table-scroll tbody th[scope="row"]{
    display:block;border:0;padding:0 0 var(--s-2);
    font-family:var(--font-display);font-size:1.1875rem;line-height:1.3}
  .table-scroll tbody td{
    display:block;border:0;border-top:1px solid var(--line);padding:var(--s-3) 0 var(--s-2)}
  .table-scroll tbody td:first-of-type{border-top:0}
  .table-scroll tbody td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--sage-d)}
}

/* --- Bildmarke ----------------------------------------------------------- */
/* Das Original ist eine feine Linienzeichnung. Unter etwa 34 px verliert sie
   ihre Lesbarkeit, deshalb steht sie im Header groesser als das frueher hier
   verwendete Ersatzzeichen. */
.brand-mark{flex:0 0 auto;height:44px;width:auto}
.footer-brand .brand-mark{height:40px}
.mnav-top .brand-mark{height:40px}
@media(max-width:479px){
  .brand-mark{height:38px}
}

/* --- Bilder in den Bildplaetzen ------------------------------------------ */
/* Der Rahmen gibt das Seitenverhaeltnis vor (4:5 oder 3:2), das Foto fuellt
   ihn vollstaendig. Ohne object-fit wuerde ein Portrait im 3:2-Rahmen gestaucht.
   figure/margin zuruecksetzen, weil Browser figure standardmaessig einruecken. */
figure.portrait{margin:0}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Geschlechtszeichen bei den Stimmen ---------------------------------- */
/* Kommt aus dem gelieferten Dokument, wo es ein farbiges Emoji war. Hier als
   Strichzeichnung in der Markenfarbe, damit es sich nicht vor die Aussage
   schiebt. Das Wort dazu steht unsichtbar daneben (screen-reader-text). */
.cite-gender{display:inline-flex;align-items:center;margin-right:6px;color:var(--sage-d);
  vertical-align:-3px}
.cite-gender svg{display:block}

/* --- Instagram-Beitraege -------------------------------------------------- */
/* Karten wie ueberall sonst, keine Instagram-Optik: kein schwarzer Rahmen,
   kein Verlaufsknopf, kein fremdes Logo. Die Bilder liegen in der eigenen
   Mediathek, geladen wird nichts von Meta — der Klick fuehrt hinaus, nicht
   der Seitenaufruf. */
.ig-grid{display:grid;gap:var(--s-4);margin-bottom:var(--s-5)}
@media(min-width:640px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
.ig-grid>*{min-width:0}

.ig-post{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-3)}
.ig-post p{margin:0;max-width:none}
.ig-bild{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:var(--sage-xl)}
.ig-bild img{width:100%;height:100%;object-fit:cover;display:block}
.ig-meta{margin-top:auto!important;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.ig-meta .small{color:var(--ink-3)}
.ig-profil{margin-bottom:var(--s-3)}

@media(pointer:coarse){
  .ig-meta a{display:inline-flex;align-items:center;min-height:44px}
}