/* =====================================================================
   Ruhiges Erscheinungsbild (19.10.2026): heller Grund, fast schwarze Schrift,
   ein Akzent (Marineblau #143977 aus dem Logo). Keine Verlaeufe, kein Leuchten,
   keine Bewegung. Gilt nur auf Seiten mit <html class="ruhig">
   (heute /gratis-entwurf/ und /danke-kauf.html). Wird nach stil.css,
   lm-rahmen.css und den Seiten-CSS geladen.
   ===================================================================== */
html.ruhig {
  --r-grund: #FAF9F7;
  --r-flaeche: #FFFFFF;
  --r-flaeche-2: #F3F1EE;
  --r-text: #16181D;
  --r-still: #4A4F59;
  --r-linie: #E3E0DB;
  --r-linie-stark: #A8A39B;
  --r-akzent: #143977;
  --r-akzent-tief: #0E2A59;
  --r-akzent-grund: #EEF2F9;

  /* stil.css auf hell umstellen */
  --nacht: var(--r-grund);
  --nacht-2: var(--r-flaeche);
  --nacht-3: var(--r-flaeche-2);
  --nacht-linie: var(--r-linie);
  --marine: var(--r-akzent);
  --cyan: var(--r-akzent);
  --koenig: var(--r-akzent);
  --auf-nacht: var(--r-text);
  --auf-nacht-still: var(--r-still);
  --taste-linie: var(--r-linie-stark);
  --feld-linie: var(--r-linie-stark);
  --platzhalter: #767B84;
  --papier: var(--r-flaeche-2);
  --papier-2: var(--r-flaeche-2);
  --papier-linie: var(--r-linie);
  --tinte: var(--r-text);
  --akzent-text: var(--r-akzent);
  --akzent-tief: var(--r-akzent-tief);
  --auf-papier-still: var(--r-still);

  /* Wizard-Tokens (gratis-entwurf.css) */
  --ge-akzent: var(--r-akzent);
  --ge-akzent-grund: var(--r-akzent-grund);
  --ge-flaeche: var(--r-flaeche);
  --ge-flaeche-2: var(--r-flaeche);
  --ge-linie: var(--r-linie);
  --ge-linie-stark: var(--r-linie-stark);
  --ge-text: var(--r-text);
  --ge-still: var(--r-still);
  background: var(--r-grund);
  scroll-behavior: auto;
}
html.ruhig body { background: var(--r-grund); color: var(--r-text); }
html.ruhig h1, html.ruhig h2, html.ruhig h3 { color: var(--r-text); letter-spacing: -0.01em; }
html.ruhig a { color: var(--r-akzent); }
html.ruhig a:hover { color: var(--r-akzent-tief); }
html.ruhig :where(a, button, summary, [tabindex], input, select, textarea):focus-visible { outline: 3px solid var(--r-akzent); outline-offset: 2px; }

/* Keine Bewegung, kein Leuchten, kein Regen */
html.ruhig .regen-voll, html.ruhig .regen-feld, html.ruhig .bitzeile { display: none !important; }
html.ruhig [data-tritt], html.ruhig [data-wartet], html.ruhig [data-gespielt] { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
html.ruhig .seiten-kopf::before, html.ruhig .auftakt::before { content: none !important; display: none !important; }
html.ruhig .kopf::after, html.ruhig .seiten-kopf::after, html.ruhig .leiste::before,
html.ruhig header.lm-rahmen.kopf::after, html.ruhig div.lm-rahmen.leiste::before { background: var(--r-linie) !important; height: 1px !important; }
html.ruhig .kopfzeile .strich { background: var(--r-akzent); width: 2.5rem; height: 2px; }
@media (prefers-reduced-motion: reduce) { html.ruhig *, html.ruhig *::before, html.ruhig *::after { transition: none !important; animation: none !important; } }

/* Kopf, Menue, Fuss, Leiste */
html.ruhig .lm-rahmen { --lmr-nacht: var(--r-grund); --lmr-linie: var(--r-linie); --lmr-cyan: var(--r-akzent); --lmr-koenig: var(--r-akzent); --lmr-text: var(--r-text); --lmr-still: var(--r-still); --lmr-taste-linie: var(--r-linie-stark); }
html.ruhig .kopf, html.ruhig header.lm-rahmen.kopf { background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--r-text); }
html.ruhig .kopf nav a { color: var(--r-still); }
html.ruhig .kopf nav a:hover, html.ruhig .kopf nav a[aria-current] { color: var(--r-text); border-bottom-color: var(--r-akzent); }
@media (max-width: 58rem) {
  html.ruhig.lm-js .kopf .lm-menue { color: var(--r-text); border-color: var(--r-linie-stark); }
  html.ruhig.lm-js .kopf .lm-menue[aria-expanded="true"] { border-color: var(--r-akzent); }
  html.ruhig.lm-js .kopf.lm-offen nav { background: var(--r-flaeche); border-bottom-color: var(--r-linie); box-shadow: 0 16px 32px rgba(22, 24, 29, 0.08); }
  html.ruhig.lm-js .kopf.lm-offen nav a { border-bottom-color: var(--r-linie); color: var(--r-text); }
}
html.ruhig .lm-krumen { background: var(--r-grund); color: var(--r-still); border-color: var(--r-linie); }
html.ruhig .lm-krumen a { color: var(--r-still); }
html.ruhig .lm-krumen [aria-current] { color: var(--r-text); }
html.ruhig .fuss, html.ruhig .lm-rahmen.fuss { background: var(--r-flaeche-2); color: var(--r-text); border-top: 1px solid var(--r-linie); }
html.ruhig .fuss p, html.ruhig .fuss nav a, html.ruhig .fuss-unten, html.ruhig .fuss-unten a { color: var(--r-still); font-size: 1rem; }
html.ruhig .fuss nav a:hover, html.ruhig .fuss-unten a:hover { color: var(--r-akzent); }
html.ruhig .leiste, html.ruhig div.lm-rahmen.leiste { background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--r-linie); }
html.ruhig .sprung { background: var(--r-akzent); color: #fff; }
html.ruhig .sprung:focus { color: #fff; }

/* Tasten: flach, ein Blau, keine Schatten */
html.ruhig .taste, html.ruhig .lm-rahmen .taste {
  background: var(--r-akzent); color: #fff; border: 1.5px solid var(--r-akzent);
  box-shadow: none; border-radius: 8px; font-weight: 600;
}
html.ruhig .taste:hover, html.ruhig .lm-rahmen .taste:hover { background: var(--r-akzent-tief); border-color: var(--r-akzent-tief); color: #fff; box-shadow: none; }
html.ruhig .taste--leer, html.ruhig .lm-rahmen .taste--leer { background: var(--r-flaeche); color: var(--r-text); border-color: var(--r-linie-stark); }
html.ruhig .taste--leer:hover, html.ruhig .lm-rahmen .taste--leer:hover { background: var(--r-flaeche); color: var(--r-text); border-color: var(--r-akzent); }
html.ruhig .taste:disabled { opacity: 0.55; cursor: not-allowed; }

/* Felder */
html.ruhig .feld label { color: var(--r-text); }
html.ruhig .feld input, html.ruhig .feld select, html.ruhig .feld textarea { background: var(--r-flaeche); color: var(--r-text); border: 1px solid var(--r-linie-stark); border-radius: 8px; }
html.ruhig .feld :is(input, select, textarea):focus-visible { outline: 2px solid var(--r-akzent); border-color: var(--r-akzent); }
html.ruhig .zustimmung-fehler { color: #A3221B; }

/* Abschnitte */
html.ruhig .teil--hell { background: var(--r-flaeche-2); color: var(--r-text); }
html.ruhig .still { color: var(--r-still); }
html.ruhig .seiten-kopf { background: transparent; }
html.ruhig .seiten-kopf h1 { font-family: var(--schrift); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
html.ruhig .seiten-kopf h1 em { font-style: normal; color: var(--r-akzent); }
html.ruhig h2, html.ruhig h3 { font-family: var(--schrift); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
html.ruhig .kopfzeile h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

/* ---------- Danke und Onboarding (danke-kauf.html) ---------- */
html.ruhig .dk [hidden] { display: none !important; }
.dk-schmal { max-width: 46rem; }
.dk-kopf { padding-block: 56px 32px; }
.dk-zeichen { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--r-akzent-grund); color: var(--r-akzent); border: 1px solid var(--r-linie); margin: 0 0 24px; }
.dk-zeichen svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ruhig .dk-kopf h1 { font-family: var(--schrift); font-weight: 600; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.dk-lead { margin-top: 16px; font-size: 1.125rem; color: var(--r-still); max-width: 38rem; }
.dk-teil { padding-block: 32px; border-top: 1px solid var(--r-linie); }
html.ruhig .dk-teil h2 { font-size: 1.5rem; margin: 0 0 24px; }
.dk-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: dk; }
.dk-schritte li { counter-increment: dk; position: relative; padding: 16px 16px 16px 64px; border: 1px solid var(--r-linie); border-radius: 12px; background: var(--r-flaeche); }
.dk-schritte li::before { content: counter(dk); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--r-akzent); color: #fff; font-weight: 600; font-size: 1rem; }
.dk-schritte b { display: block; font-weight: 600; color: var(--r-text); }
.dk-schritte span { display: block; color: var(--r-still); margin-top: 4px; }
.dk-zeit { margin: 0; display: grid; gap: 0; border: 1px solid var(--r-linie); border-radius: 12px; background: var(--r-flaeche); overflow: hidden; }
.dk-zeit div { display: grid; gap: 4px; padding: 16px; border-top: 1px solid var(--r-linie); }
.dk-zeit div:first-child { border-top: 0; }
@media (min-width: 36rem) { .dk-zeit div { grid-template-columns: 12rem 1fr; gap: 16px; } }
.dk-zeit dt { font-weight: 600; color: var(--r-text); }
.dk-zeit dd { margin: 0; color: var(--r-still); }
.dk-person { display: flex; gap: 24px; align-items: center; padding: 16px; border: 1px solid var(--r-linie); border-radius: 12px; background: var(--r-flaeche); }
.dk-person img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; flex: none; }
.dk-person div { min-width: 0; display: grid; gap: 2px; }
.dk-person a { display: inline-flex; align-items: center; min-height: 44px; }
.dk-name b { display: block; font-size: 1.125rem; color: var(--r-text); }
.dk-name span { color: var(--r-still); }
@media (max-width: 26rem) { .dk-person { flex-direction: column; align-items: flex-start; } }
.dk-vertrauen { margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--r-akzent-grund); color: var(--r-text); font-weight: 500; }
.dk-andere-box { border: 1px solid var(--r-linie); border-radius: 12px; background: var(--r-flaeche); }
.dk-andere-box summary { cursor: pointer; padding: 16px; min-height: 48px; font-weight: 600; color: var(--r-text); }
.dk-andere-box .artikel-liste { padding: 0 16px 16px; }
.dk-andere-box .artikel { border-top: 1px solid var(--r-linie); padding-top: 16px; margin-top: 16px; }
.dk-andere-box .artikel h2 { font-size: 1.25rem; margin: 0 0 8px; }
.dk-andere-box .artikel p { margin: 0 0 8px; }
.dk-andere-box .still { font-size: 1rem; }
.dk-andere-box .artikel p{font-size:1rem}
html.ruhig .marke img { filter: none !important; }
html.ruhig .seiten-kopf .wo { font-family: var(--schrift); letter-spacing: 0; color: var(--r-still); }
/* Cookie-Knopf ohne Emoji: ruhiges Linien-Symbol (Regler) */
html.ruhig #lm-cc-fab { font-size: 0 !important; color: transparent !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143977' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important; border: 1px solid var(--r-linie-stark) !important; box-shadow: none !important; }
@media (min-width: 63.0625rem) { html.ruhig .kopf nav { gap: 0.35rem; } }
html.ruhig [tabindex="-1"]:focus, html.ruhig [tabindex="-1"]:focus-visible { outline: none; }

/* WhatsApp als ruhiger Sekundaerknopf (19.10.2026), nie schwebend */
html.ruhig .lm-wa{display:inline-flex;align-items:center;gap:8px}
html.ruhig .lm-wa-ico{flex:none}
html.ruhig .ge-wa{margin:14px 0 4px}
html.ruhig .dk-wa{margin-top:12px}