/* ============================================================
   Moor & Beere — das gemeinsame Fundament
   Farben, Schriften, Groessen, Knoepfe, Kopfleiste, Fuss, Formularfelder.

   Diese Datei ist die einzige Wahrheit. Jede Seite von energieundseele.de
   laedt sie; wer hier eine Farbe aendert, aendert sie ueberall.
   Werte aus GL-003 (Designsystem Moor & Beere).

   Herausgeloest aus der Startseite am 14.08.2026.
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:300 700;src:url(fonts/hanken-grotesk.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:300 700;src:url(fonts/fraunces.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:300 700;src:url(fonts/fraunces-italic.woff2) format('woff2');}

:root{
  /* --- Die elf Werte aus GL-003 A1 --- */
  --mb-dark-bg:        #241820;
  --mb-dark-card:      #33232E;
  --mb-dark-deep:      #1A1116;
  --mb-dark-text:      #F2EAE3;
  --mb-dark-text-2:    #C29AA0;
  --mb-dark-accent:    #6FA5A3;
  --mb-dark-surface:   #6E3B4E;

  --mb-light-bg:       #F2EAE3;
  --mb-light-card:     #F9F5F0;
  --mb-light-rule:     #E5D9CF;
  --mb-light-text:     #2E1E28;
  --mb-light-head:     #6E3B4E;
  --mb-light-accent:   #3A5A5C;
  --mb-light-decor:    #C29AA0;

  --mb-font-voice:     'Fraunces', Georgia, serif;
  --mb-font-function:  'Hanken Grotesk', system-ui, sans-serif;
  --mb-font-mark:      'Fraunces', Georgia, serif;

  --mb-radius-card:    24px;
  --mb-radius-field:   16px;
  --mb-radius-band:    36px;
  --mb-radius-button:  999px;

  --mb-ease:           cubic-bezier(.22, .61, .36, 1);
  --mb-breath:         5.5s;
}

/* ---- Modus Dunkel — Wirkung (Standard) ------------------ */
html, html[data-modus="dunkel"]{
  --bg:var(--mb-dark-bg);
  --card:var(--mb-dark-card);
  --tiefe:var(--mb-dark-deep);
  --text:var(--mb-dark-text);
  --text-2:var(--mb-dark-text-2);
  --head:var(--mb-dark-text);
  --accent:var(--mb-dark-accent);
  --flaeche:var(--mb-dark-surface);
  --rule:rgba(242,234,227,.13);
  --auf-akzent:var(--mb-dark-bg);
  --feld:rgba(242,234,227,.05);
  color-scheme:dark;
}

/* ---- Modus Hell — Lesen --------------------------------- */
html[data-modus="hell"]{
  --bg:var(--mb-light-bg);
  --card:var(--mb-light-card);
  --tiefe:var(--mb-light-card);
  --text:var(--mb-light-text);
  --text-2:var(--mb-light-text);
  --head:var(--mb-light-head);
  --accent:var(--mb-light-accent);
  --flaeche:var(--mb-light-decor);
  --rule:var(--mb-light-rule);
  --auf-akzent:var(--mb-light-bg);
  --feld:var(--mb-light-bg);
  color-scheme:light;
}

/* Der Moduswechsel selbst — 0,7 s, kein Blenden (GL-003 A4) */
html{ transition:background-color .7s var(--mb-ease); background:var(--bg); }
body, .feld input, .tuer, .ablauf-spalte, .pfad-karte, .bg-rahmen, .fuss, .bruecke-karte, .handwerk,
.zentrum-feld, .rechner-karte, .kontakt-karte, .kachel, .wahl{
  transition:background-color .7s var(--mb-ease), color .7s var(--mb-ease),
             border-color .7s var(--mb-ease);
}

/* ---- Grundlagen ----------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mb-font-function); font-weight:400;
  font-size:17px; line-height:28px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---- Die sechs Größen (GL-003 A2) ----------------------- */
.display{ font-family:var(--mb-font-voice); font-weight:400; font-size:40px; line-height:44px; margin:0; letter-spacing:-.01em; }
.titel  { font-family:var(--mb-font-voice); font-weight:400; font-size:28px; line-height:34px; margin:0; }
.zitat  { font-family:var(--mb-font-voice); font-weight:400; font-style:italic; font-size:22px; line-height:34px; margin:0; }
.fliess { font-size:17px; line-height:28px; }
.klein  { font-size:14.5px; line-height:22px; }
.label  { font-family:var(--mb-font-function); font-weight:500; font-size:11px;
          letter-spacing:.22em; text-transform:uppercase; }
@media (max-width:520px){ .display{ font-size:34px; line-height:39px; } }
/* Sicherheitsnetz für lange zusammengesetzte Wörter: Sie passen auf schmalen
   Geräten in keine Zeile und schöben die Überschrift sonst über den Rand.
   Silbentrennung statt Überlauf; die Seite ist als lang="de" ausgezeichnet.
   Greift nur, wenn es nötig ist — bei der jetzigen Überschrift nie. */
.display{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }

h1,h2,h3,h4{ color:var(--head); }

/* ---- Raster --------------------------------------------- */
.bahn{ width:min(1080px, 100% - 44px); margin-inline:auto; position:relative; z-index:1; }
.bahn-schmal{ width:min(660px, 100% - 44px); margin-inline:auto; position:relative; z-index:1; }
section{ position:relative; }
[id]{ scroll-margin-top:96px; }
.luft   { padding-block:104px; }
.luft-s { padding-block:64px; }
@media (max-width:640px){ .luft{ padding-block:76px; } }

/* Feine Trennlinie zwischen den Abschnitten statt Farbbruch */
.saum{ height:1px; background:var(--rule); width:min(1080px, 100% - 44px); margin-inline:auto; }

/* ---- Kopfleiste ----------------------------------------- */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px max(22px, calc((100vw - 1080px)/2));
  transition:background-color .7s var(--mb-ease), backdrop-filter .7s var(--mb-ease);
  color:var(--text);
}
.kopf.gesetzt{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); }
.marke{ display:flex; align-items:center; gap:12px; color:inherit; }
.marke:hover{ text-decoration:none; }
.marke .zeichen{ width:34px; height:34px; flex:0 0 auto; }
.wortmarke{ font-family:var(--mb-font-mark); font-weight:500; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; line-height:1.25; color:var(--text); }
.kopf nav{ display:flex; align-items:center; gap:22px; }
.kopf nav a{ color:var(--text); font-size:14.5px; opacity:.82; }
.kopf nav a:hover{ opacity:1; }
@media (max-width:980px){ .kopf nav a.weg-klein{ display:none; } }
@media (max-width:620px){ .kopf nav a{ display:none; } .wortmarke{ font-size:11px; }
  .kopf{ padding:12px 18px; } .marke .zeichen{ width:30px; height:30px; } }

/* ---- Ansicht-Umschalter --------------------------------- */
.ansicht{ display:flex; align-items:center; gap:4px;
  border:1px solid var(--rule); border-radius:var(--mb-radius-button); padding:3px; }
.ansicht button{
  font-family:var(--mb-font-function); font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  padding:7px 13px; border-radius:var(--mb-radius-button);
  background:transparent; color:var(--text); opacity:.55; border:0;
  transition:opacity .7s var(--mb-ease), background-color .7s var(--mb-ease);
}
.ansicht button:hover{ opacity:.85; }
.ansicht button[aria-pressed="true"]{ opacity:1; background:var(--card); }
@media (max-width:420px){ .ansicht button{ padding:7px 9px; letter-spacing:.06em; } }

/* ---- Knöpfe --------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mb-font-function); font-weight:500; font-size:15px; line-height:1;
  padding:15px 28px; border-radius:var(--mb-radius-button); border:1px solid transparent;
  background:var(--accent); color:var(--auf-akzent); cursor:pointer;
  transition:transform .7s var(--mb-ease), opacity .7s var(--mb-ease),
             background-color .7s var(--mb-ease), color .7s var(--mb-ease);
}
.knopf:hover{ transform:translateY(-1px); opacity:.92; text-decoration:none; }
.knopf:disabled{ opacity:.45; cursor:default; transform:none; }
.knopf-leise{ background:transparent; border-color:var(--rule); color:var(--text); }
.knopf-leise:hover{ border-color:var(--text-2); }

/* Schleier und Blobs laufen absichtlich über die Ränder hinaus. Nach rechts
   erzeugte das eine Bildlaufleiste und die Seite ließ sich seitlich schieben.
   `clip` schneidet ab, ohne einen eigenen Scrollbereich aufzumachen —
   `hidden` würde die klebende Kopfzeile lösen. (Silke, 15.08.2026) */
html, body{ overflow-x:clip; }

/* ============================================================
   Lebendiger Grund — Schleier
   Weiterführung von „Atem & Schimmer" (GL-003 A4), freigegeben 13.08.2026
   ============================================================ */
.schleier{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.schleier i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.62;
  animation:ziehen 46s var(--mb-ease) infinite alternate;
  transition:opacity .7s var(--mb-ease), background .7s var(--mb-ease);
}
.schleier i:nth-child(1){ width:46vw; height:46vw; left:-12vw; top:-8vw;
  background:radial-gradient(circle, rgba(110,59,78,.85) 0%, rgba(110,59,78,0) 70%); }
.schleier i:nth-child(2){ width:38vw; height:38vw; right:-8vw; top:18vh;
  background:radial-gradient(circle, rgba(194,154,160,.34) 0%, rgba(194,154,160,0) 70%);
  animation-duration:62s; animation-delay:-14s; }
.schleier i:nth-child(3){ width:52vw; height:52vw; left:22vw; bottom:-22vw;
  background:radial-gradient(circle, rgba(110,59,78,.6) 0%, rgba(110,59,78,0) 70%);
  animation-duration:54s; animation-delay:-30s; }
.schleier i:nth-child(4){ width:22vw; height:22vw; right:18vw; bottom:12vh;
  background:radial-gradient(circle, rgba(111,165,163,.18) 0%, rgba(111,165,163,0) 70%);
  animation-duration:70s; animation-delay:-8s; }
.schleier-ruhig i{ opacity:.4; }

/* Im hellen Modus tragen die Schleier Altrosé statt Beere */
html[data-modus="hell"] .schleier i{ opacity:.7; }
html[data-modus="hell"] .schleier i:nth-child(1){
  background:radial-gradient(circle, rgba(194,154,160,.42) 0%, rgba(194,154,160,0) 70%); }
html[data-modus="hell"] .schleier i:nth-child(2){
  background:radial-gradient(circle, rgba(110,59,78,.16) 0%, rgba(110,59,78,0) 70%); }
html[data-modus="hell"] .schleier i:nth-child(3){
  background:radial-gradient(circle, rgba(194,154,160,.34) 0%, rgba(194,154,160,0) 70%); }
html[data-modus="hell"] .schleier i:nth-child(4){
  background:radial-gradient(circle, rgba(58,90,92,.12) 0%, rgba(58,90,92,0) 70%); }

@keyframes ziehen{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(4vw,-3vh,0) scale(1.12); }
  100% { transform:translate3d(-3vw,4vh,0) scale(.96); }
}

/* Feines Korn */
body::after{
  content:''; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}
html[data-modus="hell"] body::after{ opacity:.035; }

/* ---- Band · Video (GL-003 A5) --------------------------- */
.band{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  border-radius:0 0 var(--mb-radius-band) var(--mb-radius-band); }
.band video, .band .band-standbild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; transition:opacity 1.2s var(--mb-ease);
}
.band video{ opacity:0; }
.band video.da{ opacity:.5; }
.band video.da + .band-standbild{ opacity:0; }
/* Der Text steht still, das Bild atmet — deshalb nach unten hin ausblenden */
/* Zwei Verläufe: von unten für den Übergang zur Seite,
   von links für die Lesbarkeit — rechts bleibt das Bild offen. */
.band::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--bg) 82%, transparent) 0%,
                              color-mix(in srgb, var(--bg) 55%, transparent) 42%,
                              transparent 72%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent) 0%,
                               color-mix(in srgb, var(--bg) 20%, transparent) 45%,
                               var(--bg) 100%); }
@media (max-width:900px){
  .band::after{ background:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 55%, var(--bg) 100%); }
}
.band video, .band .band-standbild{ opacity:.62; }
.band video.da{ opacity:.62; }
/* Im hellen Modus wird das Moor in die helle Palette gehoben statt weggeblendet.
   Vorher stand hier 13 % Deckkraft, aus Sorge um den Kontrast der Beere-Überschrift —
   die Sorge war unbegründet. Gemessen am gerenderten Bild: 5,94:1 mit sichtbarem
   Moor gegenüber 5,95:1 mit unsichtbarem. Der Unterschied liegt im Rauschen.
   Die Lesbarkeit trägt der Schleier links, nicht das Wegblenden des Bildes.
   (Nebenbefund für GL-003: Beere auf Creme hält flach 7,4:1 — der lebendige
   Grund kostet rund 1,5 Punkte davon, unabhängig vom Video.) */
html[data-modus="hell"] .band video,
html[data-modus="hell"] .band .band-standbild{ opacity:.62;
  filter:brightness(1.34) contrast(.82) saturate(.9); }
html[data-modus="hell"] .band video.da{ opacity:.62; }
html[data-modus="hell"] .band::after{
  background:
    linear-gradient(to right, var(--bg) 0%, var(--bg) 30%,
                              color-mix(in srgb, var(--bg) 74%, transparent) 46%,
                              color-mix(in srgb, var(--bg) 12%, transparent) 76%),
    linear-gradient(to bottom, transparent 0%, transparent 55%, var(--bg) 100%); }
/* Auf schmalen Geräten gibt es keinen Platz daneben — Text und Bild müssten
   sich dieselben Pixel teilen. Gemessen: selbst mit starkem Schleier (78 %)
   hält die Überschrift dort nur 4,51:1, jede sichtbarere Stufe fällt unter AA.
   Also teilen wir nicht die Pixel, sondern die Fläche: der Text steht auf
   ruhigem Creme, das Moor liegt darunter als eigenes Bild. */
@media (max-width:900px){
  html[data-modus="hell"] .ankommen{ padding-bottom:352px; }
  html[data-modus="hell"] .band{
    top:auto; bottom:0; height:310px;
    left:max(22px, calc((100vw - 1080px)/2));
    right:max(22px, calc((100vw - 1080px)/2));
    border-radius:var(--mb-radius-band); }
  html[data-modus="hell"] .band video,
  html[data-modus="hell"] .band .band-standbild{ opacity:.82; }
  html[data-modus="hell"] .band video.da{ opacity:.82; }
  html[data-modus="hell"] .band::after{ background:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 40%, transparent) 0%, transparent 34%); }
}

.feldpaar{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:440px){ .feldpaar{ grid-template-columns:1fr; } }
.feld{ margin-bottom:14px; position:relative; }
.feld > label{ display:block; margin-bottom:7px; color:var(--text-2); }
html[data-modus="hell"] .feld > label{ opacity:.8; }
.feld input[type=text], .feld input[type=date], .feld input[type=time], .feld input[type=email]{
  width:100%; font-family:var(--mb-font-function); font-size:16px; line-height:24px;
  padding:13px 15px; border-radius:var(--mb-radius-field);
  background:var(--feld); color:var(--text);
  border:1px solid var(--rule);
}
.feld input:focus{ border-color:var(--accent); }
.feld input:disabled{ opacity:.5; }
.feld input::placeholder{ color:var(--text-2); opacity:.6; }

/* ============================================================
   12 — Schreib mir
   ============================================================ */
.kontakt-bahn{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:860px){ .kontakt-bahn{ grid-template-columns:1fr 1fr; gap:64px; } }
.kontakt-text .label{ color:var(--text-2); display:block; margin-bottom:16px; }
.kontakt-text .titel{ margin-bottom:18px; }
.kontakt-text p{ margin:0 0 18px; max-width:46ch; color:var(--text-2); }
html[data-modus="hell"] .kontakt-text p{ color:var(--text); opacity:.82; }

.kontakt-karte{ background:var(--card); border:1px solid var(--rule);
  border-radius:var(--mb-radius-card); padding:34px 32px; }
@media (max-width:520px){ .kontakt-karte{ padding:26px 22px; } }
.kontakt-knopf{ width:100%; }
/* Zwei gleichwertige Wege — für jemanden, die sich nicht traut zu schreiben,
   ist das Gespräch die eigentliche Tür, nicht die Zweitwahl. */
.kontakt-weg{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--rule); }
.kontakt-weg + .kontakt-weg{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.kontakt-weg .label{ color:var(--accent); display:block; margin-bottom:10px; }
.kontakt-weg p{ margin:0 0 18px; color:var(--text-2); }
html[data-modus="hell"] .kontakt-weg p{ color:var(--text); opacity:.82; }
.kontakt-liste{ margin:28px 0 0; padding-top:26px; border-top:1px solid var(--rule); }
.kontakt-zeile{ display:grid; grid-template-columns:1fr; gap:4px;
  padding:16px 0; border-bottom:1px solid var(--rule); }
@media (min-width:420px){ .kontakt-zeile{ grid-template-columns:104px 1fr; gap:16px;
  align-items:baseline; } }
.kontakt-zeile dt{ color:var(--text-2); }
html[data-modus="hell"] .kontakt-zeile dt{ color:var(--head); opacity:1; }
.kontakt-zeile dd{ margin:0; }
.kontakt-fuss{ margin:20px 0 0; color:var(--text-2); }
html[data-modus="hell"] .kontakt-fuss{ color:var(--text); opacity:.72; }

/* ============================================================
   7 — Fuß
   ============================================================ */
.fuss{ background:var(--tiefe); border-top:1px solid var(--rule); }
.fuss-innen{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:760px){ .fuss-innen{ grid-template-columns:1.2fr 1fr; align-items:start; } }
.fuss .claim{ color:var(--text-2); margin-top:16px; }
.fuss nav{ display:flex; flex-direction:column; gap:12px; }
.fuss nav a{ color:var(--text); opacity:.8; font-size:15px; }
.fuss nav a:hover{ opacity:1; }
.fuss .unten{ margin-top:48px; padding-top:24px; border-top:1px solid var(--rule);
  color:var(--text-2); display:flex; gap:20px; flex-wrap:wrap; }
.fuss .unten a{ color:var(--text-2); }
html[data-modus="hell"] .fuss .claim,
html[data-modus="hell"] .fuss .unten,
html[data-modus="hell"] .fuss .unten a{ color:var(--text); opacity:.72; }

/* ---- Auftauchen beim Scrollen --------------------------- */
.taucht{ opacity:0; transform:translateY(20px);
  transition:opacity 1.2s var(--mb-ease), transform 1.2s var(--mb-ease); }
.taucht.da{ opacity:1; transform:none; }

/* ---- Bewegung aus, wenn gewünscht ----------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .taucht{ opacity:1 !important; transform:none !important; }
  .bg-svg{ clip-path:none !important; }
  .strich{ transform:scaleX(1) !important; }
  .schleier i{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

.zeichen-svg-klein{width:100%;height:100%;display:block}
.zeichen-svg-gross{width:100%;height:auto;display:block}
.zeichen-gross{margin:0 0 34px;width:min(150px,34vw)}
@media (min-width:900px){.zeichen-gross{margin-left:0}}

/* Schwebende Karten */
.schwebt{ box-shadow:0 44px 90px -54px rgba(26,17,22,.55); }

/* ============================================================
   Formulare — ergänzt 14.08.2026 für die Kontaktseite
   Textfelder, Auswahlkarten, Einwilligung, Hinweise.
   ============================================================ */

.feld textarea{
  width:100%; font-family:var(--mb-font-function); font-size:16px; line-height:26px;
  padding:13px 15px; border-radius:var(--mb-radius-field);
  background:var(--feld); color:var(--text);
  border:1px solid var(--rule); resize:vertical; min-height:150px;
}
.feld textarea:focus{ border-color:var(--accent); }
.feld textarea::placeholder{ color:var(--text-2); opacity:.6; }
.feld .pflicht{ color:var(--accent); }
.feld .beiwort{ display:block; margin-top:6px; color:var(--text-2); font-size:13.5px; line-height:20px; }
html[data-modus="hell"] .feld .beiwort{ opacity:.75; }

/* ---- Auswahlkarten (Radio) ------------------------------ */
.wahlkarten{ display:grid; gap:12px; margin:0 0 26px; padding:0; border:0; }
@media (min-width:520px){ .wahlkarten{ grid-template-columns:1fr 1fr; } }
.wahlkarten > legend{ padding:0; margin-bottom:14px; color:var(--text-2); }
.wahlkarte{ position:relative; display:block; cursor:pointer; }
.wahlkarte input{ position:absolute; opacity:0; width:0; height:0; }
.wahlkarte span{
  display:block; padding:16px 18px; border-radius:var(--mb-radius-field);
  background:var(--feld); border:1px solid var(--rule); color:var(--text);
  transition:border-color .7s var(--mb-ease), background-color .7s var(--mb-ease);
}
.wahlkarte b{ display:block; font-weight:500; font-size:16px; line-height:24px; }
.wahlkarte em{ display:block; font-style:normal; margin-top:4px;
  color:var(--text-2); font-size:13.5px; line-height:20px; }
.wahlkarte:hover span{ border-color:var(--text-2); }
.wahlkarte input:checked + span{ border-color:var(--accent); background:var(--card); }
.wahlkarte input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---- Einwilligung --------------------------------------- */
.zustimmung{ display:flex; align-items:flex-start; gap:12px; margin:6px 0 24px;
  color:var(--text-2); font-size:14.5px; line-height:22px; cursor:pointer; }
html[data-modus="hell"] .zustimmung{ color:var(--text); opacity:.85; }
.zustimmung input{ flex:0 0 auto; margin-top:3px; width:18px; height:18px; accent-color:var(--accent); }

/* ---- Hinweise ------------------------------------------- */
.hinweis{ border-radius:var(--mb-radius-field); border:1px solid var(--rule);
  background:var(--feld); padding:14px 16px; margin:0 0 24px;
  color:var(--text-2); font-size:14.5px; line-height:22px; }
.hinweis.warnt{ border-color:var(--mb-dark-text-2); color:var(--text); }

/* Honigtopf — für Menschen unsichtbar, Maschinen füllen ihn aus */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Nur zeigen, wenn ein bestimmtes Anliegen gewählt ist ---- */
.nur-gespraech{ display:none; }
body[data-anliegen="kennenlernen"] .nur-gespraech{ display:block; }

/* ---- Schmale Seiten (Kontakt, Danke, Rechtliches) -------- */
.seitenkopf{ padding-top:132px; }
.seitenkopf .label{ color:var(--text-2); display:block; margin-bottom:16px; }

/* ---- Fußzeile: Wege als einzelne Knöpfe nebeneinander (14.08.2026) ---- */
.fuss nav{ flex-direction:row; flex-wrap:wrap; gap:12px; align-content:flex-start; }
.fuss nav a{ border:1px solid var(--rule); border-radius:var(--mb-radius-button);
  padding:10px 18px; opacity:1; font-size:14.5px; }
.fuss nav a:hover{ text-decoration:none; border-color:var(--text-2); opacity:1; }

/* ============================================================
   Kopfbild — ein Foto, das in den Grund übergeht
   Benutzt von: angebote.html, buchen.html
   Silke, 14.08.2026: „Im oberen Teil rechts ein zart animiertes Foto
   in der passenden Farbe."
   Die Motive werden bei Magnific direkt in Moor & Beere erzeugt,
   nichts wird umgefärbt. Jede Seite bringt ihr eigenes mit.
   Bewegung: der Schleier. Das Foto steht still, darüber zieht langsam
   ein Licht in Beere und Altrosé — dieselbe Sprache wie der Grund der
   Seite (GL-003 A4, „Atem & Schimmer"). */
.kopf-raster{ display:grid; gap:36px; align-items:stretch; }
@media (min-width:900px){
  .kopf-raster{ grid-template-columns:1fr .82fr; gap:48px; align-items:stretch; }
}
/* Der Textteil trägt die Höhe — das Bild richtet sich danach. */
.kopf-text{ min-width:0; }

/* Silke, 14.08.2026: „Das Bild soll mit dem Hintergrund verschmelzen."
   Also kein Rahmen, keine Ecken, kein Schatten — stattdessen läuft das
   Foto an allen Rändern in Transparenz aus. Eine Maske nimmt die Deckkraft
   nach außen hin weg; weil sie über den Alphakanal arbeitet und nicht über
   eine Farbe, stimmt sie in Dunkel und Hell gleichermaßen. */
.kopf-bild{
  position:relative; margin:0; align-self:stretch;
  min-height:420px;
  /* Verschmelzen heißt: an ALLEN vier Rändern auf null laufen.
     Eine Ellipse allein schafft das nicht — sie lässt Kanten stehen, wo
     sie das Bild schneidet. Deshalb drei Masken übereinander, die sich
     gegenseitig beschneiden: eine weiche Ellipse für die Mitte, dazu ein
     Verlauf von oben/unten und einer von links/rechts. Wo eine der drei
     null ist, ist das Bild weg. */
  --v-mitte:radial-gradient(84% 74% at 56% 46%,
      #000 0%, #000 40%, rgba(0,0,0,.55) 74%, transparent 100%);
  --v-hoch:linear-gradient(to bottom,
      transparent 0%, #000 15%, #000 84%, transparent 100%);
  --v-quer:linear-gradient(to right,
      transparent 0%, #000 13%, #000 86%, transparent 100%);
  -webkit-mask-image:var(--v-mitte), var(--v-hoch), var(--v-quer);
          mask-image:var(--v-mitte), var(--v-hoch), var(--v-quer);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
@media (max-width:899px){ .kopf-bild{ min-height:300px; max-height:340px; } }
.kopf-bild img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* In Hell ist der Grund cremefarben — das dunkle Foto würde sonst als Fleck
   stehen bleiben. Etwas weniger Deckkraft lässt es einsinken. */
html[data-modus="hell"] .kopf-bild img{ opacity:.72; }
/* In Hell trifft ein dunkler Himmel auf cremefarbenen Grund — das liest sich
   als schwerer Block. Weniger Deckkraft lässt das Bild einsinken, statt
   darauf zu liegen. (Silke, 14.08.2026) */

/* Der Schleier über dem Bild — drei weiche Lichter, die sehr langsam ziehen.
   „soft-light" legt sie ins Bild hinein statt darüber, dadurch bleibt das
   Motiv sichtbar und nur die Stimmung wandert. */
.bild-schleier{ position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.9; }
.bild-schleier i{
  position:absolute; display:block; border-radius:50%; filter:blur(56px);
  animation:ziehen 58s var(--mb-ease) infinite alternate;
}
.bild-schleier i:nth-child(1){ width:80%; height:60%; left:-18%; top:-12%;
  background:radial-gradient(circle, rgba(110,59,78,.85) 0%, rgba(110,59,78,0) 70%); }
.bild-schleier i:nth-child(2){ width:70%; height:55%; right:-16%; top:34%;
  background:radial-gradient(circle, rgba(194,154,160,.55) 0%, rgba(194,154,160,0) 70%);
  animation-duration:74s; animation-delay:-19s; }
.bild-schleier i:nth-child(3){ width:88%; height:52%; left:8%; bottom:-18%;
  background:radial-gradient(circle, rgba(111,165,163,.34) 0%, rgba(111,165,163,0) 70%);
  animation-duration:66s; animation-delay:-37s; }
html[data-modus="hell"] .bild-schleier{ opacity:.62; }

/* Ein feiner Schimmer, der über das Bild wandert — sehr zurückhaltend. */
.kopf-bild::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 38%,
             rgba(242,234,227,.10) 50%, transparent 62%);
  transform:translateX(-40%);
  animation:schimmert 22s var(--mb-ease) infinite;
}
@keyframes schimmert{
  0%, 70%  { transform:translateX(-40%); opacity:0; }
  82%      { opacity:1; }
  100%     { transform:translateX(40%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .bild-schleier i{ animation:none !important; }
  .kopf-bild::after{ animation:none !important; opacity:0 !important; }
}