/* Lokale Schriften, SIL Open Font License 1.1 — keine Verbindung zu fremden Servern.
     Lizenztexte liegen daneben in assets/schriften/. Alle auf Latin verkleinert (81 KB statt 1,5 MB). */
  @font-face{font-family:'Poppins';src:url('schriften/Poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('schriften/Poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Cormorant';src:url('schriften/CormorantGaramond-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
  /* Variable Fassung (400-700) seit 09.08.2026: Sie enthaelt ein ECHT gezeichnetes Fett.
     Vorher lag nur die 400er-Fassung hier, und der Browser hat das font-weight:700 der
     Akzent-Ueberschriften selbst nachgedickt -- das laesst die Schwuenge einer Schreibschrift
     verlaufen und sieht in jedem Browser anders aus. Wer die Datei tauscht, braucht wieder
     eine Fassung mit wght-Achse, sonst kommt das gefaelschte Fett zurueck.
     woff2 zuerst (60 KB), TTF nur als Rueckfall fuer sehr alte Browser (75 KB, nur 400 --
     dort bleibt das Fett gefaelscht, das ist der Preis des Rueckfalls).
     Der Browser nimmt das erste Format, das er versteht -- praktisch immer woff2. */
  @font-face{font-family:'DancingScript';src:url('schriften/DancingScript-var.woff2') format('woff2'),
    url('schriften/DancingScript.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}

  :root{
    /* ---- Flächen, hell nach dunkel ---- */
    --fl-creme:#FBF5ED;   /* Marke · Grundflaeche der Seite. Seit 29.07.2026 keine Pflicht mehr
                             hinter dem Logo: die Symbolfassung ist freigestellt. */
    --fl-sand:#EAE4D3;
    --fl-salbei:#D3D9C2;  /* zugleich Jules Marken-Salbei und Mihaelas Hellgrün — die Brücke */
    --fl-oliv:#5F6858;    /* Mihaelas #6C7567, so weit abgedunkelt bis Cremetext lesbar ist (5,4:1) */
    --fl-gruen:#0F3830;   /* Marke, Logo-Dunkelgrün */

    /* ---- Schriftfarben ---- */
    --tx-stark:#1F3D33;
    --tx-normal:#2A473C;
    --tx-leise:#4A6157;
    --tx-hell:#FBF5ED;
    --tx-hell-2:#D6CFC2;

    /* ---- Akzente ---- */
    --ak-kupfer:#B0722F;       /* Schreibschrift auf hellen Flächen */
    --ak-kupfer-hell:#D9A05B;  /* Schreibschrift auf Dunkelgrün (5,6:1 statt 3,3:1) */
    --ak-marker:#2F6349;       /* Eyebrows, Symbole, Pfeile */
    --ak-marker-hell:#9FBBAF;  /* dieselbe Rolle auf Dunkelgrün */
    --ak-terra:#A95B42;        /* Terrakotta — Signalfarbe, NUR fuer echte Handlungsknoepfe.
                                  Loest am 15.08.2026 das Schieferblau #596F80 ab: zu leise fuer
                                  einen Hauptknopf und der einzige kalte Ton der Marke. Terrakotta
                                  steckt in Jules eigenen Fotos (Rostshirt im Ueber-mich-Bild).
                                  Cremetext darauf 4,5:1. Nicht an Deko oder Pfeile geben --
                                  sonst verliert der Kontakt-Knopf seine Sonderstellung. */
    --ak-terra-dunkel:#904D38;

    /* ---- Linien ---- */
    --linie:rgba(15,56,48,.14);
    --linie-hell:rgba(251,245,237,.22);

    /* ---- Formen: konsequent kantig, Knöpfe nur minimal gerundet ---- */
    --r-knopf:6px;
    --r-block:0;
    --r-rund:50%;

    /* ---- Maße ---- */
    --rand:clamp(24px,5vw,76px);

    /* ---- Schriften ---- */
    --serif:'Cormorant',Georgia,'Times New Roman',serif;
    --sans:'Poppins','Avenir Next','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  /* <picture> umschliesst seit 08.08.2026 drei Bilder der Startseite, damit das Handy eine
     kleinere Datei bekommt. display:contents nimmt das Element aus dem Layout heraus -- das
     <img> bleibt damit direktes Kind seines Elternteils und alle bestehenden Regeln
     (.hero-bild img, .split-bild img, .frucht-spur img) greifen unveraendert weiter.
     Ohne diese Zeile schoebe sich eine zusaetzliche Box dazwischen und der grosse
     "Ueber mich"-Block waere am Rechner kaputt. */
  picture{display:contents}
  html{scroll-behavior:smooth}
  /* 15.08.2026: Die Menueleiste steht dauerhaft oben (position:sticky) und ist je nach
     Breite 78 bis 120 px hoch. Ohne diesen Abstand sprang ein Menue-Link (z. B. "Angebote")
     genau so weit, dass die erste Zeile der Ueberschrift hinter der Leiste verschwand.
     scroll-padding-top haelt beim Sprung diesen Abstand frei -- Wert liegt bewusst ein
     paar Pixel ueber der Leiste. Wird die Leiste hoeher, muss dieser Wert mitwachsen. */
  html{scroll-padding-top:clamp(100px,10vw,128px)}
  body{margin:0;background:var(--fl-creme);color:var(--tx-stark);font-family:var(--sans);
    font-size:clamp(16px,.35vw + 14.9px,17.5px);line-height:1.7;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:3px solid var(--ak-kupfer);outline-offset:3px}

  /* ---------- Navigation ---------- */
  /* Hintergrund deckend in Creme. Das Logo ist seit 29.07.2026 freigestellt, der Ton ist
     also keine Pflicht mehr -- die Flaeche bleibt trotzdem, sie gehoert zum Entwurf. */
  .nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:8px var(--rand);border-bottom:1px solid var(--linie);background:var(--fl-creme)}
  /* Logo als Ganzes (assets/logo.svg, freigestellt und vektorisiert).
     WICHTIG, alter Fehler: frueher stand hier width:clamp(150px,26vw,380px) zusammen mit
     max-height:104px. Auf dem Handy ergab 26vw nur 97 px, die Untergrenze griff bei 150 px --
     der Name landete bei 8 px. Jetzt bestimmt die Breite, was da ist, und die Hoehe folgt. */
  .nav img{width:auto;height:clamp(84px,7.2vw,104px);display:block;max-width:100%}
  /* Auf dem Handy bestimmt die Breite, die Hoehe folgt. 48vw statt frueher 60vw:
     Die Leiste steht dauerhaft und kostete vorher rund 111 px, jetzt rund 88 px.
     Untergrenze ist Absicht -- der Name im Logo liegt damit bei rund 10 px und
     damit deutlich ueber dem alten Fehlerfall von 8 px (siehe Kommentar oben).
     Wird der Wert wieder erhoeht, waechst die Leiste im selben Verhaeltnis mit. */
  @media (max-width:620px){
    .nav{padding:6px var(--rand)}
    .nav img{height:auto;width:min(48vw,190px)}
  }
  .nav-links{display:flex;align-items:center;gap:clamp(12px,2.2vw,28px);font-size:15px}
  .nav-links a{text-decoration:none}
  .nav-links a:not(.knopf):hover{color:var(--ak-marker)}

  /* ---------- Knöpfe ---------- */
  .knopf{display:inline-flex;min-height:48px;align-items:center;justify-content:center;
    padding:12px clamp(18px,3vw,38px);border-radius:var(--r-knopf);
    background:var(--ak-terra);color:var(--fl-creme);text-decoration:none;
    font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.125em;text-transform:uppercase;line-height:1.3;text-align:center}
  .knopf:hover{background:var(--ak-terra-dunkel)}
  .nur-schmal{display:none}

  /* Rangfolge der beiden Kontakt-Knoepfe (15.08.2026, in zwei Schritten gewachsen).
     Problem: Auf der Startseite stehen zwei Knoepfe mit demselben Text im ersten
     Bildausschnitt -- in Terrakotta hoben sich zwei gleich laute Bloecke gegenseitig auf.
     Loesung: Es ist immer genau EINER gefuellt, und zwar der, den man gerade erreichen kann.

       Hero im Blick  -> Hero gefuellt, Leiste als Umriss  (data-hero-sichtbar an der <nav>)
       Hero weg       -> Leiste gefuellt                    (Grundzustand, kein Attribut)

     Der GEFUELLTE Zustand ist bewusst der Grundzustand: Faellt das Skript aus oder kennt der
     Browser IntersectionObserver nicht, bleibt der Knopf gefuellt -- der sichere Fall.
     Gesetzt wird das Attribut in assets/menue.js.

     Nur ab 821px. Darunter liegt der Leisten-Knopf hinter dem Burger, kann also nie
     gleichzeitig mit dem Hero-Knopf im Bild stehen -- dort gibt es das Problem nicht.

     Rand als inset box-shadow statt border: aendert kein einziges Mass, der Knopf springt
     beim Umschalten also nicht.
     Terrakotta-Schrift auf Creme 4,51:1 -- besteht knapp. Wer die Schrift hier kleiner
     macht als 13px, muss den Text auf Dunkelgruen umstellen. */
  @media (min-width:821px){
    .nav .knopf{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
    .nav[data-hero-sichtbar] .knopf{background:transparent;color:var(--ak-terra);
      box-shadow:inset 0 0 0 2px var(--ak-terra)}
    .nav[data-hero-sichtbar] .knopf:hover{background:var(--ak-terra);color:var(--fl-creme)}
  }
  @media (prefers-reduced-motion:reduce){
    .nav .knopf{transition:none}
  }

  @media (max-width:820px){
    .nav .knopf{padding:10px 16px;font-size:12px;letter-spacing:.08em}
    .nav .nur-breit{display:none}.nav .nur-schmal{display:inline}
  }
  /* Sekundärknopf: volle Spaltenbreite, Salbei — die tertiäre Variante von mihaelatissotnutrition.com */
  .knopf--flach{display:flex;width:100%;min-height:52px;background:var(--fl-salbei);color:var(--fl-gruen);letter-spacing:.11em;font-size:13px}
  .knopf--flach:hover{background:#C6CFB2}
  .textlink{display:inline-block;font-weight:500;color:var(--ak-marker);text-decoration:none;
    border-bottom:2px solid rgba(47,99,73,.35);padding-bottom:2px}
  .textlink:hover,.textlink:focus-visible{border-bottom-color:var(--ak-marker)}

  /* ---------- Eyebrow (eine Rolle, drei Einsatzorte) ---------- */
  /* 15.08.2026 auf Jules Wunsch umgestellt. Vorher: Poppins 12 px, VERSALIEN, gesperrt
     (letter-spacing .125em). Das ist genau die Mini-Ueberschrift, die auf praktisch jeder
     mit einem Baukasten oder von einer KI gebauten Seite ueber jeder Ueberschrift steht --
     sieben Stueck waren es hier. Jetzt: Cormorant kursiv in normaler Gross-/Kleinschreibung.
     Dadurch liest es sich wie eine Zwischenbemerkung statt wie ein Etikett, und es teilt
     sich die Schrift mit den Ueberschriften, statt eine eigene Stimme aufzumachen.
     ZWEI DINGE NICHT AENDERN: (1) Die Farbe bleibt wie sie war -- sie ist auf allen vier
     Untergruenden auf Kontrast gerechnet (Creme, Dunkelgruen, Oliv, Salbei), eine neue
     Farbe muesste neu geprueft werden. (2) text-transform bleibt WEG: Die Beschriftungen
     stehen im HTML in normaler Schreibweise ("Persoenlicher Einblick"), Versalien kamen
     allein aus dieser Zeile. Wer sie zurueckholt, holt auch den Etiketten-Eindruck zurueck. */
  .eyebrow,.ort,.ueber-rolle{font:italic 400 clamp(16px,1.5vw,19px)/1.45 var(--serif);letter-spacing:0;text-transform:none;color:var(--ak-marker);margin:0 0 10px}
  .ort,.ueber-rolle{margin:0}

  /* ---------- Hero ---------- */
  /* Der Hero fuellt zusammen mit der Navigation den ersten Bildschirm. Dadurch beginnt das
     Frucht-Band erst unterhalb der Falz und ist die Belohnung fuers Weiterscrollen.
     Abgezogen werden 80 px statt der vollen Navigationshoehe - lieber etwas zu hoch als zu
     niedrig, sonst blitzt das Band doch hervor. */
  /* Innenabstand oben und unten gleich, sonst sitzt der Inhalt trotz Zentrierung zu tief.
     Die Mindesthoehe fuellt den ersten Bildschirm, damit das Frucht-Band erst beim Scrollen kommt;
     die Navigationshoehe wird gemessen (siehe Skript), weil sie mit der Fensterbreite waechst. */
  .hero{padding:clamp(40px,5vw,72px) var(--rand);
    min-height:calc(100vh - var(--nav-h, 121px) + 12px);
    display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
  @supports (height:100svh){ .hero{min-height:calc(100svh - var(--nav-h, 121px) + 12px)} }
  /* height:auto ist Pflicht, sobald am <img> width/height als Attribute stehen (sie stehen dort,
     damit der Browser den Platz schon vor dem Laden kennt). Ohne height:auto zaehlt die
     Attributhoehe als echte Hoehe und aspect-ratio wird ueberstimmt -- das Bild waere dann
     709 px hoch statt im Verhaeltnis 5:4. */
  .hero-bild img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 32%;border-radius:var(--r-block)}
  .hero h1{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
    font-size:clamp(34px,5.2vw,76px);line-height:1.16;max-width:11em;margin:14px 0 22px;
    color:var(--tx-stark);text-wrap:balance;overflow-wrap:break-word}
  .hero h1 em{font-style:normal;font-family:'DancingScript',cursive;color:var(--ak-kupfer);
    font-size:1.32em;line-height:.8;vertical-align:-.06em;margin:0 .1em;opacity:0;
    animation:auf 1.4s cubic-bezier(.22,.61,.36,1) forwards}
  /* Tempo (15.08.2026, auf Jules Wunsch verlangsamt): vorher 0,7s mit 6px Weg und 0,35s/0,6s
     Versatz -- das war so kurz, dass man den Effekt gar nicht wahrnahm. Jetzt 1,4s, doppelter
     Weg (12px) und deutlicher Versatz zwischen den beiden Schreibschrift-Stellen, damit sie
     nacheinander kommen statt fast gleichzeitig. Die zweite ist nach rund 2,4s fertig.
     Wer weiter verlangsamt: ueber etwa 3s wirkt es zaeh, nicht ruhig.
     Fertig ist die zweite Stelle nach rund 2,5s. */
  /* ACHTUNG beim Umbauen der Ueberschrift: NICHT nth-of-type benutzen. Das zweite <em>
     ("ohne Verbote") steckt in <span class="nobr">, ist also das erste <em> SEINES Elternteils.
     Die frueheren Regeln em:nth-of-type(1)/(2) trafen deshalb beide Stellen zugleich mit
     demselben Wert -- die Staffelung hat nie gewirkt, beide flogen gleichzeitig ein.
     Gefunden und behoben am 15.08.2026. Hier wird ueber die Lage im HTML angesprochen. */
  .hero h1 > em{animation-delay:.5s}
  .hero h1 .nobr em{animation-delay:1.1s}
  @keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .copy{font-size:clamp(16px,1.35vw,18.5px);line-height:1.65;max-width:52ch;margin:0 0 20px;color:var(--tx-normal)}
  .qual{font-size:14px;line-height:1.6;color:var(--tx-leise);margin:0 0 24px;max-width:52ch}
  .hero .knopf{margin-top:2px}

  /* ---------- Abschnitte und Flächenrhythmus ---------- */
  .abschnitt{padding:clamp(56px,7vw,110px) var(--rand)}
  .abschnitt__inner{max-width:1080px;margin:auto}
  /* Reines Weiss kommt auf der Seite gar nicht mehr vor: Es bricht die Waerme der Cremeflaeche.
     Der Rhythmus laeuft ausschliesslich ueber Creme und Sand. */
  #angebote{background:var(--fl-creme)}
  #benefits{background:var(--fl-sand)}
  #ablauf{background:var(--fl-creme)}
  h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.14;margin:0 0 28px;color:var(--tx-stark);text-wrap:balance}
  /* Abschnitts-Überschriften in Schreibschrift — der Akzent, der an den Hero anknüpft */
  #angebote h2,#ueber h2,#ablauf h2,#benefits h2,#kontakt h2{font-family:'DancingScript',cursive;font-weight:700;
    font-size:clamp(38px,4.8vw,70px);line-height:1.12;color:var(--ak-kupfer)}
  /* Auf den dunklen Flaechen traegt Kupfer den Kontrast nicht (Oliv 1,7:1) - dort Creme bzw. helles Kupfer. */
  #kontakt h2{color:var(--ak-kupfer-hell)}
  #ueber h2{color:var(--tx-hell)}
  h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,30px);margin:0 0 12px;color:var(--tx-stark)}

  /* ---------- Angebote: drei gleichrangige Felder in Salbei ---------- */
  /* Bewusst ohne Fotos und ohne Nummern: Fotos gab es nur als KI-Bilder, und eine Nummerierung
     behauptet eine Reihenfolge - die drei Angebote sind aber gleichrangig. Zahlen bleiben dem
     Beratungsablauf vorbehalten, wo es wirklich Schritt 1 bis 5 gibt. */
  .kacheln{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;
    column-gap:clamp(16px,2vw,26px);row-gap:0}
  .angebot{display:flex;flex-direction:column;min-width:0;
    background:var(--fl-salbei);padding:clamp(26px,3vw,40px)}
  .angebot-titel{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,29px);
    line-height:1.2;margin:0 0 14px;color:var(--tx-stark);
    overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  .angebot-text{color:var(--tx-normal);font-size:15px;line-height:1.6;margin:0 0 20px}
  /* margin-top:auto schiebt den Knopf nach unten, damit alle drei auf gleicher Hoehe sitzen */
  .angebot .knopf--flach{margin-top:auto;background:var(--fl-creme);color:var(--fl-gruen)}
  .angebot .knopf--flach:hover{background:#FFFCF7}

  /* ---------- Beratungsschwerpunkte ---------- */
  .schwerpunkte-strip{margin-top:clamp(34px,4.5vw,52px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--linie)}
  .schwerpunkte-strip .eyebrow{margin:0 0 16px}
  /* 15.08.2026: Der laengste Punkt ("Uebergewicht, Adipositas und metabolisches Syndrom")
     lief IMMER zweizeilig, auf jeder Bildschirmbreite. Grund gerechnet, nicht geraten:
     .abschnitt__inner ist auf 1080 px begrenzt, zwei gleiche Spalten (1fr 1fr) sind damit
     nie breiter als 512 px, abzueglich Pfeil (36) und Abstand (16) bleiben 460 px Text --
     der Punkt braucht 468 px. Es fehlten also immer 8 px, egal wie gross das Fenster war.
     Loesung: Die Spalten sind jetzt INHALTSBREIT (auto auto) statt gleich breit. Der lange
     Punkt bekommt seine 520 px, die zweite Spalte kommt mit 466 px aus, zusammen mit dem
     Abstand sind das 1042 von 1080 px. Unterhalb von 1160 px Fensterbreite reicht das nicht
     mehr -- dort steht die Liste einspaltig, dann passt jeder Punkt erst recht in eine Zeile.
     WER HIER EINEN LAENGEREN PUNKT ERGAENZT, muss diese Rechnung neu machen: Textbreite mit
     canvas measureText bestimmen, +52 px fuer Pfeil und Abstand, beide Spalten plus Abstand
     duerfen 1080 px nicht ueberschreiten. */
  .sp-liste{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
  @media (min-width:1160px){
    .sp-liste{grid-template-columns:auto auto;justify-content:start;gap:16px clamp(28px,4vw,56px)}
  }
  .sp-liste li{display:flex;align-items:center;gap:16px;color:var(--tx-normal);min-width:0}
  /* 15.08.2026: hyphens:auto ist raus. Am Rechner steht jetzt ohnehin jeder Punkt in einer
     Zeile; auf dem Handy passt der laengste nie hinein, und dort sah die Silbentrennung
     schlechter aus als ein normaler Umbruch ("Nahrungsmittelunvertraeglichkei-ten").
     overflow-wrap bleibt als Notnagel gegen seitliches Schieben. */
  .sp-liste li > span:last-child{min-width:0;overflow-wrap:break-word}
  .sp-pfeil{flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-rund);background:rgba(47,99,73,.12);
    display:grid;place-items:center;color:var(--ak-marker)}
  .sp-pfeil svg{width:16px;height:16px}
  /* Schwerpunkte erscheinen beim Reinscrollen langsam nacheinander (nur wenn JS läuft).
     Tempo (15.08.2026, auf Jules Wunsch verlangsamt): vorher 0,55s mit 10px Weg und 0,18s
     Abstand -- die vier Zeilen kamen praktisch zusammen. Jetzt 1,1s, 18px Weg und 0,3s
     Abstand; die vierte Zeile ist nach rund 2s da. Der Abstand ist der Punkt, an dem man
     dreht, wenn es "nacheinander" aussehen soll, nicht die Dauer. */
  .sp-liste.js-anim li{opacity:0;transform:translateY(18px);
    transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .sp-liste.js-anim.sichtbar li{opacity:1;transform:none}
  .sp-liste.js-anim.sichtbar li:nth-child(1){transition-delay:0s}
  .sp-liste.js-anim.sichtbar li:nth-child(2){transition-delay:.3s}
  .sp-liste.js-anim.sichtbar li:nth-child(3){transition-delay:.6s}
  .sp-liste.js-anim.sichtbar li:nth-child(4){transition-delay:.9s}
  /* ACHTUNG: Je Listenpunkt braucht es eine Zeile. Die Liste hat fuenf Punkte, gestaffelt
     waren aber nur vier -- der fuenfte hatte dadurch Verzoegerung 0 und erschien zusammen
     mit dem ersten. Gefunden und behoben am 15.08.2026. Wer einen Schwerpunkt ergaenzt,
     muss hier eine Zeile mit +0,3s anhaengen, sonst springt der neue nach vorn. */
  .sp-liste.js-anim.sichtbar li:nth-child(5){transition-delay:1.2s}
  @media (prefers-reduced-motion: reduce){.sp-liste.js-anim li{opacity:1;transform:none;transition:none}}
  .anliegen-note{margin:0;color:var(--tx-leise);font-size:15px;line-height:1.65}

  /* ---------- Frucht-Band ---------- */
  /* Vollbreiter Streifen aus Jules eigenen Nahaufnahmen. Die Spur ist breiter als der
     Bildschirm; beim Scrollen verschiebt sie sich leicht - dadurch wirkt das Band lebendig,
     ohne von allein zu laufen. Ohne JavaScript steht sie einfach still. */
  /* Frucht-Band nach Vorbild hannah-kutheus.de: Das Bild bleibt beim Scrollen gleichsam stehen,
     die Seite laeuft darueber hinweg. Technisch ist die Bildflaeche oben und unten groesser als das
     sichtbare Band; dieser Ueberstand ist der Weg, den das Bild zurueckwandert. */
  .frucht-band{position:relative;overflow:hidden;line-height:0;background:var(--fl-sand);
    height:clamp(150px,16vw,215px)}
  /* Der Schleier nimmt der Aufnahme die Grellheit und bindet sie an die Cremeflaeche. */
  .frucht-band::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--fl-creme);opacity:.12}
  /* Das Bild liegt in voller Hoehe ueber dem Band. Weil es hoeher ist als das sichtbare Fenster,
     entsteht beim Verschieben der Eindruck, es bleibe stehen waehrend die Seite darueber laeuft. */
  .frucht-spur{position:absolute;left:0;right:0;top:0;will-change:transform}
  .frucht-spur img{width:100%;height:auto;display:block;filter:saturate(.92)}
  @media (prefers-reduced-motion:reduce){.frucht-spur{transform:none !important}}

  /* ---------- Grosser kantiger Block (Vorbild mihaelatissotnutrition.com) ---------- */
  /* Die Farbflaeche liegt durchgehend auf der Section selbst; das Bild deckt per object-fit
     genau die linke Haelfte ab. Prozentspalten ergeben exakt 100 % und koennen nicht ueberlaufen. */
  .abschnitt--voll{padding:0}
  /* 16.08.2026, Spaltenbreiten geaendert (Bild 50 -> 43 %, Text 38 -> 46 %):
     Der Abschnitt war 1371 px hoch und passte damit auf keinen Bildschirm - Jules Einwand.
     Ursache war die schmale Textspalte (486 px): 5 Absaetze plus Qualifikationen stapelten
     sich zu 1243 px Text. Die breitere Spalte nimmt Zeilen weg, ohne dass ein Wort
     gestrichen werden muss. Nicht weiter aufziehen: bei mehr als rund 46 % wird die Zeile
     laenger als etwa 68 Zeichen und liest sich schwer. Das Bild deckt weiterhin seine
     Spalte per object-fit vollstaendig ab, es entsteht kein Rand. */
  .split{display:grid;grid-template-columns:43% 5% minmax(0,46%) minmax(0,6%);align-items:stretch;
    min-height:clamp(420px,45vw,660px);background:var(--fl-oliv);color:var(--tx-hell);overflow:hidden}
  .split-bild{grid-column:1;margin:0;height:100%;min-width:0}
  .split-bild img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 30%;border-radius:var(--r-block)}
  /* max-width ist die Bremse zur breiten Spalte: Auf grossen Monitoren (ab etwa 1500 px)
     waere die 46-%-Spalte sonst ueber 800 px breit und die Zeile ueber 90 Zeichen lang -
     das liest sich schlecht. 68 Zeichen ist die Obergrenze des gut Lesbaren; auf einem
     1440er Bildschirm greift die Bremse noch nicht (gemessen 58-65 Zeichen je Zeile). */
  .split-text{grid-column:3;align-self:center;min-width:0;max-width:68ch;padding:clamp(36px,4vw,56px) 0}
  .split-text h2{color:var(--tx-hell)}
  .split-text p{color:var(--tx-hell);margin:0 0 16px}
  .split-text .eyebrow{color:var(--tx-hell);opacity:.75}
  .split-text .qual{color:var(--tx-hell);opacity:.72;font-size:14px;margin:0}
  /* Qualifikationen im Ueber-mich-Block. Bewusst eine Liste statt einer Fliesstextzeile:
     "Ernaehrungsberatung" ist keine geschuetzte Berufsbezeichnung, Studium und Zertifikat
     sind deshalb das tragende Vertrauensmerkmal - in einer grauen Zeile mit Trennpunkten
     gehen sie unter. Die Zwischenzeile .qual-laufend traegt rechtliche Bedeutung, siehe
     Kommentar in index.html. Zurueckhaltend gehalten: kleine Punkte in Salbei statt
     Aufzaehlungszeichen, damit der Block den Fliesstext daneben nicht ueberstimmt. */
  /* 16.08.2026: Die beiden Qualifikations-Bloecke stehen jetzt NEBENEINANDER statt
     untereinander - das spart rund 90 px Hoehe, ohne ein Wort zu streichen.
     Die Reihenfolge bleibt inhaltlich dieselbe: Abgeschlossenes liest man zuerst (links),
     Laufendes danach (rechts). Beide Beschriftungen stehen weiterhin direkt ueber IHRER
     Liste - das ist die rechtlich tragende Zuordnung, siehe Kommentar in index.html.
     Wer hier wieder auf eine Spalte zurueckgeht, macht den Abschnitt wieder hoeher.
     Unter 700 px Spaltenbreite stapelt es sich von allein zurueck (Regel weiter unten). */
  .qual-block{margin:24px 0 0;color:var(--tx-hell);
    display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);align-items:start}
  /* Die Zwischenzeile beginnt in der zweiten Spalte oben, nicht unter der ersten Liste. */
  .qual-block h3{grid-column:1}
  .qual-block .qual-laufend{grid-column:2;grid-row:1}
  .qual-block ul:first-of-type{grid-column:1}
  .qual-block ul:last-of-type{grid-column:2;grid-row:2}
  /* 15.08.2026: "Qualifikationen" und "Derzeit in Ausbildung" tragen jetzt DENSELBEN Stil
     wie die Eyebrow-Zeile (Cormorant kursiv). Vorher waren es zwei weitere eigene Stile --
     Jule hat in diesem einen Abschnitt sieben verschiedene Schriftbilder gezaehlt, und sie
     hatte recht. Beide sind Beschriftungen ueber einer Liste, also dieselbe Rolle wie die
     Eyebrow-Zeile; sie bekommen deshalb dasselbe Bild. */
  .qual-block h3{font:italic 400 clamp(16px,1.5vw,19px)/1.45 var(--serif);
    letter-spacing:0;margin:0 0 12px;color:var(--tx-hell)}
  .qual-block ul{list-style:none;margin:0;padding:0}
  /* Die Deckkraft ist gerechnet, nicht geschaetzt. Auf der gruenen Flaeche (#5F6858) kommt
     Creme bei .86 nur auf 4,46:1 und bei .6 auf 3,07:1 - noetig sind 4,5:1 fuer Text unter
     18px. Deshalb .92 (4,85:1) und .88 (4,60:1). Wer die Werte senkt, macht den Block fuer
     Menschen mit schwacher Sehkraft unlesbar. Die Punkte duerfen bei Salbei bleiben: als
     reine Dekoration gilt fuer sie 3:1, und sie kommen auf 4,01:1. */
  .qual-block li{position:relative;padding-left:17px;font-size:14px;line-height:1.55;
    margin:0 0 7px;opacity:.92;max-width:46ch}
  .qual-block li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
    border-radius:50%;background:var(--fl-salbei)}
  /* Kursive Serifenschrift unterscheidet diese Zeile von der Liste darunter (die ist Poppins),
     nicht die Helligkeit - abdunkeln geht hier wegen des Kontrasts nicht. Bis 15.08.2026
     standen hier Versalien mit Sperrung; das war der siebte Schriftstil im Abschnitt.
     Die Deckkraft .88 bleibt: sie ist auf 4,60:1 gerechnet und die Zeile ist weiterhin
     unter 24 px, es gilt also unveraendert die Grenze 4,5:1. */
  /* margin-top ist 0, seit die beiden Bloecke nebeneinander stehen: sonst haengt diese
     Beschriftung 20 px tiefer als "Qualifikationen" daneben. Beim Stapeln auf schmalen
     Bildschirmen kommt der Abstand weiter unten zurueck. */
  .qual-block .qual-laufend{font:italic 400 clamp(16px,1.5vw,19px)/1.45 var(--serif);
    letter-spacing:0;text-transform:none;color:var(--tx-hell);opacity:.88;margin:0 0 12px}
  /* 15.08.2026, in zwei Schritten auf Jules Wunsch:
     Schritt 1 - der Leitsatz stand in Cormorant bei 22-30 px und war damit das groesste
     Serifen-Feld des Abschnitts. Umgestellt auf Poppins, zunaechst noch groesser (21 px).
     Schritt 2 - Jule wollte auch die GROESSE gleich. Der Satz ist jetzt in nichts mehr
     von den Absaetzen darunter unterschieden; er hat keine eigene Regel mehr noetig
     ausser der Zeilenbreite. Der Abschnitt beginnt damit direkt mit Fliesstext.
     ABSICHT, nicht vergessen: Dieser erste Absatz ist inhaltlich Jules Leitsatz und stammt
     woertlich von ihr. Wer ihn spaeter wieder hervorheben will, macht das ueber die
     Schriftgroesse - NICHT ueber eine andere Schrift, das war ausdruecklich der Punkt.
     Zeilenbreite: Der Satz soll genauso breit laufen wie die Absaetze darunter. Bis
     16.08.2026 stand hier 52ch - damals war das die Breite der ganzen Spalte, also
     tatsaechlich gleich. Seit die Spalte breiter ist, waere 52ch schmaler als der Rest
     und saehe nach Versehen aus; die Begrenzung liegt jetzt auf .split-text (68ch) und
     gilt damit fuer alle Absaetze gleich. Der Abstand von 32 px darunter bleibt.

     Schritt 3: Der Abschnitt hatte danach keinen Einstieg mehr - auf die grosse
     Schreibschrift folgten vier gleich aussehende Absaetze in einer 1329 px hohen Spalte.
     Statt Groesse oder Schrift macht das jetzt der ABSTAND: 32 px nach dem ersten Absatz
     gegen 16 px zwischen den uebrigen. Er liest sich dadurch als Einstieg, ohne anders
     auszusehen - man nimmt es kaum bewusst wahr, es wirkt trotzdem.
     Wer den Wert senkt, nimmt die Wirkung zurueck; unter etwa 26 px ist sie weg.
     ACHTUNG beim Umbauen: Der Selektor muss ".split-text .ueber-leitsatz" heissen, nicht
     nur ".ueber-leitsatz". Weiter oben steht ".split-text p{margin:0 0 16px}", und das ist
     der staerkere Selektor (Klasse + Element schlaegt Klasse allein) -- mit der kurzen
     Schreibweise wurde der Abstand still ueberschrieben und blieb bei 16 px. */
  .split-text .ueber-leitsatz{margin-bottom:32px}
  /* Bild rechts statt links */
  .split--gedreht{grid-template-columns:minmax(0,6%) minmax(0,38%) 6% 50%}
  .split--gedreht .split-bild{grid-column:4}
  .split--gedreht .split-text{grid-column:2}

  /* ---------- Benefits-Karussell ---------- */
  .ablauf-kopf{margin-bottom:32px}
  .slider-row{display:flex;align-items:center;gap:clamp(6px,2vw,20px)}
  /* Pfeile bewusst in Oliv, NICHT in der Signalfarbe: sie sind Navigation, kein Ziel.
     In Terrakotta zogen die zwei vollen Kreise mehr Blick als der Text dazwischen (15.08.2026).
     Cremetext auf Oliv 5,4:1. */
  .ablauf-btn{flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-rund);border:0;
    background:var(--fl-oliv);color:var(--fl-creme);display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1}
  .ablauf-btn:hover{background:var(--fl-gruen)}
  .ablauf-btn:disabled{opacity:.3;cursor:default}
  .slider{flex:1 1 auto;overflow:hidden}
  .slider-track{display:flex;will-change:transform}
  /* freistehend: kein Rahmen, kein Hintergrund, kein Schatten */
  .vorteil{flex:0 0 auto;box-sizing:border-box;text-align:center;padding:8px clamp(12px,2vw,26px)}
  .vorteil-icon{width:46px;height:46px;margin:0 auto 18px;color:var(--ak-marker)}
  .vorteil-icon svg{width:100%;height:100%;display:block}
  .vorteil h3{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.125em;
    font-size:13px;line-height:1.5;color:var(--tx-stark);margin:0 0 10px}
  .vorteil p{margin:0 auto;color:var(--tx-normal);max-width:34ch;font-size:15px;line-height:1.6}

  /* ---------- Beratungsablauf (Zahlen · Schreibschrift · Striche) ---------- */
  .prozess{list-style:none;margin:0;padding:0}
  .prozess-schritt{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;
    padding:clamp(24px,3.4vw,40px) 0;border-top:1px solid var(--linie)}
  .prozess-schritt:first-child{border-top:0;padding-top:4px}
  .prozess-nr{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.4vw,88px);line-height:1;
    color:var(--ak-marker);font-variant-numeric:tabular-nums lining-nums}
  .prozess-titel{font-family:'DancingScript',cursive;font-weight:700;color:var(--ak-kupfer);
    font-size:clamp(27px,3.2vw,42px);line-height:1.05;margin:0 0 8px}
  .prozess-text{margin:0;color:var(--tx-normal);max-width:66ch}

  /* ---------- Kontakt und Fuß ---------- */
  /* ---------- Kontakt mit Formular ---------- */
  .kontakt{background:var(--fl-gruen);color:var(--tx-hell)}
  .kontakt .eyebrow{color:var(--ak-marker-hell)}
  .kontakt-raster{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,76px);align-items:start}
  .kontakt-lead{color:var(--tx-hell);max-width:44ch;margin:0 0 20px}
  .kontakt-termine{color:var(--tx-hell-2);font-size:15px;line-height:1.6;max-width:44ch;margin:0 0 28px}
  .direkt{margin:0;padding-top:22px;border-top:1px solid var(--linie-hell)}
  .direkt dt{font:500 12px/1.4 var(--sans);letter-spacing:.125em;text-transform:uppercase;
    color:var(--ak-marker-hell);margin:0 0 10px}
  .direkt dd{margin:0 0 6px;font-size:16px}
  .direkt a{color:var(--tx-hell);text-decoration:none;border-bottom:1px solid var(--linie-hell);padding-bottom:2px}
  .direkt a:hover{border-bottom-color:var(--tx-hell)}

  .formular{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px)}
  .feld{display:flex;flex-direction:column;gap:7px;min-width:0}
  .feld--breit{grid-column:1 / -1}
  .formular label{font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-hell)}
  .formular label .wahl{text-transform:none;letter-spacing:0;color:var(--tx-hell-2);font-weight:400}
  /* Helle Felder auf dunkler Flaeche: Text darin traegt 10,9:1 */
  .formular input,.formular select,.formular textarea{
    font:400 16px/1.5 var(--sans);color:var(--tx-stark);background:var(--fl-creme);
    border:1px solid transparent;border-radius:var(--r-knopf);padding:12px 14px;width:100%;min-width:0}
  .formular textarea{resize:vertical;min-height:130px}
  .formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{
    outline:3px solid var(--ak-kupfer-hell);outline-offset:2px}
  .hinweis{color:var(--tx-hell-2);font-size:13.5px;line-height:1.55;margin:2px 0 0}
  .zustimmung{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
  .zustimmung input{width:20px;height:20px;margin-top:2px;accent-color:var(--fl-salbei)}
  .zustimmung label{text-transform:none;letter-spacing:0;font-weight:400;font-size:14.5px;
    line-height:1.55;color:var(--tx-hell-2)}
  .zustimmung a{color:var(--tx-hell)}
  /* Spamfalle: steht ausserhalb des Bildschirms, damit Bots sie ausfuellen. user-select
     verhindert, dass ihr Text beim Markieren der Seite mitkopiert wird -- Bots stoert das
     nicht, sie lesen den Quelltext. */
  .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
    -webkit-user-select:none;user-select:none}
  .pflicht{color:var(--tx-hell-2);font-size:13px;margin:12px 0 0}
  .kontakt .knopf{background:var(--fl-salbei);color:var(--fl-gruen);border:0;cursor:pointer;width:100%}
  .kontakt .knopf:hover{background:#C6CFB2}
  .gesendet{grid-column:1 / -1;background:var(--fl-salbei);color:var(--fl-gruen);
    padding:18px 20px;border-radius:var(--r-knopf);font-weight:500;margin:0}

  @media (max-width:860px){
    .kontakt-raster{grid-template-columns:1fr}
    .formular{grid-template-columns:1fr}
  }
  .fuss{background:var(--fl-gruen);padding:34px var(--rand);font-size:13px;line-height:1.7;
    color:var(--tx-hell-2);text-align:center;border-top:1px solid var(--linie-hell)}

  /* ---------- Umbrüche ---------- */
  @media (max-width:900px){
    .kacheln{grid-template-columns:1fr;row-gap:16px}
    .sp-liste{grid-template-columns:1fr}
  }
  /* 16.08.2026 von 46 % auf 40 % Bildbreite: Sonst schrumpfte die Textspalte auf kleineren
     Notebooks (821-1180 px) wieder auf gut 480 px zurueck - genau der Zustand, wegen dem
     der Abschnitt zu hoch war. Das Bild bleibt breit genug, um als Flaeche zu wirken. */
  @media (max-width:1180px){
    .split{grid-template-columns:40% 5% minmax(0,1fr) 5%}
    .split--gedreht{grid-template-columns:5% minmax(0,1fr) 5% 40%}
  }
  /* Auf schmalen Bildschirmen passen Text und Foto nicht zusammen in einen Bildschirm.
     Die feste Mindesthoehe entfaellt deshalb: Ueberschrift, Satz und Knopf stehen oben,
     das Foto folgt darunter. Dass das Frucht-Band dadurch schon knapp unter der Falz
     zu ahnen ist, ist bewusst in Kauf genommen -- die Aussage geht vor.
     Die Menuepunkte werden hier NICHT mehr ausgeblendet; sie stecken jetzt im
     aufklappbaren Menue, siehe Block "Handy-Ansicht" ganz unten. */
  @media (max-width:820px){
    /* min-height:0 hebt beide Fassungen von oben auf (100vh und 100svh) --
       diese Regel steht spaeter in der Datei und gewinnt deshalb. */
    .hero{grid-template-columns:1fr;min-height:0;padding-top:clamp(28px,5vw,48px)}
    /* Das Foto laeuft ueber die volle Spaltenbreite und schliesst links wie rechts
       buendig mit dem Text ab. Eine zwischenzeitlich schmalere, linksbuendige Fassung
       (78 %) wurde am 08.08.2026 wieder verworfen: Jules Einwand "zu gross" galt der
       NACHBARSCHAFT zum Frucht-Band, nicht der Groesse -- und die ist mit der neuen
       Reihenfolge geloest. Volle Breite laesst ausserdem die Frage "mittig oder links"
       entfallen, weil kein freier Rand uebrig bleibt. */
    /* Foto VOR den Text. Grund ist nicht Optik, sondern Abstand: Beim Stapeln stossen
       sonst Jules Portrait und das Frucht-Band mit nur 40 px Luft aufeinander und
       landen zusammen auf einem Bildschirm -- zwei Fotos direkt hintereinander.
       Am Rechner passiert das nie, weil der Hero dort den ganzen Bildschirm fuellt.
       Oben stehend liegt der ganze Textblock dazwischen (508 px). Die Aussage rutscht
       trotzdem nicht weg: Die Ueberschrift beginnt bei 333 px, der Knopf endet bei
       740 px -- der Hero passt weiter komplett auf einen 812-px-Bildschirm. */
    .hero-bild{order:-1}
  }
  /* Die Regel fehlte bisher ganz (sie stand nur im alten Prototyp hero-varianten.html):
     "— ohne Verbote" soll zusammenbleiben. Auf sehr schmalen Handys darf es aber
     umbrechen, sonst laeuft die Zeile ueber den Rand hinaus.
     Bewusst NUR bis 820 px: Die Rechner-Ansicht bleibt unangetastet. */
  @media (min-width:560px) and (max-width:820px){
    .hero h1 .nobr{white-space:nowrap}
  }
  /* Block stapeln: Bild oben ueber die volle Breite, Text darunter auf der Farbflaeche */
  @media (max-width:760px){
    .split,.split--gedreht{grid-template-columns:1fr;min-height:0}
    .split-bild,.split--gedreht .split-bild{grid-column:1}
    /* 4:5 statt 4:3 - sonst schneidet der Querformat-Ausschnitt die Schale weg */
    .split-bild img{height:auto;aspect-ratio:4/5}
    /* max-width:none hebt die 68ch-Bremse von oben auf: Gestapelt laeuft der Text ueber die
       volle Breite und muss buendig mit dem Foto darueber abschliessen. Bei 741 px Deckel
       bliebe auf einem 760-px-Bildschirm sonst ein schiefer Rest von 19 px rechts. */
    .split-text,.split--gedreht .split-text{grid-column:1;max-width:none;padding:clamp(30px,7vw,46px) var(--rand) clamp(38px,8vw,58px)}
  }
  /* Die zwei Qualifikations-Spalten stehen nur nebeneinander, wenn die Textspalte breit
     genug ist. Sonst braechen die langen Bezeichnungen ("Registrierte Kursleiterin bei der
     Zentralen Pruefstelle Praevention") zu Wortsalat um. Zwei Faelle fallen darunter:
     - 761 bis 950 px: Bild und Text stehen noch nebeneinander, die Textspalte ist dadurch
       nur rund 380 bis 450 px breit - je Spalte blieben unter 210 px.
     - bis 560 px (Handy): der Block ist gestapelt, die Spalte also voll breit, aber der
       Bildschirm selbst ist zu schmal. Hoehe spart man hier ohnehin nicht.
     Dazwischen (561-760 px, gestapelt) und ab 951 px passen zwei Spalten problemlos. */
  @media (min-width:761px) and (max-width:950px), (max-width:560px){
    .qual-block{display:block}
    .qual-block .qual-laufend{margin:20px 0 9px}
  }
  @media (max-width:520px){
    .prozess-schritt{gap:16px}
    .prozess-nr{font-size:40px}
  }
  @media (max-width:360px){
    .knopf--flach{letter-spacing:.06em;font-size:12px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero h1 em{animation:none;opacity:1}
  }

  /* ---------- Unterseiten ---------- */
  .seiten-kopf{padding:clamp(48px,6vw,88px) var(--rand) clamp(30px,4vw,48px);background:var(--fl-creme)}
  .seiten-kopf__inner{max-width:1080px;margin:auto}
  .seiten-kopf h1{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
    font-size:clamp(38px,4.6vw,66px);line-height:1.16;margin:10px 0 20px;color:var(--tx-stark);max-width:16ch}
  .seiten-kopf .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:56ch;margin:0;color:var(--tx-normal)}
  .zurueck{display:inline-block;margin-bottom:6px;font:500 12px/1.4 var(--sans);letter-spacing:.125em;
    text-transform:uppercase;color:var(--ak-marker);text-decoration:none}
  .zurueck:hover{text-decoration:underline}
  .inhalt h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);color:var(--tx-stark);margin:0 0 18px}
  .inhalt h2 + p{margin-top:0}
  .inhalt p{color:var(--tx-normal);max-width:66ch;margin:0 0 18px}
  .inhalt .block{margin:0 0 clamp(38px,5vw,62px)}
  .inhalt .block:last-child{margin-bottom:0}
  .inhalt ul{list-style:none;margin:0 0 18px;padding:0;max-width:66ch}
  .inhalt ul li{display:flex;gap:14px;margin:0 0 12px;color:var(--tx-normal)}
  .inhalt ul li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.62em;background:var(--ak-marker)}
  /* 15.08.2026: Das <span> ist Flex-Kind und schrumpft ohne min-width:0 nicht unter sein
     laengstes Wort. Auf einem 320-px-Handy schob "Nahrungsmittelunvertraeglichkeiten" die
     ganze Seite 4 px zur Seite. Gleiche Loesung wie in .sp-liste (Zeile 261).
     hyphens:auto trennt dabei mit Bindestrich an einer erlaubten Stelle statt mitten im Wort;
     das braucht lang="de" im html-Tag, das steht auf allen Seiten. */
  .inhalt ul li > span{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  /* 16:9 statt 16:7 - die Angebotsbilder tragen ihre Aussage ueber das ganze Bild,
     ein zu schmales Band schneidet Plan und Flipchart weg. */
    /* Banner der Unterseiten: Der Rahmen ist 16:9 und schneidet ab, das Bild darin
     ist 4:3 und damit hoeher. Dieser Ueberstand ist der Weg fuer die Scroll-Bewegung
     (assets/bewegtes-bild.js). Ohne Skript steht das Bild einfach mittig. */
  /* Dasselbe Element wie das Frucht-Band der Startseite: ein schmaler Streifen,
     durch den beim Scrollen ein viel hoeheres Bild wandert. Kein grosses Foto,
     sondern Farbe und Struktur - damit fuehrt auf den Unterseiten der Text. */
  /* Hoeher als das Frucht-Band der Startseite: Dort ist es ein reiner Trenner zwischen
     zwei Abschnitten, hier traegt es die Seite mit an und darf mehr Raum bekommen. */
  /* --band-hoehe und --schleier lassen sich je Seite am <section> ueberschreiben.
     Ein schmaleres Band mit dichterem Schleier laesst das Bild als Atmosphaere lesen
     statt als Motiv, das man abliest -- gebraucht bei Bildern, die einer Pruefung
     aus der Naehe nicht standhalten. */
  .bild-rahmen{position:relative;overflow:hidden;line-height:0;
    height:var(--band-hoehe,clamp(220px,24vw,330px));
    border-radius:var(--r-block);background:var(--fl-sand)}
  /* --zoom vergroessert das Bild im Rahmen (1 = unveraendert). Groesser heisst mehr
     Ueberstand nach oben und unten, also mehr Weg zum Fahren und damit eine schnellere
     Bewegung. Die Seiten werden dabei beschnitten, deshalb nur bei mittigen Motiven.
     --versatz schiebt den Ausschnitt waagerecht: positiv zeigt mehr von der LINKEN
     Bildhaelfte, negativ mehr von der rechten. Groesster sinnvoller Wert ist der halbe
     Ueberstand, also (zoom - 1) / 2 * 100 % -- darueber laeuft ein leerer Rand ins Bild.
     Beides wird im HTML am Bild gesetzt: style="--zoom:1.4;--versatz:16%". */
  .bild-rahmen img{--zoom:1;--versatz:0%;position:absolute;top:50%;height:auto;
    width:calc(100% * var(--zoom));max-width:none;
    left:calc((100% - 100% * var(--zoom)) / 2 + var(--versatz));
    transform:translate3d(0,-50%,0);will-change:transform;filter:saturate(.92)}
  /* Cremeschleier wie beim Band: bindet die Nahaufnahme an die Grundflaeche. */
  .bild-rahmen::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--fl-creme);opacity:var(--schleier,.12)}
  @media (prefers-reduced-motion:reduce){.bild-rahmen img{transform:translate3d(0,-50%,0) !important}}
  /* Abschluss der Unterseiten: Jules Foto liegt als Textur unter einer dunkelgruenen
     Flaeche. Damit wirkt das Bild als Atmosphaere statt als Motiv, und der Abschnitt,
     in dem um Kontakt gebeten wird, bekommt Gewicht. Deckkraft 0.86 ist gerechnet, nicht
     geschaetzt: gegen den hellsten Bildpunkt bleiben Fliesstext bei 7,5:1 und die grosse
     Ueberschrift bei 3,6:1. Das Bild je Seite kommt ueber --abschluss-bild aus dem HTML.
     Farben fuer dunkle Flaechen sind dieselben wie im Kontakt-Abschnitt der Startseite. */
  .abschluss{position:relative;overflow:hidden;text-align:center;background:var(--fl-gruen)}
  .abschluss::before{content:"";position:absolute;inset:0;z-index:0;
    background-image:var(--abschluss-bild);background-size:cover;background-position:center}
  .abschluss::after{content:"";position:absolute;inset:0;z-index:1;
    background:var(--fl-gruen);opacity:.86}
  .abschluss > *{position:relative;z-index:2}
  /* Bewusst Salbei statt Markergruen-hell wie im Kontakt-Abschnitt der Startseite:
     ueber dem Foto erreicht Markergruen-hell nur 4,09:1, noetig sind 4,5. Salbei kommt auf 5,8:1. */
  .abschluss .eyebrow{color:var(--fl-salbei)}
  .abschluss h2{font-family:'DancingScript',cursive;font-weight:700;font-size:clamp(34px,4.2vw,58px);
    line-height:1.12;color:var(--ak-kupfer-hell);margin:0 0 14px}
  .abschluss p{max-width:52ch;margin:0 auto 24px;color:var(--tx-hell)}
  .abschluss .knopf{background:var(--fl-salbei);color:var(--fl-gruen)}
  .abschluss .knopf:hover{background:#C6CFB2}

  /* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
  .rechtstext{max-width:70ch}
  .rechtstext h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);
    color:var(--tx-stark);margin:clamp(34px,4vw,52px) 0 14px}
  .rechtstext h2:first-child{margin-top:0}
  .rechtstext h3{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.02em;
    text-transform:none;color:var(--tx-stark);margin:26px 0 8px}
  .rechtstext p,.rechtstext li{color:var(--tx-normal);margin:0 0 14px}
  .rechtstext ul{margin:0 0 14px;padding-left:22px}
  .rechtstext li{margin:0 0 8px}
  .rechtstext a{color:var(--ak-marker)}
  .rechtstext .anschrift{background:var(--fl-sand);padding:18px 22px;margin:0 0 18px;line-height:1.65}
  /* Deutlich sichtbare Luecke: muss vor dem Livegang gefuellt werden */
  .luecke{display:block;background:#F6E3D4;border-left:4px solid #A85238;padding:14px 18px;margin:0 0 16px;
    color:#6E3323;font-size:15px;line-height:1.6}
  .luecke strong{color:#5A2A1C}
  .stand{color:var(--tx-leise);font-size:14px;margin-top:clamp(34px,4vw,52px);
    padding-top:18px;border-top:1px solid var(--linie)}

  /* ============================================================
     Handy-Ansicht
     Alles, was nur auf schmalen Bildschirmen gilt, steht gebuendelt hier.
     Grundsatz: Es wird nichts weggelassen, nur anders angeordnet.
     ============================================================ */

  /* ---------- Lange Adressen duerfen umbrechen ----------
     kontakt@ernaehrungsberatung-droessler.de ist 44 Zeichen lang und damit breiter
     als ein 375-px-Handy. Ohne diese Regel liess sich die ganze Seite seitlich
     schieben -- betroffen waren der Kontakt-Abschnitt, das Impressum und die
     Datenschutzerklaerung (dort zusaetzlich die All-Inkl-Adresse). Bewusst nicht
     ueber overflow-x:hidden geloest: Das haette den Ueberlauf nur versteckt. */
  .direkt a,.rechtstext a,.inhalt a{overflow-wrap:anywhere}
  .rechtstext p,.rechtstext li,.rechtstext .anschrift{overflow-wrap:break-word}
  /* "Ernaehrungstherapie" ist bei 320 px sonst breiter als die Spalte.
     Nur auf schmalen Bildschirmen -- am Rechner passt die Ueberschrift und soll
     auch nicht getrennt werden koennen. */
  @media (max-width:820px){
    .seiten-kopf h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  }

  /* ---------- Aufklappbares Menue (Burger) ----------
     Der Knopf existiert in jeder Seite, ist aber nur auf schmalen Bildschirmen
     sichtbar. Geschaltet wird ueber data-menue an der <nav> (assets/menue.js). */
  .nav-burger{display:none;flex:0 0 auto;width:48px;height:48px;padding:0;border:0;
    background:none;color:var(--tx-stark);cursor:pointer;place-items:center}
  .nav-burger svg{width:26px;height:26px;display:block;margin:auto}

  @media (max-width:820px){
    .nav-burger{display:grid}
    /* Die Flaeche liegt UNTER der Leiste statt in ihr. Dadurch waechst die Leiste
       beim Oeffnen nicht -- die gemessene Navigationshoehe (--nav-h) bleibt richtig. */
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:1;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--fl-creme);border-bottom:1px solid var(--linie);
      padding:6px var(--rand) 18px;font-size:16px}
    .nav[data-menue="offen"] .nav-links{display:flex}
    .nav-links a:not(.knopf){display:flex;align-items:center;min-height:48px;
      border-top:1px solid var(--linie)}
    .nav-links a:not(.knopf):first-child{border-top:0}
    .nav-links .knopf{width:100%;margin-top:14px}
    /* Im aufgeklappten Menue ist Platz fuer die lange Beschriftung */
    .nav .knopf .nur-breit{display:inline}
    .nav .knopf .nur-schmal{display:none}
  }

  /* ---------- Karussell: wischen statt klicken ----------
     Am Rechner bleiben die runden Pfeile. Auf dem Handy frassen sie zusammen mit
     ihren Abstaenden mehr als die halbe Breite -- fuer die Karte blieben rund 200 px.
     Deshalb dort: Karte ueber die volle Breite, wischen mit dem Finger, darunter
     sechs Punkte zur Orientierung. Dieselbe Grenze wie im Skript (720 px). */
  .slider-punkte{display:none;justify-content:center;gap:4px;margin-top:20px}
  .slider-punkte button{width:28px;height:28px;padding:0;border:0;background:none;
    cursor:pointer;display:grid;place-items:center}
  .slider-punkte button::before{content:"";width:9px;height:9px;border-radius:var(--r-rund);
    background:rgba(47,99,73,.25);transition:background .25s ease}
  .slider-punkte button[aria-current="true"]::before{background:var(--ak-marker)}

  @media (max-width:720px){
    .ablauf-btn{display:none}
    .slider{overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .slider::-webkit-scrollbar{display:none}
    /* Das Skript raeumt seine Werte selbst auf; !important sichert den Fall ab,
       dass die Groesse noch vom Rechner-Betrieb gesetzt war. */
    .slider-track{transform:none !important}
    .vorteil{flex:0 0 100% !important;width:100% !important;scroll-snap-align:center}
    .slider-punkte{display:flex}
  }

  /* ---------- Bildbaender: Streifen schmaler, damit sie ueberhaupt laufen ----------
     Jules Befund vom 15.08.2026: Die Baender auf den Angebotsseiten liefen auf dem
     Handy nicht mit. Nachgemessen, und sie hatte recht -- der Fahrweg betrug 37 px
     (Beratung, Vortraege) und 18 px (Therapie) ueber den GANZEN Scrollweg.

     Ursache: Ein Bild kann nur so weit wandern, wie es hoeher ist als sein Streifen.
     Die Hoehe stand auf clamp(220px,24vw,330px). Auf einem 375-px-Handy ergibt 24vw
     nur 90 px, also greift die Untergrenze 220 -- der Streifen bleibt fast so hoch
     wie am Rechner (307 px), waehrend das Bild mitschrumpft (960 -> 281 px). Vom
     Ueberstand blieben 61 px statt 653, und davon werden ueber data-weg nur 60 %
     gefahren. Es war also kein Fehler im Skript, sondern eine Frage der Geometrie.

     150 px geben 131 px Ueberstand und damit 79 px Fahrweg -- gut sichtbar. Bewusst
     OHNE --zoom geloest: Zoom haette mehr Weg gebracht, schneidet aber die Seiten an,
     und auf der Beratungsseite waere ausgerechnet Jules eigene Schale angeschnitten
     worden. Endpunkte geprueft, an keinem laeuft der leere Holztisch ins Band.
     Am Rechner aendert sich nichts, die Regel greift erst unter 620 px.

     Warum wieder ein clamp und keine feste Zahl: Bei 150 px fest waere der Streifen
     an der Grenze von 620 px sehr flach (ein breites Letterbox-Band), und bei 621 px
     spraenge er auf einen Schlag auf 220. Mit clamp(150px,34vw,210px) bekommt das
     Handy 150 und die Tablet-Breite bis 210 -- der Uebergang zur Rechner-Regel ist
     damit fast stufenlos. Gemessene Fahrwege: 375 px -> 79, 414 px -> 96,
     620 px -> 153 (Beratung und Vortraege; Therapie liegt wegen 3:2 etwas darunter).

     Eigene Variable statt fester Zahl, damit eine einzelne Seite weiterhin
     abweichen kann: style="--band-hoehe-handy:180px" am <section class="bild-rahmen">.
     Wer sie aendert, muss die Endpunkte neu ansehen. */
  @media (max-width:620px){
    .bild-rahmen{height:var(--band-hoehe-handy,clamp(150px,34vw,210px))}
  }

  /* ---------- Tippflaechen und Luft ---------- */
  @media (max-width:620px){
    /* Telefonnummer und Mailadresse im Kontakt-Abschnitt */
    .direkt dd{margin-bottom:2px}
    .direkt a{display:inline-block;padding:8px 0}
    /* Beratungsablauf: Der Text braucht auf dem Handy viele Zeilen. Mittig ausgerichtet
       schwebte die Zahl irgendwo in der Mitte des Absatzes -- oben ausgerichtet steht
       sie neben der Ueberschrift, zu der sie gehoert. */
    .prozess-schritt{align-items:start}
    /* Platz fuer die Gestenleiste der Handys */
    .fuss{padding-bottom:44px}
  }