/* ============================================================
   Creative Mind Lab · ruhig.css – Website-Design „Ruhig“
   Stufe B des Gesamtauftrags, Claude, 28.10.2026.
   Gilt nur fuer Seiten, die schon umgestellt sind (sie laden diese Datei
   statt styles.css). Alle anderen Seiten und alle Werkzeug-Apps bleiben
   unberuehrt.
   Quelle: MegaBrain/UX-UI-Audit-CML-2026-10-28/05-Vorschau-Claude/vorschau.css
   Regeln (Franz, 28.10.2026, 22 Uhr): flach, keine Verlaeufe/Leuchten/
   Kartenschatten · Grund #0D1829, Karte #13233D, hervorgehoben #172A4A mit
   Mint-Rand, Baender #0F1E34 · Mint = klickbar/Fokus, Violett nur Akzentwort
   der Headline, Koralle nur Kreatives/Neues · Pills 48 px · Huelle 1180 px
   inkl. Padding · Abstaende bis 96 px · Radius 22 px · nur Inter · keine
   Dauerbewegung, „Bewegung reduzieren“ = Stillstand.
   ============================================================ */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../assets/fonts/Inter-ExtraBold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../assets/fonts/Inter-ExtraBold-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- 1. Tokens ---------- */
:root {
  /* Flaechen */
  --grund:        #0D1829;
  --band:         #0F1E34;
  --karte:        #13233D;
  --karte-hoch:   #172A4A;
  --linie:        rgba(255,255,255,0.09);
  --linie-stark:  rgba(255,255,255,0.16);
  --rand-hoch:    rgba(61,217,164,0.35);

  /* Text */
  --text:   #FFFFFF;
  --text-2: #A8BAD0;
  --text-3: #8B9BB4;

  /* Rollenfarben */
  --mint:        #3DD9A4;
  --mint-hover:  #5BE3B5;
  --mint-dunkel: #062A1E;
  --violett:     #A893FF;
  --koralle:     #FF8A65;
  --eis:         #7DD3FC;   /* frischer Akzent: nur fuer kurze Lichtmomente (29.10.2026) */

  /* Typografie */
  --fs-klein:   0.8125rem;   /* 13 */
  --fs-text:    1rem;        /* 16 */
  --fs-gross:   1.125rem;    /* 18 */
  --fs-h3:      1.25rem;     /* 20 */
  --fs-h2:      clamp(1.65rem, 3.2vw, 2.4rem);
  --fs-display: clamp(2.6rem, 6vw, 4.6rem);

  /* Abstaende */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 72px; --a9: 96px;

  --radius: 22px;
  --radius-bild: 22px;
  --knopf-hoehe: 48px;
  --kopf: 68px;
  --huelle: 1180px;   /* inklusive seitlichem Padding */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 16px); }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--fs-text); line-height: 1.65; color: var(--text);
  background-color: var(--grund);
  overflow-x: clip;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mint); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: var(--fs-h2); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.huelle { width: 100%; max-width: var(--huelle); margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .huelle { padding: 0 32px; } }

.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--mint); color: var(--mint-dunkel); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.sprung:focus { top: 12px; }

/* Abschnitte und Baender */
.abschnitt { padding: var(--a8) 0; }
.abschnitt-eng { padding: var(--a7) 0; }
@media (min-width: 900px) { .abschnitt { padding: var(--a9) 0; } .abschnitt-eng { padding: var(--a8) 0; } }
.band { background: var(--band); }

.etikett { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); margin-bottom: var(--a4); }
.etikett::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.kopfzeile { max-width: 720px; margin-bottom: var(--a7); }
.kopfzeile p { color: var(--text-2); margin-top: var(--a4); font-size: var(--fs-gross); }

/* ---------- 3. Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--knopf-hoehe); padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; max-width: 100%;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf-haupt { background: var(--mint); color: var(--mint-dunkel); }
.knopf-haupt:hover { background: var(--mint-hover); }
.knopf-zweit { background: transparent; color: var(--mint); border-color: var(--mint); }
.knopf-zweit:hover { background: rgba(61,217,164,0.10); }
.textlink { color: var(--mint); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.textlink:hover { text-decoration: underline; }
.textlink svg, .knopf svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease); }
.textlink:hover svg, .knopf:hover svg { transform: translateX(3px); }

/* ---------- 4. Flaechen ---------- */
.flaeche { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.flaeche-hoch { background: var(--karte-hoch); border: 1px solid var(--rand-hoch); border-radius: var(--radius); }
a.flaeche, .hebt { transition: border-color .2s ease; }
a.flaeche:hover, .hebt:hover { border-color: var(--linie-stark); }

/* ---------- 4a. Tiefe (29.10.2026, Franz: „etwas Tiefe, 3D-Optik und ein
   leichter Verlauf im Hintergrund auf allen Seiten“) ----------
   Ein ruhender Verlauf hinter der ganzen Seite, Karten mit Lichtkante oben
   und weichem Schatten darunter. Nichts bewegt sich von selbst, kein Blur,
   kein farbiges Leuchten. */
html { background-color: var(--grund); }
body { background-color: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(168,147,255,0.13), transparent 62%),
    radial-gradient(900px 560px at 100% 4%, rgba(61,217,164,0.07), transparent 60%),
    linear-gradient(180deg, #112039 0%, #0D1829 46%, #0A1424 100%);
}
.band, body.ruhig-bestand main > section:nth-of-type(even) { background: rgba(16,31,54,0.55); }
.kopf, .produktleiste { background: rgba(13,24,41,0.94); }
.flaeche, .flaeche-hoch, body.ruhig-bestand .card, body.ruhig-bestand .newsletter-section, body.ruhig-bestand .newsletter-cta-card, .nl-modal {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.28), 0 22px 44px -22px rgba(0,0,0,0.65);
}
/* Dezente Verlaufskante oben (29.10.2026): Violett -> Mint, zu den Enden auslaufend */
.flaeche, .flaeche-hoch, body.ruhig-bestand .card, body.ruhig-bestand .newsletter-section, body.ruhig-bestand .newsletter-cta-card {
  background-image:
    linear-gradient(90deg, rgba(168,147,255,0) 6%, rgba(168,147,255,0.55) 32%, rgba(61,217,164,0.55) 68%, rgba(61,217,164,0) 94%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%);
  background-size: 100% 1px, 100% 100%;
  background-position: top center, 0 0;
  background-repeat: no-repeat;
  background-origin: border-box, padding-box;
  background-clip: border-box, padding-box;
}
a.flaeche, .hebt, body.ruhig-bestand a.card { transition: border-color .2s ease, transform .25s var(--ease), box-shadow .25s var(--ease); }
a.flaeche:hover, .hebt:hover, body.ruhig-bestand a.card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.3), 0 30px 56px -24px rgba(0,0,0,0.75);
}
.knopf-haupt, body.ruhig-bestand .btn-teal, body.ruhig-bestand .btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px -8px rgba(0,0,0,0.7);
}
.weg-icon, body.ruhig-bestand .door-icon { background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 14px -8px rgba(0,0,0,0.6); }
.produktbild img, .portraet-rahmen, .karte-bild { box-shadow: 0 24px 48px -24px rgba(0,0,0,0.8); }
.buch3d img { box-shadow: 18px 22px 36px -14px rgba(0,0,0,0.75); }

/* ---------- 6. Kopf und Navigation ---------- */
.kopf { position: sticky; top: 0; z-index: 100; background: var(--grund); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: var(--a4); min-height: var(--kopf); }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; margin-right: auto; }
.marke img { width: 34px; height: 34px; }
.marke .ak { color: var(--mint); }

.hauptnav { display: none; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; }
.hauptnav a, .mehr-knopf { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 15px; font-weight: 500; }
.hauptnav a:hover, .mehr-knopf:hover { color: #fff; }
.hauptnav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--mint); }
.mehr-knopf { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; min-height: 44px; }
.mehr-knopf svg { width: 16px; height: 16px; transition: transform .15s ease; }
.mehr-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.mehr-liste { display: none; }
.mehr-liste.offen { display: block; }

.kopf-anfrage { display: none; }
.menue-knopf { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--linie-stark); border-radius: 12px; cursor: pointer; color: #fff; }
.menue-knopf svg { width: 22px; height: 22px; }
.menue-knopf .zu { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: none; }
.menue-knopf[aria-expanded="true"] .zu { display: block; }

.mobilnav { display: none; }
.mobilnav.offen { display: block; position: absolute; left: 0; right: 0; top: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--karte); border-bottom: 1px solid var(--linie-stark); }
.mobilnav ul { list-style: none; margin: 0; padding: 8px 16px 20px; }
.mobilnav li a { display: flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--linie); }
.mobilnav .neben a { font-weight: 500; color: var(--text-2); font-size: 16px; }
.mobilnav .trenner { padding: 18px 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.mobilnav .knopf { width: 100%; margin-top: 18px; border-bottom: 0; color: var(--mint-dunkel); }

@media (min-width: 960px) {
  .menue-knopf, .mobilnav, .mobilnav.offen { display: none; }
  .kopf-anfrage { display: inline-flex; min-height: var(--knopf-hoehe); padding: 0 22px; font-size: 14px; }
  .hauptnav { display: block; }
  .hauptnav > ul { display: flex; align-items: center; gap: 28px; }
  .hauptnav > ul > li { position: relative; }
  .hauptnav > ul > li > a { display: inline-flex; align-items: center; min-height: 44px; }
  .mehr-liste.offen { position: absolute; top: calc(100% + 6px); right: -12px; min-width: 240px; overflow-y: auto; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 14px; padding: 8px; }
  .mehr-liste a { display: flex; min-height: 42px; align-items: center; padding: 0 12px; border-radius: 8px; }
  .mehr-liste a:hover { background: rgba(255,255,255,0.05); }
}

/* ---------- 7. Hero ---------- */
.hero { padding: var(--a7) 0 var(--a8); }
.hero-raster { display: grid; gap: var(--a7); align-items: center; }
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.045em; line-height: 0.98; }
.hero h1 .akzent { color: var(--violett); }
.hero-claim { margin-top: var(--a5); font-size: var(--fs-gross); font-weight: 700; color: var(--mint); }
.hero-text { margin-top: var(--a3); font-size: 1.1875rem; color: var(--text-2); max-width: 540px; line-height: 1.6; }
.hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--a6); }
.hero-neu { margin-top: var(--a5); font-size: 15px; color: var(--text-2); }
.hero-neu b { color: var(--koralle); font-weight: 700; margin-right: 4px; }
/* Kennzahlen als schlanke Belegliste (29.10.2026, Franz: 2×2-Raster wirkte
   ueberfrachtet): eine Zeile je Beleg mit Symbol, Jury-Mitgliedschaft in Koralle. */
.kennzahlen { list-style: none; padding: var(--a5) 0 0; margin: var(--a6) 0 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.kennzahlen li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; text-align: left; line-height: 1.45; }
.kennzahlen li > svg { width: 18px; height: 18px; margin-top: 2px; color: var(--text-3); }
.kennzahlen .kennzahl-jury > svg { color: var(--koralle); }
.kennzahlen b { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-right: 8px; }
.kennzahlen span { color: var(--text-3); }
.kennzahlen li > b, .kennzahlen li > span { grid-column: 2; }
.kennzahlen li > b + span { grid-column: 2; }
@media (min-width: 600px) { .kennzahlen li { display: flex; align-items: baseline; gap: 0; } .kennzahlen li > svg { align-self: center; margin: 0 12px 0 0; flex: none; } }

/* Bildbaustein: austauschbar, Ausschnitt per object-position */
.portraet { margin: 0; max-width: 440px; width: 100%; justify-self: center; }
.portraet-rahmen { border-radius: var(--radius-bild); overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--linie-stark); background: var(--karte); }
.portraet-rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portraet figcaption { margin-top: var(--a4); padding: 0 4px; }
.portraet-name { display: block; font-weight: 800; font-size: 17px; }
.portraet-rolle { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.person-zeile { display: none; }
@media (max-width: 899px) {
  /* Handy/Tablet: das grosse Foto weicht einer kompakten Zeile mit Portraet direkt unter
     der Ueberschrift; so stehen Person, Botschaft und Aktionen im ersten Bildschirm (29.10.2026). */
  .hero { padding-top: var(--a6); }
  .portraet { display: none; }
  .person-zeile { display: flex; align-items: center; gap: 14px; margin-top: var(--a5); }
  .person-zeile img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(61,217,164,0.5); flex: none; }
  .person-zeile .portraet-name { display: block; font-weight: 800; font-size: 16px; }
  .person-zeile .portraet-rolle { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
  .hero-claim { margin-top: var(--a5); }
  /* Startbildschirm mobil zentriert (Franz, 29.10.2026) */
  .hero-raster > div:first-child { text-align: center; }
  .hero .etikett { justify-content: center; }
  .person-zeile { justify-content: center; text-align: left; }
  .hero-text { margin-left: auto; margin-right: auto; }
  .hero-aktionen { justify-content: center; }
  .kennzahlen { margin-left: auto; margin-right: auto; width: fit-content; max-width: 100%; }
}
@media (max-width: 600px) {
  /* Handy entruempelt (29.10.2026, Franz: „wirkt ueberladen“): weniger Ebenen und
     Farben im ersten Bildschirm, ein Hauptknopf, der zweite als ruhiger Textlink,
     „Neu“ als kleines Etikett statt unterstrichener Zeile. */
  .hero { padding-top: var(--a6); padding-bottom: var(--a7); }
  .hero .etikett { display: none; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.1rem); }
  .person-zeile { margin-top: var(--a5); gap: 12px; }
  .person-zeile img { width: 80px; height: 80px; }
  .person-zeile .portraet-name { font-size: 15px; }
  .person-zeile .portraet-rolle { font-size: 14px; }
  .hero-claim { margin-top: var(--a5); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .01em; }
  .hero-text { font-size: 16px; line-height: 1.6; margin-top: var(--a2); }
  .hero-aktionen { gap: 4px; margin-top: var(--a5); }
  .hero-aktionen .knopf-haupt { width: 100%; }
  .hero-aktionen .knopf-zweit { border-color: transparent; background: none; min-height: 44px; }
  .hero-neu { display: flex; justify-content: center; margin-top: var(--a3); }
  .hero-neu a { display: inline-block; font-size: 14px; line-height: 1.4; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255,138,101,0.4); background: rgba(255,138,101,0.06); color: #FFD5C7; text-decoration: none; }
  .hero-neu b { display: none; }
  .hero-neu a::before { content: "Neu · "; color: var(--koralle); font-weight: 700; }
}
@media (min-width: 900px) {
  .hero { padding: var(--a8) 0 var(--a9); }
  .hero-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: var(--a8); }
}

/* Kooperationen */
.kooperationen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kooperationen .huelle { padding-top: var(--a5); padding-bottom: var(--a5); text-align: center; }
.kooperationen .etikett { margin-bottom: var(--a3); }
.kooperationen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: center; font-size: 14px; color: var(--text-2); }
.kooperationen li { display: inline-flex; min-height: 32px; align-items: center; }
.kooperationen a { color: var(--text-2); text-decoration: none; }
.kooperationen a:hover { color: #fff; text-decoration: underline; }
.kooperationen b { color: #fff; font-weight: 700; margin-right: 4px; }
/* Logoleiste wie auf Profiseiten (29.10.2026, Franz): einfarbig weiss auf
   transparentem Grund, optisch gleich gross, gedaempft, beim Darueberfahren voll. */
.kooperationen .huelle { padding-top: var(--a6); padding-bottom: var(--a6); }
.logoleiste { align-items: flex-end; gap: var(--a5) 64px !important; margin-bottom: var(--a5) !important; }
.logoleiste a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none !important; opacity: .72; transition: opacity .2s ease; }
.logoleiste a:hover, .logoleiste a:focus-visible { opacity: 1; }
.logoleiste img { width: auto; display: block; }
.logoleiste .logo-iqes { height: 30px; }
.logoleiste .logo-fumu { height: 39px; }
.logoleiste .logo-aim { height: 52px; }
/* Logos stehen fuer sich (Franz, 29.10.2026); die Rolle bleibt fuer Screenreader und als Tooltip */
.logo-rolle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logoleiste { align-items: center !important; }
.partnerzeile { padding-top: var(--a4) !important; border-top: 1px solid var(--linie); max-width: 820px; margin: 0 auto !important; }
@media (max-width: 599px) { .logoleiste { gap: var(--a4) 22px !important; flex-wrap: nowrap !important; } .logoleiste li { flex: 0 1 auto; justify-content: center; } .logoleiste .logo-iqes { height: 19px; } .logoleiste .logo-fumu { height: 26px; } .logoleiste .logo-aim { height: 36px; } }

/* ---------- 8. Drei Wege ---------- */
.wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4); }
.weg { padding: var(--a6) var(--a5); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.weg h3 { font-size: 24px; letter-spacing: -0.02em; }
.weg > p { color: var(--text-2); margin-top: var(--a2); }
.weg-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: var(--a4); }
.weg-art { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.weg-icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(61,217,164,0.10); color: var(--mint); border: 1px solid rgba(61,217,164,0.25); }
.weg-icon svg { width: 22px; height: 22px; }
.weg-icon.koralle { background: rgba(255,138,101,0.10); color: var(--koralle); border-color: rgba(255,138,101,0.3); }
.weg-fuss { margin-top: auto; padding-top: var(--a5); display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

.formate { list-style: none; margin: var(--a5) 0 0; padding: 0; border-top: 1px solid var(--linie); }
.formate li { border-bottom: 1px solid var(--linie); }
.formate a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 13px 4px; text-decoration: none; color: #fff; min-height: 52px; align-items: center; border-radius: 10px; transition: background-color .2s ease; }
/* Angebotskaesten leuchten abwechselnd auf (29.10.2026, Franz): ein umlaufender
   Rand im Polarlicht-Verlauf Eisblau -> Violett -> Rosé statt Gruen. ruhig.js
   setzt .an reihum, nur solange die Liste sichtbar ist; bei Zeiger oder Fokus
   in der Liste haelt der Wechsel an. „Bewegung reduzieren“: kein Wechsel,
   kein Umlauf, Hover zeigt den Rand ruhend. */
@property --umlauf { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.formate a { position: relative; padding: 13px 12px; isolation: isolate; transition: background-color .4s ease; }
.formate a::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--umlauf), rgba(125,211,252,0) 0deg, var(--eis) 70deg, var(--violett) 160deg, #F5A3E6 230deg, rgba(245,163,230,0) 300deg, rgba(125,211,252,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .6s ease; }
@keyframes umlauf { to { --umlauf: 360deg; } }
.formate a:hover, .formate a:focus-visible, .formate a.an { background: linear-gradient(100deg, rgba(125,211,252,0.10), rgba(168,147,255,0.09) 55%, rgba(245,163,230,0.05)); }
.formate a:hover::before, .formate a:focus-visible::before, .formate a.an::before { opacity: 1; animation: umlauf 3s linear infinite; }
.formate a:hover .f-name, .formate a:focus-visible .f-name, .formate a.an .f-name { color: #fff; }
.formate a:hover .f-pfeil, .formate a.an .f-pfeil { color: var(--eis); border-color: rgba(125,211,252,0.55); }
.formate li { border-bottom-color: transparent; }
.formate li + li { border-top: 1px solid var(--linie); }
.formate li:has(a.an, a:hover, a:focus-visible), .formate li:has(a.an, a:hover, a:focus-visible) + li { border-top-color: transparent; }
.f-name { font-weight: 600; font-size: 16.5px; }
.f-rahmen { grid-column: 1; color: var(--text-3); font-size: 14px; }
.f-pfeil { grid-row: 1 / span 2; grid-column: 2; color: var(--mint); width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(61,217,164,0.3); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); }
.formate a:hover .f-pfeil { transform: translateX(3px); }
.f-pfeil svg { width: 16px; height: 16px; }

.ablauf { margin-top: var(--a6); }
.ablauf-titel { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: var(--a4); }
.ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3) var(--a5); counter-reset: schritt; }
.ablauf li { counter-increment: schritt; position: relative; padding-left: 38px; font-size: 14.5px; color: var(--text-2); line-height: 1.4; min-height: 26px; display: flex; align-items: center; }
.ablauf li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--mint); background: rgba(61,217,164,0.10); border: 1px solid rgba(61,217,164,0.3); }
@media (max-width: 420px) { .ablauf ol { grid-template-columns: minmax(0, 1fr); } }

.finder-mini { margin-top: var(--a5); }
.finder-mini label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.finder-feld { display: flex; gap: 8px; }
.finder-feld input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; }
.finder-feld input::placeholder { color: var(--text-3); }
.finder-feld input:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.finder-feld .knopf { padding: 0 20px; }
.chips-label { display: block; font-size: 13px; color: var(--text-3); margin: 12px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-2); text-decoration: none; font-size: 14px; transition: border-color .15s ease, color .15s ease; }
.chips a:hover { border-color: var(--mint); color: #fff; }
.produktbild { margin: var(--a5) 0 0; }
.produktbild img { border-radius: 14px; border: 1px solid var(--linie-stark); width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: left top; }
.produktbild figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; }

.buch-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--a5); align-items: center; margin-top: var(--a5); }
.buch-mini p { color: var(--text-2); font-size: 15px; }
.preise { list-style: none; padding: 0; margin: var(--a3) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.preise li { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-2); }
.preise li.neu { border-color: rgba(255,138,101,0.5); color: #FFD5C7; }
.preise b { color: #fff; font-weight: 600; }

@media (min-width: 900px) {
  /* Angebote als breite Zeile oben, darunter Tools und Buch nebeneinander
     (29.10.2026, Franz: drei gestapelte Karten wirkten unausgewogen). */
  .wege { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--a5); }
  .weg-fortbildung { grid-column: 1 / -1; display: grid; column-gap: var(--a7); align-items: start; padding: var(--a7);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "kopf formate" "titel formate" "text formate" "ablauf formate" "fuss formate";
    grid-template-rows: auto auto auto auto 1fr; }
  .weg-fortbildung > .formate { grid-area: formate; margin-top: 0; }
  .weg-fortbildung > .ablauf { grid-area: ablauf; }
  .weg-fortbildung > .weg-kopf { grid-area: kopf; }
  .weg-fortbildung > h3 { grid-area: titel; }
  .weg-fortbildung > p { grid-area: text; }
  .weg-fortbildung > .weg-fuss { grid-area: fuss; align-self: end; }
  #werkzeuge, .buch-karte { padding: var(--a6); }
  .buch-karte .buch-mini { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: var(--a5); }
  .buch-karte .buch3d-buehne { flex: 1; align-items: center; min-height: 300px; padding: var(--a6) 0; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--linie); }
  .buch-karte .buch3d { width: 150px; }
}

/* ---------- 9. Buch ---------- */
.buch3d-buehne { display: flex; justify-content: center; perspective: 1400px; padding: 6px 0 12px; }
.buch3d { position: relative; width: 100%; aspect-ratio: 720 / 1152; transform: rotateY(-22deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .6s var(--ease); display: block; }
.buch3d img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px 5px 5px 2px; border: 1px solid rgba(0,0,0,0.3); }
.buch3d::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; transform: translateX(-12px) rotateY(-90deg); transform-origin: right; background: #E8E3D8; }
.buch-karte:hover .buch3d, .buch:hover .buch3d { transform: rotateY(-10deg) rotateX(2deg); }

.buch { display: grid; gap: var(--a6); padding: var(--a6) var(--a5); align-items: center; }
.buch .buch3d-buehne { max-width: 220px; margin: 0 auto; width: 100%; }
.buch-etikett { color: var(--koralle); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.buch h2 { margin-top: var(--a3); font-size: clamp(2rem, 4vw, 2.8rem); }
.buch-unter { color: var(--text-2); margin-top: 6px; font-size: var(--fs-gross); }
.buch-zitat { margin: var(--a5) 0 0; padding-left: 20px; border-left: 2px solid var(--mint); }
.buch-zitat p { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-style: italic; line-height: 1.5; }
.buch-zitat em { color: var(--mint); }
.buch-zitat cite { display: block; margin-top: 8px; font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.buch-text { color: var(--text-2); margin-top: var(--a5); max-width: 540px; }
.buch .preise { margin-top: var(--a4); }
.buch-aktionen { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: var(--a5); }
.buch-amazon { display: block; margin-top: var(--a4); font-size: 14px; color: var(--text-3); }
@media (min-width: 900px) {
  .buch { grid-template-columns: 300px minmax(0, 1fr); padding: var(--a7) var(--a8) var(--a7) var(--a7); gap: var(--a8); }
  .buch .buch3d-buehne { max-width: 240px; }
}

/* ---------- 10. Leitsatz ---------- */
.leitsatz { text-align: center; }
.leitsatz-satz { font-size: clamp(1.8rem, 4.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; max-width: 920px; margin: 0 auto; text-wrap: balance; }
.leitsatz-satz span { color: var(--text-2); }
.woerter { display: grid; gap: var(--a4); margin-top: var(--a7); text-align: left; }
.wort { padding: var(--a5); --farbe: var(--mint); }
.wort.creative { --farbe: var(--koralle); } .wort.mind { --farbe: var(--text); } .wort.lab { --farbe: var(--mint); }
.wort-name { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--farbe); line-height: 1; }
.wort-formel { font-weight: 700; margin-top: 10px; font-size: 15px; }
.wort-frage { color: var(--text-2); margin-top: 10px; font-size: 15px; }
.wort-frage span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
@media (min-width: 760px) { .woerter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 11. Stimmen ---------- */
.stimmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4); }
.stimme { padding: var(--a5); margin: 0; position: relative; }
.stimme blockquote { margin: 0; }
.stimme p { font-size: 17px; line-height: 1.55; }
.stimme figcaption { margin-top: var(--a4); font-size: 14px; color: var(--text-3); }
.stimme figcaption b { display: block; color: var(--text-2); font-weight: 600; }
.stimme-gross { padding: var(--a6) var(--a5); display: flex; flex-direction: column; }
.stimme-gross p { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.42; font-weight: 500; letter-spacing: -0.015em; }
.stimme-inhalt { transition: opacity .3s ease; }
.stimme-inhalt.wechselt { opacity: 0; }
.stimme-steuerung { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--a5); }
.stimme-steuerung button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie-stark); background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stimme-steuerung button:hover { border-color: var(--mint); color: var(--mint); }
.stimme-steuerung svg { width: 18px; height: 18px; }
.stimme-zaehler { font-size: 13px; color: var(--text-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .stimmen { grid-template-columns: 1.45fr 1fr; }
  .stimme-gross { grid-row: span 2; padding: var(--a7); }
}

/* ---------- 12. Ueber mich ---------- */
.arbeitsweise { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a7); align-items: center; }
.arbeit-bild { margin: 0; max-width: 460px; }
.arbeit-bild img { border-radius: var(--radius-bild); border: 1px solid var(--linie-stark); aspect-ratio: 1; object-fit: cover; width: 100%; }
.rollen { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--a5) 0 0; padding: 0; list-style: none; }
.rollen li { font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px; color: var(--mint); border: 1px solid rgba(61,217,164,0.3); }
.arbeitsweise-text > p { color: var(--text-2); font-size: var(--fs-gross); margin-top: var(--a4); max-width: 580px; }
.merkmale { list-style: none; margin: var(--a6) 0 0; padding: 0; display: grid; gap: var(--a5); }
.merkmale li { padding-left: 56px; position: relative; }
.merkmale .m-icon { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(61,217,164,0.25); color: var(--mint); }
.merkmale .m-icon svg { width: 19px; height: 19px; }
.merkmale h3 { font-size: 17px; }
.merkmale p { color: var(--text-2); font-size: 15px; margin-top: 4px; }
@media (min-width: 900px) { .arbeitsweise { grid-template-columns: 0.85fr 1.15fr; gap: var(--a8); } }

/* ---------- 13. Aktuell ---------- */
.aktuell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4); }
.karte { overflow: hidden; display: flex; flex-direction: column; }
.karte-bild { aspect-ratio: 16 / 9; background: var(--band); overflow: hidden; display: block; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-bild.sterne svg { width: 100%; height: 100%; display: block; }
.karte-text { padding: var(--a5); display: flex; flex-direction: column; flex: 1; }
.karte-meta { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.marke-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; margin-right: 8px; border: 1px solid rgba(61,217,164,.35); color: var(--mint); }
.marke-tag.neu { border-color: rgba(255,138,101,.45); color: #FFB199; }
.karte h3 a { color: #fff; text-decoration: none; }
.karte h3 a:hover { color: var(--mint); }
.karte-text > p { color: var(--text-2); margin-top: 8px; font-size: 15px; }
.karte-links { margin-top: auto; padding-top: var(--a4); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.podcast { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--a4); align-items: center; padding: var(--a4); margin-top: var(--a4); text-decoration: none; color: #fff; }
.podcast img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 82% 40%; border-radius: 12px; }
.podcast .p-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--koralle); }
.podcast strong { display: block; font-size: 17px; margin-top: 2px; }
.podcast .p-meta { color: var(--text-3); font-size: 14px; }
.podcast .textlink { grid-column: 2; }
@media (min-width: 760px) {
  .aktuell { grid-template-columns: 1fr 1fr; }
  .podcast { grid-template-columns: 96px minmax(0, 1fr) auto; padding: var(--a4) var(--a5) var(--a4) var(--a4); }
  .podcast .textlink { grid-column: 3; }
}

/* ---------- 14. Human Agency Circle ---------- */
.hac { padding: var(--a6) var(--a5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a6); }
.hac p { color: var(--text-2); margin-top: var(--a4); }
.hac p strong { color: #fff; }
.hac-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.hac-zahlen div { padding: 18px 14px; text-align: center; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.hac-zahlen div:nth-child(2n) { border-right: 0; }
.hac-zahlen div:nth-child(n+3) { border-bottom: 0; }
.hac-zahlen b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hac-zahlen span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.hac-aktionen { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: var(--a5); }
@media (min-width: 900px) { .hac { grid-template-columns: 1.3fr 1fr; padding: var(--a7); align-items: center; } }

/* ---------- 15. Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 600; font-size: 15px; }
.feld .hilfe { font-size: 13px; color: var(--text-3); }
.feld input, .feld select, .feld textarea { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; width: 100%; }
.feld select option { background: #0D1829; }
.feld textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.feld [aria-invalid="true"] { border-color: #FF8A8A; }
.fehler { font-size: 14px; color: #FFA3A3; }
.fehler:empty { display: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mint); flex: none; }
.meldung { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.meldung-info { background: var(--karte-hoch); border: 1px solid var(--rand-hoch); color: #CFF7E8; }
.meldung-ok { background: var(--karte-hoch); border: 1px solid var(--rand-hoch); color: #CFF7E8; }
.meldung pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; color: var(--text-2); margin: 10px 0 0; }

.newsletter { padding: var(--a6) var(--a5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a5); }
.newsletter p { color: var(--text-2); margin-top: var(--a3); }
.nl-form { display: grid; gap: var(--a3); }
.nl-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-zeile input { flex: 1 1 220px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; }
.nl-klein { font-size: 13px; color: var(--text-3); }
@media (min-width: 900px) { .newsletter { grid-template-columns: 1fr 1fr; padding: var(--a7); align-items: center; } }

/* ---------- 16. Fuss ---------- */
.fuss { border-top: 1px solid var(--linie); padding: var(--a6) 0 var(--a7); font-size: 14px; color: var(--text-3); }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fuss a { color: var(--text-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.fuss a:hover { color: #fff; }
.fuss .ak { color: var(--mint); }

/* ---------- 17. Angebots-Ausschnitt (fuer Stufe B) ---------- */
.formatwahl { display: grid; gap: var(--a4); }
.format { padding: var(--a5); display: flex; flex-direction: column; text-decoration: none; color: #fff; }
.format .f-art { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.format h3 { margin-top: 6px; }
.format dl { margin: var(--a4) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.format dt { color: var(--text-3); }
.format dd { margin: 0; color: var(--text-2); }
.format .textlink { margin-top: auto; padding-top: var(--a4); }
.format.musik .f-art, .format.kreativ .f-art { color: #FFB199; }
@media (min-width: 700px) { .formatwahl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .formatwahl { grid-template-columns: repeat(3, 1fr); } }


/* ---------- 18a. Bausteine, die main.js und cml-hinweis.js erzeugen ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; width: 100%; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-social { display: flex; gap: 8px; width: 100%; margin-bottom: var(--a4); }
.social-icon-link { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--linie-stark); color: var(--text-2) !important; }
.social-icon-link:hover { border-color: var(--mint); color: var(--mint) !important; }
#cml-messhinweis { width: 100%; margin: var(--a3) 0 0; font-size: 13px; color: var(--text-3); }
#cml-messhinweis a, #cml-messhinweis button { color: var(--mint); }
/* Der Fuss bleibt dunkel, auch wenn eine Seite im Hellmodus laeuft */
.fuss #cml-messhinweis { color: #8B9BB4 !important; }
.fuss #cml-messhinweis a, .fuss #cml-messhinweis button { color: #3DD9A4 !important; }
.field-error-msg { font-size: 14px; color: #FFA3A3; }
.field-error-msg:empty { display: none; }
[aria-invalid="true"] { border-color: #FF8A8A !important; }
.nl-status { display: none; padding: 14px 16px; border-radius: 12px; font-size: 15px; background: var(--karte-hoch); border: 1px solid var(--rand-hoch); color: #CFF7E8; }
.nl-status.fehlerstatus { border-color: rgba(255,138,138,0.5); color: #FFC2C2; }
/* Newsletter-Modal (nur falls eine Seite [data-nl-modal] nutzt) */
.nl-modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(8,14,26,0.85); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s ease; }
.nl-modal-overlay.is-open { opacity: 1; }
.nl-modal { position: relative; width: min(480px, 100%); background: var(--karte-hoch); border: 1px solid var(--rand-hoch); border-radius: var(--radius); padding: var(--a6); }
.nl-modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie-stark); background: none; color: #fff; cursor: pointer; }
.nl-modal .hero-badge { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.nl-modal-desc { color: var(--text-2); margin-top: 8px; }
.nl-modal .newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-modal input[type="email"] { flex: 1 1 100%; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; }
.nl-modal .btn { min-height: 48px; border-radius: 999px; border: 0; background: var(--mint); color: var(--mint-dunkel); font-weight: 700; cursor: pointer; }

/* ============================================================
   20. BESTANDSSEITEN (body.ruhig-bestand)
   Unterseiten behalten ihren Inhalt und ihre Klassen aus der Zeit vor
   „Ruhig“. Dieser Block uebersetzt diese Klassen und die alten
   Variablen in den flachen Look, damit jede Seite ohne Umschreiben
   des Inhalts umgestellt werden kann.
   ============================================================ */
body.ruhig-bestand {
  /* alte Variablen → neue Werte (Inline-Stile der Seiten greifen darauf zu) */
  --bg-darkest: #0D1829; --bg-dark: #0D1829; --bg-mid: #0F1E34;
  --card-bg: #13233D; --card-bg-solid: #13233D;
  --card-border: rgba(255,255,255,0.09); --card-border-top: rgba(255,255,255,0.09); --card-border-hover: rgba(255,255,255,0.16);
  --card-radius: 22px; --card-radius-sm: 22px; --card-shadow: none;
  --schatten-ruhe: none; --schatten-hover: none; --glas-grund: none;
  --glow-teal: none; --glow-blue: none; --saison-glow: none;
  --saison: #3DD9A4; --saison-light: #5BE3B5; --saison-bg: rgba(61,217,164,0.10); --saison-border: rgba(61,217,164,0.3);
  --teal: #3DD9A4; --teal-light: #5BE3B5; --teal-dark: #2AB88A; --teal-glow: none;
  --teal-bg: rgba(61,217,164,0.10); --teal-border: rgba(61,217,164,0.30);
  --violett: #A893FF; --violett-glow: transparent;
  --btn-teal-bg: #3DD9A4; --btn-teal-text: #062A1E; --btn-radius: 999px;
  --text-primary: #FFFFFF; --text-secondary: #A8BAD0; --text-muted: #8B9BB4;
  --font-display: clamp(2.4rem, 5vw, 3.6rem); --font-h1: clamp(2rem, 4.4vw, 3rem); --font-h2: var(--fs-h2); --font-h3: var(--fs-h3);
  --font-body-lg: 1.125rem; --font-body: 1rem; --font-small: 0.875rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px; --sp-10: 96px;
  --max-width: 1180px; --header-height: 68px;
}
body.ruhig-bestand main section { position: relative; padding: var(--a8) 0; }
@media (min-width: 900px) { body.ruhig-bestand main section { padding: var(--a9) 0; } }
body.ruhig-bestand main > section:nth-of-type(even) { background: var(--band); }
body.ruhig-bestand .container { width: 100%; max-width: var(--huelle); margin: 0 auto; padding: 0 16px; position: relative; }
@media (min-width: 600px) { body.ruhig-bestand .container { padding: 0 32px; } }
body.ruhig-bestand main p { color: var(--text-2); line-height: 1.7; }
body.ruhig-bestand main h1 { font-size: var(--font-h1); letter-spacing: -0.035em; line-height: 1.05; font-weight: 800; }
body.ruhig-bestand main h2 { font-size: var(--fs-h2); font-weight: 800; }
body.ruhig-bestand main h3 { font-size: var(--fs-h3); font-weight: 700; }
body.ruhig-bestand main h4 { font-size: 1.05rem; font-weight: 700; margin: 0; }
body.ruhig-bestand .display { font-size: var(--font-display); }
body.ruhig-bestand h1 .text-teal, body.ruhig-bestand h1 .grad-accent { color: var(--violett); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
body.ruhig-bestand .text-teal { color: var(--mint); }
body.ruhig-bestand h2 .text-teal, body.ruhig-bestand h3 .text-teal { color: var(--text-2); }
body.ruhig-bestand .text-center { text-align: center; }
body.ruhig-bestand .mb-md { margin-bottom: var(--a6); }
body.ruhig-bestand .section-label, body.ruhig-bestand .hero-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
body.ruhig-bestand .section-label.text-center, body.ruhig-bestand .text-center > .section-label { display: block; }
body.ruhig-bestand .page-hero { padding: var(--a8) 0 var(--a6); text-align: left; }
body.ruhig-bestand .page-hero .hero-badge { margin-bottom: var(--a4); }
body.ruhig-bestand .page-hero h1 { max-width: 900px; }
body.ruhig-bestand .lead { font-size: 1.1875rem; color: var(--text-2); max-width: 680px; margin-top: var(--a4); line-height: 1.6; }
body.ruhig-bestand .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: var(--a5); justify-content: flex-start !important; }
body.ruhig-bestand .breadcrumb a { color: var(--text-3); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
body.ruhig-bestand .breadcrumb a:hover { color: var(--mint); }
body.ruhig-bestand .card { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a6) var(--a5); box-shadow: none; transition: border-color .2s ease; }
body.ruhig-bestand a.card:hover { border-color: var(--linie-stark); }
body.ruhig-bestand .card::before, body.ruhig-bestand .card::after { content: none; }
body.ruhig-bestand .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--knopf-hoehe); padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center; border: 1px solid var(--mint); background: transparent; color: var(--mint); box-shadow: none; transform: none; max-width: 100%; }
body.ruhig-bestand .btn:hover { background: rgba(61,217,164,0.10); transform: none; box-shadow: none; }
body.ruhig-bestand .btn-teal { background: var(--mint); color: var(--mint-dunkel); border-color: var(--mint); }
body.ruhig-bestand .btn-teal:hover { background: var(--mint-hover); color: var(--mint-dunkel); }
body.ruhig-bestand .btn-ghost { background: transparent; color: var(--mint); border-color: var(--mint); }
body.ruhig-bestand .feature-list { display: flex; flex-direction: column; gap: var(--a3); list-style: none; padding: 0; margin: 0; text-align: left; }
body.ruhig-bestand .feature-list li { position: relative; padding-left: 26px; color: var(--text-2); line-height: 1.55; }
body.ruhig-bestand .feature-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
body.ruhig-bestand .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a5); }
body.ruhig-bestand .grid-3, body.ruhig-bestand .doors-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a4); }
@media (max-width: 860px) { body.ruhig-bestand .grid-2, body.ruhig-bestand .grid-3, body.ruhig-bestand .doors-grid { grid-template-columns: minmax(0, 1fr); } }
body.ruhig-bestand .door-card { display: flex; flex-direction: column; }
body.ruhig-bestand .door-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(61,217,164,0.10); border: 1px solid rgba(61,217,164,0.25); color: var(--mint); margin-bottom: var(--a4); }
body.ruhig-bestand .door-card h3 { margin-bottom: var(--a2); }
body.ruhig-bestand .door-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--mint); text-decoration: none; margin-top: auto; padding-top: var(--a4); min-height: 32px; }
body.ruhig-bestand .door-link:hover { text-decoration: underline; }
body.ruhig-bestand .tag-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--mint); background: transparent; border: 1px solid rgba(61,217,164,0.35); }
body.ruhig-bestand .form-group { display: flex; flex-direction: column; gap: 6px; }
body.ruhig-bestand .form-group label { font-size: 15px; font-weight: 600; color: #fff; }
body.ruhig-bestand .form-group input, body.ruhig-bestand .form-group select, body.ruhig-bestand .form-group textarea { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; width: 100%; }
body.ruhig-bestand .form-group textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
body.ruhig-bestand .form-group select option { background: #0D1829; }
body.ruhig-bestand [data-fade] { opacity: 1 !important; transform: none !important; }
body.ruhig-bestand .brand-name .accent { color: var(--mint); }
body.ruhig-bestand .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--mint); color: var(--mint-dunkel); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
body.ruhig-bestand .skip-link:focus { top: 12px; }

/* Produktleiste (Seiten, die einem einzelnen Werkzeug gehoeren), flach ohne Unschaerfe */
body.mit-produktleiste .kopf { position: relative; }
.produktleiste { position: sticky; top: 0; z-index: 90; background: var(--grund); border-bottom: 1px solid var(--linie); }
.produktleiste .container { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--a4); padding-top: 6px; padding-bottom: 6px; }
.pl-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-logo { border-radius: 7px; flex: none; display: block; }
.pl-name { font-weight: 800; font-size: 1rem; letter-spacing: -0.022em; color: #fff; white-space: nowrap; }
.pl-sub { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; border-left: 1px solid var(--linie); }
.pl-rechts { display: flex; align-items: center; gap: var(--a3); flex: none; }
.pl-link { font-size: 0.875rem; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.pl-link:hover { color: var(--mint); text-decoration: underline; }
body.ruhig-bestand .pl-btn { min-height: 44px; padding: 0 16px; font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 900px) { .pl-sub { display: none; } }
@media (max-width: 640px) { .pl-link { display: none; } .pl-name { font-size: 0.92rem; } body.ruhig-bestand .pl-btn { padding: 0 12px; font-size: 0.8rem; } }
.pl-btn .kurz { display: none; }
@media (max-width: 460px) { .pl-btn .lang { display: none; } .pl-btn .kurz { display: inline; } }
body.mit-produktleiste :target { scroll-margin-top: 72px; }
@media print { .produktleiste { display: none !important; } }

/* Bausteine einzelner Bestandsseiten (aus styles.css uebernommen, flach) */
body.ruhig-bestand .breadcrumb-sep { opacity: .5; }
body.ruhig-bestand .prose h2 { font-size: 1.35rem; margin: var(--a7) 0 var(--a4); padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); }
body.ruhig-bestand .prose h3 { font-size: 1.05rem; margin: var(--a6) 0 var(--a3); color: var(--text-2); }
body.ruhig-bestand .prose p { font-size: 16px; margin-bottom: var(--a4); line-height: 1.75; }
body.ruhig-bestand .prose a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
body.ruhig-bestand .prose ul { list-style: disc; padding-left: var(--a6); color: var(--text-2); font-size: 16px; line-height: 1.75; margin-bottom: var(--a4); }
body.ruhig-bestand .prose ul li { margin-bottom: var(--a2); }
body.ruhig-bestand .byline { font-size: 0.85rem; color: var(--text-3); margin: 0.75rem 0 0; font-style: italic; }
body.ruhig-bestand .contact-form { display: flex; flex-direction: column; gap: var(--a4); }
body.ruhig-bestand .newsletter-section, body.ruhig-bestand .newsletter-cta-card { position: relative; background: var(--karte-hoch); border: 1px solid var(--rand-hoch); border-radius: var(--radius); padding: var(--a7) var(--a6); text-align: center; max-width: 640px; margin: 0 auto; box-shadow: none; }
body.ruhig-bestand .newsletter-section::before, body.ruhig-bestand .newsletter-section::after, body.ruhig-bestand .newsletter-cta-card::before, body.ruhig-bestand .newsletter-cta-card::after { content: none; }
@media (max-width: 600px) { body.ruhig-bestand .newsletter-section, body.ruhig-bestand .newsletter-cta-card { padding: var(--a6) var(--a4); } }
body.ruhig-bestand .newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 460px; margin: var(--a5) auto 0; }
body.ruhig-bestand .newsletter-form input[type="email"] { flex: 1 1 220px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--grund); color: #fff; }
body.ruhig-bestand .values-trio { display: flex; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: var(--a5); }
body.ruhig-bestand .values-item { flex: 1; min-width: 100px; text-align: center; padding: 0 16px; border-right: 1px solid var(--linie); }
body.ruhig-bestand .values-item--last { border-right: none; }
body.ruhig-bestand .values-label { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
body.ruhig-bestand .values-sub { font-size: 13px; color: var(--text-3); }
@media (max-width: 600px) { body.ruhig-bestand .values-trio { flex-direction: column; gap: 12px; } body.ruhig-bestand .values-item { border-right: none; border-bottom: 1px solid var(--linie); padding: 12px 0; } body.ruhig-bestand .values-item--last { border-bottom: none; } }
body.ruhig-bestand .music-info-row { display: flex; gap: var(--a6); align-items: flex-start; }
@media (max-width: 768px) { body.ruhig-bestand .music-info-row { flex-direction: column; } body.ruhig-bestand .vis-divider { display: none !important; } }
body.ruhig-bestand .vis-divider { width: 1px; align-self: stretch; background: var(--linie); }
body.ruhig-bestand .btn-primary { background: var(--mint); color: var(--mint-dunkel); border-color: var(--mint); }
body.ruhig-bestand .btn-purple { background: transparent; color: var(--mint); border-color: var(--mint); }
body.ruhig-bestand .btn-orange { background: var(--koralle); color: #1A0E0A; border-color: var(--koralle); }
body.ruhig-bestand .btn-orange:hover { background: #FF9E7E; color: #1A0E0A; }
body.ruhig-bestand .btn-book { background: transparent; color: var(--koralle); border-color: var(--koralle); }
body.ruhig-bestand .btn-book-new, body.ruhig-bestand .badge-sun { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--koralle); }
body.ruhig-bestand .hero-badge-summer { color: var(--koralle); }
body.ruhig-bestand .saison { color: inherit; }
/* Medien / Im Gespraech */
body.ruhig-bestand .medien-hero { padding: var(--a8) 0 var(--a6); }
body.ruhig-bestand main section.medien-block { padding: var(--a8) 0 0; background: none; }
body.ruhig-bestand main section.medien-block--erst { padding-top: var(--a6); }
body.ruhig-bestand main section.medien-block--letzt { padding-bottom: var(--a9); }
body.ruhig-bestand .podcast-bild { line-height: 0; border-bottom: 1px solid var(--linie); }
body.ruhig-bestand .podcast-bild img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
body.ruhig-bestand .podcast-kopf { padding: 24px 28px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 20px; background: none; }
body.ruhig-bestand .podcast-kopf-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--mint); text-transform: uppercase; margin-bottom: 6px; }
body.ruhig-bestand .podcast-kopf-titel { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.25; }
body.ruhig-bestand .podcast-kopf-meta { font-size: 13px; color: var(--text-3); margin-top: 4px; }
body.ruhig-bestand .podcast-text { padding: 22px 28px 20px; }
body.ruhig-bestand .podcast-vorschau { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 18px 22px; background: var(--band); border-top: 1px solid var(--linie); }
body.ruhig-bestand .pv-cover { width: 86px; height: 86px; flex-shrink: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mint); background: var(--karte-hoch); border: 1px solid var(--rand-hoch); }
body.ruhig-bestand .pv-cover svg { width: 26px; height: 26px; }
body.ruhig-bestand .pv-cover-marke { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--text-2); }
body.ruhig-bestand .pv-text { flex: 1 1 160px; min-width: 0; }
body.ruhig-bestand .pv-titel { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 7px; }
body.ruhig-bestand .pv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-2); margin-bottom: 7px; }
body.ruhig-bestand .pv-dauer { font-weight: 700; color: var(--mint); padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(61,217,164,0.3); font-size: 12px; }
body.ruhig-bestand .pv-hinweis { font-size: 12px; color: var(--text-3); line-height: 1.45; }
body.ruhig-bestand .pv-hinweis a { color: var(--mint); text-decoration: underline; }
body.ruhig-bestand .pv-play { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; min-height: 48px; padding: 0 22px 0 18px; border: none; border-radius: 999px; background: var(--mint); color: var(--mint-dunkel); font-size: 15px; font-weight: 700; cursor: pointer; }
body.ruhig-bestand .pv-play svg { width: 18px; height: 18px; }
@media (max-width: 600px) { body.ruhig-bestand .pv-play { width: 100%; justify-content: center; } body.ruhig-bestand .podcast-kopf { flex-direction: column; align-items: flex-start; padding: 20px; } body.ruhig-bestand .podcast-text { padding: 18px 20px 16px; } }
body.ruhig-bestand .hero-text-col .breadcrumb { justify-content: flex-start !important; }
body.ruhig-bestand code, body.ruhig-bestand kbd, body.ruhig-bestand pre, body.ruhig-bestand samp { font-family: inherit; }
body.ruhig-bestand .ribbon { background: var(--koralle) !important; color: #1A0E0A !important; }
body.ruhig-bestand .how-step .how-num { background: var(--mint) !important; color: var(--mint-dunkel) !important; }
body.ruhig-bestand hr { border: 0; border-top: 1px solid var(--linie); }
/* Tiefe auch fuer die Werkzeugkarten der Tools-Seiten (29.10.2026) */
body.ruhig-bestand .sig-card, body.ruhig-bestand .tcard {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%), var(--karte);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.28), 0 22px 44px -22px rgba(0,0,0,0.65);
}
body.ruhig-bestand .sig-card::before, body.ruhig-bestand .tcard::before { height: 1px; opacity: 1; background: linear-gradient(90deg, rgba(168,147,255,0) 6%, rgba(168,147,255,0.55) 32%, rgba(61,217,164,0.55) 68%, rgba(61,217,164,0) 94%); }
body.ruhig-bestand .sig-card:hover, body.ruhig-bestand .tcard:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.3), 0 30px 56px -24px rgba(0,0,0,0.75); }

/* ---------- 17b. Lesbarkeit (29.10.2026, Franz: Erklaertexte zu klein) ----------
   Gemessen: auf den Bestandsseiten lagen viele Erklaertexte bei 12,4–14,5 px.
   Lesetext jetzt mindestens 16 px, ab 900 px Fliesstext 17 px; Hinweise und
   Fussnoten mindestens 14,5 px. Groessere Einleitungen bleiben unberuehrt. */
@media (min-width: 900px) { :root { --fs-text: 1.0625rem; } }
.hero-neu, .buch-mini p, .merkmale p, .karte-text > p, .wort-frage, .wort-formel { font-size: 16px; }
.ablauf li { font-size: 15.5px; }
.ablauf-titel { font-size: 16px; }
.f-rahmen, .portraet-rolle, .person-zeile .portraet-rolle, .stimme figcaption, .podcast .p-meta, .check, .format dl { font-size: 15px; }
.chips-label, .kennzahlen span, .produktbild figcaption, .preise li, .karte-meta, .nl-klein, .feld .hilfe, .stimme-zaehler, #cml-messhinweis { font-size: 14px; }
.chips a { font-size: 15px; }
body.ruhig-bestand main :is(p, li, td, dd, figcaption):not(.lead, .lead-sm, .tool-desc, .intro, .artikel-intro, .warum-cml-leitsatz, .hero-text, .hero-claim, [style*="clamp"]) { font-size: 16px !important; }
body.ruhig-bestand main blockquote p { font-size: 1.05rem !important; }
@media (min-width: 900px) { body.ruhig-bestand main :is(.artikel-body, .prose) > p { font-size: 17px !important; } }
body.ruhig-bestand main :is(.fussnote p, p.fussnote-schluss, p.cml-reaktionen-hinweis, p.hac-note, p.hac-rechnung, p.rechtshinweis, p.klein, p.hinweis, p.offer-note, figcaption) { font-size: 14.5px !important; }
body.ruhig-bestand .tool-group-sub, body.ruhig-bestand .sig-price, body.ruhig-bestand .tcard-price, body.ruhig-bestand .tool-price-note, body.ruhig-bestand .transparenz { font-size: 14px; }

/* ---------- 18. Sanftes Einblenden: nur mit JavaScript, sonst sofort sichtbar ---------- */
.js-zeigen [data-zeigen] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-zeigen [data-zeigen].da { opacity: 1; transform: none; }
.js-zeigen [data-zeigen="2"] { transition-delay: .08s; }
.js-zeigen [data-zeigen="3"] { transition-delay: .16s; }

/* ---------- 19. Bewegung reduzieren: steht bewusst ganz am Ende ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .textlink:hover svg, .knopf:hover svg, .formate a:hover .f-pfeil { transform: none !important; }
  .buch-karte:hover .buch3d, .buch:hover .buch3d { transform: rotateY(-22deg) rotateX(3deg) !important; }
  .js-zeigen [data-zeigen] { opacity: 1 !important; transform: none !important; }
  a.flaeche:hover, .hebt:hover, body.ruhig-bestand a.card:hover { transform: none !important; }
  .formate a::before { --umlauf: 200deg; }
}