/* Angela Burkhardt – Mind & Motion. Farben aus Logo (LOGO-202609) und Freilegung (30.09.2026).
   Bauweise Kopfzeile/Menü: Kundenprojekte/Bausteine/Kopfzeile-und-Handymenue.md.
   Schriftgrößen: sechs Stufen, sonst nichts (Schriftgroessen-Leiter.md). */

:root {
  --grund: #F4ECE2;            /* warmes Beige, Freilegung Grundfarbe */
  --grund-hell: #FAF7F2;
  --grund-tief: #E6D6C3;       /* dunkleres Beige für Bänder */
  --text: #442417;             /* Dunkelbraun statt Schwarz */
  --leise: #7a5a44;
  --gruen: #5C7E37;            /* Leitfarbe Olivgrün */
  --gruen-hell: #89AE5E;
  --gruen-leise: #DDE8B9;
  --salbei: #779883;           /* Verlaufsgrün aus dem Logo */
  --gold: #D99412;             /* Logo-Gold, sparsam */
  --gold-hell: #F2C94C;
  --cognac: #854A11;           /* Logo-Schriftbraun */
  --linie: rgba(92, 126, 55, 0.55);
  --linie-leise: rgba(92, 126, 55, 0.32);
  /* Linienkonzept (Ramona, 18.10.2026): nur diese drei Stärken, keine Einzelwerte.
     --strich-fein: Rahmen (Felder, leise Knöpfe, Kopfzeile) · --strich: Trennlinien, Akzentlinien, Innenlinie der Knöpfe · --balken: senkrechte Akzentbalken */
  --strich-fein: 1px;
  --strich: 2px;
  --balken: 3px;
  --rundung: 4px;              /* Bilder, Knöpfe, Felder: dieselbe Ecke */
}
/* Lichtlauf von der Mitte aus: Kopfzeichen und Sonnen in den Kästen teilen sich diese Variable */
@property --sr { syntax: '<percentage>'; inherits: false; initial-value: -45%; }
:root {
  --schrift-kopf: "Lora", Georgia, "Times New Roman", serif;
  --schrift-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --schmuck: "Lora", Georgia, serif;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --breit: 76rem;
  --schmal: 54rem;
  --stufe-1: clamp(2.3rem, 3.8vw, 3.3rem);    /* Seitenkopf – Leiter enger gestellt, 19.10.2026 */
  --stufe-2: clamp(1.75rem, 2.5vw, 2.2rem);   /* Abschnitt */
  --stufe-3: clamp(1.3rem, 1.7vw, 1.55rem);   /* Zwischen */
  --stufe-4: clamp(1.1rem, 1.25vw, 1.2rem);   /* Hervorgehoben */
  --stufe-5: 1.0625rem;                       /* Text */
  --stufe-6: 0.8125rem;                       /* Klein */
  --zeile-gross: 1.3;
  --zeile-text: 1.7;
}

@font-face { font-family: "Lora"; src: url("../fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Marck Script"; src: url("../fonts/marck-script-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; background: var(--fuss-tief, #2B1710); }   /* Seitengrund im tiefsten Fußton: Safari am iPhone färbt die Fläche unter der Leiste nach html/body, sonst heller Balken unter dem Fuß (Ramona, 25.10.2026, Baustein Dunkler-Fuss-Safari.md). Inhalt trägt Sand über main. */   /* Seitengrund Sand (20.10.2026): Braun zeigte im Vorschaufenster einen Balken außerhalb der Seite; unten hält overscroll-behavior den Gummizug, die Safari-Leiste färbt theme-color */
body { margin: 0; background: var(--fuss-tief, #2B1710); color: var(--text); font-family: var(--schrift-text); font-size: var(--stufe-5); line-height: var(--zeile-text); }
main, .fuss { position: relative; z-index: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); }
h1, h2, h3 { font-family: var(--schrift-kopf); font-weight: 500; margin: 0; color: var(--text); }
h1 { font-size: var(--stufe-1); }
h2 { font-size: var(--stufe-2); }
h3 { font-size: var(--stufe-3); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

/* Zeilenabstand, zwei Werte (Bausteine/Zeilenabstand.md) */
:is(main, footer) *:not(.schmuck, .schmuck *) {
  line-height: calc(var(--zeile-gross) * 1em + clamp(0px, (24.5px - 1em) * 1000, (var(--zeile-text) - var(--zeile-gross)) * 1em)) !important;
}

main { background: var(--grund); }   /* Seiteninhalt in Sand; Seitengrund, body und Safari-Leiste tragen die Fußfarbe */
.sprung { position: absolute; left: -999px; top: 0; background: var(--gruen); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.sprung:focus { left: 0; }
.innen { width: 100%; max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); position: relative; }
.innen.schmal { max-width: calc(var(--schmal) + 2 * var(--rand)); }
.abschnitt { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position: relative; overflow-x: clip; }
.abschnitt.tief { background: var(--grund-tief); }
.abschnitt.hell { background: var(--grund-hell); }
.abschnitt.dunkel { --block-grund: var(--text); background: var(--block-grund); color: var(--grund); }
/* Salbei-Block (Ramona, 18.10.2026): Ablauf-Schritte und Anfahrt */
.abschnitt.dunkel.salbei { --block-grund: var(--salbei); color: #FAF7F2; }
.abschnitt.dunkel.salbei h2, .abschnitt.dunkel.salbei h3, .abschnitt.dunkel.salbei .dach { color: #FAF7F2; }
.abschnitt.dunkel.salbei .dach::before, .abschnitt.dunkel.salbei .zeile::before { background: var(--gold-hell); }
.abschnitt.dunkel.salbei .schritte p { color: rgba(250, 247, 242, 0.85); }
.seitenkopf.hell { background: var(--grund-hell); }
.abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: var(--grund); }
.abschnitt.dunkel a { color: var(--gold-hell); }

/* Dachzeile mit kurzer Linie davor (Linienkonzept: 2 px volle Leitfarbe) */
.dach { display: flex; align-items: center; gap: 0.8rem; font-size: var(--stufe-6); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 1.2rem; }
.dach::before { content: ""; width: 2.2rem; height: var(--strich); background: var(--gruen); flex: none; transform-origin: left center; }
.dunkel .dach { color: var(--gold-hell); }
.dunkel .dach::before { background: var(--gold-hell); }
.js .dach::before { transform: scaleX(0); transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.1s; }
.js .scharf .dach::before, .js .dach.scharf::before { transform: scaleX(1); }

/* Knöpfe */
/* Knöpfe bewegen sich nicht (Ramona, 16.10.2026: Hüpfen ist Baukasten) – sie wechseln nur die Farbe */
/* Doppellinie (Ramona, 18.10.2026, Variante D): Feld in Cognac mit feiner Innenlinie wie ein Prägestempel, Ecken 2px.
   Beim Überfahren wird die Innenlinie golden. Die Pille davor wirkte nach Baukasten. */
.knopf { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1.05rem 1.8rem; border-radius: var(--rundung); background: var(--cognac); color: #F8EEDF; text-decoration: none; font-weight: 600; font-size: var(--stufe-6); letter-spacing: 0.14em; text-transform: uppercase; border: 0; box-shadow: inset 0 0 0 4px var(--cognac), inset 0 0 0 calc(4px + var(--strich)) rgba(242,201,76,.4); transition: box-shadow 0.5s, background 0.5s, color 0.35s; }
.knopf:hover, .knopf:focus-visible { box-shadow: inset 0 0 0 4px var(--cognac), inset 0 0 0 calc(4px + var(--strich)) var(--gold-hell); color: #fff; }
.knopf.leise { background: transparent; color: var(--cognac); box-shadow: inset 0 0 0 var(--strich-fein) rgba(133,74,17,.45); }
.knopf.leise:hover, .knopf.leise:focus-visible { color: var(--cognac); box-shadow: inset 0 0 0 var(--strich-fein) rgba(133,74,17,.45), inset 0 0 0 4px var(--grund), inset 0 0 0 calc(4px + var(--strich)) var(--gold); }
.knopf.klein { padding: 0.7rem 1.2rem; }
/* Im dunklen Block: helles Feld mit dunkelbrauner Schrift, Innenlinie in Cognac, beim Überfahren Gold */
.abschnitt.dunkel a.knopf, .dunkel .knopf { background: var(--grund); color: var(--text); box-shadow: inset 0 0 0 4px var(--grund), inset 0 0 0 calc(4px + var(--strich)) rgba(133,74,17,.35); }
.abschnitt.dunkel a.knopf:hover, .dunkel .knopf:hover { color: var(--text); box-shadow: inset 0 0 0 4px var(--grund), inset 0 0 0 calc(4px + var(--strich)) var(--gold); }
/* Leiser Knopf im dunklen Block: durchsichtig, helle Schrift und heller Rahmen (vorher Sand auf Sand, Text unsichtbar – Ramona, 18.10.2026) */
.dunkel .knopf.leise, .abschnitt.dunkel a.knopf.leise { background: transparent; color: var(--grund); box-shadow: inset 0 0 0 var(--strich-fein) rgba(244,236,226,.6); }
.dunkel .knopf.leise:hover, .abschnitt.dunkel a.knopf.leise:hover { color: #fff; box-shadow: inset 0 0 0 var(--strich-fein) rgba(244,236,226,.6), inset 0 0 0 4px var(--block-grund), inset 0 0 0 calc(4px + var(--strich)) var(--gold-hell); }

/* Bilder */
.bild { overflow: hidden; border-radius: var(--rundung); position: relative; background: var(--grund-tief); }
.bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Einblenden: Schicht für Schicht ---------- */
.js .fokus { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
.js .fokus.scharf { opacity: 1; transform: none; }
.js .fokus.von-links { transform: translateX(-26px); }
.js .fokus.von-rechts { transform: translateX(26px); }
.js .fokus.von-links.scharf, .js .fokus.von-rechts.scharf { transform: none; }

/* Wachsende Linie unter Überschriften und als Trenner */
.zeile { position: relative; padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
.zeile::before { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: var(--strich); background: var(--gruen); transform-origin: left center; }
.dunkel .zeile::before { background: var(--gold-hell); }
.js .zeile::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) 0.25s; }
.js .scharf .zeile::before, .js .zeile.scharf::before { transform: scaleX(1); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0.75rem max(var(--rand), calc((100% - var(--breit)) / 2 + var(--rand)));
  background: #F4ECE2; border-bottom: var(--strich-fein) solid var(--linie-leise);
  transform: translateZ(0);
}
.kopf-marke { display: flex; align-items: center; gap: 0.8rem; flex: none; text-decoration: none; color: var(--text); font-family: var(--schrift-kopf); font-size: 1.15rem; letter-spacing: 0.04em; }
/* Kopfzeichen dreht sich nicht (Ramona, 16.10.2026). Beim Überfahren wandert Licht durch: Braun → Gold → Salbei. */
.kopf-marke .zeichen { width: 46px; height: 46px; flex: none; display: block;
  /* Licht läuft von der Mitte nach außen (Ramona, 18.10.2026), dieselbe Mechanik wie die Sonnen in den vier Kästen (--sr) */
  background: radial-gradient(circle at 50% 50%, #779883 0%, #779883 var(--sr), #F2C94C calc(var(--sr) + 10%), #D99412 calc(var(--sr) + 18%), #854A11 calc(var(--sr) + 34%), #854A11 100%);
  /* Kopfzeichen = Favicon-Sonne mit 24 Strahlen, klein schärfer als das Logo-Zeichen (Ramona, 25.10.2026) */
  -webkit-mask: url("../logo/zeichen-kopf.svg") center / contain no-repeat; mask: url("../logo/zeichen-kopf.svg") center / contain no-repeat;
  transition: --sr 2.2s cubic-bezier(.3,0,.2,1); }
.kopf-marke:hover .zeichen, .kopf-marke:focus-visible .zeichen { --sr: 70%; }
.kopf-marke small { display: block; font-family: var(--schrift-text); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gruen); font-weight: 700; margin-top: 0.1rem; }
.kopf-marke b { display: block; font-weight: 400; line-height: 1.1; }
.menue-leiste { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.8rem); }
.menue-leiste a, .kopf .knopf, .kopf-marke b { white-space: nowrap; }
.menue { display: none; }
.menue-leiste a:not(.knopf), .menue a:not(.knopf) {
  text-decoration: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); opacity: 0.8; padding: 0.4rem 0; border-bottom: var(--strich) solid transparent; transition: opacity 0.3s, border-color 0.3s, color 0.3s;
}
.menue-leiste a:not(.knopf):hover, .menue-leiste a[aria-current="page"], .menue a:not(.knopf):hover { opacity: 1; color: var(--gruen); border-color: var(--gruen); }
.menue-knopf { display: none; background: none; border: 0; padding: 0.7rem 0.6rem; cursor: pointer; width: 3rem; height: 2.9rem; }
.menue-knopf span { display: block; width: 1.4rem; height: var(--strich); background: var(--text); margin: 0 auto; transition: transform 0.3s, opacity 0.2s; }
.menue-knopf span + span { margin-top: 5px; }
.menue-knopf.offen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-knopf.offen span:nth-child(2) { opacity: 0; }
.menue-knopf.offen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 68rem) { .kopf-marke small { display: none; } }
@media (max-width: 52rem) {
  .kopf { background: #F4ECE2; }
  .menue-knopf { display: block; }
  .menue-leiste { display: none; }
  .menue {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%);
    flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
    background: #F4ECE2; display: none; padding: 1.6rem 1.5rem 2.4rem;
    border-bottom: var(--strich-fein) solid var(--linie); overflow-y: auto; overscroll-behavior: contain;
  }
  .menue.offen { display: flex; animation: menue-auf 0.3s ease; }
  @keyframes menue-auf { from { opacity: 0; } to { opacity: 1; } }
  .menue a:not(.knopf) { padding: 0.8rem 0; font-size: 1rem; }
  .menue .knopf { margin-top: 0.8rem; }
}

/* ---------- Seitenkopf (Hero) ---------- */
.buehne { position: relative; padding: calc(5.5rem + 4vw) 0 clamp(3rem, 6vw, 5rem); overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.buehne .innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.buehne-text { position: relative; z-index: 1; }
.buehne h1 { margin: 0 0 1.4rem; max-width: 14em; }   /* Stufe 1 wie alle Seitenköpfe; passt seit der engeren Leiter in eine Zeile */
.buehne h1 .wort { display: inline-block; }
.js .buehne h1 .wort { opacity: 0; transform: translateY(0.35em); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(0.25s + var(--w, 0) * 90ms); }
.js .buehne h1.scharf .wort { opacity: 1; transform: none; }
.buehne-text p { max-width: 32rem; font-size: var(--stufe-4); color: var(--text); font-weight: 500; }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.buehne-bild { position: relative; }
.buehne-bild .bild { aspect-ratio: 4 / 5; border-radius: var(--rundung); }
.buehne-bild .bild img { transform: scale(1.1); transform-origin: 50% 35%; transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.buehne-bild .bild.faehrt img { transform: scale(1); }
/* Goldrahmen, versetzt: 2 px wie die kurze Linie, in Logo-Gold */
.seitenkopf .bild-rahmen { position: relative; max-width: 28rem; width: 100%; justify-self: end; }
.seitenkopf .bild-rahmen .bild { aspect-ratio: 4 / 5; max-width: none; }
.buehne-bild::after, .bild-rahmen::after { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border: var(--strich) solid var(--gold); border-radius: var(--rundung); z-index: -1; opacity: 0.75; }
.js .buehne-bild::after, .js .bild-rahmen::after { transform: translate(-1rem, -1rem); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) 0.6s, opacity 1.2s ease 0.6s; }
.js .buehne-bild.scharf::after, .js .bild-rahmen.scharf::after { transform: none; opacity: 0.75; }
/* Das Sonnenzeichen aus dem Logo, groß und leise hinter dem Text; dreht sich einmal ein */
.sonne { position: absolute; width: clamp(18rem, 42vw, 36rem); aspect-ratio: 1; left: -8vw; top: 50%; translate: 0 -50%; opacity: 0.09; pointer-events: none; z-index: 0; }
.js .sonne { opacity: 0; rotate: -30deg; transition: opacity 2s ease 0.3s, rotate 2.6s cubic-bezier(.2,.7,.2,1) 0.3s; }
.js .sonne.scharf { opacity: 0.09; rotate: 0deg; }
.buehne-leise { margin-top: 2.6rem; display: flex; gap: 2.2rem; flex-wrap: wrap; font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); }
.buehne-leise span::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--gold); margin-right: 0.6rem; vertical-align: middle; }

/* ---------- Das Logo entwickelt sich (Ramona, 15.10.2026), Aufbau nach Ramonas Canva-Seite 2 (16.10.2026):
   Sonne steht, Kreis und Wellen zeichnen sich, dann Name, Linien, MIND & MOTION, zuletzt wird der Satz geschrieben.
   Einmal, nicht endlos. Die Bühne hat Canva-Maße (1690 x 1450) und wird per scale auf die Breite gebracht. ---------- */
.logo-hero { position: relative; width: 24rem; max-width: 100%; aspect-ratio: 1690 / 1450; margin: 0 0 1.2rem -0.4rem; --groesse-ausnahme: 1; --zeilen-ausnahme: 1; }
.logo-buehne { position: absolute; left: 0; top: 0; width: 1690px; height: 1450px; transform-origin: 0 0; transform: scale(var(--ls, 0.2272)); }
.logo-buehne > * { position: absolute; margin: 0; }
.logo-buehne .l-zeichen { overflow: visible; }
.l-zeichen .l-sonne { transform-origin: 767.4px 305.1px; }
.l-zeichen .l-kreis { transform-origin: 758.7px 278.3px; }
.l-name { font-family: "Lora", Georgia, serif; font-weight: 500; letter-spacing: 0.10em; font-variant: small-caps; white-space: nowrap; line-height: 1.15; color: #854A11; }
.l-name .b { display: inline-block; }
.l-motion { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; font-family: "Montserrat", Arial, sans-serif; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: #779883; line-height: 1.3; white-space: nowrap; }
.l-motion span:first-child { text-align: right; }
.l-motion b { font-weight: 600; padding: 0 0.08em 0 0.4em; }
.l-motion span:last-child { text-align: left; margin-left: 0.42em; }
.l-linie { height: var(--punkt); margin-top: calc(var(--punkt) / -2); }
.l-linie::before, .l-linie::after { content: ""; position: absolute; top: 50%; height: var(--dicke); margin-top: calc(var(--dicke) / -2); background: #D99412; }
.l-linie::before { left: 0; width: calc(var(--px) - var(--punkt) / 2 - var(--luft)); transform-origin: right center; }
.l-linie::after { left: calc(var(--px) + var(--punkt) / 2 + var(--luft)); right: 0; transform-origin: left center; }
.l-linie { background: radial-gradient(circle at var(--px) 50%, #D99412 calc(var(--punkt) / 2 - 0.5px), transparent calc(var(--punkt) / 2)); }
.l-satz { font-family: "Marck Script", cursive; color: #854A11; white-space: nowrap; line-height: 1.35; }
.logo-hero.ohne-uebergang *, .logo-hero.ohne-uebergang *::before, .logo-hero.ohne-uebergang *::after { transition: none !important; }
.js .seite-index .buehne .buehne-text .logo-hero.fokus { opacity: 1; transform: none; transition: none; }
.js .logo-hero .l-sonne { opacity: 0; transform: rotate(-28deg) scale(0.9); transition: opacity 1.2s ease, transform 2s cubic-bezier(.2,.7,.2,1); }
.js .logo-hero .kreis-strich { stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s cubic-bezier(.45,.05,.4,1) 0.9s; }
.js .logo-hero .l-wellen path { opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.3,.6,.2,1), opacity 0.4s ease; transition-delay: calc(2.0s + var(--k, 0) * 0.3s); }
/* Stehen von Anfang an (Ramona, 16.10.2026): Name, obere Linie, innerer Kreis der Sonne */
.js .logo-hero .l-linie.unten { background-size: 0 0; background-repeat: no-repeat; background-position: center; transition: background-size 0.4s ease 3.6s; }
.js .logo-hero .l-linie.unten::before, .js .logo-hero .l-linie.unten::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) 3.7s; }
.js .logo-hero .l-motion { opacity: 0; transition: opacity 0.9s ease 3.5s; }
.js .logo-hero.scharf .l-sonne { opacity: 1; transform: none; }
.js .logo-hero.scharf .kreis-strich { stroke-dashoffset: 0; }
.js .logo-hero.scharf .l-wellen path { opacity: 1; clip-path: inset(0 0 0 0); }
.js .logo-hero.scharf .l-linie.unten { background-size: 100% 100%; }
.js .logo-hero.scharf .l-linie.unten::before, .js .logo-hero.scharf .l-linie.unten::after { transform: none; }
.js .logo-hero.scharf .l-motion { opacity: 1; }

/* ---------- Geschrieben, nicht getippt (Ramona, 16.10.2026): Buchstabe für Buchstabe wird von links
   nach rechts freigelegt, im Tempo einer Hand, mit kleinen Pausen zwischen den Wörtern. Dauer und
   Verzögerung je Buchstabe setzt seite.js nach der Buchstabenbreite. ---------- */
.schreiben .b { display: inline-block; }
.schreiben .wortgruppe { white-space: nowrap; }
/* Ungeschriebene Buchstaben komplett weg (rechter Schnitt 115 %): vorher blieben linke Schwünge als Fitzel sichtbar (Ramona, 21.10.2026) */
.js .schreiben .b { -webkit-clip-path: inset(-40% 115% -40% -15%); clip-path: inset(-40% 115% -40% -15%); }
.js .schreiben.schreibt .b { -webkit-clip-path: inset(-40% -40% -40% -15%); clip-path: inset(-40% -40% -40% -15%); transition: clip-path var(--d, 200ms) cubic-bezier(.45,.05,.55,.95) var(--t, 0ms), -webkit-clip-path var(--d, 200ms) cubic-bezier(.45,.05,.55,.95) var(--t, 0ms); }
/* Auf der Startseite warten Überschrift und Text, bis das Logo steht */
.js .seite-index .buehne h1 .wort { transition-delay: calc(2.2s + var(--w, 0) * 90ms); }
.js .seite-index .buehne .buehne-text .fokus { transition-delay: calc(2.8s + var(--i, 0) * 160ms); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding: calc(6rem + 3vw) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow-x: clip; }
.seitenkopf .innen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* Bild links, Text rechts im Seitenkopf, nur am Rechner (Hypnose, Ramona 25.10.2026); am Handy gilt die Handy-Reihenfolge */
@media (min-width: 60.0625rem) {
  .seitenkopf.bild-links .innen { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .seitenkopf.bild-links .innen > .bild, .seitenkopf.bild-links .innen > .bild-rahmen { order: -1; }
}
.seitenkopf h1 { margin-bottom: 1.2rem; max-width: 14em; }
.seitenkopf .lead { font-size: var(--stufe-4); color: var(--text); font-weight: 500; max-width: 34rem; }   /* erster Textblock kräftig wie auf der Startseite (Ramona, 21.10.2026) */
.seitenkopf .bild { aspect-ratio: 4 / 5; max-width: 28rem; justify-self: end; }
.seitenkopf .bild img { transform: scale(1.08); transform-origin: 50% 35%; transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.seitenkopf .bild.faehrt img { transform: scale(1); }

/* Textabschnitte der Unterseiten */
.text .innen.schmal h2 { margin: 2.6rem 0 1rem; }
.text .innen.schmal h2:first-child { margin-top: 0; }
.themen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.themen li { padding: 0.8rem 0; border-top: var(--strich) solid var(--linie-leise); display: flex; gap: 0.8rem; align-items: baseline; }
.themen li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--gruen); flex: none; translate: 0 -0.1rem; }
.merk { background: var(--grund-hell); border-left: var(--balken) solid var(--gruen); padding: 1.4rem 1.6rem; margin: 2rem 0; font-family: var(--schrift-kopf); font-size: var(--stufe-4); }
.dunkel .merk { background: rgba(244, 236, 226, 0.08); border-color: var(--gold); }
.faq details { border-top: var(--strich) solid var(--linie-leise); padding: 0.2rem 0; }
.faq details:last-child { border-bottom: var(--strich) solid var(--linie-leise); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; font-family: var(--schrift-kopf); font-size: var(--stufe-3); }   /* eine Stufe größer, damit die Frage über dem Antworttext steht (Ramona, 21.10.2026) */
.faq summary::-webkit-details-marker { display: none; }
/* Pfeilspitze ohne Schaft wie an den Kästen (Ramona, 18.10.2026): zu zeigt sie zur Seite, offen nach oben */
.faq summary::after { content: ""; width: 0.55rem; height: 0.55rem; margin-right: 0.35rem; border-top: var(--strich) solid var(--gold); border-right: var(--strich) solid var(--gold); transform: rotate(45deg); transition: transform 0.3s; flex: none; }
.faq details[open] summary::after { transform: rotate(-45deg); }
.faq details p { padding-bottom: 1.2rem; color: var(--leise); }
.faq .schliessen { display: none; background: none; border: 0; color: var(--gruen); font: inherit; font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0 0 1rem; }
.faq details[open] .schliessen { display: inline-flex; align-items: center; gap: 0.6rem; }
/* „Schließen“ mit derselben Pfeilspitze wie die Frage, in Gold nach oben (Ramona, 18.10.2026) */
.faq .schliessen::after { content: ""; width: 0.45rem; height: 0.45rem; border-top: var(--strich) solid var(--gold); border-right: var(--strich) solid var(--gold); transform: translateY(0.15rem) rotate(-45deg); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.zwei .bild { aspect-ratio: 4 / 5; }
.zwei + .zwei { margin-top: clamp(3rem, 7vw, 6rem); }
.zwei:has(.faq) { align-items: start; }
.zwei.gedreht .bild { order: 2; }
.ruf { text-align: center; max-width: var(--schmal); margin: 0 auto; }
.ruf h2 { margin-bottom: 1rem; }
.ruf .knopf { margin-top: 1.4rem; }

/* Formular */
.formular { display: grid; gap: 1rem; }
.formular label { display: grid; gap: 0.35rem; font-size: var(--stufe-6); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--gruen); }
.formular input, .formular textarea, .formular select { font: inherit; font-size: var(--stufe-5); color: var(--text); background: var(--grund-hell); border: var(--strich-fein) solid var(--linie); border-radius: var(--rundung); padding: 0.8rem 1rem; width: 100%; letter-spacing: 0; text-transform: none; font-weight: 400; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: var(--strich) solid var(--gruen); outline-offset: 1px; }
.formular .reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.formular .einwilligung { display: flex; gap: 0.7rem; align-items: start; font-size: var(--stufe-6); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--leise); }
.formular .einwilligung input { width: auto; margin-top: 0.25rem; flex: none; }
.formular .einwilligung span { flex: 1; }
.formular button { justify-self: start; cursor: pointer; }

/* ---------- Haltung ---------- */
.haltung .innen { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.haltung h2 { margin-bottom: 1.2rem; }
.haltung .gross { font-family: var(--schrift-kopf); font-size: var(--stufe-3); color: var(--text); margin-bottom: 1.4rem; }
.haltung .frage { border-left: var(--balken) solid var(--gruen); padding: 0.4rem 0 0.4rem 1.2rem; font-family: var(--schrift-kopf); font-size: var(--stufe-4); margin-top: 1.8rem; }
.haltung .bild { aspect-ratio: 3 / 4; }

/* Breites Bildband: Zoomfahrt beim Erscheinen */
.band { position: relative; --bh: clamp(18rem, 48vw, 34rem); height: var(--bh); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.08); transition: transform 8s cubic-bezier(.2,.6,.2,1); }
.band.faehrt img { transform: scale(1); }
.band .satz { --tempo: 1.35; position: absolute; bottom: clamp(1.5rem, 4vw, 3rem);
  /* Mitte zwischen Angelas Schultern: bei 46,5 % der Bildbreite (Ramona, 16.10.2026). Das Foto füllt das Band
     (object-fit: cover, Mitte 50 %). Ist das Band schmaler als 3:2, wird das Bild seitlich angeschnitten und ist
     1,5 x Bandhöhe breit – die Achse rückt dann entsprechend. */
  left: calc(50% - 0.035 * max(100%, 1.5 * var(--bh)));
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--rand)); text-align: center;
  /* Farbe aus dem Logo: Salbei wie MIND & MOTION, ohne Schatten (Ramona, 16.10.2026) */
  color: #779883; font-family: "Marck Script", cursive; font-size: var(--stufe-1);
  /* Weißer, durchscheinender Schein hinter der Schrift, damit das Salbei vor Bluse und Schilf heraustritt
     (Ramona, 16.10.2026). Liegt auf dem ganzen Satz, folgt also der Schrift, während sie geschrieben wird. */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.55)); }

/* ---------- Vier Wege ---------- */
.wege-kopf { max-width: var(--schmal); margin-bottom: 3rem; }
.wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.weg { position: relative; background: var(--grund-hell); border-top: var(--strich) solid var(--gruen); padding: 2rem 2rem 2.2rem; display: flex; flex-direction: column; gap: 0.8rem; transition: box-shadow 0.4s; }
.weg:hover { box-shadow: 0 24px 40px -28px rgba(68, 36, 23, 0.45); }
/* Lichtlauf (Ramona, 16.10.2026, wie auf ihrer Seite): Ein goldener Strahl läuft von der linken oberen Ecke
   links hinunter, unten entlang und rechts hinauf bis zur rechten oberen Ecke, dann springt er zum nächsten Kasten.
   Danach löst sich das Gold auf, die grüne Linie oben bleibt. */
.weg .licht, .technik .licht { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.weg .licht path, .technik .licht path { fill: none; stroke: #D99412; stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 1.5px rgba(242, 201, 76, 0.9)); }
.wege.laeuft .weg .licht path, .techniken.laeuft .technik .licht path { animation: lichtlauf 1.6s cubic-bezier(.45,.05,.55,.95) calc(var(--n, 0) * 1.6s) forwards, lichtweg 1.1s ease calc(var(--n, 0) * 1.6s + 1.7s) forwards; }
@keyframes lichtlauf { 0% { stroke-dashoffset: 100; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lichtweg { from { opacity: 1; } to { opacity: 0; } }
.weg .nummer { font-family: var(--schmuck); font-size: var(--stufe-2); color: var(--gold); line-height: 1; }
/* Zahlen: erst ganz hell, werden dunkler, während das Licht um ihren Kasten läuft (Ramona, 16.10.2026) */
.js .weg .nummer { color: #EADCC6; }
.wege.laeuft .weg .nummer { animation: zahl-dunkel 1.6s ease calc(var(--n, 0) * 1.6s) forwards; }
@keyframes zahl-dunkel { to { color: #B8760E; } }
.weg h3 { font-size: var(--stufe-3); }
.weg p { color: var(--leise); flex: 1; }
/* Statt Mini-Pfeil: feine Goldlinie hinter dem Text, wird beim Überfahren länger (Ramona, 16.10.2026) */
.weg a { display: inline-flex; align-items: center; gap: 0.8rem; font-weight: 700; text-decoration: none; font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen); }
/* Kleine Pfeilspitze ohne Schaft (Ramona, 18.10.2026): zeigt, dass es hier weitergeht, rückt beim Überfahren ein Stück vor */
.weg a::after { content: ""; width: 0.42rem; height: 0.42rem; margin-left: -0.1rem; border-top: var(--strich) solid var(--gold); border-right: var(--strich) solid var(--gold); transform: rotate(45deg); transition: transform 0.45s cubic-bezier(.2,.7,.2,1); }
.weg:hover a::after, .weg a:focus-visible::after { transform: translateX(0.35rem) rotate(45deg); }
/* Sonne in der Ecke: steht still; beim Überfahren wandert die Farbe von der Mitte aus nach außen –
   Braun → Gold → Salbei (Ramona, 16.10.2026) */
.weg .ecke { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.weg .strahlen { position: absolute; right: -3.2rem; top: -3.2rem; width: 10.5rem; height: 10.5rem; opacity: 0.16;
  background: radial-gradient(circle at 50% 50%, #779883 0%, #779883 var(--sr), #D99412 calc(var(--sr) + 16%), #854A11 calc(var(--sr) + 36%), #854A11 100%);
  -webkit-mask: url("../logo/zeichen-braun.svg") center / contain no-repeat; mask: url("../logo/zeichen-braun.svg") center / contain no-repeat;
  transition: --sr 2.4s cubic-bezier(.3,0,.2,1), opacity 0.8s ease; }
.weg:hover .strahlen { --sr: 75%; opacity: 0.5; }
/* Sonnenstrahlen im Hintergrund jeder Karte, beim Überfahren drehen sie sich */
.weg .wer { font-size: var(--stufe-6); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }

/* ---------- Für wen ---------- */
.fuerwen .innen > h2 { max-width: 20em; margin-bottom: 0.6rem; }
.fuerwen .innen > p.gross { font-family: var(--schrift-kopf); font-size: var(--stufe-3); margin-bottom: 3rem; }
.gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--strich) solid var(--linie-leise); }
.gruppe { padding: 2.2rem 2rem 2.2rem 0; border-bottom: var(--strich) solid var(--linie-leise); }
.gruppe + .gruppe { padding-left: 2rem; border-left: var(--strich) solid var(--linie-leise); }
.gruppe h3 { font-size: var(--stufe-4); font-family: var(--schrift-text); font-weight: 700; margin-bottom: 0.7rem; }
.gruppe p { color: var(--leise); }
.gruppe .fragen { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.gruppe .fragen li { font-family: var(--schrift-kopf); font-style: italic; padding: 0.35rem 0; border-top: var(--strich) solid var(--linie-leise); }

/* ---------- Angela ---------- */
.angela .innen { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.angela .bild { aspect-ratio: 4 / 5; }
.angela .zitat { font-family: var(--schrift-kopf); font-size: var(--stufe-3); margin: 1.6rem 0; padding-left: 1.2rem; border-left: var(--balken) solid var(--gold); }
.belege { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: var(--strich) solid var(--linie-leise); list-style: none; }
.belege li { font-size: var(--stufe-6); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.belege strong { display: block; font-family: var(--schrift-kopf); font-size: var(--stufe-2); color: var(--text); letter-spacing: 0; text-transform: none; }
.belege strong.zaehlt { font-variant-numeric: tabular-nums; }

/* Bianca */
.bianca { margin-top: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 2rem; align-items: center; padding-top: 2.5rem; border-top: var(--strich) solid var(--linie-leise); }
.bianca .bild { aspect-ratio: 4 / 5; }

/* ---------- Ablauf ---------- */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.schritte li { position: relative; padding-top: 1.2rem; }
.schritte li::after { content: ""; position: absolute; left: 0; top: 0; height: var(--balken); width: 100%; background: var(--gold); transform-origin: left center; }
/* Reihenfolge je Block (Ramona, 18.10.2026): Linie wächst, Zahl erscheint, Text kommt von rechts; Block 2 und 3 folgen */
.js .schritte li.fokus { opacity: 1; transform: none; transition: none; }
.js .schritte li::after { transform: scaleX(0); transition: transform 0.9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 1.3s); }
.js .schritte li::before { opacity: 0; transition: opacity 0.6s ease calc(var(--i, 0) * 1.3s + 0.5s); }
.js .schritte li h3, .js .schritte li p { opacity: 0; transform: translateX(2.2rem); transition: opacity 0.7s ease calc(var(--i, 0) * 1.3s + 0.8s), transform 0.9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 1.3s + 0.8s); }
.js .schritte li.scharf::after { transform: none; }
.js .schritte li.scharf::before { opacity: 1; }
.js .schritte li.scharf h3, .js .schritte li.scharf p { opacity: 1; transform: none; }
/* Zurücksetzen ohne Rückwärtslauf (für Selbsttest und Neustart) */
.schritte.ohne-uebergang li::after, .schritte.ohne-uebergang li::before, .schritte.ohne-uebergang li h3, .schritte.ohne-uebergang li p { transition: none !important; }
.schritte li::before { counter-increment: schritt; content: counter(schritt, decimal-leading-zero); font-family: var(--schmuck); font-size: var(--stufe-1); color: var(--gold-hell); line-height: 1; display: block; margin-bottom: 0.6rem; }
.schritte h3 { font-size: var(--stufe-4); font-family: var(--schrift-text); font-weight: 700; margin-bottom: 0.5rem; color: var(--grund); }
.schritte p { color: rgba(244, 236, 226, 0.78); }

/* ---------- Praxis-Bilder ---------- */
.raum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.raum .bild { aspect-ratio: 4 / 5; }
.raum .bild:nth-child(2) { translate: 0 2.5rem; }
.raum .bild img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.raum .bild:hover img { transform: scale(1.04); }

/* ---------- Kontakt ---------- */
.kontakt .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.kontakt address { font-style: normal; font-size: var(--stufe-4); font-family: var(--schrift-kopf); }
.kontakt .wege-kontakt { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.kontakt .wege-kontakt a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: var(--strich-fein) solid var(--linie); border-radius: var(--rundung); text-decoration: none; color: var(--text); transition: background 0.3s, border-color 0.3s; }
.kontakt .wege-kontakt a:hover { background: rgba(250, 247, 242, 0.45); border-color: var(--gruen); }   /* nur leicht heller, kein hartes Weiß */
.kontakt .wege-kontakt small { font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen); }
.hinweis { font-size: var(--stufe-6); color: var(--leise); margin-top: 2rem; padding-top: 1.2rem; border-top: var(--strich) solid var(--linie-leise); }

/* ---------- Fuß und Kontakt-Block: zwei Farbvarianten (Ramona, 16.10.2026) ----------
   Standard: Kontakt-Block in Salbei (Farbe von MIND & MOTION), Fuß dunkelbraun mit hellem Logo.
   Umschalter unten links: Kontakt dunkelbraun, Fuß sandfarben mit braunem Logo. */
:root { --fuss-grund: #442417;
  --fuss-tief: #2B1710;        /* unterster Fußton, sichtbar dunkler, aber kein Schwarzbraun; auch Safari-Leiste */ --fuss-schrift: #E6D6C3; }
.abschnitt.dunkel:has(> .ruf) { --block-grund: #779883; background: var(--block-grund); color: #FAF7F2; }
.abschnitt.dunkel:has(> .ruf) h2 { color: #FAF7F2; }
.abschnitt.dunkel:has(> .ruf) .dach { color: #FAF7F2; }
.abschnitt.dunkel:has(> .ruf) .dach::before { background: #F2C94C; }
/* Fuß dunkelt nach unten leicht ab (Ramona, 20.10.2026): Logo noch auf dem Braun, Links und Zeile im tieferen Ton */
.fuss { background: linear-gradient(var(--fuss-grund) 0%, var(--fuss-grund) 62%, var(--fuss-tief, #2B1710) 100%); color: var(--fuss-schrift); padding: 3rem 0 2.2rem; }
.fuss .innen { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }   /* Logo mittig, darunter die Links, dann die Zeile (Ramona, 18.10.2026) */
.fuss-logo { width: clamp(11rem, 18vw, 15rem); color: var(--fuss-schrift); }
.logo-fuss { position: relative; width: 100%; aspect-ratio: 1690 / 1450; --groesse-ausnahme: 1; --zeilen-ausnahme: 1; }
.logo-fuss .l-name, .logo-fuss .l-satz, .logo-fuss .l-motion { color: currentColor; }
.logo-fuss .l-linie::before, .logo-fuss .l-linie::after { background: currentColor; }
.logo-fuss .l-linie { background: radial-gradient(circle at var(--px) 50%, currentColor calc(var(--punkt) / 2 - 0.5px), transparent calc(var(--punkt) / 2)); }
.fuss-links { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.fuss-links a { text-decoration: none; color: var(--fuss-schrift); font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.fuss-links a:hover { opacity: 1; }
.fuss-klein { font-size: var(--stufe-6); color: var(--fuss-schrift); opacity: 0.8; text-align: center; margin: 0.6rem 0 0; }
/* Hinweis auf Ramona direkt unter der ©-Zeile, Link ohne Unterstrich (Ramona, 25.10.2026) */
.fuss-gestaltung { margin-top: calc(0.4rem - 1.8rem); }
.fuss-gestaltung a { color: inherit; text-decoration: none; transition: color 0.3s; }
.fuss-gestaltung a:hover { color: var(--gold-hell); }

/* Kleiner Hinweis zum „Du“ (Ramona, 16.10.2026) */
.du-hinweis { font-size: var(--stufe-6); font-style: italic; opacity: 0.85; max-width: 34rem; margin: 1.6rem auto 0; }
.text .du-hinweis { margin: 0.4rem 0 0; }

/* Arbeitsmarkierung: offene Stellen, vor dem Livegang auf 0 */
.slot { background: rgba(242, 201, 76, 0.45); padding: 0 0.25em; border-radius: 3px; }

/* ---------- Handy und schmale Bildschirme ---------- */
@media (max-width: 60rem) {
  .buehne .innen, .haltung .innen, .angela .innen, .kontakt .innen { grid-template-columns: 1fr; }
  .buehne { min-height: 0; padding-top: 6.5rem; }
  .buehne-bild { order: -1; max-width: 26rem; width: calc(100% - 1rem); margin-bottom: 1rem; }
  .buehne-bild::after, .bild-rahmen::after { inset: 1rem -1rem -1rem 1rem; }
  .seitenkopf .bild-rahmen { width: calc(100% - 1rem); max-width: 24rem; margin-bottom: 1rem; justify-self: start; }
  .sonne { left: auto; right: -30vw; top: 20%; }
  .wege, .gruppen, .schritte, .raum, .seitenkopf .innen, .zwei, .themen, .formular .reihe { grid-template-columns: 1fr; }
  /* Handy-Reihenfolge (Ramona, 20.10.2026): Dachzeile und Überschrift, dann das Bild, dann Text und Knopf.
     Der Textbehälter löst sich auf (display: contents), seine Kinder werden selbst zu Rasterzellen. */
  .seitenkopf .innen > div:not(.bild, .bild-rahmen), .zwei.kopf-oben > div:not(.bild), .angela .innen > div:not(.bild) { display: contents; }
  .seitenkopf .innen > *, .zwei.kopf-oben > *, .angela .innen > *, .seitenkopf .innen > div > *, .zwei.kopf-oben > div > *, .angela .innen > div > * { order: 4; }
  .seitenkopf .innen > div > .dach, .zwei.kopf-oben > div > .dach, .angela .innen > div > .dach { order: 1; }
  .seitenkopf .innen > div > h1, .zwei.kopf-oben > div > h2, .angela .innen > div > h2, .zwei.kopf-oben > div > .vor-bild { order: 2; }
  .seitenkopf .bild, .seitenkopf .bild-rahmen, .zwei.kopf-oben .bild, .angela .bild { order: 3; margin: 0.4rem 0 1.2rem; }
  .js .fokus { transform: translateY(10px); transition-duration: 1.2s; }
  /* Dachzeile → Überschrift am Handy so eng wie am Rechner (19 px): Zeilenabstand des Rasters ausgleichen (Ramona, 25.10.2026) */
  .seitenkopf .innen, .zwei.kopf-oben, .angela .innen { row-gap: 2rem; }
  .seitenkopf .innen > div > .dach, .zwei.kopf-oben > div > .dach, .angela .innen > div > .dach { margin-bottom: calc(1.2rem - 2rem); }
  .seitenkopf .bild { justify-self: start; max-width: 24rem; }
  .zwei .bild { max-width: 24rem; }
  .zwei.gedreht:not(.kopf-oben) .bild { order: 0; }
  .logo-hero { width: 20rem; margin-left: auto; margin-right: auto; }   /* mittig am Handy (Ramona, 18.10.2026) */
  .gruppe + .gruppe { padding-left: 0; border-left: 0; }
  .raum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raum .bild:nth-child(2) { translate: 0; }
  .fuss .innen { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .fuss-links { justify-content: center; }
  .angela .bild { max-width: 26rem; }
  .haltung .bild { max-width: 26rem; }
}
@media (max-width: 40rem) {
  .band .satz { font-size: var(--stufe-2); }
  .bianca { grid-template-columns: 1fr; }
  .bianca .bild { max-width: 11rem; }
  .raum { grid-template-columns: 1fr; }
  .weg { padding: 1.6rem 1.4rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fokus, .js .buehne h1 .wort, .js .sonne, .js .buehne-bild::after, .js .schritte li::after, .js .schritte li::before, .js .schritte li h3, .js .schritte li p { opacity: 1; transform: none; rotate: 0deg; transition: none; }
  .js .logo-hero .l-sonne, .js .logo-hero .l-motion, .js .logo-hero .l-wellen path { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .logo-hero .kreis-strich { stroke-dashoffset: 0; transition: none; }
  .js .logo-hero .l-linie { background-size: 100% 100%; } .js .logo-hero .l-linie::before, .js .logo-hero .l-linie::after { transform: none; transition: none; }
  .js .schreiben .b { -webkit-clip-path: none; clip-path: none; transition: none; }
  .js .weg .nummer { color: #B8760E; animation: none; }
  .js .sonne { opacity: 0.09; }
  .js .buehne-bild::after { opacity: 0.75; }
  .js .zeile::before, .js .dach::before { transform: none; transition: none; }
  .buehne-bild .bild img, .band img { transform: none; transition: none; }
}

/* Zwischenüberschriften in schmalen Textabschnitten, z. B. Preisgruppen (18.10.2026) */
.abschnitt.text .innen.schmal > h3 { margin: 2.4rem 0 0.6rem; }
.zwei > div > h3 { margin-bottom: 0.6rem; }   /* Zwischenüberschrift klebt sonst am Text (Bianca „Zwei Menschen“, Ramona 25.10.2026) */

/* Keine zwei Striche übereinander (Ramona, 18.10.2026): folgt auf eine Überschrift direkt eine Liste mit Trennlinien,
   entfällt die grüne Akzentlinie der Überschrift. Die Liste bleibt mit allen Linien vollständig gegliedert. */
.zeile:has(+ .themen)::before, .zeile:has(+ .faq)::before, .zeile:has(+ .gruppen)::before, .dach + .zeile::before { display: none; }
.zeile:has(+ .themen), .zeile:has(+ .faq), .zeile:has(+ .gruppen), .dach + .zeile { padding-bottom: 0; }

/* Zurück zur Startseite auf Unterseiten (Ramona, 18.10.2026, wie auf ihrer eigenen Seite): Lasche am linken Rand,
   liegt unter der Kopfzeile (z-index 40), deckt nicht die ganze Fläche. Am Handy unten links als Zeile. */
.zurueck { display: none; }
.zurueck.da { display: flex; }
.zurueck { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 30; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1rem 0.6rem; background: var(--grund-hell); box-shadow: inset 0 0 0 var(--strich-fein) rgba(133,74,17,.45); border-radius: 0 var(--rundung) var(--rundung) 0; color: var(--cognac); text-decoration: none; font-family: var(--schrift-text); font-size: var(--stufe-6); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: box-shadow 0.4s, color 0.3s; }
.zurueck span { writing-mode: vertical-rl; transform: rotate(180deg); }
.zurueck i { width: 0.45rem; height: 0.45rem; border-left: var(--strich) solid var(--gold); border-bottom: var(--strich) solid var(--gold); transform: rotate(45deg); margin-left: 0.15rem; transition: transform 0.3s; }
.zurueck:hover, .zurueck:focus-visible { color: var(--text); box-shadow: inset 0 0 0 var(--strich-fein) rgba(133,74,17,.45), inset 0 0 0 4px var(--grund-hell), inset 0 0 0 calc(4px + var(--strich)) var(--gold); }
.zurueck:hover i { transform: translateX(-0.2rem) rotate(45deg); }
@media (max-width: 52rem) {
  .zurueck { top: auto; bottom: 12px; transform: none; flex-direction: row; gap: 0.6rem; padding: 0.6rem 0.9rem 0.6rem 0.7rem; }
  .zurueck span { writing-mode: horizontal-tb; transform: none; }
}

/* Handschrift-Sätze (Ramona, 18.10.2026): Marck Script wie im Logo, für die Sätze, die hängen bleiben sollen */
/* Zeilenabstand kommt aus der allgemeinen Regel (groß 1,3 / Text 1,7), deshalb hier keiner und kein .schmuck */
.hand { --tempo: 0.6; font-family: "Marck Script", cursive; font-size: var(--stufe-2); color: var(--gruen);   /* Versuch Grün statt Cognac (Ramona, 20.10.2026) */ margin: 1.8rem 0; max-width: 30em; }
.hand.gross { --tempo: 0.85; font-size: var(--stufe-1); margin: 2.2rem 0; }
.haltung .frage.hand { font-family: "Marck Script", cursive; font-size: var(--stufe-3); margin-top: 1.8rem; border-left: 0; padding-left: 0; max-width: none; }   /* ohne Balken und Einzug, damit weniger umbricht (Ramona, 22.10.2026) */   /* ganzer Absatz in Handschrift (Ramona, 18.10.2026) */
.dunkel .hand { color: var(--gold-hell); }
/* Preise in drei Kästen (Ramona, 18.10.2026): je Anbieterin ein Kasten, Posten streng untereinander, Name auf eigener Zeile */
.preiskasten { background: var(--grund-hell); box-shadow: inset 0 0 0 var(--strich-fein) rgba(133,74,17,.35); border-radius: var(--rundung); padding: 1.8rem 2rem 1.4rem; margin-top: 2rem; }
.preiskasten h3 { font-size: var(--stufe-3); margin-bottom: 0.4rem; }
.preiskasten ul { list-style: none; margin: 0; padding: 0; }
.preiskasten li { padding: 1rem 0; border-top: var(--strich) solid var(--linie-leise); }
.preiskasten li:first-child { border-top: 0; }
.preiskasten li span { display: block; }
.preiskasten li > span > strong:first-child { font-family: var(--schrift-kopf); font-weight: 500; font-size: var(--stufe-4); }
.preiskasten .klein { font-size: var(--stufe-6); color: var(--leise); margin: 0.8rem 0 0; }
@media (max-width: 40rem) { .preiskasten { padding: 1.3rem 1.2rem 1rem; } }

/* Massagen als Aufklapper neben dem Bild (Ramona, 19.10.2026) */
.massagen { margin-top: 1.4rem; }
.massagen + p { margin-top: 1.8rem; }   /* Nachsatz mit Luft zur letzten Zeile (Ramona, 20.10.2026) */
.massagen summary { font-size: var(--stufe-4); padding: 0.8rem 0; }

/* Techniken auf der Hypnose-Seite (Ramona, 20.10.2026): Kästen wie auf der Startseite, klappen nach unten auf */
.techniken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2rem; align-items: start; }   /* offener Kasten zieht den Nachbarn nicht mit */
.technik { position: relative; background: var(--grund-hell); border-top: var(--strich) solid var(--gruen); padding: 1.4rem 1.5rem 1.3rem; transition: background 0.5s; }
.techniken.eins-offen .technik:not([open]) { background: transparent; }   /* Versuch: ist einer offen, nur noch Schrift bei den anderen */
.technik summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: center; }
.technik summary::-webkit-details-marker { display: none; }
.technik .titel { font-family: var(--schrift-kopf); font-size: var(--stufe-3); line-height: var(--zeile-gross); font-weight: 500; color: var(--text); }   /* Titel in Braun, die Versalzeile in Grün (Ramona, 21.10.2026) */
.technik .kurz { grid-column: 1; font-size: var(--stufe-6); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gruen); }
.technik summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 0.55rem; height: 0.55rem; border-top: var(--strich) solid var(--gold); border-right: var(--strich) solid var(--gold); transform: rotate(135deg); transition: transform 0.3s; }
.technik[open] summary::after { transform: rotate(-45deg); }
.technik p { margin: 1rem 0 0; color: var(--leise); }
@media (max-width: 40rem) { .techniken { grid-template-columns: 1fr; } }

/* Hinweis-Posten in der Preisliste (Pakete sind wandelbar): abgesetzt vom Preis, Titel in Grün, Text leise */
.preiskasten li.hinweis-posten > span > strong:first-child { color: var(--gruen); font-family: var(--schrift-text); font-weight: 600; font-size: var(--stufe-6); letter-spacing: 0.1em; text-transform: uppercase; }
.preiskasten li.hinweis-posten { color: var(--leise); font-size: var(--stufe-6); }

/* Hervorgehobener Kasten in Salbei (Hypnose mit Kindern, 21.10.2026): Dachzeile und Knopf in Gold, Titel in Braun, Text in Weiß */
.kasten.salbei { margin: 2.4rem 0 0.6rem; padding: 1.8rem 2rem 1.9rem; background: var(--salbei); color: #fff; border-radius: var(--rundung); }
.kasten.salbei .dach { color: var(--gold-hell); }
.kasten.salbei .dach::before { background: var(--gold-hell); }
.kasten.salbei h3 { margin: 0.4rem 0 0.7rem; color: var(--text); }
.kasten.salbei p { margin: 0; color: #fff; }
.kasten.salbei a { color: var(--gold-hell); }
.kasten.salbei .knopfzeile { margin: 1.3rem 0 0; }
.kasten.salbei .knopf.leise { background: var(--gold-hell); color: var(--text); box-shadow: inset 0 0 0 4px var(--gold-hell), inset 0 0 0 calc(4px + var(--strich)) rgba(133,74,17,.35); }
.kasten.salbei .knopf.leise:hover { color: var(--text); box-shadow: inset 0 0 0 4px var(--gold-hell), inset 0 0 0 calc(4px + var(--strich)) var(--cognac); }
@media (max-width: 40rem) { .kasten.salbei { padding: 1.3rem 1.2rem 1.4rem; } }

/* Anfahrt in drei Spalten (Kontakt, 21.10.2026) */
.anfahrt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 1.4rem; }
.anfahrt h3 { font-size: var(--stufe-4); font-family: var(--schrift-text); font-weight: 700; margin-bottom: 0.4rem; color: var(--grund); }
.anfahrt p { margin: 0; color: rgba(250, 247, 242, 0.88); }
@media (max-width: 60rem) { .anfahrt { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Rechtstexte (Impressum, Datenschutz): ruhige Zwischentitel, keine Abschnittsgröße */
.rechtstext h2 { font-size: var(--stufe-4); font-family: var(--schrift-text); font-weight: 700; margin: 2rem 0 0.5rem; }
.rechtstext p { margin: 0 0 0.8rem; }
.rechtstext .klein { font-size: var(--stufe-6); color: var(--leise); margin-top: 2rem; }

/* Kontaktformular: Rückmeldung nach dem Absenden und unsichtbare Falle für Programme (25.10.2026) */
.formular-antwort { font-size: var(--stufe-5); line-height: var(--zeile-text); padding: 1rem 1.2rem; margin: 0 0 1.4rem; border-left: var(--balken) solid var(--salbei); background: var(--grund-hell); }
.formular-antwort.fehler { border-left-color: var(--cognac); }
.formular .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Zeilenumbruch nur am Handy (Reiki-Überschrift, Ramona 25.10.2026) */
br.nur-handy { display: none; }
@media (max-width: 60rem) { br.nur-handy { display: inline; } }
/* Handschrift auf der Startseite am Handy so groß wie auf der Hypnose-Seite (Ramona, 25.10.2026).
   Steht am Ende, weil die Grundregel für .haltung .frage.hand weiter unten als der Handy-Block liegt. */
@media (max-width: 60rem) { .haltung .frage.hand { font-size: var(--stufe-2); } }
/* Überschriften ohne einzelnes Wort in der letzten Zeile (Ramona, 26.10.2026); Chrome und Safari 26 verteilen die Wörter selbst */
h1 { text-wrap: pretty; }