/* ══════════════════════════════════════════════════════════════════════════
   WISSEN — Themenseiten (SEO-Landeseiten) unter /landing/wissen/<slug>/
   Baut AUF landing.css auf (Tokens, Fonts, Header, Footer, Buttons) und
   ergaenzt nur, was eine reine Textseite braucht: Lesespalte, Prosa-Rhythmus,
   Breadcrumb, Faktenkaesten, verwandte Themen.

   Es gibt bewusst KEINE eigenen Farben und KEINE eigene Schrift hier —
   aendert sich die Marke in landing.css, ziehen diese Seiten automatisch mit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Header: auf Textseiten solide statt Glas (kein Hero darunter) ────────── */
/* `position:static` statt `fixed`: Auf der Landing liegt der Kopf ueber dem
   Hero, hier beginnt direkt Text. Fest verankert muesste das Polster darunter
   exakt der Kopfhoehe entsprechen - und die waechst, sobald die Bedienleiste
   auf schmalen Geraeten umbricht (320 px: 62 -> 85 px). Dann liegt der Kopf
   ueber der ersten Textzeile. Statisch kann das nicht passieren. */
body.wissen header{position:static;background:var(--bg);backdrop-filter:none;
                   -webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
body.wissen header .wrap{gap:12px}
/* Bedienleiste rechts. KEIN flex-Spacer davor: der belegt die Restbreite und
   schiebt die Leiste per flex-wrap in eine zweite Zeile. */
body.wissen header .hctrl{margin-left:auto}
/* Unter 360 px reicht die Breite fuer Marke + Chip + "Anmelden" + Knopf nicht
   (320 px: 325 px Bedarf). Auf einer Seite, auf der Besucher aus der Suche
   landen, faellt der Anmelde-Link weg, nicht der Knopf. */
@media (max-width:359px){ body.wissen header .login{display:none} }

/* ── Lesespalte ───────────────────────────────────────────────────────────── */
.doc{max-width:760px;margin:0 auto;padding:0 24px}
.doc-hero{padding:52px 0 8px}
.doc-hero .eyebrow{margin-bottom:14px}
.doc h1{font-size:clamp(30px,5.2vw,46px);font-weight:800;color:var(--head);margin-bottom:18px}
.doc .lead{font-size:clamp(17.5px,2.4vw,20px);color:var(--ink2);line-height:1.6}
.doc h2{font-size:clamp(23px,3.2vw,29px);font-weight:800;color:var(--head);
        margin:46px 0 14px;scroll-margin-top:80px}
.doc h3{font-size:19px;font-weight:700;color:var(--ink);margin:28px 0 8px}
.doc p{margin-bottom:16px}
.doc p+h3{margin-top:26px}
.doc strong{color:var(--ink);font-weight:700}
/* Unterstrichen wird NUR im Fliesstext. Nicht `.doc a` pauschal: die
   Verweiskarten und der Abschluss-Knopf sind ebenfalls <a> im .doc und bekamen
   dadurch Unterstriche quer durch die Karte. */
.doc p a,.doc li a,.doc td a,.doc .lead a{color:var(--teal);text-decoration:underline;
       text-decoration-color:var(--teal-line);text-underline-offset:3px}
.doc p a:hover,.doc li a:hover,.doc td a:hover,.doc .lead a:hover{color:var(--head);
       text-decoration-color:var(--head)}

/* Listen im Lesefluss */
.doc ul,.doc ol{margin:0 0 18px 0;padding-left:0;list-style:none}
.doc ol{counter-reset:doc-ol}
.doc li{position:relative;padding-left:26px;margin-bottom:9px}
.doc ul>li::before{content:"";position:absolute;left:7px;top:11px;width:7px;height:7px;
                   border-radius:50%;background:var(--teal)}
.doc ol>li{counter-increment:doc-ol}
.doc ol>li::before{content:counter(doc-ol);position:absolute;left:0;top:1px;width:19px;
                   text-align:center;font-size:13px;font-weight:800;color:var(--teal)}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.crumb{font-size:13.5px;color:var(--faint);padding:26px 0 0;display:flex;flex-wrap:wrap;
       align-items:center;gap:7px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--teal)}
.crumb span{color:var(--border-strong)}

/* ── Faktenkasten („Kurz gesagt") ─────────────────────────────────────────── */
.doc-box{background:var(--teal-bg);border:1px solid var(--teal-line);border-radius:16px;
         padding:22px 24px;margin:30px 0}
.doc-box .bt{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
             color:var(--teal);margin-bottom:10px}
.doc-box p:last-child,.doc-box ul:last-child,.doc-box li:last-child{margin-bottom:0}
.doc-box li::before{background:var(--teal)}

/* ── Vergleichstabelle (schmal, mobilfest) ────────────────────────────────── */
.doc-table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15.5px}
.doc-table th,.doc-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);
                            vertical-align:top}
.doc-table th{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
              color:var(--faint);border-bottom-color:var(--line2)}
.doc-table td:first-child{color:var(--ink);font-weight:600;width:40%}
.doc-table tr:last-child td{border-bottom:none}

/* ── FAQ (native <details>, wie auf der Landing) ──────────────────────────── */
.doc-faq{margin:14px 0 8px}
.doc-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);
                 padding:0;margin-bottom:10px;overflow:hidden}
.doc-faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
                 font-weight:700;color:var(--head);font-size:16.5px}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::after{content:"";position:absolute;right:19px;top:23px;width:9px;height:9px;
                        border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                        transform:rotate(45deg);transition:transform .2s var(--ease-soft)}
.doc-faq details[open] summary::after{transform:rotate(-135deg)}
.doc-faq details>p{padding:0 18px 17px;margin:0}
.doc-faq details>p+p{padding-top:0}

/* ── CTA-Band am Seitenende ───────────────────────────────────────────────── */
.doc-cta{background:var(--surface);border:1px solid var(--line);border-radius:20px;
         padding:30px 28px;margin:46px 0 10px;text-align:center;box-shadow:0 18px 40px var(--shadow)}
.doc-cta h2{margin:0 0 10px;font-size:clamp(21px,3vw,26px)}
.doc-cta p{margin:0 auto 20px;max-width:52ch;color:var(--body)}
.doc-cta .btn{margin:0 auto}
/* Zwei Knöpfe (G·B9, 28.09.2026): Registrierung + Check-in-Ablauf ansehen.
   Umbruch auf schmalen Geräten, dann je volle Breite. */
.doc-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.doc-cta-actions .btn{margin:0}
.btn-secondary{background:var(--surface);border:1px solid var(--border-strong);color:var(--head)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--head)}
@media (max-width:480px){ .doc-cta-actions .btn{flex:1 1 100%;text-align:center} }

/* ── Verwandte Themen ─────────────────────────────────────────────────────── */
.doc-rel{margin:44px 0 0;border-top:1px solid var(--line);padding-top:30px}
.doc-rel .rt{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
             color:var(--faint);margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:12px}
.rel-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;
          padding:16px 18px;text-decoration:none;transition:transform .18s var(--ease-soft),
          border-color .18s,box-shadow .18s}
.rel-card:hover{transform:translateY(-2px);border-color:var(--teal);
                box-shadow:0 16px 32px var(--shadow)}
.rel-card b{display:block;color:var(--head);font-size:16px;font-weight:700;margin-bottom:4px}
.rel-card span{display:block;color:var(--body);font-size:14px;line-height:1.5}
.rel-card:hover b{color:var(--teal)}

/* ── Hub-Seite (/landing/wissen/) ─────────────────────────────────────────── */
.hub-group{margin-top:44px}
.hub-group .gt{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;
               letter-spacing:.11em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.hub-group .gt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.hub-wide{max-width:1000px}

/* ── Fusszeile: Abstand nach der Lesespalte ───────────────────────────────── */
body.wissen footer{margin-top:64px}

@media (max-width:640px){
  .doc-hero{padding:34px 0 4px}
  .doc h2{margin-top:38px}
  .doc-cta{padding:26px 20px}
  .doc-table{font-size:15px}
  .doc-table th,.doc-table td{padding:10px 8px}
  .doc-table td:first-child{width:45%}
}

/* ── Rechts-nach-links (Arabisch) ─────────────────────────────────────────
   landing.css bringt nur eine einzige RTL-Regel mit (Pfeil in .choosecard),
   weil die Landing fast ohne gerichtete Elemente auskommt. Eine Textseite hat
   mehr davon: Aufzaehlungspunkte, Breadcrumb-Pfeile, den Aufklapp-Pfeil der
   FAQ und die Einrueckung der Listen. */
[dir="rtl"] .doc li{padding-left:0;padding-right:26px}
[dir="rtl"] .doc ul>li::before{left:auto;right:7px}
[dir="rtl"] .doc ol>li::before{left:auto;right:0}
[dir="rtl"] .doc-faq summary{padding:16px 18px 16px 46px}
[dir="rtl"] .doc-faq summary::after{right:auto;left:19px}
[dir="rtl"] .doc-table th,[dir="rtl"] .doc-table td{text-align:right}
/* Der Breadcrumb-Pfeil zeigt in der Leserichtung, also nach links. */
[dir="rtl"] .crumb span{transform:scaleX(-1);display:inline-block}