/* Jennifer Bößhenz · Virtuelle Assistenz (Website, Runde 7, Stand 26.10.2026)
   Grundlage: Skizze Richtung B, Version 2 in Erdtönen, dazu V1–V6 aus der Änderungsliste (skizzen-r7):
   riesiges „Flow.“ mit freigestelltem Foto, Motto über die ganze Höhe, Über mich als Wendepunkt, Zusagen,
   Leistungen als aufklappbare Zeilen, Ablauf wie taktfaden, Bewegung nur gezielt (nichts läuft endlos,
   „Bewegung reduzieren“ macht alles ruhig). Wellen nur als Kanten zwischen den Rubriken, nicht vor Überschriften.
   Alle Schriften liegen auf der Seite (keine fremden Server). */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("../fonts/caveat-brush.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --creme: #faf5ec;
  --karte: #fffaf2;
  --sand: #efe3cf;
  --sand-tief: #ead9bd;
  --karamell-hell: #d8c4a3;
  --beige-dunkel: #bfa98a;     /* „wie ein dunkles Beige“ (Jennifer 25.10.), mit dunkler Schrift */
  --tan: #bc9760;              /* Linien und Punkte */
  --akzent: #806134;           /* kursive Wörter, Knöpfe */
  --akzent-tief: #6b5128;      /* Akzent auf Sand */
  --text: #3b2b20;
  --linie: rgba(59, 43, 32, .16);
  --schatten: 0 30px 60px -36px rgba(59, 43, 32, .5);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --hand: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive;
  --max: 1180px;
  --rand: clamp(20px, 5vw, 56px);
  --abstand: clamp(72px, 9vw, 120px);
  --kopf-hoehe: 84px;
  --kante: clamp(36px, 5vw, 80px);
  --akz: var(--akzent);
  --flaeche: var(--creme);
  --fokus: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--sand); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.rahmen { width: min(var(--max), 100% - 2 * var(--rand)); margin-inline: auto; }
.sprung { position: absolute; left: 12px; top: -100px; z-index: 40; background: var(--text); color: var(--creme); padding: 12px 20px; font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }

/* ---------- Schrift ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1; }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); line-height: 1.02; }
h3 { font-size: clamp(1.5rem, 2vw, 1.8rem); line-height: 1.12; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--akz); }
p { margin: 0 0 1em; }
/* Kleine Überschriften: Runde 7b etwas größer, damit man sie gut lesen kann (wie „MEINE SERVICES“ im One-Pager) */
.augen { margin: 0 0 18px; font-size: .95rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--akz); }
.einleitung { font: 400 clamp(1.25rem, 1.9vw, 1.5rem)/1.38 var(--serif); max-width: 34ch; }
/* Handschrift: eine kleine Randnotiz, wie in den Beiträgen */
.hand { font-family: var(--hand); text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: .02em; color: var(--akz); margin: 0; }
.klein { font-size: .95rem; }
.kopfzeile { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.kopfzeile .einleitung { margin-top: 22px; }

/* ---------- Logo (Welle, Name in Instrument Serif, Zusatz in Hanken Grotesk) ---------- */
.marke { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 0; color: var(--text); text-decoration: none; line-height: 1; }
.marke .welle { width: 52px; height: auto; margin-bottom: 6px; }
.marke-name { font-family: var(--serif); font-size: 1.55rem; line-height: .95; white-space: nowrap; }
.marke-zusatz { margin-top: 6px; padding-left: .32em; font-size: .56rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--akzent); white-space: nowrap; }

/* ---------- Knöpfe: Akzent-Braun mit heller Schrift (wie im Bild V2), Pfeil im hellen Kreis ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 26px; border: 0; border-radius: 999px; background: var(--akzent); color: var(--creme); font: 400 1.25rem/1.2 var(--serif); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 12px 26px -14px rgba(59, 43, 32, .7); transition: background-color .25s ease, transform .25s ease; }
.knopf:hover { background: var(--akzent-tief); text-decoration: none; }
.knopf .pfeil { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--creme); color: var(--akzent); font-style: normal; font-size: 1.2rem; line-height: 1; transition: transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .knopf:hover { transform: translateY(-2px); }
  .knopf:hover .pfeil { transform: translateX(3px); }
}

/* ---------- Kopf (bleibt oben stehen) ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--creme); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--kopf-hoehe); }
.menue { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 clamp(14px, 2.2vw, 30px); }
/* 7l (Jennifer): Menü in der Schrift der Schritt-Titel, alle Knöpfe in Instrument Serif (normale Schreibweise) */
.menue a:not(.knopf-menue) { display: inline-flex; align-items: center; min-height: 48px; font: 700 1.02rem/1.2 var(--sans); text-decoration: none; }
.menue a:not(.knopf-menue):hover { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.knopf-menue { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 14px; background: var(--akzent); color: var(--creme); font: 400 1.25rem/1 var(--serif); text-decoration: none; white-space: nowrap; transition: background-color .25s ease; }
.knopf-menue:hover { background: var(--akzent-tief); }
.menue-knopf { display: none; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 0 16px; border: 2px solid var(--akzent); border-radius: 999px; background: transparent; color: var(--text); font: 700 1rem var(--sans); cursor: pointer; }
.menue-knopf .striche { position: relative; width: 18px; height: 2px; background: currentColor; }
.menue-knopf .striche::before, .menue-knopf .striche::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menue-knopf .striche::before { top: -6px; }
.menue-knopf .striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .striche::before { top: 0; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .striche::after { top: 0; transform: rotate(-45deg); }

/* ---------- Palme als Hintergrund der ganzen Seite (Jennifer 25.10.), sichtbar in den beiden Fenstern ---------- */
/* Der feste Rahmen schneidet ab, was das bewegte Bild (leicht vergrößert) über den Rand schiebt: kein seitliches Scrollen */
.palmen-hintergrund { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--sand); }
.palmen-bild { position: absolute; inset: -7vh 0; background: var(--sand) url("../img/palmen-1800.jpg") center 30% / cover no-repeat; background-image: image-set(url("../img/palmen-1800.webp") type("image/webp"), url("../img/palmen-1800.jpg") type("image/jpeg")); will-change: transform; }
@media (max-aspect-ratio: 1/1) { .palmen-bild { background-image: image-set(url("../img/palmen-hoch-900.webp") type("image/webp"), url("../img/palmen-hoch-900.jpg") type("image/jpeg")); background-position: center 20%; } }

/* ---------- Wellen als Kanten zwischen den Rubriken (Farbe = Fläche der Rubrik) ---------- */
main > section, .fuss { position: relative; }
.kante { position: absolute; left: 0; display: block; width: 100%; height: var(--kante); pointer-events: none; }
.kante path { fill: var(--flaeche); }
.kante-oben { top: calc(1px - var(--kante)); }
.kante-unten { bottom: calc(1px - var(--kante)); z-index: 2; }
.kante-boden { bottom: -1px; z-index: 1; }

/* ---------- Start: Hauptzeile links, freigestelltes Foto rechts (Runde 7b: ohne das große „Flow.“) ---------- */
.held { isolation: isolate; background: var(--creme); overflow: hidden; }
.held-innen { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(24px, 4vw, 64px); min-height: max(560px, calc(100svh - var(--kopf-hoehe))); }
.held-titel { align-self: center; padding: clamp(40px, 6vh, 72px) 0 calc(var(--kante) + clamp(24px, 4vh, 48px)); }
.held-titel h1 { font-size: clamp(3rem, 6.6vw, 6.2rem); }
.held-titel .augen { margin-bottom: 18px; }
.flow-linie { display: block; width: min(260px, 60%); height: auto; margin-top: 16px; overflow: visible; }
.flow-linie path { fill: none; stroke: var(--akzent); stroke-width: 3.2; stroke-linecap: round; }
.held-text { max-width: 44ch; margin: 26px 0 0;  /* 7j: „… Ideen wachsen,“ in einer Zeile, „Fokus …“ darunter */ font: 400 clamp(1.2rem, 1.6vw, 1.4rem)/1.42 var(--serif); }
.held-foto { justify-self: center; width: auto; height: min(80svh, 740px); max-width: none; }

/* ---------- V2 Motto: ein Satz über die ganze Höhe ---------- */
.motto { --flaeche: var(--sand); --akz: var(--akzent-tief); z-index: 1; display: grid; align-items: center; min-height: 100svh; padding: clamp(80px, 12vh, 140px) 0; background: var(--sand); text-align: center; }
.motto-satz { max-width: 15ch; margin: 0 auto; font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 1.04; }
.motto-wort { transition: color .6s ease; }
/* Runde 7b: Fragen in einer Zeile in der klaren Schrift; Bereiche als ruhige Kacheln statt runder Rahmen */
.motto-fragen { margin: clamp(36px, 6vh, 64px) auto 0; font: 500 clamp(1.1rem, 1.75vw, 1.4rem)/1.5 var(--sans); }
.bereiche { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 26px 0 0; padding: 0; }
.bereiche a { display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 22px; border-radius: 14px; background: var(--karte); box-shadow: 0 12px 26px -18px rgba(59, 43, 32, .55); font: 700 .86rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background-color .25s ease, box-shadow .25s ease; }
.bereiche a::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(45deg); }
.bereiche a:hover { background: var(--creme); box-shadow: 0 16px 30px -18px rgba(59, 43, 32, .6); }
.motto .knopf { margin-top: 40px; }  /* 7o: bleibt laut Jennifer im Motto */

/* ---------- Über mich: Text und Foto (der Felsen-Bereich davor ist seit 7d weg) ---------- */
/* oben Platz für die Welle des Motto-Abschnitts, die in diesen Abschnitt hineinragt */
.ueber { --flaeche: var(--creme); background: var(--creme); padding: calc(var(--kante) + var(--abstand) * .6) 0 var(--abstand); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
.ueber-text .einleitung { margin: 22px 0 1.1em; }
.ueber-text .hand { margin: 4px 0 18px; font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.ueber-foto { margin: 0; }
.klecks { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; box-shadow: var(--schatten); }
.klecks img, .bogen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Fenster zur Palme (Zusagen; seit 7l zwischen Leistungen und Ablauf) ---------- */
.fenster { padding: clamp(110px, 16vh, 200px) 0; }
.fenster-karte { padding: clamp(28px, 5vw, 64px); border-radius: 48px 48px 48px 140px; background: var(--creme); box-shadow: 0 40px 80px -40px rgba(38, 30, 20, .6); }

/* V5 Zusagen mit Häkchen */
.verlassen .zwei { align-items: start; }
.zusagen { list-style: none; margin: 0; padding: 0; }
.zusagen li { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.zusagen li:first-child { border-top: 1px solid var(--linie); }
.zusagen li::before { content: ""; grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; border-radius: 8px; background: var(--sand-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%236b5128' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.zusagen b { font: 400 clamp(1.35rem, 1.8vw, 1.55rem)/1.2 var(--serif); }
.zusagen span { margin-top: 2px; }

/* ---------- V4 Leistungen: drei große Zeilen zum Aufklappen ---------- */
/* 7l: nach „Über mich“; oben Platz für dessen Welle, unten die eigene Welle ins Palmen-Fenster */
.leistungen { --flaeche: var(--sand); --akz: var(--akzent-tief); padding: calc(var(--kante) + var(--abstand) * .6) 0 var(--abstand); background: var(--sand); }
.zeilen { border-top: 1px solid var(--linie); }
.zeile { border-bottom: 1px solid var(--linie); }
.zeile summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: clamp(16px, 3vw, 36px); align-items: center; padding: clamp(18px, 2.6vw, 30px) 0; cursor: pointer; list-style: none; }
.zeile summary::-webkit-details-marker { display: none; }
.zeile .symbol { display: block; width: clamp(56px, 6vw, 76px); }
.symbol svg { display: block; width: 100%; height: auto; overflow: visible; }
.symbol .blob { fill: var(--creme); }
.symbol .strich { fill: none; stroke: var(--akzent-tief); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }  /* 7j: Set B, 48er-Raster */
/* 7k (Jennifer: „C-Kachel in Akzentbraun … austesten“): Kachel im Braun des Termin-Knopfs, Linie in Creme (> 4,5 : 1) */
.symbol .kachel { fill: var(--akzent); }
.symbol .kachel + .strich { stroke: var(--creme); }
/* 7l (Jennifer: „die Schrift nehmen wie ‚Das nehme ich dir ab‘“): Namen der Leistungen in Instrument Serif, zwischen h2 und Text */
.zeile h3 { grid-column: 2; font: 400 clamp(1.6rem, 2.6vw, 2.15rem)/1.12 var(--serif); }
.zeile .zeichen { position: relative; grid-column: 3; width: 52px; height: 52px; border: 1.5px solid var(--akzent-tief); border-radius: 50%; transition: transform .35s ease, background-color .25s ease; }
.zeile .zeichen::before, .zeile .zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: var(--akzent-tief); }
.zeile .zeichen::after { transform: rotate(90deg); }
.zeile summary:hover .zeichen { background: var(--sand-tief); }
.zeile[open] .zeichen { transform: rotate(45deg); background: var(--sand-tief); }
.blatt-liste { list-style: none; columns: 2; column-gap: 40px; margin: 0; padding: 0 0 clamp(24px, 3vw, 36px) calc(clamp(56px, 6vw, 76px) + clamp(16px, 3vw, 36px)); }
.blatt-liste li { position: relative; break-inside: avoid; padding: 6px 0 6px 30px; }
.blatt-liste li::before { content: ""; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 15C3 7 8 3 16 2c0 8-4 13-12 13z' fill='%23d4b98a'/%3E%3Cpath d='M3 15c3-4 6-7 10-10' fill='none' stroke='%23806134' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }


/* ---------- Ablauf: fünf Schritte an einer Linie (wie taktfaden) ---------- */
.ablauf { --flaeche: var(--sand-tief); --akz: var(--akzent-tief); padding: var(--abstand) 0; background: var(--sand-tief); }
.weg { position: relative; }
.weg-linie { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
.weg-linie path { fill: none; stroke: var(--akzent-tief); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* 7l (Jennifer: „dass die Erklärungen optisch besser zusammenpassen … komprimierter“): jeder Schritt nutzt die drei
   Zeilen des gemeinsamen Rasters (Nummer, Titel, Erklärung), so beginnen alle Erklärungen auf einer Linie */
.stationen { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; margin: 0; padding: 0; }
.stationen li { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; padding: 56px 22px 0 0; }
.stationen li::before { content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border: 2.5px solid var(--akzent-tief); border-radius: 50%; background: var(--sand-tief); }
.schritt-nr { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-tief); }
/* Runde 7b: Schritt-Namen fett in der klaren Schrift, damit der Text darunter gut lesbar ist */
.stationen h3 { margin-bottom: 4px; font: 700 1.15rem/1.25 var(--sans); }
.stationen li p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; }

/* ---------- Fragen ---------- */
.fragen { --flaeche: var(--sand); --akz: var(--akzent-tief); padding: var(--abstand) 0; background: var(--sand); }
.fragen-innen { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.fragen-innen .kopfzeile { position: sticky; top: calc(var(--kopf-hoehe) + 32px); margin-bottom: 0; }
/* 7s (Jennifer 28.10.: „… ein zu kleiner Zeilenabstand“): Satz unter „Du hast Fragen?“ mit Luft zur Überschrift (wie
   .kopfzeile .einleitung) und größerer Zeilenhöhe; das E-Mail-Feld rückt nicht an die Zeile darüber */
.fragen-innen .kopfzeile h2 + p { margin-top: 22px; line-height: 1.8; }
.fragen-innen .kopfzeile .mail-feld { margin-top: 14px; }
.fragen-liste { border-top: 1px solid var(--linie); }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; font: 400 clamp(1.25rem, 1.7vw, 1.45rem)/1.25 var(--serif); list-style: none; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand-tief); font: 400 1.6rem/1 var(--serif); transition: transform .3s ease; }
.fragen-liste details[open] summary::after { transform: rotate(45deg); }
.fragen-liste details p { max-width: 54ch; margin: 0 0 20px; }
/* 7o (Jennifer: „nicht so unterstrichen, sondern … farblich hinterlegen in so einem leichten bräunlichen Ton“): nur die
   E-Mail oben bei den Fragen; Fläche Karamell-Hell, beim Darüberfahren dunkler, Fokus-Rahmen wie überall */
.mail-feld { display: inline-block; margin-top: 6px; padding: 12px 16px; border-radius: 12px; background: var(--karamell-hell); font-weight: 600; line-height: 1.5rem; white-space: nowrap; text-decoration: none; transition: background-color .25s ease; }
.mail-feld:hover { background: var(--beige-dunkel); }

/* 7o (Jennifer: „einen Anker mit Pfeil nach oben … damit man durch die App scrollen kann“): unten rechts, erscheint
   nach dem ersten Bildschirm (app.js); ohne JavaScript immer da. Pfeil Creme auf Akzent-Braun wie die Knöpfe */
.nach-oben { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--akzent); color: var(--creme); box-shadow: 0 12px 26px -14px rgba(59, 43, 32, .7); transition: opacity .25s ease, visibility .25s ease, background-color .25s ease; }
.nach-oben svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nach-oben:hover { background: var(--akzent-tief); }
.js .nach-oben:not(.sichtbar) { opacity: 0; visibility: hidden; }

/* ---------- Kontakt mit Formular ---------- */
.kontakt { --flaeche: var(--creme); padding: var(--abstand) 0 calc(var(--abstand) + var(--kante)); background: var(--creme); }
.kontakt .zwei { align-items: start; }
.kontakt .einleitung { margin-top: 22px; }
/* 7r (Jennifer 28.10., Fassung B): „Weniger To-dos. Mehr Freiraum. Mehr Flow.“ als ruhige Serif-Zeile, „Flow“ schräg in
   der Akzentfarbe wie „Flow.“ oben im Seitenanfang (Akzent auf Creme 5,26 : 1) */
.kontakt-zeile { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.25 var(--serif); max-width: none; text-wrap: balance; }
.kontakt-zeile em { font-style: italic; color: var(--akz); }
.kontakt h2.augen { font-family: var(--sans); line-height: 1.3; }  /* 7l: „Kontakt“ ist die Überschrift (Screenreader), sieht aus wie bisher */
/* Runde 7c: links Text und Termin-Kasten, darunter E-Mail und Instagram; rechts das Formular */
.kontakt-text > p:not(.augen):not(.einleitung) { max-width: 40ch; }
/* Termin-Kasten. 7l: ein Absatz in der Schrift der Schritt-Titel; 7m (Jennifer: „die Schrift von vorher … die
   Schnörkelschrift“): Frage schräg in eigener Zeile, Satz darunter fett; 7o (Jennifer 28.10.): steht jetzt bei Kontakt
   statt am Ende vom Ablauf, auf Sand, damit er sich wie vorher von der Fläche abhebt */
.termin-feld { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; padding: clamp(24px, 3vw, 34px) clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--sand); }
.termin-feld p { flex: 1 1 32ch; margin: 0; font: 700 1.15rem/1.45 var(--sans); }
.termin-frage { display: block; margin-bottom: 4px; font: italic 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--serif); color: var(--akzent-tief); }
.wege { list-style: none; display: grid; gap: 12px; margin: 34px 0 0; padding: 0; }
.wege a { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; font: 400 1.05rem/1.35 var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.wege b { font-weight: 700; }
.wege a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--tan); }
.weg-symbol { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--sand-tief); }
.weg-symbol svg, .fuss-wege svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.formular { display: grid; gap: 18px; padding: clamp(26px, 4vw, 44px); border-radius: 36px 36px 36px 110px; background: var(--karte); box-shadow: var(--schatten); }
/* 7v (Jennifer 28.10.: „… ist dazu etwas abgeschnitten“): unten mehr Luft, damit der Hinweis „Mit dem Absenden …“ nicht in
   die große Rundung unten links läuft (mindestens 24 px Abstand, browser_pruefen formular_rundung) */
.formular { padding-bottom: 72px; }
.feld { display: grid; gap: 6px; }
.feld label { font: 400 1.2rem/1.2 var(--serif); }
.formular input, .formular textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1.5px solid var(--akzent); border-radius: 14px; background: var(--creme); color: var(--text); font: 1rem/1.4 var(--sans); }
.formular textarea { resize: vertical; }
.formular .knopf { justify-self: start; }
.formular .klein { margin: 0; }
#kontakt-status { margin: 0; font-weight: 600; }
/* Honigtopf: für Menschen unsichtbar, Programme füllen ihn aus. Dieselbe Technik für die Vorlese-Kopie geteilter Überschriften */
.honig, .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .ohne-js { display: none; }

/* ---------- Fuß (dunkles Beige, dunkle Schrift) ---------- */
.fuss { --flaeche: var(--beige-dunkel); padding: clamp(36px, 5vw, 64px) 0 30px; background: var(--beige-dunkel); color: var(--text); }
.fuss-innen { display: grid; grid-template-columns: 1fr auto; gap: 28px 60px; align-items: end; }
/* Runde 7c: zum Abschluss das Motto, daneben die Knöpfe E-Mail, Instagram, LinkedIn; kein Logo mehr */
/* 7l: Motto etwas kleiner. 7n (Jennifer: „Variante V3, aber Flow ohne diese Welle, aber in dieser Farbe“): „Flow“ schräg
   in Akzent-Tief direkt auf dem Beige, ohne Kasten und ohne Welle; etwa 3,3 : 1, ihre bewusste Ausnahme nur für diese
   große Schrift */
.fuss-motto { max-width: 22ch; margin: 0; font: 400 clamp(1.7rem, 3.1vw, 2.6rem)/1.2 var(--serif); }
.fuss-flow { color: var(--akzent-tief); font-style: italic; }
.fuss-wege { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.fuss-wege a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 22px; border: 1.5px solid currentColor; border-radius: 999px; font: 400 1.25rem/1 var(--serif); text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.fuss-wege a:hover { background: var(--text); color: var(--creme); }
.fuss-recht { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; padding-top: 14px; border-top: 1px solid rgba(59, 43, 32, .25); font-size: .95rem; }
.fuss-recht a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }

/* ---------- Rechtstexte und 404 ---------- */
.recht, .fehlerseite { background: var(--creme); }
.recht { padding: clamp(48px, 7vw, 96px) 0 var(--abstand); }
.recht .rahmen { max-width: 760px; }
.recht h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); margin-bottom: 28px; }
.recht h2 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); margin: 42px 0 12px; }
.recht h3 { font-size: clamp(1.25rem, 1.8vw, 1.4rem); margin: 28px 0 8px; }
.recht ul { margin: 0 0 1em; padding-left: 1.3em; }
.recht li { margin: 4px 0; }
.recht .stand { font-weight: 600; }
.recht a { overflow-wrap: anywhere; }
/* Datenschutz: Widerspruch getrennt von den anderen Informationen (Art. 21 Abs. 4 DSGVO) */
.widerspruch { margin: 48px 0; padding: 24px clamp(18px, 3vw, 32px) 10px; border: 2px solid var(--akzent); border-radius: 18px; background: var(--karte); }
.recht .widerspruch h2 { margin-top: 0; }
.fehlerseite { padding: clamp(72px, 12vw, 160px) 0; }
.fehlerseite h1 { max-width: 14ch; }
.fehlerseite .einleitung { margin-top: 24px; }
.fehlerseite .knopf { margin-top: 30px; }

/* ---------- V6 Bewegung: gezielt, einmalig, nie endlos; bei „Bewegung reduzieren“ ist alles ruhig ---------- */
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heran { from { transform: scale(1.14); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  /* Start: das Foto erscheint einmal, die Welle unter der Hauptzeile zeichnet sich */
  .held-foto { animation: auftauchen 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .flow-linie path { stroke-dasharray: 1; animation: zeichnen 1.6s .6s ease both; }
  /* Rubriken erscheinen beim Scrollen (nur mit JavaScript, sonst bleibt alles sichtbar) */
  .js [data-zeigen] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js [data-zeigen].sichtbar { opacity: 1; transform: none; }
  /* Überschriften gleiten Zeile für Zeile hoch (app.js teilt sie in Wörter und zählt die Zeilen) */
  .js h2 .wort { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--zeile, 0) * 110ms); }
  .js h2.sichtbar .wort { opacity: 1; transform: none; }
  /* Motto: noch nicht erreichte Wörter sind blass */
  .js .motto-satz .motto-wort:not(.an) { color: rgba(59, 43, 32, .17); }
  /* Leistungen: das Symbol zeichnet sich beim Aufklappen selbst */
  .zeile[open] .symbol .strich path { stroke-dasharray: 1; animation: zeichnen 1.2s ease both; }
  /* Fotos zoomen beim Scrollen leicht heran (wo der Browser das kann; sonst stehen sie still) */
  @supports (animation-timeline: view()) {
    .zoom img { animation: heran linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
/* Sicherheitsnetz: wer „Bewegung reduzieren“ eingestellt hat, sieht auch kleine Übergänge sofort am Ziel */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1080px) {
  .menue a:not(.knopf-menue) { font-size: .98rem; }
  /* 7l: Abstand zwischen den Schritt-Reihen über margin, damit das Unterraster (Nummer, Titel, Erklärung) eng bleibt */
  .stationen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .weg-linie { display: none; }
  .stationen li { padding-top: 40px; margin-bottom: 26px; }
  .stationen li::before { top: 4px; }
}
@media (max-width: 900px) {
  .js .menue-knopf { display: inline-flex; }
  .js .menue { display: none; }
  .js .menue.offen { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--rand) 24px; background: var(--creme); border-bottom: 1px solid var(--linie); box-shadow: 0 18px 30px rgba(59, 43, 32, .08); }
  .js .menue.offen a:not(.knopf-menue) { min-height: 56px; border-bottom: 1px solid var(--linie); font-size: 1.12rem; }
  .js .menue.offen .knopf-menue { justify-content: center; margin-top: 18px; min-height: 52px; }
  .menue { flex-wrap: wrap; }
  /* Start untereinander: erst die Hauptzeile, darunter das Foto, das unten von der Welle abgeschnitten wird */
  .held-innen { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .held-titel { padding: 32px 0 8px; }
  .held-titel h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .held-foto { width: min(70vw, 360px); height: auto; margin-bottom: calc(var(--kante) * -.3); }
  .zwei, .fragen-innen { grid-template-columns: 1fr; }
  .ueber-foto { max-width: 460px; }
  .fragen-innen .kopfzeile { position: static; }
  .fenster-karte { border-radius: 36px 36px 36px 90px; }
  /* 7v: am Handy kleinere Rundung unten links und etwas weniger Luft als am Computer */
  .formular { border-radius: 36px 36px 36px 72px; padding-bottom: 64px; }
  .fuss-innen { grid-template-columns: 1fr; }
  /* Ablauf als senkrechte Linie, die sich beim Scrollen zeichnet (app.js setzt --weg) */
  .stationen { position: relative; grid-template-columns: 1fr; row-gap: 0; }
  .stationen::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 30px; width: 2.5px; background: var(--akzent-tief); transform-origin: top; transform: scaleY(var(--weg, 1)); }
  .stationen li { padding: 0 0 0 44px; margin-bottom: 22px; }
  .stationen li:last-child { margin-bottom: 0; }
  .stationen li::before { top: 4px; }
}
@media (max-width: 640px) {
  :root { --kopf-hoehe: 76px; }
  .marke .welle { width: 44px; }
  .marke-name { font-size: 1.32rem; }
  .marke-zusatz { font-size: .5rem; }
  .blatt-liste { columns: 1; padding-left: 0; }
  .zeile .zeichen { width: 44px; height: 44px; }
  .bereiche { flex-direction: column; align-items: stretch; }
  .bereiche a { justify-content: space-between; }
  /* „Kennenlerngespräch buchen“ passt so am Handy in eine Zeile (7l: in Instrument Serif) */
  .knopf { max-width: 100%; gap: 10px; padding-left: 20px; font-size: 1.15rem; }
  .knopf .pfeil { width: 36px; height: 36px; }
}