/* =============================================================
   bildstelle WEB (Zuordnungsschicht plus Bausteine für Web-Produkte)

   Setzt AUF bildstelle-tokens.css auf. Reihenfolge im Kopf zwingend:
     1. bildstelle-tokens.css   (Farbe, Schrift, Dunkelmodus)
     2. bildstelle-web.css      (diese Datei)
     3. seiten-eigenes CSS      (nur was wirklich nur hier gilt)

   Warum es diese Datei gibt: die Token-Datei trägt bewusst KEINE
   Alias-Namen, weil `--accent` im Dokument-System dunkel und im Web
   grün bedeutet. Diese Datei ist die Web-Seite dieser Trennung und
   gleichzeitig der Ort für die Bausteine, die auf jeder bildstelle-
   Seite gleich aussehen sollen: Kopfleiste, Menü, Knöpfe, Abschnitts-
   Rhythmus, Haarlinien, Fußzeile.

   MASS: der Rhythmus folgt dem Goldenen Schnitt (Faktor 1,618).
   Die Stufen --r1 bis --r7 sind die einzige erlaubte Abstandsquelle.
   Wer einen Zwischenwert braucht, nimmt die nächste Stufe, nicht
   eine neue Zahl. So bleibt der Seitenrhythmus über alle Projekte
   derselbe.

   Ändern immer HIER in _Brand-Assets/designsystem/, nie in den
   Projektkopien. Kopien tragen denselben Kopf als Warnung.
   ============================================================= */

:root{
  /* ---- Zuordnung: was `Akzent` im Web bedeutet ---- */
  --accent:var(--bs-green);
  --accent-dim:var(--bs-green-dim);
  --accent-med:var(--bs-green-med);
  --auf-accent:var(--bs-on-green);

  /* ---- Abstände nach Goldenem Schnitt (Basis 8) ---- */
  --r1:8px;
  --r2:13px;
  --r3:21px;
  --r4:34px;
  --r5:55px;
  --r6:89px;
  --r7:144px;

  /* ---- Luft, die mitwächst (dieselben Stufen, responsiv) ---- */
  --luft-xs:clamp(13px,1.6vw,21px);
  --luft-s:clamp(21px,2.6vw,34px);
  --luft-m:clamp(34px,4.2vw,55px);
  --luft-l:clamp(55px,6.8vw,89px);
  --luft-xl:clamp(89px,11vw,144px);

  /* ---- Schriftgrößen ---- */
  --t-h1:clamp(44px,8.4vw,128px);
  --t-h2:clamp(30px,4.6vw,74px);
  --t-h3:clamp(20px,2.1vw,32px);
  --t-lead:clamp(18px,1.5vw,25px);
  --t-body:clamp(16px,1.1vw,19px);
  --t-klein:clamp(14px,0.95vw,16px);
  --t-eye:13px;

  /* ---- Breiten ----
     Bis 1920 bleibt der Satzspiegel bei 1360, das ist auf einem normalen
     Bildschirm die richtige Proportion. Darüber wächst er mit, sonst steht
     der Inhalt auf einem 2560er Schirm als schmales Band in der Mitte.
     Der Deckel ist 1920, also genau der Wert, mit dem Roman auf seinem
     großen Schirm zufrieden war. */
  --maxw:clamp(1360px, 1360px + (100vw - 1920px) * 0.9, 1920px);
  --mess:68ch;          /* Lesebreite für Fließtext */
  --rand:clamp(20px,4vw,48px);
}

/* =============================================================
   Grundlage
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bs-bg);
  color:var(--bs-ink);
  font-family:var(--bs-font);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Fokus sichtbar lassen, aber nur bei Tastatur */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* =============================================================
   Typografie
   HARTE REGEL: Überschriften brechen nicht um, außer die Breite
   zwingt sie. text-wrap:balance sorgt dafür, dass ein erzwungener
   Umbruch wenigstens gleichmäßig fällt.
   ============================================================= */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-0.03em;line-height:1.02;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-0.02em;line-height:1.15}
p{margin:0}

.bs-eyebrow{
  font-size:var(--t-eye);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bs-ink-3);
  margin-bottom:var(--r3);
  display:flex;align-items:center;gap:var(--r3);
}
/* Die Signatur: jede Rubrik trägt links einen kurzen grünen Strich. */
.bs-eyebrow::before{
  content:"";width:38px;height:2px;background:var(--accent);flex:none;
}

/* HARTE REGEL: Fließtext läuft nie über die volle Breite, aber nie
   schmäler als nötig. 68 Zeichen ist die Obergrenze. */
.bs-lead{font-size:var(--t-lead);line-height:1.5;color:var(--bs-ink-2);max-width:var(--mess)}
.bs-text{max-width:var(--mess)}

/* =============================================================
   Abschnitte und Rhythmus
   ============================================================= */
.bs-section{
  padding-block:var(--luft-xl);
  padding-inline:var(--rand);
}
.bs-in{max-width:var(--maxw);margin-inline:auto}
.bs-section h2 + .bs-lead{margin-top:var(--r3)}
.bs-section .bs-lead + *{margin-top:var(--luft-m)}
.bs-flaeche{background:var(--bs-bg-2)}

/* Haarlinie als durchgehende Grammatik der Seite */
.bs-linie{height:1px;background:var(--bs-border);border:0;margin:0}
.bs-linie-gruen{position:relative}
.bs-linie-gruen::after{
  content:"";position:absolute;left:0;top:0;width:78px;height:1px;background:var(--accent);
}

/* =============================================================
   Knöpfe
   ============================================================= */
.bs-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:var(--bs-radius-pill);
  font-size:var(--t-klein);font-weight:500;letter-spacing:0.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.bs-btn:hover{transform:translateY(-2px)}
.bs-btn-voll{background:var(--accent);color:var(--auf-accent);border:1.5px solid var(--accent)}
.bs-btn-rand{background:transparent;color:var(--bs-ink);border:1.5px solid var(--bs-border)}
.bs-btn-rand:hover{border-color:var(--bs-ink)}

/* Textlink: dunkle Schrift, grüne Unterstreichung (Romans Entscheidung) */
.bs-link{
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

/* =============================================================
   Kopfleiste
   Auf Unterseiten schlank, auf der Startseite darf sie fehlen.
   ============================================================= */
/* WICHTIG, sonst steht das Logo nicht auf der Fluchtlinie des Inhalts:
   der Seitenrand gehört AUSSEN an die Leiste, die Maximalbreite INNEN.
   Umgekehrt (Rand innerhalb der Maximalbreite) sitzt die Leiste um genau
   --rand weiter innen als jeder Abschnitt darunter. */
.bs-topbar{
  position:fixed;inset:0 0 auto 0;z-index:80;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--bs-glass);
  border-bottom:1px solid var(--bs-border);
  padding-inline:var(--rand);
}
.bs-topbar-in{
  max-width:var(--maxw);margin-inline:auto;
  padding-block:var(--r3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--r4);
}
.bs-marke{display:block;line-height:0}
.bs-marke img{height:34px;width:auto}
@media(max-width:640px){.bs-marke img{height:26px}}
.bs-topbar-rechts{display:flex;align-items:center;gap:var(--r2)}

/* Kopfleiste faehrt beim Runterscrollen weg, beim Raufscrollen wieder herein.
   Verhalten in bildstelle-web.js, Regel in rules/kopfleiste-scrollverhalten.md */
.bs-topbar{
  will-change:transform;
  /* Hereinkommen darf laenger dauern als Weggehen. Das liest sich ruhig,
     weil das Auge die Rueckkehr bemerkt und das Verschwinden nicht. */
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.bs-topbar.bs-topbar-versteckt{
  transform:translateY(-100%);
  transition:transform .26s cubic-bezier(.55,0,.85,.45);
}
@media(prefers-reduced-motion:reduce){
  .bs-topbar,.bs-topbar.bs-topbar-versteckt{transition:none}
}


/* Umschalter hell und dunkel */
.bs-toggle{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--bs-border);background:transparent;color:var(--bs-ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.bs-toggle:hover{border-color:var(--bs-ink);background:var(--bs-bg-2)}
.bs-toggle svg{width:19px;height:19px}
.bs-toggle .i-sun{display:none}
:root[data-theme="dark"] .bs-toggle .i-sun{display:block}
:root[data-theme="dark"] .bs-toggle .i-moon{display:none}

/* Logo tauscht mit dem Modus */
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}

/* =============================================================
   Fußzeile
   ============================================================= */
.bs-footer{
  border-top:1px solid var(--bs-border);
  padding:var(--luft-l) var(--rand) var(--r4);
  background:var(--bs-bg);
}
.bs-footer-in{max-width:var(--maxw);margin-inline:auto}
.bs-footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--luft-s);
}
.bs-footer h4{font-size:var(--t-klein);letter-spacing:0.14em;text-transform:uppercase;color:var(--bs-ink-3);margin-bottom:var(--r3)}
.bs-footer a{display:block;text-decoration:none;color:var(--bs-ink-2);padding:3px 0;transition:color .18s ease}
.bs-footer a:hover{color:var(--bs-ink)}
.bs-footer-unten{
  margin-top:var(--luft-m);padding-top:var(--r3);
  border-top:1px solid var(--bs-border);
  display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:space-between;
  font-size:var(--t-klein);color:var(--bs-ink-3);
}

/* =============================================================
   Druck: nie den Dunkelmodus mitdrucken
   ============================================================= */
@media print{
  :root,:root[data-theme="dark"]{
    --bs-bg:#fff;--bs-bg-2:#fff;--bs-surface:#fff;
    --bs-ink:#000;--bs-ink-2:#333;--bs-ink-3:#555;--bs-border:#ccc;
    --bs-bg-hero:#fff;
  }
  .bs-topbar,.bs-toggle,.bs-btn{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}