/* ============================================================
   R&G Classics — Website Variante 1
   Gebaut streng auf dem vorhandenen R&G Classics Design System.
   Tokens (Farbe, Typo, Spacing, Radius, Motion) 1:1 übernommen.
   ============================================================ */

/* ---- Fonts: Poppins (Marke) + IBM Plex Mono (DS-Mono für Maße/SKU) ---- */
/* Schriften liegen seit 28.08.2026 auf dem eigenen Server.
   Vorher lud diese Zeile sie vom Google-CDN, wodurch bei jedem
   Seitenaufruf die Besucher-IP dorthin ging. Siehe assets/schriften.css. */
@import url('assets/schriften.css');

/* ============================ TOKENS ============================ */
:root {
  /* Primary — deep teal */
  --color-primary-900: #0D3532;
  --color-primary-800: #123f3c;
  --color-primary-700: #185049;
  --color-primary-600: #206259;

  /* Accent — copper */
  --color-accent-700: #9c6127;
  --color-accent-600: #ad6f30;
  --color-accent-500: #C37C37;
  --color-accent-400: oklch(from #C37C37 0.72 0.11 55);
  --color-accent-300: oklch(from #C37C37 0.82 0.09 55);

  /* Ink — dark teal-tinted neutrals (default surfaces) */
  --color-ink-950: #0A1614;
  --color-ink-900: #10201C;
  --color-ink-800: #172B25;
  --color-ink-700: #233A33;
  --color-ink-600: #3B5951;

  /* Cream — warm light neutrals (text) */
  --color-cream-50: #FCFAF6;
  --color-cream-100: #F2ECDE;
  --color-cream-200: #DCD3BE;
  --color-cream-400: #9C927C;

  /* Semantic surfaces & text */
  --surface-page: var(--color-ink-950);
  --surface-card: var(--color-ink-900);
  --surface-sunken: var(--color-ink-800);
  --surface-accent-tint: rgba(195, 124, 55, 0.14);

  --text-heading: var(--color-cream-100);
  --text-body: var(--color-cream-200);
  --text-muted: var(--color-cream-400);
  --text-on-accent: #241505;
  --text-link: var(--color-accent-400);

  --border-default: var(--color-ink-700);
  --border-strong: var(--color-ink-600);
  --border-hairline-accent: rgba(195, 124, 55, 0.35);
  --border-focus: var(--color-accent-500);

  /* Type */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-display-xl: 4rem;
  --text-display-lg: 3rem;
  --text-display-md: 2.25rem;
  --text-heading-lg: 1.75rem;
  --text-heading-md: 1.375rem;
  --text-heading-sm: 1.125rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-mono: 0.12em;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;
  /* Wurde auf der Referenzseite benutzt, war aber nie angelegt: Abstand
     zwischen den Fallstudien und vor "Weitere Arbeiten" fiel auf null,
     die Fälle klebten aneinander (gefunden 25.09.2026). */
  --space-10: 8rem;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);

  /* Motion — understated, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
}

/* ============================ BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-normal) var(--ease-standard); }
a:hover { color: var(--color-accent-300); }

img, svg { display: block; max-width: 100%; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* Eyebrow / caption label — DS: uppercase, wide tracking, sparingly */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-400);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--border-hairline-accent);
}

/* Mono spec chips — the technical-drawing signature */
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-semibold);
  padding: 14px 26px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }

.btn--accent { background: var(--color-accent-500); color: var(--text-on-accent); }
.btn--accent:hover { background: var(--color-accent-700); color: var(--text-on-accent); }

.btn--outline { border-color: var(--color-accent-500); color: var(--text-heading); background: transparent; }
.btn--outline:hover { background: var(--color-accent-500); color: var(--text-on-accent); }

.btn--ghost { color: var(--text-heading); background: transparent; border-color: var(--border-default); }
.btn--ghost:hover { border-color: var(--border-strong); color: var(--text-heading); }

.btn .arrow { transition: transform var(--duration-normal) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------------- Mikro-Interaktionen ----------------
   Aus der Dribbble-Sammlung abgeleitet, siehe
   04 Ressourcen/Webdesign und Shop/Dribbble Sammlung Website.md.
   Bewusst nur das, was eine Rueckmeldung gibt — kein Effekt um des
   Effekts willen. Alles in reinem CSS: die Content-Security-Policy
   der Seite laesst keine Fremdskripte zu.
   ------------------------------------------------------ */

/* Der Knopf hebt beim Zeigen minimal an. Ein Millimeter reicht, um
   anfassbar zu wirken; mehr wuerde die ruhige Flaeche unruhig machen. */
.btn--accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--accent:active { transform: translateY(0) scale(0.97); box-shadow: none; }

/* Bestaetigung nach "In den Warenkorb". Der Knopf sagt fuer gut eine
   Sekunde, dass es geklappt hat, und kehrt dann zurueck. Ohne diese
   Rueckmeldung bleibt nur das Aufgehen der Schublade — und wer die
   schon offen hat, sieht ueberhaupt nichts passieren. */
.btn.is-ok {
  background: var(--color-primary-700);
  color: #F4EFE6;
  border-color: var(--color-primary-700);
  transform: none;
  box-shadow: none;
}
.btn.is-ok:hover { background: var(--color-primary-700); color: #F4EFE6; transform: none; }

/* Der Haken wird gezeichnet, nicht eingeblendet: erst der kurze
   Schenkel, dann der lange. Das liest sich als Vorgang statt als
   Symbol, das ploetzlich da ist. */
.btn__tick {
  position: relative; display: inline-block;
  width: 14px; height: 14px; flex: 0 0 14px;
}
.btn__tick::before,
.btn__tick::after {
  content: ''; position: absolute;
  width: 2px; background: currentColor; border-radius: 1px;
  transform-origin: bottom center;
}
.btn__tick::before {
  height: 6px; left: 2px; top: 6px;
  transform: rotate(-45deg) scaleY(0);
  animation: tick-kurz 140ms var(--ease-standard) forwards;
}
.btn__tick::after {
  height: 12px; left: 8px; top: 1px;
  transform: rotate(45deg) scaleY(0);
  animation: tick-lang 180ms 120ms var(--ease-standard) forwards;
}
@keyframes tick-kurz { to { transform: rotate(-45deg) scaleY(1); } }
@keyframes tick-lang { to { transform: rotate(45deg)  scaleY(1); } }

/* Eingabefelder: eine Linie, die aus der Mitte waechst. Sie ersetzt
   keinen Fokusring — der bleibt fuer die Tastatur zustaendig. */
.feld-linie { position: relative; }
.feld-linie::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-accent-500);
  transform: scaleX(0);
  transition: transform var(--duration-normal) var(--ease-standard);
}
.feld-linie:focus-within::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .btn--accent:hover, .btn--accent:active { transform: none; }
  .btn__tick::before { animation: none; transform: rotate(-45deg) scaleY(1); }
  .btn__tick::after  { animation: none; transform: rotate(45deg)  scaleY(1); }
  .feld-linie::after { transition: none; }
}

/* ============================ HEADER ============================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
}
.site-header__inner {
  height: 84px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; }
.brand img { height: 54px; width: auto; transition: height var(--duration-slow) var(--ease-standard); }
.site-header.is-scrolled .brand img { height: 44px; }

/* Sechs Punkte statt vier: der Abstand darf enger werden, sonst
   reicht die Zeile auf einem 1280er Bildschirm nicht mehr. */
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a { color: var(--text-body); font-size: var(--text-body-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.nav a:not(.nav__cta):not(.cart-btn):hover { color: var(--color-accent-400); }
.nav a[aria-current="page"]:not(.nav__cta):not(.cart-btn) { color: var(--color-accent-400); }
.nav__cta {
  color: var(--text-heading); font-weight: var(--weight-semibold);
  padding: 9px 20px; border: 1.5px solid var(--color-accent-500); border-radius: var(--radius-sm);
  transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}
.nav__cta:hover { background: var(--color-accent-500); color: var(--text-on-accent); }

/* Warenkorb. Stand bis 23.08.2026 in shop.css und fehlte damit auf
   Startseite und Home & Living — der Kopf ist überall derselbe, das
   Aussehen gehört deshalb in die Basisdatei. */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-heading);
  font-size: var(--text-body-sm);
  background: transparent; cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.cart-btn:hover { border-color: var(--border-hairline-accent); }
.cart-btn svg { width: 17px; height: 17px; flex: none; }
.cart-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-500); color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: 0.66rem;
  display: grid; place-items: center;
}
.cart-badge:empty, .cart-badge[data-count="0"] { display: none; }

/* ---- Shop mit Untermenü ----
   Automobil und Zuhause hängen unter dem Shop, statt eigene Punkte in
   der Zeile zu belegen. Am Zeiger klappt es beim Überfahren auf, mit
   der Tastatur beim Fokussieren, auf dem Telefon steht es dauerhaft
   eingerückt darunter — dort gibt es kein Überfahren. */
.nav__gruppe { position: relative; display: flex; align-items: center; }

.nav__haupt { display: inline-flex; align-items: center; gap: 5px; }
.nav__pfeil {
  width: 13px; height: 13px; flex: none; opacity: 0.6;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nav__gruppe:hover .nav__pfeil,
.nav__gruppe:focus-within .nav__pfeil { transform: rotate(180deg); opacity: 1; }

.nav__unter {
  position: absolute; top: 100%; left: -14px;
  display: flex; flex-direction: column;
  min-width: 190px; padding: 8px;
  margin-top: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast);
  z-index: 60;
}
/* Die Lücke zwischen Punkt und Klappe überbrücken: sonst schließt sie,
   sobald der Zeiger den Zwischenraum kreuzt. */
.nav__unter::before {
  content: ""; position: absolute; inset: -12px 0 100% 0;
}
.nav__gruppe:hover .nav__unter,
.nav__gruppe:focus-within .nav__unter,
.nav__gruppe.ist-offen .nav__unter {
  opacity: 1; visibility: visible; transform: none;
}
.nav__unter a {
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-body);
}
.nav__unter a:hover { background: var(--surface-sunken); color: var(--color-accent-400); }

.nav-toggle { display: none; }

/* ============================ HERO (Video-Hintergrund) ============================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  /* Deep-Teal-Fallback: sofortige, markengerechte Fläche bevor das Video lädt */
  background: var(--color-primary-900);
}
/* Full-Bleed-Video */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--color-primary-900); }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; /* zentriert auf Person/Lampe */
  display: block;
}
/* Overlay: teal-getönt, oben leichter (Motiv sichtbar), unten dunkel (Text lesbar) */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10,22,20,0.30) 0%,
      rgba(10,22,20,0.18) 34%,
      rgba(10,22,20,0.62) 72%,
      rgba(10,22,20,0.94) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(10,22,20,0.35) 100%);
}
/* Das feine Raster ueber dem Video ist am 11.09.2026 entfernt worden
   (Wunsch von Luca, per Screenshot). Es legte sich als Kachelmuster
   ueber die Aufnahme und nahm ihr die Tiefe.

   Die Abdunklung darueber BLEIBT: Sie ist kein Schmuck, sondern der
   Grund, warum die Ueberschrift auf einem bewegten Bild lesbar ist. */
.hero__inner {
  position: relative; z-index: 2;
  margin-top: auto; /* Inhalt in die untere Bildhälfte */
  padding-top: clamp(120px, 30vh, 340px);
  padding-bottom: clamp(28px, 5vh, 52px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5);
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.5rem);
  font-weight: var(--weight-semibold);
  max-width: 16ch;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 2px 30px rgba(10,22,20,0.6);
}
.hero h1 .accent { color: var(--color-accent-400); }
.hero__sub {
  max-width: 54ch; color: var(--text-body); font-size: var(--text-body-lg);
  text-shadow: 0 1px 16px rgba(10,22,20,0.7);
}
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* Hero spec strip — reads like a drawing title block */
.spec-strip {
  position: relative; z-index: 2;
  border-top: 1px solid var(--border-hairline-accent);
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--color-ink-950) 78%, transparent);
  backdrop-filter: blur(8px);
}
.spec-strip__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4);
}
.spec {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.spec__k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-muted); }
.spec__v { font-size: var(--text-body-sm); color: var(--text-heading); font-weight: var(--weight-medium); }
.spec + .spec { position: relative; }

/* ============================ SECTION SHELL ============================ */
.section { padding-block: clamp(64px, 11vh, 120px); }

/* ---- Gitter im Hintergrund ----
   Von der alten Startseite übernommen (11.10.2026, Wunsch von Luca): ein
   feines 64-px-Raster in der Linienfarbe, das zu den Rändern weich
   ausläuft, darüber ein schwacher Kupferschein. Es liegt nur oben im
   Abschnitt, hinter Überschrift und den ersten Inhalten. Einsatz:
   class="mit-gitter" am Abschnitt, <div class="gitter"> als erstes Kind. */
.mit-gitter { position: relative; overflow: hidden; isolation: isolate; }
.mit-gitter > .wrap { position: relative; z-index: 1; }
.gitter {
  position: absolute; top: 0; left: 0; right: 0; height: min(760px, 100%);
  z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--border-default) 0, var(--border-default) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(to bottom, var(--border-default) 0, var(--border-default) 1px, transparent 1px, transparent 64px);
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 40% 35%, black 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 40% 35%, black 0%, transparent 75%);
}
.mit-gitter::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -120px; left: 40%; transform: translateX(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: var(--color-accent-500); opacity: 0.08; filter: blur(90px);
}
.section--card { background: var(--surface-card); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }

.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 60ch; margin-bottom: var(--space-8); }
.section-head h1, .section-head h2 { font-size: clamp(1.9rem, 3.6vw, var(--text-display-md)); }
.section-head p { color: var(--text-body); font-size: var(--text-body-lg); }

/* ============================ VERFAHREN ============================
   Ersetzt seit 23.08.2026 die Nummernkette 01–04 und die beiden
   Detailkarten darunter. Die trugen dieselbe Information zweimal.
   Jetzt eine Zeile je Verfahren, mit dem Maß, das wirklich zählt. */
.verfahren { list-style: none; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.verfahren li {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr 12rem;
  gap: var(--space-4) var(--space-6); align-items: baseline;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  transition: background var(--duration-slow) var(--ease-standard);
}
.verfahren li:last-child { border-bottom: none; }
.verfahren li:hover { background: var(--surface-sunken); }
.verfahren__name { color: var(--text-heading); font-size: var(--text-heading-sm); font-weight: var(--weight-medium); }
.verfahren__note { color: var(--text-muted); font-size: var(--text-body-sm); }
.verfahren__max {
  color: var(--color-accent-400); font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-mono); white-space: nowrap; text-align: right;
}
.verfahren__fuss { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-body-sm); max-width: 68ch; }

/* ============================ DIENSTLEISTUNGEN ============================
   Eine Zeile je Verfahren, abwechselnd seitenverkehrt. Die Bildfläche
   steht als Platzhalter schon da, damit klar ist, welches Format
   gebraucht wird — Querformat 4:3. */
.leistungen { display: flex; flex-direction: column; gap: var(--space-9); }
/* Flex statt zweier fester Spalten (11.10.2026): Ist das Bild im Admin
   ausgeblendet, nimmt der Text die ganze Zeile, statt neben einer
   leeren Spalte zu stehen. Die Absätze sind deshalb begrenzt — in der
   halben Breite greift die Grenze nie, allein bleibt die Zeile lesbar. */
.leistung {
  display: flex;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.leistung > * { flex: 1 1 0; min-width: 0; }
.leistung:nth-child(even) .leistung__media { order: 2; }
.leistung__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-sunken); border: 1px solid var(--border-default);
}
.leistung__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leistung__media[data-platzhalter] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); border-style: dashed; color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.leistung__media[data-platzhalter] .mono { color: var(--color-accent-400); font-size: var(--text-display-md); }
.leistung__text { display: flex; flex-direction: column; gap: var(--space-4); }
.leistung__nr {
  color: var(--color-accent-400); font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-mono);
}
.leistung__text h3 { font-size: clamp(1.5rem, 2.6vw, var(--text-heading-lg)); }
.leistung__text p { color: var(--text-muted); font-size: var(--text-body-md); max-width: 68ch; }

.leistungen__fuss {
  margin-top: var(--space-9); padding: var(--space-7);
  border: 1px solid var(--border-hairline-accent); border-radius: var(--radius-md);
  background: var(--surface-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.leistungen__fuss h3 { font-size: var(--text-heading-md); }
.leistungen__fuss p { color: var(--text-body); max-width: 62ch; }

/* ============================ REFERENZEN ============================
   Gerüst. Die Kacheln stehen bewusst schon im Raster, damit sichtbar
   ist, wie viel Bild gebraucht wird — Hochformat 4:5, gleiche Größe. */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
/* hidden setzt referenzen.js, wenn es keine sichtbaren Fälle oder Kacheln
   gibt. Ohne diese Regel gewänne display: flex/grid gegen das Attribut. */
.cases[hidden], .ref-grid[hidden], [data-ref-rasterkopf][hidden] { display: none; }
.ref { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ref__bild {
  aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-sunken); border: 1px solid var(--border-default);
}
.ref__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref__bild[data-platzhalter] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); border-style: dashed; color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.ref__bild[data-platzhalter] .mono { color: var(--color-accent-400); font-size: var(--text-heading-md); }
/* Kachel, deren Foto im Admin ausgeblendet ist (11.10.2026): Statt eines
   leeren Rahmens trägt die Beschriftung selbst die Fläche. */
.ref--ohne-bild {
  padding: var(--space-6); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-card);
}
.ref h3 { font-size: var(--text-heading-sm); margin-bottom: var(--space-3); }
.ref__daten { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.ref__daten > div { display: flex; gap: var(--space-3); }
.ref__daten dt {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--text-muted); min-width: 84px;
}
.ref__daten dd { margin: 0; color: var(--text-body); font-size: var(--text-body-sm); }
.ref-hinweis { margin-top: var(--space-8); color: var(--text-muted); font-size: var(--text-body-sm); max-width: 68ch; }
.ref-hinweis a { color: var(--text-link); }

/* ============================ FEHLERSEITE ============================ */
.fehler {
  max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-9) 0;
}
.fehler__code {
  font-size: clamp(3.5rem, 12vw, 7rem); line-height: 1;
  color: var(--color-accent-500); opacity: 0.35; letter-spacing: -0.02em;
}
.fehler h1 { font-size: clamp(1.8rem, 4vw, var(--text-display-md)); }
.fehler p { color: var(--text-muted); }
.fehler__wege { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.fehler__hinweis { font-size: var(--text-body-sm); }
.fehler__hinweis a { color: var(--text-link); }

/* ============================ FAQ ============================
   <details>/<summary> statt JavaScript: funktioniert ohne Skript,
   ist von Haus aus zugänglich und im Seitentext auffindbar. */
.faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 78ch; }
.faq__gruppe {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--color-accent-400);
  margin-top: var(--space-7); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default); font-weight: var(--weight-medium);
}
.faq__gruppe:first-child { margin-top: 0; }
.faq__item { border-bottom: 1px solid var(--border-default); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6) var(--space-4) 0;
  color: var(--text-heading); font-size: var(--text-body-md);
  font-weight: var(--weight-medium); position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--color-accent-400);
  border-bottom: 1.5px solid var(--color-accent-400);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item summary:hover { color: var(--color-accent-300); }
.faq__item summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.faq__a { padding: 0 var(--space-6) var(--space-5) 0; }
.faq__a p { color: var(--text-muted); font-size: var(--text-body-sm); max-width: 68ch; }
.faq__a a { color: var(--text-link); }

/* ============================ FALLSTUDIEN ============================
   Ausführliche Referenzen: Bild links, Text rechts, im Wechsel. Bewusst
   breiter angelegt als die Kacheln im Raster darunter — zwei erzählte
   Fälle tragen die Seite, sechs Stichworte nicht. */
.cases { display: flex; flex-direction: column; gap: var(--space-10); }
.case {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.case:nth-child(even) { grid-template-columns: 7fr 5fr; }
.case:nth-child(even) .case__media { order: 2; }
/* Fallstudie ohne Foto (11.10.2026): eine Spalte, der Text bleibt durch
   die Grenzen von Lead und Blöcken lesbar. */
.case.case--ohne-bild, .case.case--ohne-bild:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
.case__media {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  position: sticky; top: calc(var(--space-8) + 64px);
}
.case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__media[data-platzhalter] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); border-style: dashed; color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.case__media[data-platzhalter] .mono { color: var(--color-accent-400); font-size: var(--text-display-md); }
.case__text { display: flex; flex-direction: column; gap: var(--space-4); }
.case__nr {
  font-size: 0.68rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-accent-400);
}
.case__text h3 { font-size: clamp(1.5rem, 2.6vw, var(--text-heading-lg)); }
.case__lead { color: var(--text-body); font-size: var(--text-body-md); max-width: 62ch; }
.case__block { display: flex; flex-direction: column; gap: var(--space-2); }
.case__block h4 {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-medium);
}
.case__block p { color: var(--text-muted); font-size: var(--text-body-sm); max-width: 64ch; }
.case__daten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5); margin: var(--space-3) 0 0;
  padding-top: var(--space-5); border-top: 1px solid var(--border-default);
}
.case__daten > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case__daten dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--text-muted);
}
.case__daten dd { margin: 0; color: var(--text-body); font-size: var(--text-body-sm); }

/* ============================ ÜBER UNS / TEAM ============================ */
/* Flex statt Raster (11.10.2026), aus demselben Grund wie bei den
   Leistungen: ohne Teamfoto steht der Text allein, ohne leere Hälfte. */
.about { display: flex; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about > * { flex: 1 1 0; min-width: 0; }
.about__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.about__copy h2 { font-size: clamp(1.9rem, 3.4vw, var(--text-display-md)); }
.about__copy p { color: var(--text-body); max-width: 68ch; }
.about__stats { display: flex; gap: var(--space-7); margin-top: var(--space-2); flex-wrap: wrap; }
.stat__v { font-family: var(--font-mono); font-size: var(--text-heading-lg); color: var(--text-heading); font-weight: var(--weight-medium); }
.stat__k { display: block; font-size: var(--text-body-sm); color: var(--text-muted); margin-top: 2px; }

.about__media { position: relative; }
.about__frame {
  position: relative; border: 1px solid var(--border-hairline-accent);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg);
}
/* margin: 0, weil der Rahmen seit 11.10.2026 ein <figure> ist (Standardrand
   40 px). height: auto, weil sonst die height-Angabe im Markup das
   Seitenverhältnis aushebelt und das Foto zum schmalen Hochformat wird. */
.about__frame { margin: 0; }
.about__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 50% 12%; }
.about__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,20,0.55), transparent 55%);
  pointer-events: none;
}
.about__caption {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4); padding-inline: var(--space-1);
}
.about__caption .name { color: var(--text-heading); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); display: block; }
.about__caption .role { color: var(--color-accent-400); font-size: var(--text-caption); font-family: var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

/* Das Kontaktband ist am 23.08.2026 von der Startseite verschwunden.
   Kontakt läuft über kontakt.html, das Aussehen steht in shop.css. */

/* ============================ FOOTER ============================ */
.site-footer { background: var(--surface-page); border-top: 1px solid var(--border-default); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
.footer-brand img { height: 56px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { color: var(--text-muted); font-size: var(--text-body-sm); max-width: 32ch; }
.footer-col h4 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-heading); margin-bottom: var(--space-4); font-weight: var(--weight-semibold); }
.footer-col a, .footer-col span { display: block; color: var(--text-muted); font-size: var(--text-body-sm); margin-bottom: var(--space-3); }
.footer-col a:hover { color: var(--color-accent-400); }
.footer-bottom { padding-block: var(--space-5); border-top: 1px solid var(--border-default); color: var(--text-muted); font-size: var(--text-body-sm); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom .mono { font-size: 0.7rem; }

/* ============================ SCROLL REVEAL ============================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .brand img, .site-header.is-scrolled .brand img { transition: none; }
}

/* ============================ FILM ============================
   Eine Einstellung, volle Breite, nichts daneben. Der Abschnitt trägt
   keine Überschrift: Was zu sehen ist, erklärt sich, und eine
   Beschriftung würde den Blick vom Objekt wegziehen.
   ============================================================ */
.film-section { padding-block: var(--space-8); }

.film {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--color-primary-900);
  aspect-ratio: 16 / 9;
}

.film__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Platzhalter liegt darunter und kommt erst zum Vorschein, wenn das
   Video fehlt. Andersherum — Platzhalter oben, Video später einblenden —
   würde beim Laden kurz flackern. */
.film__ph {
  position: absolute; inset: 0;
  display: none; place-items: center; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted); line-height: 1.9;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.018) 22px 44px),
    var(--color-primary-900);
}
.film__ph strong { display: block; color: var(--color-accent-400); font-weight: var(--weight-medium); }

.film.ist-leer .film__video { display: none; }
.film.ist-leer .film__ph { display: grid; }

/* ============================ AUSWAHL ============================
   Ein Foto je Produkt, nebeneinander und ohne Text. Mit Maus hebt sich
   das Foto beim Darüberfahren ab, die Kachel wächst, und rechts daneben
   klappt eine schmale Spalte mit Kurztext und Preis auf. Die Reihe ist
   mittig ausgerichtet und wandert dabei ruhig mit, statt zu springen.

   Ohne Maus (Telefon, Tablet) gibt es kein Darüberfahren. Dort stehen
   Text und Preis von Anfang an unter dem Foto — ein Effekt, den man
   nicht auslösen kann, darf keine Information verstecken. Auf dem
   Tablet quer stehen sie daneben, siehe unten. Ein Tippen führt
   direkt zum Produkt, es gibt keinen Zwischenschritt.
   ============================================================ */
.auswahl-section { padding-bottom: var(--space-6); }

.auswahl-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.auswahl-kopf h2 { font-size: clamp(1.6rem, 3vw, var(--text-display-md)); margin: 0; }

.auswahl {
  --auswahl-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  display: grid; gap: var(--space-6) var(--space-4);
  /* Auf dem Telefon zwei schmale Spalten statt einer vollen Breite —
     ein 4:5-Foto über die ganze Breite ist fast ein Bildschirm hoch. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.auswahl__kachel { display: flex; flex-direction: column; gap: var(--space-4); color: inherit; text-decoration: none; }
.auswahl__kachel:focus-visible { outline: none; }

.auswahl__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.018) 22px 44px),
    var(--surface-sunken);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    transform 700ms var(--auswahl-ease),
    box-shadow 700ms var(--auswahl-ease),
    border-color 700ms var(--auswahl-ease),
    opacity 500ms var(--auswahl-ease),
    filter 500ms var(--auswahl-ease);
}
.auswahl__rahmen {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit;
  display: grid; place-items: center;
}
.auswahl__rahmen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Ohne Foto im Katalog bleibt das Bild verborgen und der Platzhalter
   steht. Die Regel darüber ist spezifischer als [hidden] des Browsers
   und zeigte sonst ein kaputtes Bild mit Alt-Text. */
.auswahl__rahmen img[hidden] { display: none; }

.auswahl__info { min-width: 0; }
.auswahl__text { display: flex; flex-direction: column; gap: var(--space-2); }
.auswahl__text h3 { font-size: var(--text-heading-sm); margin: 0; color: var(--text-heading); hyphens: auto; overflow-wrap: break-word; }
.auswahl__text p { font-size: var(--text-body-sm); color: var(--text-body); margin: 0; line-height: var(--leading-normal); }
.auswahl__preis {
  margin-top: var(--space-2);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  color: var(--color-accent-400); font-size: var(--text-body-md);
}
.auswahl__text small { font-size: var(--text-caption); color: var(--text-muted); }

/* Touch ab Tablet quer. Fassung vom 09.10.2026: Hier steht von Anfang
   an der Zustand, den am Rechner die Maus auslöst — Foto links, Kurztext
   und Preis rechts daneben. Vorher liefen die zwei Spalten über die volle
   Breite, auf dem iPad quer war jedes Foto gut 530 × 670 px groß und der
   Bereich höher als der Bildschirm. Hochkant und am Telefon bleibt der
   Text unter dem Foto. */
@media (min-width: 1000px) and (hover: none), (min-width: 1000px) and (pointer: coarse) {
  .auswahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    max-width: 1040px; margin-inline: auto;
  }
  .auswahl__kachel { flex-direction: row; align-items: center; gap: var(--space-5); }
  .auswahl__bild { flex: 0 0 46%; }
  .auswahl__info { flex: 1 1 auto; }
}

/* Ohne Maus gibt das Foto beim Antippen kurz nach, wie die Knöpfe. */
@media (hover: none) {
  .auswahl__kachel:active .auswahl__bild { transform: scale(0.97); transition-duration: 120ms; }
}

/* Nur mit echter Maus und genug Breite. Fassung vom 03.10.2026: Der
   Rahmen gehört der ganzen Kachel, nicht dem Foto. In Ruhe liegt er eng
   um das Foto; beim Darüberfahren hebt er sich ab und wird nach rechts
   breiter, Kurztext und Preis stehen dann mit im Rahmen. Das Foto
   selbst behält seine Größe — es wächst nicht mit. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .auswahl {
    display: flex; justify-content: center; align-items: center;
    gap: var(--space-7);
    min-height: calc(clamp(240px, 22vw, 300px) * 1.25 + 80px);
  }
  .auswahl__kachel {
    flex-direction: row; align-items: center; gap: 0;
    /* Kein Innenabstand: Das Foto sitzt bündig in den Ecken links oben
       und unten, der Rahmen schneidet die Rundung (Wunsch 03.10.2026). */
    padding: 0; overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition:
      transform 700ms var(--auswahl-ease),
      box-shadow 700ms var(--auswahl-ease),
      border-color 700ms var(--auswahl-ease),
      opacity 500ms var(--auswahl-ease),
      filter 500ms var(--auswahl-ease);
  }
  /* Im Rahmen braucht das Foto keine eigene Linie mehr. */
  .auswahl__bild { width: clamp(240px, 22vw, 300px); flex: 0 0 auto; border: 0; border-radius: 0; }

  .auswahl__info {
    width: 0; overflow: hidden;
    transition: width 700ms var(--auswahl-ease);
  }
  .auswahl__text {
    width: 280px; padding: 0 var(--space-5) 0 var(--space-6);
    opacity: 0; transform: translateX(-14px);
    transition: opacity 350ms var(--auswahl-ease), transform 700ms var(--auswahl-ease);
  }

  .auswahl__kachel:hover,
  .auswahl__kachel:focus-visible {
    transform: translateY(-10px);
    border-color: var(--border-hairline-accent);
    box-shadow: 0 34px 60px -18px rgba(0,0,0,0.75), 0 12px 24px rgba(0,0,0,0.35);
  }
  .auswahl__kachel:hover .auswahl__info,
  .auswahl__kachel:focus-visible .auswahl__info { width: 280px; }
  .auswahl__kachel:hover .auswahl__text,
  .auswahl__kachel:focus-visible .auswahl__text {
    opacity: 1; transform: none;
    transition: opacity 500ms var(--auswahl-ease) 180ms, transform 700ms var(--auswahl-ease) 120ms;
  }
  /* Die anderen treten zurück, damit das gewählte Stück allein steht.
     Nur wenn wirklich eine Kachel unter der Maus ist — mit .auswahl:hover
     reichte schon die Lücke dazwischen, und beim Scrollen wurden beide
     Kacheln dunkel, sobald der Bereich unter dem Zeiger durchlief. */
  .auswahl:has(.auswahl__kachel:hover) .auswahl__kachel:not(:hover) { opacity: 0.45; filter: saturate(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .auswahl__kachel, .auswahl__bild, .auswahl__info, .auswahl__text { transition: none !important; }
  .auswahl__kachel:hover { transform: none; }
}

/* ============================ MOOD ============================
   Drei Bilder, eines davon groß. Kein Text, keine Knöpfe — der
   Abschnitt setzt die Stimmung und verkauft noch nichts.
   ============================================================ */
.mood {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 880px;
  margin-inline: auto;
}

.mood__bild {
  position: relative; margin: 0;
  display: grid; place-items: center;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.018) 22px 44px),
    var(--surface-sunken);
  overflow: hidden;
}
.mood__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mood__bild--gross { grid-row: span 2; aspect-ratio: 16 / 9; }
/* Seit 11.10.2026 nur noch zwei Bilder (Tischlampe raus): Das kleine
   nimmt dann beide Zeilen neben dem grossen ein. */
.mood__bild:not(.mood__bild--gross):last-child:nth-child(2) { grid-row: span 2; }

/* ============================ RESPONSIVE ============================ */

/* Die Kopfzeile klappt früher zusammen als der Rest der Seite: sechs
   Punkte plus Warenkorb brauchen mehr Zeile als vier. */
@media (max-width: 1080px) {
  .nav { position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-default);
    padding: var(--space-3) var(--gutter) var(--space-5);
    transform: translateY(-120%); visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
    max-height: calc(100svh - 84px); overflow-y: auto; }
  /* visibility: Das zugeklappte Menü liegt nur hochgeschoben über der
     Seite. Mit der Entwurfsleiste darüber ragte sein unteres Ende, der
     Warenkorb-Knopf, oben ins Bild — und seine Links blieben mit der
     Tabulatortaste erreichbar. Beim Schließen erst nach der Bewegung. */
  .nav.is-open { transform: none; visibility: visible;
    transition: transform var(--duration-slow) var(--ease-standard), visibility 0s; }
  .nav a { padding-block: var(--space-4); border-bottom: 1px solid var(--border-default); font-size: var(--text-body-md); }
  .nav a.nav__cta { border: 1.5px solid var(--color-accent-500); border-radius: var(--radius-sm); text-align: center; margin-top: var(--space-4); }
  .nav a.cart-btn { justify-content: center; margin-top: var(--space-3); border-radius: var(--radius-sm); }

  /* Im Mobilmenü gibt es kein Überfahren. Die beiden Bereiche stehen
     deshalb offen und eingerückt unter dem Shop, der Pfeil entfällt. */
  .nav__gruppe { display: block; }
  .nav__pfeil { display: none; }
  .nav__unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; margin: 0; border: none; box-shadow: none;
    background: transparent; border-radius: 0;
  }
  .nav__unter::before { content: none; }
  .nav__unter a { padding-left: var(--space-5); color: var(--text-muted); border-radius: 0; }
  .nav__unter a:hover { background: transparent; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    color: var(--text-heading); cursor: pointer; }
}

@media (max-width: 960px) {
  .verfahren li { grid-template-columns: 1fr auto; }
  .verfahren__note { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 900px) {
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .case, .case:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-5); }
  .case:nth-child(even) .case__media { order: 0; }
  .case__media { position: static; aspect-ratio: 3 / 2; }
  .cases { gap: var(--space-9); }
}

@media (max-width: 780px) {
  .leistung { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .leistung > * { flex: none; }
  .leistung:nth-child(even) .leistung__media { order: 0; }
  .leistungen { gap: var(--space-8); }
  .about { flex-direction: column; align-items: stretch; }
  .about > * { flex: none; }
  .about__media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .ref-grid { grid-template-columns: 1fr; }
  .case__daten { grid-template-columns: 1fr; }
  .verfahren li { grid-template-columns: 1fr; gap: var(--space-2); }
  .verfahren__max { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Mood: aus dem Versatz wird eine Spalte. Zwei schmale Bilder
     nebeneinander auf dem Telefon zeigen von keinem etwas. */
  .mood { grid-template-columns: 1fr; grid-template-rows: none; }
  .mood__bild--gross { grid-row: auto; }
  .mood__bild { aspect-ratio: 16 / 9; }
  .film { aspect-ratio: 4 / 3; }
  .spec-strip__inner { gap: var(--space-4) var(--space-6); }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}


/* ============================ NEWSLETTER ============================
   Wunsch vom 11.09.2026, zwischen Banner und Film. Ruhige Flaeche,
   ein Feld, ein Knopf — kein Kasten, der sich in den Vordergrund
   draengt. Die Anordnung folgt der Referenz aus der Brain-Dump-Notiz
   (dunkles Modul mit kurzer Nutzenzeile), nicht deren Tonfall.
   ==================================================================== */
.nl-section { padding-block: var(--space-8); }

/* minmax(0, …) statt 1fr: Safari rechnet die Mindestbreite des
   E-Mail-Felds in die Spalte ein, die Spalte lief dann am iPhone rechts
   aus dem Kasten (09.10.2026). Chrome zeigte das nicht. */
.nl {
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
@media (min-width: 900px) {
  .nl { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); }
}
.nl__text h2 { margin: 0 0 var(--space-4); }
.nl__text p { color: var(--text-body); margin: 0; max-width: 46ch; }

/* Themenliste statt Fliesstext (Fassung vom 11.09.2026). Mono und
   Versalien wie bei den uebrigen Kennwerten der Seite, damit die Zeile
   als Aufzaehlung gelesen wird und nicht als Satz. Der Trenner sitzt
   am Listenpunkt, nicht im Text — so bleibt er beim Umbruch korrekt. */
.nl__themen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-body);
}
.nl__themen li { display: flex; align-items: center; gap: var(--space-3); }
/* Jedes Thema trägt seinen Punkt vorn, die Liste ist um genau diese
   Breite nach links gerückt und dort abgeschnitten. So verschwindet der
   Punkt vor dem ersten Thema jeder Zeile — auch nach einem Umbruch, wo
   er vorher am Zeilenanfang stehen blieb (Telefon, 25.09.2026). */
.nl__themen { margin-left: calc(-1ch - var(--space-3)); clip-path: inset(0 0 0 calc(1ch + var(--space-3))); }
.nl__themen li::before { content: "\00b7"; width: 1ch; text-align: center; color: var(--color-accent-400); }

.nl__form { display: flex; flex-direction: column; gap: var(--space-4); }

.nl__ok { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.nl__ok input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-accent-500); }
.nl__ok span { font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }

.nl__hinweis { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.nl__hinweis--ok { color: var(--color-accent-400); }
.nl__hinweis--warn { color: #C98A8A; }

/* Koederfeld: aus dem Blick und aus dem Tabulatorlauf, aber nicht
   display:none — manche Bots ueberspringen genau das. */
.nl__koeder {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Beschriftung nur fuer Vorleseprogramme. Nicht display:none — das
   nimmt sie auch dem Screenreader weg, und dann steht dort ein Feld
   ohne Namen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}



/* ---------------- Feld und Erfolgsanimation ----------------
   Nachgebaut nach "Email input" von Clément Brichon aus Lucas
   Dribbble-Sammlung. Die Bewegung ist 1:1 uebernommen, Farben und
   Wortlaut sind unsere:

     1. Das Feld ist eine Pille mit eingesetztem Rundknopf
     2. Beim Absenden zieht sich die Pille nach rechts in den Knopf
        zurueck, der Knopf bleibt stehen
     3. Uebrig bleibt der Kreis, dahinter pulst ein Hof auf
     4. Der Pfeil im Kreis wird zum Haken
     5. Der Text erscheint Wort fuer Wort von links nach rechts

   Die Vorlage steht auf Signalblau mit Signalgruen. Unsere Palette
   kennt kein Gruen; Kupfer auf dunklem Grund traegt dieselbe Aussage,
   ohne eine zweite Farbwelt aufzumachen.
   ----------------------------------------------------------- */
.nl__reihe { position: relative; display: flex; align-items: center; gap: 18px; min-height: 56px; }

.nl__pille {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: var(--color-cream-50);
  transition: width 440ms cubic-bezier(0.65, 0, 0.35, 1),
              background 180ms 400ms linear;
}
.nl__pille:focus-within { box-shadow: 0 0 0 2px var(--color-accent-500); }

.nl__pille input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  padding: 12px 8px 12px 20px;
  font-family: var(--font-sans); font-size: var(--text-body-sm);
  color: var(--color-ink-950);
  transition: opacity 140ms linear;
}
@media (hover: none) { .nl__pille input[type="email"] { font-size: 16px; } }
.nl__pille input[type="email"]::placeholder { color: #8C8578; }
.nl__pille input[type="email"]:focus { outline: none; }

.nl__senden {
  position: relative; z-index: 2;
  flex: 0 0 44px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-accent-500);
  transition: background var(--duration-normal) var(--ease-standard),
              transform 120ms var(--ease-standard);
}
.nl__senden:hover { background: var(--color-accent-600); }
.nl__senden:active { transform: scale(0.94); }
.nl__senden:focus-visible { outline: 2px solid var(--color-cream-100); outline-offset: 3px; }

/* Pfeil aus zwei Strichen statt als Bild: skaliert sauber und kostet
   keinen zusaetzlichen Ladevorgang. */
.nl__pfeil { position: absolute; inset: 0; transition: opacity 160ms 380ms linear, transform 160ms 380ms var(--ease-standard); }
.nl__pfeil::before, .nl__pfeil::after { content: ''; position: absolute; background: var(--text-on-accent); }
/* Schaft und Spitze liegen beide auf der Mittellinie des 44er Knopfes
   (y = 22). Die Spitze wird ueber ihre SPITZE gesetzt, nicht ueber den
   rechten Rand: Ein um 45 Grad gedrehtes Quadrat hat seine Spitze
   0,707 mal Seitenlaenge rechts von seiner Mitte, nicht an seiner
   Kante. Ueber `right` positioniert sass sie dadurch 1,5 px zu hoch. */
.nl__pfeil::before { left: 13px; top: 21px; width: 15px; height: 2px; border-radius: 1px; }
.nl__pfeil::after {
  left: 20.1px; top: 17.5px; width: 9px; height: 9px;
  background: transparent;
  border-top: 2px solid var(--text-on-accent);
  border-right: 2px solid var(--text-on-accent);
  transform: rotate(45deg);
}

/* Der Haken wird gezeichnet, erst der kurze Schenkel, dann der lange. */
/* Der Haken ist EIN Element mit zwei Raendern, kein Paar Striche.
   Zwei getrennte Striche drehen jeweils um ihren eigenen Fusspunkt;
   dabei schwenken die unteren Ecken auseinander und hinterlassen im
   Knick eine Kerbe. Ein Kasten mit `border-left` und `border-bottom`,
   um -45 Grad gedreht, hat dort eine echte, vom Browser gefasste Ecke.

   Gezeichnet wird ueber Hoehe und Breite: erst waechst der kurze
   Schenkel (Hoehe), dann der lange (Breite). Der Drehpunkt liegt auf
   der unteren linken Ecke, also im Knick — der bleibt dadurch stehen,
   waehrend die Schenkel herauswachsen. */
.nl__haken { position: absolute; inset: 0; }
/* Beide Striche drehen um DENSELBEN Punkt — den Knick des Hakens bei
   (21, 26) im 44er Kreis. Vorher hatte jeder seinen eigenen Drehpunkt:
   die Striche trafen sich nicht, und der kurze lief unten links aus dem
   Kreis heraus. Die Spitzen liegen jetzt bei (16, 21) und (31, 16),
   beide rund 11 px vom Mittelpunkt entfernt und damit sicher innerhalb
   des Radius von 22 px. */
/* Knick bei (19 | 27,5) im 44er Kreis. Damit liegen die Spitzen bei
   (13,3 | 21,8) und (30,3 | 16,2), die Marke ist auf (21,8 | 21,9)
   zentriert — der Kreismittelpunkt ist (22 | 22). */
.nl__haken::before {
  content: ''; position: absolute;
  left: 19px; bottom: 16.5px;
  width: 0; height: 0;
  border-left: 2.5px solid var(--text-on-accent);
  border-bottom: 2.5px solid var(--text-on-accent);
  transform-origin: left bottom;
  transform: rotate(-45deg);
  opacity: 0;
}

/* Der Hof hinter dem Kreis. Liegt auf der Pille, nicht im Knopf,
   damit er groesser werden kann als sein Traeger. */
.nl__pille::after {
  content: ''; position: absolute; z-index: 0;
  right: 6px; top: 6px; width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent-500);
  opacity: 0; transform: scale(1);
}

/* ---- Der Ablauf ---- */
.nl__reihe.ist-fertig .nl__pille { background: transparent; box-shadow: none; }
/* Das Feld muss beim Zusammenziehen VOLLSTAENDIG verschwinden, auch
   seine Polsterung. `min-width: 0` laesst nur den Inhalt schrumpfen —
   die 28 px Innenabstand (20 links, 8 rechts) bleiben stehen und
   schieben den Knopf aus der Pille heraus. Genau daran klebte der Text
   am Kreis und verdeckte vorher den ersten Buchstaben. */
.nl__reihe.ist-fertig .nl__pille input[type="email"] {
  opacity: 0;
  padding-left: 0; padding-right: 0;
  flex-basis: 0; width: 0;
  transition: opacity 120ms linear,
              padding 440ms cubic-bezier(0.65, 0, 0.35, 1),
              width 440ms cubic-bezier(0.65, 0, 0.35, 1);
}
.nl__reihe.ist-fertig .nl__senden { cursor: default; }
.nl__reihe.ist-fertig .nl__pfeil { opacity: 0; transform: translateX(6px); }
.nl__reihe.ist-fertig .nl__haken::before {
  animation: haken-kurz 150ms 520ms var(--ease-standard) forwards,
             haken-lang 200ms 650ms var(--ease-standard) forwards;
}
/* Die Deckkraft wird in der Bewegung mitgefuehrt: Waehrend der
   Verzoegerung gilt noch der Ausgangszustand, ab dem ersten Bild der
   Bewegung ist der Haken sichtbar, und `forwards` haelt das. */
@keyframes haken-kurz { from { opacity: 1; height: 0; } to { opacity: 1; height: 8px; } }
@keyframes haken-lang { to { width: 16px; } }
.nl__reihe.ist-fertig .nl__pille::after  { animation: nl-hof 700ms 400ms var(--ease-standard) forwards; }

@keyframes nl-hof {
  0%   { opacity: 0.30; transform: scale(1); }
  100% { opacity: 0;    transform: scale(2.6); }
}

/* Die Zeile liegt ueber der Flaeche, die die Pille vorher eingenommen
   hat. Dadurch braucht sie vorher keinen Platz und steht hinterher
   genau rechts neben dem Kreis. */
.nl__wort {
  margin: 0; display: flex; gap: 0.32em; white-space: nowrap;
  max-width: 0; overflow: hidden;
  transition: max-width 1ms 560ms linear;
  font-size: var(--text-body-md); font-weight: var(--weight-semibold);
  color: var(--text-heading);
  pointer-events: none;
}
.nl__wort span {
  opacity: 0; transform: translateY(7px);
  transition: opacity 280ms var(--ease-standard), transform 280ms var(--ease-standard);
}
/* Platz bekommt die Zeile erst, wenn die Pille zusammengezogen ist
   (440 ms). Bis dahin ist sie null Pixel breit und kann nichts
   verdecken. Der Sprung faellt nicht auf, weil die Woerter selbst erst
   ab 700 ms erscheinen. */
.nl__reihe.ist-fertig .nl__wort { max-width: 60ch; }
.nl__reihe.ist-fertig .nl__wort span { opacity: 1; transform: translateY(0); }
.nl__reihe.ist-fertig .nl__wort span:nth-child(1) { transition-delay: 700ms; }
.nl__reihe.ist-fertig .nl__wort span:nth-child(2) { transition-delay: 820ms; }
.nl__reihe.ist-fertig .nl__wort span:nth-child(3) { transition-delay: 940ms; }

@media (prefers-reduced-motion: reduce) {
  .nl__pille, .nl__pille input[type="email"], .nl__pfeil, .nl__wort span { transition: none; }
  .nl__reihe.ist-fertig .nl__haken::before { animation: none; width: 16px; height: 8px; opacity: 1; }
  .nl__reihe.ist-fertig .nl__pille::after  { animation: none; opacity: 0; }
}

/* Medienstellen ohne Inhalt bleiben weg.
   Ein Platz, für den noch nichts hochgeladen ist, trägt im Markup ein
   hidden-Bild neben seinem Platzhalter (siehe medien.js). Das hidden
   allein genügt nicht: Regeln wie .mood__bild img { display: block }
   sind spezifischer als das [hidden] des Browsers, das Bild stand
   deshalb als leere Fläche mit Alt-Text in der Seite. */
[data-medium][hidden] { display: none; }

/* "Vertrag widerrufen" muss nach § 356a BGB hervorgehoben stehen,
   nicht als einer von fünf gleichen Links. */
.footer-col a.footer-widerruf { color: var(--color-accent-400); font-weight: 600; }
.footer-col a.footer-widerruf:hover { color: var(--color-accent-300); }