/* =============================================================
   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}
}

/* ===== Eingangsanimation ====================================================
   Elemente faden beim Erscheinen sanft ein, mit einer leichten Bewegung.
   Standard ist von unten. Fuer Reihen (Listen, Leisten, Kartensaetze) gibt es
   die Variante von links, weil eine Reihe in Leserichtung aufbaut.

   Namensraum bs-, weil gewachsene Seiten eigene Klassen tragen und eine
   Kollision im Stylesheet nicht zu sehen ist (Lehre vom 2026-08-23, .weg).

   Bewegt wird ausschliesslich opacity und transform, nie Groesse oder Rand.
   Alles andere verschiebt das Layout und laesst die Seite zappeln.
   ========================================================================= */
.bs-auf{opacity:0;transform:translateY(18px);will-change:opacity,transform;
  transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.bs-auf.bs-links{transform:translateX(-22px)}
.bs-auf.bs-da{opacity:1;transform:none}

/* Eine Reihe blendet ihre Kinder nacheinander ein. Den Abstand setzt das
   Skript, damit er sich nach der Anzahl richtet und nicht nach nth-child.

   AUSNAHME bs-ohne (seit 2026-08-27): ein Kind, das nicht mitanimiert werden
   darf. Anlass war der Bild-Folger der Leistungszeilen. Er liegt als Kind im
   Block, ist absolut positioniert und steuert seine Sichtbarkeit selbst. Die
   Reihe hat ihn auf opacity:1 gesetzt und mit transform:none seine
   Positionierung geloescht, dadurch stand ein weisses Feld dauerhaft im
   Layout. Gemessen: in v11 opacity 0, ab v12 opacity 1. Wer ein absolut
   positioniertes oder selbst gesteuertes Element in eine bs-reihe legt, gibt
   ihm bs-ohne. */
.bs-reihe > *:not(.bs-ohne){opacity:0;transform:translateY(16px);will-change:opacity,transform;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.bs-reihe.bs-links > *:not(.bs-ohne){transform:translateX(-20px)}
.bs-reihe.bs-da > *:not(.bs-ohne){opacity:1;transform:none}

/* Wer Bewegung abgestellt hat, sieht alles sofort. Nicht schneller, gar nicht. */
@media(prefers-reduced-motion:reduce){
  .bs-auf,.bs-reihe > *:not(.bs-ohne){opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  .bs-auf,.bs-reihe > *:not(.bs-ohne){opacity:1!important;transform:none!important}
}

/* =============================================================
   Glossar-Tooltips (seit 2026-09-22, Web-Fassung)
   Engine glossar-tooltips.js aus _Brand-Assets/designsystem/, Daten
   pro Seite als glossar-<seite>.js. Dieselben Klassen wie in
   bildstelle-ds.css, nur auf die Web-Tokens gemappt. Markiert wird
   ein Fachbegriff dezent gepunktet, das Kärtchen erklärt ihn in
   einfacher Sprache. Anlass: Kampagnen-Landingpage /check.
   ============================================================= */
.gl-term{text-decoration:underline dotted var(--bs-ink-3);text-decoration-thickness:1px;text-underline-offset:3px;cursor:help;border-radius:3px}
.gl-term:hover,.gl-term:focus-visible{background:var(--accent-dim);text-decoration-color:var(--accent);outline:none}
#gl-tip{position:fixed;z-index:400;max-width:340px;background:var(--bs-surface);border:1px solid var(--bs-border);border-left:3px solid var(--accent);border-radius:var(--bs-radius-sm);box-shadow:var(--bs-shadow);padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--bs-ink-2);display:none}
#gl-tip .gl-tt{display:block;font-weight:500;color:var(--bs-ink);font-size:13px;margin-bottom:3px}