/* Butt-Meter — Layout C (editorial, Weinrot-Akzent) */

:root{
  --paper:#faf8f3;
  --ink:#20242b;
  --muted:#5c564a;
  --hair:#e6ded1;
  --wine:#7b2d3b;
  --sig-red:#b5322a;
  --sig-yellow:#d9a520;
  --sig-green:#2e8b57;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --wrap:min(88%,900px);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#17130f;
    --ink:#ece5d8;
    --muted:#a49c8c;
    --hair:#2c2820;
    --wine:#cf7285;
    --sig-red:#e0533d;
    --sig-yellow:#e3b23c;
    --sig-green:#4aa876;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:10;text-decoration:none;
}
.skip:focus{left:1rem;top:1rem}

:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

/* ---------- Header ---------- */
.site{
  width:var(--wrap);
  margin:0 auto;
  padding:3.2rem 0 2.4rem;
  text-align:center;
}
.warn{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--wine);
  margin:0 0 1.4rem;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  flex-wrap:wrap;
}
.tacho{width:118px;height:auto;flex:none}
.tacho__red{fill:none;stroke:var(--sig-red);stroke-width:8;stroke-linecap:round}
.tacho__yellow{fill:none;stroke:var(--sig-yellow);stroke-width:8}
.tacho__green{fill:none;stroke:var(--sig-green);stroke-width:8;stroke-linecap:round}
.tacho__needle{stroke:var(--sig-red);stroke-width:4;stroke-linecap:round}
.tacho__hub{fill:var(--ink)}
.tacho__label{fill:var(--sig-red);font-family:var(--mono);font-size:12px;font-weight:600}

.wordmark{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.5rem,7vw,3.4rem);
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
.tagline{
  color:var(--muted);
  font-size:1.05rem;
  margin:1rem auto 0;
}
.addr{
  color:var(--muted);
  font-size:1.05rem;
  margin:.15rem auto 0;
}
.addr__neg{color:var(--wine);font-weight:600}

/* ---------- Groups ---------- */
main{width:var(--wrap);margin:0 auto;padding:0 0 3rem}
.group{padding:2.4rem 0 0}
.group__label{
  font-family:var(--mono);
  font-weight:400;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0 0 1.8rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--hair);
}

/* ---------- Quotes ---------- */
.q{
  margin:0 0 2.4rem;
  padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--wine);
}
.q__text{
  margin:0;
  font-size:1.3rem;
  line-height:1.5;
  text-wrap:pretty;
}
.q__by{
  margin:.6rem 0 0;
  font-size:.92rem;
  font-variant:small-caps;
  letter-spacing:.06em;
  color:var(--wine);
}
.q__by::before{content:"— "}
.q__note{
  font-variant:normal;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:0;
  color:var(--muted);
}


/* ---------- Top-Zitat & Links ---------- */
.q--top{margin:2.2rem 0 .6rem}
.q--top .q__text{font-size:1.5rem}
.q__text a{
  color:var(--wine);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.q__text a:hover{text-decoration-thickness:2px}

/* ---------- Footer ---------- */
.site-foot{
  width:var(--wrap);
  margin:0 auto;
  padding:2.4rem 0 3.6rem;
  text-align:center;
  border-top:1px solid var(--hair);
}
.foot-note{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--wine);
  margin:0;
}

/* ---------- Reveal (progressive enhancement) ---------- */
.js .q{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease;
}
.js .q.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .js .q{opacity:1 !important;transform:none !important;transition:none !important}
}