/* Staatskunde Schweiz - Stylesheet nach Design.mds/paragraphDESIGN.md
   Abweichungen zur Vorlage sind unten bei --link/--action dokumentiert (Kontrast). */

/* ---------- Fonts (lokal, keine CDN) ---------- */
@font-face{
  font-family:'Newsreader';
  src:url('/assets/fonts/newsreader-latin-wght.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'InterVar';
  src:url('/assets/fonts/inter-latin-wght.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  /* Farben aus paragraphDESIGN.md */
  --canvas:#dbd5d2;
  --inkwell:#271f1b;
  --snow:#ffffff;
  --silver-mist:#ededed;
  --stone-gray:#888786;
  --cloud-wash:#f1f5fe;
  --distant-sky:#c9c7c6;
  --shadow-blue:#524c49;
  --action-azure:#4a83f5;
  --horizon-glow:#b1cafb;
  --pale-blue:#cedaf3;

  /* Kontrastkorrekturen (Design-MD-Werte reissen 4,5:1):
     Action Azure #4a83f5 = 3,59:1 auf Weiss -> nur dekorativ.
     --link 7,38:1 auf Snow und 5,08:1 auf Canvas. --action traegt weisse Schrift mit 5,86:1.
     --muted ersetzt Stone Gray (3,59:1) fuer Fliesstext-Sekundaeres. */
  --link:#1f4fb5;
  --link-hover:#173c8c;
  --action:#2b5fc9;
  --muted:#6b6663;

  --font-sans:'InterVar',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;

  --text-caption:14px;
  --text-body:16px;
  --text-subheading:18px;
  --text-heading:24px;
  --text-display:64px;

  --sp-8:8px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-40:40px;
  --sp-48:48px;--sp-64:64px;--sp-96:96px;--sp-128:128px;

  --page-max:1400px;
  --read-max:760px;
  --radius-cards:28px;
  --radius-badges:24px;
  --radius-images:16px;
  --radius-buttons:24px;

  --shadow-subtle:rgba(0,0,0,.05) 0 1px 2px 0,rgba(0,0,0,.02) 0 0 4px 0;
  --shadow-md:rgba(0,0,0,.1) 0 10px 15px -3px,rgba(0,0,0,.1) 0 4px 6px -4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--canvas);color:var(--inkwell);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:400;margin:0 0 var(--sp-16)}
h1{font-size:clamp(34px,5.2vw,var(--text-display));line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(26px,3vw,36px);line-height:1.18;letter-spacing:-.022em;margin-top:var(--sp-48)}
h3{font-size:var(--text-heading);line-height:1.33;letter-spacing:-.022em;margin-top:var(--sp-32)}
h4{font-size:var(--text-subheading);line-height:1.4;letter-spacing:-.02em;margin-top:var(--sp-24)}
p{margin:0 0 var(--sp-16)}
ul,ol{margin:0 0 var(--sp-16);padding-left:22px}
li{margin-bottom:6px}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--distant-sky);margin:var(--sp-40) 0}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--sp-24)}
.narrow{max-width:var(--read-max)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-16);top:var(--sp-16);z-index:200;background:var(--snow);
  padding:var(--sp-8) var(--sp-16);border-radius:var(--radius-buttons)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--canvas);
  border-bottom:1px solid var(--distant-sky);box-shadow:var(--shadow-subtle)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--inkwell);text-decoration:none}
.brand svg{flex:0 0 auto}
.brand b{font-family:var(--font-serif);font-weight:400;font-size:21px;letter-spacing:-.02em;display:block;line-height:1.15}
.brand span{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:var(--sp-8);list-style:none;margin:0;padding:0}
.menu a{color:var(--inkwell);text-decoration:none;font-size:15px;padding:6px 12px;
  border-bottom:1px solid transparent;border-radius:0}
.menu a:hover,.menu a.active{border-bottom-color:var(--inkwell)}
.burger{display:none}
.nav-toggle{display:none}

@media (max-width:560px){
  .brand b{font-size:17px}
  .brand span{font-size:10px}
  .brand svg{width:30px;height:30px}
  .nav{min-height:64px}
}

@media (max-width:900px){
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    cursor:pointer;border:1px solid var(--distant-sky);border-radius:var(--radius-buttons);
    align-items:center;background:var(--snow)}
  .burger span{display:block;width:20px;height:2px;background:var(--inkwell);transition:.2s}
  .menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--snow);
    flex-direction:column;align-items:stretch;gap:0;padding:88px var(--sp-24) var(--sp-24);
    transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-md);
    overflow-y:auto;z-index:120}
  .menu a{display:block;padding:14px 4px;border-bottom:1px solid var(--silver-mist);font-size:17px}
  .menu li{list-style:none}
  .nav-toggle:checked ~ .menu{transform:translateX(0)}
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger{z-index:130}
}

/* ---------- Hero ---------- */
.hero{padding:var(--sp-64) 0 var(--sp-48)}
.hero .lead{font-size:var(--text-subheading);color:var(--shadow-blue);max-width:640px}
.hero-card{background:var(--snow);border-radius:var(--radius-cards);padding:var(--sp-48) var(--sp-40);
  box-shadow:var(--shadow-subtle)}
@media (max-width:640px){.hero-card{padding:var(--sp-32) var(--sp-24)}}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:var(--text-caption);color:var(--muted);padding:var(--sp-24) 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 6px}

/* ---------- Karten & Raster ---------- */
.grid{display:grid;gap:var(--sp-24);margin:var(--sp-24) 0 0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--snow);border-radius:var(--radius-cards);padding:var(--sp-24);
  box-shadow:var(--shadow-subtle);display:flex;flex-direction:column}
.card h3{margin-top:0;font-size:21px}
.card p{color:var(--shadow-blue);font-size:15px;margin-bottom:var(--sp-16)}
.card .more{margin-top:auto;font-size:15px;font-weight:500}
.card-muted{background:var(--silver-mist)}

.callout{background:var(--silver-mist);border-radius:var(--radius-cards);padding:20px var(--sp-24);
  margin:var(--sp-32) 0}
.callout h4{margin-top:0}
.callout p:last-child{margin-bottom:0}

.badge{display:inline-block;background:rgba(237,237,237,.9);color:var(--inkwell);
  border-radius:var(--radius-badges);padding:2px 12px;font-size:13px;letter-spacing:.02em}
.badge-accent{background:var(--pale-blue)}

.btn{display:inline-block;background:var(--action);color:var(--snow);text-decoration:none;
  border-radius:var(--radius-buttons);padding:10px 20px;font-weight:500;font-size:15px}
.btn:hover{background:var(--link-hover);color:var(--snow)}
.btn-ghost{background:transparent;color:var(--inkwell);border:1px solid var(--shadow-blue)}
.btn-ghost:hover{background:var(--snow);color:var(--inkwell)}

/* ---------- Inhaltsseiten ---------- */
main{padding-bottom:var(--sp-96)}
.page{background:var(--snow);border-radius:var(--radius-cards);padding:var(--sp-48);
  margin:var(--sp-24) 0;box-shadow:var(--shadow-subtle)}
@media (max-width:640px){.page{padding:var(--sp-24);border-radius:var(--radius-images)}}
.page > *:first-child{margin-top:0}
.prose{max-width:var(--read-max)}
.prose h2:first-of-type{margin-top:var(--sp-40)}
.meta{font-size:var(--text-caption);color:var(--muted);margin-bottom:var(--sp-24)}

.toc{background:var(--silver-mist);border-radius:var(--radius-images);padding:var(--sp-24);
  margin:var(--sp-32) 0}
.toc h4{margin:0 0 var(--sp-8)}
.toc ol{margin:0;padding-left:20px;font-size:15px}

.factbox{border:1px solid var(--distant-sky);border-radius:var(--radius-images);
  padding:var(--sp-24);margin:var(--sp-32) 0;background:var(--cloud-wash)}
.factbox dl{margin:0;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:8px var(--sp-16);font-size:15px}
.factbox dt{font-weight:600}
.factbox dd{margin:0}
@media (max-width:560px){.factbox dl{grid-template-columns:1fr;gap:2px}
  .factbox dd{margin-bottom:10px}}

.table-scroll{overflow-x:auto;margin:var(--sp-24) 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--distant-sky);vertical-align:top}
th{font-weight:600;background:var(--silver-mist)}

.faq{margin:var(--sp-32) 0}
.faq details{background:var(--silver-mist);border-radius:var(--radius-images);
  padding:var(--sp-16) var(--sp-24);margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:500;font-family:var(--font-serif);font-size:19px}
.faq p{margin:12px 0 0;font-size:15px}

.related{margin-top:var(--sp-48);border-top:1px solid var(--distant-sky);padding-top:var(--sp-24)}
.related h4{margin-top:0}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.related a{font-size:15px}

/* ---------- Lexikon ---------- */
.az{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-24) 0}
.az a{background:var(--silver-mist);border-radius:var(--radius-badges);padding:4px 12px;
  text-decoration:none;font-size:14px;font-weight:500;color:var(--inkwell)}
.az a:hover{background:var(--pale-blue)}
.entry{border-bottom:1px solid var(--silver-mist);padding:var(--sp-16) 0}
.entry:last-child{border-bottom:0}
.entry h3{margin:0 0 6px;font-size:20px}
.entry p{margin:0;font-size:15px;color:var(--shadow-blue)}

/* ---------- Footer ---------- */
.site-footer{background:var(--shadow-blue);color:var(--silver-mist);padding:var(--sp-64) 0 var(--sp-32);margin-top:var(--sp-64)}
.site-footer a{color:var(--snow)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-32)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{color:var(--snow);font-size:var(--text-subheading);margin-top:0}
.foot-grid ul{list-style:none;padding:0;margin:0;font-size:15px}
.foot-grid li{margin-bottom:8px}
.foot-intro p{font-size:15px;color:var(--distant-sky);max-width:38ch}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--sp-40);padding-top:var(--sp-24);
  display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;font-size:14px;color:var(--distant-sky)}

/* ---------- 404 ---------- */
.err{text-align:center;padding:var(--sp-64) 0}
.err .code{font-family:var(--font-serif);font-size:88px;line-height:1;letter-spacing:-.04em}