/* ==========================================================================
   HausChat.de — Wissen (Übersicht und Ratgeber-Seiten)
   Wird von wissen.html und wissen/*.html nach styles.css geladen.
   Ruhig und seriös wie „Sicherheit und Compliance“: feste Schriftstufen,
   weiße Karten mit feinen Linien, keine Icons in Kästchen, keine Bewegung.
   Kurzmeldungen: js/wissen.js (Klassen .wm*).
   ========================================================================== */

/* ── Schriftstufen ──────────────────────────────────────────────────────
     Label      Almarai 700, 12px, Großbuchstaben
     H1         Liter 400, bis 64px
     H2         Liter 400, bis 34px
     Einleitung Almarai 400, 19px
     Text       Almarai 400, 17px (Artikel), 15px (Karten)
     Hinweis    Almarai 400, 14px                                          */
.wissen .w-label{display:block;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:12px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-500)}
.wissen .w-h1{font-family:var(--font-heading);font-size:clamp(32px,4.2vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.wissen .w-h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.wissen .w-lead{font-family:var(--font-body);font-size:19px;line-height:1.6;color:var(--body)}
.wissen .w-meta{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--muted)}
.wissen h3{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:17px;line-height:1.35;color:var(--ink)}
.wissen .w-wrap{max-width:1264px}

/* ── Einstieg ─────────────────────────────────────────────────────────── */
.w-hero{padding:calc(112px + var(--nav-height)) 0 72px;
  background:radial-gradient(70% 70% at 90% 0%,color-mix(in srgb,var(--violet-500) 14%,transparent),color-mix(in srgb,var(--violet-500) 0%,transparent) 70%),
    linear-gradient(180deg,var(--teal-50) 0,var(--page) 100%)}
.w-hero__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:end}
.w-hero__title{display:flex;flex-direction:column;gap:20px}
.w-hero .w-h1{max-width:12em}

/* ── Übersicht: Abschnitte mit Karten ─────────────────────────────────── */
.w-block{background:var(--page)}
.w-block--hell{background:#FFFFFF;border-block:1px solid var(--hairline)}
.w-block__kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;row-gap:14px;align-items:end;margin-bottom:40px}
.w-block__kopf .w-label,.w-block__kopf .w-h2{grid-column:1}
.w-block__kopf .w-meta,.w-block__kopf p{grid-column:2;grid-row:2}
.w-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.w-karte{display:flex;flex-direction:column;gap:10px;padding:28px 26px;background:#FFFFFF;border:1px solid var(--hairline);border-radius:20px;color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out)}
.w-block--hell .w-karte{background:var(--page)}
.w-karte:hover{border-color:var(--teal-200);color:var(--ink)}
.w-karte p{font-size:15px;line-height:1.6;color:var(--body)}
.w-karte__mehr{margin-top:auto;padding-top:6px;font-size:14px;font-weight:var(--fw-bold);color:var(--teal-700)}

/* ── Kurzmeldungen ────────────────────────────────────────────────────── */
.w-meldungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.w-meldungen[aria-busy="true"]{min-height:120px}
.wm{display:flex;flex-direction:column;gap:10px;padding:26px 24px;background:#FFFFFF;border:1px solid var(--hairline);border-radius:20px}
.wm__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wm__thema{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-700);font-size:12px;font-weight:var(--fw-bold);letter-spacing:.03em}
.wm__datum{font-size:13px;color:var(--muted)}
.wissen .wm__titel{font-size:17px}
.wm__text{font-size:15px;line-height:1.6;color:var(--body)}
.wm__quelle{margin-top:auto;padding-top:10px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)}
.wm__quelle a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal-200)}
.w-leer{padding:28px;border:1px dashed var(--hairline);border-radius:20px;text-align:center}
.w-hinweis{margin-top:24px}

/* ── Ratgeber-Seite ───────────────────────────────────────────────────── */
.w-artikel{padding:calc(96px + var(--nav-height)) 0 0;background:linear-gradient(180deg,var(--teal-50) 0,var(--page) 420px)}
.w-pfad{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.w-pfad li+li::before{content:"/";margin-right:8px;color:var(--hairline)}
.w-pfad a{color:var(--muted)}
.w-pfad a:hover{color:var(--teal-700)}
.w-artikel__kopf{display:flex;flex-direction:column;gap:18px;max-width:860px;padding-bottom:48px;border-bottom:1px solid var(--hairline)}
.w-stand{display:flex;flex-wrap:wrap;gap:6px 18px}
.w-artikel__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start;padding:48px 0 96px}

.w-text{max-width:760px;font-size:17px;line-height:1.7;color:var(--body)}
.w-text>*+*{margin-top:18px}
.w-text h2{margin-top:56px;scroll-margin-top:calc(var(--nav-height) + 24px)}
.w-text h3{margin-top:32px}
.w-text ul,.w-text ol{padding-left:22px}
.w-text li+li{margin-top:8px}
.w-text strong{color:var(--ink)}
.w-text a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal-200)}
.w-text a:hover{text-decoration-color:currentColor}

.w-kurz{padding:28px 30px;background:#FFFFFF;border:1px solid var(--hairline);border-radius:20px}
.w-kurz h2{margin:0 0 12px;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-500)}
.w-kurz ul{margin:0}

.w-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.w-tabelle th,.w-tabelle td{padding:12px 14px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.w-tabelle thead th{font-size:13px;font-weight:var(--fw-bold);color:var(--muted);background:var(--page)}
.w-tabelle-rahmen{overflow-x:auto;border:1px solid var(--hairline);border-radius:16px;background:#FFFFFF}
.w-tabelle tr:last-child td{border-bottom:0}

.w-fragen{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.w-frage{border-bottom:1px solid var(--hairline)}
.w-frage summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font-weight:var(--fw-bold);color:var(--ink)}
.w-frage summary::-webkit-details-marker{display:none}
.w-frage summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--teal-500)}
.w-frage[open] summary::after{content:"–"}
.w-frage p{padding:0 0 18px}

.w-liste{counter-reset:schritt;list-style:none;padding:0 !important}
.w-liste li{position:relative;padding-left:40px}
.w-liste li::before{counter-increment:schritt;content:counter(schritt);position:absolute;left:0;top:2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--teal-200);font-size:13px;font-weight:var(--fw-bold);color:var(--teal-700)}

.w-muster{padding:24px 26px;background:#FFFFFF;border:1px dashed var(--teal-200);border-radius:16px;font-size:16px;white-space:pre-line}
.w-muster__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;white-space:normal}
.w-kopieren{height:32px;padding:0 12px;border:1px solid var(--hairline);border-radius:8px;background:var(--page);font-family:var(--font-body);font-size:13px;color:var(--ink);cursor:pointer}
.w-kopieren:hover{border-color:var(--teal-200)}

.w-quellen{font-size:14px;line-height:1.6}
.w-quellen li+li{margin-top:6px}

.w-seite{position:sticky;top:calc(var(--nav-height) + 32px);display:flex;flex-direction:column;gap:20px}
.w-inhalt{padding:22px 24px;background:#FFFFFF;border:1px solid var(--hairline);border-radius:20px}
.w-inhalt ol{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none;font-size:14px}
.w-inhalt a{color:var(--body)}
.w-inhalt a:hover{color:var(--teal-700)}
.w-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:20px;background:var(--teal-900);color:#FFFFFF}
.wissen .w-cta h3{color:#FFFFFF}
.w-cta p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}
.w-cta .btn{margin-top:6px}

.w-mehr{padding:72px 0 96px;background:#FFFFFF;border-top:1px solid var(--hairline)}

/* ── Schmal ───────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .w-artikel__grid{grid-template-columns:1fr;gap:40px}
  .w-seite{position:static}
}
@media (max-width:900px){
  .w-hero{padding:calc(64px + var(--nav-height)) 0 56px}
  .w-hero__top,.w-block__kopf{grid-template-columns:1fr;gap:20px}
  .w-block__kopf .w-meta,.w-block__kopf p{grid-column:1;grid-row:auto}
  .w-artikel{padding-top:calc(48px + var(--nav-height))}
  .w-meldungen{grid-template-columns:1fr}
}
@media print{
  .site-header,.footer,.w-seite,.w-mehr,.w-kopieren{display:none !important}
}