/* =========================================================================
   Digitalbucht — styles.css
   Portiert 1:1 aus /Users/ch3.bot/brand/vorlage/Digitalbucht.dc.html
   Gliederung gemäß PORT-SPEC.md §2.1.4
   ========================================================================= */

/* 1 — Reset + Grundlagen (aus <helmet>) ---------------------------------- */

html, body { margin: 0; padding: 0; }
html { background-color: var(--bg); }
body {
  background: transparent;
  color: var(--ink);
  font-family: 'Public Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; transition: color .4s ease, opacity .4s ease; }
a:hover { color: var(--accent); }
::selection { background: var(--selection); }

[id] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: -9999px; top: auto;
  background: var(--ink); color: var(--bg);
  padding: 12px 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* 2 — @font-face (8 Faces, lokal) ---------------------------------------- */

@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/libre-caslon-text-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
                U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/libre-caslon-text-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
                U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
                U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/libre-caslon-text-400i-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
                U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/libre-caslon-text-400i-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
                U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
                U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/public-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
                U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/public-sans-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
                U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
                U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/public-sans-400i-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
                U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/public-sans-400i-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
                U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
                U+2C60-2C7F,U+A720-A7FF;}

/* 3 — Tokens (:root) ------------------------------------------------------ */

:root{
  --bg:#0D1114;
  --ink:#ECEFF1;
  --muted:#8B959D;
  --meta:#7C8791;
  --meta-hero:#C6CDD3;
  --accent:#62B4D6;
  --rule:#1E252B;
  --rule-link:#333C44;
  --mono-dim:#6B757E;
  --scroll:#AEB8C0;
  --selection:#1D3945;
  --cta-from:#0D1114; --cta-to:#121A20;
  --chart-plan:#3E4B55;
  --grain:.17;
}

/* 4 — Basistypografie ------------------------------------------------------ */

h1, h2, h3, h4 { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; margin: 0; }
p { margin: 0; }
ul, li { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
img { max-width: 100%; height: auto; }

.meta {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--meta);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* 5 — Layout-Primitive ----------------------------------------------------- */

.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(120px, 15vw, 200px) clamp(24px, 5vw, 72px);
}
.section--flush-bottom { padding-bottom: 0; }
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
.grid-2--start { align-items: start; }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 6vw, 90px);
}
.text-link {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-link);
  padding-bottom: 7px;
}

/* 6 — Effekt-Layer (#grain, #lens, #wake, [data-reveal]) --------------------
   #lens (Glas-Linse) und #wake/.wake-ring (Wellenringe) sind die zwei
   Bausteine der Cursor-Effekte "1" und "2" (siehe effects.js,
   data-effekt-Schalter) — effects.js setzt Größe/Blur/Opacity/Position pro
   Frame, hier nur Ruhewerte, Sichtbarkeits-Fallbacks und die Masken-Form. */

#grain {
  position: fixed; inset: 0; z-index: 24; pointer-events: none;
  opacity: var(--grain, .17);
  background-image: url(grain.svg); background-size: 168px 168px;
}
#wake {
  position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden;
}
.wake-ring {
  position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0;
  will-change: transform, opacity;
  backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.85) 16%, rgba(0,0,0,.38) 50%, rgba(0,0,0,0) 76%);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.85) 16%, rgba(0,0,0,.38) 50%, rgba(0,0,0,0) 76%);
}
#lens {
  position: fixed; top: 0; left: 0; width: 260px; height: 260px; border-radius: 50%;
  pointer-events: none; z-index: 26; opacity: 0; transform: translate3d(-9999px, -9999px, 0);
  backdrop-filter: blur(9px) saturate(145%) brightness(1.07);
  -webkit-backdrop-filter: blur(9px) saturate(145%) brightness(1.07);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 20%, rgba(0,0,0,.55) 54%, rgba(0,0,0,0) 78%);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 20%, rgba(0,0,0,.55) 54%, rgba(0,0,0,0) 78%);
  will-change: transform, opacity;
}

@media (pointer: coarse) {
  #wake { display: none; }
  #lens { display: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  #wake { display: none; }
  #lens { display: none; }
}

/* [data-reveal] Startzustand kommt ausschließlich aus effects.js (Progressive
   Enhancement) — ohne JS bleibt jedes Element in seinem natürlichen Zustand sichtbar. */

/* 7 — Header / Nav ---------------------------------------------------------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  padding: 26px clamp(24px, 5vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark {
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase; font-weight: 500;
}
.site-nav {
  display: flex; align-items: center; gap: 30px;
  font-size: 11.5px; letter-spacing: .14em; color: var(--muted);
}
.site-nav__sister { color: var(--ink); }

/* 8 — Sektionen in Dokumentreihenfolge --------------------------------------- */

/* Hero */
.hero {
  position: relative; min-height: 96vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(10,14,18,.5) 0%, rgba(10,14,18,.34) 46%, rgba(10,14,18,.72) 100%),
    url(images/db-1.webp);
  background-size: cover, cover;
  background-position: center, center 45%;
  background-repeat: no-repeat;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(115% 85% at 50% 26%, rgba(120,150,170,.14), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
}
.hero__inner {
  position: relative; z-index: 2; text-align: center;
  padding: 120px clamp(24px, 5vw, 72px) 0; max-width: 1100px;
  background: radial-gradient(58% 62% at 50% 46%, rgba(10,14,18,.6), rgba(10,14,18,0) 72%);
}
.hero__eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--meta-hero);
  margin-bottom: 40px;
}
.hero__title {
  font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400;
  font-size: clamp(46px, 7.4vw, 108px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 34px;
}
.hero__lead {
  font-size: 17px; line-height: 1.8; color: var(--muted);
  margin: 0 auto; max-width: 46ch; text-wrap: pretty;
}
.hero__scroll {
  position: absolute; bottom: 26px; right: clamp(24px, 5vw, 72px); z-index: 2;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--scroll);
}

/* Hero-Rotation: 3 Varianten stehen komplett im DOM (siehe index.html),
   data-hero am <html> (gesetzt von hero-rotate.js, siehe DEPLOY-NOTES.md)
   entscheidet per CSS, welche sichtbar ist. Alle drei Varianten sind <h1>
   (mehrere H1 im Quelltext sind HTML5-konform); display:none statt nur
   visuell versteckt entfernt die zwei inaktiven aus dem Accessibility-Tree
   UND aus der Renderansicht von Crawlern, damit gerendert immer genau eine
   H1 existiert — nie keine. Ohne Attribut (kein JS, Crawler ohne
   JS-Ausführung) gewinnt Variante A statisch. Jede Variante bekommt beim
   Sichtbarwerden dieselbe Eintritts-Animation wie die Scroll-Reveals im Rest
   der Seite (siehe [data-reveal] in effects.js) — funktioniert unabhängig
   davon, welche der drei Varianten gerade aktiv ist. */
.hero__variant {
  display: none;
  animation: hero-in 1.1s cubic-bezier(.16,.7,.3,1) both;
}
.hero__variant--a { display: block; }
html[data-hero="b"] .hero__variant--a { display: none; }
html[data-hero="b"] .hero__variant--b { display: block; }
html[data-hero="c"] .hero__variant--a { display: none; }
html[data-hero="c"] .hero__variant--c { display: block; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__variant { animation: none; }
}

/* Haltung (Zweispalter Text + Bild) */
.haltung__eyebrow { margin-bottom: 44px; }
.haltung__title {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.35; letter-spacing: -.01em;
  margin: 0 0 32px; max-width: 22ch;
}
.haltung__text {
  font-size: 16px; line-height: 1.95; color: var(--muted);
  margin: 0 0 20px; max-width: 46ch;
}
.haltung__text:last-of-type { margin-bottom: 44px; }
.haltung__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Kennzahlenreihe (4 Spalten) */
.kpi-strip {
  max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px);
}
.kpi-strip__grid {
  border-top: 1px solid var(--rule); padding-top: 44px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.kpi-value {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: clamp(30px, 3vw, 40px); line-height: 1;
}
.kpi-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--meta);
  margin-top: 14px;
}

/* Vollbild-Band */
.band {
  position: relative; height: 76vh;
  background-image: url(images/db-6.webp);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}

/* App-Entwicklung (#apps) */
.apps-intro { text-align: center; margin-bottom: clamp(64px, 8vw, 110px); }
.apps-intro__eyebrow { margin-bottom: 34px; }
.apps-intro__title {
  font-size: clamp(30px, 4vw, 56px); line-height: 1.2; letter-spacing: -.015em;
  margin: 0 auto; max-width: 26ch;
}

.app-step {
  margin-bottom: clamp(96px, 12vw, 170px);
}
.app-step:last-of-type { margin-bottom: 0; }
.app-step__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.app-step__img--right { order: 2; }
.app-step__body--left { order: 1; }
.app-step__num {
  font-family: 'Libre Caslon Text', Georgia, serif; font-size: 15px; color: var(--accent);
  margin-bottom: 26px;
}
.app-step__title {
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; margin: 0 0 22px; max-width: 20ch;
}
.app-step__text {
  font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 30px; max-width: 42ch;
}
.app-step__marker {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}

.apps-built { padding-top: clamp(96px, 12vw, 160px); }
.apps-built__eyebrow { margin-bottom: 44px; }
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px);
}
.card-title { font-size: 15px; margin-bottom: 12px; }
.card-text { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 0; }

/* Eigene Apps — Referenzzeile (§6.3) */
.apps-own { padding-top: clamp(56px, 7vw, 96px); }
.apps-own__eyebrow { margin-bottom: 26px; }
.apps-own__lead {
  font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 28px; max-width: 46ch;
}
.apps-own__list {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 14px; color: var(--ink);
}
.apps-own__list a { color: var(--accent); }
.apps-own__more { margin: 24px 0 0; }

/* Kennzahlen & Power BI (#kennzahlen) */
.kennzahlen__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.kennzahlen__eyebrow { margin-bottom: 34px; }
.kennzahlen__title {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; margin: 0; max-width: 24ch;
}
.kennzahlen__cta { white-space: nowrap; }
.kennzahlen__rule { border-top: 1px solid var(--rule); padding-top: 44px; }
.kennzahlen__example {
  margin-bottom: 28px;
}
.kennzahlen__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 72px);
  margin-bottom: 64px;
}
.kennzahlen__value {
  font-family: 'Libre Caslon Text', Georgia, serif; font-size: clamp(28px, 2.8vw, 38px); line-height: 1;
}
.kennzahlen__label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--meta);
  margin-top: 14px;
}
.kennzahlen__chart { display: block; width: 100%; height: 150px; }
.kennzahlen__legend {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-start;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--mono-dim);
  margin-top: 16px;
}
/* Swatches vor jedem Legenden-Eintrag (Befund 1, Review 22.08.2026): ohne
   Farbmarker war die Legende bei justify-content:space-between über die volle
   Chartbreite verteilt und ließ sich als zweite x-Achse (miss-)lesen. Jetzt
   linksbündig mit Haarlinien-Swatch je Eintrag; der `beispiel`-Chip bekommt
   bewusst keinen Swatch — er ist eine Kennzeichnung, kein Chart-Element. */
.kennzahlen__legend span::before {
  content: ""; display: inline-block; width: 14px; height: 8px;
  margin-right: 8px; vertical-align: middle;
}
.kennzahlen__legend .lg--ist::before { background: var(--accent); }
.kennzahlen__legend .lg--plan::before { background: var(--chart-plan); }
.kennzahlen__legend .lg--forecast::before { background: none; border: 1px solid var(--accent); }
.kennzahlen__legend .lg--linie::before { height: 0; border-top: 1.2px solid var(--accent); }
/* Erweiterung über die 4 Grundklassen hinaus: die Service-Grafik zeigt zusätzlich
   eine gestrichelte graue Ziellinie (stroke="#3E4B55" stroke-dasharray), die keiner
   der vier Stile entspricht — ohne eigenen Swatch würde "ziel 80 %" fälschlich wie
   die durchgezogene Linie aussehen. */
.kennzahlen__legend .lg--ziel::before { height: 0; border-top: 1.2px dashed var(--chart-plan); }
.kennzahlen__more { margin: 28px 0 0; }

/* IT-Beratung / Automatisierung / Für wen (Dreispalter) */
.leistungen__eyebrow { margin-bottom: 26px; }
.leistungen__heading { font-size: 19px; line-height: 1.4; margin: 0 0 14px; }
.leistungen__text { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0; }

/* Fünfte Fläche unter dem Grid: webdesign & corporate design (DESIGN-PLAN §3.1).
   Additiv — kein Eingriff in .grid-3, einspaltig, skaliert ohne Media-Query. */
.leistungen__extra {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
}

/* Kontakt / CTA */
.cta {
  padding: clamp(120px, 15vw, 200px) clamp(24px, 5vw, 72px); text-align: center;
  background: linear-gradient(180deg, var(--cta-from) 0%, var(--cta-to) 100%);
}
.cta__eyebrow { margin-bottom: 40px; }
.cta__title {
  font-size: clamp(32px, 5vw, 72px); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 auto 34px; max-width: 22ch;
}
.cta__lead {
  font-size: 17px; line-height: 1.85; color: var(--muted);
  margin: 0 auto 52px; max-width: 44ch;
}
.cta__actions {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: center;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}

/* Unterseite: Arbeitsweise */
.sub-head {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(140px, 17vw, 220px) clamp(24px, 5vw, 72px) 0;
  text-align: center;
}
.sub-head__back {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta);
  margin-bottom: 32px;
}
.sub-head__eyebrow { margin-bottom: 40px; }
.sub-head__title {
  font-size: clamp(38px, 6vw, 88px); line-height: 1.04; letter-spacing: -.025em;
  margin: 0 auto; max-width: 20ch;
}

.arbeitsweise-top {
  max-width: 1280px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 72px);
}
.arbeitsweise__quote {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.65; margin: 0 0 34px;
}
.arbeitsweise__text {
  font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 20px; max-width: 46ch;
}
.arbeitsweise__text:last-of-type { margin-bottom: 0; }

.timeline { display: flex; flex-direction: column; }
.timeline__row {
  display: flex; gap: 28px; border-top: 1px solid var(--rule); padding: 26px 0;
}
.timeline__row--last { border-bottom: 1px solid var(--rule); }
.timeline__marker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--accent);
  width: 64px; flex: none; padding-top: 4px;
}
.timeline__text { font-size: 15px; line-height: 1.8; color: var(--meta-hero); }

.pakete {
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) clamp(120px, 14vw, 180px);
}
.pakete__grid {
  border-top: 1px solid var(--rule); padding-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 6vw, 90px);
}
.pakete__title { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 20px; }
.pakete__text { font-size: 15px; line-height: 1.9; color: var(--muted); margin: 0 0 18px; }
.pakete__marker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--accent);
}

.powerbi {
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) clamp(96px, 12vw, 160px);
  border-top: 1px solid var(--rule); padding-top: 56px;
}
.powerbi__title {
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -.01em;
  margin: 0 0 24px;
}
.powerbi__text { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 20px; max-width: 62ch; }
.powerbi__text:last-of-type { margin-bottom: 0; }
.powerbi__text a { color: var(--ink); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px; }

.werkzeuge {
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) clamp(120px, 15vw, 200px);
}
.werkzeuge__eyebrow { margin-bottom: 34px; }
.werkzeuge__text { font-size: 16px; line-height: 2.1; color: var(--muted); margin: 0; }

/* 9 — Footer ---------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--rule); }
.site-footer__grid {
  max-width: 1280px; margin: 0 auto; padding: 72px clamp(24px, 5vw, 72px) 40px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px;
}
.site-footer__brand { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer__desc { font-size: 13px; line-height: 1.9; color: var(--meta); }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--muted); }
.site-footer__sister { display: block; }
.site-footer__sister-eyebrow {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--meta); margin-bottom: 16px;
}
.site-footer__sister-name {
  font-family: 'Libre Caslon Text', Georgia, serif; font-size: 22px; margin-bottom: 12px;
}
.site-footer__sister-text { font-size: 13px; line-height: 1.8; color: var(--muted); }
.site-footer__meta {
  max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px) 40px;
  display: flex; justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--mono-dim);
}

/* 10 — Legal-/Textseiten (.legal) ------------------------------------------- */

.legal-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(140px, 17vw, 220px) clamp(24px, 5vw, 72px) clamp(120px, 15vw, 200px);
}
.legal { max-width: 68ch; }
.legal h1 {
  font-size: clamp(38px, 6vw, 88px); line-height: 1.04; letter-spacing: -.025em;
  margin: 0 0 48px;
  overflow-wrap: break-word; hyphens: auto;
}
.legal h2 {
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; margin: 64px 0 20px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: 'Public Sans', Helvetica, Arial, sans-serif;
  font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: none;
  margin: 40px 0 16px;
}
.legal h4 {
  font-family: 'Public Sans', Helvetica, Arial, sans-serif;
  font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: none;
  color: var(--ink);
  margin: 32px 0 12px;
}
.legal p, .legal address, .legal li {
  font-size: 16px; line-height: 1.95; color: var(--muted);
}
.legal p, .legal address { margin: 0 0 20px; }
.legal ul, .legal ol { margin: 0 0 20px; padding-left: 1.3em; list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 10px; }
.legal a {
  color: var(--ink); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px;
}
.legal .updated {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--meta);
  margin-top: 64px;
}
.legal .lang-switch {
  font-size: 13px; color: var(--muted); margin-bottom: 56px;
}
.legal .lang-switch a { color: var(--ink); }
.legal .toc {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  margin: 0 0 48px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.legal .toc a { color: var(--muted); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px; }
.legal .note {
  margin-top: 40px; padding: 20px 24px; border: 1px solid var(--rule);
  font-size: 14px; line-height: 1.8; color: var(--muted);
}
.legal .flag-block + .flag-block { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--rule); }

/* 404 */
.notfound { text-align: center; }
.notfound__eyebrow { margin: 0 auto 40px; }
.notfound__title { margin: 0 auto 28px; max-width: 20ch; }
.notfound__lead {
  font-size: 17px; line-height: 1.85; color: var(--muted); margin: 0 auto 44px; max-width: 44ch;
}
.notfound__links {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: center;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}
.notfound__links a { border-bottom: 1px solid var(--rule-link); padding-bottom: 7px; }

/* 11 — Media Queries (§5), ausschließlich max-width -------------------------- */

@media (max-width: 1099.98px) {
  .site-header { gap: 20px; }
  .site-nav { gap: 20px; font-size: 11px; }

  /* Tap-Ziele >= 40px: unsichtbare Trefferfläche per ::before, expandiert nur die
     Klickbox (position:absolute nimmt keinen Platz im Layout ein) — Text und
     Zeilenabstand bleiben unverändert, Desktop-Fidelity ab 1100px unberührt. */
  .site-nav a, .site-footer__col a, .cta__actions a, .text-link,
  .sub-head__back, .notfound__links a {
    position: relative;
  }
  .site-nav a::before, .site-footer__col a::before, .cta__actions a::before,
  .text-link::before, .sub-head__back::before, .notfound__links a::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 40px;
    transform: translateY(-50%);
  }

  /* Tap-Ziel-Nachschärfung (Review S2): der 40px-::before-Overlay wird im Footer
     durch die Nachbarlinks bei zu knappem gap beschnitten — Spaltenabstand auf
     >=25px anheben, damit sich die 40px-Trefferflächen zweier Links nicht
     gegenseitig wegschneiden. */
  .site-footer__col { gap: 26px; }
}

@media (max-width: 899.98px) {
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-2 > * { order: 0; }
  .app-step__img--right { order: 0; }
  .app-step__body--left { order: 0; }
  .haltung__img, .app-step__img { aspect-ratio: 4 / 3; object-position: center; }

  .kpi-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .kennzahlen__grid { grid-template-columns: repeat(2, 1fr); }
  .kennzahlen__head { }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pakete__grid { grid-template-columns: repeat(2, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 759.98px) {
  .site-header { padding: 18px clamp(20px, 5vw, 24px); }
  .site-nav {
    gap: 12px; font-size: 10px; letter-spacing: .08em;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* Tap-Ziel-Nachschärfung (Review S2): overflow-x:auto zieht hier implizit
     overflow-y:auto nach, wodurch das 40px-::before-Overlay auf die reine
     Nav-Zeilenhöhe geclippt wird. Reale Trefferfläche per padding-block statt
     Overlay — wächst die Zeile selbst auf >=40px, bleibt unbeschnitten. */
  .site-nav a {
    position: static;
    padding-block: 15px;
  }
  .site-nav a::before { content: none; }

  .hero { min-height: 92svh; min-height: 92vh; }
  .hero__inner { padding-top: 104px; }
  .hero__scroll { font-size: 9px; }

  .section { padding: 88px clamp(20px, 5vw, 24px); }
  .kpi-strip { padding: 0 clamp(20px, 5vw, 24px); }
  .band { height: 46vh; min-height: 280px; }
  .cta { padding: 88px clamp(20px, 5vw, 24px); }
  .cta__actions { gap: 24px; }

  .kennzahlen__head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .kennzahlen__chart { height: 110px; }

  .sub-head { padding-top: 132px; }
  .arbeitsweise-top { grid-template-columns: 1fr; }
  .werkzeuge { padding-bottom: 88px; }
  .pakete { padding-bottom: 88px; }
}

@media (max-width: 559.98px) {
  .kpi-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 30px; }
  .kennzahlen__grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; gap: 36px; }
  .pakete__grid { grid-template-columns: 1fr; }

  .section { padding-left: clamp(20px, 5vw, 24px); padding-right: clamp(20px, 5vw, 24px); padding-top: 72px; padding-bottom: 72px; }
  .cta { padding-top: 72px; padding-bottom: 72px; }
  .cta__actions { flex-direction: column; align-items: center; }

  .timeline__row { flex-direction: column; gap: 8px; }
  .timeline__marker { width: auto; padding-top: 0; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__meta { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media (max-width: 420px) {
  .cta__actions { flex-direction: column; align-items: center; }
}

/* 12 — Ratgeber-/SEO-Unterseiten (.artikel) ---------------------------------
   Additiv: keine bestehende Regel wird verändert. Baukasten für die SEO-Seiten
   aus ~/brand/seo/SEITENPLAN.md. Ruhige Textspalte (68ch), H2-Rhythmus, Tabelle,
   FAQ als <details>. Typo-Skala, Haarlinien und Tokens 1:1 aus dem Bestand.
   Klassennamen identisch mit holzbucht/styles.css §12 — ein Template, zwei Häute. */

/* Breadcrumb (ersetzt .sub-head__back, gleiche Metrik = gleiche Optik) */
.crumbs {
  display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta);
  margin-bottom: 32px;
}
.crumbs a { color: var(--meta); }
.crumbs__sep { color: var(--rule-link); }
.crumbs__here { color: var(--ink); }

/* Textspalte */
.artikel {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 72px) clamp(96px, 12vw, 160px);
}
.artikel__col { max-width: 68ch; margin: 0 auto; }
.artikel__lead {
  font-size: 18px; line-height: 1.85; color: var(--meta-hero);
  margin: 0 0 clamp(48px, 6vw, 72px); text-wrap: pretty;
}
.artikel h2 {
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -.01em;
  margin: clamp(56px, 7vw, 88px) 0 24px;
}
.artikel__col > h2:first-child { margin-top: 0; }
.artikel p { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 20px; }
.artikel strong { color: var(--ink); font-weight: 500; }
.artikel__col a:not(.text-link) {
  color: var(--ink); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px;
}

/* Aufzählung mit Gedankenstrich statt Punkt (kein Icon, keine Kachel) */
.artikel ul { list-style: none; margin: 0 0 24px; padding: 0; }
.artikel ul li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  font-size: 16px; line-height: 1.95; color: var(--muted);
}
.artikel ul li:last-child { margin-bottom: 0; }
.artikel ul li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); }

/* Tabelle (scrollt in sich, nie die Seite) */
.artikel__table-wrap { overflow-x: auto; margin: 4px 0 24px; }
.artikel table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.artikel th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--meta); padding: 0 24px 14px 0; border-bottom: 1px solid var(--rule);
}
.artikel td {
  padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule);
  color: var(--muted); line-height: 1.75; vertical-align: top;
}
.artikel tbody tr:last-child td { border-bottom: 0; }
.artikel th:last-child, .artikel td:last-child { padding-right: 0; }

/* Quellen-/Stand-Zeile unter Zahlen (Ehrlichkeitsregel E-8) */
.artikel__source { font-size: 14px; line-height: 1.85; color: var(--meta); margin: 0 0 20px; }

/* Abgrenzungsblock zwischen zwei Haarlinien (Einzelunternehmer-Zeile E-1, Abgrenzung) */
.artikel__aside {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 26px 0; margin: clamp(48px, 6vw, 72px) 0;
}
.artikel__aside p { font-size: 15px; line-height: 1.9; margin: 0; }

/* FAQ als details/summary */
.faq { margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--rule); }
/* Steht die FAQ direkt unter ihrem H2, zählt nur der H2-Abstand. */
.artikel h2 + .faq { margin-top: 4px; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: block; position: relative; cursor: pointer; list-style: none;
  padding: 24px 40px 24px 0;
  font-family: 'Libre Caslon Text', Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 2px; top: 23px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; line-height: 1.5;
  color: var(--accent); transition: transform .4s cubic-bezier(.16,.7,.3,1);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 24px; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* Weiter-Zeile + Stand */
.artikel__weiter {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.9; color: var(--muted);
}
.artikel__updated {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--meta);
  margin-top: 40px;
}

@media (max-width: 759.98px) {
  .artikel { padding: 64px clamp(20px, 5vw, 24px) 80px; }
  .artikel__lead { font-size: 17px; }
  .faq__q { font-size: 17px; }
}

/* Interne Textlinks im Fließtext der App-Schritte (Verlinkung der Ratgeber-Seiten
   ohne Layoutänderung) — gleiche Haarlinie wie auf den Legal-/Ratgeberseiten. */
.app-step__text a { color: var(--ink); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px; }
.leistungen__text a { color: var(--ink); border-bottom: 1px solid var(--rule-link); padding-bottom: 2px; }

/* 13 — Effekt-Menü (generiert von effects.js §6, siehe dort) -----------------
   Sichtbares Mini-UI zum Umschalten des Cursor-Effekts (data-effekt), rechts
   unten, dezent: Meta-Typografie (mono, gesperrte Kleinschreibung), Haarlinie,
   Hintergrund halbtransparent über die vorhandenen Tokens (--bg/--rule/--meta/
   --mono-dim/--accent) — identischer Regelblock auf beiden Sites, färbt sich
   automatisch in die jeweilige Welt ein. Sichtbarkeits-Gate 1:1 wie bei
   #lens/#wake (§6): pointer:coarse, prefers-reduced-motion und fehlendes
   backdrop-filter blenden das Menü aus — ein Schalter ohne Wirkung wäre
   verwirrend. */
.fx-menu {
  position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px);
  z-index: 30;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .13em;
  white-space: nowrap;
}
.fx-menu__label { color: var(--meta); }
.fx-menu__dot { color: var(--rule-link); }
.fx-menu__btn {
  appearance: none; -webkit-appearance: none; border: none; background: none; margin: 0;
  padding: 4px 6px;
  font: inherit; color: var(--mono-dim);
  cursor: pointer; border-radius: 4px;
  transition: color .3s ease, background-color .3s ease;
}
.fx-menu__btn:hover { color: var(--ink); }
.fx-menu__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.fx-menu__btn[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Intensitäts-Regler (Kundenwunsch "Effekte zu stark"): eigene Gruppe
   (Trennpunkt + Label "stärke" + <input type="range">), gebaut von
   effects.js §6 (strengthWrap) und über strengthWrap.hidden komplett aus
   dem Fluss genommen bei Modus "aus" — kein hässlicher Leerraum, das Menü
   schrumpft sauber auf "effekt · 1 · 2 · aus" zurück. Track = Haarlinie
   (--rule-link), Thumb = Akzentfarbe (--accent), beide Browser-Engines
   (webkit/moz) einzeln bedient, da keine gemeinsame Pseudo-Element-Syntax
   existiert. */
.fx-menu__strength { display: inline-flex; align-items: center; gap: 7px; }
.fx-menu__range {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100px; height: 14px;
  margin: 0;
  background: transparent;
  vertical-align: middle;
  cursor: pointer;
}
.fx-menu__range::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule-link);
  border-radius: 999px;
}
.fx-menu__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px;
  margin-top: -5px;
  border: none; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.fx-menu__range::-moz-range-track {
  height: 1px;
  background: var(--rule-link);
  border-radius: 999px;
}
.fx-menu__range::-moz-range-thumb {
  width: 11px; height: 11px;
  border: none; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.fx-menu__range::-moz-focus-outer { border: 0; }
.fx-menu__range:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

@media (pointer: coarse), (prefers-reduced-motion: reduce) { .fx-menu { display: none; } }
@supports not (backdrop-filter: blur(1px)) { .fx-menu { display: none; } }

@media (max-width: 559.98px) {
  .fx-menu { gap: 5px; padding: 7px 10px; font-size: 9px; right: 12px; bottom: 12px; }
  .fx-menu__btn { padding: 3px 5px; }
  .fx-menu__strength { gap: 5px; }
  .fx-menu__range { width: 60px; }
}

/* 15 — App-Seiten (I18N-SPEC §5) --------------------------------------------
   Additiv. Bewusst minimal: die App-Seite nutzt sonst vollständig den
   .sub-head/.artikel-Baukasten aus §12. Neu ist nur der Store-Aufmacher und
   das Raster der Apps-Übersicht. */
.app-store {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.app-store__link { font-size: 13px; }
.app-store__note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta);
}

/* Apps-Übersicht (/apps/) */
.apps-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(40px, 6vw, 90px); }
.apps-hub__item { border-top: 1px solid var(--rule); padding: 32px 0; }
.apps-hub__name { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 21px; margin-bottom: 10px; }
.apps-hub__text { font-size: 15px; line-height: 1.85; color: var(--muted); margin: 0 0 14px; }
.apps-hub__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mono-dim);
}
@media (max-width: 759.98px) { .apps-hub { grid-template-columns: 1fr; } }

/* 14 — Sprachumschalter (DE/EN, siehe I18N-SPEC §3.3) ------------------------
   Additiv, verändert keine bestehende Regel. Sitzt als letztes Element in
   .site-nav und erbt deren font-size/letter-spacing. Aktive Sprache in --ink,
   inaktive in --muted (also exakt der Kontrast, den die Nav ohnehin führt). */
.lang-switch { display: inline-flex; align-items: baseline; gap: 8px; }
.lang-switch a { color: var(--muted); }
.lang-switch a[aria-current] { color: var(--ink); }
.lang-switch__sep { color: var(--rule-link); }
@media (max-width: 559.98px) { .lang-switch { gap: 6px; } }

/* 16 — Beispiel-Dashboards (Chart-Galerie) — ADDITIV -------------------------
   Nutzt bewusst die bestehenden .kennzahlen__*-Klassen weiter. Neu sind nur:
   zwei Größen-Modifier für das <svg>, ein Stapel-Rhythmus für die Unterseite
   und ein Scroll-Container fürs Handy.
   Kein Eingriff in bestehende Regeln. */

/* 1 — Größen-Modifier.
   Die Basisregel .kennzahlen__chart setzt height:150px (und 110px im Media
   Query). Für Charts MIT Monatsbeschriftung ist eine feste Höhe falsch: das
   SVG läuft mit preserveAspectRatio="xMidYMid meet", die Texte würden sonst
   gestaucht bzw. das Chart würde vertikal beschnitten. Doppelte Klasse
   (0,2,0) — schlägt die Basisregel und den Media Query unabhängig von der
   Quellreihenfolge. */
.kennzahlen__chart.kennzahlen__chart--bars  { height: auto; aspect-ratio: 1160 / 210; }
.kennzahlen__chart.kennzahlen__chart--panel { height: auto; aspect-ratio: 1160 / 200; }

/* 2 — Galerie-Stapel auf der Unterseite.
   Erste Fläche ohne Vorspann, ab der zweiten je eine Haarlinie + Luft —
   gleiche Logik wie .kennzahlen__rule, nur wiederholbar. */
.chartgal__item + .chartgal__item {
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--rule);
}
.chartgal__meta  { margin-bottom: 22px; }
.chartgal__title {
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35;
  margin: 0 0 30px; max-width: 26ch;
}
.chartgal__note {
  font-size: 14px; line-height: 1.9; color: var(--muted);
  margin: 18px 0 0; max-width: 54ch;
}

/* 3 — Handy: 1160 Einheiten auf ~330 px sind ca. 3 px große Monatslabels.
   Statt Labels zu verstecken lieber horizontal scrollen lassen.
   Befund 2 (Review 22.08.2026): min-width galt bisher nur unterhalb 720px —
   ein Wert außerhalb der Breakpoint-Leiter dieser Site (1099.98/899.98/
   759.98/559.98/420) und zu niedrig angesetzt: zwischen 721px und rund
   1000px Containerbreite gewann width:100%, die min-width griff nicht, und
   die Monatslabels rendern mit 6-8px ohne jede Scroll-Möglichkeit. Jetzt
   unbedingt gesetzt — oberhalb von 680px Containerbreite gewinnt ohnehin
   width:100% (kein Scrollbalken auf großen Schirmen), unterhalb erzwingt
   min-width zuverlässig den Scroll-Container statt eines nicht erreichbaren
   Breakpoint-Fensters. Die zweite Hälfte des Fixes sitzt an den SVGs selbst:
   font-size der Monatslabels 10 → 13 (siehe *.html), damit auch der
   ungeschützte Korridor ohne Scrollen lesbar bleibt. */
.chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.chart-scroll .kennzahlen__chart { min-width: 680px; }
@media (prefers-reduced-motion: no-preference) {
  .chart-scroll { scroll-behavior: smooth; }
}