/* ==========================================================================
   KO PLAN - Design System
   Konzept, Gestaltung und technische Umsetzung: Lorino Co., lorino-co.ch

   Die Farbwerte stammen direkt aus der bestehenden Website des Kunden
   (ko-plan.ch): Olivgrün #5a5933, Creme #efe5da, Anthrazit #393939,
   Sand #ccc0a8, Schwarz #222222.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal, keine externen Requests)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 400 700;
  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+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: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  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+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: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke, direkt von ko-plan.ch übernommen.
     Grundfläche der ganzen Website ist das Creme der bestehenden Seite.
     Alle weiteren Flächen sind DUNKLER als diese Grundfläche, nie heller.
     Damit kann keine Fläche mehr wie Weiss wirken. */
  --bg: #e8dccc;
  --bg-alt: #e8dccc;
  --bg-soft: #e0d2be;
  /* Felder tragen die Grundfarbe. Erkennbar sind sie über ihren Rahmen,
     nicht über eine hellere Fläche. Der Rahmen ist deshalb deutlich dunkler
     als eine Zierlinie: WCAG 1.4.11 verlangt für Bedienelemente 3:1. */
  --field-bg: #e8dccc;
  --field-border: #7d7358;
  --panel: #e8dccc;          /* exakter Ton der freigestellten Produktkreise */
  --fg: #222222;
  --fg-mute: #5b5a4e;
  --accent: #5a5933;
  --accent-hover: #43421f;
  --accent-soft: #e7e2cd;
  --rule: #c0b195;
  --rule-soft: #dbcfba;
  --inv-bg: #393939;
  --inv-bg-2: #222222;
  --inv-fg: #efe5da;
  --inv-fg-mute: #b4ae9f;
  --inv-accent: #c3c08c;
  --inv-rule: #4e4d47;
  --danger: #8a3123;
  --on-accent: #f7f2e9;
  --shadow-sm: 0 1px 2px rgba(34, 34, 34, .06);
  --shadow-lg: 0 2px 4px rgba(34, 34, 34, .05), 0 18px 40px rgba(34, 34, 34, .09);

  /* Typografie */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1: clamp(.83rem, .80rem + .16vw, .92rem);
  --step-0: clamp(1rem, .96rem + .22vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + .40vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.36rem + .95vw, 2.15rem);
  --step-3: clamp(2rem, 1.62rem + 1.90vw, 3.1rem);
  --step-4: clamp(2.35rem, 1.70rem + 3.10vw, 3.75rem);

  /* Abstände, 8pt-System */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --measure: 68ch;

  /* Form */
  --radius: 0;
  --header-h: 4.5rem;

  /* Bewegung. Exponentielle Ease-out-Kurven, kein Bounce. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-press: 140ms;
  --t-hover: 220ms;
  --t-panel: 260ms;
  --t-reveal: 620ms;

  /* Ebenen, benannt statt willkürlich */
  --z-behind: -1;
  --z-sticky: 40;
  --z-header: 60;
  --z-modal: 80;
}

/* --------------------------------------------------------------------------
   3. Reset und Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { overflow-wrap: break-word; text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  /* Deutsche Komposita sind länger als jede Spalte. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
h4 { font-size: var(--step-0); letter-spacing: 0; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: var(--z-modal);
  background: var(--inv-bg);
  color: var(--inv-fg);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 52rem; }

/* Ein Grid-Kind ist von Haus aus so breit wie sein längstes Wort. */
.hero-grid > *, .media-split > *, .systems > *, .svc-list > *,
.steps > *, .channels > *, .facts > *, .gateway > *, .form-grid > *,
.footer-top > *, .field-check > * { min-width: 0; }

.section { padding-block: var(--section-y); }
/* Grundfarbe und Sektionsfarbe sind identisch. Die Gliederung übernimmt eine
   Haarlinie, nicht ein Farbwechsel. */
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--rule); }
.section--soft { background: var(--bg-soft); }
.section--inv { background: var(--inv-bg); color: var(--inv-fg); }
.section--inv h2, .section--inv h3 { color: var(--inv-fg); }
.section--inv p { color: var(--inv-fg-mute); }
/* :not(.btn), sonst gewinnt diese Regel gegen .btn--primary und der Button
   steht in Akzentfarbe auf Akzentfarbe. */
.section--inv a:not(.btn) { color: var(--inv-accent); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: var(--measure);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }
/* :not(.btn) ist entscheidend. Ohne das gewinnt ".prose a" gegen ".btn--primary"
   und der Button steht in Akzentfarbe auf Akzentfarbe, also unsichtbar. */
.prose a:not(.btn) { color: var(--accent); }
.prose strong { font-weight: 600; }
.section--inv .prose a:not(.btn) { color: var(--inv-accent); }

/* Der einzige Kicker der Website: im Hero. Bewusst kein Muster über jede Sektion. */
.eyebrow {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 60rem; }
.section-head p { color: var(--fg-mute); max-width: var(--measure); margin-top: var(--s-4); }
.section--inv .section-head p { color: var(--inv-fg-mute); }

/* --------------------------------------------------------------------------
   5. Lamellen-Motiv
   Die einzige Verzierung der Website. Sie zitiert das Produkt selbst,
   ein Lamellendach, und taucht nur an drei Stellen auf: Seiten-Hero,
   Referenzbilder und Fussbereich.
   -------------------------------------------------------------------------- */
.slats {
  position: absolute;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    currentColor 0, currentColor 2px,
    transparent 2px, transparent 11px
  );
  color: var(--rule);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   5b. Verlaufs-Hintergrund
   Eine Fläche, die sich sehr langsam in den Markenfarben bewegt. Der Canvas
   liegt hinter allem, nimmt keine Klicks an und ist so maskiert, dass er dort
   ausblendet, wo Text steht. Sichtbar ist er nur als warmes Leuchten.

   Der sichtbare Standard ist der CSS-Verlauf. WebGL ersetzt ihn danach, sofern
   vorhanden und sofern Bewegung erwünscht ist. Fällt das aus, bleibt der
   CSS-Verlauf stehen, es entsteht nie eine leere Fläche.
   -------------------------------------------------------------------------- */
.shader-bg {
  /* Der Verlauf arbeitet ausschliesslich nach dunkler, nie nach heller.
     Sonst entstünden im Hero wieder Stellen, die wie Weiss aussehen. */
  --shader-base: var(--bg);
  --shader-c1: var(--bg-soft);
  --shader-c2: var(--rule);
  --shader-c3: #ddcfb8;

  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 74% 34%, var(--shader-c1) 0%, transparent 70%),
    radial-gradient(48% 54% at 88% 76%, var(--shader-c2) 0%, transparent 72%),
    radial-gradient(42% 46% at 58% 12%, var(--shader-c3) 0%, transparent 70%),
    var(--shader-base);
  -webkit-mask-image: radial-gradient(118% 108% at 78% 45%, #000 0%, #000 52%, transparent 92%);
  mask-image: radial-gradient(118% 108% at 78% 45%, #000 0%, #000 52%, transparent 92%);
}
/* Sobald WebGL zeichnet, wird der CSS-Verlauf nicht mehr gebraucht. */
.shader-bg[data-ready="true"] { background: none; }

/* Auf den Unterseiten deutlich zurückgenommen: cremefarbene Grundfläche,
   schwächere Maske, kleinere Amplitude im Shader selbst. */
.page-hero .shader-bg {
  --shader-base: var(--bg-alt);
  --shader-c1: var(--bg-soft);
  --shader-c2: var(--panel);
  --shader-c3: var(--rule);
  opacity: .7;
  -webkit-mask-image: radial-gradient(120% 110% at 88% 50%, #000 0%, #000 30%, transparent 82%);
  mask-image: radial-gradient(120% 110% at 88% 50%, #000 0%, #000 30%, transparent 82%);
}

@media (max-width: 47.99rem) {
  /* Auf kleinen Geräten steht der Text über der gesamten Breite. */
  .shader-bg { opacity: .55; }
  .page-hero .shader-bg { opacity: .45; }
}

/* --------------------------------------------------------------------------
   6. Buttons und Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: .75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--outline { border-color: var(--fg); color: var(--fg); }
.btn--inv { border-color: var(--inv-fg); color: var(--inv-fg); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
  .btn--outline:hover { background: var(--fg); color: var(--bg); }
  .btn--inv:hover { background: var(--inv-fg); color: var(--inv-bg); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: .55em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}
.link-arrow .arw { transition: transform var(--t-hover) var(--ease-out); }
.section--inv .link-arrow { color: var(--inv-accent); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .arw { transform: translateX(.35em); }
}

/* --------------------------------------------------------------------------
   7. Header, Logo, Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* Die Wortmarke von ko-plan.ch: senkrechte Linie, weit gesperrte Versalien,
   Haarlinie, darunter der Zusatz. Als Text statt als Bild, damit sie in jeder
   Grösse scharf bleibt und vorgelesen werden kann. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-rule {
  width: 2px;
  align-self: stretch;
  min-height: 2.4rem;
  background: var(--accent);
  margin-right: .85rem;
  transition: background-color var(--t-hover) var(--ease-out);
}
.brand-type { display: block; }
/* KO über PLAN, wie in der Bildmarke des Kunden. */
.brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.16;
  color: var(--fg);
}
.brand-mark span { display: block; }
.brand-sub {
  display: block;
  margin-top: .34rem;
  padding-top: .3rem;
  border-top: 1px solid var(--rule);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.site-footer .brand-mark { color: var(--inv-fg); }
.site-footer .brand-sub { color: var(--inv-fg-mute); border-top-color: var(--inv-rule); }

.nav { display: flex; align-items: center; gap: clamp(.4rem, .1rem + .9vw, 1.35rem); }
.nav a {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: .45rem 0;
  color: var(--fg);
}
/* Unterstrich wächst aus der Mitte, statt hart zu erscheinen. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-hover) var(--ease-out);
}
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--accent); }
  .nav a:hover::after { transform: scaleX(1); }
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

.langswitch { display: flex; align-items: center; gap: .35rem; }
.langswitch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;          /* Tippziel, auch wenn der Text klein ist */
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .35rem .3rem;
  color: var(--fg-mute);
  min-width: 1.9rem;
  text-align: center;
  transition: color var(--t-hover) var(--ease-out);
}
.langswitch a[aria-current="true"] { color: var(--accent); }
/* Der Trennstrich ist reine Dekoration, muss aber sichtbar sein. Die
   Linienfarbe war dafür zu hell. */
.langswitch span[aria-hidden] { color: color-mix(in srgb, var(--fg-mute) 60%, transparent); font-size: .7rem; }
@media (hover: hover) and (pointer: fine) { .langswitch a:hover { color: var(--accent); } }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle-bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--fg);
  transition: transform var(--t-panel) var(--ease-out);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-4.25px) rotate(-45deg); }

/* Auf sehr schmalen Geräten (ab iPhone SE abwärts) brauchen Wortmarke,
   Sprachumschalter und Menüknopf zusammen mehr Platz als vorhanden ist.
   Gemessen: 343 px Bedarf bei 305 px Breite. Deshalb hier kompakter. */
@media (max-width: 26rem) {
  :root { --gutter: 1rem; }
  .header-inner { gap: var(--s-3); }
  .brand-mark { font-size: .82rem; letter-spacing: .18em; }
  .brand-sub { font-size: .5rem; letter-spacing: .2em; }
  .brand-rule { margin-right: .55rem; }
  .langswitch { gap: .1rem; }
  .langswitch a { min-width: 1.55rem; padding: .35rem .2rem; }
  .langswitch span[aria-hidden] { display: none; }
}

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule-soft);
    padding: var(--s-4) var(--gutter) var(--s-6);
    transform: translateY(-6px);
    opacity: 0;
    visibility: hidden;
    /* visibility ist eine Sprungeigenschaft. Beim Schliessen erst am Ende
       schalten, beim Oeffnen sofort, sonst fehlt die halbe Einblendung. */
    transition:
      opacity var(--t-panel) var(--ease-out),
      transform var(--t-panel) var(--ease-out),
      visibility 0s linear var(--t-panel);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--t-panel) var(--ease-out),
      transform var(--t-panel) var(--ease-out),
      visibility 0s linear;
  }
  .nav a { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-soft); font-size: var(--step-0); }
  .nav a::after { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero der Startseite
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.hero-copy > * + * { margin-top: var(--s-5); }
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 46ch; }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Banner-Hero, dem bestehenden Auftritt nachempfunden: das Foto läuft rechts
   aus dem Bild heraus und blendet nach links in die Cremefläche. Der Text
   liegt als echter Text darüber, nicht im Bild. */
.hero--banner .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-photo { display: block; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 59.99rem) {
  /* Auf schmalen Geräten steht das Bild als eigener Block unter dem Text. */
  .hero--banner .hero-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-top: var(--s-6);
    background: var(--bg-alt);
  }
}

@media (min-width: 60rem) {
  .hero--banner { min-height: min(34rem, 78vh); display: flex; align-items: center; }
  .hero--banner .hero-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 72%;
    z-index: var(--z-behind);
  }
  .hero--banner .hero-photo img {
    object-position: 62% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  }
  /* Cremefläche zwischen Foto und Text. Sie sichert den Kontrast unabhängig
     davon, was im Foto gerade hinter der Schrift liegt, und bildet denselben
     Übergang nach wie das Banner der bestehenden Seite. */
  .hero--banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-behind);
    pointer-events: none;
    background: linear-gradient(
      90deg,
      var(--bg) 0%,
      var(--bg) 30%,
      color-mix(in srgb, var(--bg) 55%, transparent) 46%,
      transparent 62%
    );
  }
  .hero--banner .hero-grid { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .hero--banner .hero-copy { max-width: 30rem; }
}

/* --------------------------------------------------------------------------
   9. Seiten-Hero der Unterseiten
   Cremefarbenes Band mit Lamellen-Motiv, das die rechte Hälfte trägt.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
}
.page-hero .inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
}
@media (min-width: 60rem) {
  .page-hero .inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--s-5); color: var(--fg-mute); }

/* Lamellen laufen von der rechten Kante herein und blenden nach links aus.
   Zusätzlich blenden sie nach unten aus, damit sie nicht hinter den
   Kennzahlen liegen und deren Lesbarkeit angreifen. */
.page-hero .slats {
  inset: 0 0 0 auto;
  width: min(46%, 30rem);
  color: var(--accent);
  opacity: .38;
  z-index: var(--z-behind);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 52%, #000),
    linear-gradient(180deg, #000 0%, #000 38%, transparent 76%);
  mask-image:
    linear-gradient(90deg, transparent, #000 52%, #000),
    linear-gradient(180deg, #000 0%, #000 38%, transparent 76%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.page-hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--fg-mute);
  max-width: 24rem;
}
.page-hero-meta b { color: var(--fg); font-weight: 600; }

.breadcrumb { font-size: var(--step--2); color: var(--fg-mute); margin-bottom: var(--s-5); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb a { display: inline-block; padding-block: .5rem; text-decoration: none; }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--rule); }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--accent); } }

/* --------------------------------------------------------------------------
   10. Gateway-Bänder
   -------------------------------------------------------------------------- */
.gateway { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule-soft); }
@media (min-width: 48rem) { .gateway { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gateway-card {
  position: relative;
  background: var(--bg);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-decoration: none;
  transition: background-color var(--t-panel) var(--ease-out);
}
.gateway-card h2, .gateway-card h3 { font-size: var(--step-2); }
.gateway-card p { color: var(--fg-mute); }
.gateway-card ul { list-style: none; padding: 0; font-size: var(--step--1); color: var(--fg-mute); }
.gateway-card li { padding-left: 1.15em; position: relative; }
.gateway-card li + li { margin-top: .45rem; }
.gateway-card li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: .5em; height: 1px;
  background: var(--accent);
}
.gateway-card .link-arrow { margin-top: auto; padding-top: var(--s-4); }
@media (hover: hover) and (pointer: fine) {
  .gateway-card:hover { background: var(--bg-soft); }
  .gateway-card:hover .arw { transform: translateX(.35em); }
}

/* --------------------------------------------------------------------------
   11. Systemkacheln
   Fotokacheln zeigen die Anwendung, Produktkacheln den Freisteller auf
   eigener Fläche. Der Kreis im Bild und die Kachelfarbe sind identisch,
   dadurch wirkt der Freisteller nicht angeschnitten.
   -------------------------------------------------------------------------- */
.systems { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 52rem) {
  .systems { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .systems > :nth-child(1) { grid-column: span 4; }
  .systems > :nth-child(2) { grid-column: span 2; }
  .systems > :nth-child(3) { grid-column: span 2; }
  .systems > :nth-child(4) { grid-column: span 4; }
}

.system {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(17rem, 12rem + 15vw, 25rem);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--t-panel) var(--ease-out);
}
.system-body { margin-top: auto; padding: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.system h3 { font-size: var(--step-1); }
.system-desc { font-size: var(--step--1); margin-top: var(--s-2); max-width: 40ch; }
.system-more {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: var(--s-4);
}

/* Fotokachel */
.system--photo { background: var(--inv-bg); color: #f4f0e9; }
.system--photo h3 { color: #f4f0e9; }
.system--photo .system-desc { color: #d8d2c4; }
.system--photo .system-more { color: var(--inv-accent); }
.system-bg { position: absolute; inset: 0; z-index: -2; }
.system-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.system--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  background: linear-gradient(to top, rgba(28, 28, 26, .9) 0%, rgba(28, 28, 26, .5) 46%, rgba(28, 28, 26, .1) 100%);
}

/* Produktkachel */
.system--render { background: var(--panel); color: var(--fg); }
.system--render .system-figure {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 3vw, 3rem) 0;
  min-height: 0;
}
.system--render .system-figure img {
  width: auto;
  max-width: 100%;
  max-height: clamp(9rem, 6rem + 12vw, 15rem);
  object-fit: contain;
  transition: transform var(--t-panel) var(--ease-out);
}
.system--render .system-desc { color: var(--fg-mute); }
.system--render .system-more { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .system--photo:hover .system-bg img { transform: scale(1.05); }
  .system--render:hover .system-figure img { transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   11b. Katalog-Band
   Steht bewusst weit oben und auf dunklem Grund: der Katalog ist für
   Fachbetriebe der wichtigste Grund, Kontakt aufzunehmen.
   -------------------------------------------------------------------------- */
.katalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) {
  .katalog { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
}
.katalog h2 { font-size: var(--step-2); }
.katalog p { margin-top: var(--s-4); }
.katalog .btn-row { flex-direction: column; align-items: stretch; }
@media (min-width: 30rem) and (max-width: 55.99rem) { .katalog .btn-row { flex-direction: row; } }
.katalog .hint { color: var(--inv-fg-mute); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   12. Fakten-Band
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-5); }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { border-top: 1px solid var(--inv-rule); padding-top: var(--s-4); }
.fact-num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--inv-fg);
}
.fact-label { font-size: var(--step--1); color: var(--inv-fg-mute); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   13. Leistungsliste
   -------------------------------------------------------------------------- */
.svc-list { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 5rem); }
}
.svc { padding-block: var(--s-5); border-top: 1px solid var(--rule-soft); }
.svc h3 {
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  gap: .65em;
}
.svc h3::before {
  content: '';
  flex: 0 0 auto;
  width: 1.1em; height: 1px;
  background: var(--accent);
}
.svc p { font-size: var(--step--1); color: var(--fg-mute); margin-top: var(--s-2); padding-left: 1.75em; }
/* Füllt die letzte Rasterzelle. Bei ungerader Anzahl Leistungen bliebe dort
   sonst ein auffälliges Loch. */
.svc--cta { display: flex; align-items: flex-start; }

/* --------------------------------------------------------------------------
   14. Prozess. Hier sind Nummern berechtigt, es ist eine echte Abfolge.
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); counter-reset: step; }
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem); }
}
.step { counter-increment: step; border-top: 1px solid var(--rule-soft); padding-top: var(--s-4); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--s-3); }
.step p { color: var(--fg-mute); font-size: var(--step--1); }
.section--inv .step { border-top-color: var(--inv-rule); }
.section--inv .step::before { color: var(--inv-accent); }
.section--inv .step p { color: var(--inv-fg-mute); }
.steps--stack { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   15. Referenzgalerie
   Mehrspaltiger Textfluss statt starrem Raster: die Bilder behalten ihr
   eigenes Seitenverhältnis und es bleiben keine Lücken. Hinter jedem Bild
   sitzt ein versetztes Lamellenfeld, das dem Bild Tiefe gibt.
   -------------------------------------------------------------------------- */
.gallery { columns: 1; column-gap: var(--s-4); }
@media (min-width: 40rem) { .gallery { columns: 2; column-gap: var(--s-5); } }
@media (min-width: 68rem) { .gallery { columns: 3; column-gap: var(--s-5); } }

.shot {
  break-inside: avoid;
  margin: 0 0 clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
/* Eigener Rahmen für Bild und Lamellen. Dadurch liegen die Lamellen niemals
   hinter der Bildunterschrift, die direkt darunter steht. */
.shot-media {
  position: relative;
  display: block;
  padding: 0 1rem 1rem 0;
}
.shot .slats {
  right: 0; bottom: 0;
  width: 66%; height: 62%;
  color: var(--accent);
  opacity: .5;
  transition: transform var(--t-panel) var(--ease-out), opacity var(--t-panel) var(--ease-out);
}
.section--inv .shot .slats { color: var(--inv-accent); opacity: .55; }
.shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-panel) var(--ease-out), box-shadow var(--t-panel) var(--ease-out);
}
.shot-frame img { width: 100%; height: auto; }
.shot figcaption { font-size: var(--step--2); color: var(--fg-mute); margin-top: var(--s-3); }
.section--inv .shot figcaption { color: var(--inv-fg-mute); }

@media (hover: hover) and (pointer: fine) {
  .shot:hover .shot-frame { transform: translate(-4px, -4px); box-shadow: var(--shadow-lg); }
  .shot:hover .slats { transform: translate(4px, 4px); opacity: .45; }
}

/* Abschlusskachel der Galerie */
.shot--cta {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  min-height: 15rem;
  transition: background-color var(--t-panel) var(--ease-out);
}
.shot--cta h3 { color: var(--on-accent); font-size: var(--step-2); }
.shot--cta p { color: color-mix(in srgb, var(--on-accent) 82%, transparent); font-size: var(--step--1); }
.shot--cta .link-arrow { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .shot--cta:hover { background: var(--accent-hover); }
  .shot--cta:hover .arw { transform: translateX(.35em); }
}

/* --------------------------------------------------------------------------
   16. Bild-Text-Blöcke
   -------------------------------------------------------------------------- */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) {
  .media-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-split--rev > :first-child { order: 2; }
}
.media-split figure { position: relative; overflow: hidden; background: var(--bg-alt); }
.media-split figure img { width: 100%; height: auto; }

/* Produktfreisteller: eigene Fläche, nichts wird angeschnitten.
   Die Auswahl muss mindestens so spezifisch sein wie ".media-split figure img",
   sonst gewinnt dort width:100% und der quadratische Freisteller läuft
   aus dem 4:3-Rahmen heraus. */
.media-split .figure--product {
  display: block;
  background: var(--panel);
  aspect-ratio: 4 / 3;
}
/* Das Polster sitzt am Bild selbst, nicht am Rahmen. Eine Prozent-Höhe würde
   in einem automatisch hohen Grid-Track nicht auflösen, hier schon: der Rahmen
   hat über aspect-ratio eine feste Höhe. */
.media-split .figure--product img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(1.25rem, .8rem + 2.4vw, 3rem);
  object-fit: contain;
}

@media (min-width: 56rem) { .sticky-figure { position: sticky; top: 7rem; } }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--rule-soft); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  min-height: 3.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--step-0);
  list-style: none;
  transition: color var(--t-hover) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: .75rem; height: .75rem;
  margin-top: .5em;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t-panel) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding-bottom: var(--s-5); color: var(--fg-mute); max-width: var(--measure); }
.faq .answer > * + * { margin-top: var(--s-4); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .answer { animation: answer-in 300ms var(--ease-out) both; }
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. CTA-Band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; color: #f4f0e9; text-align: center; }
.cta-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  background: linear-gradient(180deg, rgba(28, 28, 26, .72), rgba(28, 28, 26, .82));
}
.cta-band .inner { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); }
.cta-band h2 { color: #f4f0e9; margin-inline: auto; max-width: 22ch; }
.cta-band p { color: #ded8ca; margin: var(--s-5) auto 0; max-width: 52ch; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   19. Formulare
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field .req { color: var(--accent); }

/* Kein heller Kasten, sondern ein kräftigerer Rahmen. Damit bleibt erkennbar,
   wo etwas eingegeben wird, ohne dass eine weiss wirkende Fläche entsteht. */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-mute); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.field .error { font-size: var(--step--2); color: var(--danger); font-weight: 600; min-height: 1.1em; }

.field-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.field-check input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem;
  min-height: 0;
  margin-top: .2rem;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.field-check label { font-weight: 400; font-size: var(--step--1); color: var(--fg-mute); }
.field-check a { color: var(--accent); }

/* Honeypot: sichtbar für Bots, unsichtbar für Menschen, ohne display:none */
.hp-field, .hp-field input {
  background: var(--bg);
}
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  padding: var(--s-4);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: var(--step--1);
}
.form-status[data-state="error"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
}
.form-status[hidden] { display: none; }
.btn[data-loading="true"] { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   20. Kontakt-Kanäle
   -------------------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 48rem) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.channel { border-top: 1px solid var(--rule-soft); padding-top: var(--s-4); }
.channel h3 { font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
.channel p { font-size: var(--step--1); color: var(--fg-mute); margin-top: var(--s-2); }
.channel a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--accent);
  font-weight: 600;
}

.placeholder-note {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--danger);
  border: 1px dashed currentColor;
  padding: .2rem .5rem;
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--inv-bg); color: var(--inv-fg-mute); font-size: var(--step--1); }
/* Ein Lamellenband an der Oberkante des Footers, wie die Traufe eines
   Lamellendachs. Es liegt in der ohnehin leeren Polsterzone, also über keinem
   Text, und darf deshalb deutlich sichtbar sein. */
.site-footer .slats {
  inset: 0 0 auto 0;
  height: 3.5rem;
  color: var(--inv-accent);
  opacity: .32;
  z-index: var(--z-behind);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}
.footer-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 48rem) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64rem) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer h2 {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-fg);
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; padding: 0; }
/* Die Fusszeilen-Links sind eigenstaendige Ziele, keine Wortlinks im Satz.
   Sie brauchen deshalb eine Trefferflaeche nach WCAG 2.5.8; die Polsterung
   ersetzt den frueheren Aussenabstand, die Liste wird dadurch kaum hoeher. */
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.site-footer a { text-decoration: none; transition: color var(--t-hover) var(--ease-out); }
.footer-brand p { margin-top: var(--s-4); max-width: 34ch; }
.footer-bottom {
  position: relative;
  border-top: 1px solid var(--inv-rule);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--2);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.credit a { color: var(--inv-fg); border-bottom: 1px solid var(--inv-rule); }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--inv-accent); }
  .credit a:hover { border-color: var(--inv-accent); }
}

/* --------------------------------------------------------------------------
   22. Sticky-CTA auf Mobile
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  background: var(--inv-bg);
  border-top: 1px solid var(--inv-rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; padding: 0; margin: 0; }
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .5rem .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--inv-fg);
  transition: background-color var(--t-hover) var(--ease-out);
}
.sticky-cta li + li a { border-left: 1px solid var(--inv-rule); }
.sticky-cta .is-primary { background: var(--accent); color: var(--on-accent); }
@media (max-width: 47.99rem) { .sticky-cta { display: block; } body { padding-bottom: 3.5rem; } }

/* --------------------------------------------------------------------------
   23. Datenschutz-Modal
   -------------------------------------------------------------------------- */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(34, 34, 34, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-panel) var(--ease-out), visibility var(--t-panel);
}
@media (min-width: 48rem) { .privacy-modal { align-items: center; } }
.privacy-modal[data-open="true"] { opacity: 1; visibility: visible; }
.privacy-dialog {
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  max-width: 34rem;
  width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  /* Nie aus dem Nichts: startet bei 0.97, nicht bei 0. */
  transform: translateY(10px) scale(.97);
  transform-origin: center;
  transition: transform 320ms var(--ease-out);
}
.privacy-modal[data-open="true"] .privacy-dialog { transform: none; }
.privacy-dialog h2 { font-size: var(--step-1); margin-bottom: var(--s-4); }
.privacy-dialog p { font-size: var(--step--1); color: var(--fg-mute); }
.privacy-dialog p + p { margin-top: var(--s-3); }
.privacy-dialog a { color: var(--accent); display: inline-flex; align-items: center; min-height: 2.75rem; }
.privacy-dialog .btn { margin-top: var(--s-5); width: 100%; }

/* --------------------------------------------------------------------------
   24. Bewegung beim Scrollen
   Der sichtbare Zustand ist der Standard. Erst wenn JavaScript die Klasse
   "js" gesetzt hat, wird überhaupt etwas versteckt. Ohne JavaScript, in
   Suchmaschinen-Renderern und bei reduzierter Bewegung ist alles sofort da.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--t-reveal) var(--ease-out),
      transform var(--t-reveal) var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  /* Staffelung innerhalb einer Gruppe, 60 ms Abstand. */
  .js [data-reveal][data-delay="1"] { transition-delay: 60ms; }
  .js [data-reveal][data-delay="2"] { transition-delay: 120ms; }
  .js [data-reveal][data-delay="3"] { transition-delay: 180ms; }
}

/* Bewusst ohne Einblend-Animation auf dem Hero-Bild: es ist das erste, was
   geladen wird, und eine Animation, die im unsichtbaren Zustand beginnt,
   hinterlässt einen leeren Hero, sobald sie nicht anläuft. Ausserdem wird es
   bei jedem einzelnen Seitenaufruf gesehen, da bringt Bewegung nichts. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   25. Fehlerseite
   -------------------------------------------------------------------------- */
.error-page { min-height: 60dvh; display: flex; align-items: center; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   26. Hilfsklassen
   Als Klassen statt style-Attribute, damit die CSP ohne 'unsafe-inline' auskommt.
   -------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

.center { text-align: center; }
.btn-row--center { justify-content: center; }
.lead--center { margin-inline: auto; }
.hint { font-size: var(--step--2); color: var(--fg-mute); }
.note { color: var(--fg-mute); max-width: var(--measure); }
.meta-line { color: var(--fg-mute); font-size: var(--step--1); }

.feature-list { padding-left: 1.2em; color: var(--fg-mute); }
.feature-list li + li { margin-top: var(--s-2); }
.color-list { columns: 2; column-gap: var(--s-6); padding-left: 1.2em; }
.social-block { border-top: 1px solid var(--rule-soft); padding-top: var(--s-5); }

.prose-dl { display: grid; }
.prose-dl dt { font-weight: 600; margin-top: var(--s-4); }
.prose-dl dd { margin: 0; color: var(--fg-mute); }
.prose-dl dt:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   27. Druck
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .sticky-cta, .privacy-modal,
  .cta-band, .btn, .skip-link, .nav-toggle, .slats { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  h1, h2, h3 { break-after: avoid; }
}