/* ==========================================================================
   1 · Fundament — Farben (OKLCH, Farbsystem A), Typo, Rhythmus
   ========================================================================== */
:root{
  --paper:        oklch(0.975 0.006 190);
  --dunst:        oklch(0.900 0.014 196);
  --sand:         oklch(0.900 0.020 68);
  --tinte:        oklch(0.300 0.050 196);
  --tinte-deep:   oklch(0.250 0.043 197);
  --tinte-deeper: oklch(0.215 0.037 198);
  --petrol:       oklch(0.420 0.064 194);
  --petrol-deep:  oklch(0.365 0.058 194);
  --mint:         oklch(0.700 0.130 182);
  --mint-tief:    #006A62;
  --mint-hell:    #6AD7C3;
  --amber:        oklch(0.77 0.16 70);   /* NUR Conversion-Momente */
  --amber-deep:   oklch(0.71 0.155 66);
  --amber-ink:    oklch(0.26 0.05 60);
  --err:          oklch(0.72 0.16 32);
  --err-light:    oklch(0.52 0.19 30);

  --fd: "Bricolage Grotesque", "Instrument Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fb: "Instrument Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Größenleiter, Faktor > 1,25 zwischen den Stufen */
  --fs-h1:   clamp(2.9rem, 8.2vw, 5.9rem);
  --fs-h2:   clamp(2.05rem, 4.6vw, 3.45rem);
  --fs-h3:   clamp(1.35rem, 2.1vw, 1.7rem);
  --fs-body: 1.0625rem;
  --fs-s:    0.9rem;
  --fs-kick: 0.8125rem;

  --eo:  cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */
  --eq:  cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quint */
  /* Traversal-Kurve: flacher Auslauf fuer Bewegungen, die die Flaeche
     durchqueren — mit --eq waere der Licht-Sweep vorbei, bevor man ihn sieht. */
  --et:  cubic-bezier(0.3, 0.35, 0.45, 1);

  --wrap: 76rem;
  --pad-x: clamp(1.25rem, 4.5vw, 3.5rem);
  --sec-y: clamp(4.75rem, 11vw, 8.75rem);
  --head-h: 4.5rem;
  --radius: clamp(16px, 2vw, 26px);
  --focus: var(--mint-hell);
}
@media (min-width:1140px){ :root{ --head-h: 4.75rem; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* Sprungziele duerfen nicht unter der klebenden Kopfleiste landen. #inhalt
   kam ohne diese Zeile exakt 77 px zu hoch heraus — verdeckt fuer genau die
   Nutzer, fuer die der Sprunglink gebaut ist. Die Regel stand bis zum
   04.09.2026 nur in bmd-ratgeber-kontakt.css und fehlte damit auf der
   Startseite und allen zwoelf Projektseiten. scroll-margin veraendert kein
   Layout, nur die Stelle, an der der Browser anhaelt. */
[id]{ scroll-margin-top:calc(var(--head-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html, body{ overflow-x:clip; }
body{
  font-family:var(--fb);
  font-size:var(--fs-body);
  line-height:1.65;
  color:oklch(0.975 0.006 190 / 0.9);
  background:var(--tinte-deeper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
strong{ font-weight:650; }

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

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--mint-hell); color:var(--tinte-deeper);
  font:600 var(--fs-s)/1 var(--fb);
  padding:0.8rem 1.2rem; border-radius:10px; text-decoration:none;
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Typo-Bausteine */
h1,h2,h3{ font-family:var(--fd); text-wrap:balance; }
h1{ font-size:var(--fs-h1); font-weight:750; line-height:1.02; letter-spacing:-0.022em; }
h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.06; letter-spacing:-0.015em; }
h3{ font-size:var(--fs-h3); font-weight:650; line-height:1.18; letter-spacing:-0.008em; }

/* Versalien-Label: 600 / Laufweite 0.09em (Regel: >= 0.07em) */
.kick{
  font:600 var(--fs-kick)/1.2 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
  display:flex; align-items:center; gap:0.75rem;
}
/* Das CI-Quadrat statt des fruehereren 28-px-Strichs. Der Kicker steht in 20
   Content Blocks ueber jeder Ueberschrift — er ist die haeufigste
   Auszeichnung der Website und damit die Stelle, an der ein Zeichen am
   meisten traegt. Es wird nichts hinzugefuegt: der Strich hatte 28 x 2 = 56
   Pixel Flaeche, das Quadrat hat 8 x 8 = 64. Gleiche Tinte, klare Form.
   currentColor statt fester Farbe — so folgt das Quadrat jeder Kicker-Farbe
   (hell, dunkel, Sand) ohne zweite Regel. */
.kick::before{
  content:""; width:0.5rem; height:0.5rem; flex:none;
  background:currentColor;
}
.kick .kn{ font-variant-numeric:tabular-nums; opacity:0.65; }
.screen .kick{ color:var(--mint-tief); }

/* Fließtext: max. Breite ergibt 65–75 Zeichen bei Instrument Sans 17px */
.lead{ max-width:36rem; }
.lead-big{ font-size:clamp(1.1rem, 1.6vw, 1.3rem); line-height:1.55; }

.sec-head{ display:grid; gap:1.1rem; margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }

/* ==========================================================================
   2 · Buttons — Amber ausschließlich am Absendeknopf
   Bis zum 04.09.2026 trugen Kopfleiste, Bühne UND der Absendeknopf Amber:
   zwei bis drei Amber-Flächen je Seite, zwei davon gleichzeitig im ersten
   Bildschirm. Amber steht jetzt an genau einer Stelle — dem Knopf, der die
   Anfrage tatsächlich abschickt (Configuration/Form/Barth/config.yaml).
   Kopfleiste, Menü und Bühne führen dorthin und tragen .btn-mint: gefüllt,
   also weiterhin primär, aber ohne das Signal des Abschlusses.
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font:600 1rem/1 var(--fb); letter-spacing:0.01em;
  padding:0.95rem 1.5rem; border-radius:14px;
  text-decoration:none; border:0; cursor:pointer;
  transition:transform 0.3s var(--eq);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform 0.3s var(--eq); }
.btn:hover .arr{ transform:translateX(4px); }

.btn-amber{ background:var(--amber); color:var(--amber-ink); }
.btn-amber:hover{ background:var(--amber-deep); }

/* Der führende Knopf ÜBERALL SONST. Mint-hell #6AD7C3 mit Tinte-deep als
   Schrift = 9,08:1; die Fläche steht immer auf dunklem Grund (Kopfleiste
   Tiefpetrol, Bühne Tinte), dort ist auch die Kante des Knopfes deutlich. */
.btn-mint{ background:var(--mint-hell); color:var(--tinte-deep); }
.btn-mint:hover{ background:var(--mint); }

/* „Magnetisches" Gefuehl am Primaer-CTA: der Button kommt dem Zeiger ein
   Stueck entgegen und gibt beim Druck nach. Rein CSS, kein Cursor-Tracking. */
@media (hover:hover){
  .btn-amber, .btn-mint{ transition:transform 0.32s var(--eo), background-color 0.3s var(--eq); }
  .btn-amber:hover, .btn-mint:hover{ transform:translateY(-3px) scale(1.018); }
  .btn-amber:active, .btn-mint:active{ transform:translateY(-1px) scale(0.992); }
  .btn-amber:hover .arr, .btn-mint:hover .arr{ transform:translateX(6px); }
}

.btn-ghost{
  background:transparent; color:var(--paper);
  border:1px solid oklch(0.975 0.006 190 / 0.28);
}
.btn-ghost:hover{ border-color:var(--mint-hell); }

.arrow-link{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-weight:600; text-decoration:none;
  color:var(--mint-hell);
}
.screen .arrow-link{ color:var(--mint-tief); }
.arrow-link .arr{ transition:transform 0.3s var(--eq); }
.arrow-link:hover .arr{ transform:translateX(5px); }
.arrow-link:hover{ text-decoration:underline; text-underline-offset:0.3em; text-decoration-thickness:1.5px; }

/* ==========================================================================
   3 · Header + Navigation (Aufklappfläche legt sich UNTER die Leiste)

   Aufbau einer Zeile in der Fläche — Verhältnis 12 zu 16:
     [2px Aktivkante] [Zeichen 12px] [8px] [Titel 16px / Nutzenzeile 13px] [Pfeil]

   Aktiv und Überfahren tragen bewusst ZWEI verschiedene Zeichen. Aktiv ist die
   Mint-Kante links plus höhere Textdeckkraft; Überfahren ist der Flächenwechsel
   plus der Pfeil, der von rechts hereinfährt. Wären beide gleich, verlöre die
   Markierung ihre Aussage, sobald die Maus in der Fläche steht.

   Pro Zeile bewegt sich genau ein Element — der Pfeil, und zwar in die Richtung,
   in die der Klick führt. Das Zeichen links bleibt stehen.
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:oklch(0.215 0.037 198 / 0.97);
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.09);
}
.head-bar{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.1rem, 2.5vw, 2.25rem);
  height:var(--head-h);
  display:flex; align-items:center; gap:clamp(0.6rem, 1.5vw, 1.1rem);
}
/* Das Logo (Entwurf K "Rahmen und Inhalt", Leise, seit 03.09.2026) liegt als
   <use> auf einem Symbol im Logo-Sprite. Winkel und Quadrat tragen im Sprite
   fest Mint, die Schrift laeuft ueber currentColor und nimmt die Farbe von
   .brand (Papier) — der Akzent wechselt mit dem Grund, Kopf und Fuss stehen
   auf Tiefpetrol.

   Kopfleiste: volles Lockup 559 x 284 (1,97:1). Beide Woerter stehen immer
   beisammen (Markenregel Armin, 03.09.2026), die Kurzform ist zurueckgezogen.
   Die Hoehe richtet sich nach dem kleineren Wort: MEDIADESIGN ist 15,4 % der
   Logohoehe, also braucht es 52 px Logo fuer 8,0 px Schrift. Darum FEST
   52 px auf jeder Breite — ein clamp wuerde MEDIADESIGN auf dem Handy auf
   6,5 px druecken und damit unlesbar machen. Die schmale Leiste waechst
   dafuer von 64 auf 72 px (--head-h), die breite bleibt 76 px. */
.brand{ display:flex; align-items:center; color:var(--paper); text-decoration:none; }
.brand-logo{ display:block; height:3.25rem; width:auto; fill:currentColor; }
.brand-dot{ color:var(--mint-hell); }

.head-side{ display:none; margin-left:auto; align-items:center; gap:1rem; }
.head-tel{
  font:600 0.9rem/1 var(--fb); letter-spacing:0.015em;
  color:oklch(0.975 0.006 190 / 0.85); text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.head-tel:hover{ color:var(--mint-hell); }
.btn-s{ padding:0.65rem 1rem; font-size:0.9rem; border-radius:11px; }

.head-tel-m{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:12px;
  color:var(--mint-hell); border:1px solid oklch(0.975 0.006 190 / 0.18);
}
.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:2.6rem; height:2.6rem; border-radius:12px;
  background:transparent; border:1px solid oklch(0.975 0.006 190 / 0.18);
  cursor:pointer; align-items:center;
}
.nav-toggle i{
  width:1.15rem; height:2px; background:var(--paper); border-radius:1px;
  transition:transform 0.3s var(--eq);
}
.nav-open .nav-toggle i:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-open .nav-toggle i:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* Abdunkelnder Grund hinter dem offenen Handy-Menü. Die Aufklappfläche ist
   absichtlich KEIN Vollbild-Overlay, sie endet nach etwa 484 px — darunter
   stand die Seite bisher in voller Helligkeit weiter, obwohl main dank inert
   längst nicht mehr auf den Finger reagiert. Der Grund liegt unter der
   Kopfleiste (z-index 90 gegen 100), also bleiben Logo, Telefon und der
   Schließen-Knopf hell. Keine Blende, keine Bewegung: unter
   prefers-reduced-motion ändert sich damit nichts. */
.nav-scrim{ display:none; }
@media (max-width:1139.98px){
  .nav-open .nav-scrim{
    display:block; position:fixed; inset:0; z-index:90;
    background:oklch(0.180 0.030 198 / 0.74);
    cursor:pointer;
  }
}

/* --- Mobil: Panel unter der Leiste (KEIN Vollbild-Overlay) --- */
.site-nav{
  position:absolute; left:0; right:0; top:100%;
  background:var(--tinte-deep);
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.1);
  box-shadow:0 30px 60px oklch(0.1 0.02 198 / 0.5);
  max-height:calc(100dvh - var(--head-h));
  overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden; opacity:0; transform:translateY(-10px);
  transition:opacity 0.3s var(--eq), transform 0.3s var(--eq), visibility 0s linear 0.3s;
}
.nav-open .site-nav{
  visibility:visible; opacity:1; transform:none;
  transition:opacity 0.3s var(--eq), transform 0.3s var(--eq);
}
.nav-actions{
  position:sticky; top:0; z-index:2;
  display:flex; gap:0.75rem; flex-wrap:wrap;
  padding:1rem var(--pad-x);
  background:var(--tinte-deep);
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.1);
}
.nav-actions .btn{ flex:1 1 12rem; justify-content:center; }

.nav-list{ list-style:none; padding:0.75rem var(--pad-x) 1.5rem; }
.nav-list > li{ border-bottom:1px solid oklch(0.975 0.006 190 / 0.08); }
.nav-list > li:last-child{ border-bottom:0; }

.nav-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  width:100%; background:none; border:0; cursor:pointer;
  font:600 1.05rem/1 var(--fb); letter-spacing:0.01em; color:var(--paper);
  padding:1.05rem 0.25rem; text-align:left;
}
.nav-link{
  display:block; font:600 1.05rem/1 var(--fb); letter-spacing:0.01em;
  color:var(--paper); text-decoration:none; padding:1.05rem 0.25rem;
}
.nav-link:hover{ color:var(--mint-hell); }
.nav-trigger.is-current, .nav-link[aria-current="page"]{ color:var(--mint-hell); }
/* Wo man gerade steht, markiert das Quadrat — nicht die Farbe allein. Farbe
   als einziges Unterscheidungsmerkmal traegt nicht (WCAG 1.4.1), und ein
   Marker ist ohnehin genau die Aufgabe des Quadrats.
   Am Handy steht es im linken Rand der Liste, am Schirm mittig unter dem
   Wort. Beides currentColor, also Mint-hell auf Tiefpetrol = 10,05:1. */
.nav-trigger, .nav-link{ position:relative; }
.nav-trigger.is-current::after,
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; width:6px; height:6px;
  background:currentColor;
  left:-0.5rem; top:50%; margin-top:-3px;
}
.chev{ flex:none; transition:transform 0.3s var(--eq); }
.dd.open > .nav-trigger .chev{ transform:rotate(180deg); }
.dd.open > .nav-trigger{ color:var(--mint-hell); }

/* --- Die Fläche selbst --------------------------------------------------- */
.nav-panel{ display:none; padding:0 0.25rem 0.4rem; }
.dd.open > .nav-panel{ display:block; }
.panel-kick{ display:none; }
.panel-rule{ display:none; }

.panel-cols{ display:block; }
.panel-col + .panel-col{ margin-top:1.15rem; }

/* Mint-Kleinlabel: 11 px, Versalien, Laufweite 0.09em. Gesperrte Versalien in
   einer Grotesk kleben ohne Laufweite; darunter die Haarlinie über die
   Spaltenbreite. Keine Schreibmaschinenschrift — die Rangordnung entsteht
   allein über Größe, Versalien und Laufweite. */
.panel-group{
  font:600 0.6875rem/1.2 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
  padding-bottom:0.55rem; margin-bottom:0.5rem;
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.13);
}

.panel-links{ list-style:none; display:grid; gap:0.1rem; }

.pl{
  position:relative;
  display:grid; grid-template-columns:12px minmax(0,1fr) auto;
  align-items:start; column-gap:8px;
  padding:0.45rem 0.4rem 0.5rem 0.75rem;
  border-radius:10px; text-decoration:none;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.18s var(--eq), transform 0.18s var(--eq),
             background-color 0.18s var(--eq), color 0.18s var(--eq);
}
.dd.open > .nav-panel .pl{
  opacity:1; transform:none;
  transition-delay:calc(var(--i, 0) * 20ms), calc(var(--i, 0) * 20ms), 0s, 0s;
}
.pl:hover{ background:oklch(0.975 0.006 190 / 0.055); }
.pl:focus-visible{ background:oklch(0.975 0.006 190 / 0.055); }

/* Zeichen: 12 px, Mint, steht still. Kommt aus EINEM Sprite — Einzeldateien
   mit loading=lazy flackern beim ersten Öffnen einzeln nach. */
.pl-i{
  width:12px; height:12px; flex:none;
  margin-top:0.22rem;
  color:var(--mint-hell); opacity:0.82;
}
.pl-body{ display:block; min-width:0; }
.pl-t{
  display:block;
  font:600 1rem/1.25 var(--fb); letter-spacing:0.005em;
  color:oklch(0.975 0.006 190 / 0.86);
  transition:color 0.18s var(--eq);
}
/* Nutzenzeile: Instrument Sans, 13 px, Papierweiß bei 55 Prozent. */
.pl-d{
  display:block; margin-top:0.14rem;
  font:400 0.8125rem/1.35 var(--fb); letter-spacing:0;
  color:oklch(0.975 0.006 190 / 0.55);
}
.pl:hover .pl-t, .pl:focus-visible .pl-t{ color:var(--paper); }

/* Überfahren: der Mint-Pfeil schiebt sich um 6 px von rechts herein. */
.pl .arr{
  align-self:center; color:var(--mint-hell); font-size:0.9rem; line-height:1;
  opacity:0; transform:translateX(6px);
  transition:opacity 0.18s var(--eq), transform 0.18s var(--eq);
}
.pl:hover .arr, .pl:focus-visible .arr{ opacity:1; transform:none; }

/* Aktiv: 2 px Mint-Kante links plus höhere Textdeckkraft. */
.pl[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:0.45rem; bottom:0.45rem;
  width:2px; border-radius:1px; background:var(--mint-hell);
}
.pl[aria-current="page"] .pl-t{ color:var(--paper); }
.pl[aria-current="page"] .pl-d{ color:oklch(0.975 0.006 190 / 0.68); }
.pl[aria-current="page"] .pl-i{ opacity:1; }

/* Bild der Fläche. Mobil entfällt es: dort zählt jede Zeile Höhe. */
.panel-fig{ display:none; }

/* Fuß: Ort links, Telefon und E-Mail rechts. Beantwortet im Menü die beiden
   Fragen, die regionale Kunden zuerst haben. */
.panel-foot{
  margin-top:0.9rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.1);
  background:oklch(0.975 0.006 190 / 0.022);
}
.panel-foot-in{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem;
  padding:0.85rem 0.35rem;
  font:500 0.8125rem/1.4 var(--fb);
  color:oklch(0.975 0.006 190 / 0.6);
}
.pf-loc{ display:inline-flex; align-items:center; gap:0.45rem; }
.pf-reach{ display:flex; flex-direction:column; align-items:flex-start; gap:0.4rem; }
.pf-reach a{
  display:inline-flex; align-items:center; gap:0.45rem;
  color:inherit; text-decoration:none;
  transition:color 0.18s var(--eq);
}
.pf-reach a:hover{ color:var(--mint-hell); }
.pf-i{ width:12px; height:12px; flex:none; color:var(--mint-hell); opacity:0.85; }

/* Ohne JS bleibt die Navigation erreichbar — und zwar vollständig: mobil sind
   die Flächen dann aufgeklappt statt unerreichbar. */
.no-js .site-nav{ position:static; visibility:visible; opacity:1; transform:none; max-height:none; }
.no-js .nav-panel{ display:block; }
.no-js .pl{ opacity:1; transform:none; }

/* Unterhalb der Desktop-Schwelle reicht position:static allein NICHT. Die
   .site-nav ist dort ein Flex-Kind der .head-bar, und die ist auf --head-h
   (4 rem) festgenagelt und zentriert ihre Kinder. Gemessen bei 500 px ohne
   Skript: das Menü wurde 2002 px hoch in 64 px zentriert und begann bei
   y = −965 — die obere Hälfte lag außerhalb des Dokuments und war nicht
   erreichbar, der Rest deckte Foto und h1 zu. Deshalb hier: die Leiste darf
   umbrechen, das Menü nimmt eine eigene Zeile darunter, die Sticky-Haftung
   fällt (eine 2000 px hohe klebende Leiste wäre die nächste Falle), und der
   Umschaltknopf verschwindet, weil er ohne Skript ohnehin nichts tut.
   Ab 1140 px greift die Desktop-Regel, dort war und bleibt alles richtig. */
@media (max-width:1139.98px){
  .no-js .site-head{ position:static; }
  .no-js .head-bar{ height:auto; flex-wrap:wrap; align-items:center; }
  .no-js .site-nav{
    flex-basis:100%; order:99;
    box-shadow:none; border-bottom:0; overflow:visible;
    margin-inline:calc(-1 * clamp(1.1rem, 2.5vw, 2.25rem));
  }
  .no-js .nav-toggle{ display:none; }
}

/* --- Desktop: Leistungen dauerhaft sichtbar, Fläche klappt unter die Leiste --- */
@media (min-width:1140px){
  .head-side{ display:flex; }
  .head-tel-m, .nav-toggle{ display:none; }

  .site-nav{
    position:static; background:none; border:0; box-shadow:none;
    max-height:none; overflow:visible;
    visibility:visible; opacity:1; transform:none; transition:none;
  }
  .nav-actions{ display:none; }
  .nav-list{ display:flex; align-items:center; gap:0.1rem; padding:0; }
  .nav-list > li{ border:0; }
  .dd{ position:static; }

  .nav-trigger, .nav-link{
    font-size:0.95rem; padding:0.6rem 0.65rem; width:auto; border-radius:10px;
    color:oklch(0.975 0.006 190 / 0.88);
    transition:color 0.18s var(--eq), background-color 0.18s var(--eq);
  }
  .nav-trigger:hover, .nav-link:hover{ color:var(--mint-hell); background:oklch(0.975 0.006 190 / 0.05); }
  /* In der waagerechten Leiste sitzt der Marker unter dem Wort. */
  .nav-trigger.is-current::after,
  .nav-link[aria-current="page"]::after{
    left:50%; margin-left:-3px; top:auto; margin-top:0; bottom:0.25rem;
  }
  /* Der Aufklapppunkt traegt rechts noch den Pfeil (11 px) samt Abstand
     (0,6rem). Ohne diese Verschiebung stuende das Quadrat unter der Mitte von
     Wort PLUS Pfeil und damit sichtbar zu weit rechts. */
  .nav-trigger.is-current::after{
    margin-left:calc(-3px - (11px + 0.6rem) / 2);
  }

  .nav-panel{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:var(--tinte-deep);
    border-bottom:1px solid oklch(0.975 0.006 190 / 0.1);
    box-shadow:0 34px 70px oklch(0.1 0.02 198 / 0.45);
    padding:0; margin:0;
    visibility:hidden; opacity:0; transform:translateY(6px);
    transition:opacity 0.18s var(--eq), transform 0.18s var(--eq), visibility 0s linear 0.18s;
  }
  /* 12 px unsichtbare Brückenfläche zwischen Leiste und Fläche. Ohne sie
     klappt das Menü zu, sobald die Maus die Lücke kreuzt. */
  .nav-panel::before{
    content:""; position:absolute; left:0; right:0; bottom:100%; height:12px;
  }
  .dd.open > .nav-panel{
    visibility:visible; opacity:1; transform:none;
    transition:opacity 0.18s var(--eq), transform 0.18s var(--eq);
  }

  .panel-inner{
    max-width:var(--wrap); margin-inline:auto;
    padding:2.1rem var(--pad-x) 2.3rem;
    display:grid; grid-template-columns:9rem minmax(0,1fr) 16.5rem; gap:1.9rem;
    align-items:start;
  }
  .panel-lead{ display:block; }
  .panel-kick{
    display:block; font-family:var(--fd); font-weight:700;
    font-size:1.2rem; letter-spacing:-0.012em; color:var(--paper);
  }
  .panel-kick small{
    display:block; margin-top:0.4rem;
    font:600 var(--fs-kick)/1.3 var(--fb);
    letter-spacing:0.09em; text-transform:uppercase; color:var(--mint-hell);
  }
  /* Der Winkel eroeffnet die Flaeche. Er stand hier vorher als 36-px-Strich;
     die Geste ist dieselbe, nur traegt sie jetzt die Form der Marke — und der
     Winkel ist genau das Zeichen fuer "hier faengt etwas an".
     Mint-hell #6AD7C3 auf der Flaeche Tinte-deep rgb(0,40,41) = 9,08:1.

     Er steht seit dem 04.09.2026 VOR dem Satzblock, nicht dahinter. Vorher
     schloss er die Spalte ab und fasste damit nichts ein — unter ihm folgte
     nichts mehr. Jetzt ist es dieselbe Beziehung wie im Logo (offene Ecke um
     den Satzblock) und am Zitat der Projektseiten. */
  .panel-rule{
    display:block; width:1.5rem; aspect-ratio:1; height:auto;
    margin:0.15rem 0 0.7rem; background:var(--mint-hell);
    clip-path:var(--ci-winkel);
  }

  .panel-cols{ display:grid; gap:1.9rem; }
  .panel-cols.is-grouped{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .panel-col{ max-width:24rem; }
  .panel-col + .panel-col{ margin-top:0; }
  .panel-links{ gap:0.1rem; }

  /* Rechte Hälfte: ein echtes Foto statt einer dritten Linkspalte.
     content-visibility hält das Bild aus der Ladezeit heraus, bis die Fläche
     zum ersten Mal geöffnet wird; allow-discrete lässt es beim Schließen erst
     nach der Blende verschwinden statt mitten hinein. */
  .panel-fig{ display:block; }
  .panel-shot{
    display:block; aspect-ratio:3 / 2; overflow:hidden;
    border-radius:14px;
    border:1px solid oklch(0.975 0.006 190 / 0.1);
    background:oklch(0.975 0.006 190 / 0.04);
    content-visibility:hidden;
    transition:content-visibility 0.18s;
    transition-behavior:allow-discrete;
  }
  .dd.open > .nav-panel .panel-shot{ content-visibility:visible; }
  .panel-shot-img{ width:100%; height:100%; object-fit:cover; }
  .panel-shot picture{ display:block; height:100%; }
  .panel-cap{
    margin-top:0.7rem;
    font:400 0.8125rem/1.4 var(--fb);
    color:oklch(0.975 0.006 190 / 0.55);
  }

  .panel-foot{ margin-top:0; }
  .panel-foot-in{
    max-width:var(--wrap); margin-inline:auto;
    padding:0.85rem var(--pad-x);
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:0.5rem 1.5rem;
  }
  .pf-reach{ flex-direction:row; align-items:center; gap:1.5rem; }

  /* Ohne JS: Fläche öffnet per Hover/Fokus */
  .no-js .nav-panel{ display:block; }
  .no-js .dd:hover > .nav-panel,
  .no-js .dd:focus-within > .nav-panel{ visibility:visible; opacity:1; transform:none; }
  .no-js .dd:hover > .nav-panel .panel-shot,
  .no-js .dd:focus-within > .nav-panel .panel-shot{ content-visibility:visible; }
}

/* Weniger Bewegung: Startzustände werden auf die Endzustände gesetzt, nicht
   bloß die Animation entfernt — sonst bliebe eine Zeile unsichtbar hängen. */
@media (prefers-reduced-motion: reduce){
  .site-nav, .nav-panel, .chev, .nav-toggle i, .nav-trigger, .nav-link,
  .panel-shot, .pl, .pl .arr, .pl .pl-t, .pf-reach a{ transition:none; }
  .nav-panel .pl{ opacity:1; transform:none; }
  .nav-panel .pl .arr{ opacity:1; transform:none; }
}

/* ==========================================================================
   4 · Held — Vollbild mit Textinsel (Entwurf B, von Armin gewählt am 03.09.2026)

   Das Foto füllt die ganze Bühne, der Text sitzt als klar begrenzte Insel
   darauf. Getragen wird er nicht von einem Kasten, sondern von einer eigenen
   Verlaufsebene über dem Bild. Für einen Fotografen ist das der entscheidende
   Punkt: Das Foto darf nicht flau gemacht werden, damit Schrift darauf lesbar
   wird — deshalb ist die Abdunklung eine eigene Ebene im DOM und niemals ein
   `filter` auf dem Bild.

   Kein automatischer Bildwechsel. Die Messung der University of Notre Dame:
   rund ein Prozent aller Besucher klickt überhaupt in ein Karussell, und 84
   Prozent dieser Klicks landen auf der ersten Bahn. Dazu verlangt WCAG 2.2.2,
   dass alles, was länger als drei Sekunden selbsttätig läuft, anhaltbar sein
   muss. Bahn 1 trägt die Botschaft allein; die übrigen sind Beleg und werden
   nur auf Wunsch aufgerufen. Damit entfällt auch die Pausetaste.

   Bedient wird über die Kundennamen, nicht über Punkte oder Ziffern — sie sind
   zugleich der Beleg: fünf echte Kunden, namentlich.
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  --hero-dur:0.7s; --hero-takt:0.08s;
  --hero-veil:0.215 0.037 198;   /* Tiefpetrol als oklch-Tripel */
  background:var(--tinte-deeper);
}

/* --- Die Bahnen: alle übereinander in derselben Fläche -------------------- */
.hero-stage{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.03);
  transition:opacity 0.9s var(--eo), transform 0.9s var(--eo);
}
.hero-slide.is-on{ opacity:1; transform:scale(1); }
.hero-slide picture{ display:block; width:100%; height:100%; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, 60% 45%);
  background:var(--tinte-deep);
}

/* --- Abdunklung: eigene Ebene, nie ein filter auf dem Foto ----------------
   Die Stopps liegen bewusst weit rechts: Die Textinsel endet bei rund 46
   Prozent der Breite, und dort muss der Grund noch tragen. Ein Verlauf, der
   bei 46 Prozent schon auf die Hälfte abgefallen ist, lässt die Unterzeile
   auf dem Motiv schwimmen. */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  transition:opacity 0.9s var(--eo);
  background:linear-gradient(90deg,
    oklch(var(--hero-veil) / 0.90) 0%,
    oklch(var(--hero-veil) / 0.87) 30%,
    oklch(var(--hero-veil) / 0.74) 46%,
    oklch(var(--hero-veil) / 0.42) 62%,
    oklch(var(--hero-veil) / 0.20) 80%,
    oklch(var(--hero-veil) / 0.12) 100%);
}
/* Sehr helle Motive brauchen mehr. Der Abfall wandert weiter nach rechts,
   statt die Deckkraft der ganzen Ebene zu erhöhen — sonst verliert auch die
   rechte Bildhälfte ihre Tiefe. Geschaltet über das Feld „helles Motiv“. */
.hero.is-hell .hero-veil{
  background:linear-gradient(90deg,
    oklch(var(--hero-veil) / 0.93) 0%,
    oklch(var(--hero-veil) / 0.91) 34%,
    oklch(var(--hero-veil) / 0.82) 50%,
    oklch(var(--hero-veil) / 0.52) 66%,
    oklch(var(--hero-veil) / 0.26) 84%,
    oklch(var(--hero-veil) / 0.16) 100%);
}
/* Zweiter, sehr flacher Verlauf von unten — er trägt Belegzeile und
   Bedienung, ohne die obere Bildhälfte anzufassen. */
.hero-veil2{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    oklch(var(--hero-veil) / 0.55) 0%,
    oklch(var(--hero-veil) / 0.22) 20%,
    oklch(var(--hero-veil) / 0) 45%);
}

/* --- Die Insel ------------------------------------------------------------ */
.hero-grid{
  position:relative; z-index:2;
  min-height:calc(94dvh - var(--head-h));
  /* minmax(0,1fr) ist hier nicht Kosmetik: Ohne die Spaltenangabe legt das
     Raster EINE Spalte in max-content an. Die Textinsel wuchs damit auf 722 px
     in einem 375-px-Fenster und schob die ganze Sektion nach rechts aus dem
     Bild — auf dem Handy lief die Unterzeile aus dem Schirm. */
  display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:1fr auto;
  row-gap:clamp(1.5rem, 4vh, 2.6rem);
  padding-block:clamp(2.25rem, 6vh, 3.75rem) clamp(1.5rem, 4vh, 2.5rem);
}
.hero-copy{
  /* minmax(0,1fr): Sonst waechst die eine auto-Spalte auf die max-content-
     Breite der laengsten Zeile — auf dem Handy 722 px in einem 390-px-Schirm.
     justify-items:start haelt die Elemente trotzdem an ihrer eigenen Breite. */
  display:grid; grid-template-columns:minmax(0, 1fr);
  gap:1.5rem; justify-items:start; align-content:center;
  min-width:0; max-width:34rem;
}
.hero-kick{
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
}
.hero h1{ color:var(--paper); max-width:9.5ch; }
.wm{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:0.14em; margin-bottom:-0.14em;
}
.w{ display:inline-block; }
.w-mark{ position:relative; color:var(--mint-hell); }
.w-mark::after{
  content:""; position:absolute; left:0.02em; right:0.02em; bottom:0.015em;
  height:0.075em; border-radius:2px;
  background:var(--mint-tief);
  transform-origin:left center;
}
.hero-sub{
  max-width:32rem; font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  color:oklch(0.975 0.006 190 / 0.88);
  text-shadow:0 1px 16px oklch(var(--hero-veil) / 0.6);
}
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.5rem; margin-top:0.35rem; }
/* Ein Hauptweg, kein zweiter gleichgewichtiger Knopf — der zweite Weg ist ein
   Textlink. Die Recherche ist an dieser Stelle eindeutig. */
.hero-ruf{ display:flex; align-items:baseline; gap:0.5rem; }
.hero-ruf-wort{
  font:600 var(--fs-kick)/1 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
}
.hero-tel{
  font:650 1.02rem/1 var(--fd); color:var(--paper); text-decoration:none;
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.35);
  padding-bottom:0.15rem; font-variant-numeric:tabular-nums;
  transition:color var(--dur-base) var(--eo), border-color var(--dur-base) var(--eo);
}
.hero-tel:hover{ color:var(--mint-hell); border-bottom-color:var(--mint-hell); }

/* --- Fuß: Beleg links, Bedienung rechts ----------------------------------- */
.hero-foot{
  /* Gleiche Begrenzung wie bei .hero-copy: sonst zieht die Belegzeile mit
     ihren 44rem die eine auto-Spalte auf und laeuft auf dem Handy raus. */
  display:grid; grid-template-columns:minmax(0, 1fr);
  gap:1.5rem; align-items:end; min-width:0;
}
.hero-proof{
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
  padding-top:1.3rem;
  color:oklch(0.975 0.006 190 / 0.82);
  font-size:var(--fs-s);
  max-width:44rem;
  text-shadow:0 1px 14px oklch(var(--hero-veil) / 0.6);
}
.hero-proof strong{ color:var(--mint-hell); font-weight:700; }

/* Die fünf Kundennamen. Sie bekommen einen eigenen, schmalen Grund — keinen
   Kasten, sonst wäre es eine Karte auf dem Bild. */
.hero-pick{ position:relative; padding:1.1rem 0 0.2rem 1.6rem; margin-left:-1.6rem; }
.hero-pick::before{
  content:""; position:absolute; inset:-0.7rem -100vw -0.8rem 0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(280deg,
    oklch(var(--hero-veil) / 0.74) 0%,
    oklch(var(--hero-veil) / 0.52) 55%,
    oklch(var(--hero-veil) / 0) 100%);
}
.hero-cap{
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:var(--ls-kick); text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.72);
  min-height:1.4em; margin-bottom:0.55rem;
}
.hero-list{ list-style:none; display:grid; gap:0.1rem; margin:0; padding:0; }
.hero-b{
  display:flex; align-items:center; gap:0.65rem; width:100%;
  background:none; border:0; padding:0.26rem 0;
  font:600 var(--fs-s)/1.35 var(--fd);
  color:oklch(0.975 0.006 190 / 0.72);
  cursor:pointer; text-align:left;
  transition:color var(--dur-base) var(--eo);
}
.hero-b:hover{ color:oklch(0.975 0.006 190 / 0.95); }
.hero-b:disabled{ cursor:default; }
.hero-b.is-on{ color:var(--mint-hell); }
.hero-b:focus-visible{ outline:2px solid var(--mint-hell); outline-offset:4px; border-radius:var(--radius-s); }
.hero-mk{
  flex:none; width:2px; height:0.95em; border-radius:1px;
  background:var(--mint); opacity:0;
  transition:opacity var(--dur-base) var(--eo);
}
.hero-b.is-on .hero-mk{ opacity:1; }

@media (min-width:821px){
  .hero-foot{ grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(2rem,5vw,4rem); }
  .hero-pick{ justify-self:end; text-align:right; }
  .hero-cap{ text-align:right; }
  .hero-b{ justify-content:flex-end; flex-direction:row-reverse; }
  .hero-pick::before{ inset:-0.7rem -100vw -0.8rem -1.6rem; }
}

/* --- Handy: Bild bleibt groß, Insel sitzt im unteren Drittel darauf -------- */
@media (max-width:820px){
  .hero{ --hero-dur:0.3s; --hero-takt:0.05s; }
  .hero-stage{ inset:0 0 auto 0; height:66%; }
  /* Der Verlauf dreht auf senkrecht — sonst stünde der Text auf schmalen
     Schirmen im Hellen. */
  .hero-veil, .hero.is-hell .hero-veil{
    background:linear-gradient(180deg,
      oklch(var(--hero-veil) / 0.30) 0%,
      oklch(var(--hero-veil) / 0.20) 26%,
      oklch(var(--hero-veil) / 0.62) 58%,
      oklch(var(--hero-veil) / 0.94) 88%,
      oklch(var(--hero-veil) / 1) 100%);
  }
  .hero-veil2{ display:none; }
  .hero-grid{ grid-template-rows:auto auto; align-content:end;
              padding-block:clamp(13rem, 40vh, 20rem) 1.5rem; row-gap:1.5rem; }
  .hero-copy{ max-width:none; gap:1.2rem; }
  .hero h1{ max-width:12ch; }
  .hero-cta .btn-amber{ width:100%; justify-content:center; }
  /* Aus der Namensspalte wird eine waagerecht scrollbare Zeile. */
  .hero-pick{ padding-left:0; margin-left:0; }
  .hero-pick::before{ display:none; }
  .hero-list{ grid-auto-flow:column; grid-auto-columns:max-content;
              gap:1.4rem; overflow-x:auto; padding-bottom:0.4rem;
              scrollbar-width:none; }
  .hero-list::-webkit-scrollbar{ display:none; }
  .hero-b{ white-space:nowrap; }
}

/* --- Einlauf: Zeilenmasken, Unterstreichung, Ken-Burns genau einmal --------
   Das gesamte Bewegungsbudget des Einstiegs geht in diese eine Sequenz. Der
   Ken-Burns läuft 0,9 Sekunden und steht dann still; ein dauerhaft laufender
   Zoom ist das Merkmal, an dem billige Seiten erkannt werden. */
@media (prefers-reduced-motion: no-preference){
  .js .hero .w{ transform:translateY(118%); animation:wordUp 0.8s var(--eq) forwards; animation-delay:var(--d, 0s); }
  @keyframes wordUp{ to{ transform:none; } }
  .js .hero .w-mark::after{ transform:scaleX(0); animation:markIn 0.6s var(--eq) forwards 1.05s; }
  @keyframes markIn{ to{ transform:scaleX(1); } }
  .js .hero .hero-slide.hero-s1 img{ animation:kenburns 0.9s var(--eo) both; }
  @keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1); } }
  .js .hero-copy > *, .js .hero-foot > *{
    opacity:0; transform:translateY(22px);
    animation:fadeUp 0.9s var(--eq) forwards; animation-delay:var(--d, 0s);
  }
  @keyframes fadeUp{ to{ opacity:1; transform:none; } }
  /* Eine einzige Andeutung 1,2 Sekunden nach dem Laden, dann steht die Marke
     still. Kein Autoplay — nur der Hinweis, dass es mehr als ein Bild gibt. */
  .hero-mk.hero-tip{ animation:heroTip 0.4s var(--et); }
  @keyframes heroTip{ 0%{ transform:translateY(0); } 50%{ transform:translateY(6px); } 100%{ transform:translateY(0); } }
}
/* Startzustände werden zu Endzuständen — sonst hängt eine Zeile unsichtbar. */
@media (prefers-reduced-motion: reduce){
  .js .hero .w{ transform:none !important; animation:none !important; }
  .js .hero .w-mark::after{ transform:scaleX(1) !important; animation:none !important; }
  .js .hero-copy > *, .js .hero-foot > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero-slide{ transition:none !important; }
}

/* ==========================================================================
   5 · Scroll-Reveals (IntersectionObserver, Stagger via --d)
   ========================================================================== */
.js .rv{
  opacity:0; transform:translateY(26px);
  transition:opacity 0.75s var(--eq), transform 0.75s var(--eq);
  transition-delay:var(--d, 0s);
}
.js .rv.in{ opacity:1; transform:none; }

/* Bild-Reveal-Maske: Vorhang (transform-only) faehrt nach unten weg,
   waehrend das Bild aus 1.06 in seinen Rahmen einrastet.
   --img-s wird auf dem CONTAINER gesetzt, damit Reveal- und Hover-Zustand
   sich denselben transform teilen koennen, ohne sich zu ueberschreiben. */
.js .rv-img{
  position:relative; overflow:hidden;
  --img-s:1.06;
  --mask-tone:var(--tinte-deep);
}
.js .rv-img.in{ --img-s:1; }
.js .rv-img img{
  opacity:0; transform:scale(var(--img-s));
  transition:opacity 0.8s var(--eq), transform 1.15s var(--eq);
  transition-delay:var(--d, 0s);
}
.js .rv-img.in img{ opacity:1; }
.js .rv-img::after{
  content:""; position:absolute; inset:-1px; z-index:2; pointer-events:none;
  background:var(--mask-tone);
  transform-origin:50% 100%; transform:scaleY(1);
  transition:transform 1s var(--eq);
  transition-delay:var(--d, 0s);
}
.js .rv-img.in::after{ transform:scaleY(0); }
.screen .rv-img{ --mask-tone:var(--paper); }

/* Licht-Sweep: einmaliger Verlaufs-Schimmer ueber eine helle Panelflaeche,
   sobald sie ins Bild kommt. Rein transform/opacity, ~900 ms, laeuft genau einmal. */
.js .sw{ position:relative; overflow:hidden; }
.js .sw::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top:-8%; bottom:-8%; left:0; width:76%;
  opacity:0; transform:translate3d(-118%, 0, 0);
  /* Streiflicht: erst eine Spur Schatten, dann der helle Kern, dann ein
     kuehler Nachklang. So liest sich der Sweep auf Paper wie auf den Karten. */
  /* Null-Alpha-Stops in der Nachbarfarbe statt `transparent` — sonst
     interpoliert der Verlauf ueber transparentes Schwarz und zieht Raender. */
  background:linear-gradient(100deg,
    oklch(0.300 0.050 196 / 0) 0%,
    oklch(0.300 0.050 196 / 0.04) 30%,
    oklch(0.995 0.004 190 / 0.40) 47%,
    oklch(0.900 0.020 68 / 0.26) 57%,
    oklch(0.700 0.130 182 / 0.07) 74%,
    oklch(0.700 0.130 182 / 0) 100%);
}
.js .sw.in::after{ animation:panelSweep 0.9s var(--et) 0.1s 1 both; }
@keyframes panelSweep{
  0%{ opacity:0; transform:translate3d(-118%, 0, 0); }
  14%{ opacity:1; }
  82%{ opacity:1; }
  100%{ opacity:0; transform:translate3d(215%, 0, 0); }
}

/* Zahlen-Ticker: Breite wird waehrend des Zaehlens per JS fixiert,
   damit nichts im Satz springt. */
.tick{ font-variant-numeric:tabular-nums; }
.tick.counting{ display:inline-block; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .js .rv, .js .rv-img img, .js .hero .w, .js .hero-copy > *, .js .hero-media, .js .hero-proof{
    opacity:1 !important; transform:none !important;
  }
  .js .hero .w-mark::after{ transform:scaleX(1) !important; }
  /* Maske und Sweep komplett aus dem Weg — Inhalte bleiben sichtbar. */
  .js .rv-img::after, .js .sw::after{ display:none !important; }
  .js .rv-img{ --img-s:1 !important; }
}

/* ==========================================================================
   6 · Die Lage — vier Sätze in der Sprache des Besuchers (bmd_system)

   Löst am 03.09.2026 „Vier Stufen. Ein System." ab. Der alte Block nannte
   Fotografie, Website, Sichtbarkeit, Nachweis — und der Leistungsblock einen
   Bildschirm darunter Webdesign, SEO, Google Ads, Fotografie. Zweimal
   dasselbe. Hier steht jetzt ein Zitat mit Antwort statt eines Namens mit
   Erklärung, und die Fläche ist hell statt dunkel.

   Geometrie: dieselbe Licht-Bühne wie .screen (Radius, seitlicher Einzug),
   aber ohne das stage-Feld — der Block trägt keines, und er soll auch keines
   bekommen: Die Bühnen-Kette der Startseite hängt an den Blöcken darunter.
   Deshalb bringt der Abschnitt seine helle Fläche selbst mit.
   ========================================================================== */
.lage{
  background:var(--paper); color:var(--tinte);
  border-radius:clamp(20px, 3vw, 40px);
  margin-inline:clamp(0.5rem, 1.6vw, 1.4rem);
  padding-block:var(--sec-y);
  --focus:var(--mint-tief);
}
/* Der Leistungsblock öffnet direkt darunter seine eigene Bühne. Ohne diesen
   Abstand stossen zwei Papierflächen stumpf aneinander — .screen + .screen
   greift nicht, weil die Lage eine <section> ist und kein Bühnen-<div>. */
.lage + .screen{ margin-top:clamp(0.5rem, 1.6vw, 1.4rem); }
.lage .kick{ color:var(--mint-tief); }

/* Zwei ungleiche Spalten: links der Kopf, rechts die Lagen. minmax(0,…)
   überall — 1fr ist minmax(auto,1fr) und lässt die Spalte auf Inhaltsbreite
   wachsen, sobald ein langes Zitat nicht umbrechen mag. */
.lage-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:start;
}
/* Der Kopf bleibt stehen, während die vier Lagen an ihm vorbeilaufen. Der
   Abstand nach oben hält die eigene Kopfleiste frei, die selbst sticky ist. */
.lage-kopf{ position:sticky; top:calc(var(--head-h) + clamp(1rem, 4vh, 2.25rem)); }
.lage-h2{ font-size:var(--fs-h2); color:var(--tinte); margin-top:1.1rem; max-width:13ch; }
.lage-lead{
  margin-top:1.2rem; max-width:34ch;
  color:color-mix(in oklab, var(--tinte) 80%, transparent);
}
.lage-schluss{
  margin-top:1.9rem; padding-top:1.5rem; max-width:27ch;
  border-top:1px solid color-mix(in oklab, var(--tinte) 18%, transparent);
}
.lage-schluss p{
  font-family:var(--fd); font-weight:600; font-size:1.0625rem; line-height:1.45;
  color:var(--petrol-deep);
}

.lage-liste{ list-style:none; margin:0; padding:0; }
.lage-fall{
  position:relative;
  border-top:1px solid color-mix(in oklab, var(--tinte) 15%, transparent);
}
.lage-fall:last-child{ border-bottom:1px solid color-mix(in oklab, var(--tinte) 15%, transparent); }
/* Beim Überfahren und bei Tastaturfokus wächst die Trennlinie von links nach
   rechts in Mint durch. Bewusst waagerecht statt der senkrechten Kante des
   Zeilenwerks darunter — dieselbe Geste zweimal wäre eine Wiederholung. */
.lage-fall::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--mint-tief); transform:scaleX(0); transform-origin:left center;
  transition:transform 0.55s var(--eq); pointer-events:none; z-index:3;
}
.lage-fall:hover::before, .lage-fall:focus-within::before{ transform:scaleX(1); }
.lage-a{
  position:relative; z-index:2; display:block; text-decoration:none; color:inherit;
  padding-block:clamp(1.5rem, 3vw, 2.3rem);
  transition:padding-left 0.5s var(--eq);
}
.lage-fall:hover .lage-a, .lage-fall:focus-within .lage-a{ padding-left:0.9rem; }
.lage-a:focus-visible{
  outline:2px solid var(--mint-tief); outline-offset:4px; border-radius:4px;
}
/* Das Zeichen benennt das Fach, damit das Zitat es nicht aussprechen muss.
   Es steht immer da — anders als das Motiv, das ein Zusatz bleibt. */
.lage-ico{
  width:24px; height:24px; display:block; margin-bottom:0.95rem;
  color:var(--mint-tief); fill:none; stroke:currentColor;
}
/* Das öffnende Anführungszeichen hängt aus dem Satzspiegel heraus, damit die
   Zeile optisch bündig beginnt. */
.lage-satz{
  font-family:var(--fd); font-weight:700; letter-spacing:-0.02em; line-height:1.12;
  font-size:clamp(1.45rem, 2.9vw, 2.05rem); color:var(--tinte);
  text-indent:-0.42em; padding-right:2.5rem;
}
.lage-antwort{
  margin-top:0.85rem; font-size:var(--fs-s); line-height:1.62; max-width:52ch;
  color:color-mix(in oklab, var(--tinte) 78%, transparent);
}
.lage-weg{
  display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.05rem;
  font:600 var(--fs-kick)/1.2 var(--fb); letter-spacing:0.09em;
  text-transform:uppercase; color:var(--mint-tief);
}
.lage-weg .p{ transition:transform 0.4s var(--eq); }
.lage-fall:hover .lage-weg .p, .lage-fall:focus-within .lage-weg .p{ transform:translateX(5px); }

/* Das Motiv. Es zeigt das Werkstück des Fachs — und es steht auf JEDER
   Breite. Der Grundzustand ist deshalb der Fluss: unter der Antwort, über dem
   Weg, dauerhaft sichtbar. So kommt es auf dem Handy, auf dem Tablet und auf
   jedem Schirm ohne Zeigegerät an, statt nur bei der Maus.

   Es liegt INNERHALB des Links (siehe Vorlage): auf dem Handy tippt man auf
   das Bild und landet auf der Zielseite. aria-hidden bleibt — die Antwort
   daneben sagt bereits, was zu sehen ist, und der Link trägt seinen Text. */
.lage-shot{
  display:block; margin:1.15rem 0 0.15rem;
  width:min(100%, 16rem); aspect-ratio:3 / 2;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 12px 28px color-mix(in oklab, var(--tinte) 15%, transparent);
}
.lage-shot picture{ display:block; width:100%; height:100%; }
.lage-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:899px){
  .lage-grid{ grid-template-columns:minmax(0, 1fr); gap:2.5rem; }
  .lage-kopf{ position:static; }
  .lage-h2, .lage-lead, .lage-schluss{ max-width:none; }
}
/* Erst ab hier ist rechts Platz für das Motiv, ohne dass es den Text
   berührt: 178px Bild plus 3rem Luft. Und nur mit Zeigegerät — ohne Hover
   gäbe es nichts, was das ausgeblendete Motiv je hervorholt, dann bliebe die
   Zeile bilderlos. Auf einem Tablet in dieser Breite gilt darum weiter der
   Fluss-Zustand von oben. Das z-index:-1 wirkt nur bis zum Stapelkontext des
   Links (der hat z-index:2), legt das Motiv also hinter den Text, aber vor
   die Papierfläche des Abschnitts. */
@media (min-width:1180px) and (hover:hover) and (pointer:fine){
  .lage-shot{
    position:absolute; z-index:-1; right:0; top:50%;
    margin:-59px 0 0; width:178px; height:118px; aspect-ratio:auto;
    opacity:0; transform:translateY(16px) scale(0.97);
    transition:opacity 0.45s var(--eq), transform 0.6s var(--eq);
    pointer-events:none;
    box-shadow:0 18px 40px color-mix(in oklab, var(--tinte) 22%, transparent);
  }
  .lage-fall:hover .lage-shot, .lage-fall:focus-within .lage-shot{ opacity:1; transform:none; }
  .lage-satz, .lage-antwort{ padding-right:13.5rem; }
  .lage-antwort{ max-width:none; }
}

/* Die vier Lagen folgen dem Scrollen, statt einmalig einzublenden. Läuft im
   Compositor, ohne Scroll-Listener. Wo der Browser die Zeitleiste nicht kennt,
   passiert nichts — dann bleibt es bei der Choreografie aus .rv.

   KEINE Deckkraft in den Keyframes: Sonst entscheidet eine Zeitleiste
   darüber, ob ein Text zu sehen ist, und wenn sie nicht durchläuft, fehlt er.
   Über die Sichtbarkeit entscheidet weiterhin .rv. Eine einzige Phase, kein
   Mischen von entry und cover — sonst bleibt die letzte Lage in einem hohen
   Fenster auf halbem Weg stehen. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .lage-fall{
      animation:lageAuf linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 90%;
      will-change:transform;
    }
    @keyframes lageAuf{
      from{ transform:translateY(28px); }
      to  { transform:none; }
    }
  }
}

/* Ruhiger Modus: keine Bewegung, aber der volle Endzustand. Die Mint-Linie
   erscheint über die Deckkraft statt über die Skalierung. */
@media (prefers-reduced-motion: reduce){
  .lage-fall::before{ transform:none; opacity:0; }
  .lage-fall:hover::before, .lage-fall:focus-within::before{ opacity:1; }
  .lage-shot, .lage-weg .p{ transform:none !important; }
  .lage-fall:hover .lage-a, .lage-fall:focus-within .lage-a{ padding-left:0; }
}

/* ==========================================================================
   7 · Licht-Bühnen (Paper-Screens mit Radius über dunklem Grund)
   ========================================================================== */
.screen{
  background:var(--paper); color:var(--tinte);
  border-radius:clamp(20px, 3vw, 40px);
  margin-inline:clamp(0.5rem, 1.6vw, 1.4rem);
  --focus:var(--mint-tief);
}
.screen + .screen{ margin-top:clamp(0.5rem, 1.6vw, 1.4rem); }
.screen h2{ color:var(--tinte); }
.screen p{ color:oklch(0.300 0.050 196 / 0.88); }

/* ==========================================================================
   8 · Leistungen — 4 Blöcke, bewusst ungleich
   ========================================================================== */
.services{ padding-block:var(--sec-y); }
.svc-grid{ display:grid; gap:clamp(1rem, 2vw, 1.5rem); }
.svc{
  position:relative; border-radius:var(--radius);
  padding:clamp(1.75rem, 3.5vw, 2.75rem);
  display:grid; gap:0.9rem; align-content:start;
  transition:transform 0.35s var(--eq);
  will-change:transform;
}
.svc:hover{ transform:translateY(-5px); }
.svc:focus-within{ outline:2px solid var(--focus); outline-offset:2px; }
.svc h3 a{ text-decoration:none; color:inherit; }
.svc h3 a:focus-visible{ outline:none; }
.svc h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.svc .svc-arr{
  position:absolute; top:clamp(1.5rem, 3vw, 2.25rem); right:clamp(1.5rem, 3vw, 2.25rem);
  transition:transform 0.35s var(--eq);
  pointer-events:none; /* sonst schluckt der Pfeil den Klick auf die Karten-Flaeche */
}
.svc:hover .svc-arr{ transform:translateX(6px); }
/* Kachel-Ansicht: Das Zeichen steht ueber dem Kicker und traegt dieselbe
   Farbe — zusammen bilden sie die Kopfzeile der Flaeche. 26px, weil die
   Kachel mehr Luft hat als die Zeile. */
.svc-ico{
  width:26px; height:26px; display:block; margin-bottom:0.1rem;
  color:var(--mint-tief); fill:none; stroke:currentColor;
}
.svc-kick{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-tief);
  font-variant-numeric:tabular-nums;
}
.svc p{ max-width:32rem; }

.svc-web{ background:var(--dunst); }
.svc-web h3{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); }
.svc-seo{ background:transparent; border:1px solid oklch(0.300 0.050 196 / 0.2); }
.svc-ads{ background:var(--sand); }
.svc-foto{ background:var(--petrol-deep); color:var(--paper); --focus:var(--mint-hell); }
.svc-foto h3{ color:var(--paper); font-size:clamp(1.5rem, 2.5vw, 2rem); }
.svc-foto p{ color:oklch(0.975 0.006 190 / 0.85); }
.svc-foto .svc-kick{ color:var(--mint-hell); }
.svc-foto .svc-arr{ color:var(--mint-hell); }
.svc .svc-arr{ color:var(--mint-tief); }

@media (min-width:768px){
  .svc-grid{ grid-template-columns:repeat(12, 1fr); }
  .svc-web{ grid-column:span 7; min-height:19rem; }
  .svc-seo{ grid-column:span 5; min-height:19rem; }
  .svc-ads{ grid-column:span 5; min-height:16.5rem; }
  .svc-foto{ grid-column:span 7; min-height:16.5rem; align-content:end; }
}


/* ==========================================================================
   8b · Leistungen als Zeilenwerk (Darstellung "Zeilenwerk", layout=1)
   Vier Zeilen ueber die volle Breite. Beim Ueberfahren UND bei Tastaturfokus
   laeuft eine Dunstflaeche von links ein, eine Mint-Kante waechst am Rand
   nach unten, der Name rueckt nach rechts, rechts kommt ein Motiv herein.
   Rein CSS — kein JS.

   Die Kachel-Regeln (.svc*) darueber bleiben unangetastet: sie tragen die
   direkten Wege auf /kontakt (.svc.way) und den Ratgeber.

   Zur Textspur: die Vorlage gab dem Text ab 1180px nur rund 230px netto
   (27 Zeichen). Hier traegt er 1.3fr statt 1fr, die Namensspur 0.7fr, und
   die rechte Reserve (14rem) haelt genau die Spur fuer das Motiv frei:
   178px breit, 3rem vom Rand — Text und Motiv beruehren sich nicht.
   ========================================================================== */
.v2-list{
  list-style:none; margin:0; padding:0;
  border-top:1px solid color-mix(in oklab, var(--tinte) 18%, transparent);
}
.v2-row{
  position:relative;
  border-bottom:1px solid color-mix(in oklab, var(--tinte) 18%, transparent);
}
.v2-wash{
  position:absolute; inset:0; z-index:0; background:var(--dunst);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 0.55s var(--eq); pointer-events:none;
}
.v2-rail{
  position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:var(--mint-tief); transform:scaleY(0); transform-origin:top;
  transition:transform 0.45s var(--eq); pointer-events:none;
}
.v2-row:hover .v2-wash, .v2-row:focus-within .v2-wash{ transform:scaleX(1); }
.v2-row:hover .v2-rail, .v2-row:focus-within .v2-rail{ transform:scaleY(1); }
.v2-link{
  position:relative; z-index:2; display:grid; gap:0.5rem 1.5rem;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center; text-decoration:none; color:inherit;
  padding:clamp(1.3rem, 2.8vw, 2rem) clamp(0.75rem, 1.6vw, 1.5rem);
  transition:padding-left 0.5s var(--eq);
}
.v2-row:hover .v2-link, .v2-row:focus-within .v2-link{ padding-left:clamp(1.1rem, 2.4vw, 2.1rem); }
.v2-link:focus-visible{
  outline:2px solid var(--mint-tief); outline-offset:-2px;
  border-radius:var(--radius-s);
}
.v2-num{
  font:600 var(--fs-kick)/1 var(--fb); letter-spacing:0.09em;
  font-variant-numeric:tabular-nums; color:var(--mint-tief); align-self:center;
}
/* Zeichen und Nummer teilen sich die schmale erste Spalte und stehen
   uebereinander: das Zeichen benennt das Fach, die Nummer haelt den Takt.
   grid-row:1/-1 zentriert das Paar ueber beide Zeilen (Name und Text) —
   ohne das haengt es oben, sobald der Text auf zwei Zeilen umbricht.
   Beide bewegen sich beim Ueberfahren NICHT mit: sie sind der ruhende
   Anker, an dem der Name vorbeizieht. */
.v2-mark{
  grid-row:1 / -1; align-self:center;
  display:grid; gap:0.55rem; justify-items:start; align-content:center;
}
.v2-ico{
  width:22px; height:22px; display:block;
  color:var(--mint-tief); fill:none; stroke:currentColor;
}
.v2-name{
  font-family:var(--fd); font-weight:700; letter-spacing:-0.022em; line-height:1.0;
  font-size:clamp(1.85rem, 4.6vw, 2.9rem); color:var(--tinte); margin:0;
  transition:transform 0.5s var(--eq);
  /* min-width:0 ist Pflicht: sonst zieht der lange Name die Rasterspalte auf. */
  min-width:0; overflow-wrap:break-word;
}
.v2-row:hover .v2-name, .v2-row:focus-within .v2-name{ transform:translateX(8px); }
.v2-txt{
  grid-column:2; min-width:0; max-width:none;
  color:color-mix(in oklab, var(--tinte) 88%, transparent);
  font-size:var(--fs-s); line-height:1.6; padding-right:2.75rem;
}
.v2-arr{
  position:absolute; right:clamp(0.75rem, 1.6vw, 1.5rem); top:50%;
  color:var(--mint-tief); opacity:0.45;
  transition:transform 0.45s var(--eq), opacity 0.45s var(--eq);
  transform:translateY(-50%); pointer-events:none;
}
.v2-row:hover .v2-arr, .v2-row:focus-within .v2-arr{ opacity:1; transform:translate(6px,-50%); }
.v2-shot{
  position:absolute; z-index:1; right:3rem; top:50%; margin-top:-59px;
  width:178px; height:118px; border-radius:var(--radius-m); overflow:hidden;
  opacity:0; transform:translateY(16px) scale(0.97);
  transition:opacity 0.45s var(--eq), transform 0.6s var(--eq);
  pointer-events:none; display:none;
  box-shadow:0 18px 40px color-mix(in oklab, var(--tinte) 22%, transparent);
}
.v2-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2-row:hover .v2-shot, .v2-row:focus-within .v2-shot{ opacity:1; transform:none; }

/* Unter 768px strikt einspaltig: die Nummer steht ueber dem Namen. */
@media (max-width:767px){
  .v2-link{ grid-template-columns:1fr; gap:0.35rem; }
  /* Einspaltig steht das Paar nebeneinander statt uebereinander —
     senkrecht wuerde es eine ganze Zeile Hoehe kosten, ohne mehr zu sagen. */
  .v2-mark{ grid-row:auto; grid-auto-flow:column; align-items:center;
            justify-content:start; gap:0.6rem; }
  .v2-txt{ grid-column:1; padding-right:2.25rem; }
}

@media (min-width:1180px){
  .v2-link{ grid-template-columns:44px minmax(9rem,.7fr) 1.3fr; align-items:baseline; }
  .v2-name{ align-self:center; }
  .v2-txt{ grid-column:3; grid-row:1; align-self:center; padding-right:14rem; }
  .v2-shot{ display:block; }
}
@media (hover:none){ .v2-shot{ display:none; } }

/* Ruhiger Modus: keine Bewegung. Geoeffnet wird nur ueber Sichtbarkeit. */
@media (prefers-reduced-motion: reduce){
  .v2-wash, .v2-rail, .v2-shot, .v2-name, .v2-arr{ transform:none !important; }
  .v2-wash, .v2-rail{ opacity:0; }
  .v2-row:hover .v2-wash, .v2-row:focus-within .v2-wash,
  .v2-row:hover .v2-rail, .v2-row:focus-within .v2-rail{ opacity:1; }
  .v2-row:hover .v2-link, .v2-row:focus-within .v2-link{ padding-left:clamp(0.75rem, 1.6vw, 1.5rem); }
}
/* ==========================================================================
   9 · Fotografie-Galerie — full-bleed Bildbänder (Best-of-Auswahl)
   Der Sektionskopf bleibt im Raster-Container (.wrap). Die Bildbänder
   liegen als Geschwister daneben, direkt in der Sektion — dadurch sind sie
   automatisch so breit wie das Dokument. BEWUSST ohne 100vw und ohne
   negative Ränder: 100vw schliesst die Bildlaufleiste mit ein, die
   Sektionsbreite nicht. Genau daran scheitern die meisten Full-Bleed-
   Loesungen mit einem horizontalen Ueberlauf; hier kann er gar nicht
   entstehen.
   Drei Bänder à acht Motiven, unterschiedlich hoch, gegenläufig an den
   Scroll gekoppelt: waehrend die Sektion durchs Bild wandert, laeuft jedes
   Band genau einmal komplett durch seine Spur. Jedes Motiv wird dabei
   vollstaendig sichtbar. Kein Autoplay-Marquee, kein Scroll-Hijacking,
   animiert wird ausschliesslich transform.
   Ohne JS und bei reduced-motion sind die Bänder schlicht nativ horizontal
   scrollbar — alle 24 Bilder bleiben sichtbar und erreichbar.
   Motive, Kunden und Alt-Texte: assets/img/bestof/AUSWAHL.md
   ========================================================================== */
.gallery{
  padding-block:var(--sec-y);
  /* Tiefstes Tinte-Level der Seite: die Fotos sollen die einzigen
     Lichtquellen im Block sein. Der Showcase darunter hebt wieder an. */
  background:
    radial-gradient(88% 62% at 88% 4%, oklch(0.32 0.056 195 / 0.42), transparent 62%),
    var(--tinte-deeper);
  /* Sicherheitsnetz gegen Sub-Pixel-Ausreisser der Bänder. */
  overflow:hidden;
}
.gallery h2{ color:var(--paper); }
.gallery .lead{ color:oklch(0.975 0.006 190 / 0.8); }
.gal-head{ display:grid; gap:1.1rem; margin-bottom:clamp(2.25rem, 5vw, 3.5rem); }
.gal-more{ margin-top:0.3rem; }

.fb-band{
  /* Bandhöhe: 208px am Handy, 360px bei 1440, 384px ab 1536.
     Damit bleiben die Reihen im ruhigen Bereich und stapeln zusammen
     rund eine Bildschirmhöhe — nicht 24 Kacheln auf einmal. */
  --fb-base: clamp(13rem, 25vw, 24rem);
  --fb-gap:  clamp(0.5rem, 1vw, 0.9rem);
  display:grid; grid-template-columns:minmax(0, 1fr);
  gap:var(--fb-gap);
}
.fb-row{
  --fb-scale:1;
  --fb-h:calc(var(--fb-base) * var(--fb-scale));
  /* min-width:0 ist Pflicht: sonst zieht der max-content-breite Track
     die Rasterspalte auf und die Seite bekommt Querlauf. */
  min-width:0;
  /* Grundzustand = nativ scrollbar. Genau so bleibt es ohne JS und bei
     reduced-motion; die Drift schaltet erst .is-drift dazu. */
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--petrol) transparent;
}
.fb-row.is-drift{ overflow:hidden; scroll-snap-type:none; }
/* Drei verschiedene Bandhöhen — so entsteht keine durchgehende Rasterkante. */
.fb-row--a{ --fb-scale:1; }
.fb-row--b{ --fb-scale:0.87; }
.fb-row--c{ --fb-scale:0.94; }

.fb-track{ display:flex; gap:var(--fb-gap); width:max-content; }
.js .fb-row.is-drift .fb-track{ will-change:transform; }

/* Kachel = Bildbuehne + Lightbox-Link. Ohne JS bleibt es ein Link auf die
   grosse Bilddatei. Die Höhe steht, die Breite folgt dem Aufnahmeformat —
   Hochformate laufen dadurch von selbst schmaler.

   --ar ist das echte Seitenverhaeltnis der Datei und kommt aus FAL an der
   Kachel an (siehe gallery/templates/frontend.fluid.html). Vorher standen
   hier drei Zwangsformate (3/2, 2/3, 16/9), die ein Feld im Backend von Hand
   zuwies — passte die Zuweisung nicht zur Aufnahme, schnitt object-fit:cover
   mittig hinein, bei Portraets zuerst den Kopf ab. Jetzt kann das nicht mehr
   passieren: Buehne und Bild haben dasselbe Verhaeltnis.

   Der Ersatzwert 3/2 greift nur, wenn --ar gar nicht gesetzt ist (Bild ohne
   Masse in FAL). object-fit bleibt cover: bei gleichem Verhaeltnis schneidet
   es nichts, faengt aber die Rundung zwischen Kachelbreite und gerechneter
   Bildbreite ab — contain wuerde dort einen Streifen Hintergrund zeigen.

   max-width deckelt Ausreisser: ein 3:1-Panorama waere im 384er Band ueber
   1150 Pixel breit und passte am Handy nicht mehr auf den Schirm. Ab 2:1 wird
   die Kachel gekappt, dann schneidet cover die Raender des Panoramas weg —
   das ist die einzige verbliebene Stelle mit Beschnitt und sie ist gewollt.
   Nach unten wird nicht gedeckelt: eine sehr schmale Kachel stoert nichts,
   eine erzwungene Mindestbreite wuerde wieder hineinschneiden. */
.fb-tile{
  flex:0 0 auto; display:block; position:relative; overflow:hidden;
  height:var(--fb-h); aspect-ratio:var(--ar, 3/2);
  max-width:calc(var(--fb-h) * 2);
  border-radius:var(--radius);
  background:oklch(0.26 0.045 197);
  scroll-snap-align:center;
}
.fb-tile img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--img-s, 1));
}
/* Dezente Hover-Tiefe wie auf den Projektbildern: nur transform, nur an
   echten Zeigergeraeten. Kein translateY — die Reihe ist beschnitten,
   ein Anheben wuerde oben abgeschnitten. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .fb-tile img{ transition:transform 0.6s var(--eq); }
  .js .fb-tile:hover img{ --img-s:1.05; }
}

@media (prefers-reduced-motion: reduce){
  /* Keine Drift. Die Bänder bleiben ruhige, nativ scrollbare Streifen,
     alle Motive bleiben vollstaendig sichtbar und erreichbar. */
  .fb-row{ overflow-x:auto !important; overflow-y:hidden !important; }
  .fb-track{ transform:none !important; }
}

/* Lightbox: natives <dialog>. Fokus-Falle, Escape und Inertisierung des
   Hintergrunds kommen vom Browser — kein Nachbau in JS. */
.lbox{
  position:fixed; inset:0; margin:0; border:0; padding:0;
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  background:transparent; color:var(--paper); overflow:hidden;
}
.lbox[open]{ display:grid; place-items:center; }
.lbox::backdrop{ background:oklch(0.165 0.028 198 / 0.93); }
.lbox-fig{
  margin:0; display:grid; gap:0.9rem; justify-items:center; max-width:100%;
  padding:clamp(3.5rem, 9vw, 5rem) clamp(1rem, 6vw, 5rem);
}
.lbox-img{
  max-width:min(92vw, 68rem);
  max-height:calc(100dvh - 10rem);
  width:auto; height:auto;
  border-radius:var(--radius);
  box-shadow:0 30px 70px oklch(0.14 0.025 198 / 0.6);
}
.lbox-cap{
  font:500 var(--fs-s)/1.4 var(--fb); text-align:center;
  color:oklch(0.975 0.006 190 / 0.72);
}
.lbox-btn{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:2.9rem; height:2.9rem; border-radius:50%; cursor:pointer;
  border:1px solid oklch(0.975 0.006 190 / 0.22);
  background:oklch(0.24 0.04 197 / 0.88);
  color:var(--paper); font:400 1.3rem/1 var(--fb);
  transition:transform 0.3s var(--eq), border-color 0.3s var(--eq);
}
.lbox-btn:hover{ border-color:var(--mint-hell); }
.lbox-close{ top:clamp(0.75rem, 2.5vw, 1.6rem); right:clamp(0.75rem, 2.5vw, 1.6rem); }
.lbox-prev, .lbox-next{ top:50%; transform:translateY(-50%); }
.lbox-prev{ left:clamp(0.6rem, 2.5vw, 1.6rem); }
.lbox-next{ right:clamp(0.6rem, 2.5vw, 1.6rem); }
@media (hover:hover){
  .lbox-close:hover{ transform:scale(1.06); }
  .lbox-prev:hover, .lbox-next:hover{ transform:translateY(-50%) scale(1.06); }
}
/* Scroll-Sperre am Wurzelelement (dort liegt der Scroll-Container),
   Breite der Bildlaufleiste wird kompensiert, damit nichts springt. */
html.lbox-open{ overflow:hidden; }
html.lbox-open body{ padding-right:var(--sbw, 0px); }

/* ==========================================================================
   10 · Projekte — Sticky-Showcase (Herzstück der Richtung „Bühne")
   ========================================================================== */
.showcase{
  --steps:4;
  background:
    radial-gradient(95% 70% at 12% 90%, oklch(0.33 0.058 195 / 0.4), transparent 60%),
    var(--tinte-deep);
}
.show-stage{ padding-block:var(--sec-y); }
.show-head{
  display:grid; gap:1.1rem;
  margin-bottom:clamp(2rem, 5vw, 3.25rem);
}
.show-head h2{ color:var(--paper); }
.show-meta{ display:flex; align-items:center; gap:1rem; }
.show-count{
  font-family:var(--fd); font-weight:700; font-size:1.05rem;
  color:var(--mint-hell); font-variant-numeric:tabular-nums; letter-spacing:0.01em;
}
.show-count .show-total{ color:oklch(0.975 0.006 190 / 0.45); }
.show-bars{ display:flex; gap:0.4rem; }
.show-bars i{
  position:relative; width:2.1rem; height:2px; border-radius:1px;
  background:oklch(0.975 0.006 190 / 0.18); overflow:hidden;
}
.show-bars i::after{
  content:""; position:absolute; inset:0; background:var(--mint-hell);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 0.5s var(--eq);
}
.show-bars i.on::after{ transform:scaleX(1); }
.show-side{ display:none; }

.show-item{ display:grid; gap:1.4rem; padding-block:1.75rem; }
.show-txt{ display:grid; gap:0.9rem; align-content:center; justify-items:start; }
.show-idx{
  font:600 var(--fs-kick)/1.2 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell); font-variant-numeric:tabular-nums;
}
.show-name{
  font-size:clamp(1.75rem, 4vw, 3rem);
  font-weight:750; color:var(--paper); letter-spacing:-0.018em; line-height:1.02;
}
.show-claim{
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
  color:oklch(0.975 0.006 190 / 0.82); max-width:30rem;
}
.show-media{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 14px 34px oklch(0.215 0.037 198 / 0.35);
  --mask-tone:var(--tinte-deep);
}
.show-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; }

/* Anonymisiertes Projekt 01 ohne Foto: Leistungs-Kachel */
.stat-tile{
  border-radius:var(--radius);
  background:
    radial-gradient(120% 110% at 85% 0%, oklch(0.46 0.07 193 / 0.5), transparent 65%),
    var(--petrol-deep);
  padding:clamp(1.75rem, 4vw, 3rem);
  display:grid; gap:0.4rem; align-content:center;
  min-height:15rem; height:100%;
}
/* Die vier Leistungen untereinander — Display-Type wie zuvor die Zahlen,
   nur so weit heruntergesetzt, dass auch "Business-Fotografie" einzeilig sitzt. */
.tile-list{ list-style:none; display:grid; gap:0.5rem; }
.tile-list li{
  font-family:var(--fd); font-weight:800; line-height:1.02;
  font-size:clamp(1.55rem, 3.4vw, 2.4rem); letter-spacing:-0.02em;
  color:var(--paper);
  display:flex; align-items:baseline; gap:0.75rem;
}
/* erste Leistung traegt die Kachel — grosse Display-Type wie bisher */
.tile-list li:first-child{
  font-size:clamp(2.4rem, 5.2vw, 3.6rem); color:var(--mint-hell);
}
.tile-list li::before{
  content:""; flex:0 0 auto;
  width:0.8rem; height:2px; border-radius:2px;
  background:var(--mint-hell); opacity:0.55;
  transform:translateY(-0.32em);
}
.tile-list li:first-child::before{ opacity:1; }
.tile-note{
  margin-top:1.5rem; padding-top:1.05rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.7);
}

.show-foot{ padding-top:1.5rem; }

/* Gepinnter Modus: nur >= 768px und ohne reduced-motion (per JS gesetzt) */
@media (min-width:768px){
  .showcase.is-pinned{ height:calc(var(--steps) * 105dvh); }
  .is-pinned .show-stage{
    position:sticky; top:var(--head-h);
    height:calc(100dvh - var(--head-h));
    overflow:hidden;
    padding-block:clamp(2rem, 4dvh, 3.5rem) clamp(1.5rem, 3dvh, 2.5rem);
  }
  .is-pinned .show-wrap{
    display:flex; flex-direction:column; height:100%; min-height:0;
  }
  .is-pinned .show-head{
    display:grid; grid-template-columns:1fr auto; align-items:end; gap:1.25rem;
    margin-bottom:clamp(1.5rem, 3dvh, 2.5rem);
  }
  .is-pinned .show-side{ display:grid; gap:0.9rem; justify-items:end; align-content:end; }
  .is-pinned .show-meta{ display:flex; }
  .is-pinned .show-body{ position:relative; flex:1; min-height:0; }
  .is-pinned .show-item{
    position:absolute; inset:0;
    grid-template-columns:0.95fr 1.05fr;
    gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
    padding-block:0;
    opacity:0; transform:translateY(30px);
    transition:opacity 0.55s var(--eq), transform 0.55s var(--eq);
    pointer-events:none;
  }
  .is-pinned .show-item.past{ transform:translateY(-30px); }
  .is-pinned .show-item.active{ opacity:1; transform:none; pointer-events:auto; }
  .is-pinned .show-media, .is-pinned .stat-tile{ height:min(58dvh, 34rem); }
  .is-pinned .show-media img{ height:100%; aspect-ratio:auto; }
  .is-pinned .show-foot{ display:none; }

  /* Im gepinnten Modus fuehrt der Scroll-Schritt die Maske, nicht der
     einmalige IntersectionObserver: jedes Projekt tritt hinter dem Vorhang
     hervor, sobald es an der Reihe ist. */
  .js .is-pinned .show-item .show-media{ --img-s:1.06; }
  .js .is-pinned .show-item .show-media img{ opacity:1; }
  .js .is-pinned .show-item .show-media::after{ transform:scaleY(1); transition-duration:0.8s; }
  .js .is-pinned .show-item.active .show-media,
  .js .is-pinned .show-item.past .show-media{ --img-s:1; }
  .js .is-pinned .show-item.active .show-media::after,
  .js .is-pinned .show-item.past .show-media::after{ transform:scaleY(0); }

  /* Statischer Desktop-Fallback (kein JS / reduced-motion): zweispaltige Zeilen */
  .showcase:not(.is-pinned) .show-item{
    grid-template-columns:0.95fr 1.05fr; align-items:center;
    gap:clamp(2rem, 5vw, 4rem);
    padding-block:2.25rem;
    border-top:1px solid oklch(0.975 0.006 190 / 0.1);
  }
}

/* Hover-Tiefe auf den Projektbildern: Bild atmet leicht im Rahmen,
   der Rahmen hebt sich an. Nur transform, nur bei echtem Zeigergeraet. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .show-media{ transition:transform 0.5s var(--eq); }
  .js .showcase .show-item .show-media:hover,
  .js .showcase .show-item.active .show-media:hover{
    --img-s:1.045;
    transform:translateY(-4px);
  }
}

/* ==========================================================================
   11 · Person + Ablauf — Licht-Bühne
   ========================================================================== */
.person{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.person-grid{ display:grid; gap:clamp(2rem, 5vw, 4.5rem); }
.person-media{ border-radius:var(--radius); overflow:hidden; }
.person-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.person-copy{ display:grid; gap:1.4rem; align-content:center; }
.person-copy p{ max-width:36rem; }
.facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem 1.6rem;
  padding-top:1.2rem; border-top:1px solid oklch(0.300 0.050 196 / 0.16);
  font:600 var(--fs-s)/1.5 var(--fb); letter-spacing:0.01em;
  color:var(--petrol);
  font-variant-numeric:tabular-nums;
}
.facts li{ display:flex; align-items:center; gap:0.55rem; }
.facts li::before{
  content:""; width:0.4rem; height:0.4rem; border-radius:50%;
  background:var(--mint-tief); flex:none;
}
@media (min-width:768px){
  .person-grid{ grid-template-columns:0.8fr 1.2fr; }
}

.process{ padding-block:clamp(3rem, 7vw, 5.5rem) var(--sec-y); }
.steps{ list-style:none; display:grid; gap:clamp(1.5rem, 3vw, 2rem); counter-reset:step; }
.step{
  border-top:2px solid oklch(0.300 0.050 196 / 0.16);
  padding-top:1.25rem; display:grid; gap:0.5rem; align-content:start;
  position:relative;
}
.step-num{
  font-family:var(--fd); font-weight:800; font-size:2.4rem; line-height:1;
  color:var(--mint-tief); letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.25rem; }
.step p{ font-size:var(--fs-s); line-height:1.6; max-width:30rem; }
/* Die Spaltenzahl folgt der Anzahl der Schritte, nicht umgekehrt. Eine feste
   `repeat(4, …)` liess bei fuenf Schritten den fuenften allein in einer zweiten
   Reihe haengen. Die Anzahl wird mit `:has(> .step:nth-child(N):last-child)`
   aus dem Markup gelesen — dasselbe Muster wie bei der Bildstrecke
   (bmd-unterseiten.css, .strip-grid). Ueberall minmax(0, 1fr): 1fr ist
   minmax(auto, 1fr) und liesse die Spalte auf Inhaltsbreite wachsen. */
@media (min-width:768px){
  /* Grundfall vier Spalten — traegt vier, sieben und acht Schritte,
     jede Reihe ohne Einzelgaenger. */
  .steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .steps:has(> .step:nth-child(2):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* Drei, sechs, neun: drei Spalten, jede Reihe voll. */
  .steps:has(> .step:nth-child(3):last-child),
  .steps:has(> .step:nth-child(6):last-child),
  .steps:has(> .step:nth-child(9):last-child){ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .step p{ max-width:none; }
}
/* Acht Schritte auf Tablet-Breite: vier Spalten werden dort unter 155 Pixel
   schmal, „Weiterleitungsplan" fuellt eine Spalte dann randlos aus. */
@media (min-width:768px) and (max-width:1023px){
  .steps:has(> .step:nth-child(8):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* Fuenf Schritte, mittlere Breite: drei plus zwei auf einem Sechser-Raster.
   Beide Reihen stehen randbuendig, keine Luecke, kein Einzelgaenger. */
@media (min-width:768px) and (max-width:1119px){
  .steps:has(> .step:nth-child(5):last-child){ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .steps:has(> .step:nth-child(5):last-child) > .step{ grid-column:span 2; }
  .steps:has(> .step:nth-child(5):last-child) > .step:nth-child(n+4){ grid-column:span 3; }
}
/* Ab 1120 Pixeln reicht der Platz fuer die durchgehende Reihe: ein Ablauf ist
   eine Folge, und fuenf Spalten nebeneinander lesen sich als Zeitachse. */
@media (min-width:1120px){
  .steps:has(> .step:nth-child(5):last-child){ grid-template-columns:repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   12 · Preise — dunkle Zwischen-Bühne
   ========================================================================== */
.pricing{
  padding-block:var(--sec-y);
  background:
    radial-gradient(100% 80% at 90% 100%, oklch(0.31 0.055 195 / 0.5), transparent 60%),
    var(--tinte-deeper);
}
.pricing h2{ color:var(--paper); }
.pricing-grid{ display:grid; gap:clamp(2rem, 4vw, 3.5rem); align-items:start; }
.pricing p{ color:oklch(0.975 0.006 190 / 0.85); max-width:37rem; }
.pricing strong{ color:var(--mint-hell); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:768px){
  .pricing-grid{ grid-template-columns:auto 1fr; }
  .pricing-grid .sec-head{ margin-bottom:0; max-width:22rem; }
}

/* ==========================================================================
   13 · Region + Fragen — Licht-Bühne
   ========================================================================== */
/* Region: Aufbau aus Vorschlag C („Signal") — grosse Bildbuehne rechts,
   Text als warmes Licht-Panel darueber gelegt. Uebersetzt in Bs System:
   Bricolage/Instrument, Farbsystem A, Radien und Reveals wie die
   uebrigen Licht-Buehnen (Person, FAQ). */
.region{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.region-grid{ display:grid; gap:clamp(1.25rem, 3.5vw, 2.25rem); }
.region-fig{ margin:0; border-radius:var(--radius); overflow:hidden; }
.region-fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.region-panel{
  display:grid; gap:1.1rem; align-content:center;
  background:var(--paper); /* Fallback */
  background:color-mix(in oklab, var(--sand) 46%, var(--paper));
  border:1px solid oklch(0.300 0.050 196 / 0.14);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.4vw, 2.9rem);
  box-shadow:0 18px 46px oklch(0.300 0.050 196 / 0.12);
}
.region-panel p{ max-width:30rem; }
.region-panel .cities{ font-weight:650; color:var(--petrol); }
@media (min-width:768px){
  .region-grid{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    align-items:center; gap:0;
  }
  .region-fig{ grid-column:5 / -1; grid-row:1; }
  /* position:relative noetig, seit .rv-img (die Bildbuehne) selbst positioniert
     ist — sonst wuerde das Bild ueber dem Licht-Panel liegen. */
  .region-panel{ grid-column:1 / 7; grid-row:1; position:relative; z-index:2; }
}
/* Mobil: Bild oben, Panel schiebt sich darueber — einspaltig, ohne Overflow */
@media (max-width:767px){
  .region-grid{ gap:0; }
  .region-panel{
    position:relative; z-index:2;
    margin-inline:clamp(0.6rem, 3vw, 1.5rem);
    margin-top:clamp(-3.5rem, -8vw, -2.25rem);
  }
}

.faq{ padding-block:clamp(3rem, 7vw, 5.5rem) var(--sec-y); }
.faq-list{ display:grid; gap:clamp(1.75rem, 4vw, 2.5rem); max-width:44rem; }
.faq-item{
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
  padding-top:1.5rem; display:grid; gap:0.6rem;
}
.faq-item h3{ font-size:clamp(1.2rem, 1.8vw, 1.45rem); }
.faq-item p{ max-width:37rem; }

/* ==========================================================================
   14 · Schluss-CTA + Formular — dunkle Abschluss-Bühne
   ========================================================================== */
.closing{
  padding-block:var(--sec-y);
  background:
    radial-gradient(110% 90% at 15% 0%, oklch(0.33 0.058 195 / 0.5), transparent 62%),
    var(--tinte-deep);
}
.closing h2{ color:var(--paper); }
.closing-grid{ display:grid; gap:clamp(2.5rem, 5vw, 5rem); }
.closing-copy{ display:grid; gap:1.5rem; align-content:start; }
.closing-copy > p{ color:oklch(0.975 0.006 190 / 0.82); max-width:32rem; }
.closing-alt{
  font-size:var(--fs-s); color:oklch(0.975 0.006 190 / 0.7);
  font-variant-numeric:tabular-nums;
}
.closing-alt a{ color:var(--mint-hell); text-decoration:none; font-weight:600; }
.closing-alt a:hover{ text-decoration:underline; text-underline-offset:0.25em; }
@media (min-width:768px){
  .closing-grid{ grid-template-columns:0.95fr 1.05fr; }
}

/* Datenschutzhinweis unter dem Formular (Artikel 13 DSGVO: die Information
   gehoert an den Ort der Erhebung). Steht in beiden Formularkontexten — im
   Block closing auf 34 Seiten und im Block contacthero auf /kontakt — und
   deshalb hier und nicht in bmd-ratgeber-kontakt.css, die auf der Startseite
   nicht laedt. Grund ist in beiden Faellen --tinte-deep; Papier bei 0,6
   Deckkraft ergibt 6,10:1, der Link in Mint-hell 9,10:1. */
.form-note{
  font-size:var(--fs-s); line-height:1.55;
  color:oklch(0.975 0.006 190 / 0.6);
}
.form-note a{ color:var(--mint-hell); font-weight:600; text-decoration:underline; text-underline-offset:0.25em; }
/* Im closing-Block steht der Hinweis als Geschwister hinter dem <form>, das
   dort kein Grid-Elternteil hat — der Abstand kommt deshalb von Hand. */
.contact-wrap > .form-note{ margin-top:1.2rem; }

.contact-form{ display:grid; gap:1.2rem; }
.form-row{ display:grid; gap:1.2rem; }
@media (min-width:768px){ .form-row{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:0.45rem; }
.field label{
  font:600 var(--fs-s)/1.3 var(--fb); letter-spacing:0.01em;
  color:var(--paper);
}
.field label small{ font-weight:400; color:oklch(0.975 0.006 190 / 0.55); }
/* Der Rahmen ist die einzige Kante, die ein Eingabefeld als Bedienelement
   ausweist — die Füllung hebt sich mit 1,18:1 nicht vom Abschnittsgrund ab.
   Bei 0,22 Deckkraft ergab der Rahmen 1,98:1 und war praktisch unsichtbar;
   WCAG 1.4.11 verlangt 3:1. Papier bei 0,38 Deckkraft über der Füllung
   (zusammen 0,417 Papier auf Tiefpetrol #0b282a) ergibt 3,67:1. */
.field input, .field textarea{
  font:400 1rem/1.5 var(--fb);
  color:var(--paper);
  background:oklch(0.975 0.006 190 / 0.06);
  border:1px solid oklch(0.975 0.006 190 / 0.38);
  border-radius:12px;
  padding:0.85rem 1rem;
  width:100%;
}
.field textarea{ min-height:7.5rem; resize:vertical; }
.field input:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--mint-hell); outline-offset:2px;
  border-color:var(--mint-hell);
}
.field-msg{
  display:none;
  font:600 var(--fs-s)/1.4 var(--fb);
  color:var(--err);
}
.field.has-error .field-msg{ display:block; }
/* Sammelmeldung ueber dem Formular (role="alert"). Leer bleibt sie unsichtbar
   und belegt keine Grid-Zeile. */
.form-alert{ margin:0; font:600 0.85rem/1.45 var(--fb); color:var(--err); }
.form-alert:empty{ display:none; }
.field.has-error input, .field.has-error textarea{ border-color:var(--err); }
.contact-form .btn{ justify-self:start; margin-top:0.3rem; }
/* .form-ok / .contact-wrap.is-sent sind am 03.09.2026 entfallen: die Klasse
   is-sent wurde seit dem Umbau auf ein echtes EXT:form-POST nirgends mehr
   gesetzt, das Panel war totes Markup auf 32 Seiten. Bestaetigt wird auf
   /danke. */

/* ==========================================================================
   15 · Footer
   ========================================================================== */
.site-foot{
  background:var(--tinte-deeper);
  border-top:1px solid oklch(0.975 0.006 190 / 0.1);
  padding-block:clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  color:oklch(0.975 0.006 190 / 0.75);
  font-size:var(--fs-s);
}
.foot-grid{ display:grid; gap:2.75rem; }
.foot-brand{ display:grid; gap:1.4rem; justify-items:start; align-content:start; }
/* Fuss: volles Lockup 559 x 284, BARTH-Versalhoehe 24,2 px wie zuvor. */
.foot-brand .brand-logo{ height:4.3rem; }

/* --- Kontaktdaten --------------------------------------------------------
   Eine feste Zeichenspalte von 12 px vorne, danach der Text. Die Titel
   fluchten dadurch auch dann, wenn eine Zeile umbricht.
   Ganz oben steht der Winkel und fasst den Block — dieselbe Beziehung wie im
   Logo, wo die offene Ecke den Satzblock haelt. Bei 12 px sind seine
   Schenkel 1,71 px stark und treffen damit fast genau die Strichstaerke 1,5
   der Zeichen darunter: eine Spalte, ein Gewicht.
   Mint-hell #6AD7C3 auf Tiefpetrol rgb(0,30,32) = 10,05:1.
   Text Papier 0,82 auf demselben Grund = 11,14:1. */
.site-foot address{ font-style:normal; }
.foot-nap{
  display:grid; gap:0.6rem;
  font-variant-numeric:tabular-nums; line-height:1.45;
  color:oklch(0.975 0.006 190 / 0.82);
}
.nap-row{
  display:grid; grid-template-columns:12px minmax(0, 1fr);
  column-gap:0.7rem; align-items:start;
}
.nap-row > .ci-winkel,
.nap-row > .nap-i{ margin-top:0.34em; color:var(--mint-hell); }
.nap-i{ fill:none; }
.nap-name{ font-weight:600; color:var(--paper); }
.foot-nap a{ color:inherit; text-decoration:none; }
.foot-nap a:hover{ color:var(--mint-hell); }

/* --- Die drei Linkspalten ------------------------------------------------
   Die Haarlinie unter der Ueberschrift ist dieselbe wie ueber den Gruppen
   der Aufklappflaechen (.panel-group) — Kopf und Fuss sollen erkennbar
   dasselbe Regelwerk tragen. */
.foot-col h2{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
  padding-bottom:0.6rem; margin-bottom:0.9rem;
  border-bottom:1px solid oklch(0.975 0.006 190 / 0.13);
}
.foot-col ul{ list-style:none; display:grid; gap:0.15rem; }
.foot-col a{
  display:grid; grid-template-columns:12px minmax(0, 1fr);
  column-gap:0.7rem; align-items:start;
  padding:0.3rem 0.4rem 0.3rem 0;
  border-radius:8px;
  color:oklch(0.975 0.006 190 / 0.75); text-decoration:none;
  transition:color var(--dur-fast) var(--eq);
}
.fl-i{ margin-top:0.32em; color:oklch(0.975 0.006 190 / 0.4); fill:none; transition:color var(--dur-fast) var(--eq); }
.foot-col a:hover,
.foot-col a[aria-current="page"]{ color:var(--mint-hell); }
.foot-col a:hover .fl-i,
.foot-col a[aria-current="page"] .fl-i{ color:var(--mint-hell); }

/* --- Schlusszeile --------------------------------------------------------
   Links der Gruss, rechts die Pflichtangaben und das Copyright. Das Quadrat
   steht vor der allerletzten Zeile: es markiert den Schluss und schliesst
   die Diagonale, die der Winkel oben links begonnen hat. */
.foot-sig{
  margin-top:3rem; padding-top:1.75rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.1);
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:baseline;
}
.sig{
  font:italic 500 1.15rem/1.4 var(--fb);
  color:var(--mint-hell); letter-spacing:0.005em;
}
.foot-end{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 1.5rem;
}
.foot-recht ul{ list-style:none; display:flex; flex-wrap:wrap; gap:0.4rem 1.25rem; }
/* Papier 0,60 auf Tiefpetrol = 6,48:1 */
.foot-recht a{ color:oklch(0.975 0.006 190 / 0.6); text-decoration:none; }
.foot-recht a:hover, .foot-recht a[aria-current="page"]{ color:var(--mint-hell); }
/* 0,45 ergaben gemessen 4,19:1 und lagen damit unter der Schwelle fuer
   Kleinschrift. 0,48 ergibt 4,61:1. */
.foot-legal{
  color:oklch(0.975 0.006 190 / 0.48); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:0.55rem;
}
.foot-legal .ci-quadrat{ color:var(--mint-hell); }

@media (min-width:768px){
  /* minmax(0,1fr) statt 1fr — 1fr ist minmax(auto,1fr) und laesst die Spalte
     auf Inhaltsbreite wachsen. */
  .foot-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .foot-brand{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .foot-grid{ grid-template-columns:minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
  .foot-brand{ grid-column:auto; }
}

/* Sicherheitsnetz: unter 768px strikt einspaltig */
@media (max-width:767px){
  /* minmax(0,1fr) statt 1fr: 1fr ist minmax(auto,1fr) und laesst die Spalte
     auf Inhaltsbreite wachsen — das Netz riss genau da, wo es halten soll. */
  .hero-grid, .svc-grid, .person-grid, .region-grid, .closing-grid,
  .pricing-grid, .steps, .foot-grid, .form-row, .lage-grid{ grid-template-columns:minmax(0, 1fr); }
  .foot-sig{ display:grid; gap:1.25rem; }
  .foot-end{ display:grid; gap:0.6rem; justify-items:start; }
}

/* Das Sprungziel traegt tabindex="-1" (siehe Templates/Page/Default.html).
   Es bekommt damit beim Skip-Link den Fokus — soll aber keinen Ring zeigen,
   weil nicht das <main> das Bedienelement ist, sondern der Link davor. */
main:focus{ outline:none; }

/* Solange das Handy-Menue offen ist, darf die Seite dahinter nicht scrollen.
   Gesetzt von bmd-site.js zusammen mit .nav-open. */
.nav-locked{ overflow:hidden; }