/* ============================================================================
   SundHilfe — pages.css
   Ergänzt site.css: Unterseiten (Artikel, Recht), Lesefluss, Barrierefreiheit,
   Formular-Erweiterungen. Lädt NACH colors_and_type.css und site.css.
   ============================================================================ */

/* ----------------------------------------------------- Barrierefreiheit ---- */
/* Sichtbarer Sprunglink für Tastatur- & Screenreader-Nutzer */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--sund-600);color:#fff;padding:12px 20px;border-radius:var(--r-md);
  font-family:var(--font-body);font-weight:600;font-size:15px;text-decoration:none;
  transition:top .2s ease}
.skip-link:focus{top:16px;outline:3px solid var(--amber-300);outline-offset:2px}

/* Deutlich sichtbarer Tastatur-Fokus auf allen interaktiven Elementen */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--sund-400);outline-offset:2px;border-radius:3px}

/* Nur für Screenreader sichtbar */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----------------------------------------------------- Unterseiten-Kopf ---- */
.subhero{position:relative;padding:148px 0 56px;background:var(--paper-2);
  border-bottom:1px solid var(--hairline);overflow:hidden}
@media(max-width:920px){.subhero{padding:120px 0 44px}}
.subhero::before{content:"";position:absolute;top:-20%;right:-6%;width:46vw;height:46vw;
  max-width:560px;max-height:560px;
  background:radial-gradient(circle at 50% 50%,rgba(94,152,158,.16),transparent 64%);pointer-events:none}
.subhero .wrap{position:relative}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-3);margin:0 0 22px;flex-wrap:wrap}
.crumbs a{color:var(--sund-600);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs svg{width:14px;height:14px;color:var(--ink-3)}
.subhero .meta{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brick-500);margin:0 0 14px}
.subhero .meta .dot{width:3px;height:3px;border-radius:999px;background:var(--ink-3)}
.subhero .meta .date{color:var(--ink-3)}
.subhero h1{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);
  line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--ink);max-width:20ch;text-wrap:balance}
.subhero h1 em{font-style:italic;color:var(--sund-500)}
.subhero .standfirst{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-2);
  margin:20px 0 0;max-width:60ch}

/* ----------------------------------------------------------- Lesefluss ----- */
.prose-wrap{padding:clamp(48px,7vw,88px) 0}
.prose{max-width:var(--maxw-text);margin:0 auto;font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.72;color:var(--ink)}
.prose>*+*{margin-top:22px}
.prose p{color:var(--ink-2)}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.6vw,32px);
  line-height:1.18;color:var(--ink);margin-top:48px}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);margin-top:32px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--sund-200)}
.prose a:hover{border-bottom-color:var(--link)}
.prose ul,.prose ol{padding-left:24px;color:var(--ink-2)}
.prose li{margin-top:10px;line-height:1.66}
.prose li::marker{color:var(--sund-500)}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:40px 0}

/* Schritt-Karten in Anleitungen */
.steps{list-style:none;counter-reset:s;padding:0;margin:28px 0}
.steps>li{counter-increment:s;position:relative;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--r-md);padding:22px 26px 22px 70px;
  margin-top:14px;box-shadow:var(--shadow-sm)}
.steps>li::before{content:counter(s);position:absolute;left:20px;top:22px;
  width:34px;height:34px;border-radius:999px;background:var(--sund-600);color:#fff;
  font-family:var(--font-display);font-size:17px;display:flex;align-items:center;justify-content:center}
.steps>li h3{margin:0 0 6px;font-size:18px}
.steps>li p{margin:0;font-size:16px}

/* Hinweis- und Warn-Boxen */
.note,.warn{border-radius:var(--r-md);padding:20px 24px;margin:28px 0;font-size:16px;line-height:1.6}
.note{background:var(--sund-50);border-left:4px solid var(--sund-400)}
.note strong{color:var(--sund-700)}
.warn{background:var(--brick-50);border-left:4px solid var(--brick-400)}
.warn strong{color:var(--brick-700)}
.note p:last-child,.warn p:last-child{margin-bottom:0}
.note .h,.warn .h{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:7px}
.note .h{color:var(--sund-700)}.warn .h{color:var(--brick-700)}
.note .h svg,.warn .h svg{width:18px;height:18px}

/* „Quelle/Sensibel"-Schlussbox eines Artikels */
.endcard{margin-top:48px;background:var(--paper-2);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:28px 30px}
.endcard h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 8px;color:var(--ink)}
.endcard p{margin:0;font-size:16px;color:var(--ink-2)}
.endcard .sh-btn{margin-top:16px}

/* Weiterlesen-Reihe unter Artikeln */
.more{border-top:1px solid var(--hairline);padding:48px 0 0;margin-top:8px}
.more h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);margin:0 0 24px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:680px){.more-grid{grid-template-columns:1fr}}

/* ------------------------------------------------ Rechtstexte (Impressum) -- */
.legal .prose h2{margin-top:40px}
.legal address{font-style:normal;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------------- Formular-Erweiterung -- */
/* Honeypot: für Menschen unsichtbar, fängt Bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px;font-size:14px;
  line-height:1.5;color:var(--ink-2)}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--sund-500)}
.consent a{color:var(--sund-600)}
.form .err{background:var(--brick-50);border-left:4px solid var(--brick-500);
  padding:12px 16px;border-radius:var(--r-sm);font-size:14px;color:var(--brick-700);margin:0 0 16px}