/* BENORIQ – eine Stylesheet-Datei, keine fremden Schriften, keine Frameworks */
:root {
  --tinte: #14213D;          /* Marine: Überschriften, Fußzeile */
  --tinte2: #1E2F57;
  --text: #1E2638;
  --leise: #5B6578;
  --linie: #E3E6EC;
  --papier: #FAF8F3;         /* warmer Hintergrund */
  --flaeche: #F3F4F7;
  --weiss: #FFFFFF;
  --bernstein: #E9A23B;      /* Handlungsfarbe */
  --bernstein-dunkel: #C9842A;
  --bernstein-flaeche: #FFF4E0;
  --jade: #1B8A6B;           /* sehr hohe Relevanz */
  --jade-flaeche: #E6F4EE;
  --himmel: #2F6FED;         /* Links */
  --himmel-flaeche: #EAF0FD;
  --rot: #D64545;
  --rot-flaeche: #FDECEC;
  --grau-flaeche: #EEF0F3;
  --kobalt: #2D3AE6;          /* Bereich 16–30 */
  --kobalt-tief: #1F29B8;
  --kobalt-flaeche: #E8EAFD;
  --bon: #FFFDF7;
  --bon-tinte: #23252E;
  --bon-leise: #6B6E7A;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(20,33,61,.06), 0 10px 30px rgba(20,33,61,.08);
  --breite: 1120px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--text); background: var(--weiss); line-height: 1.6; font-size: 17px; }
img, svg { max-width: 100%; }
a { color: var(--himmel); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--tinte); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.huelle.schmal { max-width: 760px; }
.mitte { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.leise { color: var(--leise); }
.klein { font-size: .9rem; }
.lead { font-size: 1.2rem; color: var(--leise); max-width: 620px; }
.mitte .lead { margin-left: auto; margin-right: auto; }

/* Marke */
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.marke img.logo { height: 34px; width: auto; display: block; }
.fuss img.logo { height: 30px; width: auto; }
.wortmarke { font-weight: 800; letter-spacing: .12em; font-size: 1.15rem; color: var(--tinte); }
.wortmarke b { color: var(--bernstein-dunkel); font-weight: 800; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.kopf nav { display: flex; align-items: center; gap: 22px; }
.kopf nav a { color: var(--text); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a.aktiv { font-weight: 600; color: var(--tinte); }
.menueknopf { display: none; background: none; border: 1px solid var(--linie); color: var(--tinte); border-radius: 8px; padding: 6px 10px; font-size: 1rem; cursor: pointer; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; font-family: inherit; line-height: 1.2; }
.knopf:hover { transform: translateY(-1px); }
.knopf.haupt { background: var(--bernstein); color: var(--tinte); box-shadow: 0 6px 22px rgba(233,162,59,.35); }
.knopf.haupt:hover { background: #F0B055; }
.knopf.zweit { background: var(--weiss); color: var(--tinte); border: 1px solid var(--linie); }
.knopf.zweit:hover { border-color: var(--tinte); }
.knopf.dunkel { background: var(--tinte); color: #fff; }
.knopf.klein { padding: 9px 16px; font-size: .9rem; }
.knopf.gross { padding: 16px 28px; font-size: 1.08rem; }
.knopf.voll { width: 100%; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Bühne */
.buehne { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 85% 10%, rgba(233,162,59,.22), transparent 60%), radial-gradient(700px 420px at 5% 95%, rgba(27,138,107,.14), transparent 60%), var(--papier); padding: 84px 0 80px; }
.buehne .huelle { position: relative; display: flex; align-items: center; gap: 56px; }
.buehne-text { flex: 1 1 54%; min-width: 0; }
.buehne-bild { flex: 1 1 46%; min-width: 0; }
.buehne h1 em { font-style: normal; color: var(--bernstein-dunkel); }
.dachzeile { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jade); margin-bottom: 20px; }
.dachzeile i { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px rgba(27,138,107,.18); }
.vertrauen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--leise); }
.vertrauen li { display: flex; align-items: center; gap: 8px; }
.vertrauen li::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23E6F4EE'/%3E%3Cpath d='M4.5 8.3l2.4 2.4 4.6-5' fill='none' stroke='%231B8A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }

/* Ergebniskarte (Vorschau auf der Startseite) */
.karte-ergebnis { background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(20,33,61,.18), 0 0 0 1px var(--linie); overflow: hidden; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .5s; }
.karte-ergebnis:hover { transform: none; }
.karte-ergebnis .kopfzeile { padding: 18px 22px 14px; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.karte-ergebnis .kopfzeile small { display: block; color: var(--leise); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.karte-ergebnis .kopfzeile strong { display: block; font-size: 1.05rem; color: var(--tinte); }
.karte-ergebnis .zahl { font-size: 2rem; font-weight: 800; color: var(--tinte); line-height: 1; }
.karte-ergebnis ul { list-style: none; margin: 0; padding: 8px 10px; }
.karte-ergebnis li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .93rem; }
.karte-ergebnis li + li { margin-top: 2px; }
.karte-ergebnis li.gesperrt { color: var(--leise); }
.karte-ergebnis li .punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.karte-ergebnis li .punkt.a { background: var(--jade); }
.karte-ergebnis li .punkt.b { background: var(--bernstein); }
.karte-ergebnis li .punkt.c { background: #C5CAD3; }
.karte-ergebnis li .recht { margin-left: auto; font-size: .78rem; color: var(--leise); white-space: nowrap; }
.karte-ergebnis .kartenfuss { padding: 12px 22px 18px; border-top: 1px solid var(--linie); background: var(--bernstein-flaeche); font-size: .9rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Abschnitte */
.abschnitt { padding: 80px 0; }
.abschnitt.flaeche { background: var(--flaeche); }
.abschnitt.papier { background: var(--papier); }
.abschnitt.dunkel { background: var(--tinte); color: #fff; }
.abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: #fff; }
.abschnitt.dunkel .lead { color: rgba(255,255,255,.78); }
.abschnitt-kopf { max-width: 720px; margin-bottom: 40px; }
.abschnitt-kopf.mitte { margin-left: auto; margin-right: auto; }
.raster { display: grid; gap: 20px; }
.raster.zwei { grid-template-columns: repeat(2, 1fr); }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; }
.karte h3 { margin-top: 0; }
.karte .symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--bernstein-flaeche); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; }
.karte.link { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
.karte.link:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.karte.link .weiter { color: var(--himmel); font-weight: 600; font-size: .92rem; }
.schritt { position: relative; padding-top: 10px; }
.schritt .nummer { width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hinweisbox { border-left: 4px solid var(--bernstein); background: var(--bernstein-flaeche); padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 20px 0; }
.hinweisbox.jade { border-color: var(--jade); background: var(--jade-flaeche); }
.hinweisbox.rot { border-color: var(--rot); background: var(--rot-flaeche); }
.hinweisbox p:last-child { margin-bottom: 0; }

/* Vergleichstabelle */
.vergleich { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.vergleich th, .vergleich td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich th { background: var(--flaeche); font-size: .9rem; letter-spacing: .02em; }
.vergleich tr:last-child td { border-bottom: 0; }
.vergleich .ja { color: var(--jade); font-weight: 700; }
.vergleich .nein { color: #B8BEC9; }
.preis { font-size: 1.6rem; font-weight: 800; color: var(--tinte); }
.preis small { font-size: .9rem; font-weight: 500; color: var(--leise); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--linie); padding: 6px 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--tinte); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--leise); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text); padding-bottom: 10px; }

/* Textseiten */
.textseite { padding: 64px 0 80px; }
.textseite h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.textseite h2 { font-size: 1.45rem; margin-top: 2em; }
.textseite h3 { margin-top: 1.6em; }
.textseite .stand { font-size: .9rem; color: var(--leise); }
.textseite table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.textseite th, .textseite td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.redaktion { background: var(--rot-flaeche); color: #8A2D2D; padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* Vorteilslisten auf den Zielgruppenseiten */
.vorteilsliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vorteilsliste li { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; }
.vorteilsliste li h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vorteilsliste li p { margin: 0; font-size: .95rem; color: var(--text); }
.vorteilsliste .meta { grid-column: 1 / -1; font-size: .85rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.marke-status { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.marke-status.verifiziert { background: var(--jade-flaeche); color: var(--jade); }
.marke-status.pruefen { background: var(--bernstein-flaeche); color: var(--bernstein-dunkel); }
.marke-status.markt { background: var(--himmel-flaeche); color: var(--himmel); }
.marke-status.checkliste { background: var(--grau-flaeche); color: var(--leise); }

/* Fuß */
.fuss { background: var(--tinte); color: rgba(255,255,255,.75); padding: 56px 0 32px; font-size: .92rem; }
.fuss .huelle { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.fuss h4 { color: #fff; margin-bottom: 12px; font-size: .95rem; }
.fuss a { color: rgba(255,255,255,.85); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 8px; }
.fuss .wortmarke { color: #fff; }
.fuss .wortmarke b { color: var(--bernstein); }
.fuss .unten { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.55); }

/* ===================== VorteilsCheck ===================== */
.check-seite { background: var(--papier); min-height: calc(100vh - 68px); padding: 40px 0 80px; }
.check-rahmen { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; }
.check-kopf { padding: 18px 28px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .9rem; color: var(--leise); }
.fortschritt { height: 6px; background: var(--grau-flaeche); }
.fortschritt i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--bernstein)); width: 0; transition: width .3s; }
.check-inhalt { padding: 36px 28px 28px; }
.check-inhalt h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .35em; }
.frage-hilfe { color: var(--leise); margin-bottom: 22px; }
.optionen { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.optionen label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--linie); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; background: #fff; }
.optionen label:hover { border-color: #B9C0CC; }
.optionen label.gewaehlt { border-color: var(--tinte); background: var(--himmel-flaeche); }
.optionen input { width: 20px; height: 20px; margin: 0; accent-color: var(--tinte); flex: none; }
.optionen .text { flex: 1; }
.optionen .text small { display: block; color: var(--leise); font-size: .85rem; }
.optionen.zweispaltig { grid-template-columns: 1fr 1fr; }
.zahlfeld { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.zahlfeld input { font: inherit; font-size: 1.4rem; width: 140px; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 12px; }
.zahlfeld input:focus { outline: 2px solid var(--tinte); border-color: var(--tinte); }
.check-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.check-nav .zurueck { background: none; border: 0; color: var(--leise); cursor: pointer; font: inherit; padding: 8px 0; }
.check-nav .zurueck:hover { color: var(--tinte); }
.check-start { text-align: center; padding: 56px 28px; }
.check-start h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.check-start .vertrauen { justify-content: center; margin-bottom: 28px; }
.check-fehler { color: var(--rot); font-size: .9rem; margin: -12px 0 14px; }

/* Ergebnis */
.ergebnis-kopf { background: linear-gradient(135deg, var(--tinte), var(--tinte2)); color: #fff; padding: 36px 28px; }
.ergebnis-kopf .dachzeile { color: var(--bernstein); margin-bottom: 10px; }
.ergebnis-kopf .dachzeile i { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(233,162,59,.25); }
.ergebnis-kopf h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 8px; }
.ergebnis-kopf p { color: rgba(255,255,255,.8); margin: 0; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kennzahlen div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 10px 14px; min-width: 120px; }
.kennzahlen strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.kennzahlen span { font-size: .8rem; color: rgba(255,255,255,.75); }
.bereiche { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 28px 0; }
.bereiche span { background: var(--flaeche); border-radius: 999px; padding: 5px 12px; font-size: .85rem; }
.bereiche span b { color: var(--tinte); }
.treffer { list-style: none; margin: 0; padding: 18px 28px 8px; display: grid; gap: 10px; }
.treffer li { border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; }
.treffer li.offen { background: #fff; }
.treffer li.gesperrt { background: var(--flaeche); position: relative; }
.treffer .zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.treffer .zeile h3 { margin: 0; font-size: 1.02rem; flex: 1 1 auto; }
.treffer .relevanz { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.relevanz.a { background: var(--jade-flaeche); color: var(--jade); }
.relevanz.b { background: var(--bernstein-flaeche); color: var(--bernstein-dunkel); }
.relevanz.c { background: var(--grau-flaeche); color: var(--leise); }
.treffer .kurz { margin: 8px 0 0; font-size: .95rem; }
.treffer .warum { margin: 10px 0 0; padding-left: 0; list-style: none; font-size: .9rem; color: var(--leise); }
.treffer .warum li { border: 0; padding: 2px 0 2px 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231B8A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 5px/14px; }
.treffer .schloss { font-size: .85rem; color: var(--leise); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.treffer .schloss::before { content: "🔒"; font-size: .9rem; }
.treffer .wert { font-size: .85rem; color: var(--leise); white-space: nowrap; }
.basisliste { padding: 8px 28px 0; font-size: .9rem; color: var(--leise); }
.basisliste ul { margin: 6px 0 0; padding-left: 1.2em; }
.freischalten { margin: 18px 28px 28px; background: var(--bernstein-flaeche); border: 1px solid #F3D9A6; border-radius: 16px; padding: 24px; }
.freischalten h3 { margin-top: 0; }
.freischalten ul { margin: 0 0 16px; padding-left: 1.2em; font-size: .95rem; }
.freischalten .preisblock { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.freischalten .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--leise); margin-top: 14px; }
.freischalten .zustimmung input { margin-top: 4px; }
.warteliste { margin: 0 28px 28px; background: var(--flaeche); border-radius: 16px; padding: 22px 24px; }
.warteliste h3 { margin-top: 0; }
.warteliste form { display: grid; gap: 10px; }
.warteliste input[type=email], .warteliste select { font: inherit; padding: 11px 12px; border: 1.5px solid var(--linie); border-radius: 10px; width: 100%; background: #fff; }
.warteliste .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--leise); }
.meldung { margin: 0 28px 20px; padding: 12px 16px; border-radius: 10px; font-size: .95rem; }
.meldung.ok { background: var(--jade-flaeche); color: var(--jade); }
.meldung.fehler { background: var(--rot-flaeche); color: var(--rot); }
.meldung.info { background: var(--himmel-flaeche); color: var(--tinte); }
.ergebnis-fuss { padding: 0 28px 28px; font-size: .85rem; color: var(--leise); }
.ergebnis-fuss .merken { margin-bottom: 10px; }
.report-kopf .aktionen .merken { flex-basis: 100%; font-size: .85rem; color: var(--leise); display: flex; gap: 8px; align-items: flex-start; }
.ergebnis-fuss button { background: none; border: 0; color: var(--himmel); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Report */
.report { max-width: 860px; margin: 0 auto; }
.report-kopf { background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 32px; margin-bottom: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.report-kopf h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 6px; }
.report-kopf .aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.report-abschnitt { margin-bottom: 30px; }
.report-abschnitt > h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 12px; }
.report-abschnitt > h2 .nummer { width: 34px; height: 34px; border-radius: 50%; background: var(--tinte); color: #fff; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.report-abschnitt > p.erkl { color: var(--leise); margin-bottom: 14px; font-size: .95rem; }
.report-eintrag { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 24px 26px; margin-bottom: 14px; page-break-inside: avoid; break-inside: avoid; }
.report-eintrag.genutzt { opacity: .55; }
.report-eintrag .zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.report-eintrag .zeile h3 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.report-eintrag .kurz { margin-bottom: 14px; }
.report-eintrag .block { margin-top: 14px; }
.report-eintrag .block h4 { margin: 0 0 6px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.report-eintrag .block ul, .report-eintrag .block ol { margin: 0; padding-left: 1.2em; }
.report-eintrag .block li { margin-bottom: 4px; }
.report-eintrag .warum { list-style: none; padding-left: 0 !important; }
.report-eintrag .warum li { padding-left: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231B8A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 5px/14px; }
.report-eintrag .fakten { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: var(--leise); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.report-eintrag .fakten b { color: var(--text); font-weight: 600; }
.report-eintrag .hinweis { background: var(--bernstein-flaeche); border-radius: 10px; padding: 10px 14px; font-size: .92rem; margin-top: 12px; }
.report-eintrag .genutzt-schalter { font-size: .85rem; color: var(--leise); display: flex; gap: 8px; align-items: center; margin-top: 12px; cursor: pointer; }
.report-eintrag .quelle a { word-break: break-all; }
.report-disclaimer { font-size: .85rem; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 18px; margin-top: 30px; }

/* Druck */
@media print {
  .bereichsleiste, .kopf, .fuss, .report-kopf .aktionen, .genutzt-schalter, .nicht-drucken { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .check-seite { background: #fff; padding: 0; }
  .report-eintrag, .report-kopf { border: 1px solid #ccc; box-shadow: none; }
  a { color: inherit; text-decoration: none; }
  .report-eintrag .quelle a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ===================== Dach: Bereichsleiste (Haushalte · 16–30) ===================== */
.kopf-links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.bereichsleiste { background: var(--tinte); padding-top: 10px; }
.bereichswahl { display: flex; gap: 6px; }
.bereich { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 210px; padding: 11px 24px 12px; border-radius: 14px 14px 0 0; text-decoration: none; color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); border-top: 4px solid transparent; transition: background .15s, color .15s; }
.bereich:hover { background: rgba(255,255,255,.13); color: #fff; }
.bereich .bereich-name { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; display: flex; align-items: center; gap: 9px; }
.bereich .bereich-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bereich.haushalt .bereich-name::before { background: var(--bernstein); }
.bereich.jung .bereich-name::before { background: #7C86FF; }
.bereich .bereich-zusatz { font-size: .78rem; font-weight: 500; opacity: .78; padding-left: 19px; white-space: nowrap; }
.bereich.aktiv { background: var(--weiss); color: var(--tinte); }
.bereich.haushalt.aktiv { border-top-color: var(--bernstein); }
.bereich.jung.aktiv { border-top-color: var(--kobalt); }
.bereich:focus-visible { outline: 3px solid var(--bernstein); outline-offset: -3px; }

/* ===================== Dach-Startseite ===================== */
.tor-buehne { background: radial-gradient(900px 420px at 92% 0%, rgba(45,58,230,.12), transparent 60%), radial-gradient(800px 420px at 0% 100%, rgba(233,162,59,.16), transparent 60%), var(--papier); padding: 72px 0 64px; }
.tor-kopf { max-width: 760px; }
.tor-kopf h1 em { font-style: normal; color: var(--bernstein-dunkel); }
.tore { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.tor { border-radius: 22px; padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; color: #fff; min-width: 0; box-shadow: 0 24px 60px rgba(20,33,61,.18); }
.tor.haushalt { background: linear-gradient(160deg, #1E2F57, var(--tinte) 60%); }
.tor.jung { background: linear-gradient(160deg, #3F4CFF, var(--kobalt) 45%, var(--kobalt-tief)); }
.tor .etikett { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bernstein); }
.tor h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0; }
.tor p { color: rgba(255,255,255,.84); margin: 0; }
.tor .punkte { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tor .punkte li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 11px; font-size: .84rem; }
.tor .fakten { font-size: .88rem; color: rgba(255,255,255,.72); }
.tor .knopfreihe { margin-top: auto; }
.knopf.hell { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.knopf.hell:hover { background: rgba(255,255,255,.18); }
.karte-ergebnis.flach { transform: none; box-shadow: 0 18px 40px rgba(0,0,0,.28); max-width: 420px; color: var(--text); }
.karte-ergebnis.flach:hover { transform: none; }
.mini-bon { background: var(--bon); color: var(--bon-tinte); font-family: var(--mono); font-size: .8rem; line-height: 1.5; border-radius: 4px; padding: 16px 18px 14px; box-shadow: 0 18px 40px rgba(0,0,0,.3); transform: rotate(-1.2deg); max-width: 380px; position: relative; }
.mini-bon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: radial-gradient(circle at 5px -1px, transparent 5px, var(--bon) 5.5px) 0 0 / 10px 8px repeat-x; }
.mini-bon .z { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.mini-bon .z span:last-child { white-space: nowrap; }
.mini-bon hr { border: 0; border-top: 1px dashed #B9B6AC; margin: 8px 0; }
.mini-bon .gross { font-weight: 700; font-size: .9rem; }
.mini-bon .klein { color: var(--bon-leise); font-size: .72rem; }
.wahl .karte { display: flex; flex-direction: column; gap: 10px; }
.wahl .karte p { margin: 0; }
.wahl .weiter { margin-top: auto; font-weight: 650; text-decoration: none; }
.wahl-marke { align-self: flex-start; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.wahl-marke.jung { background: var(--kobalt-flaeche); color: var(--kobalt-tief); }
.wahl-marke.haushalt { background: var(--grau-flaeche); color: var(--tinte); }
.wahl-marke.beide { background: var(--bernstein-flaeche); color: var(--bernstein-dunkel); }
.prinzipien h3 { font-size: 1.02rem; }
.prinzipien p { font-size: .95rem; margin: 0; }
.hinweisbox.jung { border-color: var(--kobalt); background: var(--kobalt-flaeche); }

/* Responsiv */
@media (max-width: 1080px) {
  .kopf nav { gap: 16px; }
  .kopf nav a[href="/so-funktioniert-es/"], .kopf nav a[href="/lebensereignisse/"] { display: none; }
}
@media (max-width: 960px) {
  .tore { grid-template-columns: 1fr; }
  .raster.drei, .raster.vier { grid-template-columns: repeat(2, 1fr); }
  .fuss .huelle { grid-template-columns: 1fr 1fr; }
  .buehne .huelle { flex-direction: column; align-items: stretch; gap: 40px; }
  .karte-ergebnis { transform: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .kopf nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--linie); flex-direction: column; align-items: stretch; padding: 12px 24px 18px; gap: 4px; }
  .kopf nav.offen { display: flex; }
  .kopf nav a { padding: 10px 0; }
  .menueknopf { display: block; }
  .kopf nav a[href="/so-funktioniert-es/"], .kopf nav a[href="/lebensereignisse/"] { display: block; }
  .tor { padding: 26px 20px; }
  .bereichsleiste { padding-top: 8px; }
  .bereichswahl { gap: 4px; }
  .bereich { flex: 1 1 0; min-width: 0; padding: 9px 12px 10px; }
  .bereich .bereich-name { font-size: 1.08rem; gap: 7px; }
  .bereich .bereich-zusatz { padding-left: 17px; font-size: .7rem; white-space: normal; }
  .tor-buehne { padding: 48px 0 40px; }
  .mini-bon, .karte-ergebnis.flach { max-width: 100%; }
  .buehne { padding: 56px 0; }
  .abschnitt { padding: 56px 0; }
  .raster.zwei, .raster.drei, .raster.vier { grid-template-columns: 1fr; }
  .fuss .huelle { grid-template-columns: 1fr; }
  .check-inhalt, .ergebnis-kopf { padding-left: 20px; padding-right: 20px; }
  .treffer, .bereiche, .basisliste { padding-left: 20px; padding-right: 20px; }
  .freischalten, .warteliste, .meldung { margin-left: 20px; margin-right: 20px; }
  .ergebnis-fuss { padding-left: 20px; padding-right: 20px; }
  .optionen.zweispaltig { grid-template-columns: 1fr; }
  .vorteilsliste li { grid-template-columns: 1fr; }
  .report-kopf { padding: 22px; }
  .report-eintrag { padding: 18px; }
}
.zustimmung.merken { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--leise); cursor: pointer; }
.zustimmung.merken input { margin-top: 4px; }

/* Wartelisten-Seiten Pflegeorganisator und Dokumentenhelfer (Nachfrage-Test, Formular → warteliste.py auf netcup) */
.wl-karte { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 20px 50px rgba(20,33,61,.08); }
.wl-karte .meldung { margin: 0 0 16px; }
.meldung.info { background: var(--bernstein-flaeche); color: var(--tinte); }
.wl-form { display: grid; gap: 18px; }
.wl-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wl-form legend, .wl-form .feldname { font-weight: 700; color: var(--tinte); margin-bottom: 8px; display: block; padding: 0; }
.wl-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wl-wahl label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--linie); border-radius: 10px; cursor: pointer; background: #fff; font-size: .95rem; }
.wl-wahl label:hover { border-color: var(--tinte); }
.wl-wahl input { margin-top: 3px; flex: none; }
.wl-wahl label:has(input:checked) { border-color: var(--jade); background: var(--jade-flaeche); }
.wl-form input[type=email], .wl-form select, .wl-form textarea { font: inherit; padding: 11px 12px; border: 1.5px solid var(--linie); border-radius: 10px; width: 100%; background: #fff; color: var(--text); }
.wl-form textarea { min-height: 84px; resize: vertical; }
.wl-form .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--leise); }
.wl-form .zustimmung input { margin-top: 4px; flex: none; }
.wl-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.wl-paket { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.wl-paket .preis { font-size: 1.9rem; font-weight: 800; color: var(--tinte); line-height: 1.1; }
.wl-paket .preis small { font-size: .85rem; font-weight: 600; color: var(--leise); }
.wl-paket ul { margin: 6px 0 0; padding-left: 1.1em; font-size: .93rem; }
.wl-paket.hervor { border: 2px solid var(--bernstein); }
.wl-geplant { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bernstein-dunkel); }
@media (max-width: 600px) { .wl-karte { padding: 20px 16px; } }

/* Hinweis auf die Blue-Amber-Familie */
.fuss .familie { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.5; transition: border-color .2s, background .2s; }
.fuss .familie:hover { text-decoration: none; border-color: var(--bernstein); background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); }
.fuss .familie strong, .fuss .familie-zeichen { color: var(--bernstein); }
.familie-zeichen { font-size: 1.1rem; line-height: 1; }
.familie-los { margin-left: auto; white-space: nowrap; color: #fff; font-weight: 600; }
@media (max-width: 640px) { .fuss .familie { flex-wrap: wrap; row-gap: 8px; } .fuss .familie > span:nth-child(2) { flex: 1 1 0; min-width: 180px; } .familie-los { margin-left: 30px; } }