/* ============================================================================
   Wallmann-Seiten — gemeinsames Design (Apple-HIG-inspiriert)
   Stand 2026-10-31 · Quelle: github.com/dickwu/apple-design-skill (SKILL.md +
   references/hig: typography, layout, color, materials, liquid-glass, dark-mode)

   Farbwelt = aus dem KI-Wappen des Betreibers gemessen:
   Blau #023b76 / #012655, Gold #ca9743 / #a67c2e,
   Papier #f3ede2, Tinte #0b1119.

   Keine externen Ressourcen (Systemschriften, lokale Bilder, lokales CSS/JS).
   Hell/Dunkel: Systemeinstellung als Standard, Mond/Sonne-Schalter setzt
   html[data-theme="light|dark"] (persistiert in localStorage).
   ============================================================================ */

/* ---------- Design-Tokens: hell ---------- */
:root{
  --paper:#f3ede2; --paper-2:#f8f4eb; --surface:#fbf8f2;
  --ink:#0b1119; --ink-2:#4c463b; --ink-3:#7a7466;
  --blue:#023b76; --blue-deep:#012655; --blue-ink:#0a1a2f; --blue-light:#074e89;
  --gold:#a67c2e; --gold-bright:#ca9743; --gold-line:rgba(166,124,46,.38);
  --line:rgba(11,17,25,.10); --line-2:rgba(11,17,25,.18);
  --glass:rgba(243,237,226,.78); --glass-border:rgba(255,255,255,.6);
  --tint:rgba(11,17,25,.05);
  --shadow:0 1px 2px rgba(11,17,25,.05), 0 18px 44px -20px rgba(11,17,25,.35);
  --shadow-hover:0 1px 2px rgba(11,17,25,.06), 0 28px 56px -22px rgba(11,17,25,.45);
  --hero-ink:#f8f4eb; --hero-muted:#d8d1c4; --hero-faint:#a9a294;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --content:1160px; --read:740px; --pad:clamp(20px,5vw,40px); --nav-h:56px;
  --radius:26px; --radius-sm:18px;
  color-scheme:light;
}

/* ---------- Design-Tokens: dunkel (System ODER Schalter) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0a1220; --paper-2:#0e1729; --surface:#111d31;
    --ink:#f3ede2; --ink-2:#c9c2b4; --ink-3:#9a9384;
    --blue:#9cc2ff; --blue-deep:#cfe0ff; --blue-ink:#050b14; --blue-light:#b9d4ff;
    --gold:#d8ab5c; --gold-bright:#e8c47e; --gold-line:rgba(216,171,92,.34);
    --line:rgba(243,237,226,.14); --line-2:rgba(243,237,226,.24);
    --glass:rgba(10,18,32,.72); --glass-border:rgba(255,255,255,.10);
    --tint:rgba(243,237,226,.07);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,.8);
    --shadow-hover:0 1px 2px rgba(0,0,0,.6), 0 28px 56px -22px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0a1220; --paper-2:#0e1729; --surface:#111d31;
  --ink:#f3ede2; --ink-2:#c9c2b4; --ink-3:#9a9384;
  --blue:#9cc2ff; --blue-deep:#cfe0ff; --blue-ink:#050b14; --blue-light:#b9d4ff;
  --gold:#d8ab5c; --gold-bright:#e8c47e; --gold-line:rgba(216,171,92,.34);
  --line:rgba(243,237,226,.14); --line-2:rgba(243,237,226,.24);
  --glass:rgba(10,18,32,.72); --glass-border:rgba(255,255,255,.10);
  --tint:rgba(243,237,226,.07);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,.8);
  --shadow-hover:0 1px 2px rgba(0,0,0,.6), 0 28px 56px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}
:root[data-theme="light"]{ color-scheme:light; }

@media (prefers-contrast: more){
  :root{ --ink-2:#2f2b23; --ink-3:#2f2b23; --line:rgba(11,17,25,.35); --line-2:rgba(11,17,25,.5); }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --ink-2:#f3ede2; --ink-3:#f3ede2;
      --line:rgba(243,237,226,.4); --line-2:rgba(243,237,226,.6); }
  }
  :root[data-theme="dark"]{ --ink-2:#f3ede2; --ink-3:#f3ede2;
    --line:rgba(243,237,226,.4); --line-2:rgba(243,237,226,.6); }
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.5; letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--blue); text-underline-offset:2px; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.skip{
  position:absolute; left:12px; top:-64px; z-index:100; background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:12px; border:1px solid var(--line-2); transition:top .2s ease;
  font-size:15px;
}
.skip:focus{ top:12px; }
.wrap{ max-width:var(--content); margin:0 auto; padding:0 var(--pad); }
.read{ max-width:calc(var(--read) + 2*var(--pad)); margin:0 auto; padding-inline:var(--pad); }
.muted{ color:var(--ink-3); font-size:14px; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Navigation (einzige Glasfläche) ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 var(--glass-border) inset;
}
@media (prefers-reduced-transparency: reduce){
  .nav{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
.nav-inner{
  max-width:var(--content); height:100%; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:18px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px; color:var(--ink);
  font-size:14px; font-weight:600; letter-spacing:.14em; min-height:44px; flex:0 0 auto;
}
.brand:hover{ text-decoration:none; }
.brand svg{ width:24px; height:27px; flex:0 0 auto; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.nav-links a{
  color:var(--ink); font-size:13px; padding:11px 11px; border-radius:10px;
  min-height:44px; display:inline-flex; align-items:center; white-space:nowrap;
}
.nav-links a:hover{ background:var(--tint); text-decoration:none; }
@media (max-width:820px){ .nav-links a.hide-sm{ display:none; } }
@media (max-width:560px){
  .nav-links a.hide-xs{ display:none; }
  .brand{ letter-spacing:.08em; font-size:13px; }
}

/* Mond/Sonne-Schalter */
.theme-toggle{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:44px; height:44px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  margin-left:4px; padding:0; border-radius:999px;
  background:transparent; border:1px solid transparent; color:var(--ink);
  transition:background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ background:var(--tint); border-color:var(--line); }
.theme-toggle svg{ width:20px; height:20px; display:block; }
.theme-toggle .icon-sun{ display:block; }
.theme-toggle .icon-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--blue-ink); color:var(--hero-ink);
  padding-block:clamp(52px,7vw,96px) clamp(56px,8vw,104px);
}
.hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--gold-line); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
            gap:clamp(36px,5vw,72px); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero--page{ padding-block:clamp(44px,6vw,80px) clamp(48px,7vw,88px); }
.hero--page .hero-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
@media (max-width:900px){ .hero--page .hero-grid{ grid-template-columns:1fr; } }
.eyebrow{
  display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-bright); margin:0 0 16px;
}
.hero h1{
  margin:0 0 18px; font-weight:700; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(44px,7.4vw,92px); text-wrap:balance;
}
.hero h1.small{ font-size:clamp(34px,5vw,56px); }
.hero .sub{
  margin:0 0 18px; font-size:clamp(18px,2.1vw,22px); line-height:1.4;
  color:var(--hero-muted); max-width:38ch; letter-spacing:-.02em;
}
.hero .meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 28px;
             color:var(--hero-faint); font-size:13px; letter-spacing:.02em; }
.hero .meta span{ display:inline-flex; align-items:center; gap:7px; }
.hero .meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-bright); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:48px; padding:12px 24px; border-radius:980px; border:1px solid transparent;
  font-size:16px; font-weight:500; letter-spacing:-.015em; color:inherit; cursor:pointer;
  transition:background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-gold{ background:var(--gold-bright); color:#1a1408; }
.btn-gold:hover{ background:#dcae62; text-decoration:none; transform:translateY(-1px); }
.btn-ghost{ border-color:rgba(248,244,235,.28); color:var(--hero-ink); }
.btn-ghost:hover{ border-color:rgba(248,244,235,.55); background:rgba(248,244,235,.06); text-decoration:none; }
@media (prefers-reduced-motion: reduce){ .btn, .btn-gold:hover{ transition:none; transform:none !important; } }

/* ---------- Wappen ---------- */
.crest{ margin:0; justify-self:center; width:min(100%, 420px); }
.crest--small{ width:min(100%, 300px); }
.crest-frame{
  padding:clamp(12px,1.6vw,18px); border-radius:32px;
  background:rgba(248,244,235,.06); border:1px solid rgba(202,151,67,.45);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.crest img{ display:block; width:100%; height:auto; border-radius:22px; }
.crest figcaption{ margin:14px 4px 0; font-size:12px; line-height:1.5; color:var(--hero-faint); text-align:center; }
.crest figcaption strong{ color:var(--hero-muted); font-weight:600; }
.crest-mark{ display:inline-block; }
.crest-mark svg{ display:block; }

/* ---------- Abschnitte ---------- */
.section{ padding-block:clamp(48px,7vw,88px); }
.section--alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin:0 0 26px; flex-wrap:wrap; }
.section-head p{ margin:0; color:var(--ink-2); font-size:16px; max-width:52ch; }

/* ---------- Artikel / Fließtext ---------- */
.article{ padding-block:clamp(48px,7vw,88px); }
.lede{ font-size:clamp(19px,2.2vw,22px); line-height:1.55; color:var(--ink-2); letter-spacing:-.02em; margin:0 0 2.2rem; }
.lede strong{ color:var(--ink); }
.prose h2{
  font-size:clamp(24px,3vw,32px); line-height:1.12; letter-spacing:-.025em; font-weight:700;
  margin:clamp(2.4rem,4vw,3.4rem) 0 .8rem; padding-top:1.1rem; border-top:1px solid var(--line);
}
.prose h2 .num{ display:inline-block; min-width:2.2em; color:var(--gold); font-size:.62em;
                font-weight:600; letter-spacing:.08em; vertical-align:.22em; }
.prose h3{ font-size:18px; letter-spacing:-.015em; margin:1.4rem 0 .4rem; }
.prose p{ margin:0 0 .9rem; }
.prose ul,.prose ol{ margin:.4rem 0 .9rem; padding-left:1.25rem; }
.prose li{ margin:.3rem 0; }
.prose .muted{ color:var(--ink-3); font-size:14px; }
.note{
  margin:1.2rem 0; padding:.85rem 1.1rem; border-left:2px solid var(--gold);
  background:var(--paper-2); border-radius:0 14px 14px 0; color:var(--ink-2); font-size:15px;
}
.section--alt .note{ background:var(--surface); }
.note strong{ color:var(--ink); }

/* Tabellen */
.prose table{ width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:15px; }
.prose caption{ text-align:left; font-size:13px; color:var(--ink-3); padding-bottom:.5rem; }
.prose th,.prose td{ text-align:left; padding:.62rem .3rem; border-bottom:1px solid var(--line); }
.prose th{ font-weight:600; color:var(--ink); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.prose td:last-child,.prose th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.prose tbody tr:hover{ background:var(--paper-2); }
.section--alt .prose tbody tr:hover{ background:var(--surface); }

/* Fakten */
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:1.4rem 0 2rem; }
@media (max-width:620px){ .facts{ grid-template-columns:1fr; } }
.fact{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; }
.fact dt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.fact dd{ margin:6px 0 0; font-size:clamp(23px,3vw,29px); font-weight:600; letter-spacing:-.03em;
          font-variant-numeric:tabular-nums; }
.fact .src{ display:block; margin-top:6px; font-size:12px; color:var(--ink-3); letter-spacing:0; }

/* ---------- Karten (Verweise) ---------- */
.cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 24px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line); box-shadow:0 1px 2px rgba(11,17,25,.04);
  color:inherit; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2); text-decoration:none; }
.card b{ font-size:17px; letter-spacing:-.015em; color:var(--blue); }
.card span{ font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.card .arrow{ margin-top:auto; padding-top:8px; font-size:14px; color:var(--blue); }
@media (prefers-reduced-motion: reduce){ .card{ transition:none; } .card:hover{ transform:none; } }

/* Wappen-Abschnitt */
.crest-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
             gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:860px){ .crest-grid{ grid-template-columns:1fr; } }
.crest-grid h2{ border-top:0; padding-top:0; margin-top:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:1.1rem 0 1.3rem; }
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2);
  border-radius:980px; padding:7px 12px;
}
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.crest-thumb{ margin:0; }
.crest-thumb img{ display:block; width:100%; height:auto; border-radius:24px;
                  border:1px solid var(--gold-line); box-shadow:var(--shadow); }

/* ---------- Footer ---------- */
.foot{ background:var(--blue-ink); color:var(--hero-muted); padding-block:clamp(44px,6vw,72px); }
.foot-inner{ max-width:calc(var(--read) + 2*var(--pad)); margin:0 auto; padding:0 var(--pad); }
.foot-top{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-bottom:22px; }
.demo{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600;
       letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); }
.foot-credit{ margin-left:auto; color:var(--hero-faint); font-size:13px; }
.foot-credit strong{ color:var(--hero-muted); }
@media (max-width:700px){ .foot-credit{ margin-left:0; } }
.foot-crest{ display:flex; align-items:center; gap:16px; margin:0 0 24px; }
.foot-crest img{ width:72px; height:72px; object-fit:cover; border-radius:12px;
                 border:1px solid var(--gold-line); }
.foot-crest p{ margin:0; font-size:13px; line-height:1.5; color:var(--hero-faint); max-width:56ch; }
.foot-crest strong{ color:var(--hero-muted); }
.foot details{ border-top:1px solid rgba(248,244,235,.16); padding:14px 0; }
.foot summary{ cursor:pointer; font-weight:600; color:var(--hero-ink); font-size:15px; }
.foot summary:hover{ color:var(--gold-bright); }
.foot .legal{ font-size:14px; line-height:1.6; color:var(--hero-muted); padding:.6rem 0 .2rem; }
.foot .legal h3{ color:var(--hero-ink); font-size:14px; margin:1rem 0 .3rem; }
.foot .legal a{ color:var(--gold-bright); }
.foot-note{ margin:22px 0 0; font-size:12px; color:var(--hero-faint); }

/* ---------- Sonstiges ---------- */
.kicker{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.pill-link{
  display:inline-flex; align-items:center; gap:.35em; min-height:44px; padding:10px 18px;
  border-radius:980px; border:1px solid var(--line-2); color:var(--ink); font-size:15px;
}
.pill-link:hover{ background:var(--tint); text-decoration:none; }