/* Tanja Adami – Entwurf Heisse Spinne */

:root {
    --petrol: #355f66;
    --petrol-tief: #2b4a50;
    --petrol-hell: #5e8a90;
    --salbei: #8fa58a;
    --gold: #c8a86b;
    --gold-hell: #d9c092;
    /* dunklere Goldtöne für Text auf hellen Flächen, das helle Gold schafft dort keinen Kontrast */
    --gold-warm: #aa854b;
    --gold-text: #8a6c38;
    /* Metallglanz der goldenen Handschriftzeilen, zwei Varianten:
       auf Fotos vorne hell wie vom Licht getroffen, auf Creme durchgehend
       dunkler, sonst ginge der helle Auftakt im Grund unter.
       Der erste Ton ist ein fester Hex-Wert statt color-mix: eine ungültige
       Verlaufsangabe ließe die durchsichtig gestellte Schrift verschwinden. */
    --verlauf-foto: linear-gradient(105deg, #eadfc4 0%, var(--gold-hell) 22%, var(--gold) 62%, var(--gold-warm) 100%);
    --verlauf-hell: linear-gradient(105deg, var(--gold) 0%, var(--gold-warm) 50%, var(--gold-text) 100%);    --creme: #f7f4ee;
    --tinte: #2f3437;

    --serif: 'Cormorant Garamond', Georgia, serif;
    --hand: 'Ms Madi', cursive;
    --sans: 'Jost', 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--tinte);
    background: var(--creme);
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    color: var(--petrol);
    margin: 0 0 .5em;
}

a { color: var(--petrol); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.huelle {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.huelle.schmal { max-width: 920px; }

.mittig { text-align: center; }

.visuell-versteckt {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.springen {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 99;
    background: var(--petrol);
    color: var(--creme);
    padding: .6em 1.2em;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    transition: top .25s;
}
.springen:focus { top: 0; }

/* ---------- Kopfleiste ---------- */

.kopfleiste {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: .9rem clamp(1.25rem, 4vw, 3rem);
    color: var(--creme);
    /* In allen Ansichten dauerhaft auf Petrol: Name und Navigation stehen so
       immer auf ruhigem Grund, unabhängig vom Foto darunter. Beim Scrollen
       kommt nur noch der Schlagschatten hinzu (.fest). */
    background: rgba(43, 74, 80, .96);
    transition: box-shadow .35s ease;
}

.kopfleiste.fest {
    box-shadow: 0 8px 30px rgba(30, 45, 48, .25);
}

.marke {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: inherit;
}

.marke .zeichen { filter: drop-shadow(0 1px 4px rgba(20, 35, 38, .4)); }

.marke-text { display: flex; flex-direction: column; }

.marke-name {
    font-family: var(--hand);
    font-size: 1.9rem;
    line-height: 1;
    white-space: nowrap;
}

.marke-claim {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .85;
    margin-top: .3rem;
}

.nav { display: flex; gap: clamp(1.2rem, 2.5vw, 2.4rem); }

.nav a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .05em;
    padding: .65em .15em;
    border-bottom: 1px solid transparent;
    transition: border-color .25s, color .25s;
}

/* Menüpunkte in weichem Creme auf der Petrol-Leiste, auf dem Desktop wie im
   mobilen Menü. Die aktive Seite bleibt Creme und ist an der goldenen Linie zu
   erkennen, beim Hovern werden Schrift und Linie gold. Die Hover-Regel steht
   bewusst nach der Regel für die aktive Seite (gleiche Spezifität), damit sie
   auch dort greift. */
.nav a[aria-current="page"] { color: var(--creme); border-color: var(--gold-hell); }
.nav a:hover { color: var(--gold-hell); border-color: var(--gold-hell); }

.burger {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.burger-strich,
.burger-strich::before,
.burger-strich::after {
    content: '';
    position: absolute;
    left: 8px;
    width: 28px; height: 2px;
    background: currentColor;
    transition: transform .3s, opacity .3s;
}
.burger-strich { top: 21px; }
.burger-strich::before { content: ''; left: 0; top: -9px; }
.burger-strich::after { content: ''; left: 0; top: 9px; }

/* ---------- Hero ---------- */

.buehne {
    position: relative;
    /* Schriftgröße der Überschrift als Bezugsgröße: die Handzeile darunter
       leitet ihre Größe daraus ab, damit beide Zeilen gleich breit laufen */
    --buehne-h1: clamp(1.8rem, 8.6vw, 4.4rem);
    /* voller Viewport plus Wellenzone, die Welle taucht erst beim Scrollen auf */
    min-height: calc(100vh + clamp(60px, 9vw, 130px));
    min-height: calc(100svh + clamp(60px, 9vw, 130px));
    display: flex;
    align-items: center;
    background: url('../img/see-sonnenuntergang.jpg') center / cover no-repeat, var(--petrol-tief);
}

/* sehr leichtes Overlay (10 %), das Bild bleibt nahezu in voller Stärke */
.buehne::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(24, 43, 47, .10);
}

.buehne-inhalt {
    position: relative;
    z-index: 1;
    max-width: 620px;
    /* unten mehr Luft als oben: der Block rückt aus der Mitte nach oben in den
       ruhigen Himmel, statt auf der Horizontlinie zu liegen */
    padding: 6rem clamp(1.25rem, 4vw, 2.5rem) 14rem;
    margin-left: clamp(0px, 7vw, 130px);
    color: var(--creme);
}

.buehne h1 {
    color: var(--creme);
    /* skaliert mit dem Viewport, damit die Zeile nie umbricht */
    font-size: var(--buehne-h1);
    white-space: nowrap;
    margin-bottom: .1em;
    text-shadow: 0 1px 4px rgba(20, 35, 38, .45), 0 3px 26px rgba(20, 35, 38, .6);
}

.handzeile {
    font-family: var(--hand);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.25;
    color: var(--gold-hell);
    margin: 0 0 .9em;
}

/* Goldene Handschriftzeilen, auf allen Seiten gleich behandelt: Startseiten-
   Hero, Kopfbänder der Unterseiten, Zitatband und die Goldzeilen auf Creme
   (.handzeile-gold). Warmes Gold als Grundfarbe, darüber im @supports-Block
   weiter unten ein Metallglanz-Verlauf. Die hauchdünne Kontur verdickt die
   feinen Schreibschrift-Striche, der Verlauf bleibt innen sichtbar.
   Kein Textschatten: er würde über dem beschnittenen Verlauf gezeichnet und
   die Schrift verschmutzen.
   Der Kasten ist nur so breit wie der Text, denn der Verlauf bezieht sich auf
   den Kasten. Bei voller Spaltenbreite liefe er ins Leere und das Zeilenende
   säße in der hellen Zone. */
.buehne .handzeile,
.kopfband .handzeile,
.zitat .handzeile,
.handzeile-gold {
    color: var(--gold-warm);
    -webkit-text-stroke: .35px var(--gold-warm);
    text-shadow: none;
    width: fit-content;
}

/* zentrierte Zeile im Zitatband: der schmale Kasten muss selbst in die Mitte.
   Die Kopfbänder sind linksbündig und brauchen das nicht. */
.zitat .handzeile { margin-inline: auto; }

/* Startseite: die Handzeile ist die zweite Hauptzeile des Heros und läuft genau
   so breit wie die Überschrift darüber.
   Der Faktor .97 ist gemessen, nicht geschätzt: Ms Madi läuft pro Pixel
   Schriftgröße schmaler als Cormorant, das Herz mit .65em gleicht den Rest aus.
   nowrap wie bei der Überschrift, sonst bräche „Weg.“ samt Herz in die zweite
   Zeile, sobald die Zeile die Textspalte um wenige Pixel überragt. */
.buehne .handzeile {
    font-size: calc(var(--buehne-h1) * .97);
    line-height: 1.15;
    white-space: nowrap;
    margin: 0 0 .5em;
}

/* Metallglanz: der Verlauf liegt als Hintergrund auf dem Absatz und wird auf
   die Schrift beschnitten, die eigentliche Textfarbe ist durchsichtig.
   Auf Fotos und auf dem Petrol-Kasten der Kopfbänder der helle Verlauf
   (--verlauf-foto), auf Creme der dunkle (--verlauf-hell), sonst ginge der
   cremehelle Auftakt im Grund unter.
   Ohne Unterstützung für das Beschneiden bleibt die Schrift einfarbig in
   warmem Gold (Grundregel oben), statt dass ein Verlauf als Kasten hinter
   dem Text stünde. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .buehne .handzeile,
    .kopfband .handzeile,
    .zitat .handzeile,
    .handzeile-gold {
        background-image: var(--verlauf-foto);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .handzeile-gold { background-image: var(--verlauf-hell); }
}

/* Herzen als SVG direkt im HTML: sie wachsen mit der Schrift und tragen
   einfarbig den Endton ihres Verlaufs. Kein Verlauf, kein Schatten. */
.handzeile svg.herz { width: .65em; height: auto; }
.buehne .handzeile .herz { stroke: var(--gold-warm); }
.um-zitat .herz { stroke: var(--gold-text); }

/* inline-block gegen den globalen img-Block-Reset, sonst rutscht das Herz unter den Text */
.handzeile .herz { display: inline-block; vertical-align: baseline; margin-left: .15em; }

/* letztes Wort und Herz bleiben zusammen, Browser brechen sonst vor Bildern um */
.mit-herz { white-space: nowrap; }

.buehne-text {
    font-size: 1.05rem;
    font-weight: 400;
    max-width: 46ch;
    margin-bottom: 2.2rem;
    text-shadow: 0 1px 2px rgba(20, 35, 38, .3), 0 2px 10px rgba(20, 35, 38, .3);
}

.welle {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    line-height: 0;
    pointer-events: none;
}

/* Der Schatten steckt in den SVG-Dateien selbst (geblurte Kontur), CSS-drop-shadow
   hat auf Windows Geisterstreifen unter der Welle gemalt */
.welle img {
    display: block;
    width: 100%;
    height: clamp(60px, 9vw, 130px);
}

.welle-oben { top: -1px; bottom: auto; }

/* ---------- Vorstellung ---------- */

.vorstellung {
    position: relative;
    padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}

.lebensblume {
    position: absolute;
    width: 340px;
    left: -120px;
    bottom: -60px;
    opacity: .35;
}

.vorstellung-raster {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}

.vorstellung h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .05em; }

/* Farbe, Kontur und Verlauf kommen aus der gemeinsamen Regel der Goldzeilen */
.handzeile-gold { font-size: clamp(1.7rem, 3vw, 2.4rem); }

.portraet-rahmen { position: relative; }

.portraet {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* Bildpfad kommt inline aus dem Backend, hier nur Fallback-Verlauf und Zuschnitt */
    background: linear-gradient(155deg, #86a3aa 0%, #45686f 60%, #35565d 100%) center / cover no-repeat;
    box-shadow: 0 26px 60px rgba(47, 52, 55, .22);
}

/* gleichmäßiger goldener Ring */
.portraet-rahmen::before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 2.5px solid var(--gold);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Angebots-Überblick ---------- */

.ueberblick {
    background: var(--creme);
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}

.ueberblick h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom: 2.5em; }

/* die Reihe darf breiter laufen als der Rest, sonst wird es bei 7 Spalten eng */
.ueberblick .huelle { max-width: 1360px; }

/* zentriert bei jeder Angebotszahl, bricht bei Bedarf mittig um */
.angebote-reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 0;
}

.kachel {
    flex: 0 0 186px;
    text-align: center;
    padding: 0 .9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kachel-bild {
    width: 92px; height: 92px;
    border-radius: 50%;
    margin-bottom: 1.3rem;
}

.kachel h3 {
    font-size: 1.1rem;
    min-height: 2.4em;
    display: flex;
    align-items: center;
}

.kachel p {
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 1.4rem;
    flex-grow: 1;
}

/* kleiner Nebenbutton der Angebotskacheln. Farben, Rand und Hover kommen aus
   dem Button-System (Abschnitt „Buttons“). Seitlich etwas mehr Luft, damit
   die Rundung nicht in die Schrift läuft; der 2px-Rand ist vom Innenabstand
   abgezogen, die Größe bleibt wie zuvor. */
.mehr {
    font-size: .8rem;
    padding: calc(.75em - 1px) calc(1.35em - 1px);
    white-space: nowrap;
}

/* ---------- Kostenloses Erstgespräch ---------- */

.erstgespraech { padding: clamp(2rem, 5vw, 3.5rem) 0; }

.erstgespraech-box {
    background: var(--petrol);
    color: var(--creme);
    border-radius: 2.5rem 4.5rem 2.5rem 4.5rem;
    padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.5rem, 5vw, 3.5rem);
    text-align: center;
    box-shadow: 0 22px 55px rgba(47, 52, 55, .16);
}

.erstgespraech-box h2 {
    color: var(--creme);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: .6em;
}

.erstgespraech-box p {
    max-width: 42em;
    margin: 0 auto 1.9rem;
}

/* ---------- Zitat-Band ---------- */

.zitat {
    position: relative;
    padding: clamp(7rem, 14vw, 11rem) 1.5rem;
    text-align: center;
    background: url('../img/see-sonnenuntergang.jpg') center 70% / cover no-repeat;
}

/* Derselbe leichte Schleier wie bei den Heros, darüber ein weicher Petrol-Schein
   nur im Textbereich: in der Mitte dunkel, zu den Rändern hin unsichtbar
   auslaufend, das Bild bleibt außen voll hell. Er sitzt bewusst hier im
   vorhandenen ::before und nicht in einem eigenen ::after, das würde über dem
   Zitat liegen und die Schrift mit abdunkeln.
   Die Farbe hält bis 45 % der Ellipse fast ihre volle Stärke, damit auch die
   Enden der langen Goldzeile über den Steinen noch getragen werden. */
.zitat::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 54% 44% at 50% 50%, rgba(24, 43, 47, .64) 0%, rgba(24, 43, 47, .54) 45%, rgba(24, 43, 47, 0) 100%),
        rgba(24, 43, 47, .10);
}

.zitat blockquote {
    position: relative;
    margin: 0;
    color: var(--creme);
}

.zitat blockquote > p:first-child {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.35;
    margin: 0 0 .4em;
    /* Schatten wie bei der Hero-Überschrift, das Bild ist nicht mehr abgedunkelt */
    text-shadow: 0 1px 4px rgba(16, 30, 33, .45), 0 3px 24px rgba(16, 30, 33, .6);
}

/* bricht die Zeile um, verteilt balance sie gleichmäßig auf beide Zeilen,
   statt „erkennen." allein unten auf die Steine zu setzen */
.zitat .handzeile { margin-bottom: 0; text-wrap: balance; }

/* ---------- Werte-Leiste ---------- */

.werte {
    background: var(--petrol);
    padding: clamp(2.5rem, 5vw, 3.8rem) 0;
}

.werte-reihe {
    list-style: none;
    margin: 0 auto; /* auto nicht vergessen, sonst kippt die Hülle nach links */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.werte-reihe li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    text-align: center;
    padding: .5rem 1.5rem;
    color: var(--creme);
    font-size: .95rem;
    letter-spacing: .03em;
}

.werte-reihe li + li { border-left: 1px solid rgba(247, 244, 238, .22); }

.werte-reihe img { width: 42px; height: 42px; }

/* ---------- Kopfband (Unterseiten) ---------- */

.kopfband {
    position: relative;
    /* voller Viewport plus Wellenzone, genau wie der Hero der Startseite */
    min-height: calc(100vh + clamp(60px, 9vw, 130px));
    min-height: calc(100svh + clamp(60px, 9vw, 130px));
    display: flex;
    align-items: center;
    /* Text links ausgerichtet wie im Hero der Startseite (.buehne) */
    justify-content: flex-start;
    text-align: left;
    background: url('../img/see-sonnenuntergang.jpg') center 30% / cover no-repeat, var(--petrol-tief);
}

/* sehr leichtes Overlay (10 %), das Bild bleibt nahezu in voller Stärke */
.kopfband::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(24, 43, 47, .10);
}

/* Textblock exakt wie im Hero der Startseite (.buehne-inhalt): gleicher linker
   Rand, gleicher Innenabstand, und die Überschrift beginnt auf derselben Höhe.
   So geht's: Der Hero zentriert seinen Textblock (Überschrift, Handzeile,
   Absatz, Button) vertikal in der Bühne. Das Kopfband zentriert seinen Block
   genauso, der Block ist aber über min-height genau so hoch wie der des Heros
   (Innenabstand 6rem + 14rem plus 468 px Textinhalt, gemessen auf allen
   Desktop-Breiten). Die kürzere Überschrift sitzt oben im gleich großen Block
   und landet damit an derselben Stelle. Ändert sich der Text im Hero deutlich,
   den Wert 468px neu messen.

   Hinter Überschrift und Handzeile liegt ein Kasten in Petrol, der vom linken
   Bildrand hereinläuft und rechts rund endet (::before weiter unten). Er ist
   im Raster genau über die beiden Textzeilen gelegt und wird per negativem
   Außenabstand bis an den Bildrand und um sein Polster vergrößert. Die
   Variablen halten seine Maße an einer Stelle.

   Oberer Innenabstand: In niedrigen Fenstern (kleine Laptops, Handys mit
   eingeblendeten Browserleisten) rückt der Hero-Text bis dicht unter die 83 px
   hohe Kopfleiste. Der Kasten stieße dort an die Leiste und sähe aus wie ein
   Teil von ihr. Der Abstand wächst deshalb genau so weit, dass über dem Kasten
   immer 1rem Luft bleibt: Leiste + 1rem + Kastenpolster, abzüglich des Raums,
   den die Zentrierung ohnehin darüber schafft. In normal hohen Fenstern greift
   der Hero-Wert 6rem, die Überschrift sitzt dann exakt wie im Hero.
   Die zweite Fassung mit 100svh gilt für Handys mit Browserleisten, Browser
   ohne svh verwerfen sie und nutzen die erste. */
.kopfband-inhalt {
    --kb-rand: clamp(0px, 7vw, 130px);          /* linker Rand wie im Hero */
    --kb-innen: clamp(1.25rem, 4vw, 2.5rem);     /* seitlicher Innenabstand wie im Hero */
    --kb-oben: clamp(1.5rem, 3vw, 2.4rem);       /* Kastenpolster über dem Text */
    --kb-unten: clamp(1.7rem, 3.2vw, 2.6rem);    /* Kastenpolster unter dem Text */
    --kb-rechts: clamp(2.6rem, 6vw, 5rem);       /* Kastenpolster rechts, Platz für die Rundung */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    color: var(--creme);
    padding: 6rem var(--kb-innen) 14rem;
    padding-top: max(6rem, calc(83px + 1rem + clamp(1.5rem, 3vw, 2.4rem) - max(0px, (100vh + clamp(60px, 9vw, 130px) - 20rem - 468px) / 2)));
    padding-top: max(6rem, calc(83px + 1rem + clamp(1.5rem, 3vw, 2.4rem) - max(0px, (100svh + clamp(60px, 9vw, 130px) - 20rem - 468px) / 2)));
    margin-left: var(--kb-rand);
    min-height: calc(20rem + 468px);
    /* breiter als die 620 px des Heros erlaubt: lange Titel wie
       „Datenschutzerklärung" sollen auf dem Desktop einzeilig bleiben. Das
       rechte Kastenpolster ist abgezogen, damit der Kasten nie über den
       Bildrand hinausragt. min-width: 0 lässt das Flex-Element auf schmalen
       Geräten schrumpfen, sonst wächst es mit dem längsten Wort über den Rand. */
    max-width: calc(100% - var(--kb-rand) - var(--kb-rechts));
    min-width: 0;
}

/* Der Kasten: Petrol, links bündig am Bildrand (1px darüber hinaus, damit nie
   ein Haarspalt bleibt), rechts voll gerundet. z-index -1 legt ihn im eigenen
   Stapel von .kopfband-inhalt hinter die Schrift, aber vor das Foto. */
.kopfband-inhalt::before {
    content: '';
    grid-area: 1 / 1 / 3 / 2;
    z-index: -1;
    background: var(--petrol-tief);
    border-radius: 0 999px 999px 0;
    margin: calc(-1 * var(--kb-oben)) calc(-1 * var(--kb-rechts)) calc(-1 * var(--kb-unten)) calc(-1px - var(--kb-rand) - var(--kb-innen));
}

/* feste Rasterplätze: sonst setzt die automatische Platzierung die Schrift
   in die Zeile unter dem Kasten */
.kopfband-inhalt > h1 { grid-area: 1 / 1; }
.kopfband-inhalt > .handzeile { grid-area: 2 / 1; }

/* Überschrift der Kopfbänder in Creme, ohne Schatten: den Kontrast liefert der
   Petrol-Kasten dahinter. */
.kopfband h1 {
    color: var(--creme);
    /* größer, an den vollhohen Startseiten-Hero angeglichen. break-word und
       hyphens fangen lange Titel wie „Datenschutzerklärung" auf schmalen
       Geräten ab, damit nichts über den Rand läuft. */
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    overflow-wrap: break-word;
    hyphens: auto;
    margin-bottom: .1em;
    /* zweizeilige Titel gleichmäßig verteilen, statt ein Wortrest allein unten.
       Die langen Rechtsseiten-Titel tragen zusätzlich eine weiche Trennstelle
       an der Wortfuge im HTML (­), weil nicht jeder Browser Deutsch
       automatisch trennt. */
    text-wrap: balance;
}

/* text-wrap: balance verteilt eine umbrechende Zeile gleichmäßig auf beide
   Zeilen, statt ein einzelnes Wort allein in die zweite zu schieben */
.kopfband .handzeile { margin-bottom: 0; font-size: clamp(1.9rem, 3.6vw, 3rem); text-wrap: balance; }

/* Eigenes Bild je Seite, alles andere am Kopfband bleibt gleich.
   Die Rechtsseiten und die 404 behalten den Sonnenuntergang von oben. */
.kopfband-ueber-mich { background-image: url('../img/ueber-mich.jpg'); }
.kopfband-angebote   { background-image: url('../img/angebote.jpg'); }
.kopfband-kontakt    { background-image: url('../img/kontakt.jpg'); }

/* Die Kontaktseite hat als einzige zwei Motive: quer für den Desktop,
   hoch für schmale Geräte. Grund ist das sehr hohe Kopfband (volle
   Fensterhöhe). Im Querformat passt auf dem Desktop die ganze Bildhöhe in den
   Ausschnitt, Himmel, Sonne, Wasser und Schilf sind vollständig zu sehen.
   Auf einem hochkant gehaltenen Gerät bliebe davon nur ein schmaler Streifen
   aus der Bildmitte übrig, deshalb dort das Hochformat.
   Umschaltpunkt 860px wie bei Navigation und Kontaktraster; der Vorlauf in
   includes/header.php benutzt denselben Wert und muss mitgeändert werden. */
.kopfband-kontakt { background-position: center center; }

/* ---------- Angebote-Seite ---------- */

.angebote-liste { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); }

.einleitung {
    font-size: 1.1rem;
    max-width: 62ch;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.angebot-karte {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: sonst darf die Textspalte nicht schmaler werden
       als ihr längster Chip und die Karte läuft auf Handys über den Rand */
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.5rem, 3.5vw, 2.8rem);
    align-items: start;
    background: #fffdf8;
    border-radius: 2rem 4.5rem 2rem 4.5rem;
    padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
    box-shadow: 0 18px 44px rgba(47, 52, 55, .08);
    scroll-margin-top: 110px;
}

.angebot-karte + .angebot-karte { margin-top: 2.2rem; }

/* jede zweite Karte gespiegelt, Icon rechts */
.angebot-karte:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) auto; }
.angebot-karte:nth-of-type(even) .angebot-bild { order: 2; }

.angebot-inhalt { min-width: 0; }

.angebot-bild {
    width: clamp(84px, 10vw, 104px);
    height: auto;
    border-radius: 50%;
}

.angebot-inhalt h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: .3em; }

.angebot-inhalt p { margin: 0 0 1.2rem; }

/* Preise: ein Angebot kann mehrere haben, die reguläre Sitzung und dazu
   optionale Erweiterungen. Jeder Preis steht in einem eigenen umrandeten
   Block, damit ein Zusatzpreis nicht wie ein zweiter Grundpreis gelesen wird.
   Als Liste ausgezeichnet, sonst würde die Regel .angebot-inhalt p jeden
   Block einzeln um 1.2rem auseinanderziehen. */
.angebot-preise {
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.preis-block {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* zentriert, damit ein umbrechender Block (schmale Karte, langer Zusatz)
       den Betrag nicht allein am linken Rand stehen lässt */
    justify-content: center;
    text-align: center;
    gap: .15rem .7rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: .5em 1.3em;
}

/* Innerhalb eines Blocks ist alles gleich gesetzt: eine Schrift, ein
   Schnitt, eine Farbe. Der Betrag wird bewusst nicht durch die Serifenschrift
   hervorgehoben, er steht gleichberechtigt neben seiner Bezeichnung. Optionale
   Blöcke tragen denselben durchgezogenen Rand wie die übrigen, sie sind allein
   am vorangestellten Wort „Optional" zu erkennen. */
.preis-marke,
.preis-leistung,
.preis-betrag {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    /* dunkler als --gold-text (#8a6c38, auf Creme nur 4.47:1); der Wert steht
       bewusst nur hier und nicht in der globalen Variablen */
    color: #7d6132;
}

.pfeil-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--petrol);
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: .2em;
    transition: gap .25s, color .25s;
}

.pfeil-link:hover { gap: 1rem; color: var(--gold-text); }

/* ---------- Ablauf ---------- */

.ablauf {
    background: #fffdf8;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.ablauf h2,
.faq h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 2em; }

.ablauf-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 3.5vw, 2.6rem);
}

.ablauf-liste li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

.ablauf-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border: 1px solid var(--gold);
    border-radius: 50%;
    /* In der Überschriftenschrift Cormorant. Deren Standardziffern sind
       Mediävalziffern mit Ober- und Unterlängen, die im Kreis unruhig tanzen.
       lining-nums schaltet auf gleich hohe Versalziffern um, die mittig sitzen. */
    font-family: var(--serif);
    font-variant-numeric: lining-nums;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--gold-text);
}

.ablauf-liste h3 {
    font-size: 1.25rem;
    margin-bottom: .3em;
}

.ablauf-liste p { margin: 0; }

/* ---------- Häufige Fragen ---------- */

.faq { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem); }

.faq-eintrag {
    border-bottom: 1px solid rgba(47, 52, 55, .14);
}

.faq-eintrag:first-of-type {
    border-top: 1px solid rgba(47, 52, 55, .14);
}

.faq-eintrag summary {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15em .2em;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--petrol);
    list-style: none;
}

.faq-eintrag summary::-webkit-details-marker { display: none; }

/* Pluszeichen, das sich beim Öffnen zum Minus dreht */
.faq-eintrag summary::after {
    content: '';
    margin-left: auto;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    align-self: center;
    background:
        linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat,
        linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat;
    transition: transform .3s ease;
}

.faq-eintrag[open] summary::after {
    transform: rotate(90deg);
    background: linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat;
}

.faq-eintrag p {
    margin: 0 0 1.5em;
    padding-right: 2rem;
    max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
    .faq-eintrag summary::after { transition: none; }
}

/* ---------- Über-mich-Seite ---------- */

.vorstellung-cta { margin-top: 1.8rem; }

.um-intro { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

/* Drei Rasterfelder: Handzeile, Portrait, Text. Am Desktop steht das Portrait
   links über beide Zeilen, Handzeile und Text bilden rechts ein Paar, das über
   die Zeilenaufteilung mittig zum Bild sitzt. Mobil fallen alle drei in eine
   Spalte und behalten die DOM-Reihenfolge: Handzeile, Bild, Text. */
.um-raster {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    grid-template-rows: auto auto;
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    row-gap: 0;
    align-items: center;
}

.um-raster .portraet-rahmen { grid-column: 1; grid-row: 1 / 3; max-width: 400px; }

.um-handzeile { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .5em; }

.um-intro-text { grid-column: 2; grid-row: 2; align-self: start; }

.um-block {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6.5rem);
    overflow: hidden;
}

.um-block h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 0; }

.um-abschnitt { margin-top: clamp(2.5rem, 5vw, 4rem); }

.lebensblume-rechts {
    position: absolute;
    width: 320px;
    left: auto;
    right: -110px;
    top: 40px;
    bottom: auto;
    opacity: .35;
}

/* zentriert über die Ränder, weil der Kasten nur so breit ist wie der Text */
.um-zitat {
    text-align: center;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.um-cta {
    text-align: center;
    margin: 2.5rem 0 0;
}

/* ---------- Kontakt ---------- */

.kontakt { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); }

.kontakt-raster {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.kontakt-info h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.kontakt-wege {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.kontakt-wege li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.kontakt-wege img {
    flex-shrink: 0;
    margin-top: .25em;
}

.kontakt-hinweis {
    font-style: italic;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--petrol);
}

.kontakt-formular-rahmen {
    background: #fffdf8;
    border-radius: 2rem 4rem 2rem 4rem;
    padding: clamp(1.8rem, 4vw, 2.8rem);
    box-shadow: 0 18px 44px rgba(47, 52, 55, .08);
}

.feld { margin-bottom: 1.4rem; }

.feld label {
    display: block;
    font-weight: 400;
    font-size: .92rem;
    letter-spacing: .03em;
    color: var(--petrol);
    margin-bottom: .45rem;
}

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    font: inherit;
    color: var(--tinte);
    background: var(--creme);
    border: 1px solid rgba(47, 52, 55, .22);
    border-radius: 12px;
    padding: .8em 1em;
    transition: border-color .25s, box-shadow .25s;
}

.feld textarea { resize: vertical; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 168, 107, .25);
}

/* ---------- Buttons ----------
   Ein System für alle Buttons, damit sie auf jedem Untergrund klar zu sehen
   sind (Creme, helle Karten, Petrol-Box, Foto im Hero) und der Hover deutlich
   wechselt:

   Hauptbutton (.knopf): dunkles Petrol ohne Umrandung, Schrift Creme. Auf der
   dunklen Petrol-Box „Erstgespräch“ stattdessen hell (Creme, Schrift Petrol).

   Nebenbutton (.knopf-flach, .mehr): nur Petrol-Rand, Schrift Petrol.

   Hover, Tastaturfokus und Antippen: jeder Button wird Gold mit Petrol-Schrift.
   Der Wechsel dunkel zu Gold ist auf jedem Grund deutlich.

   Kontraste (WCAG AA erfüllt): Creme auf Petrol-tief 8,7:1, Petrol-tief auf
   Gold-hell 5,4:1, Petrol-tief zu Creme-Grund 8,7:1, Farbwechsel beim Hover
   5,4:1. Der vorherige Hover (Petrol zu dunklerem Petrol) lag bei 1,4:1 und
   war kaum zu sehen. Eine goldene Umrandung hat Lucas verworfen. */
.knopf,
.knopf-flach,
.mehr {
    display: inline-block;
    /* <button> erbt Schrift und Zeilenhöhe nicht von selbst */
    font-family: inherit;
    line-height: inherit;
    font-weight: 500;
    letter-spacing: .03em;
    text-decoration: none;
    border: 2px solid var(--petrol-tief);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.knopf {
    font-size: .95rem;
    color: var(--creme);
    background: var(--petrol-tief);
    /* ohne sichtbare Umrandung: der Rand ist durchsichtig, die Fläche läuft
       darunter durch. Er bleibt nur als Platzhalter, damit Haupt- und
       Nebenbuttons exakt gleich groß sind. */
    border-color: transparent;
    padding: calc(1em - 2px) calc(2.4em - 2px);
}

.knopf-flach,
.mehr {
    color: var(--petrol-tief);
    background: transparent;
}

/* Auf der Petrol-Box „Erstgespräch“ hätte der dunkle Button ohne Rand kaum
   Abstand zum Grund (1,4:1). Dort ist er deshalb hell, der Hover bleibt Gold
   wie überall. Creme zu Petrol-Box 6,4:1, Gold zu Petrol-Box 4,0:1.
   Muss vor den Hover-Regeln stehen: gleiche Spezifität, die spätere gewinnt. */
.erstgespraech-box .knopf {
    background: var(--creme);
    color: var(--petrol-tief);
}

/* Hover nur auf Geräten mit Maus: auf Touchgeräten bliebe der Zustand nach
   dem Antippen sonst hängen. Dort übernimmt :active die Rückmeldung. */
@media (hover: hover) {
    .knopf:hover,
    .knopf-flach:hover,
    .mehr:hover {
        background: var(--gold-hell);
        color: var(--petrol-tief);
    }
}

.knopf:focus-visible,
.knopf:active,
.knopf-flach:focus-visible,
.knopf-flach:active,
.mehr:focus-visible,
.mehr:active {
    background: var(--gold-hell);
    color: var(--petrol-tief);
}

.erfolg {
    text-align: center;
    color: var(--petrol);
    padding: 2.5rem 1rem;
}

.erfolg img { margin: 0 auto 1rem; }

.erfolg-titel {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.6rem;
    margin: 0 0 .3em;
}

.erfolg p:last-child { margin: 0; }

/* ---------- Rechtsseiten ---------- */

.recht { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6.5rem); }

.recht h2 {
    font-size: clamp(1.45rem, 2.3vw, 1.8rem);
    margin: 2.4em 0 .6em;
}

.recht h2:first-child { margin-top: 0; }

.recht h3 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--petrol);
    margin: 1.8em 0 .4em;
}

.recht address {
    font-style: normal;
    line-height: 1.9;
    margin-bottom: 1.2rem;
}

.recht ul { padding-left: 1.3em; }
.recht li { margin-bottom: .35em; }

.fehler-wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Nebenbutton auf der 404-Seite, gleich groß wie der Hauptbutton daneben.
   Farben, Rand und Hover aus dem Button-System (Abschnitt „Buttons“). */
.knopf-flach {
    font-size: .95rem;
    padding: calc(1em - 2px) calc(2.4em - 2px);
}

/* Muster-Widerrufsformular zum Abtippen oder Kopieren */
.muster {
    background: #fffdf8;
    border: 1px solid rgba(47, 52, 55, .16);
    border-radius: 14px;
    padding: clamp(1.4rem, 3vw, 2rem);
    margin-top: 1.4rem;
}

/* overflow-wrap: anywhere lässt die langen Unterstrich-Linien des Muster-
   Formulars auf schmalen Geräten umbrechen statt den Rand zu sprengen */
.muster p { margin: 0 0 1em; overflow-wrap: anywhere; }
.muster p:last-child { margin-bottom: 0; }

.muster-fussnote { font-size: .88rem; opacity: .8; }

.recht .stand {
    margin-top: 3rem;
    font-size: .88rem;
    opacity: .75;
}

.heilhinweis {
    max-width: 620px;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--petrol);
}

.formular-hinweis {
    font-size: .85rem;
    line-height: 1.6;
    margin: 1.1rem 0 0;
    opacity: .85;
}

/* Falle für Spam-Bots: nicht per display:none, das erkennen sie */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formular-fehler {
    background: #f4e4e0;
    border-left: 3px solid #a3543f;
    border-radius: 0 10px 10px 0;
    padding: .8em 1.2em;
    margin: 0 0 1.4rem;
    font-size: .95rem;
}

.feld-fehler {
    display: block;
    margin-top: .4rem;
    font-size: .85rem;
    color: #a3543f;
}

.feld [aria-invalid="true"] { border-color: #a3543f; }

/* ---------- Fußbereich ---------- */

.fussbereich {
    background: var(--petrol-tief);
    color: var(--creme);
}

.fuss-oben {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem;
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
}

.fuss-marke { display: flex; flex-direction: column; }

.fuss-marke .zeichen { margin-bottom: .8rem; }

.fuss-name {
    font-family: var(--hand);
    font-size: 2rem;
    line-height: 1.1;
}

.fuss-claim {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .8;
    margin-top: .5rem;
}

.fuss-nav {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.fuss-nav a { padding: .3em 0; }

.fussbereich a {
    color: var(--creme);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .25s, color .25s;
    width: fit-content;
}

.fussbereich a:hover { border-color: var(--gold-hell); color: var(--gold-hell); }

.fuss-kontakt { display: flex; flex-direction: column; gap: 1rem; }

.fuss-sozial { display: flex; gap: 1rem; }

.fuss-sozial a { padding: .6rem; margin: -.3rem 0; }

.fuss-unten {
    border-top: 1px solid rgba(247, 244, 238, .18);
    text-align: center;
    font-size: .82rem;
    letter-spacing: .05em;
    opacity: .75;
}

.fuss-unten p { margin: 0; padding: 1.2rem 1rem; }

/* KI-Kennzeichnung der Landschaftsbilder, sitzt als letzte Zeile unter dem Copyright */
.fuss-unten .fuss-ki { padding-top: 0; font-size: .74rem; letter-spacing: .03em; opacity: .8; }

/* ---------- Scroll-Reveal ---------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

.js [data-reveal].da {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .pfeil-link, .knopf, .knopf-flach, .mehr { transition: none; }
}

/* ---------- Responsiv ---------- */

@media (max-width: 1240px) {
    .kachel { flex-basis: 33.33%; }
}

@media (max-width: 860px) {
    .nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.2rem;
        background: var(--petrol-tief);
        font-size: 1.3rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
    }

    .kopfleiste.offen .nav { opacity: 1; visibility: visible; }
    .kopfleiste.offen .burger-strich { background: transparent; }
    .kopfleiste.offen .burger-strich::before { transform: translateY(9px) rotate(45deg); }
    .kopfleiste.offen .burger-strich::after { transform: translateY(-9px) rotate(-45deg); }

    .burger { display: block; z-index: 60; }

    .vorstellung-raster { grid-template-columns: 1fr; }
    /* width: 100% ist Pflicht, nicht Zierde: automatische Seitenränder schalten
       das Dehnen von Rasterfeldern ab. Ohne die Breitenangabe fällt der Rahmen
       auf seine Inhaltsbreite zurück, und die ist null, weil das Portrait ein
       leeres Element ist. */
    .portraet-rahmen { width: 100%; max-width: 420px; margin: 0 auto; }
    .lebensblume { display: none; }

    .kontakt-raster { grid-template-columns: 1fr; }

    /* eine Spalte, Reihenfolge per order: Handzeile, Text, Bild */
    .um-raster { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.6rem; }
    .um-raster .portraet-rahmen { grid-column: 1; grid-row: auto; order: 2; width: 100%; margin: 0 auto; }
    .um-handzeile { grid-column: 1; grid-row: auto; order: 0; align-self: auto; justify-self: center; margin-bottom: 0; text-align: center; }
    .um-intro-text { grid-column: 1; grid-row: auto; order: 1; align-self: auto; }
    .lebensblume-rechts { display: none; }

    .fuss-oben { grid-template-columns: 1fr; gap: 2rem; }
    .fuss-nav { flex-direction: row; gap: 1.5rem; }

    .werte-reihe { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
    .werte-reihe li:nth-child(odd) { border-left: 0; }

    /* Kontaktseite auf das Hochformat umstellen, Begründung oben bei
       .kopfband-kontakt. Derselbe Umschaltpunkt steht im Vorlauf in
       includes/header.php und muss dort mitgeändert werden. */
    .kopfband-kontakt { background-image: url('../img/kontakt-hoch.jpg'); }
}


@media (max-width: 640px) {
    .kachel { flex-basis: 50%; padding: 0 .4rem; }
    .kachel h3 { min-height: 0; }

    .angebot-karte,
    .angebot-karte:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
    .angebot-karte:nth-of-type(even) .angebot-bild { order: 0; }
    .angebot-bild { margin: 0 auto; }
    .angebot-inhalt { text-align: center; }
    .angebot-preise { justify-content: center; }

    .buehne-inhalt { padding-top: 6.5rem; padding-bottom: 11rem; margin-left: 0; }
    /* Kopfband wie der Hero auf dem Handy: Innenabstand 6.5rem oben und 11rem
       unten, kein linker Rand. Der Textinhalt des Heros schwankt hier je nach
       Umbruch zwischen 420 und 478 px (gemessen von 320 bis 640 px Breite),
       445 px liegt in der Mitte. Die Überschrift trifft die Hero-Position
       damit auf wenige Pixel genau. Oberer Abstand mit derselben Regel für
       Luft unter der Kopfleiste wie am Desktop, hier mit den Handywerten
       (Welle 60 px, Kastenpolster 1.35rem). Kompakteres Kastenpolster. */
    .kopfband-inhalt {
        --kb-rand: 0px;
        --kb-oben: 1.35rem;
        --kb-unten: 1.5rem;
        --kb-rechts: 1.6rem;
        padding-top: max(6.5rem, calc(83px + 1rem + 1.35rem - max(0px, (100vh + 60px - 17.5rem - 445px) / 2)));
        padding-top: max(6.5rem, calc(83px + 1rem + 1.35rem - max(0px, (100svh + 60px - 17.5rem - 445px) / 2)));
        padding-bottom: 11rem;
        min-height: calc(17.5rem + 445px);
    }

    /* bei zweizeiligen Titeln würde die volle Rundung in die Schrift schneiden */
    .kopfband-inhalt::before { border-radius: 0 3.5rem 3.5rem 0; }

    /* Handzeile auf dem Handy: größer als die Überschrift. Die Bindung an die
       Überschriftbreite hielt sie hier bei rund 31 px, zu klein für die dünne
       Schreibschrift auf hellem Himmel. min() deckelt die Größe über die
       Viewportbreite, damit die einzeilige Zeile auch auf 320-px-Geräten in
       der Textspalte bleibt (Messung: 251 px Zeilenbreite je 31,3 px Schrift). */
    .buehne .handzeile {
        font-size: min(calc(var(--buehne-h1) * 1.28), 10.9vw);
    }

    /* Hero-Goldzeile: auf dem Handy der dunklere Verlauf. Bei der kleinen
       Schrift geht der helle Auftakt auf dem Himmel unter, der dunklere hat an
       jeder Stelle mehr Kontrast. Die Kopfbänder behalten den hellen Verlauf,
       ihre Zeile steht auf dem dunklen Petrol-Kasten.
       Dieselbe Absicherung wie bei der Hauptregel: ohne Beschneiden auf die
       Schrift darf kein Verlauf gesetzt werden, er stünde sonst als Kasten
       hinter dem Text. */
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .buehne .handzeile { background-image: var(--verlauf-hell); }

        /* das Herz nimmt den Endton dieses dunkleren Verlaufs auf */
        .buehne .handzeile .herz { stroke: var(--gold-text); }
    }

    /* Zitatband: das Band ist hier schmal und kurz, die Desktop-Ellipse würde
       die Zeilenenden nicht mehr erreichen. Deshalb breiter, höher und etwas
       tiefer angesetzt: der Textblock sitzt unter der Bandmitte, weil oben die
       Welle einen Teil der Fläche belegt. */
    .zitat::before {
        background:
            radial-gradient(ellipse 95% 52% at 50% 56%, rgba(24, 43, 47, .66) 0%, rgba(24, 43, 47, .56) 45%, rgba(24, 43, 47, 0) 100%),
            rgba(24, 43, 47, .10);
    }

    /* Bildausschnitt nach rechts geschoben, damit das Schilf am rechten Rand
       auch im Hochformat sichtbar bleibt */
    .kopfband-angebote { background-position: 75% 30%; }

    /* Beim Hochformat passt auf dem Handy die volle Bildhöhe ins Band, dafür
       nur rund zwei Drittel der Breite. Nach rechts geschoben, damit Sonne und
       Schilf am rechten Bildrand im Ausschnitt bleiben. Zwischen 641 und 860px
       ist die Breite kein Problem, dort genügt die Mittelstellung von oben. */
    .kopfband-kontakt { background-position: 68% center; }

    .werte-reihe { grid-template-columns: 1fr; }
    .werte-reihe li { border-left: 0 !important; }
}

/* Unter 375 px bricht der Claim in der Kopfleiste auf zwei Zeilen um, die Leiste
   ist dann 102 statt 83 px hoch (gemessen). Dieselbe Abstandsregel für den
   Kopfband-Kasten wie oben, nur mit der höheren Leiste. */
@media (max-width: 374px) {
    .kopfband-inhalt {
        padding-top: max(6.5rem, calc(102px + 1rem + 1.35rem - max(0px, (100vh + 60px - 17.5rem - 445px) / 2)));
        padding-top: max(6.5rem, calc(102px + 1rem + 1.35rem - max(0px, (100svh + 60px - 17.5rem - 445px) / 2)));
    }
}