/* Generiert: php artisan website:inhaltsstil. Quelle backend/resources/views/inhalte/_stil.blade.php
 und _landing.blade.php. Nicht von Hand aendern. */
/* ════════════════════════════════════════════════════════════════════
     Designsystem der Inhaltsseiten (Ratgeber, Artikel, Branchen, Berufe,
     Werkzeuge, News). Sprache der Azubi-Roadmap: gelber Kopf mit
     Punktraster, weisse Karten mit schwarzem Rand und hartem farbigem
     Schatten, kraeftige Typo, Lucide-Icons. Akzentfarben wie
     AzubiRoadmap::AKZENTE (alle mit schwarzer Schrift ueber 7:1).
     Bewegung nur bei prefers-reduced-motion: no-preference.
     ════════════════════════════════════════════════════════════════════ */
  :root { --tinte: #111; --rand: #e6e6e1; --weich: #fffbe6; --akzent: var(--gelb); }
  /* Der gelbe Kopf reicht bis an den Rand; clip verhindert seitliches Scrollen. */
  body { overflow-x: clip; }
  main.huelle :focus-visible { outline: 3px solid #000; outline-offset: 3px; }
  main.huelle svg { flex-shrink: 0; }
  .huelle--breit { max-width: 1160px; }
  h1, h2, h3 { text-wrap: balance; }
  .ih-icon svg, .ih-i { width: 1em; height: 1em; display: block; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  /* Die Navbar klebt oben (70px): Sprungziele sonst darunter versteckt. */
  h2[id], h3[id], .faq-block h2, [id].ih-sprungziel { scroll-margin-top: 96px; }

  /* ── Kopf ──────────────────────────────────────────────────────────── */
  .ih-held {
    margin: calc(-1 * clamp(28px, 5vw, 44px)) calc(50% - 50vw) 0;
    background-color: var(--gelb);
    background-image: radial-gradient(rgba(0,0,0,.09) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
    padding: clamp(28px, 5vw, 56px) 20px clamp(36px, 5vw, 56px);
    border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
  }
  .ih-held-innen { max-width: 1120px; margin: 0 auto; }
  .ih-held-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 56px); align-items: end; }
  .ih-held-kopf--eins { grid-template-columns: minmax(0, 1fr); }
  .ih-held h1 { font-size: clamp(32px, 4.8vw, 54px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 20ch; color: #000; }
  .ih-held .vorspann, .ih-vorspann { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: #000; margin: 0; max-width: 40em; font-weight: 500; }
  .ih-held .vorspann a { color: #000; }
  .ih-held .vorspann + .vorspann { margin-top: 12px; }
  /* Badge oben im Kopf: zeigt, wo man ist, und fuehrt eine Ebene zurueck. */
  .ih-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px 6px 10px;
    background: var(--tinte); color: var(--gelb); border-radius: 999px; text-decoration: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
  }
  .ih-badge svg { width: 15px; height: 15px; }
  span.ih-badge { padding-left: 14px; }
  a.ih-badge:hover { background: #000; text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    a.ih-badge svg { transition: transform .2s ease; }
    a.ih-badge:hover svg { transform: translateX(-3px); }
  }
  .ih-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
  .ih-meta li { margin: 0; }
  .ih-meta li > span, .ih-meta a {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 999px;
    background: rgba(255,255,255,.8); border: 1.5px solid var(--tinte); color: #000;
    font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none;
  }
  .ih-meta svg { width: 16px; height: 16px; }
  .ih-meta a { background: var(--tinte); color: #fff; }
  .ih-meta a b { color: var(--gelb); }
  .ih-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ih-held-icon { display: flex; align-items: center; gap: 18px; }
  .ih-held-icon h1 { margin-bottom: 0; }
  .ih-held-icon .bi { border: 3px solid var(--tinte); background: #fff; box-shadow: 5px 5px 0 var(--tinte); }
  .ih-held-unten { margin-top: clamp(24px, 3.4vw, 36px); }
  /* Dunkler Kasten rechts im Kopf: Eckdaten wie in der Roadmap. */
  .ih-eckdaten { list-style: none; margin: 0; padding: 8px 22px; background: var(--tinte); color: #fff; border-radius: 22px; display: grid; }
  .ih-eckdaten li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 0; font-size: 15px; line-height: 1.3; }
  .ih-eckdaten li + li { border-top: 1px solid rgba(255,255,255,.14); }
  .ih-eck-wert { flex: 0 0 60px; font-size: 30px; font-weight: 900; color: var(--gelb); line-height: 1; letter-spacing: -0.02em; }
  .ih-eck-wert svg { width: 28px; height: 28px; }
  /* Lange Woerter (Handwerkskammer) duerfen nicht in die Nachbarspalte laufen. */
  .ih-eckdaten li { min-width: 0; }
  .ih-eckdaten li > span:last-child { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

  /* ── Raster: Text plus klebende Seitenleiste ───────────────────────── */
  .ih-raster { display: block; margin-top: clamp(36px, 5vw, 56px); }
  .ih-haupt { max-width: 740px; margin: 0 auto; min-width: 0; }
  .ih-seite { display: none; }
  .ih-spalte { max-width: 820px; margin: clamp(36px, 5vw, 56px) auto 0; }
  .ih-spalte--breit { max-width: 1120px; }
  .ih-spalte > h2:first-child { margin-top: 0; }
  @media (min-width: 1100px) {
    .ih-raster { display: grid; grid-template-columns: minmax(0, 740px) 280px; gap: 64px; justify-content: center; align-items: start; }
    .ih-haupt { margin: 0; }
    .ih-seite { display: block; height: 100%; }
    .ih-kleben { position: sticky; top: 96px; }
    .ih-haupt > .inhaltsverzeichnis { display: none; }
  }

  /* ── Fliesstext ────────────────────────────────────────────────────── */
  .artikel { font-size: 18px; line-height: 1.72; color: #1d1d1d; }
  .artikel > p, .artikel > ul, .artikel > ol, .artikel li { max-width: 68ch; }
  .artikel p { margin: 0 0 1.1em; }
  .artikel > *:first-child { margin-top: 0; }
  .artikel h2, .ih-haupt > h2, .ih-spalte > h2, .ih-abschnitt > h2 {
    font-size: clamp(25px, 3vw, 32px); font-weight: 900; line-height: 1.15; letter-spacing: -0.018em;
    margin: clamp(44px, 6vw, 60px) 0 16px; color: #000; position: relative;
  }
  .artikel h3 { font-size: clamp(19px, 2.3vw, 22px); font-weight: 800; line-height: 1.3; margin: 32px 0 10px; color: #000; }
  .artikel ul, .artikel ol { padding-left: 1.3em; margin: 0 0 1.2em; }
  .artikel li { margin: 8px 0; padding-left: 4px; }
  .artikel ul:not([class]) > li::marker { color: #000; content: "■  "; font-size: .62em; }
  .artikel ol:not([class]) > li::marker { font-weight: 900; }
  .artikel a:not([class]), .ih-haupt p a:not([class]), .ih-spalte p a:not([class]) { color: #000; font-weight: 700; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 3px; }
  .artikel a:not([class]):hover, .ih-haupt p a:not([class]):hover, .ih-spalte p a:not([class]):hover { background: var(--weich); text-decoration-color: #000; }
  .artikel strong { font-weight: 800; color: #000; }
  /* Anker an Zwischenueberschriften (per Skript, ohne JS einfach nicht da). */
  .ih-anker { position: absolute; left: -1.1em; top: 50%; transform: translateY(-50%); width: .9em; height: .9em; display: grid; place-items: center; color: #8a8a8a; opacity: 0; text-decoration: none !important; background: none !important; }
  .ih-anker svg { width: .55em; height: .55em; }
  h2:hover > .ih-anker, .ih-anker:focus-visible { opacity: 1; }
  @media (max-width: 899px) { .ih-anker { display: none; } }
  .stand-zeile { color: var(--leise); font-size: 14px; margin: 0 0 18px; }
  .leise { color: var(--leise); }
  .text { white-space: normal; }

  /* ── Inhaltsverzeichnis (Handy, im Text) und Seitenleiste (Desktop) ── */
  .inhaltsverzeichnis { border: 2px solid var(--tinte); border-radius: 20px; padding: 16px 20px 12px; margin: 0 0 32px; background: #fff; }
  .iv-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte); }
  .iv-titel svg { width: 16px; height: 16px; }
  .inhaltsverzeichnis ol { margin: 0; padding: 0; list-style: none; counter-reset: iv; }
  .inhaltsverzeichnis li { counter-increment: iv; margin: 0; border-top: 1px dashed var(--rand); }
  .inhaltsverzeichnis li:first-child { border-top: 0; }
  .inhaltsverzeichnis a { display: flex; gap: 10px; padding: 9px 0; text-decoration: none; font-weight: 700; font-size: 15.5px; line-height: 1.35; color: #000; }
  .inhaltsverzeichnis a::before { content: counter(iv, decimal-leading-zero); font-size: 12px; font-weight: 900; color: #6b6b6b; padding-top: 3px; font-variant-numeric: tabular-nums; }
  .inhaltsverzeichnis a:hover { text-decoration: underline; }
  .seiten-iv { border: 2px solid var(--tinte); border-radius: 22px; padding: 18px 16px 12px; background: #fff; box-shadow: 6px 6px 0 var(--gelb); }
  .seiten-iv .iv-titel { margin: 0 4px 10px; }
  .seiten-iv ol { list-style: none; margin: 0; padding: 0; }
  .seiten-iv li { margin: 0; }
  .seiten-iv a {
    display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px;
    color: #444; text-decoration: none; font-size: 14.5px; line-height: 1.35; font-weight: 600;
  }
  .seiten-iv a::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--rand); transform: translateY(-1px); }
  .seiten-iv a:hover { color: #000; background: var(--weich); }
  /* .vorbei gibt es auch global (beendete Stelle im Seitenlayout): hier zuruecksetzen. */
  .seiten-iv a.vorbei { color: #000; background: none; border: 0; border-radius: 12px; padding: 8px 10px; margin: 0; font-size: 14.5px; }
  .seiten-iv a.vorbei:hover { background: var(--weich); }
  .seiten-iv a.vorbei::before { background: var(--tinte); }
  .seiten-iv a.aktiv { color: #000; font-weight: 800; background: var(--gelb); }
  .seiten-iv a.aktiv::before { background: var(--tinte); box-shadow: 0 0 0 3px #fff; }
  .seiten-fortschritt { height: 6px; border-radius: 999px; background: var(--rand); margin: 12px 4px 4px; overflow: hidden; }
  .seiten-fortschritt span { display: block; height: 100%; width: 0; background: var(--tinte); border-radius: 999px; }
  .seiten-station { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--tinte); color: #fff; text-decoration: none; }
  .seiten-station span:first-child { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: #000; font-weight: 900; font-size: 16px; }
  .seiten-station small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gelb); }
  .seiten-station b { font-size: 15px; line-height: 1.3; }
  .seiten-station:hover b { text-decoration: underline; text-underline-offset: 3px; }

  /* ── Bausteine im Text ─────────────────────────────────────────────── */
  .marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; padding: 0; list-style: none; }
  .marken li { margin: 0; padding: 0; background: none; font-size: 15px; max-width: none; }
  .marken li::marker { content: none; }
  .marken li > a, .marken li:not(:has(a)) { display: inline-block; border: 1.5px solid var(--tinte); border-radius: 999px; padding: 6px 14px; background: #fff; color: #000; font-weight: 700; text-decoration: none; line-height: 1.35; }
  .marken li > a:hover { background: var(--gelb); }
  @media (prefers-reduced-motion: no-preference) { .marken li > a { transition: background .15s ease, transform .15s ease; } .marken li > a:hover { transform: translateY(-1px); } }
  .artikel .marken a { text-decoration: none; }

  /* Hinweis (x-inhalt.hinweis) */
  .kasten { position: relative; background: var(--weich); border: 2px solid var(--tinte); border-radius: 20px; padding: 18px 20px 18px 62px; margin: 28px 0; font-size: 17px; line-height: 1.65; max-width: 68ch; }
  .kasten::before { content: "i"; position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--gelb); border: 2px solid var(--tinte); display: grid; place-items: center; font: 900 16px/1 Georgia, serif; color: #000; }
  .kasten p { margin: 0 0 8px; } .kasten p:last-child { margin: 0; }
  /* Hinweiskasten mit Knopf aus einzelnen Artikeln (z. B. Checkliste in der App). */
  .cta-kasten { background: #fff; border: 2px solid var(--tinte); border-radius: 22px; padding: clamp(18px, 3vw, 24px); margin: 28px 0; box-shadow: 6px 6px 0 #7CB8FF; max-width: 68ch; }
  .cta-kasten p { margin: 0 0 8px; }
  .cta-kasten .cta-titel { font-size: clamp(19px, 2.4vw, 22px); font-weight: 900; line-height: 1.25; margin: 0 0 6px; color: #000; }
  .cta-kasten .knopf, .ih-haupt .knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--tinte); color: var(--gelb); font-weight: 800; font-size: 16px; text-decoration: none; margin-top: 6px; }
  .cta-kasten .cta-neben { font-size: 15px; color: var(--leise); margin: 10px 0 0; }

  /* Tabellen */
  .tabelle-rahmen { overflow-x: auto; border: 2px solid var(--tinte); border-radius: 20px; margin: 24px 0 8px; background: #fff; }
  .tabelle { width: 100%; border-collapse: collapse; margin: 0; font-size: 15.5px; }
  .tabelle-rahmen .tabelle caption, .tabelle caption { text-align: left; font-weight: 800; padding: 14px 16px 12px; font-size: 15px; background: var(--gelb); border-bottom: 2px solid var(--tinte); }
  .tabelle th, .tabelle td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rand); vertical-align: top; }
  .tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom: 0; }
  .tabelle thead th { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #555; background: #fafaf7; }
  .tabelle tbody th { font-weight: 700; color: #333; }
  .tabelle tbody tr:hover td, .tabelle tbody tr:hover th { background: var(--weich); }
  .tabelle td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
  @media (min-width: 700px) { .verguetung-nach-beruf td + td { white-space: nowrap; } }
  .tabelle a { font-weight: 700; color: #000; }
  :not(.tabelle-rahmen) > table.tabelle { border: 2px solid var(--tinte); border-radius: 20px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 18px 0; }
  .quelle-klein { font-size: 13px; color: var(--leise); margin: 6px 0 24px; line-height: 1.5; max-width: 68ch; }
  .rangliste td:last-child, .abschlussliste td:last-child { white-space: nowrap; }
  .rangliste td:nth-child(2) { white-space: normal; font-variant-numeric: normal; }
  .rangliste td:nth-child(2), .abschlussliste td:first-child { hyphens: auto; overflow-wrap: anywhere; }
  .rangliste td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
  .rangliste .rang { width: 44px; padding-right: 4px; }
  .rangliste .rang span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1.5px solid var(--tinte); font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
  .rangliste .rang-top span { background: var(--gelb); }
  .rangliste td { vertical-align: middle; }
  @media (max-width: 560px) { .tabelle th, .tabelle td { padding: 9px 10px; } .tabelle { font-size: 14.5px; } }

  /* Vorlage zum Kopieren */
  .vorlage { border: 2px solid var(--tinte); border-radius: 20px; overflow: hidden; margin: 24px 0; background: #fff; box-shadow: 6px 6px 0 var(--gelb); }
  .vorlage-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--tinte); color: #fff; font-weight: 800; font-size: 14px; }
  .vorlage-leiste button { font: inherit; font-size: 13.5px; font-weight: 800; background: var(--gelb); color: #000; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 36px; }
  .vorlage-leiste button:hover { background: #fff; }
  .vorlage-leiste button:focus-visible { outline-color: var(--gelb); }
  .vorlage pre { margin: 0; padding: 20px; white-space: pre-wrap; font: 16px/1.7 inherit; font-family: inherit; color: #1d1d1d; }

  /* Zahlenkacheln */
  .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin: 26px 0; }
  .fakt { background: #fff; border: 2px solid var(--tinte); border-radius: 20px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; box-shadow: 5px 5px 0 var(--akzent); }
  .fakten > .fakt:nth-child(4n+1) { --akzent: #FFD000; }
  .fakten > .fakt:nth-child(4n+2) { --akzent: #7CB8FF; }
  .fakten > .fakt:nth-child(4n+3) { --akzent: #FF8E6E; }
  .fakten > .fakt:nth-child(4n+4) { --akzent: #4ADE9B; }
  .fakt-wert { font-size: clamp(25px, 3.6vw, 32px); font-weight: 900; line-height: 1.05; color: #000; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .fakt-text { font-size: 14px; line-height: 1.45; color: #444; }

  /* Schrittfolge */
  .schrittfolge { list-style: none; counter-reset: schritt; padding: 0; margin: 24px 0; display: grid; gap: 0; position: relative; max-width: 68ch; }
  .artikel .schrittfolge li, .schrittfolge li { counter-increment: schritt; position: relative; margin: 0; padding: 0 0 22px 62px; max-width: none; }
  .schrittfolge li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--gelb); color: #000; border: 2.5px solid var(--tinte); font-weight: 900; display: grid; place-items: center; font-size: 16px; z-index: 1; }
  .schrittfolge li::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 0; width: 4px; background: var(--rand); }
  .schrittfolge li:last-child { padding-bottom: 0; }
  .schrittfolge li:last-child::after { content: none; }
  .schritt-titel { display: block; font-weight: 800; font-size: 18px; line-height: 1.35; padding-top: 8px; color: #000; }
  .schritt-text { display: block; color: #444; margin-top: 4px; line-height: 1.6; font-size: 16.5px; }

  /* Checkliste */
  .checkliste { list-style: none; padding: 18px 20px; margin: 24px 0; display: grid; gap: 4px; border: 2px solid var(--tinte); border-radius: 20px; background: #fff; max-width: 68ch; }
  .artikel .checkliste li, .checkliste li { position: relative; padding: 6px 0 6px 38px; margin: 0; line-height: 1.6; max-width: none; }
  .checkliste li + li { border-top: 1px dashed var(--rand); }
  .checkliste li::marker { content: none; }
  .checkliste li::before { content: ""; position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #4ADE9B; border: 2px solid var(--tinte); box-sizing: border-box; }
  .checkliste li::after { content: ""; position: absolute; left: 7px; top: 14px; width: 8px; height: 5px; border-left: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: rotate(-45deg); }
  /* Abhakbar: leerer Kreis, nach dem Antippen gruen mit Haken. */
  .checkliste--abhaken { padding: 12px 14px; }
  .artikel .checkliste--abhaken li, .checkliste--abhaken li { padding: 0; }
  .checkliste--abhaken li::before, .checkliste--abhaken li::after { content: none; }
  .checkliste--abhaken label { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; padding: 9px 10px; border-radius: 12px; }
  .checkliste--abhaken label:hover { background: var(--weich); }
  .checkliste--abhaken input {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0;
    width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--tinte); background: #fff; cursor: pointer;
    display: grid; place-content: center;
  }
  .checkliste--abhaken input::after { content: ""; width: 9px; height: 5px; border-left: 3px solid #000; border-bottom: 3px solid #000; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
  .checkliste--abhaken input:checked { background: #4ADE9B; }
  .checkliste--abhaken input:checked::after { opacity: 1; }
  .checkliste--abhaken input:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
  .checkliste--abhaken input:checked + span { color: #6b6b6b; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
  @media (prefers-reduced-motion: no-preference) { .checkliste--abhaken input:checked { animation: ih-haken .25s ease-out; } @keyframes ih-haken { 50% { transform: scale(1.15); } } }
  .checkliste-stand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #000; background: var(--weich); border: 1.5px solid var(--tinte); border-radius: 999px; padding: 5px 14px; margin: -10px 0 24px; }
  .checkliste-stand:empty { display: none; }

  /* Haeufige Fragen */
  .faq-block { margin-top: clamp(44px, 6vw, 60px); }
  .faq-block h2 { font-size: clamp(25px, 3vw, 32px); font-weight: 900; line-height: 1.15; letter-spacing: -0.018em; margin: 0 0 18px; }
  .faq-eintrag { border: 2px solid var(--tinte); border-radius: 18px; background: #fff; margin: 0 0 10px; }
  .faq-eintrag summary { cursor: pointer; font-weight: 800; font-size: 17px; line-height: 1.4; list-style: none; position: relative; padding: 16px 64px 16px 20px; border-radius: 16px; }
  .faq-eintrag summary::-webkit-details-marker { display: none; }
  .faq-eintrag summary:hover { background: var(--weich); }
  .faq-eintrag summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--gelb); border: 2px solid var(--tinte); display: grid; place-items: center; font-size: 20px; font-weight: 800; line-height: 1; box-sizing: border-box; }
  .faq-eintrag[open] summary::after { content: "\2212"; background: var(--tinte); color: var(--gelb); }
  .faq-eintrag[open] summary { border-bottom: 1px dashed var(--rand); border-radius: 16px 16px 0 0; }
  .faq-eintrag p { margin: 0; padding: 14px 20px 18px; color: #333; line-height: 1.7; font-size: 16.5px; }

  /* ── Karten ────────────────────────────────────────────────────────── */
  .karten, .ih-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 18px 0 28px; }
  .ih-karten--zwei { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  a.karte-link, a.ih-karte {
    position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
    background: #fff; border: 2px solid var(--tinte); border-radius: 22px; padding: 20px 20px 18px;
    text-decoration: none; color: #000; margin: 0;
  }
  a.karte-link .titel, .ih-karte-titel { display: block; font-weight: 900; font-size: 18px; line-height: 1.28; letter-spacing: -0.008em; hyphens: auto; overflow-wrap: break-word; }
  a.karte-link p, .ih-karte-text { margin: 0; color: #4a4a4a; font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ih-karte-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--akzent); border: 2px solid var(--tinte); color: #000; margin-bottom: 4px; }
  .ih-karte-icon svg { width: 22px; height: 22px; }
  .ih-karte-fuss, .karte-marke { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 800; color: #555; }
  .ih-karte-fuss span { display: inline-flex; align-items: center; gap: 6px; }
  .ih-karte-fuss svg { width: 15px; height: 15px; }
  .ih-pfeil { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--akzent); flex: none; }
  .ih-pfeil svg { width: 16px; height: 16px; }
  a.karte-link:hover, a.ih-karte:hover { box-shadow: 6px 6px 0 var(--akzent); }
  a.karte-link:hover .titel, a.ih-karte:hover .ih-karte-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    a.karte-link, a.ih-karte { transition: transform .18s ease, box-shadow .18s ease; }
    a.karte-link:hover, a.ih-karte:hover { transform: translate(-3px, -3px); }
    .ih-pfeil { transition: transform .18s ease; }
    a.ih-karte:hover .ih-pfeil { transform: translateX(3px); }
  }
  .karte-gelb { background: var(--gelb) !important; }
  .karte-gelb p { color: rgba(0,0,0,0.75) !important; }

  /* Werkzeuge: die interaktiven Seiten als dunkle Karten */
  .werkzeuge { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; margin: 18px 0 30px; }
  a.werkzeug {
    position: relative; display: grid; align-content: start; gap: 6px; min-height: 168px; padding: 20px 20px 64px;
    border-radius: 22px; text-decoration: none; color: #fff; background: var(--tinte); border: 2px solid var(--tinte);
  }
  .werkzeuge > a.werkzeug:nth-child(4n+1) { --akzent: #FFD000; }
  .werkzeuge > a.werkzeug:nth-child(4n+2) { --akzent: #7CB8FF; }
  .werkzeuge > a.werkzeug:nth-child(4n+3) { --akzent: #4ADE9B; }
  .werkzeuge > a.werkzeug:nth-child(4n+4) { --akzent: #FF8E6E; }
  .werkzeug-marke { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); }
  .werkzeug-titel { font-size: 19px; font-weight: 900; line-height: 1.22; }
  .werkzeug-text { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
  a.werkzeug { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .werkzeug-marke, .werkzeug-titel, .werkzeug-text { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .werkzeug-pfeil { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: #000; font-size: 18px; font-weight: 900; }
  .werkzeug-pfeil svg { width: 18px; height: 18px; }
  a.werkzeug:hover { box-shadow: 6px 6px 0 var(--akzent); }
  a.werkzeug:hover .werkzeug-titel { text-decoration: underline; text-underline-offset: 3px; }
  a.werkzeug:focus-visible { outline-color: #000; }
  @media (prefers-reduced-motion: no-preference) {
    a.werkzeug { transition: transform .18s ease, box-shadow .18s ease; }
    a.werkzeug:hover { transform: translate(-3px, -3px); }
    .werkzeug-pfeil { transition: transform .18s ease; }
    a.werkzeug:hover .werkzeug-pfeil { transform: translateX(3px); }
  }

  /* ── Berufsseite: Fakten als Kacheln, Stellen und Fristen als Karten ── */
  .ih-spalte .merkmale { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 8px; padding: 0; }
  .ih-spalte .merkmale li { overflow-wrap: anywhere; hyphens: auto; flex-direction: column; gap: 6px; padding: 14px 16px; border: 2px solid var(--tinte); border-radius: 18px; background: #fff; font-size: 16px; font-weight: 800; line-height: 1.35; box-shadow: 5px 5px 0 var(--akzent); }
  .ih-spalte .merkmale li:nth-child(4n+1) { --akzent: #FFD000; } .ih-spalte .merkmale li:nth-child(4n+2) { --akzent: #7CB8FF; } .ih-spalte .merkmale li:nth-child(4n+3) { --akzent: #FF8E6E; } .ih-spalte .merkmale li:nth-child(4n+4) { --akzent: #4ADE9B; }
  .ih-spalte .merkmale li span:first-child { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #555; }
  .ih-spalte .text, .ih-spalte > p { font-size: 17.5px; line-height: 1.7; max-width: 68ch; }
  .ih-spalte .karte { background: #fff; border: 2px solid var(--tinte); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; }
  .ih-spalte .karte a.titel { font-size: 17px; font-weight: 900; color: #000; }
  .ih-spalte .orte { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; padding: 0; list-style: none; }
  .ih-spalte .orte a { display: inline-block; border: 1.5px solid var(--tinte); border-radius: 999px; padding: 7px 15px; background: #fff; color: #000; font-weight: 700; text-decoration: none; }
  .ih-spalte .orte a:hover { background: var(--gelb); }
  .ih-spalte .betrieb-hinweis { margin-top: 32px; background: var(--weich); border: 2px dashed var(--tinte); border-radius: 22px; }
  /* ── Stellen: Karten, Filter, Stellenseite ─────────────────────────── */
  .st-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin: 18px 0 24px; }
  .st-karte { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: start; background: #fff; border: 2px solid var(--tinte); border-radius: 22px; padding: 18px 18px 18px 18px; margin: 0; }
  .st-karte-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--akzent); border: 2px solid var(--tinte); color: #000; }
  .st-karte-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
  .st-karte-titel { margin: 2px 0 2px; font-size: 18px; font-weight: 900; line-height: 1.28; hyphens: auto; overflow-wrap: break-word; }
  .st-karte-titel a { color: #000; text-decoration: none; }
  .st-karte-titel a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
  .st-karte-betrieb { margin: 0; font-size: 15px; font-weight: 700; color: #444; }
  .st-karte-fakten { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
  .st-karte-fakten li { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 10px 4px 8px; border-radius: 999px; background: #f4f4ef; font-size: 13px; font-weight: 700; color: #222; }
  .st-karte-fakten svg { width: 14px; height: 14px; }
  .st-karte-fakten .st-vorbei { background: #fff0e8; }
  .st-karte .ih-pfeil { align-self: center; }
  .st-karte:hover { box-shadow: 6px 6px 0 var(--akzent); }
  .st-karte:hover .st-karte-titel a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .st-karte:focus-within { outline: 3px solid #000; outline-offset: 3px; }
  .st-karte a:focus-visible { outline: none; }
  .st-karte--vorbei { border-style: dashed; }
  .st-karte--vorbei .st-karte-icon { background: #eee; }
  @media (prefers-reduced-motion: no-preference) {
    .st-karte { transition: transform .18s ease, box-shadow .18s ease; }
    .st-karte:hover { transform: translate(-3px, -3px); }
  }
  .st-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 4px; }
  .st-suche { position: relative; }
  .st-suche svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; pointer-events: none; }
  .st-suche input { width: 100%; font: inherit; font-size: 17px; font-weight: 600; padding: 15px 18px 15px 52px; border: 2.5px solid var(--tinte); border-radius: 999px; background: #fff; box-shadow: 5px 5px 0 var(--tinte); }
  .st-suche input:focus { outline: none; box-shadow: 5px 5px 0 var(--tinte), 0 0 0 4px #fff; }
  .st-arten { display: flex; gap: 6px; margin: 0; padding: 4px; border: 2.5px solid var(--tinte); border-radius: 999px; background: #fff; }
  .st-arten button { font: inherit; font-size: 14.5px; font-weight: 800; border: 0; background: none; padding: 9px 16px; border-radius: 999px; cursor: pointer; color: #000; min-height: 40px; }
  .st-arten button[aria-pressed="true"] { background: var(--tinte); color: var(--gelb); }
  .st-treffer { margin: 14px 2px 0; font-size: 14px; font-weight: 700; }
  .st-leer { border: 2px dashed var(--tinte); border-radius: 20px; padding: 20px; font-weight: 700; }
  .ih-spalte .blaettern a, .ih-spalte--breit .blaettern a { border: 2px solid var(--tinte); background: #fff; }
  .ih-spalte .blaettern a:hover { background: var(--gelb); }
  .ih-spalte .schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
  .ih-spalte .schritte li { counter-increment: schritt; position: relative; padding: 14px 16px 14px 64px; border: 2px solid var(--tinte); border-radius: 18px; background: #fff; font-size: 16.5px; line-height: 1.55; }
  .ih-spalte .schritte li::before { content: counter(schritt); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--gelb); border: 2px solid var(--tinte); display: grid; place-items: center; font-weight: 900; }
  .ih-spalte .vorbei { background: #fff0e8; border: 2px solid var(--tinte); border-radius: 18px; padding: 14px 18px; font-size: 16px; }
  .ih-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 24px 0; }
  @media (max-width: 760px) {
    .st-filter { grid-template-columns: minmax(0, 1fr); }
    .st-arten { justify-self: start; }
  }
  @media (max-width: 560px) {
    .st-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ih-spalte .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ih-spalte .merkmale li { padding: 12px; font-size: 15px; box-shadow: 4px 4px 0 var(--akzent); }
    .st-karte { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .st-karte .ih-pfeil { display: none; }
    .st-karte-icon { width: 46px; height: 46px; border-radius: 13px; }
    .st-karte-icon svg { width: 24px; height: 24px; }
    .st-karte-titel { font-size: 16.5px; }
    .st-karte:hover { box-shadow: 4px 4px 0 var(--akzent); }
  }

  /* ── Abschnittskopf (Uebersichten) ─────────────────────────────────── */
  .ih-abschnitt { margin-top: clamp(48px, 7vw, 80px); }
  .ih-abschnitt > h2 { margin-top: 0; display: flex; align-items: center; gap: 14px; }
  .ih-abschnitt-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--akzent); border: 2px solid var(--tinte); flex: none; }
  .ih-abschnitt-icon svg { width: 26px; height: 26px; }
  .ih-abschnitt-text { margin: -6px 0 18px; font-size: 17px; color: #444; max-width: 60ch; }
  .ih-thema { margin-top: 30px; }
  .ih-thema-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #000; }
  .ih-thema-titel span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--akzent); border: 2px solid var(--tinte); }
  .ih-thema-titel svg { width: 16px; height: 16px; }
  .ih-thema-titel small { font-size: 12px; color: #6b6b6b; letter-spacing: .04em; }
  .ih-thema .ih-karten { margin-top: 12px; }
  .ih-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; list-style: none; }
  .ih-sprung li { margin: 0; }
  .ih-sprung a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--tinte); color: #000; font-size: 14.5px; font-weight: 800; text-decoration: none; }
  .ih-sprung a svg { width: 16px; height: 16px; }
  .ih-sprung a:hover { background: var(--tinte); color: var(--gelb); }

  /* ── Handlungsaufforderungen (x-inhalt.cta) ────────────────────────── */
  .ih-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
  .ih-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px;
    border-radius: 999px; font-weight: 800; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center;
  }
  .ih-knopf svg { width: 18px; height: 18px; }
  button.ih-knopf { border: 0; cursor: pointer; font-family: inherit; }
  .ih-knopf--gelb { background: var(--gelb); color: #000; }
  .ih-knopf--schwarz { background: var(--tinte); color: var(--gelb); }
  .ih-knopf--rand { color: #fff; border: 2px solid rgba(255,255,255,.45); }
  .ih-knopf--rand:hover { border-color: #fff; }
  .ih-knopf--rand-hell { color: #000; border: 2px solid var(--tinte); background: #fff; }
  .ih-knopf--rand-hell:hover { background: var(--weich); }
  .ih-link { font-weight: 800; font-size: 15px; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .ih-knopf { transition: transform .15s ease, box-shadow .15s ease; }
    .ih-knopf--gelb:hover, .ih-knopf--schwarz:hover { transform: translateY(-2px); }
    .ih-knopf svg { transition: transform .15s ease; }
    .ih-knopf:hover svg { transform: translateX(3px); }
  }
  /* Kopf: dezenter dunkler Kasten rechts im gelben Kopf. */
  .ih-cta-kopf { background: var(--tinte); color: #fff; border-radius: 24px; padding: 22px 22px 20px; }
  .ih-cta-marke { display: inline-block; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gelb); }
  .ih-cta-kopf .ih-cta-titel { margin: 0 0 8px; font-size: 21px; font-weight: 900; line-height: 1.2; color: #fff; }
  .ih-cta-kopf .ih-cta-text { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); }
  .ih-cta-kopf .ih-knoepfe { margin-top: 16px; gap: 10px; }
  .ih-cta-kopf .ih-knopf { width: 100%; min-height: 48px; font-size: 15.5px; }
  .ih-cta-kopf .ih-link { color: #fff; }
  .ih-cta-kopf :focus-visible { outline-color: var(--gelb); }
  /* Mitte: weisse Karte mit hartem Schatten, zwischen zwei Abschnitten. */
  .ih-cta-mitte {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
    margin: clamp(40px, 5vw, 52px) 0; padding: clamp(20px, 3vw, 28px);
    background: #fff; border: 2px solid var(--tinte); border-radius: 26px; box-shadow: 7px 7px 0 var(--akzent, var(--gelb));
  }
  .ih-cta-mitte .ih-cta-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--gelb); border: 2px solid var(--tinte); }
  .ih-cta-mitte .ih-cta-icon svg { width: 28px; height: 28px; }
  .ih-cta-mitte .ih-cta-marke { color: #555; margin-bottom: 4px; }
  .ih-cta-mitte .ih-cta-titel, .ih-cta-mitte h2 { margin: 0 0 6px; font-size: clamp(21px, 2.6vw, 26px); font-weight: 900; line-height: 1.18; letter-spacing: -0.012em; color: #000; }
  .ih-cta-mitte .ih-cta-text { margin: 0; font-size: 16.5px; line-height: 1.55; color: #333; max-width: 58ch; }
  .ih-cta-mitte .ih-knoepfe { margin-top: 16px; }
  .ih-cta-mitte .ih-link { color: #000; }
  /* Finale: starker Abschluss wie in der Roadmap. */
  .ih-finale {
    max-width: 1120px; margin: clamp(56px, 7vw, 88px) auto 0; background: var(--tinte); color: #fff;
    border-radius: clamp(28px, 4vw, 44px); padding: clamp(28px, 5vw, 60px); position: relative; overflow: hidden;
  }
  .ih-finale-haupt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
  .ih-finale-marke { display: inline-block; margin: 0 0 14px; background: var(--gelb); color: #000; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
  .ih-finale h2, .ih-finale .ih-finale-titel { color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 900; margin: 0 0 14px; }
  .ih-finale h2 em, .ih-finale-titel em { font-style: normal; color: var(--gelb); }
  .ih-finale-text { margin: 0; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 34em; }
  .ih-finale .ih-knoepfe { margin-top: 26px; gap: 12px; }
  .ih-finale .ih-knopf { min-height: 52px; }
  .ih-finale :focus-visible { outline-color: var(--gelb); }
  .ih-finale-affe { width: clamp(140px, 16vw, 200px); height: auto; display: block; opacity: .95; }
  /* Kopf auf dem Handy: nur Knopf und Satz, damit der Text schnell kommt. */
  @media (max-width: 899px) {
    .ih-held-kopf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ih-held h1 { max-width: none; }
    .ih-cta-kopf { padding: 16px 16px 16px; border-radius: 20px; }
    .ih-cta-kopf .ih-cta-text, .ih-cta-kopf .ih-cta-marke { display: none; }
    .ih-cta-kopf .ih-cta-titel { font-size: 17px; margin-bottom: 0; }
    .ih-cta-kopf .ih-knoepfe { margin-top: 12px; }
    .ih-eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 6px; }
    .ih-eckdaten li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 12px; font-size: 13px; }
    .ih-eckdaten li + li { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); }
    .ih-eck-wert { flex: none; font-size: 24px; }
    .ih-finale-haupt { grid-template-columns: minmax(0, 1fr); }
    .ih-finale-affe { position: absolute; right: -18px; top: -14px; width: 120px; opacity: .14; }
  }
  @media (max-width: 560px) {
    .ih-held { padding-left: 16px; padding-right: 16px; }
    .ih-held-icon { gap: 14px; }
    .ih-held-icon .bi-mittel { width: 56px; height: 56px; box-shadow: 4px 4px 0 var(--tinte); } .ih-held-icon .bi-mittel svg { width: 28px; height: 28px; }
    .artikel { font-size: 17px; }
    .ih-cta-mitte { grid-template-columns: minmax(0, 1fr); gap: 12px; box-shadow: 5px 5px 0 var(--akzent, var(--gelb)); }
    .ih-cta-mitte .ih-cta-icon { width: 46px; height: 46px; border-radius: 14px; }
    .ih-knoepfe .ih-knopf { width: 100%; }
    .kasten { padding: 16px 16px 16px 56px; }
    .kasten::before { left: 14px; top: 16px; }
    .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fakt { padding: 14px; box-shadow: 4px 4px 0 var(--akzent); }
    .fakt-wert { font-size: 23px; }
    .schrittfolge li { padding-left: 54px; }
    .faq-eintrag summary { font-size: 16px; padding: 14px 56px 14px 16px; }
    .faq-eintrag p { padding: 12px 16px 16px; }
    a.karte-link:hover, a.ih-karte:hover, a.werkzeug:hover { box-shadow: 4px 4px 0 var(--akzent); }
    .werkzeuge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    a.werkzeug { min-height: 0; padding: 14px 14px 54px; border-radius: 18px; }
    .werkzeug-marke { font-size: 10.5px; letter-spacing: .06em; }
    .werkzeug-titel { font-size: 16px; hyphens: auto; overflow-wrap: break-word; }
    .werkzeug-text { font-size: 13px; }
    .werkzeug-pfeil { right: 12px; bottom: 12px; width: 32px; height: 32px; }
    .ih-thema-titel small { display: none; }
    .ih-karten, .karten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    a.ih-karte, a.karte-link { padding: 16px 16px 14px; }
  }
  /* Ohne Bewegung: nichts springt, nichts schwebt. */
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

  /* ── Bausteine mit eigener Optik (unveraendert uebernommen) ── */
  /* Gehaltsvergleich: dunkles Panel, das Aushaengeschild der Ratgeber.
     Gelb = erster Beruf, Blau = Vergleich (farbenblind geprueft); Werte
     stehen immer auch als Text daneben. */
  .gv {
    --gv-grund: #111; --gv-flaeche: rgba(255,255,255,.06); --gv-linie: rgba(255,255,255,.12);
    --gv-leise: rgba(255,255,255,.7); --gv-a: var(--gelb); --gv-b: #7AA2FF;
    --gv-jahr: 54px; --gv-wert: 142px;
    position: relative; overflow: hidden; color: #fff; border-radius: 24px;
    background: radial-gradient(110% 80% at 100% 0%, rgba(255,208,0,.16), transparent 55%), var(--gv-grund);
    padding: clamp(18px, 3.6vw, 32px); margin: 26px 0;
  }
  .gv a { color: inherit; }
  .gv .gv-augenbraue { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gelb); }
  .gv .gv-titel { margin: 4px 0 18px; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; font-weight: 900; text-wrap: balance; }
  .gv-felder { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
  .gv-feld { min-width: 0; }
  .gv-feld label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gv-leise); margin-bottom: 6px; }
  .gv-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gv-a); flex: none; }
  .gv-punkt-b { background: var(--gv-b); }
  .gv-eingabe { width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: #111; background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; outline: none; }
  .gv-eingabe:focus { border-color: var(--gv-a); box-shadow: 0 0 0 4px rgba(255,208,0,.28); }
  .gv-feld-b .gv-eingabe:focus { border-color: var(--gv-b); box-shadow: 0 0 0 4px rgba(122,162,255,.3); }
  .gv-vs { margin-top: 30px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: #000; font-weight: 900; font-size: 13px; text-transform: uppercase; }
  .gv .gv-hinweis { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--gv-leise); }
  .gv-knoepfe-block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
  .gv-knoepfe { display: contents; }
  .gv-knoepfe-titel { font-size: 13px; font-weight: 700; color: var(--gv-leise); margin-right: 2px; }
  .gv-knoepfe button { flex: none; white-space: nowrap; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--gv-flaeche); border: 1px solid var(--gv-linie); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
  .gv-knoepfe button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
  .gv-knoepfe button[aria-pressed="true"] { background: var(--gelb); color: #000; border-color: var(--gelb); }
  .gv-knoepfe .gv-zufall { background: transparent; border-style: dashed; }

  .gv-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 0; }
  .gv-kachel { display: grid; align-content: start; gap: 2px; min-width: 0; background: var(--gv-flaeche); border-top: 4px solid var(--gv-a); border-radius: 18px; padding: 16px 18px; }
  .gv-kachel-b { border-top-color: var(--gv-b); }
  .gv .gv-kachel-name { font-weight: 800; font-size: 15px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; hyphens: auto; }
  .gv .gv-kachel-name:hover { text-decoration: underline; }
  .gv-kachel-zahl { font-size: clamp(30px, 6vw, 50px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 8px; white-space: nowrap; }
  .gv-kachel-text { font-size: 13px; line-height: 1.4; color: var(--gv-leise); }
  .gv-kachel-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .gv-kachel-marken span { font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px 10px; }
  .gv-kachel-marken span:empty { display: none; }
  .gv-kachel-leer { display: none; }
  .gv-kachel[data-leer] { background: transparent; border: 1px dashed rgba(255,255,255,.28); border-top: 4px dashed var(--gv-b); place-content: center; text-align: center; min-height: 128px; }
  .gv-kachel[data-leer] > * { display: none; }
  .gv-kachel[data-leer] > .gv-kachel-leer { display: block; font-size: 14px; color: var(--gv-leise); }
  .gv .gv-fazit { margin: 14px 0 0; font-size: 15px; line-height: 1.5; font-weight: 700; }
  .gv .gv-fazit:empty { display: none; }

  .gv-diagramm { margin-top: 20px; }
  .gv-zeile, .gv-achse { display: grid; grid-template-columns: var(--gv-jahr) 1fr var(--gv-wert); gap: 12px; align-items: center; }
  .gv-zeile { padding: 10px 0; border-top: 1px solid var(--gv-linie); }
  .gv-jahr { font-size: 13px; font-weight: 800; color: var(--gv-leise); }
  .gv-spur { position: relative; height: 16px; }
  .gv-zwei .gv-spur { height: 34px; }
  .gv-min { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 1px solid rgba(255,255,255,.4); background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px); }
  .gv-mitte { position: absolute; top: -7px; bottom: -7px; width: 0; margin-left: -1px; border-left: 2px dashed rgba(255,255,255,.65); z-index: 2; }
  .gv-balken { position: absolute; top: 1px; height: 14px; border-radius: 999px; background: var(--gv-a); z-index: 1; transition: left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
  .gv-balken-b { display: none; background: var(--gv-b); }
  .gv-ueber { border-radius: 999px 3px 3px 999px; }
  .gv-ueber::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 6px solid currentColor; color: inherit; }
  .gv-balken-a.gv-ueber::after { border-left-color: var(--gv-a); }
  .gv-balken-b.gv-ueber::after { border-left-color: var(--gv-b); }
  .gv-zwei .gv-balken-b { display: block; top: 19px; }
  .gv-werte { display: grid; gap: 2px; justify-items: end; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gv-wert { display: inline-flex; align-items: center; gap: 6px; }
  .gv-wert:empty { display: none; }
  .gv-zwei .gv-wert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gv-a); }
  .gv-zwei .gv-wert-b::before { background: var(--gv-b); }
  .gv-achse { padding-top: 8px; border-top: 1px solid var(--gv-linie); }
  .gv-striche { position: relative; height: 16px; font-size: 11px; color: var(--gv-leise); font-variant-numeric: tabular-nums; }
  .gv-striche span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .gv-striche span:first-child { transform: none; }
  .gv-striche span:last-child { transform: translateX(-100%); }
  .gv .gv-legende { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--gv-leise); }
  .gv .gv-legende li { display: flex; align-items: center; gap: 8px; margin: 0; line-height: 1.4; }
  .gv-l-balken { width: 22px; height: 10px; border-radius: 999px; background: var(--gv-a); flex: none; }
  .gv-zwei .gv-l-balken { background: linear-gradient(90deg, var(--gv-a) 50%, var(--gv-b) 50%); }
  .gv-l-mitte { width: 0; height: 14px; border-left: 2px dashed rgba(255,255,255,.65); flex: none; }
  .gv-l-min { width: 22px; height: 12px; flex: none; border-right: 1px solid rgba(255,255,255,.5); background: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 2px, transparent 2px 6px); }
  .gv .gv-quelle { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.58); }
  @media (prefers-reduced-motion: reduce) { .gv-balken { transition: none; } }
  @media (max-width: 600px) {
    .gv { --gv-jahr: 52px; border-radius: 20px; }
    .gv-felder { grid-template-columns: 1fr; }
    .gv-vs { display: none; }
    /* Knoepfe in einer wischbaren Reihe statt zweizeiliger Pillen; der Rand blendet aus. */
    .gv-knoepfe-block { display: block; }
    .gv-knoepfe { display: flex; gap: 8px; margin-top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px;
      -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .gv-knoepfe::-webkit-scrollbar { display: none; }
    .gv-kacheln { gap: 8px; }
    .gv-kachel { padding: 12px 12px 14px; border-radius: 14px; }
    .gv .gv-kachel-name { font-size: 13.5px; }
    .gv-kachel-marken span { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; }
    .gv-zeile, .gv-achse { grid-template-columns: var(--gv-jahr) 1fr; gap: 6px 10px; }
    .gv-werte { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 14px; font-size: 13px; }
    .gv-achse > span:last-child { display: none; }
  }

  /* Berufs-Icon: Lucide-Motiv im gelben Kreis mit einer von dreizehn
     Bewegungen (App\Services\Berufe\BerufIcon). Nur transform und opacity,
     damit es auch auf alten Handys fluessig laeuft; wer weniger Bewegung
     eingestellt hat, sieht es still. */
  .bi { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--gelb); color: #111; }
  .bi-klein { width: 52px; height: 52px; } .bi-klein svg { width: 26px; height: 26px; }
  .bi-mittel { width: 72px; height: 72px; } .bi-mittel svg { width: 36px; height: 36px; }
  .bi-gross { width: 132px; height: 132px; } .bi-gross svg { width: 64px; height: 64px; }
  .bi svg { display: block; stroke-width: 1.8; overflow: visible; }
  .bi-motiv { display: grid; place-items: center; transform-origin: 50% 50%; }
  /* Die Bewegung laeuft nur, solange .bi-an gesetzt ist: einmal gut vier
     Sekunden, wenn das Icon ins Bild kommt, und wieder beim Drueberfahren oder
     Antippen (Skript in der Komponente). Endlose Bewegung neben Text lenkt ab
     (WCAG 2.2.2). Anfang und Ende jeder Bewegung sind die Ruhelage. */
  .bi-an.bi-drehen .bi-motiv { animation: bi-drehen 1.8s ease-in-out 2; }
  .bi-an.bi-wackeln .bi-motiv { animation: bi-wackeln .9s ease-in-out 4; transform-origin: 35% 75%; }
  .bi-an.bi-huepfen .bi-motiv { animation: bi-huepfen 1.2s ease-in-out 3; transform-origin: 50% 100%; }
  .bi-an.bi-pulsieren .bi-motiv { animation: bi-pulsieren 1.1s ease-in-out 3; }
  .bi-an.bi-schweben .bi-motiv, .bi-an.bi-funkeln .bi-motiv { animation: bi-schweben 2s ease-in-out 2; }
  .bi-an.bi-dampfen .bi-motiv { animation: bi-schweben 2.4s ease-in-out 2; }
  .bi-an.bi-fahren .bi-motiv { animation: bi-fahren .8s ease-in-out 5; }
  .bi-an.bi-blinken .bi-motiv { animation: bi-blinken 1.3s ease-in-out 3; }
  .bi-an.bi-schaukeln .bi-motiv { animation: bi-schaukeln 1.3s ease-in-out 3; transform-origin: 50% 8%; }
  .bi-an.bi-wachsen .bi-motiv { animation: bi-wachsen 2s ease-in-out 2; transform-origin: 50% 92%; }
  .bi-an.bi-klopfen .bi-motiv { animation: bi-klopfen .9s ease-in-out 4; transform-origin: 22% 82%; }
  .bi-an.bi-rollen .bi-motiv { animation: bi-rollen 1.4s ease-in-out 3; }
  .bi { cursor: pointer; }
  @keyframes bi-drehen { to { transform: rotate(360deg); } }
  @keyframes bi-wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
  @keyframes bi-huepfen { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .92); } 35% { transform: translateY(-16%) scale(.96, 1.05); } 52% { transform: translateY(0) scale(1.05, .95); } }
  @keyframes bi-pulsieren { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(.98); } 45% { transform: scale(1.1); } }
  @keyframes bi-schweben { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-8%); } 75% { transform: translateY(5%); } }
  @keyframes bi-fahren { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-4%, -3%) rotate(-1.5deg); } 50% { transform: translate(0, 0) rotate(0); } 75% { transform: translate(4%, -3%) rotate(1.5deg); } }
  @keyframes bi-blinken { 0%, 40%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .25; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } 55% { opacity: .4; } 60% { opacity: 1; transform: scale(1); } }
  @keyframes bi-schaukeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
  @keyframes bi-wachsen { 0%, 100% { transform: scale(1); } 20% { transform: scale(.62); } 65% { transform: scale(1.08); } }
  @keyframes bi-klopfen { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-30deg); } 60% { transform: rotate(7deg); } 68% { transform: rotate(0); } }
  @keyframes bi-rollen { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-11%); } 75% { transform: translateY(11%); } }
  /* Dampf: drei Kringel steigen ueber dem Motiv auf */
  .bi svg.bi-dampf { position: absolute; left: 50%; top: 9%; width: 42%; height: auto; transform: translateX(-50%); overflow: visible; pointer-events: none; }
  .bi-dampf path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
  .bi-an .bi-dampf path { animation: bi-dampf 1.6s ease-out 2; }
  .bi-dampf path:nth-child(2) { animation-delay: .5s; } .bi-dampf path:nth-child(3) { animation-delay: 1s; }
  @keyframes bi-dampf { 0% { transform: translateY(40%) scaleY(.6); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-55%) scaleY(1.1); opacity: 0; } }
  /* Funkeln: kleine Sterne blitzen rund um das Motiv auf */
  .bi-glanz { position: absolute; inset: 0; pointer-events: none; }
  .bi-glanz i { position: absolute; width: 15%; height: 15%; background: #111; opacity: 0;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
  .bi-an .bi-glanz i { animation: bi-glanz 1.5s ease-in-out 2; }
  .bi-glanz i:nth-child(1) { top: 13%; right: 15%; }
  .bi-glanz i:nth-child(2) { bottom: 16%; left: 15%; width: 11%; height: 11%; animation-delay: .5s; }
  .bi-glanz i:nth-child(3) { top: 22%; left: 21%; width: 9%; height: 9%; animation-delay: 1s; }
  @keyframes bi-glanz { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 35% { transform: scale(1) rotate(45deg); opacity: 1; } 65% { transform: scale(0) rotate(90deg); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .bi .bi-motiv, .bi-dampf path, .bi-glanz i { animation: none !important; } .bi-dampf, .bi-glanz { display: none; } }

  /* Kopf der Berufsseite mit Icon und Karte „Kurz erklaert" */
  .beruf-kopf { display: flex; align-items: center; gap: 16px; margin: 8px 0 10px; }
  .beruf-kopf h1 { margin: 0; }
  .kurz-erklaert { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 28px); align-items: center;
    margin: 22px 0 28px; padding: clamp(18px, 3.4vw, 28px); border-radius: 22px; color: #fff;
    background: radial-gradient(110% 90% at 0% 0%, rgba(255,208,0,.16), transparent 55%), #111; }
  .kurz-erklaert .ke-label { margin: 0 0 4px; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gelb); }
  .kurz-erklaert .ke-oma { margin: 0 0 18px; font-size: clamp(17px, 2.3vw, 20px); line-height: 1.45; font-weight: 700; }
  .kurz-erklaert .ke-oma:last-child { margin-bottom: 0; }
  .kurz-erklaert .ke-blase { position: relative; display: inline-block; margin: 4px 0 0 10px; padding: 11px 16px; max-width: 100%;
    background: var(--gelb); color: #111; font-weight: 800; line-height: 1.4; border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; }
  .ke-an .ke-blase { animation: ke-blase .7s ease-out .5s 1; }
  .kurz-erklaert .ke-blase::before { content: ""; position: absolute; left: -9px; bottom: 0; border: 9px solid transparent; border-bottom-color: var(--gelb); border-right-color: var(--gelb); border-radius: 0 0 0 2px; }
  @keyframes ke-blase { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.07) rotate(-1.5deg); } 70% { transform: scale(.98); } }
  @media (prefers-reduced-motion: reduce) { .kurz-erklaert .ke-blase { animation: none; } }
  @media (max-width: 560px) {
    .beruf-kopf { gap: 12px; }
    .beruf-kopf .bi-mittel { width: 56px; height: 56px; } .beruf-kopf .bi-mittel svg { width: 28px; height: 28px; }
    .kurz-erklaert { grid-template-columns: 1fr; justify-items: start; }
    .kurz-erklaert .bi-gross { width: 96px; height: 96px; } .kurz-erklaert .bi-gross svg { width: 46px; height: 46px; }
  }

  /* Kostenrechner */
  .rechner { background: var(--karte); border-radius: 20px; padding: clamp(16px, 3vw, 26px); margin: 24px 0; }
  .rechner-eingaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .rechner-feld { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
  .rechner-breit { grid-column: 1 / -1; }
  .rechner-haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
  .rechner-haken input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #000; flex: none; }
  .fakt-dunkel { background: #111; }
  .fakt-dunkel .fakt-wert { color: var(--gelb); }
  .fakt-dunkel .fakt-text { color: rgba(255,255,255,.8); }
  .rechner-feld input, .rechner-feld select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid #ccc; border-radius: 10px; background: #fff; width: 100%; }
  .rechner-ergebnis { margin-top: 18px; }
  .rechner-posten { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
  .rechner-posten li { display: grid; grid-template-columns: minmax(150px, 38%) 1fr auto; gap: 10px; align-items: center; margin: 0; font-size: 14px; }
  .posten-spur { height: 12px; background: #fff; border-radius: 6px; overflow: hidden; }
  .posten-spur span { display: block; height: 100%; background: #000; border-radius: 6px; }
  .posten-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
  .rechner-warnung { margin: 14px 0 0; padding: 10px 14px; background: #fff; border-left: 4px solid #FF8E6E; border-radius: 10px; font-size: 14px; line-height: 1.5; }
  .rechner-warnung[hidden] { display: none; }
  @media (max-width: 560px) { .rechner-posten li { grid-template-columns: 1fr auto; } .posten-spur { grid-column: 1 / -1; grid-row: 2; } }
  /* Schnell-Check */
  .quiz { background: var(--karte); border-radius: 22px; padding: clamp(18px, 4vw, 32px); margin: 12px 0 28px; min-height: 260px; }
  .quiz-fortschritt { height: 8px; background: #fff; border-radius: 4px; overflow: hidden; }
  .quiz-fortschritt span { display: block; height: 100%; width: 0; background: #000; border-radius: 4px; transition: width .25s ease; }
  .quiz-zaehler { font-size: 13px; font-weight: 700; color: var(--leise); margin: 14px 0 4px; }
  .quiz-text { font-size: clamp(20px, 3vw, 26px); font-weight: 900; line-height: 1.25; margin: 0 0 16px; }
  .quiz-antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .quiz-antworten button { font: inherit; font-weight: 600; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s ease, transform .1s ease; }
  .quiz-antworten button:hover { border-color: #000; }
  .quiz-antworten button:active { transform: scale(.98); }
  .quiz-zurueck, .quiz-neu { font: inherit; font-size: 14px; font-weight: 700; background: none; border: 0; color: var(--leise); cursor: pointer; margin-top: 16px; padding: 4px 0; text-decoration: underline; }
  .quiz-ergebnis-titel { font-size: clamp(22px, 3.4vw, 28px); font-weight: 900; margin: 4px 0 14px; }
  .quiz-felder { display: grid; gap: 10px; }
  .feld-karte { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: #fff; border-radius: 16px; padding: 16px; }
  .feld-icon { position: relative; display: inline-block; align-self: start; }
  .feld-rang { position: absolute; top: -5px; left: -5px; width: 22px; height: 22px; border-radius: 50%; background: #111; color: var(--gelb); font-size: 12px; font-weight: 900; display: grid; place-items: center; }
  .feld-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
  .feld-platz { width: 36px; height: 36px; border-radius: 50%; background: var(--gelb); color: #000; font-weight: 900; display: grid; place-items: center; }
  .feld-name { font-weight: 900; font-size: 18px; margin: 4px 0 2px; }
  .feld-text { color: var(--leise); margin: 0; }
  .quiz .cta-kasten { background: #fff; }
  /* ── Vom Schnell-Check in die Talentanalyse: Zwischenseite, gesperrte
       Vorschau des Reports, der Weg in vier Schritten und die Seite der
       Talentanalyse. Dunkle Flaechen wie Werkzeuge und „Kurz erklaert". ── */
  button.knopf { border: 0; cursor: pointer; font-family: inherit; }
  .knopf.knopf-gelb { background: var(--gelb); color: #000; }
  .augenbraue-gelb { background: var(--gelb); color: #000; }
  .weg { list-style: none; padding: 0; margin: 20px 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .weg li { position: relative; margin: 0; padding: 14px 12px 12px; border-radius: 14px; background: var(--karte); display: grid; align-content: start; gap: 2px; }
  .weg-nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #000; font-size: 13px; font-weight: 900; margin-bottom: 6px; }
  .weg-titel { font-size: 14px; font-weight: 800; line-height: 1.3; }
  .weg-dauer { font-size: 12.5px; line-height: 1.35; color: var(--leise); }
  .weg li.herz { box-shadow: inset 0 0 0 2px var(--gelb); }
  .weg li.erledigt .weg-nr { background: #111; color: var(--gelb); }
  .weg li.aktiv { background: #111; color: #fff; box-shadow: none; }
  .weg li.aktiv .weg-nr { background: var(--gelb); color: #000; }
  .weg li.aktiv .weg-dauer { color: rgba(255,255,255,.7); }
  .weg-marke { position: absolute; top: -9px; left: 10px; background: var(--gelb); color: #000; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
  .quiz .weg li:not(.aktiv) { background: #fff; }
  .quiz .weg li:not(.aktiv):not(.erledigt) .weg-nr { background: var(--karte); }

  .quiz-haken { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #111; color: var(--gelb); font-size: 30px; font-weight: 900; margin-bottom: 10px; animation: quiz-haken .5s cubic-bezier(.2,.9,.3,1.4) 1; }
  @keyframes quiz-haken { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .quiz-zwischen-text { font-size: clamp(16px, 2.1vw, 18px); line-height: 1.55; margin: 0 0 16px; max-width: 62ch; }
  .quiz-zwischen-neben { margin: 0; }
  .stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
  .stufe { border-radius: 16px; padding: 16px; background: #fff; }
  .stufe-app { color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(255,208,0,.24), transparent 60%), #111; }
  .stufe-marke { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); }
  .stufe-app .stufe-marke { color: var(--gelb); }
  .stufe-titel { margin: 0; font-size: 19px; font-weight: 900; }
  .stufe-text { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--leise); }
  .stufe-app .stufe-text { color: rgba(255,255,255,.78); }

  .quiz-einordnung { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--leise); }
  .ta-level { margin: 26px 0 0; padding-top: 22px; border-top: 2px dashed rgba(0,0,0,.14); }
  .ta-level-text { margin: 0 0 14px; color: var(--leise); }
  .ta-vorschau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ta-vorschau-karte { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; background: #fff; border-radius: 16px; padding: 14px 44px 14px 14px; }
  .ta-vorschau-titel { margin: 2px 0 2px; font-weight: 900; font-size: 15.5px; line-height: 1.3; }
  .ta-vorschau-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--leise); }
  .ta-zensur { display: grid; gap: 6px; margin-top: 10px; }
  .ta-zensur i { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #dedede, #eeeeee); filter: blur(.6px); }
  .ta-zensur i:first-child { width: 90%; } .ta-zensur i:last-child { width: 58%; }
  .ta-schloss { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: #111; color: var(--gelb); display: grid; place-items: center; }
  .ta-schloss svg { width: 14px; height: 14px; }
  .ta-vorschau-mehr { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-weight: 800; font-size: 14px; color: var(--leise); }

  .ta-cta, .ta-teaser, .ta-schluss { color: #fff; border-radius: 22px; padding: clamp(18px, 3.6vw, 28px); background: radial-gradient(110% 90% at 100% 0%, rgba(255,208,0,.2), transparent 60%), #111; }
  .ta-cta p, .ta-teaser p, .ta-schluss p { color: rgba(255,255,255,.8); }
  .ta-cta a:not(.knopf), .ta-teaser a:not(.knopf), .ta-schluss a:not(.knopf) { color: var(--gelb); font-weight: 700; }
  .ta-cta .cta-neben, .ta-schluss .cta-neben { margin: 12px 0 0; font-size: 15px; }
  .ta-cta { margin: 22px 0 6px; }
  .ta-cta-titel, .ta-schluss-titel { margin: 0 0 6px; font-size: clamp(20px, 3vw, 24px); font-weight: 900; color: #fff !important; }
  .ta-teaser { margin: 4px 0 30px; }
  .ta-teaser .werkzeug-marke { margin: 0; color: var(--gelb); }
  .ta-teaser h2 { margin: 4px 0 8px; color: #fff; }
  .ta-teaser .weg li { background: rgba(255,255,255,.08); }
  .ta-teaser .weg-nr { background: rgba(255,255,255,.14); color: #fff; }
  .ta-teaser .weg-dauer { color: rgba(255,255,255,.62); }
  .ta-schluss { margin: 34px 0 8px; text-align: center; }

  .vergleich-huelle { overflow-x: auto; margin: 12px 0 22px; }
  table.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
  .vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--linie); line-height: 1.45; }
  .vergleich thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); border-bottom: 0; }
  .vergleich tbody th { width: 22%; font-weight: 700; color: var(--leise); }
  .vergleich .vergleich-ta { background: #fff8d6; font-weight: 700; }
  .vergleich thead .vergleich-ta { background: var(--gelb); color: #000; border-radius: 12px 12px 0 0; }
  .vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
  .vergleich tbody tr:last-child .vergleich-ta { border-radius: 0 0 12px 12px; }

  .ta-start { margin: 0; }
  .ta-teile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
  .ta-teil { display: grid; gap: 2px; align-content: start; background: var(--karte); border-radius: 20px; padding: clamp(18px, 3vw, 24px); }
  .ta-teil .bi { margin-bottom: 10px; }
  .ta-teil-nr { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
  .ta-teil-titel { margin: 0; font-size: 21px; font-weight: 900; }
  .ta-teil-frage { margin: 0 0 6px; font-weight: 700; }
  .ta-teil-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--leise); }
  .ta-kapitel { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: kapitel; }
  .ta-kapitel-eintrag { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; margin: 0; padding: 14px; border-radius: 16px; background: var(--karte); counter-increment: kapitel; }
  .ta-kapitel-titel { margin: 2px 0 2px; font-weight: 900; font-size: 15.5px; line-height: 1.3; }
  .ta-kapitel-titel::before { content: counter(kapitel) ". "; color: var(--leise); }
  .ta-kapitel-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--leise); }
  .ta-beispiel { display: grid; gap: 18px; margin: 14px 0 26px; padding: clamp(18px, 3.4vw, 28px); border-radius: 22px; color: #fff; background: radial-gradient(110% 90% at 0% 0%, rgba(255,208,0,.16), transparent 55%), #111; }
  .ta-beispiel p { margin: 0; }
  .ta-beispiel-marke { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .ta-label { margin: 0 0 8px !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gelb); }
  .ta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ta-chips li { margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 15px; font-weight: 700; }
  .ta-chips li:first-child { background: var(--gelb); color: #000; }
  .ta-beispiel-beruf { margin-bottom: 4px !important; font-size: clamp(17px, 2.3vw, 20px); font-weight: 900; }
  .ta-beispiel-text { color: rgba(255,255,255,.8); line-height: 1.6; }
  .ta-blase { position: relative; display: inline-block; margin-left: 10px !important; padding: 11px 16px; max-width: 100%; background: var(--gelb); color: #111; font-weight: 800; line-height: 1.45; border-radius: 18px 18px 18px 4px; }
  .ta-blase::before { content: ""; position: absolute; left: -9px; bottom: 0; border: 9px solid transparent; border-bottom-color: var(--gelb); border-right-color: var(--gelb); border-radius: 0 0 0 2px; }
  .karten.karten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ta-daten { list-style: none; padding: 0; margin: 12px 0 10px; display: grid; gap: 10px; }
  .ta-daten li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 0; line-height: 1.55; }
  .ta-daten svg { width: 22px; height: 22px; margin-top: 1px; }

  @media (prefers-reduced-motion: reduce) { .quiz-haken { animation: none; } }
  @media (max-width: 560px) {
    .weg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .stufen, .ta-vorschau, .ta-teile, .ta-kapitel, .karten.karten-drei { grid-template-columns: 1fr; }
    /* Drei Spalten auf 335 px: lange Woerter trennen, statt die Tabelle
       seitlich scrollen zu lassen. */
    .vergleich { font-size: 13.5px; }
    .vergleich th, .vergleich td { padding: 8px 7px; hyphens: auto; overflow-wrap: anywhere; }
    .vergleich thead th { font-size: 11px; letter-spacing: .02em; }
    .vergleich tbody th { width: 88px; min-width: 88px; hyphens: manual; overflow-wrap: normal; }
  }

  /* ── Werkzeug-Seiten (Schnell-Check, Talentanalyse) in der neuen Sprache ── */
  .quiz { background: #fff; border: 2.5px solid var(--tinte); border-radius: 28px; box-shadow: 8px 8px 0 var(--gelb); }
  .quiz-fortschritt { background: #f1f1ec; border: 1.5px solid var(--tinte); height: 12px; border-radius: 999px; }
  .quiz-fortschritt span { background: var(--tinte); border-radius: 999px; }
  .quiz-antworten button { border: 2px solid var(--tinte); background: #fff; border-radius: 16px; font-weight: 700; min-height: 54px; }
  .quiz-antworten button:hover { background: var(--gelb); border-color: var(--tinte); }
  .feld-karte, .stufe, .ta-vorschau-karte { border: 2px solid var(--tinte); }
  .quiz .weg li:not(.aktiv) { border: 1.5px solid var(--tinte); }
  .ta-teil, .ta-kapitel-eintrag { background: #fff; border: 2px solid var(--tinte); }
  .ta-teil { box-shadow: 6px 6px 0 var(--gelb); }
  .ta-teil:nth-child(2) { box-shadow: 6px 6px 0 #7CB8FF; }
  .weg li { border: 1.5px solid var(--tinte); background: #fff; }
  .ta-teaser .weg li, .ta-teaser .weg li.aktiv { border-color: rgba(255,255,255,.2); }
  .ta-cta, .ta-teaser, .ta-schluss, .ta-beispiel, .kurz-erklaert { border-radius: 26px; }
  .knopf.knopf-gelb { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 800; }
  .ih-spalte .knopf:not(.knopf-gelb) { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--tinte); color: var(--gelb); font-weight: 800; }
  .vergleich-huelle { border: 2px solid var(--tinte); border-radius: 20px; padding: 6px; }
  .rechner { background: #fff; border: 2.5px solid var(--tinte); border-radius: 26px; box-shadow: 8px 8px 0 #7CB8FF; }
  .rechner-feld input, .rechner-feld select { border: 2px solid var(--tinte); border-radius: 12px; min-height: 46px; }
  .rechner-feld input:focus, .rechner-feld select:focus { outline: 3px solid #7CB8FF; outline-offset: 1px; }
  .rechner-haken { background: var(--weich); border: 1.5px solid var(--tinte); }
  .posten-spur { background: #f1f1ec; border: 1.5px solid var(--tinte); }
  @media (min-width: 900px) { .ih-cta-kopf .ih-knopf { white-space: nowrap; padding: 0 18px; font-size: 15px; } }
  @media (max-width: 560px) { .rechner { box-shadow: 5px 5px 0 #7CB8FF; border-radius: 20px; } .quiz { box-shadow: 5px 5px 0 var(--gelb); border-radius: 22px; } }
  /* ── Keine automatische Silbentrennung in Karten und Ueberschriften ──
     Trennungen wie „Vor-aussetzungen" oder „heu-te" lesen sich schlecht.
     Lange Woerter duerfen nur im Notfall umbrechen, damit nichts ueberlaeuft
     (Handy 375 px). Bewusste Trennstellen (­) bleiben erlaubt. */
  h1, h2, h3, h4,
  a.karte-link .titel, .ih-karte-titel, .ih-karte-text, .st-karte-titel, .werkzeug-titel, .werkzeug-text,
  .gv .gv-kachel-name, .ih-spalte .merkmale li, .ih-spalte .karte a.titel, .schritt-titel, .seiten-iv a, .inhaltsverzeichnis a,
  .ih-cta-kopf, .ih-finale, .rm-kasten h2 {
    -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word;
  }
  /* Schmale Kacheln: ein einzelnes sehr langes Wort darf zur Not irgendwo umbrechen. */
  .ih-spalte .merkmale li, .gv .gv-kachel-name { overflow-wrap: anywhere; }
  /* ── Pfeil-Knoepfe in Karten (Ratgeber, Weiterlesen, Berufe, Stellen, Werkzeuge) ──
     Einheitlich und ruhig: kleiner Kreis mit duennem Rand, Pfeil exakt mittig
     (quadratische Box, Icon als Block). Gefuellt erst bei Hover oder Fokus;
     dann schiebt sich nur der Pfeil ein Stueck nach rechts, nie ohne Bewegungswunsch. */
  .ih-pfeil, .ih-karte-fuss .ih-pfeil, .werkzeug-pfeil {
    box-sizing: border-box; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; gap: 0;
    display: grid; place-items: center; line-height: 0; border-radius: 50%;
    border: 2px solid currentColor; background: transparent;
  }
  .ih-pfeil, .ih-karte-fuss .ih-pfeil { color: var(--tinte); }
  .werkzeug-pfeil { color: var(--akzent); }
  .ih-pfeil svg, .ih-karte-fuss .ih-pfeil svg, .werkzeug-pfeil svg { display: block; width: 16px; height: 16px; margin: 0; }
  a.ih-karte:is(:hover, :focus-visible) .ih-pfeil, a.karte-link:is(:hover, :focus-visible) .ih-pfeil, .st-karte:is(:hover, :focus-within) .ih-pfeil {
    background: var(--tinte); border-color: var(--tinte); color: var(--akzent, var(--gelb));
  }
  a.werkzeug:is(:hover, :focus-visible) .werkzeug-pfeil {
    background: var(--akzent); border-color: var(--akzent); color: #000;
  }
  /* Fusszeile: Angabe links und Pfeil rechts auf einer Mittellinie, immer ganz unten. */
  .ih-karte-fuss { min-height: 32px; align-items: center; margin-top: auto; }
  .ih-karte-fuss > span:first-child { line-height: 1.2; }
  @media (prefers-reduced-motion: no-preference) {
    .ih-pfeil, .werkzeug-pfeil { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
    a.ih-karte:hover .ih-pfeil, a.werkzeug:hover .werkzeug-pfeil { transform: none; }
    .ih-pfeil svg, .werkzeug-pfeil svg { transition: transform .18s ease; }
    a.ih-karte:is(:hover, :focus-visible) .ih-pfeil svg, a.karte-link:is(:hover, :focus-visible) .ih-pfeil svg, .st-karte:is(:hover, :focus-within) .ih-pfeil svg,
    a.werkzeug:is(:hover, :focus-visible) .werkzeug-pfeil svg { transform: translateX(2px); }
  }

  /* ── Partner-Hinweis (components/inhalt/partner-hinweis) ─────────────
     Mit Markenfarbe (PartnerMarke): --pf Akzent, --pf-schrift lesbare
     Knopfschrift, --pf-flaeche helle Tonung. Rand und Kennung bleiben unsere. */
  .ih-partner { --pf: #d9d9d3; --pf-schrift: #000; --pf-flaeche: #fff; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin: 36px 0 32px; padding: 24px 22px 20px; background: var(--pf-flaeche); border: 2px solid var(--tinte, #111); border-radius: 22px; box-shadow: 6px 6px 0 var(--pf); max-width: 72ch; }
  .ih-partner-kennung { position: absolute; top: -12px; left: 18px; margin: 0; padding: 2px 10px; background: #fff; border: 1.5px solid var(--tinte, #111); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #333; }
  .ih-partner-logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--weich, #fffbe6); border: 2px solid var(--tinte, #111); overflow: hidden; }
  .ih-partner-logo svg { width: 26px; height: 26px; }
  /* Logo des Partners: weisse Kachel, Breite nach Seitenverhaeltnis (Wortmarken). */
  .ih-partner-logo--bild { width: auto; min-width: 56px; max-width: 168px; height: 56px; padding: 8px 12px; background: #fff; border-radius: 14px; }
  .ih-partner-logo--bild img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .ih-partner-name { margin: 0 0 2px; font-size: 13px; font-weight: 800; color: #444; }
  .ih-partner-angebot { margin: 0 0 6px; font-size: 19px; font-weight: 900; line-height: 1.25; color: #000; }
  .ih-partner-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: #333; }
  .ih-partner .ih-knoepfe { margin-top: 14px; }
  .ih-partner .ih-knopf { min-height: 46px; font-size: 15px; }
  .ih-partner[data-marke] .ih-knopf--partner { background: var(--pf); color: var(--pf-schrift); }
  .ih-partner-fuss { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #555; }
  @media (prefers-reduced-motion: no-preference) {
    .ih-partner[data-marke] .ih-knopf--partner:hover { transform: translateY(-2px); }
  }
  @media (max-width: 560px) {
    .ih-partner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 16px 16px; box-shadow: 4px 4px 0 var(--pf); }
    .ih-partner-logo { width: 44px; height: 44px; border-radius: 13px; }
    .ih-partner-logo--bild { width: auto; height: 50px; justify-self: start; }
    .ih-partner .ih-knopf { width: 100%; }
  }
  /* Kasten „Über …“ (components/inhalt/partner-ueber): Info, keine Anzeige, deshalb ohne Schatten. */
  .ih-partner-ueber { --pf: var(--tinte, #111); --pf-flaeche: #fff; margin: 28px 0; padding: 20px 22px; max-width: 72ch; background: var(--pf-flaeche); border: 2px solid var(--tinte, #111); border-left: 8px solid var(--pf); border-radius: 22px; }
  .ih-partner-ueber-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; }
  .artikel .ih-partner-ueber h3, .ih-partner-ueber h3 { margin: 0; font-size: 20px; font-weight: 900; color: #000; }
  .ih-partner-ueber p { margin: 0; font-size: 16px; line-height: 1.6; color: #333; }
  .ih-partner-ueber .ih-partner-ueber-link { margin-top: 10px; font-weight: 700; }

/* ── Grundlage fuer Seiten ohne stellen/layout ─────────────────────── */
  :root { --gelb: #FFD000; --text: #1a1a1a; --leise: #555; --linie: rgba(0,0,0,0.1); --karte: #f4f4f4; --grund: #fff; }
  body.lp { margin: 0; background: #fff; color: var(--text); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; }
  .lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
  .lp [hidden] { display: none !important; }
  .lp main.huelle { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 44px) 20px 60px; }
  .lp main.huelle.huelle--breit { max-width: 1160px; }
  .lp .huelle h1 { font-weight: 900; }
  .lp .unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp .ih-held .vorspann { margin: 0; }
  /* Das Thema der Seite als kleine Zeile ueber dem Slogan (fuer Suchmaschinen). */
  .ih-held .h1-thema { display: block; font-size: clamp(13px, 1.5vw, 15px); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; margin: 0 0 12px; opacity: .72; }

  /* ── Kopf mit Bild rechts (Handy, Chat, Foto) ──────────────────────── */
  .lp-held-bild { display: flex; justify-content: center; align-items: center; min-width: 0; }
  .ih-held-kopf--bild { align-items: center; }
  .lp-store { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
  .lp-store li { margin: 0; }
  .lp-store a { display: block; border-radius: 10px; }
  .lp-store img { display: block; height: 44px; width: auto; }
  .lp-store a:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

  /* ── Abschnitte ────────────────────────────────────────────────────── */
  .lp-abschnitt { margin-top: clamp(56px, 8vw, 96px); }
  .lp-abschnitt > h2, .lp-band > h2 { font-size: clamp(27px, 3.6vw, 40px); font-weight: 900; line-height: 1.1; letter-spacing: -0.022em; margin: 0 0 14px; color: #000; max-width: 24ch; }
  .lp-abschnitt > .lp-text, .lp-band > .lp-text { margin: 0 0 clamp(22px, 3vw, 32px); font-size: clamp(16.5px, 2vw, 18.5px); line-height: 1.6; color: #333; max-width: 62ch; }
  .lp-marke { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 13px; border-radius: 999px; background: var(--tinte); color: var(--gelb); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
  .lp-marke svg { width: 14px; height: 14px; }
  .lp-mitte { text-align: center; }
  .lp-mitte > h2, .lp-mitte > .lp-text { margin-left: auto; margin-right: auto; }

  /* ── Karten ohne Link ─────────────────────────────────────────────── */
  .lp-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
  .lp-karten--zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .lp-karte { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; background: #fff; border: 2px solid var(--tinte); border-radius: 22px; padding: 22px 22px 20px; box-shadow: 5px 5px 0 var(--akzent); color: #000; }
  .lp-karten > .lp-karte:nth-child(4n+1), .lp-karten > li:nth-child(4n+1) > .lp-karte { --akzent: #FFD000; }
  .lp-karten > .lp-karte:nth-child(4n+2), .lp-karten > li:nth-child(4n+2) > .lp-karte { --akzent: #7CB8FF; }
  .lp-karten > .lp-karte:nth-child(4n+3), .lp-karten > li:nth-child(4n+3) > .lp-karte { --akzent: #FF8E6E; }
  .lp-karten > .lp-karte:nth-child(4n+4), .lp-karten > li:nth-child(4n+4) > .lp-karte { --akzent: #4ADE9B; }
  .lp-karte h3, .lp-karte-titel { margin: 0; font-size: 18.5px; font-weight: 900; line-height: 1.28; letter-spacing: -0.008em; color: #000; overflow-wrap: break-word; }
  .lp-karte p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #444; }
  .lp-karte p + p { margin-top: 4px; }
  .lp-karte a:not([class]) { color: #000; font-weight: 800; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 3px; }
  .lp-karte .ih-karte-icon { margin-bottom: 6px; }
  .lp-karte .lp-marke { align-self: flex-start; margin-bottom: 4px; }
  .lp-karte-fuss { margin-top: auto; padding-top: 12px; }
  .lp-karte--flach { box-shadow: none; }
  .lp-karte--gelb { background: var(--gelb); }
  .lp-karte--gelb p { color: rgba(0,0,0,.78); }
  .lp-karte--weich { background: var(--weich); border-style: dashed; box-shadow: none; }
  /* Grosse Karte ueber die volle Breite (einzelnes Angebot, Kooperation). */
  .lp-karte--breit { padding: clamp(22px, 3.4vw, 34px); border-radius: 26px; box-shadow: 7px 7px 0 var(--akzent, var(--gelb)); }
  .lp-karte--breit h3 { font-size: clamp(20px, 2.6vw, 26px); }
  .lp-karte--breit p { font-size: 16.5px; max-width: 62ch; }
  .lp-karte--breit > h2 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; color: #000; }
  .lp-karte-logo { display: block; height: 44px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 6px; }

  /* ── Schritte nebeneinander ───────────────────────────────────────── */
  .lp-schritte { list-style: none; counter-reset: lp-schritt; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .lp-schritte > li { counter-increment: lp-schritt; position: relative; margin: 0; padding: 22px 20px 20px; background: #fff; border: 2px solid var(--tinte); border-radius: 22px; }
  .lp-schritte > li::before { content: counter(lp-schritt); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--gelb); border: 2.5px solid var(--tinte); font-weight: 900; font-size: 17px; color: #000; }
  .lp-schritte > li:nth-child(4n+2)::before { background: #7CB8FF; }
  .lp-schritte > li:nth-child(4n+3)::before { background: #FF8E6E; }
  .lp-schritte > li:nth-child(4n+4)::before { background: #4ADE9B; }
  .lp-schritte h3, .lp-schritte .schritt-titel { display: block; margin: 0 0 6px; padding: 0; font-size: 18px; font-weight: 900; line-height: 1.3; color: #000; }
  .lp-schritte p, .lp-schritte .schritt-text { display: block; margin: 0; font-size: 15.5px; line-height: 1.55; color: #444; }

  /* ── Dunkles Band: Zahlen, Matching, Zitat ─────────────────────────── */
  .lp-band {
    margin-top: clamp(56px, 8vw, 96px); padding: clamp(26px, 5vw, 56px); border-radius: clamp(28px, 4vw, 44px); color: #fff;
    background: radial-gradient(110% 90% at 100% 0%, rgba(255,208,0,.16), transparent 55%), var(--tinte);
  }
  .lp-band > h2 { color: #fff; }
  .lp-band > h2 em { font-style: normal; color: var(--gelb); }
  .lp-band > .lp-text { color: rgba(255,255,255,.82); }
  .lp-band .lp-marke { background: var(--gelb); color: #000; }
  .lp-band .lp-karte { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
  .lp-band .lp-karte h3 { color: #fff; }
  .lp-band .lp-karte p { color: rgba(255,255,255,.78); }
  .lp-band .lp-karte .ih-karte-icon { border-color: transparent; }
  .lp-band .lp-schritte > li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
  .lp-band .lp-schritte > li::before { border-color: transparent; }
  .lp-band .lp-schritte h3, .lp-band .lp-schritte .schritt-titel { color: #fff; }
  .lp-band .lp-schritte p, .lp-band .lp-schritte .schritt-text { color: rgba(255,255,255,.78); }
  .lp-band a:not([class]) { color: var(--gelb); font-weight: 800; }
  .lp-band :focus-visible { outline-color: var(--gelb); }
  /* Zahlen im Band: gelb auf dunkel, wie die Eckdaten im Kopf. */
  .lp-zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; }
  .lp-zahlen li { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gelb); display: grid; gap: 4px; align-content: start; }
  .lp-zahlen b, .lp-zahl { display: block; font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--gelb); font-variant-numeric: tabular-nums; }
  .lp-zahlen span { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.78); }
  /* Zitat */
  .lp-zitat { margin: 0; display: grid; gap: 14px; }
  .lp-zitat blockquote { margin: 0; font-size: clamp(20px, 2.8vw, 28px); font-weight: 800; line-height: 1.38; letter-spacing: -0.01em; color: #fff; max-width: 46ch; }
  .lp-zitat blockquote::before { content: "\201E"; display: block; height: .55em; font: 900 2.6em/1 Georgia, serif; color: var(--gelb); margin-bottom: 8px; }
  .lp-zitat figcaption { font-size: 15px; color: rgba(255,255,255,.72); }
  .lp-zitat figcaption b, .lp-zitat figcaption strong { display: block; color: var(--gelb); font-size: 16px; font-weight: 800; }

  /* ── Logo-Leiste ──────────────────────────────────────────────────── */
  .lp-logos { margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 32px); background: var(--tinte); border-radius: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 48px); }
  .lp-logos a { display: flex; align-items: center; border-radius: 8px; }
  .lp-logos img { display: block; height: clamp(28px, 4vw, 40px); width: auto; max-width: 160px; object-fit: contain; }
  .lp-logos a:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; }
  /* Logos im dunklen Band unter den Zahlen (lp-logos--im-band): ohne eigenen Kasten, mit Trennlinie. */
  .lp-band .lp-logos--im-band { margin: clamp(22px, 3vw, 32px) 0 0; padding: clamp(18px, 3vw, 24px) 0 0; background: none; border-radius: 0; border-top: 1px solid rgba(255,255,255,.16); justify-content: flex-start; }
  .lp-logos .lp-logo-hell { height: clamp(22px, 2.8vw, 30px); filter: brightness(0) invert(1); opacity: .7; }

  /* ── Handy-Mockup aus styles.css im Kopf (Klasse lp-held-bild--handy) ── */
  .lp-held-bild--handy .hero-phone-container { flex: none; min-width: 0; }
  .lp-held-bild--handy .hero-phone-container::before { display: none; }
  .lp-held-bild--handy .phone-mockup { width: 300px; height: 600px; box-shadow: 10px 10px 0 var(--tinte); border: 2px solid var(--tinte); }

  /* ── Sprungleiste unter dem Kopf („Auf dieser Seite“ als Knopfreihe) ── */
  .lp-statisch nav.ih-sprung { display: block !important; }
  .ih-sprung { margin: clamp(28px, 4vw, 40px) 0 0; padding: 14px 16px 16px; background: #fff; border: 2px solid var(--tinte); border-radius: 20px; box-shadow: 6px 6px 0 var(--gelb); }
  .ih-sprung .iv-titel { margin: 0 0 10px; }
  .ih-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .ih-sprung li { margin: 0; }
  .ih-sprung a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1.5px solid var(--tinte); border-radius: 999px; background: #fff; color: #000; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; }
  .ih-sprung a:hover { background: var(--gelb); }
  .ih-sprung a:focus-visible { outline: 3px solid #7CB8FF; outline-offset: 2px; }
  .lp-statisch main [id] { scroll-margin-top: 96px; }

  /* ── Drei Karten nebeneinander statt 4 + 2 ─────────────────────────── */
  @media (min-width: 900px) { .lp-karten.lp-karten--drei, .ih-karten.lp-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .lp-karte .lp-zahl { margin-bottom: 4px; }
  /* Links unter einer Karte: eine Liste mit Pfeil, je Zeile ein Ziel. */
  .lp-karte-links { list-style: none; margin: auto 0 0; padding: 10px 0 0; display: grid; gap: 6px; }
  .lp-karte-links li { margin: 0; }
  .lp-karte-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #000; font-weight: 800; font-size: 15.5px; line-height: 1.3; text-decoration: underline; text-decoration-color: var(--akzent, var(--gelb)); text-decoration-thickness: 3px; text-underline-offset: 4px; }
  .lp-karte-links svg { width: 16px; height: 16px; flex: none; }
  .lp-band .lp-karte-links a { color: #fff; }
  /* Logos oben in einer Karte (Kooperationen). */
  .lp-karte-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 6px; }
  .lp-karte-logos a { display: block; border-radius: 8px; }
  .lp-karte-logos .lp-karte-logo { margin: 0; height: clamp(44px, 6vw, 64px); max-width: 220px; border-radius: 8px; }
  /* Links im Fliesstext der Abschnitte und Karten-Werkzeuge unter einem Text. */
  .lp-abschnitt > .lp-text a:not([class]), .lp-band > .lp-text a:not([class]) { font-weight: 800; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 3px; }
  .lp-abschnitt > .lp-text a:not([class]) { color: #000; }
  .lp-abschnitt > .ih-knoepfe, .lp-band > .ih-knoepfe { margin-top: clamp(20px, 3vw, 28px); }

  /* ── Vergleichstabelle: Zellen umbrechen, nichts scrollt seitlich ──── */
  .lp-vergleich td, .lp-vergleich th { white-space: normal !important; font-weight: 400; hyphens: auto; overflow-wrap: anywhere; }
  .lp-vergleich thead th { font-weight: 800; }
  .lp-vergleich tbody th { font-weight: 800; color: #000; hyphens: manual; overflow-wrap: normal; }
  .lp-vergleich .lp-gut { font-weight: 800; color: #000; background: #fffbe6; }
  .lp-vergleich thead .lp-gut { background: var(--gelb); color: #000; }
  /* Tabelle mit Fliesstext in der zweiten Spalte (z. B. Preis und Leistung): nicht fett, umbrechen. */
  .tabelle.lp-tabelle-text td { white-space: normal; font-weight: 400; overflow-wrap: break-word; }
  .tabelle.lp-tabelle-text td strong { font-weight: 800; color: #000; }
  .tabelle.lp-tabelle-text tbody th { width: 34%; }

  /* ── Formulare ────────────────────────────────────────────────────── */
  .lp-formular { position: relative; background: #fff; color: #000; border: 2.5px solid var(--tinte); border-radius: 26px; padding: clamp(20px, 3.4vw, 34px); box-shadow: 8px 8px 0 var(--akzent, var(--gelb)); text-align: left; }
  .lp-formular h3 { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 24px); font-weight: 900; line-height: 1.2; color: #000; }
  .lp-formular label { display: block; margin: 14px 0 6px; font-size: 14.5px; font-weight: 800; line-height: 1.35; color: #000; }
  .lp-formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .lp-formular select, .lp-formular textarea {
    width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; color: #000;
    background: #fff; border: 2px solid var(--tinte); border-radius: 12px; box-shadow: none; appearance: none;
  }
  .lp-formular select { background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
  .lp-formular textarea { min-height: 110px; resize: vertical; }
  .lp-formular input:focus, .lp-formular select:focus, .lp-formular textarea:focus { outline: 3px solid #7CB8FF; outline-offset: 1px; }
  .lp-formular input[readonly] { background: var(--weich); }
  .lp-formular input[type="checkbox"], .lp-formular input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #000; flex: none; }
  .lp-formular .lp-haken { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; background: var(--weich); border: 1.5px solid var(--tinte); border-radius: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.5; cursor: pointer; }
  .lp-formular .lp-haken a { color: #000; font-weight: 800; }
  .lp-formular .lp-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .lp-formular .lp-felder > .lp-breit { grid-column: 1 / -1; }
  .lp-formular button[type="submit"], .lp-formular .lp-senden {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 20px; padding: 0 24px;
    border: 0; border-radius: 999px; background: var(--tinte); color: var(--gelb); font: inherit; font-size: 16.5px; font-weight: 800; cursor: pointer;
  }
  .lp-formular button[type="submit"]:disabled { opacity: .6; cursor: default; }
  .lp-formular button[type="submit"]:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
  .lp-formular .lp-hinweis { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--leise); }
  .lp-formular .lp-hinweis a { color: inherit; }
  .lp-formular .lp-status { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; font-weight: 700; }
  /* Bot-Falle: fuer Menschen unsichtbar, fuer Vorleser ausgeblendet. */
  .lp-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .lp-formular button[type="submit"] { transition: transform .15s ease; }
    .lp-formular button[type="submit"]:not(:disabled):hover { transform: translateY(-2px); }
  }
  /* Formular neben Text: links Text, rechts Formular. */
  .lp-anfrage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 64px); align-items: start; }
  .lp-anfrage > div:first-child > h2 { margin-top: 0; }

  /* ── Preiskarten ──────────────────────────────────────────────────── */
  .lp-preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
  .lp-preis { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 24px 22px 22px; background: #fff; border: 2px solid var(--tinte); border-radius: 24px; color: #000; }
  .lp-preis--beliebt { background: var(--gelb); box-shadow: 7px 7px 0 var(--tinte); }
  .lp-preis--dunkel { background: var(--tinte); color: #fff; }
  .lp-preis-name { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .lp-preis-betrag { margin: 4px 0 0; font-size: clamp(30px, 3.4vw, 38px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .lp-preis-betrag small { font-size: 15px; font-weight: 700; letter-spacing: 0; }
  .lp-preis-neben { margin: 0; font-size: 14px; color: #444; }
  .lp-preis--dunkel .lp-preis-neben { color: rgba(255,255,255,.72); }
  .lp-preis ul { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 0; }
  .lp-preis li { position: relative; margin: 0; padding: 8px 0 8px 28px; font-size: 15px; line-height: 1.4; border-top: 1px dashed rgba(0,0,0,.16); }
  .lp-preis li:first-child { border-top: 0; }
  .lp-preis li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 5px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
  .lp-preis--dunkel li { border-top-color: rgba(255,255,255,.16); }
  .lp-preis--dunkel li::before { color: var(--gelb); }
  .lp-preis .ih-knopf { margin-top: auto; width: 100%; }
  .lp-preis-hinweis { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--leise); max-width: 80ch; }

  /* ── Haeufige Fragen ohne Seitenleiste: nicht breiter als Lesetext ── */
  .lp .faq-block { max-width: 820px; }
  .lp .faq-eintrag p + p { padding-top: 0; }
  .lp .faq-eintrag a { color: #000; font-weight: 800; }

  @media (max-width: 899px) {
    .lp-anfrage { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .lp-karten, .lp-karten--zwei { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lp-karte { padding: 18px 18px 16px; box-shadow: 4px 4px 0 var(--akzent); }
    .lp-schritte { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lp-schritte > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    .lp-schritte > li::before { grid-row: span 2; margin: 0; }
    .lp-band { padding: 26px 18px; border-radius: 26px; margin-left: -4px; margin-right: -4px; }
    .lp-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-formular { box-shadow: 5px 5px 0 var(--akzent, var(--gelb)); border-radius: 22px; }
    .lp-formular .lp-felder { grid-template-columns: minmax(0, 1fr); }
    .lp-preis--beliebt { box-shadow: 5px 5px 0 var(--tinte); }
    .lp-store img { height: 40px; }
    .ih-sprung { box-shadow: 4px 4px 0 var(--gelb); }
    .ih-sprung a { font-size: 14px; padding: 0 12px; min-height: 38px; }
    .lp-held-bild--handy .phone-mockup { width: 260px; height: 500px; box-shadow: 6px 6px 0 var(--tinte); }
  }
  /* Auf dem Handy waere das Mockup fast einen Bildschirm hoch: wie auf /eltern ausblenden. */
  @media (max-width: 480px) { .lp-held-bild--handy { display: none; } }

  /* ── Nur statische Website: Abgleich mit website/styles.css ──────────
     styles.css setzt overflow-x: hidden auf html und body (dann klebt keine
     Seitenleiste) und blendet unter 1024 px jedes <nav> aus. Die feste
     Navbar ist 70 px hoch: der gelbe Kopf beginnt direkt darunter. */
  html:has(> body.lp-statisch) { overflow-x: visible; }
  body.lp-statisch { overflow-x: clip; max-width: none; }
  .lp-statisch main.huelle { padding-top: calc(70px + clamp(28px, 5vw, 44px)); }
  .lp-statisch nav.inhaltsverzeichnis, .lp-statisch nav.seiten-iv { display: block !important; width: auto; gap: 0; }
  @media (min-width: 1100px) { .lp-statisch .ih-haupt > nav.inhaltsverzeichnis { display: none !important; } }
  .lp-statisch .huelle ul, .lp-statisch .huelle ol { margin-top: 0; }
  .lp-statisch .huelle ul.lp-store { margin-top: 18px; }