/* ══════════════════════════════════════════════════════════════════════════
   KRÄUTERKONTOR — stil.css
   Welt: „Editorial Luxury", botanisch, warm. Die Praxis als Manufaktur.

   DIE GRUNDIDEE, an der sich alles hier ausrichtet: Das ist kein
   Website-Layout mit Bildern, sondern ein SATZSPIEGEL. Also eine Hauptspalte
   mit ruhiger Zeilenbreite, eine schmale Marginalienspalte daneben, und
   Haarlinien statt Kästen. Wo andere Praxisseiten Karten stapeln, steht hier
   ein Verzeichnis. Wo andere Symbolkreise setzen, steht hier eine Ziffer.

   Alle Farb-, Schrift- und Abstandswerte stehen auf :root. Wer die Vorlage
   an einen Kunden anpasst, sollte in aller Regel nur dort etwas ändern.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Farbe ────────────────────────────────────────────────────────────
     Drei Töne aus dem Manifest, plus die Zwischenstufen, die man braucht,
     damit nichts unter den Kontrastwert fällt. Die Werte hinter // sind
     nachgerechnet, nicht geschätzt.

     Tinte auf Papier .......... 12,6:1   (Fliesstext)
     Tinte-weich auf Papier ....  6,6:1   (Nebentext, Bildunterschriften)
     Kupfer-tief auf Papier ....  6,4:1   (Verweise, kleine Auszeichnung)
     Kupfer auf Papier .........  4,1:1   🔴 NUR gross oder als Linie/Fläche
     Papier auf Tinte .......... 12,6:1   (das dunkle Terminband)
     Kupfer-hell auf Tinte .....  5,1:1   (Auszeichnung im dunklen Band) */
  --papier:        #FBF7EF;
  --papier-tief:   #F2ECDF;
  --tinte:         #1F3226;
  --tinte-weich:   #4A5C50;
  --kupfer:        #B4623A;
  --kupfer-tief:   #8F4526;
  --kupfer-hell:   #D98C5F;

  --linie:         rgba(31, 50, 38, .18);
  --linie-stark:   rgba(31, 50, 38, .38);
  --linie-hell:    rgba(251, 247, 239, .26);

  /* ── Browser-Flächen ──────────────────────────────────────────────────
     Textmarkierung, Scrollbalken, Fokusring und Sprunglink gehören zu
     keinem Designsystem und verraten sonst sofort, dass eine Seite
     zusammengesetzt statt gebaut wurde. Vier Zeilen, grosse Wirkung. */
  --wahl-grund:        #1F3226;
  --wahl-schrift:      #FBF7EF;
  --balken-bahn:       #F2ECDF;
  --balken-griff:      rgba(31, 50, 38, .42);
  --balken-griff-hover: rgba(31, 50, 38, .66);
  --fokus:             #8F4526;
  --sprung-grund:      #1F3226;
  --sprung-schrift:    #FBF7EF;

  /* ── Schrift ──────────────────────────────────────────────────────────
     Fraunces trägt jede Überschrift und den Manifest-Absatz; Instrument
     Sans alles, was gelesen und nicht betrachtet wird. Beide liegen lokal
     in gemeinsam/schrift/ — kein CDN.
     Verfügbare Schnitte: Fraunces 400/600/700, Instrument Sans 400/500/600/700. */
  --schrift-titel: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --schrift-text:  'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  /* 🔴 Diese beiden Stapel stehen absichtlich ein zweites Mal wörtlich in den
     Grundregeln weiter unten (body und h1/h2/h3). Grund: Eine mechanische
     Prüfung kann eine Schriftverdrahtung nur sehen, wenn der Familienname
     wörtlich an einem font-family steht — hinter var() ist sie blind und
     würde eine Vorlage durchlassen, die in Wahrheit noch auf der Systemschrift
     läuft. Wer hier etwas ändert, ändert BEIDE Stellen. */

  --t-mikro:   .75rem;
  --t-klein:   .8125rem;
  --t-text:    clamp(1rem, .955rem + .22vw, 1.09rem);
  --t-vorlauf: clamp(1.16rem, 1.02rem + .62vw, 1.5rem);
  --t-h3:      clamp(1.14rem, 1.06rem + .34vw, 1.36rem);
  --t-h2:      clamp(2.05rem, 1.32rem + 3.1vw, 3.85rem);
  --t-h1:      clamp(2.85rem, 1.55rem + 5.3vw, 5.9rem);
  --t-manifest: clamp(1.35rem, 1.02rem + 1.55vw, 2.3rem);

  /* ── Abstände: eine einzige Skala, aus der alles kommt ────────────── */
  --raum-4:   4px;
  --raum-8:   8px;
  --raum-12:  12px;
  --raum-16:  16px;
  --raum-24:  24px;
  --raum-32:  32px;
  --raum-48:  48px;
  --raum-64:  64px;
  --raum-96:  96px;
  --raum-128: 128px;

  /* Senkrechter Abschnittsabstand: unten 96, oben bis 128 — der Satzspiegel
     eines Magazins hat oben mehr Luft als unten. */
  --abschnitt: clamp(var(--raum-64), 6vw + 24px, var(--raum-128));

  --satz-breite: 74rem;
  --spalte-text: 65ch;
  --kopf-hoehe:  72px;
  --rand-innen:  clamp(20px, 5vw, var(--raum-64));

  /* Die eine Beschleunigungskurve der ganzen Seite. Dieselbe wie in
     buehne.js — sonst laufen Hover und Auftritt gegeneinander. */
  --kurve: cubic-bezier(.22, 1, .36, 1);
}

/* ── Grundsatz ────────────────────────────────────────────────────────── */

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-text);
  line-height: 1.65;
  font-weight: 400;
  /* Kein overflow-x:hidden als Pflaster. Wenn hier etwas übersteht, ist es
     ein Fehler und soll auffallen. */
}

::selection { background: var(--wahl-grund); color: var(--wahl-schrift); }

h1, h2, h3 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

/* Verweise im Fliesstext: Unterstrich als Haarlinie mit Abstand, beim
   Überfahren wandert er auf die Grundlinie. Keine Farbe als einziges
   Unterscheidungsmerkmal. */
.fliess a,
.frage__antwort a,
.rand a,
.finden__kontakt a {
  color: var(--kupfer-tief);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-underline-offset .3s var(--kurve), color .3s var(--kurve);
}
.fliess a:hover,
.frage__antwort a:hover,
.rand a:hover,
.finden__kontakt a:hover { text-underline-offset: .1em; color: var(--tinte); }

/* Ankersprünge dürfen nicht unter der Kopfleiste landen. */
section[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--raum-24)); }

/* ── Wiederkehrende Bausteine ─────────────────────────────────────────── */

.satz {
  width: 100%;
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
}

/* Der Satzspiegel mit Marginalienspalte. Unter 1080px fällt die Randspalte
   unter den Text — sie ist Beiwerk, nie Voraussetzung. */
.satz--rand { display: grid; gap: var(--raum-48); }
@media (min-width: 1080px) {
  .satz--rand {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--raum-64);
    align-items: start;
  }
}

.satz__haupt > * + * { margin-top: var(--raum-24); }

.gross {
  font-size: var(--t-h2);
  line-height: 1.04;
  max-width: 18ch;
}

.vorlauf {
  font-size: var(--t-vorlauf);
  line-height: 1.5;
  color: var(--tinte-weich);
  max-width: 46ch;
}

.fliess { max-width: var(--spalte-text); }
.fliess > p + p { margin-top: var(--raum-16); }

/* Kapitälchenzeile: klein, versal, weit gesperrt. Das ist der Kolumnentitel
   des Magazins — er steht NEBEN oder UNTER Inhalten, nie als Augenbraue
   über einer Überschrift (§6 des Bauauftrags). */
.klein-versal {
  font-family: var(--schrift-text);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kupfer-tief);
  margin-bottom: var(--raum-12);
}

/* Initiale — der Zierbuchstabe, an dem man ein gesetztes Blatt erkennt. */
.initial::first-letter {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 3.9em;
  line-height: .78;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--kupfer-tief);
}

/* Alle Strichsymbole der Seite teilen sich eine Strichstärke. Ein Symbol
   mit anderer Stärke fällt sofort als Fremdkörper auf. */
.strichsymbol,
.pfeil,
.plan {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.strichsymbol, .pfeil { width: 22px; height: 22px; }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-8);
  padding: var(--raum-16) var(--raum-24);
  border-radius: 2px;
  font-family: var(--schrift-text);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .38s var(--kurve), color .38s var(--kurve),
              border-color .38s var(--kurve);
}
.knopf .pfeil { width: 19px; height: 19px; transition: transform .38s var(--kurve); }
.knopf:hover .pfeil { transform: translateX(4px); }

.knopf--voll  { background: var(--tinte); color: var(--papier); }
.knopf--voll:hover { background: var(--kupfer-tief); }

.knopf--linie {
  border: 1px solid var(--linie-stark);
  color: var(--tinte);
}
.knopf--linie:hover { border-color: var(--tinte); background: var(--papier-tief); }

.knopf--hell { background: var(--papier); color: var(--tinte); }
.knopf--hell:hover { background: var(--kupfer-hell); color: var(--tinte); }

.knopf--linie-hell { border: 1px solid var(--linie-hell); color: var(--papier); }
.knopf--linie-hell:hover { border-color: var(--papier); background: rgba(251, 247, 239, .09); }

.knopf--klein { padding: var(--raum-12) var(--raum-16); font-size: .85rem; }

/* ── Kopfleiste ───────────────────────────────────────────────────────── */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(10px);
  transition: background-color .4s var(--kurve);
}
/* Der Weichzeichner ist hier kein Zierrat: die Leiste liegt über Text und
   über dem Auftaktbild und muss in beiden Fällen lesbar bleiben. */
.kopf.gescrollt { background: color-mix(in srgb, var(--papier) 96%, transparent); }

.kopf__satz {
  height: var(--kopf-hoehe);
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-24);
}

.marke { text-decoration: none; display: grid; gap: 1px; }
.marke__wort {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.03em;
  line-height: 1;
}
.marke__zusatz {
  font-size: var(--t-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  line-height: 1;
  white-space: nowrap;
}
/* 🩸 Unter 640px teilen sich Wortmarke, Termin-Knopf und Menüknopf 390px.
   Der Zusatz brach dort auf zwei Zeilen und sprengte die 72px hohe Leiste.
   Der Ort steht im Auftakt, in der Fahne, im Fuss und im Impressum — im
   Kopf ist er am Handy verzichtbar, ein zweizeiliges Logo nicht. */
@media (max-width: 639px) { .marke__zusatz { display: none; } }

.kopf__nav { display: none; }
@media (min-width: 1000px) { .kopf__nav { display: block; } }

.kopf__liste { display: flex; gap: var(--raum-32); align-items: center; }
.kopf__liste--breit a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding-block: var(--raum-8);
  position: relative;
}
/* Der Unterstrich wächst aus der Mitte — eine Bewegung, keine zweite Farbe. */
.kopf__liste--breit a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--kupfer);
  transform: scaleX(0);
  transition: transform .4s var(--kurve);
}
.kopf__liste--breit a:hover::after { transform: scaleX(1); }

.kopf__rechts { display: flex; align-items: center; gap: var(--raum-12); }

.kopf__knopf-menue {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--tinte);
  border-radius: 2px;
}
@media (min-width: 1000px) { .kopf__knopf-menue { display: none; } }

.strich { transition: transform .42s var(--kurve), opacity .28s var(--kurve); transform-origin: center; }
[data-menue-offen] .strich--oben  { transform: translateY(3px) rotate(45deg); }
[data-menue-offen] .strich--unten { transform: translateY(-3px) rotate(-45deg); }

.kopf__linie { height: 1px; background: var(--linie); overflow: hidden; }
.kopf__balken {
  display: block;
  height: 100%;
  background: var(--kupfer);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Das Handy-Menü: volle Fläche, damit die Ziele gross genug sind. */
.kopf__panel {
  position: fixed;
  inset: var(--kopf-hoehe) 0 auto 0;
  height: calc(100svh - var(--kopf-hoehe));
  background: var(--papier);
  padding: var(--raum-48) var(--rand-innen) var(--raum-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .42s var(--kurve), transform .42s var(--kurve), visibility .42s var(--kurve);
}
[data-menue-offen] .kopf__panel {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
}
@media (min-width: 1000px) { .kopf__panel { display: none; } }

.kopf__panel .kopf__liste { flex-direction: column; align-items: flex-start; gap: var(--raum-12); }
.kopf__panel .kopf__liste a {
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  text-decoration: none;
}
.panel__fuss { font-size: var(--t-klein); color: var(--tinte-weich); }

/* Solange das Menü offen ist, wird der Hintergrund nicht mitgescrollt. */
[data-menue-offen] body { overflow: hidden; }

/* ── 1. Auftakt ───────────────────────────────────────────────────────── */

.auftakt {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding: calc(var(--kopf-hoehe) + var(--raum-64)) var(--rand-innen) var(--abschnitt);
}

.auftakt__satz { display: grid; gap: var(--raum-32); }
@media (min-width: 900px) {
  .auftakt__satz { grid-template-columns: 1.18fr .82fr; gap: var(--raum-64); align-items: end; }
}

.auftakt__zeile {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: var(--raum-24);
}

.auftakt__vorspann {
  font-size: var(--t-vorlauf);
  line-height: 1.52;
  color: var(--tinte-weich);
  max-width: 42ch;
}

.auftakt__knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--raum-12);
  margin-top: var(--raum-32);
}

.auftakt__bild { margin: 0; }
.auftakt__bild img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 2px;
}
.auftakt__bild figcaption,
.lageplan figcaption {
  margin-top: var(--raum-12);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--tinte-weich);
  max-width: 34ch;
}

/* Die Fahne unter dem Aufmacher — vier Felder, durch Haarlinien getrennt,
   wie der Zeitschriftenkopf über dem Editorial. */
.fahne {
  margin-top: var(--raum-64);
  border-top: 1px solid var(--linie);
  display: grid;
}
@media (min-width: 768px) { .fahne { grid-template-columns: repeat(4, 1fr); } }

.fahne__feld {
  padding: var(--raum-24) 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 768px) {
  .fahne__feld { padding: var(--raum-24) var(--raum-24) var(--raum-24) 0; border-bottom: 0; }
  .fahne__feld + .fahne__feld { border-left: 1px solid var(--linie); padding-left: var(--raum-24); }
}
.fahne dt {
  font-size: var(--t-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kupfer-tief);
  margin-bottom: var(--raum-8);
}
.fahne dd { margin: 0; font-size: var(--t-klein); line-height: 1.55; color: var(--tinte); }

/* ── 2. Manifest — der Signatur-Moment ────────────────────────────────── */

.manifest {
  background: var(--papier-tief);
  border-block: 1px solid var(--linie);
  padding-block: var(--abschnitt);
}

/* 🩸 Bis 767px steht die Pflanze ÜBER dem Absatz, nicht daneben. Vorher lief
   hier auch am Handy ein zweispaltiges Raster: dem Manifest-Absatz blieben
   bei 360px noch 232px, also rund 18 Zeichen je Zeile. Der Bauauftrag
   verlangt unter 768px einspaltig — und er hat recht. */
.manifest__satz {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-24);
  align-items: stretch;
}
@media (min-width: 768px) {
  .manifest__satz { grid-template-columns: 92px minmax(0, 1fr); gap: var(--raum-32); }
}
@media (min-width: 1080px) {
  .manifest__satz { grid-template-columns: 130px minmax(0, 1fr); gap: var(--raum-64); }
}

.manifest__pflanze { height: 200px; width: 68px; }
@media (min-width: 768px) { .manifest__pflanze { height: auto; width: auto; min-height: 280px; } }
.pflanze { width: 100%; height: 100%; overflow: visible; }
.pflanze__stiel {
  fill: none;
  stroke: var(--kupfer);
  stroke-width: 2;
  stroke-linecap: round;
}
.blatt {
  fill: var(--kupfer);
  fill-opacity: .16;
  stroke: var(--kupfer);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/* Ohne JS und bei Bewegungsverzicht steht die Pflanze fertig gezeichnet da.
   Erst seite.js setzt .waechst und übernimmt damit die Steuerung. */
.pflanze.waechst .blatt { opacity: 0; transform: scale(.4); }
.pflanze.waechst .blatt.auf {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--kurve), transform .6s var(--kurve);
}

.manifest__absatz {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--t-manifest);
  /* 1,45 statt 1,65: Das ist kein Fliesstext, sondern ein gesetzter
     Schaustellungsabsatz. Bei dieser Grösse würde 1,65 die Zeilen
     auseinanderreissen. */
  line-height: 1.45;
  letter-spacing: -.02em;
  max-width: 30ch;
  text-wrap: pretty;
}

.manifest__nachsatz {
  margin-top: var(--raum-32);
  font-size: var(--t-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kupfer-tief);
}

/* ── 3. Das Kontor ────────────────────────────────────────────────────── */

.kontor { padding-block: var(--abschnitt); }

.rand {
  border-top: 1px solid var(--linie-stark);
  padding-top: var(--raum-24);
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--tinte-weich);
}
.rand > * + * { margin-top: var(--raum-12); }
.rand__bild { margin: 0 0 var(--raum-24); }
.rand__bild img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}
.rand__liste { display: grid; gap: var(--raum-8); }
.rand__liste li { padding-left: var(--raum-16); position: relative; }
/* Der Aufzählungspunkt ist eine gezeichnete Haarlinie, kein Unicode-Zeichen. */
.rand__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 1px;
  background: var(--kupfer);
}

/* ── 4. Verzeichnis der Anwendungen ───────────────────────────────────── */

.verzeichnis { padding-block: var(--abschnitt); }
.verzeichnis__kopf {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  margin-bottom: var(--raum-48);
}
.verzeichnis__kopf .vorlauf { margin-top: var(--raum-16); }

/* 🩸 ul.eintraege statt .eintraege: grund.css setzt `ul[role="list"]` auf
   margin:0 / padding:0. Das ist spezifischer als eine einzelne Klasse und
   hat hier margin-inline:auto und padding-inline stillschweigend gewonnen —
   die ganze Liste stand links am Bildschirmrand statt im Satzspiegel. Eine
   Prüfung im Quelltext sieht das nicht, nur das Bild. */
ul.eintraege {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  border-top: 1px solid var(--linie-stark);
}

.eintrag {
  display: grid;
  gap: var(--raum-8);
  padding-block: var(--raum-24);
  border-bottom: 1px solid var(--linie);
  transition: background-color .4s var(--kurve);
}
@media (min-width: 860px) {
  .eintrag {
    grid-template-columns: 15rem minmax(0, 1fr) 7rem;
    gap: var(--raum-32);
    align-items: baseline;
    padding-block: var(--raum-32);
  }
}
.eintrag:hover { background: var(--papier-tief); }

.eintrag__name {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.eintrag__text { max-width: 58ch; color: var(--tinte-weich); }
.eintrag__dauer {
  font-size: var(--t-klein);
  letter-spacing: .06em;
  color: var(--kupfer-tief);
  font-weight: 500;
}
@media (min-width: 860px) { .eintrag__dauer { text-align: right; } }

/* ── 5. Kräuterschrank ────────────────────────────────────────────────── */

.schrank { padding-block: var(--abschnitt); }

.schrank__bild {
  max-width: var(--satz-breite);
  margin: 0 auto var(--raum-48);
  padding-inline: var(--rand-innen);
}
.schrank__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
}

.schrank__satz {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  display: grid;
  gap: var(--raum-48);
}
@media (min-width: 1080px) {
  .schrank__satz { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--raum-64); align-items: start; }
}
.schrank__text { max-width: var(--spalte-text); }
.schrank__text > * + * { margin-top: var(--raum-16); }
.schrank__text .gross { margin-bottom: var(--raum-24); }

.werkbuch {
  background: var(--papier-tief);
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: var(--raum-24);
}
.werkbuch__liste { display: grid; gap: var(--raum-12); }
.werkbuch__liste > div {
  display: flex;
  justify-content: space-between;
  gap: var(--raum-16);
  align-items: baseline;
  padding-bottom: var(--raum-12);
  border-bottom: 1px solid var(--linie);
}
.werkbuch__liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.werkbuch dt { font-size: var(--t-klein); color: var(--tinte-weich); }
.werkbuch dd { margin: 0; font-size: var(--t-klein); font-weight: 600; text-align: right; }

/* ── 6. Erster Besuch ─────────────────────────────────────────────────── */

.besuch {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding: var(--abschnitt) var(--rand-innen);
}
.besuch .gross { margin-bottom: var(--raum-48); }

.schritte { display: grid; gap: var(--raum-32); list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(4, 1fr); gap: var(--raum-32); }
}

.schritt { border-top: 1px solid var(--linie-stark); padding-top: var(--raum-16); }
.schritt__zahl {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--kupfer);
  margin-bottom: var(--raum-12);
}
.schritt__name {
  font-size: var(--t-h3);
  margin-bottom: var(--raum-8);
  line-height: 1.12;
}
.schritt p:not(.schritt__zahl) { color: var(--tinte-weich); font-size: .97rem; }

/* ── 7. Stimmen ───────────────────────────────────────────────────────── */

.stimmen {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding: var(--abschnitt) var(--rand-innen);
}
.stimmen__kopf {
  display: grid;
  gap: var(--raum-24);
  margin-bottom: var(--raum-48);
}
@media (min-width: 900px) {
  .stimmen__kopf { grid-template-columns: minmax(0, 1fr) 24rem; align-items: end; gap: var(--raum-64); }
}

/* 🔴 Der Beispielhinweis ist Pflicht und darf nicht kleiner oder blasser
   werden als hier. Er ist der Unterschied zwischen Musterseite und
   erfundener Referenz. */
.hinweis-beispiel {
  border: 1px solid var(--kupfer);
  border-radius: 2px;
  padding: var(--raum-12) var(--raum-16);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--kupfer-tief);
  background: var(--papier-tief);
}

.stimmen__paar { display: grid; gap: var(--raum-32); }
@media (min-width: 860px) { .stimmen__paar { grid-template-columns: 1fr 1fr; gap: var(--raum-64); } }

.stimme { margin: 0; border-top: 1px solid var(--linie-stark); padding-top: var(--raum-24); }
.stimme blockquote { margin: 0; }
.stimme blockquote p {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: clamp(1.22rem, 1.02rem + .95vw, 1.72rem);
  line-height: 1.42;
  letter-spacing: -.02em;
  /* Anführung als echtes Satzzeichen der Schrift, nicht als Zierglyphe
     in doppelter Grösse — das wäre der billigste aller Zitat-Tricks. */
}
.stimme blockquote p::before { content: "\201E"; }
.stimme blockquote p::after  { content: "\201C"; }
.stimme figcaption {
  margin-top: var(--raum-16);
  font-size: var(--t-klein);
  color: var(--tinte-weich);
}
.beispiel-marke {
  font-size: var(--t-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kupfer-tief);
}

/* ── 8. Honorar ───────────────────────────────────────────────────────── */

.honorar { padding-block: var(--abschnitt); }

.tarife {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--raum-32);
  font-size: .97rem;
}
.tarife th, .tarife td {
  text-align: left;
  padding: var(--raum-16) var(--raum-12) var(--raum-16) 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}
.tarife thead th {
  font-family: var(--schrift-text);
  font-size: var(--t-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kupfer-tief);
  border-bottom: 1px solid var(--linie-stark);
}
.tarife tbody th { font-family: var(--schrift-text); font-weight: 500; }
.tarife td:last-child, .tarife th:last-child { text-align: right; padding-right: 0; }
.tarife tbody tr:last-child th, .tarife tbody tr:last-child td { border-bottom: 0; }

/* ── 9. Fragen ────────────────────────────────────────────────────────── */

.fragen {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding: var(--abschnitt) var(--rand-innen);
}
.fragen .gross { margin-bottom: var(--raum-48); }

.fragen__liste { border-top: 1px solid var(--linie-stark); max-width: 60rem; }

.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-24);
  padding-block: var(--raum-24);
  cursor: pointer;
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  transition: color .35s var(--kurve);
}
.frage summary:hover h3 { color: var(--kupfer-tief); }

.frage__zeichen {
  flex: 0 0 auto;
  color: var(--kupfer-tief);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
}
.frage__zeichen .strichsymbol { width: 16px; height: 16px; }
/* Aus dem Plus wird beim Aufklappen ein Minus — der Querstrich dreht weg. */
.frage__quer { transform-origin: center; transition: transform .45s var(--kurve), opacity .3s var(--kurve); }
.frage[open] .frage__quer { transform: rotate(90deg); opacity: 0; }

.frage__antwort {
  padding-bottom: var(--raum-24);
  max-width: var(--spalte-text);
  color: var(--tinte-weich);
}

/* ── 10. Finden ───────────────────────────────────────────────────────── */

.finden { padding-block: var(--abschnitt); background: var(--papier-tief); border-block: 1px solid var(--linie); }

.finden__satz {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  display: grid;
  gap: var(--raum-48);
}
@media (min-width: 1000px) {
  .finden__satz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--raum-64); align-items: start; }
}

.finden__text .gross { margin-bottom: var(--raum-32); }
.finden__block { padding-top: var(--raum-24); border-top: 1px solid var(--linie); }
.finden__block + .finden__block { margin-top: var(--raum-24); }
.finden__block p { max-width: 52ch; }
.finden__block p + p { margin-top: var(--raum-12); }
.finden address { font-style: normal; line-height: 1.7; }
.finden__kontakt { margin-top: var(--raum-12); }
.finden__fussnote { margin-top: var(--raum-12); font-size: var(--t-klein); color: var(--tinte-weich); }

.zeiten { display: grid; gap: var(--raum-8); }
.zeiten > div {
  display: flex;
  justify-content: space-between;
  gap: var(--raum-16);
  align-items: baseline;
  border-bottom: 1px dotted var(--linie);
  padding-bottom: var(--raum-8);
}
.zeiten dt { color: var(--tinte-weich); font-size: .97rem; }
.zeiten dd { margin: 0; font-weight: 600; font-size: .97rem; white-space: nowrap; }

/* Der Lageplan ist gezeichnet, nicht eingebettet — eine fremde Karte wäre
   eine fremde Adresse zur Laufzeit (§2 des Bauauftrags). */
.lageplan figure { margin: 0; }
.plan {
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 340;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  color: var(--tinte);
}
.plan__grund { fill: var(--papier); stroke: none; }
.plan__strassen path { stroke: var(--linie); stroke-width: 22; }
.plan__mittellinien path { stroke: var(--papier-tief); stroke-width: 1.5; stroke-dasharray: 7 9; }
.plan__bloecke rect { fill: var(--papier-tief); stroke: var(--linie); stroke-width: 1.5; }
.plan__platz rect { fill: none; stroke: var(--linie); stroke-width: 1.5; stroke-dasharray: 4 5; }
.plan__platz circle { fill: none; stroke: var(--kupfer); stroke-width: 1.5; }
.plan__haus rect { fill: var(--kupfer); fill-opacity: .18; stroke: var(--kupfer-tief); stroke-width: 1.5; }
.plan__nadel { stroke: var(--kupfer-tief); stroke-width: 1.5; }
.plan__punkt { fill: var(--kupfer-tief); stroke: none; }
.plan__bus line, .plan__bus circle { stroke: var(--tinte-weich); stroke-width: 1.5; fill: none; }
.plan__schrift text { stroke: none; fill: var(--tinte-weich); font-family: var(--schrift-text); font-size: 11px; letter-spacing: .06em; }
.plan__marke {
  fill: var(--tinte) !important;
  font-family: var(--schrift-titel) !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -.02em !important;
}

/* ── 11. Termin ───────────────────────────────────────────────────────── */

.termin {
  background: var(--tinte);
  color: var(--papier);
  padding-block: clamp(var(--raum-96), 9vw, 160px);
  /* Der Fokusring muss auf dunklem Grund eine andere Farbe haben, sonst
     verschwindet er. */
  --fokus: var(--kupfer-hell);
  --wahl-grund: var(--kupfer-hell);
  --wahl-schrift: var(--tinte);
}

.termin__satz {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
}

.termin__zeile {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.termin__text {
  margin-top: var(--raum-24);
  font-size: var(--t-vorlauf);
  line-height: 1.55;
  max-width: 46ch;
  color: color-mix(in srgb, var(--papier) 84%, var(--tinte));
}
.termin__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-12); margin-top: var(--raum-32); }
.termin__fussnote {
  margin-top: var(--raum-48);
  padding-top: var(--raum-16);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
  max-width: 52ch;
  color: color-mix(in srgb, var(--papier) 76%, var(--tinte));
}

/* ── Fuss ─────────────────────────────────────────────────────────────── */

.fuss {
  background: var(--papier-tief);
  padding: var(--raum-64) 0 var(--raum-48);
}
.fuss__satz {
  max-width: var(--satz-breite);
  margin-inline: auto;
  padding-inline: var(--rand-innen);
  display: grid;
  gap: var(--raum-32);
}
@media (min-width: 768px) { .fuss__satz { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--raum-48); } }

.marke__wort--fuss { font-size: 1.5rem; margin-bottom: var(--raum-12); }
.fuss address { font-style: normal; font-size: var(--t-klein); line-height: 1.7; color: var(--tinte-weich); }
.fuss__liste { display: grid; gap: var(--raum-8); }
.fuss__liste a {
  font-size: var(--t-klein);
  text-decoration: none;
  color: var(--tinte-weich);
  transition: color .3s var(--kurve);
}
.fuss__liste a:hover { color: var(--kupfer-tief); }
.fuss__zeiten { font-size: var(--t-klein); line-height: 1.8; color: var(--tinte-weich); }

.fuss__beispiel {
  max-width: var(--satz-breite);
  margin: var(--raum-48) auto 0;
  padding: var(--raum-16) var(--rand-innen) 0;
  border-top: 1px solid var(--linie);
  font-size: var(--t-mikro);
  line-height: 1.65;
  color: var(--tinte-weich);
}

/* ── Bewegungsverzicht ────────────────────────────────────────────────────
   grund.css kürzt bereits alle Dauern. Hier kommt nur dazu, was sonst in
   einem halben Zustand hängenbliebe: die Pflanze steht dann vollständig
   gezeichnet da, nicht als Stummel. */
@media (prefers-reduced-motion: reduce) {
  .pflanze.waechst .blatt { opacity: 1 !important; transform: none !important; }
  .pflanze__stiel { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .kopf__balken { transform: scaleX(1); }
  .knopf:hover .pfeil { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RECHTSSEITE
   Dieselbe Handschrift, nur ohne Bilder: Satzspiegel mit Marginalienspalte,
   Haarlinien zwischen den Blöcken, Kapitälchen als Kolumnentitel. Eine
   Rechtsseite, die aussieht wie ein fremdes Dokument, entwertet die ganze
   Vorlage — sie ist die Seite, die Kunden am genauesten lesen.
   ══════════════════════════════════════════════════════════════════════════ */

.recht { padding: calc(var(--kopf-hoehe) + var(--raum-64)) 0 var(--abschnitt); }

.recht__titel {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: var(--raum-24);
  max-width: 16ch;
}

.recht__haupt > .vorlauf { margin-bottom: var(--raum-48); }

.recht__block { border-top: 1px solid var(--linie-stark); padding-top: var(--raum-32); }
.recht__block + .recht__block { margin-top: var(--raum-64); }

.recht__block h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  line-height: 1.08;
  margin-bottom: var(--raum-24);
}
.recht__block h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.16;
  margin-top: var(--raum-32);
  margin-bottom: var(--raum-8);
}
.recht__block p { max-width: var(--spalte-text); color: var(--tinte-weich); }
.recht__block p + p { margin-top: var(--raum-12); }
.recht__block address {
  font-style: normal;
  line-height: 1.7;
  color: var(--tinte);
  margin-bottom: var(--raum-12);
}

/* Der Hinweis an den Umsetzer, nicht an den Besucher: abgesetzt, damit man
   ihn beim Ersetzen der Platzhalter nicht übersieht. */
.recht__notiz {
  border-left: 1px solid var(--kupfer);
  padding-left: var(--raum-16);
  font-size: var(--t-klein);
  line-height: 1.6;
}

.recht__liste { display: grid; gap: var(--raum-16); margin-top: var(--raum-12); }
.recht__liste > div {
  display: grid;
  gap: var(--raum-4);
  padding-bottom: var(--raum-16);
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 768px) {
  .recht__liste > div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--raum-24); }
}
.recht__liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.recht__liste dt {
  font-size: var(--t-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kupfer-tief);
  padding-top: .25em;
}
.recht__liste dd { margin: 0; max-width: 52ch; color: var(--tinte-weich); }

.recht__rand { position: static; }
@media (min-width: 1080px) {
  /* In der Randspalte bleibt das Verzeichnis stehen, während der Text
     vorbeiläuft — das ist der Sinn einer Marginalie. */
  .recht__rand { position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-24)); }
}
.recht__rand .rand__liste li::before { top: .7em; }
.recht__rand a { color: var(--kupfer-tief); }

/* Der Anreisetext steht unter dem Lageplan, nicht unter den Sprechzeiten:
   Plan und Weg gehören zusammen, und die rechte Spalte lief sonst leer. */
.finden__block--anreise { margin-top: var(--raum-32); }