/* Nur für die statische Vorschau: bindet alle Dateien ein (im Theme lädt jeder Block seine CSS selbst). */
/* Tokens realmaker.de (realmaker software) — einzige Quelle für Werte.
   Primitive oben, semantische Tokens darunter. Blöcke nutzen nur semantische Tokens.
   Farben aus BRAND.md; Kobalt-Fläche ist die abgeleitete Stufe für Flächen mit Text (Weiß 4,7:1). */
/* Plus Jakarta Sans — OFL-1.1 — lokal via "wd font" (2026-10-07) */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-vf-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-vf-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Outfit — OFL-1.1 — lokal via "wd font" (2026-10-07) */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit/outfit-vf-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit/outfit-vf-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


:root {
  /* Primitive */
  --rm-kobalt: #0979FE;          /* Punkt, Akzent (Logo) */
  --rm-kobalt-hell: #4993FF;     /* Kobalt auf dunklem Grund (6,4:1 auf Nacht) */
  --rm-kobalt-flaeche: #076EEB;  /* Fläche mit Text darauf */
  --rm-kobalt-text: #0565DA;     /* Kobalt als Schrift/Link auf Weiß (5,4:1) */
  --rm-kobalt-nebel: #E8F1FF;
  --rm-nacht: #090C12;
  --rm-nacht-2: #121722;
  --rm-tinte: #101216;
  --rm-papier: #F4F3EF;
  --rm-papier-2: #ECEAE4;
  --rm-weiss: #FFFFFF;
  --rm-grau-700: #3A3F48;
  --rm-grau-600: #5A5F68;        /* auf Weiß 6,4:1 */
  --rm-grau-300: #A7ADB8;        /* auf Nacht 8,7:1 */
  --rm-grau-200: #D4D8E0;
  --rm-linie-hell: #E2E0DA;
  --rm-linie-dunkel: #222836;
  --rm-gruen: #13803B;
  --rm-media: #FF1A2A;            /* Media-Punkt auf dunklem Grund */
  --rm-media-hell: #F40D1F;       /* Media-Punkt auf hellem Grund */
  --rm-media-flaeche: #EA011A;    /* Signalrot-Fläche mit Text: Weiß 4,65:1 */
  --rm-media-text: #D50017;       /* Rot als Schrift auf Weiß/Papier (5,5:1 / 4,9:1) */
  --rm-media-wort-dunkel: #FF1A2A;/* Signalrot auf Media-Nacht (5,0:1) – Punkt, Linien, Schrift */
  --rm-media-nacht: #120D0A;
  --rm-media-nacht-2: #1E1612;
  --rm-media-grau: #B7AEA6;       /* auf Media-Nacht 8,8:1 */
  --rm-media-linie: #2E241E;
  --rm-games: #FFC21A;
  --rm-wpe: #05CC5F;              /* wp-einfach: Punkt + „.de“ auf dunklem Grund (9,1:1 auf Nacht) */
  --rm-wpe-hell: #01A84D;         /* Punkt + „.de“ auf hellem Grund */
  --rm-wpe-flaeche: #00873C;      /* Grün-Fläche mit Text: Weiß 4,6:1 */
  --rm-wpe-text: #007936;         /* Grün als Schrift auf Weiß/Papier (5,5:1 / 5,0:1) */
  --rm-wpe-nebel: #E5F5EB;

  /* Semantisch */
  --color-bg: var(--rm-papier);
  --color-surface: var(--rm-weiss);
  --color-text: var(--rm-tinte);
  --color-text-muted: var(--rm-grau-600);
  --color-accent: var(--rm-kobalt);
  --color-accent-text: var(--rm-kobalt-text);
  --color-accent-contrast: var(--rm-weiss);
  --color-line: var(--rm-linie-hell);
  --color-flaeche: var(--rm-kobalt-flaeche);
  --color-dunkel: var(--rm-nacht);
  --color-dunkel-2: var(--rm-nacht-2);
  --color-auf-dunkel: var(--rm-papier);
  --color-auf-dunkel-muted: var(--rm-grau-300);
  --color-line-dunkel: var(--rm-linie-dunkel);
  --color-punkt: var(--rm-kobalt);
  --color-akzent-dunkel: var(--rm-kobalt-hell);   /* Akzent als Schrift/Linie auf dunklem Grund */
  --color-fokus-schein: rgba(9, 121, 254, 0.18);
  --color-akzent-nebel: var(--rm-kobalt-nebel);   /* zarte Akzentfläche (gewählte Option, Hinweis) */
  --color-ok: var(--rm-gruen);

  /* Schrift */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Größen (fluid 390 → 1440 px) */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.35vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.65vw, 1.95rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.3vw, 2.75rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.4vw, 3.9rem);
  --step-5: clamp(2.7rem, 1.7rem + 4vw, 5.25rem);
  --step-6: clamp(3.3rem, 1.6rem + 6.6vw, 7.5rem);

  /* Abstände */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem;
  --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 6.5rem;
  --section-space-s: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
  --section-space-m: clamp(4.5rem, 3rem + 6vw, 9rem);
  --section-space-l: clamp(5.5rem, 3.5rem + 8vw, 11rem);
  --breite: 86rem;            /* Inhalt maximal 1376 px – Farbflächen laufen voll */
  --breite-text: 38rem;
  --rand: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);

  /* Form */
  --radius-s: 0.5rem; --radius-m: 0.875rem; --radius-l: 1.5rem; --radius-xl: 2rem; --radius-pill: 999px;
  --schatten-s: 0 1px 2px rgba(16, 18, 22, 0.06), 0 4px 12px -4px rgba(16, 18, 22, 0.1);
  --schatten-l: 0 30px 70px -30px rgba(9, 12, 18, 0.45), 0 14px 30px -16px rgba(9, 12, 18, 0.3);

  /* Bewegung — der Punkt rastet ein: schnell rein, kleiner Überschwinger, Ruhe */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);
  --dur-s: 160ms; --dur-m: 280ms; --dur-l: 520ms;
}

/* Skin realmaker media: dieselben Blöcke, wärmer – Rot statt Kobalt, Media-Nacht statt Nacht.
   Der Punkt blinkt wie REC (BRAND.md). */
[data-skin="media"] {
  --color-accent: var(--rm-media-hell);
  --color-accent-text: var(--rm-media-text);
  --color-flaeche: var(--rm-media-flaeche);
  --color-dunkel: var(--rm-media-nacht);
  --color-dunkel-2: var(--rm-media-nacht-2);
  --color-auf-dunkel-muted: var(--rm-media-grau);
  --color-line-dunkel: var(--rm-media-linie);
  --color-punkt: var(--rm-media-hell);
  --color-akzent-dunkel: var(--rm-media-wort-dunkel);
  --color-fokus-schein: rgba(244, 13, 31, 0.2);
  --color-akzent-nebel: #FDE8EA;
}

/* Skin wp-einfach.de: dieselben Blöcke, Grün als vierte Familienfarbe, Grund Nacht. */
[data-skin="wpeinfach"] {
  --color-accent: var(--rm-wpe-hell);
  --color-accent-text: var(--rm-wpe-text);
  --color-flaeche: var(--rm-wpe-flaeche);
  --color-punkt: var(--rm-wpe-hell);
  --color-akzent-dunkel: var(--rm-wpe);
  --color-fokus-schein: rgba(1, 168, 77, 0.22);
  --color-akzent-nebel: var(--rm-wpe-nebel);
}

/* Grundlagen: Reset, Typografie, Browser-Flächen, Container, Knöpfe, Kopf und Fuß (Theme-Teile). */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-tap-highlight-color: var(--color-fokus-schein); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--color-bg); color: var(--color-text); font: 400 var(--step-0)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 760; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; hyphens: manual; }   /* 1.1: Umlaut-Punkte (Ü, Ä) stoßen nicht an die Zeile darüber */
p { text-wrap: pretty; }
strong, b { font-weight: 650; }
.zahl { font-variant-numeric: tabular-nums; }
.ohne-umbruch { white-space: nowrap; }   /* deutsche Typografie: Bindestrich-Wörter nicht trennen */
.neue-zeile { display: block; }   /* zweiter Satz einer Überschrift beginnt auf eigener Zeile */
@media (min-width: 40em) { .ohne-umbruch-breit { white-space: nowrap; } }   /* letzte zwei Wörter binden, wo das Paar auf dem Handy zu breit wäre */
@media (max-width: 63.99em) { .ohne-umbruch-schmal { white-space: nowrap; } }   /* bindet nur, solange Köpfe einspaltig sind (zweispaltig wäre das Paar zu breit) */
@media (max-width: 39.99em) { :is(.b-leistungen__kopf, .b-preise__kopf, .b-prozess__kopf, .b-referenzen-teaser__kopf) .titel--lang { font-size: min(var(--step-5), 8vw); } }   /* lange Überschrift: auf dem Handy so klein, dass die letzten zwei Wörter zusammen passen */
.komma { margin-left: -0.07em; }   /* Komma in großen Überschriften näher ans Wort (Plus Jakarta setzt es sonst abgesetzt) */

/* Browser-Flächen */
::selection { background: var(--color-flaeche); color: #fff; }
:focus-visible { outline: 3px solid var(--fokus, var(--color-accent)); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #B9BCC3 var(--color-bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #B9BCC3; border-radius: 6px; border: 3px solid var(--color-bg); }
::-webkit-scrollbar-track { background: var(--color-bg); }
input, textarea, select { caret-color: var(--color-accent); accent-color: var(--color-accent); }

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.8rem 1.2rem; border-radius: var(--radius-s); background: var(--rm-nacht); color: #fff; font-weight: 600; text-decoration: none; transition: top var(--dur-s) var(--ease-out); }
.skip-link:focus { top: 1rem; }

/* Der Punkt – Akteur der Marke */
.punkt { display: inline-block; width: 0.24em; height: 0.24em; margin-left: 0.035em; border-radius: 50%; background: var(--punkt-farbe, var(--color-accent)); vertical-align: baseline; }

/* Steuerzeile unter Preisen (Preisangabenverordnung): Bruttopreis groß, darunter klein „inkl. 19 % MwSt. · … € zzgl. MwSt.“.
   Zwei Zeilen (getrennt mit br), jede mit geschützten Leerzeichen gebunden. */
.steuer { display: block; margin-top: 0.45rem; font: 500 var(--step--1)/1.35 var(--font-body); letter-spacing: 0; color: var(--color-text-muted); white-space: normal; font-variant-numeric: tabular-nums; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.35rem; padding: 0 1.55rem; border-radius: var(--radius-m); border: 1.5px solid transparent;
  font: 650 1.0625rem/1 var(--font-body); letter-spacing: 0.002em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out); }
.knopf:active { transform: scale(0.97); }
.knopf__pfeil { width: 1.05em; height: 1.05em; transition: transform var(--dur-m) var(--ease-out); }
.knopf--primaer { background: var(--color-flaeche); color: #fff; }
.knopf--leise { border-color: #C9CCD2; color: var(--color-text); }
.knopf--weiss { background: #fff; color: var(--color-flaeche); }
.knopf--rahmen-weiss { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .knopf--primaer:hover { background: var(--color-dunkel); }
  .knopf--leise:hover { border-color: var(--color-text); }
  .knopf--weiss:hover { background: var(--color-dunkel); color: #fff; }
  .knopf--rahmen-weiss:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
  .knopf:hover .knopf__pfeil { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .knopf, .knopf__pfeil, .textlink svg { transition: none; } .knopf:active { transform: none; } .knopf:hover .knopf__pfeil, .textlink:hover svg { transform: none !important; } }
.textlink { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 650; color: var(--color-accent-text); text-decoration: none; }
.textlink svg { width: 1em; height: 1em; transition: transform var(--dur-m) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration: underline; } .textlink:hover svg { transform: translateX(3px); } }

/* Gestaltete Platzhalter für fehlendes Material */
[data-placeholder] { position: relative; display: grid; place-items: end start; background: repeating-linear-gradient(135deg, var(--rm-papier-2) 0 1px, transparent 1px 14px), var(--rm-papier);
  color: var(--rm-grau-600); font: 500 var(--step--1)/1.4 var(--font-body); padding: 1.1rem; border: 1px dashed #CFCCC4; }
[data-placeholder]::before { content: 'Bild folgt'; position: absolute; top: 1rem; left: 1.1rem; font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); }

/* ——— Kopf ——— */
.site-header { --kopf-hoehe: 4.75rem; position: sticky; top: 0; z-index: 40; color: #fff; background: var(--color-flaeche); transition: background-color var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out); --fokus: #fff; }
.site-header__inner { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.75rem); min-height: 4.75rem; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 1.5rem; width: auto; }
.site-header__logo .logo-farbe, .site-header__logo .logo-mono { display: none; }
.site-header__nav { margin-left: auto; }
.site-header__nav ul { display: flex; gap: clamp(1.1rem, 2vw, 2.1rem); }
.site-header__nav a { display: block; padding: 0.7rem 0; font: 600 0.98rem/1 var(--font-body); text-decoration: none; position: relative; }
.site-header__nav a::after { content: ''; position: absolute; left: 50%; bottom: 0.05rem; width: 0.4rem; height: 0.4rem; margin-left: -0.2rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--dur-m) var(--ease-snap); }
@media (hover: hover) and (pointer: fine) { .site-header__nav a:hover::after { transform: scale(1); } }
.site-header__nav a[aria-current="page"]::after, .site-header__nav a[aria-current="true"]::after { transform: scale(1); }   /* aktive Seite: der Punkt steht */
.site-header__sprache { font: 600 0.85rem/1 var(--font-body); letter-spacing: 0.04em; text-decoration: none; padding: 0.7rem 0.2rem; }
.site-header__sprache span { opacity: 0.75; }
.site-header[data-ton="kobalt"] .site-header__sprache span, .site-header[data-ton="farbe"] .site-header__sprache span { opacity: 1; font-weight: 450; }   /* auf Kobalt: gedämpftes Weiß erreicht kein 4,5:1 */
.site-header__aktion { min-height: 2.9rem; padding: 0 1.2rem; font-size: 0.98rem; background: #fff; color: var(--color-flaeche); }
@media (hover: hover) and (pointer: fine) { .site-header__aktion:hover { background: var(--color-dunkel); color: #fff; } }
.site-header__menue { display: none; margin-left: auto; align-items: center; gap: 0.55rem; min-height: 2.9rem; padding: 0 1.1rem; border-radius: var(--radius-m); border: 1.5px solid currentColor; background: none; font-weight: 650; cursor: pointer; }
.site-header__menue i { display: grid; gap: 4px; }
.site-header__menue i::before, .site-header__menue i::after { content: ''; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--dur-m) var(--ease-out); }
.site-header[data-offen] .site-header__menue i::before { transform: translateY(3px) rotate(45deg); }
.site-header[data-offen] .site-header__menue i::after { transform: translateY(-3px) rotate(-45deg); }

/* Der Kopf nimmt den Ton des Abschnitts an, über dem er liegt: hell · dunkel · Bereichsfarbe (JS setzt data-ton). */
.site-header[data-ton="dunkel"] { background: rgba(9, 12, 18, 0.82); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
[data-skin="media"] .site-header[data-ton="dunkel"] { background: rgba(18, 13, 10, 0.84); }
@supports (backdrop-filter: blur(1px)) { .site-header[data-ton="dunkel"] { backdrop-filter: saturate(1.3) blur(14px); } }
.site-header[data-ton="dunkel"] .site-header__aktion { background: var(--color-flaeche); color: #fff; }
.site-header[data-ton="farbe"] { background: var(--color-flaeche); color: #fff; }
.site-header[data-ton="farbe"] .logo-weiss { display: none; }
.site-header[data-ton="farbe"] .logo-mono { display: block; }
/* Heller Kopf, sobald der Kobalt-Bereich verlassen ist */
.site-header[data-ton="hell"] { background: rgba(244, 243, 239, 0.92); color: var(--color-text); box-shadow: 0 1px 0 var(--color-line); --fokus: var(--color-accent); }
@supports (backdrop-filter: blur(1px)) { .site-header[data-ton="hell"] { background: rgba(244, 243, 239, 0.8); backdrop-filter: saturate(1.4) blur(14px); } }
.site-header[data-ton="hell"] .logo-weiss { display: none; }
.site-header[data-ton="hell"] .logo-farbe { display: block; }
.site-header[data-ton="hell"] .site-header__aktion { background: var(--color-flaeche); color: #fff; }

/* Schmale Handys: „realmaker software“ ist 10 : 1 breit – Logo etwas kleiner (bleibt weit über der Mindestgröße von 80 px), Menü-Knopf kompakter */
@media (max-width: 24em) { .site-header__logo img { height: 1.25rem; } .site-header__menue { padding: 0 0.85rem; } }
@media (max-width: 21em) { .site-header__logo img { height: 1.05rem; } }

@media (max-width: 64em) {
  .site-header__nav, .site-header__sprache, .site-header__aktion { display: none; }
  .site-header__menue { display: inline-flex; }
  .site-header[data-offen] { background: var(--color-flaeche); color: #fff; box-shadow: none; }
  .site-header[data-offen] .logo-weiss { display: block; }
  .site-header[data-offen] .logo-farbe { display: none; }
  .site-header[data-offen] .site-header__nav { display: block; position: fixed; inset: 4.75rem 0 0; padding: 2rem var(--rand) calc(2rem + env(safe-area-inset-bottom)); background: var(--color-flaeche); overflow-y: auto; }
  .site-header[data-offen] .site-header__nav ul { flex-direction: column; gap: 0.25rem; }
  .site-header[data-offen] .site-header__nav a { font: 760 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.03em; padding: 0.55rem 0; }
  .site-header[data-offen] .site-header__nav a::after { display: none; }
}
.mobil-aktion { display: none; }
@media (max-width: 64em) {
  .site-header[data-offen] .mobil-aktion { display: grid; gap: 0.75rem; margin-top: 2rem; }
}

/* ——— Fuß ——— */
.site-footer { background: var(--color-dunkel); color: var(--color-auf-dunkel); padding: var(--section-space-s) 0 calc(2rem + env(safe-area-inset-bottom)); --fokus: var(--color-akzent-dunkel); }
.site-footer ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.site-footer__oben { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-line-dunkel); }
.site-footer__marke img { height: 1.5rem; width: auto; }
.site-footer__marke p { margin-top: 1.25rem; max-width: 28ch; color: var(--color-auf-dunkel-muted); }
.site-footer__spalte h2 { font: 650 0.85rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-auf-dunkel-muted); margin-bottom: 1.1rem; }
.site-footer__spalte ul { display: grid; gap: 0.15rem; }
.site-footer__spalte a { display: inline-block; padding: 0.4rem 0; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .site-footer__spalte a:hover { color: var(--color-akzent-dunkel); } }
.site-footer__unten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; justify-content: space-between; padding-top: 1.75rem; font-size: var(--step--1); color: var(--color-auf-dunkel-muted); }
.site-footer__unten ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-footer__unten a { display: inline-block; padding: 0.55rem 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer__unten a:hover { color: #fff; } }
@media (min-width: 48em) { .site-footer__oben { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* Skin media: Der Kopf liegt wie bei software und games auf dem Grund des Heros – hier auf dem Bild,
   also durchsichtig mit weichem Verlauf im Hero; erst nach dem Hero wird er zur hellen Leiste. */
[data-skin="media"] .site-header[data-ton="kobalt"] { background: transparent; }
[data-skin="media"] .site-header[data-ton="kobalt"] .site-header__aktion { background: var(--color-flaeche); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  [data-skin="media"] .site-header[data-ton="kobalt"] .site-header__aktion:hover { background: #fff; color: var(--color-accent-text); }
}
@media (max-width: 64em) {
  [data-skin="media"] .site-header[data-offen], [data-skin="media"] .site-header[data-offen] .site-header__nav { background: var(--color-dunkel); }
}

/* Skin wpeinfach: Kopf liegt im Hero auf Nacht, Knopf grün */
[data-skin="wpeinfach"] .site-header[data-ton="kobalt"] { background: var(--color-dunkel); }
[data-skin="wpeinfach"] .site-header[data-ton="kobalt"] .site-header__aktion { background: var(--color-flaeche); color: #fff; }
@media (hover: hover) and (pointer: fine) { [data-skin="wpeinfach"] .site-header[data-ton="kobalt"] .site-header__aktion:hover { background: #fff; color: var(--color-accent-text); } }
@media (max-width: 64em) { [data-skin="wpeinfach"] .site-header[data-offen], [data-skin="wpeinfach"] .site-header[data-offen] .site-header__nav { background: var(--color-dunkel); } }

/* b-hero — Variante „punkt“: Kobalt-Fläche, große Typografie, der Schlusspunkt rastet beim Laden ein. */
.b-hero { background: var(--color-flaeche); color: #fff; padding-block: clamp(1.5rem, 4vh, 3.5rem) var(--section-space-s); overflow: clip; --fokus: #fff; }
.b-hero ::selection { background: #fff; color: var(--color-flaeche); }
.b-hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

.b-hero__titel { font-size: var(--step-6); font-weight: 780; letter-spacing: -0.04em; word-spacing: 0.02em; line-height: 0.92; max-width: 9.6ch; }
.b-hero__punkt { --punkt-farbe: var(--rm-nacht); animation: b-hero-einrasten 1150ms both 300ms; }
@keyframes b-hero-einrasten {
  0%   { transform: translateY(-2.2em); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .35); }
  12%  { opacity: 1; }
  60%  { transform: translateY(0) scale(1.2, 0.76); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  77%  { transform: translateY(-0.08em) scale(0.95, 1.06); }
  90%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { transform: none; opacity: 1; }
}

.b-hero__einleitung { margin-top: clamp(1.5rem, 3vh, 2.25rem); font: 500 var(--step-1)/1.45 var(--font-body); max-width: 31ch; }
.b-hero__aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.b-hero__belege { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: clamp(2rem, 4vh, 3rem); padding-top: 1.35rem; border-top: 1px solid rgba(255, 255, 255, 0.4); font: 500 1.0625rem/1.4 var(--font-body); }
.b-hero__belege b { font: 750 1.3rem/1 var(--font-display); letter-spacing: -0.015em; }

.b-hero__bild { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; width: 100%; max-height: min(74vh, 44rem);
  box-shadow: 0 50px 90px -40px rgba(4, 30, 80, 0.55); }
.b-hero__bild img, .b-hero__bild video { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 64em) {
  .b-hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .b-hero__bild { justify-self: end; width: auto; height: min(74vh, 44rem); }
}
@media (max-width: 63.99em) {
  .b-hero__bild { aspect-ratio: 4 / 3.4; max-height: 62vh; }
  .b-hero__bild img { object-position: 50% 42%; }
}
@media (prefers-reduced-motion: reduce) { .b-hero__punkt { animation: none; } }
@media (min-width: 88em) { .b-hero__belege li { white-space: nowrap; } .b-hero__belege { flex-wrap: nowrap; gap: 0.5rem 1.4rem; font-size: 0.98rem; } .b-hero__belege b { font-size: 1.2rem; } }

/* Variante „film“ (realmaker media): vollflächiges Bild, warmes Dunkel, der Punkt blinkt dreimal wie REC und bleibt. */
.b-hero--film { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(94dvh, 58rem);
  margin-top: -4.75rem; padding-block: calc(4.75rem + clamp(5rem, 14vh, 10rem)) clamp(2.5rem, 6vh, 4.5rem); background: var(--color-dunkel); }
/* Weicher Verlauf oben, damit der durchsichtige Kopf auf dem Bild lesbar bleibt */
.b-hero--film::before { content: ''; position: absolute; inset: 0 0 auto; height: 14rem; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 13, 10, 0.72) 0%, rgba(18, 13, 10, 0.35) 45%, rgba(18, 13, 10, 0) 100%); }
.b-hero--film ::selection { background: #fff; color: var(--color-dunkel); }
.b-hero__hintergrund { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.b-hero--film::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(18, 13, 10, 0.88) 0%, rgba(18, 13, 10, 0.62) 42%, rgba(18, 13, 10, 0.08) 75%), linear-gradient(0deg, rgba(18, 13, 10, 0.75) 0%, rgba(18, 13, 10, 0) 45%); }
.b-hero--film .b-hero__inner { width: min(100% - 2 * var(--rand), var(--breite)); }
.b-hero--film .b-hero__titel { max-width: 13ch; font-size: clamp(2.8rem, 1.2rem + 4.6vw, 5.75rem); }
.b-hero--film .b-hero__einleitung { color: #F1ECE7; }
.b-hero__punkt--rec { --punkt-farbe: var(--rm-media); animation: b-hero-einrasten 1150ms both 300ms, rec-blinken 1.2s steps(1, end) 1500ms 3; }
@keyframes rec-blinken { 50% { opacity: 0.15; } }
.knopf__play { width: 1.05em; height: 1.05em; }
@media (min-width: 64em) { .b-hero--film .b-hero__text { max-width: 52rem; } }
@media (max-width: 63.99em) {
  .b-hero--film { min-height: min(92dvh, 46rem); }
  .b-hero--film::after { background: linear-gradient(0deg, rgba(18, 13, 10, 0.92) 0%, rgba(18, 13, 10, 0.7) 55%, rgba(18, 13, 10, 0.2) 100%); }
}
@media (prefers-reduced-motion: reduce) { .b-hero__punkt--rec { animation: none; } }

/* Variante „rechner“ (wp-einfach.de): Nacht-Grund, links das Versprechen, rechts der Preis-Rechner als weiße Karte. */
.b-hero--rechner { background: var(--color-dunkel); padding-block: clamp(2rem, 5vh, 4rem) var(--section-space-m); --fokus: var(--color-akzent-dunkel); }
.b-hero--rechner ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.b-hero--rechner .b-hero__inner { align-items: start; }
.b-hero--rechner .b-hero__titel { font-size: clamp(2.9rem, 1.2rem + 5.2vw, 6.25rem); max-width: 11ch; }
.b-hero--rechner .b-hero__punkt { --punkt-farbe: var(--color-akzent-dunkel); }
.b-hero--rechner .b-hero__einleitung { color: var(--rm-grau-200); }
.b-hero--rechner .b-hero__belege { border-top-color: var(--color-line-dunkel); }
.b-hero--rechner .b-hero__belege b { color: var(--color-akzent-dunkel); }
.b-hero__vertrauen { margin-top: 1rem; color: var(--color-auf-dunkel-muted); font-size: var(--step--1); }
@media (min-width: 64em) {
  .b-hero--rechner .b-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .b-hero--rechner .b-hero__text { padding-top: clamp(1rem, 4vh, 3rem); }
}

/* b-produkt-buehne — „Ein Produkt, alle Kanäle“: Kanalwahl links, das Fenster verwandelt sich mit.
   Die Oberflächen sind Nachbildungen des Offenlegungs-XML Editors mit Beispieldaten. */
.b-produkt-buehne { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-produkt-buehne__inner { display: grid; gap: 2rem; }
.b-produkt-buehne__kopf h2 { font-size: var(--step-4); }
.b-produkt-buehne__kopf .punkt { --punkt-farbe: var(--rm-kobalt); }
.b-produkt-buehne__kopf p { margin-top: 1rem; max-width: 34ch; color: var(--color-text-muted); font-size: var(--step-0); }

/* Kanäle */
.b-produkt-buehne__kanaele { display: grid; gap: 0.1rem; align-content: start; }
.kanal { position: relative; display: grid; grid-template-columns: 1.4rem 1fr; column-gap: 0.4rem; width: 100%; padding: 0.7rem 0 0.8rem; border: 0; border-top: 1px solid var(--color-line); background: none; cursor: pointer; text-align: left; }
.kanal::before { content: ''; grid-row: 1; align-self: center; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rm-kobalt); transform: scale(0); transition: transform var(--dur-l) var(--ease-snap); }
.kanal span { grid-column: 2; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-text-muted); transition: color var(--dur-m) var(--ease-out); }
.kanal small { grid-column: 2; margin-top: 0.2rem; font: 500 0.95rem/1.35 var(--font-body); color: var(--color-text-muted); }
.kanal[aria-selected="true"]::before { transform: scale(1); }
.kanal[aria-selected="true"] span { color: var(--color-text); }
.kanal__zeit { position: absolute; left: 1.8rem; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; }
.kanal__zeit::after { content: ''; position: absolute; inset: 0; background: var(--rm-kobalt); transform-origin: left; transform: scaleX(0); }
.kanal[aria-selected="true"] .kanal__zeit { opacity: 1; }
.b-produkt-buehne__kanaele.laeuft .kanal[aria-selected="true"] .kanal__zeit::after { animation: kanal-zeit var(--dauer, 4500ms) linear forwards; }
@keyframes kanal-zeit { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .kanal:hover span { color: var(--color-text); } }

/* Fenster */
.b-produkt-buehne__geraet { container-type: inline-size; min-width: 0; }
.fenster { position: relative; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); min-height: 33rem; border-radius: 14px; overflow: hidden;
  background: #fff; color: var(--rm-tinte); box-shadow: var(--schatten-l), 0 0 0 1px rgba(16, 18, 22, 0.06); font: 450 0.84rem/1.4 var(--font-body); }
.fenster__chrom { display: flex; align-items: center; gap: 0.5rem; height: 2.6rem; padding: 0 0.9rem; background: #F2F3F5; border-bottom: 1px solid #E4E6EA; font-weight: 600; color: var(--rm-grau-700); }
.fenster__chrom > i { flex: none; width: 0.72rem; height: 0.72rem; border-radius: 50%; background: #D5D8DE; }
.fenster__titel { margin-left: 0.6rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster__adresse { display: none; flex: 1; min-width: 0; max-width: 26rem; margin-inline: auto; height: 1.75rem; padding: 0 0.75rem; border-radius: 0.5rem; background: #fff; border: 1px solid #E1E3E8;
  align-items: center; justify-content: center; gap: 0.4rem; font-weight: 500; color: var(--rm-grau-600); white-space: nowrap; overflow: hidden; }
.fenster__adresse svg { flex: none; width: 0.75rem; height: 0.75rem; }
.fenster[data-chrom="browser"] .fenster__titel { display: none; }
.fenster[data-chrom="browser"] .fenster__adresse { display: flex; }
.fenster__hinweis { margin-left: auto; padding-left: 0.75rem; white-space: nowrap; font: 600 0.7rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rm-grau-600); }

.ansicht { display: none; min-height: 0; }
.ansicht.an { display: grid; animation: ansicht-ein 380ms var(--ease-out); }
@keyframes ansicht-ein { from { opacity: 0; transform: translateY(6px); } }

/* Editor (nach der echten Oberfläche) */
.ansicht--editor { grid-template-columns: 12.5rem minmax(0, 1fr) 12rem; grid-template-rows: auto 1fr; }
.ed-leiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid #ECEEF1; }
.ed-lizenz { padding: 0.2rem 0.45rem; border-radius: 0.3rem; background: #E6F5EC; color: #0F7434; font: 700 0.66rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.ed-modus { display: inline-flex; margin-inline: auto; padding: 0.2rem; border-radius: 0.5rem; background: #F2F3F5; }
.ed-modus > * { padding: 0.32rem 0.7rem; border-radius: 0.35rem; font-weight: 550; color: var(--rm-grau-600); }
.ed-modus b { background: var(--rm-kobalt-flaeche); color: #fff; font-weight: 600; }   /* Fläche statt Punkt-Kobalt: Weiß 4,7:1 */
.ed-ziel { color: var(--rm-grau-600); }
.ed-speichern { padding: 0.38rem 0.75rem; border-radius: 0.4rem; background: var(--rm-kobalt-flaeche); color: #fff; font-weight: 600; }
.ed-links, .ed-rechts { padding: 0.8rem 0.75rem; background: #FAFAFB; overflow: hidden; }
.ed-links { border-right: 1px solid #ECEEF1; }
.ed-rechts { border-left: 1px solid #ECEEF1; display: grid; align-content: start; gap: 0.6rem; }
.ed-gruppe { font: 700 0.66rem/1 var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--rm-grau-600); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 1rem; }
.ed-chips span { padding: 0.25rem 0.5rem; border-radius: 0.3rem; border: 1px solid #E1E3E8; background: #fff; }
.ed-struktur { display: grid; gap: 0.1rem; margin-top: 0.5rem; }
.ed-struktur li { padding: 0.25rem 0.35rem; border-radius: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rm-grau-700); }
.ed-struktur li:nth-child(4) { background: var(--rm-kobalt-nebel); color: var(--rm-kobalt-text); font-weight: 600; }
.ed-mitte { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: #EDEBE6; }
.ed-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #fff; border-bottom: 1px solid #E6E3DD; font-weight: 600; color: var(--rm-grau-600); }
.ed-status i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #C9CCD2; transition: background-color var(--dur-m) var(--ease-out); }
.ed-status.pruefe i { background: var(--rm-kobalt); animation: ed-puls 900ms ease-in-out infinite; }
.ed-status.ok { color: var(--rm-gruen); }
.ed-status.ok i { background: #1E9B4C; }
@keyframes ed-puls { 50% { opacity: 0.35; } }
.ed-blatt { display: grid; align-content: start; gap: 0.6rem; padding: 0.9rem 1rem; overflow: hidden; }
.ed-block { padding: 0.65rem 0.85rem; border-radius: 0.5rem; background: #fff; border: 1px solid #E6E3DD; box-shadow: 0 1px 1px rgba(16, 18, 22, 0.04); transition: border-color var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out); }
.ed-block small { display: block; margin-bottom: 0.3rem; font-size: 0.72rem; color: var(--rm-grau-600); }
.ed-block p { color: var(--rm-grau-700); }
.ed-block--kopf { text-align: center; display: grid; gap: 0.15rem; }
.ed-block--kopf small { text-align: left; }
.ed-block--kopf b { font: 700 1rem/1.3 var(--font-display); }
.ed-block--kopf span { color: var(--rm-grau-600); font-size: 0.78rem; }
.ed-block--kopf strong { font: 700 0.98rem/1.3 var(--font-display); color: var(--rm-kobalt-text); max-width: 30ch; justify-self: center; }
.ed-h { font: 700 1rem/1.2 var(--font-display); color: var(--rm-kobalt-text); }
.ed-block--aktiv { border-color: var(--rm-kobalt); box-shadow: 0 0 0 3px rgba(9, 121, 254, 0.14); }
.ed-block.ok-markiert { border-color: #9FD7B4; }
.ed-format { display: flex; gap: 0.3rem; }
.ed-format > * { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.3rem; border: 1px solid #E1E3E8; background: #fff; font-style: normal; }
.ed-inhalt { padding: 0.6rem; border-radius: 0.4rem; background: #fff; border: 1px solid #E6E3DD; color: var(--rm-grau-700); }
.ed-uebernehmen { padding: 0.45rem; border-radius: 0.4rem; background: var(--rm-kobalt-flaeche); color: #fff; text-align: center; font-weight: 600; }

/* Shop (Preise von offenlegungs-xml-editor.de, Stand 08.10.2026) */
.ansicht--shop { align-content: start; gap: 1.25rem; padding: 1.75rem 2rem; }
.shop-kopf h3 { font: 760 1.6rem/1.15 var(--font-display); letter-spacing: -0.025em; }
.shop-kopf p { margin-top: 0.4rem; color: var(--rm-grau-600); font-size: 0.95rem; }
.shop-tabelle, .ansicht--liste table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.shop-tabelle th, .ansicht--liste th { text-align: left; font-weight: 600; color: var(--rm-grau-600); padding: 0.55rem 0.7rem; border-bottom: 1px solid #E4E6EA; }
.shop-tabelle td, .ansicht--liste td { padding: 0.75rem 0.7rem; border-bottom: 1px solid #F0F1F3; }
.shop-tabelle tr.an td { background: var(--rm-kobalt-nebel); font-weight: 600; }
.shop-tabelle tr.an td:first-child { border-radius: 0.45rem 0 0 0.45rem; } .shop-tabelle tr.an td:last-child { border-radius: 0 0.45rem 0.45rem 0; }
.shop-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--rm-grau-600); }
.shop-knopf { padding: 0.7rem 1.2rem; border-radius: 0.5rem; background: var(--rm-kobalt-flaeche); color: #fff; font-weight: 650; }

/* Listen (Lizenzserver, Portal) und Service */
.ansicht--liste, .ansicht--service { align-content: start; gap: 1.1rem; padding: 1.75rem 2rem; }
.ansicht--liste h3, .ansicht--service h3 { font: 760 1.35rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; }
.marke { display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.marke--ok { background: #E6F5EC; color: var(--rm-gruen); }
.marke--blau { background: var(--rm-kobalt-nebel); color: var(--rm-kobalt-text); }
.service-schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.service-schritte li { display: grid; gap: 0.3rem; padding: 1rem; border-radius: 0.6rem; background: #F4F5F7; }
.service-schritte b { font: 700 0.95rem/1.25 var(--font-display); }
.service-schritte span { color: var(--rm-grau-600); font-size: 0.82rem; }
.service-schritte .fertig { background: #E6F5EC; } .service-schritte .fertig b { color: var(--rm-gruen); }
.service-schritte .jetzt { background: var(--rm-kobalt-nebel); box-shadow: inset 0 0 0 1.5px var(--rm-kobalt); } .service-schritte .jetzt b { color: var(--rm-kobalt-text); }

@container (max-width: 54rem) { .ansicht--editor { grid-template-columns: 12rem minmax(0, 1fr); } .ed-rechts { display: none; } }
@container (max-width: 38rem) {
  .ansicht--editor { grid-template-columns: minmax(0, 1fr); }
  .ed-links, .ed-ziel, .ed-lizenz { display: none; }
  .ed-modus { margin-inline: 0 auto; }
  .ansicht--shop, .ansicht--liste, .ansicht--service { padding: 1.25rem; }
  .service-schritte { grid-template-columns: 1fr 1fr; }
  .schmal-weg, .fenster__hinweis { display: none; }
}

@media (min-width: 64em) {
  .b-produkt-buehne__inner { grid-template-columns: minmax(16rem, 0.36fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 5vw, 5.5rem); row-gap: 2.5rem; }
  .b-produkt-buehne__geraet { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 63.99em) {
  .b-produkt-buehne__kanaele { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
    margin-inline: calc(var(--rand) * -1); padding: 0.1rem var(--rand) 0.4rem; scrollbar-width: none; }
  .b-produkt-buehne__kanaele::-webkit-scrollbar { display: none; }
  .kanal { display: inline-flex; width: auto; flex: none; scroll-snap-align: start; padding: 0.7rem 1.05rem; min-height: 2.75rem; border: 1.5px solid #CFCCC4; border-radius: var(--radius-pill); }
  .kanal::before, .kanal small, .kanal__zeit { display: none; }
  .kanal span { font-size: 1rem; white-space: nowrap; color: var(--color-text); }
  .kanal[aria-selected="true"] { background: var(--rm-tinte); border-color: var(--rm-tinte); }
  .kanal[aria-selected="true"] span { color: #fff; }
  .fenster { min-height: 27rem; }
}
@media (prefers-reduced-motion: reduce) { .ansicht.an { animation: none; } .ed-status.pruefe i { animation: none; } }

/* b-zahlen — Variante „kunden“: ein Satz, danach die Kundennamen groß, getrennt vom Punkt. */
.b-zahlen { padding-block: var(--section-space-s); background: var(--color-surface); }
.b-zahlen__satz { font: 500 var(--step-1)/1.4 var(--font-body); color: var(--color-text-muted); }
.b-zahlen__satz b { color: var(--color-text); font-weight: 650; }
.b-zahlen__namen { margin-top: 1.25rem; font: 760 var(--step-4)/1.16 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.b-zahlen__namen li { display: inline-block; white-space: nowrap; }
.b-zahlen__namen li:not(:last-child)::after { content: ''; display: inline-block; width: 0.19em; height: 0.19em; margin: 0 0.45em 0 0.1em; border-radius: 50%; background: var(--color-punkt); }
@media (max-width: 47.99em) { .b-zahlen__namen { font-size: var(--step-3); } }

/* b-leistungen — Variante „register“: vier Zeilen statt Kartenraster, je Feld ein echtes Beispiel. */
.b-leistungen { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-leistungen__kopf { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.b-leistungen__kopf h2 { font-size: var(--step-5); }
.b-leistungen__kopf p { max-width: 36ch; font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); }
@media (min-width: 64em) { .b-leistungen__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: end; } }
/* Liste (Power-Ups): zwei Sätze in der Überschrift – Kopf gestapelt, zweiter Satz auf eigener Zeile */
.b-leistungen--liste .b-leistungen__kopf { grid-template-columns: minmax(0, 1fr); }
.b-leistungen--liste .b-leistungen__kopf p { max-width: 52ch; }

.b-leistungen__liste { border-bottom: 1px solid var(--color-line); }
.b-leistungen__item { display: grid; gap: 1.25rem 2.5rem; padding-block: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--color-line); }
.b-leistungen__item h3 { position: relative; font-size: var(--step-3); transition: transform var(--dur-l) var(--ease-out); }
.b-leistungen__item h3::before { content: ''; position: absolute; left: -0.62em; top: 0.42em; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--color-punkt); transform: scale(0); transition: transform var(--dur-l) var(--ease-snap); }
.b-leistungen__text { display: grid; gap: 0.85rem; align-content: start; }
.b-leistungen__text p { max-width: 42ch; color: var(--rm-grau-700); }
.b-leistungen__beispiel { font-weight: 600; color: var(--color-text) !important; }
.b-leistungen__bild { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; background: #fff; box-shadow: var(--schatten-s), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.b-leistungen__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 700ms var(--ease-out); }
.b-leistungen__bild [data-placeholder] { height: 100%; border: 0; }

@media (min-width: 64em) {
  .b-leistungen__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.95fr); align-items: start; }
}
@media (hover: hover) and (pointer: fine) {
  .b-leistungen__item:hover h3 { transform: translateX(0.62em); }
  .b-leistungen__item:hover h3::before { transform: scale(1); }
  .b-leistungen__item:hover .b-leistungen__bild img { transform: scale(1.035); }
}
.b-leistungen__bild--dunkel { background: #161B33; }
.b-leistungen__bild--dunkel img { object-position: left top; }

/* Variante „preise“ (realmaker media): Preis statt Bild, groß und offen. */
.b-leistungen__preis { font: 760 var(--step-4)/1 var(--font-display); letter-spacing: -0.035em; white-space: nowrap; }
.b-leistungen__preis small { display: block; margin-bottom: 0.35rem; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: 0.02em; color: var(--color-text-muted); }
.b-leistungen__preis .steuer { margin: 0.5rem 0 0; font: 500 var(--step--1)/1.35 var(--font-body); letter-spacing: 0; white-space: normal; }
@media (min-width: 64em) {
  .b-leistungen--preise .b-leistungen__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.6fr); }
  .b-leistungen--preise .b-leistungen__preis { justify-self: end; text-align: right; }
}

/* Variante „cluster“ (wp-einfach.de): vier Leistungs-Cluster als Liste mit Haken, darunter „Nicht enthalten“. */
.b-leistungen--cluster { background: var(--color-surface); }
.cluster { display: grid; gap: 2rem 2.5rem; }
.cluster > li { padding-top: 1.1rem; border-top: 2px solid var(--color-punkt); }
.cluster h3 { font-size: var(--step-1); margin-bottom: 0.85rem; }
.cluster ul { display: grid; gap: 0.5rem; }
.cluster ul li { position: relative; padding-left: 1.5rem; color: var(--rm-grau-700); line-height: 1.45; }
.cluster ul li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem; background: var(--color-accent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.3 11.6 13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.3 11.6 13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cluster__nicht { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: var(--color-bg); color: var(--rm-grau-700); }
.cluster__nicht b { color: var(--color-text); }
@media (min-width: 48em) { .cluster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .cluster { grid-template-columns: repeat(4, 1fr); } }

/* Variante „liste“ (Power-Ups): Preisliste in Zeilen. */
.b-leistungen--liste { background: var(--color-surface); }
.preisliste { display: grid; border-top: 1px solid var(--color-line); }
.preisliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line); align-items: baseline; }
.preisliste b { font: 700 1.05rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.preisliste span { grid-column: 1; color: var(--color-text-muted); font-size: var(--step--1); }
.preisliste em { grid-column: 2; grid-row: 1 / span 2; font: 750 var(--step-1)/1 var(--font-display); font-style: normal; letter-spacing: -0.02em; color: var(--color-accent-text); white-space: nowrap; align-self: center; }
.preisliste em { text-align: right; }
.preisliste .steuer { margin-top: 0.35rem; font-size: 0.8rem; }
@media (min-width: 64em) { .preisliste { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } .preisliste li { grid-template-columns: minmax(0, 1fr) auto; } }

/* Cluster: kurze Einleitung je Bündel und neutraler Hinweis („Immer dabei“) */
.cluster > li > p { margin-bottom: 0.85rem; color: var(--color-text-muted); line-height: 1.45; }
.cluster__hinweis { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: var(--color-bg); color: var(--rm-grau-700); }
.cluster__hinweis b { color: var(--color-text); }

/* Variante „signalweg“ (Leistungs-Detail Livestream): die Sendekette als Linie mit Reserve.
   Der Punkt ist das Signal: Er läuft über die Hauptleitung; fällt sie aus, springt er auf die Reserve.
   Ohne JavaScript steht der Weg ruhig da, der Punkt am Ziel. */
@property --signal-p { syntax: '<number>'; inherits: false; initial-value: 80; }   /* Position in % der Weglänge */
@property --signal-spur { syntax: '<length>'; inherits: false; initial-value: 30px; }
.b-leistungen--signalweg { background: var(--color-bg); }
.signalweg { --m: 0.55rem; --linie: color-mix(in oklab, var(--color-text) 22%, var(--color-bg)); --strich: repeating-linear-gradient(90deg, var(--linie) 0 6px, transparent 6px 11px); }
.signalweg__bahnen { position: relative; height: 82px; container-type: size; }   /* cqw/cqh für den Punkt */
.signalweg__linie { position: absolute; display: block; height: 2px; background: var(--color-text); }
.signalweg__linie--haupt { top: 29px; left: var(--m); width: 60%; }
.signalweg__linie--haupt-ende { top: 29px; left: calc(60% + var(--m)); width: 20%; }
.signalweg__linie--reserve { top: 65px; left: calc(40% + var(--m)); width: 20%; background: var(--strich); }
.signalweg__linie--reserve-ende { top: 65px; left: calc(60% + var(--m)); width: 20%; background: var(--strich); }
.signalweg__linie--abzweig, .signalweg__linie--wechsel { top: 30px; width: 2px; height: 36px; background: repeating-linear-gradient(180deg, var(--linie) 0 6px, transparent 6px 11px); }
.signalweg__linie--abzweig { left: calc(40% + var(--m) - 1px); }
.signalweg__linie--wechsel { left: calc(60% + var(--m) - 1px); }
.signalweg__knoten { position: absolute; top: 30px; left: calc(var(--x) * 20% + var(--m)); width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border-radius: 50%;
  background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-text); }
.signalweg__knoten--reserve { top: 66px; width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; box-shadow: inset 0 0 0 2px var(--linie); }
.signalweg__marke { position: absolute; font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.signalweg__marke--reserve { top: 74px; left: calc(40% + var(--m) + 0.9rem); }
.signalweg__marke--weg { top: 6px; left: calc(70% + var(--m)); transform: translateX(-50%); color: var(--color-accent-text); opacity: 0; transition: opacity var(--dur-m) var(--ease-out); }
.signalweg__punkt { position: absolute; top: 0; left: 0; width: 0.85rem; height: 0.85rem; margin: -0.425rem 0 0 -0.425rem; border-radius: 50%;
  background: var(--color-punkt); box-shadow: 0 0 0 4px var(--color-bg); z-index: 1;
  translate: calc(var(--signal-p) * 1cqw + var(--m)) var(--signal-spur); will-change: translate; }

/* Ausfall: Hauptleitung nach dem Internet-Knoten unterbrochen, Reserve trägt die Sendung */
.signalweg[data-ausfall] .signalweg__linie--haupt-ende { background: var(--strich); }
.signalweg[data-ausfall] .signalweg__linie--reserve-ende { background: var(--color-text); }
.signalweg[data-ausfall] .signalweg__linie--wechsel { background: var(--color-text); }
.signalweg[data-ausfall] .signalweg__knoten--reserve:last-of-type { box-shadow: inset 0 0 0 2px var(--color-text); }
.signalweg[data-ausfall] .signalweg__marke--weg { opacity: 1; }
.signalweg[data-ausfall] .signalweg__punkt { --signal-spur: 66px; }

/* Der Punkt läuft einmal, wenn der Weg ins Bild kommt (unter 5 s, WCAG 2.2.2), und ruht dann am Ziel.
   Beide Wege haben bis zum Internet-Knoten dasselbe Tempo; beim Umschalten übernimmt site.js die Laufzeit, der Punkt läuft nahtlos weiter. */
.js .signalweg.laeuft .signalweg__punkt { animation: signal-haupt 3.6s linear; }
.js .signalweg.laeuft[data-ausfall] .signalweg__punkt { animation-name: signal-reserve; }
@keyframes signal-haupt {
  0% { --signal-p: 0; --signal-spur: 30px; opacity: 0; } 6% { opacity: 1; }
  88% { --signal-p: 80; --signal-spur: 30px; } 100% { --signal-p: 80; --signal-spur: 30px; opacity: 1; }
}
@keyframes signal-reserve {
  0% { --signal-p: 0; --signal-spur: 30px; opacity: 0; } 6% { opacity: 1; }
  66% { --signal-p: 60; --signal-spur: 30px; animation-timing-function: var(--ease-snap); }
  72% { --signal-p: 60; --signal-spur: 66px; animation-timing-function: linear; }
  94% { --signal-p: 80; --signal-spur: 66px; } 100% { --signal-p: 80; --signal-spur: 66px; opacity: 1; }
}

.signalweg__stationen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1.25rem; }
.signalweg__stationen li { padding-right: 1.5rem; }
.signalweg__stationen b { display: block; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.signalweg__stationen p { margin-top: 0.45rem; color: var(--rm-grau-700); line-height: 1.45; max-width: 24ch; }

.signalweg__fuss { display: grid; gap: 2rem 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--color-line); }
.signalweg__steuerung { display: none; }
.js .signalweg__steuerung { display: grid; gap: 0.85rem; justify-items: start; align-content: start; }
.signalweg__knopf[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.signalweg__status { min-height: 1.6em; font-weight: 600; color: var(--color-text); }
.signalweg__basis { display: grid; border-top: 1px solid var(--color-line); margin-top: 0.75rem; }
.js .signalweg__basis { margin-top: 1.5rem; }
.signalweg__basis li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-line); }
.signalweg__basis b { font: 700 1.02rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.signalweg__basis span { color: var(--rm-grau-700); }
.signalweg__bild { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; }
.signalweg__bild[data-placeholder] { aspect-ratio: 16 / 10; border-radius: var(--radius-m); }
@media (min-width: 64em) { .signalweg__fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Schmal: die Kette läuft senkrecht, Stationen als gleich hohe Zeilen rechts davon */
@media (max-width: 63.99em) {
  .signalweg__weg { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); }
  .signalweg__bahnen { height: auto; }
  .signalweg__linie { width: 2px; height: auto; }
  .signalweg__linie--haupt { top: var(--m); left: 29px; height: 60%; width: 2px; }
  .signalweg__linie--haupt-ende { top: calc(60% + var(--m)); left: 29px; height: 20%; width: 2px; }
  .signalweg__linie--reserve { top: calc(40% + var(--m)); left: 65px; height: 20%; width: 2px; }
  .signalweg__linie--reserve-ende { top: calc(60% + var(--m)); left: 65px; height: 20%; width: 2px; }
  .signalweg { --strich: repeating-linear-gradient(180deg, var(--linie) 0 6px, transparent 6px 11px); }
  .signalweg__linie--abzweig, .signalweg__linie--wechsel { left: 30px; width: 36px; height: 2px; background: repeating-linear-gradient(90deg, var(--linie) 0 6px, transparent 6px 11px); }
  .signalweg__linie--abzweig { top: calc(40% + var(--m) - 1px); }
  .signalweg__linie--wechsel { top: calc(60% + var(--m) - 1px); }
  .signalweg__knoten { top: calc(var(--x) * 20% + var(--m)); left: 30px; }
  .signalweg__knoten--reserve { left: 66px; }
  .signalweg__marke--reserve { top: calc(40% + var(--m) + 1.1rem); left: 54px; writing-mode: vertical-rl; }
  .signalweg__marke--weg { display: none; }
  .signalweg__punkt { translate: var(--signal-spur) calc(var(--signal-p) * 1cqh + var(--m)); }
  .signalweg__stationen { grid-template-columns: none; grid-auto-rows: 1fr; margin-top: 0; }
  .signalweg__stationen li { padding: 0 0 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .js .signalweg.laeuft .signalweg__punkt { animation: none; } }

/* Variante „formate“ (Leistungs-Detail Imagefilm): „Ein Dreh, alle Formate“. Ein echtes Bild, per Knopf auf 16:9, 9:16 oder 1:1
   zugeschnitten; was wegfällt, bleibt gedimmt sichtbar. Ohne JavaScript: volles 16:9-Bild, Formate als Liste. */
.b-leistungen--formate { background: var(--color-bg); }
.formate { --seite: 0%; display: grid; gap: 2rem 4rem; align-items: center; }
.formate[data-format="9x16"] { --seite: 34.18%; }    /* 9:16 im 16:9-Feld: Breite 31,6 % */
.formate[data-format="1x1"] { --seite: 21.875%; }    /* 1:1 im 16:9-Feld: Breite 56,25 % */
.formate__bild { margin: 0; }
.formate__buehne { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--color-dunkel); box-shadow: var(--schatten-l); }
.formate__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formate__rest { opacity: 0.3; filter: grayscale(0.7); }
.formate__ausschnitt { clip-path: inset(0 var(--seite) 0 var(--seite) round var(--radius-m)); transition: clip-path var(--dur-l) var(--ease-out); }
.formate__rahmen { position: absolute; top: 0; bottom: 0; left: var(--seite); right: var(--seite); border: 2px solid #fff; border-radius: var(--radius-m); pointer-events: none;
  transition: left var(--dur-l) var(--ease-out), right var(--dur-l) var(--ease-out); }
.formate__bild figcaption { margin-top: 0.9rem; min-height: 1.5em; font-weight: 600; color: var(--color-text); }
.formate__liste { display: grid; }
.format { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.35rem 0; width: 100%; padding: 1.1rem 0 1.3rem; border: 0; border-top: 2px solid var(--color-line); background: none; text-align: left; cursor: pointer; color: inherit; }
.format b, .format span { grid-column: 2; }
.format::before { content: ''; grid-column: 1; grid-row: 1; align-self: center; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--color-punkt); transform: scale(0); transition: transform var(--dur-m) var(--ease-snap); }   /* der Punkt markiert das gewählte Format */
.formate__liste li:last-child .format { border-bottom: 1px solid var(--color-line); }
.format b { font: 760 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; }
.format span { color: var(--color-text-muted); }
.format[aria-pressed="true"] { border-top-color: var(--color-punkt); }
.format[aria-pressed="true"]::before { transform: scale(1); }
.format:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .format:hover { border-top-color: var(--color-text); } .format[aria-pressed="true"]:hover { border-top-color: var(--color-punkt); } }
html:not(.js) .format { cursor: default; }
@media (min-width: 64em) { .formate { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .formate__ausschnitt, .formate__rahmen, .format::before { transition: none; } }

/* Variante „vorflug“ (Leistungs-Detail Luftaufnahmen): „Sie müssen nichts beantragen“ – die Prüfliste vor jedem Flug.
   Jeder Prüfpunkt ist ein Ring; wenn er ins Bild kommt, rastet der Punkt darin ein (auf schmalen Bildschirmen Zeile für Zeile),
   zuletzt hinter „Startklar“. Ohne JS und bei reduzierter Bewegung stehen alle Punkte sofort. */
.b-leistungen--vorflug { background: var(--color-bg); }
.vorflug { display: grid; gap: 2rem 3rem; }
.vorflug li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.85rem; align-content: start; padding-top: 1.25rem; border-top: 2px solid var(--color-line); }
.vorflug__marke { grid-row: 1 / span 2; position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.12rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-punkt); }
.vorflug__marke::after { content: ''; position: absolute; inset: 0.32rem; border-radius: 50%; background: var(--color-punkt); }   /* der Punkt im Ring */
.vorflug b { font: 700 var(--step-1)/1.25 var(--font-display); letter-spacing: -0.015em; }
.vorflug p { margin-top: 0.4rem; color: var(--rm-grau-700); max-width: 34ch; }
.vorflug__startklar { margin-top: clamp(2.5rem, 5vw, 3.5rem); font: 780 var(--step-4)/1 var(--font-display); letter-spacing: -0.04em; }
.vorflug__startklar .punkt { background: var(--color-punkt); }
/* Mit JS: grauer Ring, der Punkt rastet ein, sobald die Zeile sichtbar ist (breit: nacheinander, Versatz 240 ms) */
.js .vorflug__marke { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-text) 25%, var(--color-bg)); transition: box-shadow 200ms var(--ease-out); transition-delay: calc(var(--i, 0) * 240ms); }
.js .vorflug__marke::after { transform: scale(0); }
.js .vorflug li.sichtbar .vorflug__marke { box-shadow: inset 0 0 0 2px var(--color-punkt); }
.js .vorflug li.sichtbar .vorflug__marke::after { animation: vorflug-rast 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 240ms); }
@keyframes vorflug-rast { 0% { transform: translateY(-0.7rem) scale(0.5); } 60% { transform: translateY(0) scale(1.2, 0.8); } 100% { transform: none; } }
.js .vorflug__startklar .punkt { transform: scale(0); }
.js .vorflug__startklar.sichtbar .punkt { animation: vorflug-start 560ms var(--ease-snap) both; animation-delay: 300ms; }
@keyframes vorflug-start { from { transform: scale(0); } to { transform: scale(1); } }
.vorflug li:nth-child(2) { --i: 1; } .vorflug li:nth-child(3) { --i: 2; } .vorflug li:nth-child(4) { --i: 3; } .vorflug li:nth-child(5) { --i: 4; } .vorflug li:nth-child(6) { --i: 5; }
@media (max-width: 39.99em) { .vorflug li { --i: 0 !important; } }   /* schmal: jede Zeile rastet ein, wenn sie selbst ins Bild kommt */
@media (min-width: 40em) { .vorflug { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .vorflug { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .js .vorflug__marke { box-shadow: inset 0 0 0 2px var(--color-punkt); transition: none; }
  .js .vorflug__marke::after, .js .vorflug__startklar .punkt { transform: none; animation: none !important; }
}

/* Cluster dreispaltig (fünf Punkte ohne Häkchenliste) */
@media (min-width: 64em) { .cluster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Variante „umzug“ (Leistungs-Detail Websites): „Neue Website, alte Google-Plätze“. Ein Weiterleitungsplan mit echten Adressen;
   kommt er ins Bild, läuft der Punkt Zeile für Zeile von der alten zur neuen Adresse und rastet ein, daneben erscheint „301“.
   Ohne JS und bei reduzierter Bewegung: alle Zeilen angekommen. */
.b-leistungen--umzug { background: var(--color-bg); }
.umzug { display: grid; border-top: 2px solid var(--color-line); }
.umzug li { display: grid; gap: 0.6rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--color-line); align-items: center; font-variant-numeric: tabular-nums; }
.umzug__alt { color: var(--color-text-muted); overflow-wrap: anywhere; }
.umzug__neu { font-weight: 600; overflow-wrap: anywhere; transition: color var(--dur-m) var(--ease-out); }
.umzug__bahn { position: relative; height: 1rem; container-type: inline-size; }
.umzug__bahn::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in oklab, var(--color-text) 22%, var(--color-bg)); }
.umzug__punkt { position: absolute; left: 0; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; border-radius: 50%; background: var(--color-punkt);
  translate: calc(100cqw - 0.75rem) 0; }
.umzug__code { justify-self: start; padding: 0.3rem 0.55rem; border-radius: var(--radius-s); background: var(--color-akzent-nebel); color: var(--color-accent-text); font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.06em; }
.umzug__fazit { margin-top: clamp(2rem, 4vw, 3rem); font: 780 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.035em; }
.umzug__fazit .punkt { background: var(--color-punkt); }
.umzug__notiz { margin-top: 0.75rem; color: var(--color-text-muted); }
/* Mit JS: Punkt startet links, „301“ und die neue Adresse erscheinen beim Ankommen */
.js .umzug li .umzug__punkt { translate: 0 0; transition: translate 700ms var(--ease-in-out); }
.js .umzug li .umzug__code { opacity: 0; transform: scale(0.8); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-snap); }
.js .umzug li:not(.angekommen) .umzug__neu { color: var(--color-text-muted); }
.js .umzug li.angekommen .umzug__punkt { translate: calc(100cqw - 0.75rem) 0; }
.js .umzug li.angekommen .umzug__code { opacity: 1; transform: none; transition-delay: 650ms; }
.js .umzug li.angekommen .umzug__neu { transition-delay: 650ms; }   /* neue Adresse leuchtet auf, wenn der Punkt ankommt */
.js .umzug__fazit .punkt { transform: scale(0); }
.js .umzug__fazit.angekommen .punkt { animation: vorflug-start 560ms var(--ease-snap) both; }
@media (min-width: 48em) { .umzug li { grid-template-columns: minmax(0, 1fr) clamp(5rem, 12vw, 10rem) minmax(0, 1fr) 3.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .js .umzug li .umzug__punkt { translate: calc(100cqw - 0.75rem) 0; transition: none; }
  .js .umzug li .umzug__code { opacity: 1; transform: none; transition: none; }
  .js .umzug li:not(.angekommen) .umzug__neu { color: inherit; }
  .js .umzug__fazit .punkt { transform: none; animation: none !important; }
}

/* Grund-Modifier für den Bänder-Wechsel auf langen Seiten (Weiß / Papier im Wechsel) */
.b-leistungen--papier { background: var(--color-bg); }
.b-leistungen--weiss { background: var(--color-surface); }
/* Weiterleitungsplan: Kopf einspaltig, damit die lange Überschrift nicht in drei Zeilen mit Einzelwort zerfällt */
.b-leistungen--umzug .b-leistungen__kopf { grid-template-columns: minmax(0, 1fr); }
.b-leistungen--umzug .b-leistungen__kopf p { max-width: 52ch; }

/* Variante „wegweiser“ (Leistungs-Übersicht): „Vom Vorhaben zur passenden Leistung“. Ohne JS und schmal eine Liste
   (Anlass, darunter die Leistung); breit mit JS links die Anlässe als Reiter, rechts die gewählte Leistung,
   der Punkt springt an den gewählten Anlass. Keine automatische Bewegung. */
.wegweiser { position: relative; }
.wegweiser__liste { border-top: 2px solid var(--color-line); }
.wegweiser__eintrag { display: grid; gap: 0.85rem; padding-block: clamp(1.25rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--color-line); }
.wegweiser__anlass { max-width: 32ch; font: 650 var(--step-1)/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--color-text-muted); }
.wegweiser__leistung { display: grid; gap: 0.6rem; justify-items: start; }
.wegweiser__leistung h3 { font-size: var(--step-3); }
.wegweiser__leistung p { max-width: 42ch; color: var(--rm-grau-700); }
.wegweiser__leistung .wegweiser__preis { font: 760 var(--step-2)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.wegweiser__preis small { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: 0.02em; color: var(--color-text-muted); }
.wegweiser__preis .steuer { display: block; margin-top: 0.4rem; font: 500 var(--step--1)/1.35 var(--font-body); letter-spacing: 0; }
.wegweiser__punkt { display: none; }

.wegweiser.ist-umschalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; border-top: 2px solid var(--color-line); }
.ist-umschalter .wegweiser__liste { border-top: 0; }
.ist-umschalter .wegweiser__eintrag { display: block; padding: 0; }
.ist-umschalter .wegweiser__anlass { max-width: none; }
.wegweiser__anlass button { display: block; width: 100%; padding: 1.2rem 0 1.2rem 2rem; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit;
  text-align: left; cursor: pointer; transition: color var(--dur-s) var(--ease-out); }
.wegweiser__anlass button[aria-selected="true"] { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .wegweiser__anlass button:hover:not([aria-selected="true"]) { color: color-mix(in oklab, var(--color-text) 55%, var(--color-text-muted)); } }   /* schwächer als die Auswahl */
.wegweiser__leistung[hidden] { display: none; }
.wegweiser__buehne .wegweiser__leistung { gap: 0.85rem; padding-top: 1.2rem; }
.wegweiser__buehne .wegweiser__leistung h3 { font-size: var(--step-4); }
.wegweiser__buehne .wegweiser__leistung p { font-size: var(--step-1); line-height: 1.45; }
.wegweiser__buehne .wegweiser__leistung .wegweiser__preis { margin-top: 0.4rem; font-size: var(--step-3); }
.gewaehlt .wegweiser__buehne .wegweiser__leistung:not([hidden]) { animation: wegweiser-ein var(--dur-s) var(--ease-out); }   /* erst nach der ersten Wahl, nie leer */
.per-taste .wegweiser__buehne .wegweiser__leistung { animation: none !important; }   /* Tastatur: sofort */
@keyframes wegweiser-ein { from { opacity: 0.35; } }
.ist-umschalter .wegweiser__punkt { display: block; position: absolute; left: 0.35rem; top: 0; width: 0.62rem; height: 0.62rem; margin-top: -0.31rem; border-radius: 50%;
  background: var(--color-punkt); }
.ist-umschalter.bereit .wegweiser__punkt { transition: translate var(--dur-m) var(--ease-snap); }
@media (prefers-reduced-motion: reduce) {
  .gewaehlt .wegweiser__buehne .wegweiser__leistung:not([hidden]) { animation: none; }
  .ist-umschalter.bereit .wegweiser__punkt, .wegweiser__anlass button { transition: none; }
}

/* Modifier „umfang“ (Leistungs-Übersicht, Variante register): je Leistung Nummer, vier Bausteine, Preis und ein echtes Beispielbild */
.b-leistungen__name { display: grid; gap: 0.6rem; align-content: start; }
.b-leistungen__nr { font: 700 var(--step--1)/1 var(--font-body); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.b-leistungen__punkte { display: grid; gap: 0.45rem 1.5rem; }
.b-leistungen__punkte li { position: relative; padding-left: 1.1rem; color: var(--rm-grau-700); line-height: 1.4; }
.b-leistungen__punkte li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--color-punkt); }
@media (min-width: 40em) { .b-leistungen__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-leistungen--umfang .b-leistungen__text .b-leistungen__preis { margin-top: 0.35rem; font-size: var(--step-3); color: var(--color-text); }
.b-leistungen__bild--foto img { object-position: center; }
.b-leistungen__hinweis { margin-top: 1.5rem; font-size: var(--step--1); color: var(--color-text-muted); }
/* Wegweiser: Kopf einspaltig, Überschrift ausgeglichen („Vom Vorhaben / zur passenden Leistung.“) */
.b-leistungen--wegweiser .b-leistungen__kopf { grid-template-columns: minmax(0, 1fr); }
.b-leistungen--wegweiser .b-leistungen__kopf h2 { text-wrap: balance; }
.b-leistungen--wegweiser .b-leistungen__kopf p { max-width: 52ch; }
/* Umfang: die Zeilen sind keine Links – kein Zeilen-Hover, der Textlink trägt die Aktion */
@media (hover: hover) and (pointer: fine) {
  .b-leistungen--umfang .b-leistungen__item:hover h3 { transform: none; }
  .b-leistungen--umfang .b-leistungen__item:hover h3::before { transform: scale(0); }
  .b-leistungen--umfang .b-leistungen__item:hover .b-leistungen__bild img { transform: none; }
}
.b-leistungen--umfang .b-leistungen__hinweis { max-width: 70ch; }
/* Modifier „kopf-gestapelt“: Überschrift über der Einleitung, wenn ein Wort breiter ist als die halbe Spalte (realmaker.de Leistungen) */
.b-leistungen--kopf-gestapelt .b-leistungen__kopf { grid-template-columns: minmax(0, 1fr); }
.b-leistungen--kopf-gestapelt .b-leistungen__kopf p { max-width: 52ch; }
/* Tippfläche der Textlinks auf Touch-Geräten ≥ 40 px */
@media (pointer: coarse) { .wegweiser__leistung .textlink, .b-leistungen--umfang .b-leistungen__text .textlink { padding-block: 0.65rem; } }

/* b-fallstudie (Block text-bild, Variante „fallstudie“) — Nacht-Fläche, echtes Produkt in voller Tiefe. */
.b-fallstudie { padding-block: var(--section-space-l); background: var(--color-dunkel); color: var(--color-auf-dunkel); overflow: clip; --fokus: var(--color-akzent-dunkel); }
.b-fallstudie ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.b-fallstudie__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.b-fallstudie__kopf h2 { font-size: var(--step-5); max-width: 12ch; }
.b-fallstudie__kopf .punkt { --punkt-farbe: var(--color-akzent-dunkel); }
.b-fallstudie__unter { margin-top: 1.25rem; font: 700 var(--step-1)/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--color-akzent-dunkel); }
.b-fallstudie__text { margin-top: 1rem; max-width: 46ch; color: var(--rm-grau-200); font-size: var(--step-0); }
.b-fallstudie__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.textlink--hell { color: #fff; }

.b-fallstudie__bild { position: relative; }
.browser { border-radius: var(--radius-m); overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.browser__leiste { display: flex; align-items: center; gap: 0.4rem; height: 2.2rem; padding: 0 0.8rem; background: #E9EBEF; color: var(--rm-grau-600); font: 500 0.8rem/1 var(--font-body); }
.browser__leiste i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #C9CDD4; }
.browser__leiste span { margin-inline: auto; padding: 0.3rem 1.2rem; border-radius: 0.4rem; background: #fff; }
.browser img { width: 100%; height: auto; }

.b-fallstudie__stationen { display: grid; gap: 2rem; }
.b-fallstudie__stationen li { padding-top: 1.25rem; border-top: 2px solid var(--color-akzent-dunkel); }
.b-fallstudie__stationen b { display: block; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.b-fallstudie__stationen p { margin-top: 0.5rem; color: var(--rm-grau-300); max-width: 32ch; }

.b-fallstudie__fakten { font: 600 var(--step-0)/1.5 var(--font-body); color: var(--rm-grau-300); font-variant-numeric: tabular-nums; }

@media (min-width: 64em) {
  .b-fallstudie__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: center; }
  .b-fallstudie__stationen { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .b-fallstudie__fakten { grid-column: 1 / -1; }
}
@media (min-width: 40em) and (max-width: 63.99em) { .b-fallstudie__stationen { grid-template-columns: 1fr 1fr; } }

/* Variante „live“ (realmaker media): zwei echte Sendebilder, „Live“-Kennung mit blinkendem Punkt. */
.b-fallstudie--live .b-fallstudie__fakten { margin-top: 1.5rem; color: #fff; }
.b-fallstudie__bild--live { padding-bottom: 14%; padding-left: 6%; }
.sendebild { position: relative; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.sendebild img { width: 100%; height: auto; }
.sendebild__live { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: var(--radius-s); background: var(--color-flaeche); color: #fff; font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sendebild__live::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff; animation: rec-blinken 1.6s steps(1, end) 3; }
.sendebild__zweit { position: absolute; left: 0; bottom: 0; width: 46%; border-radius: var(--radius-s); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); }
@media (min-width: 64em) { .b-fallstudie--live .b-fallstudie__stationen { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sendebild__live::before { animation: none; } }
/* Ein einzelnes Sendebild ohne zweites Bild darüber */
.b-fallstudie__bild--einzeln { padding: 0; }

/* Verbindungen (Leistungs-Übersicht „Ein Kunde, drei Leistungen“): kurze Liste unter dem Text */
.b-fallstudie__verbindungen { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--color-line-dunkel); }
.b-fallstudie__verbindungen h3 { font-size: var(--step-1); }
.b-fallstudie__verbindungen ul { display: grid; gap: 0.55rem; margin-top: 0.85rem; }
.b-fallstudie__verbindungen li { position: relative; max-width: 46ch; padding-left: 1.1rem; color: var(--rm-grau-200); line-height: 1.45; }
.b-fallstudie__verbindungen li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--color-akzent-dunkel); }
/* Zweites Bild weiter unten, damit es die Bauchbinde des Sendebilds nicht verdeckt */
.b-fallstudie__bild--versetzt { padding-bottom: 21%; }
/* Modifier „kompakt“ (Leistungs-Übersicht): kleinere, ausgeglichene Überschrift, damit kein Einzelwort steht („Ein Kunde, / drei Leistungen.“) */
.b-fallstudie--kompakt .b-fallstudie__kopf h2 { font-size: var(--step-4); max-width: none; text-wrap: balance; }

/* b-referenzen-teaser — Variante „mosaik“: breite und schmale Projekte im Wechsel, Bildschirm-Aufnahmen. */
.b-referenzen-teaser { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-referenzen-teaser__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.b-referenzen-teaser__kopf h2 { font-size: var(--step-5); }
.b-referenzen-teaser__raster { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }

.projekt__link { display: grid; gap: 0.8rem; text-decoration: none; color: inherit; }
.projekt__bild { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 0.5rem; background: #fff; box-shadow: var(--schatten-s), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.projekt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 800ms var(--ease-out); }
.projekt__bild [data-placeholder] { height: 100%; border: 0; }
.projekt h3 { font-size: var(--step-2); display: inline-flex; align-items: baseline; gap: 0.45em; }
.projekt h3::after { content: ''; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--color-punkt); transform: scale(0); transition: transform var(--dur-l) var(--ease-snap); }
.projekt p { max-width: 54ch; color: var(--rm-grau-700); }
.projekt__tags { font: 600 var(--step--1)/1.4 var(--font-body); color: var(--color-text-muted) !important; letter-spacing: 0.01em; }
.projekt--breit .projekt__bild { aspect-ratio: auto; }
.projekt--breit .projekt__bild img { height: auto; }
.projekt--zeile .projekt__link { align-items: center; gap: 0.8rem 2.5rem; }
@media (hover: hover) and (pointer: fine) {
  .projekt__link:hover .projekt__bild img { transform: scale(1.035); }
  .projekt__link:hover h3::after { transform: scale(1); }
}
@media (min-width: 64em) {
  .b-referenzen-teaser__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .projekt { grid-column: span 5; }
  .projekt--breit { grid-column: span 7; }
  .projekt--zeile { grid-column: 1 / -1; }
}
@media (min-width: 48em) { .projekt--zeile .projekt__link { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; align-items: start; } .projekt--zeile .projekt__bild { grid-row: 1 / span 3; margin-bottom: 0; } .projekt--zeile h3, .projekt--zeile p { grid-column: 2; } .projekt--zeile h3 { margin-top: 1rem; } }

/* Kundenstimmen unter dem Raster */
.b-referenzen-teaser__stimmen { display: grid; gap: 2rem 3rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-line); }
.b-referenzen-teaser__stimmen blockquote p { font: 600 var(--step-1)/1.4 var(--font-display); letter-spacing: -0.015em; text-indent: -0.4em; }
.b-referenzen-teaser__stimmen figcaption { display: grid; gap: 0.15rem; margin-top: 1rem; color: var(--color-text-muted); }
.b-referenzen-teaser__stimmen figcaption b { color: var(--color-text); }
@media (min-width: 48em) { .b-referenzen-teaser__stimmen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48em) { .projekt--zeile .projekt__link:not(:has(.projekt__bild)) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; align-items: baseline; padding-top: 1.75rem; border-top: 1px solid var(--color-line); } .projekt--zeile .projekt__link:not(:has(.projekt__bild)) h3 { grid-column: 1; margin-top: 0; } .projekt--zeile .projekt__link:not(:has(.projekt__bild)) p { grid-column: 2; } }

/* Variante „leiste“ (wp-einfach.de): drei Website-Fenster; beim Überfahren scrollt die ganze Seite langsam durch. */
.b-referenzen-teaser--leiste .b-referenzen-teaser__kopf { display: grid; gap: 0.75rem; justify-content: start; }
.b-referenzen-teaser--leiste .b-referenzen-teaser__kopf p { color: var(--color-text-muted); font-size: var(--step-1); }
.b-referenzen-teaser__leiste { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.probe figure { display: grid; gap: 0.9rem; }
.probe__fenster { border-radius: var(--radius-m); overflow: hidden; background: #fff; box-shadow: var(--schatten-l), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.probe__adresse { display: flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding: 0 0.85rem; background: #EEEDE8; font: 600 0.8rem/1 var(--font-body); color: var(--color-text-muted); }
.probe__adresse::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-punkt); margin-right: 0.15rem; }
/* Größencontainer: 100cqh = Fensterhöhe, ohne Messung per Skript (die konnte vor dem fertigen Layout zu groß ausfallen) */
.probe__bild { aspect-ratio: 16 / 11; overflow: hidden; container-type: size; }
.probe__bild img { width: 100%; height: auto; transform: translateY(0); transition: transform 3.2s cubic-bezier(.45, 0, .25, 1); }
.probe figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.probe figcaption b { font: 700 1.05rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.probe figcaption span { font: 600 var(--step--1)/1 var(--font-body); color: var(--color-accent-text); }
@media (hover: hover) and (pointer: fine) {
  .probe:hover .probe__bild img { transform: translateY(calc(-100% + 100cqh)); transition-duration: 4.5s; }
}
.b-referenzen-teaser__davor { margin-top: clamp(2rem, 4vw, 3rem); font: 600 var(--step-1)/1.4 var(--font-display); letter-spacing: -0.015em; color: var(--color-text-muted); }
.b-referenzen-teaser__davor b { color: var(--color-text); }
@media (min-width: 48em) { .b-referenzen-teaser__leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .probe__bild img { transition: none !important; transform: none !important; } }
.nur-maus { display: none; }
@media (hover: hover) and (pointer: fine) { .nur-maus { display: inline; } }

/* Grund-Modifier und Raster-Varianten */
.b-referenzen-teaser--weiss { background: var(--color-surface); }
@media (min-width: 64em) { .b-referenzen-teaser__raster--drei .projekt { grid-column: span 4; } }
/* Kundenstimmen als eigener Abschnitt (Referenz-Archiv), drei nebeneinander */
.b-referenzen-teaser--stimmen .b-referenzen-teaser__stimmen { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 64em) { .b-referenzen-teaser__stimmen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Variante „archiv“ (Referenz-Archiv): alle Projekte nach Jahren, Filter nach Leistung. Der Punkt springt an den gewählten Filter,
   Jahre ohne Treffer klappen zu. Ohne JavaScript die ganze Liste (der Filter erscheint erst mit JS). */
.archiv__filter { display: none; }
.js .archiv__filter { position: relative; display: flex; flex-wrap: wrap; gap: 0.9rem 1.75rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); padding-bottom: 0.9rem; }
.archiv__filter button { min-height: 2.75rem; padding: 0.6rem 0; border: 0; background: none; font: 650 var(--step-0)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--color-text-muted);
  cursor: pointer; transition: color var(--dur-s) var(--ease-out); }
.archiv__filter button span { margin-left: 0.3em; font: 600 var(--step--1)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.archiv__filter button[aria-pressed="true"] { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .archiv__filter button:hover:not([aria-pressed="true"]) { color: color-mix(in oklab, var(--color-text) 55%, var(--color-text-muted)); } }
.archiv__punkt { position: absolute; left: 0; top: 0; width: 0.5rem; height: 0.5rem; margin-left: -0.25rem; border-radius: 50%; background: var(--color-punkt); }
.archiv.bereit .archiv__punkt { transition: translate var(--dur-m) var(--ease-out); }   /* ohne Überschwingen: die Sprünge sind lang */
.archiv__jahre { border-top: 2px solid var(--color-line); }
.archiv__jahr { display: grid; gap: 0.35rem 2rem; padding-block: clamp(1rem, 2vw, 1.4rem); border-bottom: 1px solid var(--color-line); }
.archiv__jahr h3 { font: 760 var(--step-2)/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.archiv__projekt + .archiv__projekt { border-top: 1px solid color-mix(in oklab, var(--color-line) 55%, transparent); }
.archiv__projekt a, .archiv__zeile { display: grid; gap: 0.1rem 1.5rem; padding-block: 0.65rem; text-decoration: none; color: inherit; }   /* Zeile ohne Detailseite: gleiche Spalten, kein Link */
.archiv__titel { font-weight: 650; transition: color var(--dur-s) var(--ease-out); }
.archiv__kunde { color: var(--color-text-muted); }
.archiv__leistung { font: 600 var(--step--1)/1.5 var(--font-body); color: var(--color-text-muted); }
.archiv__projekt[hidden], .archiv__jahr[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .archiv__projekt a:hover .archiv__titel { color: var(--color-accent-text); } }
@media (min-width: 48em) {
  .archiv__jahr { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; }
  .archiv__jahr h3 { padding-top: 0.55rem; }
  .archiv__projekt a, .archiv__zeile { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 9.5rem; align-items: baseline; }
  .archiv__leistung { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .archiv.bereit .archiv__punkt, .archiv__filter button, .archiv__titel { transition: none; } }
/* Lange Namen in Kartentiteln („Regiomontanus-Gymnasium –“) bleiben zusammen – außer in den schmalen Spalten zwischen 64 und 72em */
@media (min-width: 64em) and (max-width: 71.99em) { .projekt h3 .ohne-umbruch { white-space: normal; } }
@media (max-width: 23.99em) { .projekt h3 .ohne-umbruch { white-space: normal; } }   /* schmale Handys: „Regiomontanus-Gymnasium –“ passt nicht in eine Zeile */

/* b-prozess — Variante „punkt“: fünf Schritte auf einer Linie; beim Hineinscrollen rastet an jedem Schritt der Punkt ein. */
.b-prozess { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-prozess__kopf { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.b-prozess__kopf h2 { font-size: var(--step-5); }
.b-prozess__kopf p { max-width: 40ch; font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); }
@media (min-width: 64em) { .b-prozess__kopf { grid-template-columns: 1fr 1fr; align-items: end; } }

.b-prozess__schritte { display: grid; gap: 2.5rem 1.25rem; }
.schritt { position: relative; display: grid; align-content: start; }
.schritt__bild { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--rm-papier); }
.schritt__bild img { width: 100%; height: 100%; object-fit: cover; }
.schritt__marke { position: relative; display: block; height: 1.25rem; margin: 1.5rem 0 1.1rem; }
.schritt__marke::before { content: ''; position: absolute; left: 0; right: -1.25rem; top: 50%; height: 2px; margin-top: -1px; background: var(--color-line); }
.schritt:last-child .schritt__marke::before { right: 0; }
@media (max-width: 39.99em) { .schritt__marke::before { right: 0; } }   /* gestapelt: Linie endet am Rand des Inhalts */
.schritt__marke::after { content: ''; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-punkt); }
.schritt h3 { font-size: var(--step-2); }
.schritt p { margin-top: 0.5rem; color: var(--rm-grau-700); max-width: 30ch; }

/* Mit JS: Ringe zuerst, dann rastet der Punkt nacheinander ein */
.js .b-prozess__schritte .schritt__marke::after { background: var(--color-surface); box-shadow: inset 0 0 0 2px #C9CCD2; transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform var(--dur-l) var(--ease-snap); transition-delay: calc(var(--i, 0) * 260ms); }
.js .b-prozess__schritte.sichtbar .schritt__marke::after { background: var(--color-punkt); box-shadow: inset 0 0 0 2px var(--color-punkt); animation: schritt-rast 560ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 260ms); }
@keyframes schritt-rast { 0% { transform: translateY(-0.9rem) scale(0.6); } 60% { transform: translateY(0) scale(1.18, 0.82); } 100% { transform: none; } }

@media (min-width: 64em) { .b-prozess__schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 40em) and (max-width: 63.99em) { .b-prozess__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schritt__marke::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .b-prozess__schritte.sichtbar .schritt__marke::after { animation: none; } }
.schritt:nth-child(2) { --i: 1; } .schritt:nth-child(3) { --i: 2; } .schritt:nth-child(4) { --i: 3; } .schritt:nth-child(5) { --i: 4; }
.schritt__bild--bildschirm { background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); }
.schritt__bild--bildschirm img { object-position: left top; }

/* Variante „kurz“: vier Schritte ohne Bilder */
@media (min-width: 64em) { .b-prozess--kurz .b-prozess__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-prozess--kurz .schritt__marke { margin-top: 0; }

/* Variante „zeitleiste“ (wp-einfach.de): hell, vier Phasen, Balkenlänge = Dauer in Tagen (7/13/7/1). */
.b-prozess--zeitleiste { background: var(--color-bg); }
.zeitleiste { display: grid; gap: 2rem; }
.zeitleiste li { display: grid; align-content: start; gap: 0.5rem; }
.zeitleiste__balken { display: block; height: 0.75rem; border-radius: 0.4rem; background: var(--color-accent); margin-bottom: 0.75rem; transform-origin: left; }
.zeitleiste li:nth-child(2) .zeitleiste__balken { background: color-mix(in oklab, var(--color-accent) 70%, var(--color-bg)); }
.zeitleiste li:nth-child(3) .zeitleiste__balken { background: color-mix(in oklab, var(--color-accent) 45%, var(--color-bg)); }
.zeitleiste li:nth-child(4) .zeitleiste__balken { background: var(--color-text); }
.zeitleiste__tage { font-weight: 650; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.zeitleiste h3 { font-size: var(--step-2); }
.zeitleiste p:last-child { color: var(--rm-grau-700); font-size: var(--step--1); line-height: 1.5; }
.zeitleiste__regel { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--color-line); color: var(--rm-grau-700); }
@media (min-width: 64em) {
  .zeitleiste { grid-template-columns: 7fr 13fr 7fr minmax(9rem, 1fr); gap: 0.5rem; }
  .zeitleiste li { padding-right: 1.5rem; }
  .js .b-prozess--zeitleiste .zeitleiste__balken { transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 220ms); }
  .js .b-prozess--zeitleiste .zeitleiste.sichtbar .zeitleiste__balken { transform: none; }
}
.zeitleiste li:nth-child(2) { --i: 1; } .zeitleiste li:nth-child(3) { --i: 2; } .zeitleiste li:nth-child(4) { --i: 3; }
/* Unter 64em stehen die Phasen untereinander – die Balken bleiben trotzdem so lang wie die Phase (--tage am <li>, von 28 Tagen) */
@media (max-width: 63.99em) { .zeitleiste__balken { width: max(0.75rem, calc(var(--tage, 28) * 100% / 28)); } }
@media (prefers-reduced-motion: reduce) { .js .b-prozess--zeitleiste .zeitleiste__balken { transform: none !important; transition: none !important; } }
.b-prozess--weiss { background: var(--color-surface); }   /* Grund-Modifier für den Bänder-Wechsel */
@media (min-width: 64em) { .b-prozess--kurz .b-prozess__schritte--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* drei Stationen (Referenz-Detail) */
@media (min-width: 64em) { .b-prozess__schritte--drei .schritt h3 { max-width: none; min-height: 2.2em; } }   /* drei Stationen: Texte auf einer Linie */
/* Variante „chronik“ (Über): Stationen als Jahresregister – Jahr links, Titel und Satz rechts, auf Papier. Keine Bewegung. */
.b-prozess--chronik { background: var(--color-bg); }
.chronik { border-top: 2px solid var(--color-line); }
.chronik li { display: grid; gap: 0.25rem 2rem; padding-block: clamp(1rem, 2vw, 1.35rem); border-bottom: 1px solid var(--color-line); }
.chronik__jahr { font: 780 var(--step-4)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.chronik h3 { font-size: var(--step-2); }
.chronik p { max-width: 56ch; font-size: var(--step-0); color: var(--rm-grau-700); text-wrap: pretty; }
@media (min-width: 48em) { .chronik li { grid-template-columns: 9rem minmax(0, 17rem) minmax(0, 1fr); align-items: baseline; } }

/* Variante „detail“ (Ablauf-Seite, realmaker.de): fünf Schritte untereinander – links die senkrechte Achse mit dem Punkt,
   daneben Titel, Text und Ergebnis, rechts das Bild. Die Achse ist 2px (Ablaufachse), der Punkt rastet wie im Kurzablauf ein. */
.b-prozess--detail .b-prozess__schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.b-prozess--detail .schritt { --rand-oben: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: 1.25rem; padding-block: var(--rand-oben); }
/* Achse je Schritt: vom Punkt bis zum Punkt des nächsten Schritts, nach dem letzten endet sie */
.b-prozess--detail .schritt:not(:last-child)::before { content: ''; position: absolute; left: calc(0.625rem - 1px); top: calc(var(--rand-oben) + 1.6rem); bottom: calc(-1 * (var(--rand-oben) + 0.35rem)); width: 2px; background: var(--color-line); }
.b-prozess--detail .schritt__marke { grid-column: 1; grid-row: 1 / span 2; margin: 0.35rem 0 0; }
.b-prozess--detail .schritt__marke::before { display: none; }
.b-prozess--detail .schritt__inhalt { grid-column: 2; }
.b-prozess--detail .schritt h3 { font-size: var(--step-3); }
.b-prozess--detail .schritt p { max-width: 52ch; font-size: var(--step-0); }
.b-prozess--detail .schritt__nr { display: block; margin-top: 0.35rem; font: 600 var(--step--1)/1.3 var(--font-body); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }   /* Tage unter dem Titel, nie als Dachzeile darüber */
.b-prozess--detail .schritt__bild--bildschirm { box-shadow: var(--schatten-s), 0 0 0 1px rgba(16, 18, 22, 0.08); }   /* Bildschirmaufnahme auf Weiß: Rahmen leise */
.b-prozess--detail .schritt__tage { margin-top: 1.1rem; max-width: 52ch; border-top: 1px solid var(--color-line); }
.b-prozess--detail .schritt__tage li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.55rem; border-bottom: 1px solid var(--color-line); font-size: var(--step--1); color: var(--rm-grau-700); }
.b-prozess--detail .schritt__tage b { font-weight: 650; color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (min-width: 56em) { .b-prozess--detail .schritt:not(:has(.schritt__bild)) .schritt__inhalt { grid-column: 2 / -1; } }
/* Schritt mit Tagesliste und ohne Bild (wp-einfach.de): Titel und Text links, die Tage rechts daneben */
@media (min-width: 56em) {
  .b-prozess--detail .schritt__inhalt:has(.schritt__tage) { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-content: start; }
  .b-prozess--detail .schritt__inhalt:has(.schritt__tage) > * { grid-column: 1; }
  .b-prozess--detail .schritt__inhalt:has(.schritt__tage) > .schritt__tage { grid-column: 2; grid-row: 1 / -1; margin-top: 0.35rem; max-width: none; }
}
.b-prozess--detail .schritt__ergebnis { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-line); max-width: 52ch; color: var(--color-text); }
.b-prozess--detail .schritt__ergebnis b { font-weight: 700; }
.b-prozess--detail .schritt__bild { grid-column: 2; width: 100%; max-width: 30rem; }
@media (min-width: 56em) {
  .b-prozess--detail .schritt { grid-template-columns: 1.25rem minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .b-prozess--detail .schritt__bild { grid-column: 3; grid-row: 1 / span 2; max-width: none; }
}
/* Kurzablauf mit fünf Schritten (realmaker.de: Konzeption bis Betrieb) – ab 64em fünf gleiche Spalten */
@media (min-width: 64em) { .b-prozess--kurz .b-prozess__schritte--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* b-usp — Variante „kobalt“: vier Unterschiede und die Kundenstimme auf der Kobalt-Fläche. */
.b-usp { padding-block: var(--section-space-m); background: var(--color-flaeche); color: #fff; --fokus: #fff; }
.b-usp ::selection { background: #fff; color: var(--color-flaeche); }
.b-usp__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.b-usp h2 { font-size: var(--step-5); max-width: 8ch; }
.b-usp__liste { display: grid; gap: 2.25rem 3rem; }
.b-usp__liste li { position: relative; padding-left: 1.75rem; }
.b-usp__liste li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #fff; }
.b-usp__liste h3 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.25; }
.b-usp__liste p { margin-top: 0.55rem; max-width: 38ch; }

.b-usp__stimme { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 255, 255, 0.4); }
.b-usp__stimme blockquote p { font: 650 var(--step-3)/1.22 var(--font-display); letter-spacing: -0.025em; max-width: 30ch; text-indent: -0.42em; }
.b-usp__stimme figcaption { display: grid; gap: 0.2rem; margin-top: 1.5rem; }
.b-usp__stimme figcaption b { font-weight: 650; }

.b-usp__bild { display: none; margin-top: 2.5rem; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4 / 5; max-width: 22rem; box-shadow: 0 40px 70px -40px rgba(4, 30, 80, 0.6); }
.b-usp__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64em) {
  .b-usp__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); column-gap: clamp(3rem, 6vw, 7rem); }
  .b-usp__kopf { grid-row: 1 / span 2; }
  .b-usp__bild { display: block; }
  .b-usp__liste { grid-template-columns: 1fr 1fr; }
  .b-usp__stimme { grid-column: 2; }
}

/* Variante „versprechen“ (wp-einfach.de): hell, drei Spalten mit Linie, Wort in Grün, Zahl groß. */
.b-usp--versprechen { background: var(--color-surface); color: var(--color-text); }
.b-usp--versprechen ::selection { background: var(--color-flaeche); color: #fff; }
.b-usp--versprechen .b-usp__inner { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
.b-usp--versprechen h2 { max-width: 14ch; }
.b-usp__kopf > p { margin-top: 1rem; font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); max-width: 36ch; }
.b-usp--versprechen .b-usp__liste { grid-template-columns: 1fr; gap: 2.5rem; }
.b-usp--versprechen .b-usp__liste li { padding: 1.25rem 0 0; border-top: 2px solid var(--color-punkt); }
.b-usp--versprechen .b-usp__liste li::before { content: none; }
.b-usp--versprechen .versprechen__wort { font-size: var(--step-3); letter-spacing: -0.03em; }
.versprechen__wort .punkt { --punkt-farbe: var(--color-punkt); }
.versprechen__zahl { margin: 0.6rem 0 0.9rem; color: var(--color-text-muted); font-size: var(--step-0); }
.versprechen__zahl b { font: 750 var(--step-0)/1.3 var(--font-display); color: var(--color-accent-text); }
.b-usp--versprechen .b-usp__liste p:last-child { color: var(--rm-grau-700); }
.b-usp--versprechen .b-usp__liste p strong { color: var(--color-text); }
@media (min-width: 64em) { .b-usp--versprechen .b-usp__liste { grid-template-columns: repeat(3, 1fr); } .b-usp--versprechen .b-usp__kopf { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; } .b-usp--versprechen .b-usp__kopf > p { margin-top: 0; } }

/* b-cta — Variante „bereiche“: Querverweis auf realmaker media und realmaker games.
   Der Punkt verhält sich je Bereich wie im Logo: Media blinkt wie REC, Games springt. */
.b-cta { padding-block: var(--section-space-s); background: var(--color-bg); }
.b-cta__bereiche { display: grid; gap: 1.25rem; }
.bereich a { position: relative; display: grid; align-content: end; gap: 1rem; min-height: 22rem; height: 100%; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--radius-l); overflow: hidden;
  text-decoration: none; color: var(--rm-papier); isolation: isolate; transition: transform var(--dur-m) var(--ease-out); }
.bereich__logo { width: auto; height: clamp(3.25rem, 4vw, 4.25rem); }
.bereich p { max-width: 32ch; font-size: var(--step-1); line-height: 1.4; }
.bereich__ziel { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 650; }
.bereich__ziel::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--bereich-punkt); }
.bereich--media a { background: #120D0A; --bereich-punkt: var(--rm-media); }
.bereich--media .bereich__ziel::before { animation: rec 1.6s steps(1, end) 3; }   /* dreimal, dann steht der Punkt */
@keyframes rec { 50% { opacity: 0.15; } }
.bereich--games a { background: var(--rm-nacht); --bereich-punkt: var(--rm-games); }
.bereich--games .bereich__ziel::before { animation: hops 1.8s var(--ease-out) 2; }
@keyframes hops { 0%, 55%, 100% { transform: none; } 20% { transform: translateY(-0.55rem); } 35% { transform: translateY(0) scale(1.15, 0.85); } }
.bereich__kunst { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bereich--games a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 12, 18, 0) 15%, rgba(9, 12, 18, 0.88) 62%); }
.bereich--media a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 13, 10, 0.1) 10%, rgba(18, 13, 10, 0.9) 62%); }
@media (hover: hover) and (pointer: fine) { .bereich a:hover { transform: translateY(-4px); } }
@media (min-width: 48em) { .b-cta__bereiche { grid-template-columns: 1fr 1fr; } .bereich a { min-height: 26rem; } }
@media (prefers-reduced-motion: reduce) { .bereich__ziel::before { animation: none !important; } .bereich a { transition: none; } .bereich a:hover { transform: none !important; } }

/* Drei Bereiche (von media aus): software, WP-einfach.de, games */
.bereich--software a { background: var(--rm-kobalt-flaeche); --bereich-punkt: var(--rm-kobalt-hell); }
.bereich--software .bereich__kunst { object-position: 50% 35%; }
.bereich--software a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 12, 18, 0) 25%, rgba(9, 12, 18, 0.82) 70%); }
.bereich--wp a { background: var(--rm-wpe-flaeche); --bereich-punkt: var(--rm-wpe); }
.bereich--wp .bereich__kunst { object-position: 50% 35%; }
.bereich--wp a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 12, 18, 0) 25%, rgba(9, 12, 18, 0.85) 70%); }
.bereich--wp .bereich__logo { height: clamp(1.9rem, 2.4vw, 2.4rem); }
.bereich__wortmarke { font: 780 var(--step-3)/1 var(--font-display); letter-spacing: -0.035em; }
@media (min-width: 64em) { .b-cta__bereiche--drei { grid-template-columns: repeat(3, 1fr); } }

/* Variante „leistungen“ (Leistungs-Detail): drei weitere Leistungen desselben Bereichs, mit sichtbarer Überschrift.
   Bild als ruhiger Rahmen oben (Standbilder und Bildschirme tragen eigenen Text), Text darunter auf Media-Nacht.
   Der Punkt steht hier still – er bedeutet keine Sendung. */
.b-cta__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.b-cta__kopf h2 { font-size: var(--step-4); }
.bereich--leistung a { align-content: start; min-height: 0; padding: 0.75rem 0.75rem clamp(1.5rem, 2.5vw, 2rem); background: var(--color-dunkel); --bereich-punkt: var(--color-akzent-dunkel); }
.bereich--leistung .bereich__kunst { position: static; z-index: auto; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-m); object-position: 50% 30%; }
.bereich--leistung .bereich__wortmarke, .bereich--leistung p, .bereich--leistung .bereich__ziel { margin-inline: clamp(0.75rem, 1.6vw, 1.25rem); }
.bereich--leistung .bereich__wortmarke { margin-top: 0.75rem; color: #fff; }
.bereich--leistung p { font-size: var(--step-0); color: color-mix(in oklab, var(--color-auf-dunkel) 88%, var(--color-dunkel)); }

/* Variante „telefon“ (Kontakt): „Lieber telefonieren?“ – die Nummer groß auf Papier, vor dem dunklen Fuß */
.b-cta--telefon { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-cta--telefon h2 { font-size: var(--step-5); }
.b-cta--telefon p { margin-top: 1rem; max-width: 46ch; font-size: var(--step-1); line-height: 1.45; color: var(--rm-grau-700); }
.b-cta__nummer { display: inline-block; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-block: 0.25rem; font: 780 clamp(2rem, 0.6rem + 6vw, 7rem)/1.05 var(--font-display); letter-spacing: -0.03em;
  color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums; border-bottom: 3px solid var(--color-punkt); }
@media (hover: hover) and (pointer: fine) { .b-cta__nummer:hover { color: var(--color-accent-text); } }

/* Variante „bereich“ (Artikel): ein Bereich als breite Karte am Ende eines Artikels – Kategorie WordPress → wp-einfach.de.
   Die Karte trägt die Haut ihres Bereichs (Logo, Punkt, Knopf), das Band bleibt Weiß zwischen Papier und dem dunklen Fuß. */
.b-cta--bereich { padding-block: var(--section-space-s); background: var(--color-surface); }
.b-cta--weiss { background: var(--color-surface); }   /* Grund-Modifier für den Bänder-Wechsel (nach einem Kontakt auf Papier) */
.bereich-karte { display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius-l); background: var(--rm-nacht); color: var(--rm-papier); }
.bereich-karte__logo { width: auto; height: clamp(1.6rem, 2.2vw, 2.1rem); }
.bereich-karte h2 { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--step-4); color: #fff; }
.bereich-karte h2 .punkt { --punkt-farbe: var(--bereich-punkt, var(--color-akzent-dunkel)); }
.bereich-karte p { margin-top: 0.9rem; max-width: 40ch; font-size: var(--step-1); line-height: 1.45; color: var(--rm-grau-300); }
.bereich-karte--wp { --bereich-punkt: var(--rm-wpe); --fokus: var(--rm-wpe); }
.bereich-karte--wp .knopf { background: var(--rm-wpe-flaeche); color: #fff; }
@media (hover: hover) and (pointer: fine) { .bereich-karte--wp .knopf:hover { background: #fff; color: var(--rm-wpe-text); } }
@media (min-width: 64em) { .bereich-karte { grid-template-columns: minmax(0, 1fr) auto; } }

/* b-kontakt — Variante „ansprechpartner“: Formular + Michael als fester Ansprechpartner. */
.b-kontakt { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-kontakt__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.b-kontakt__text h2 { font-size: clamp(2.5rem, 1.55rem + 3.3vw, 4.6rem); max-width: 10ch; }   /* etwas kleiner als step-5: lange Wörter mit Schlusspunkt passen in die schmale Spalte */
.b-kontakt__text > p { margin-top: 1.25rem; max-width: 40ch; font-size: var(--step-1); line-height: 1.45; color: var(--rm-grau-700); }

.person { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-line); }
.person__bild { width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--rm-nacht); }
.person__bild[data-placeholder] { place-items: center; border-radius: 50%; padding: 0; }
.person__bild[data-placeholder]::before { position: static; content: 'Foto folgt'; font-size: 0.7rem; }
.person__daten { display: grid; gap: 0.15rem; }
.person__daten b { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.person__daten span { color: var(--color-text-muted); margin-bottom: 0.4rem; }
.person__daten a { justify-self: start; padding: 0.3rem 0; font-weight: 600; color: var(--color-accent-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .person__daten a:hover { text-decoration: underline; } }

.formular { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-l); background: var(--color-bg); }
.formular__reihe { display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .formular__reihe { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: 0.45rem; border: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 600; font-size: 0.98rem; }
.feld label span[aria-hidden] { color: var(--color-accent-text); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 3.1rem; padding: 0.75rem 0.95rem; border: 1.5px solid #D6D3CB; border-radius: var(--radius-s); background: #fff; font-size: 1rem;
  transition: border-color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.feld textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.feld select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23101216' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 0.9rem center/0.85rem no-repeat; padding-right: 2.5rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-fokus-schein); }
.feld [aria-invalid="true"] { border-color: #C42B1C; }
.feld__fehler { color: #B3261E; font-size: 0.9rem; font-weight: 500; }
.feld--wahl legend { margin-bottom: 0.45rem; }
.wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius-pill); border: 1.5px solid #D6D3CB; background: #fff; font-weight: 500; transition: border-color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out); }
.wahl input:checked + span { background: var(--rm-tinte); border-color: var(--rm-tinte); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wahl span:hover { border-color: var(--rm-tinte); } }
.feld--falle { position: absolute; left: -9999px; }
/* Datenschutz-Bestätigung (Pflicht): ganze Zeile klickbar, Kästchen in Akzentfarbe */
.feld--zustimmung { gap: 0.35rem; }
.feld .zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; font-weight: 400; font-size: 0.95rem; line-height: 1.45; cursor: pointer; }
.feld .zustimmung input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.08rem 0 0; padding: 0; accent-color: var(--color-accent); cursor: pointer; }
.feld .zustimmung input:focus { box-shadow: none; }
.feld .zustimmung input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.zustimmung a { color: var(--color-accent-text); }
.zustimmung span[aria-hidden] { color: var(--color-accent-text); }
.formular__hinweis { font-size: 0.92rem; color: var(--color-text-muted); }
.formular__hinweis a { color: var(--color-accent-text); }
.formular__abschluss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.formular__abschluss p { font-weight: 500; color: var(--rm-grau-700); }
.formular__meldung:empty { display: none; }
.formular__meldung { padding: 1rem 1.2rem; border-radius: var(--radius-s); font-weight: 600; }
.formular__meldung.ok { background: #E6F5EC; color: var(--rm-gruen); }
.formular__meldung.fehler { background: #FCEBEA; color: #B3261E; }

@media (min-width: 64em) { .b-kontakt__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; } }

/* Variante „start“ (wp-einfach.de) */
.b-kontakt__auswahl { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--radius-m); background: var(--color-akzent-nebel); color: var(--color-accent-text); font-weight: 600; }
.b-kontakt__auswahl[hidden] { display: none; }
.feld__optional { font-weight: 400; color: var(--color-text-muted); }
@media (min-width: 64em) { .b-kontakt__text h2 { font-size: min(5.4vw, 4.6rem); } }   /* zweispaltig: Größe folgt der Spaltenbreite */
/* Ohne Porträtkarte (Über): das Porträt steht schon im Seitenkopf – hier nur der direkte Draht */
.person--ohne-bild { grid-template-columns: minmax(0, 1fr); }
/* Grund-Modifier „papier“ (wp-einfach.de-Unterseiten): Band auf Papier, das Formular als weiße Fläche – für den Bänder-Wechsel nach einem weißen Abschnitt */
.b-kontakt--papier { background: var(--color-bg); }
.b-kontakt--papier .formular { background: var(--color-surface); }

/* b-showreel — Showreel im großen Rahmen. Selbst gehostet oder Zwei-Klick-Lösung; bis das Video da ist, ein gestalteter Platzhalter. */
.b-showreel { padding-block: var(--section-space-m); background: var(--color-dunkel); color: var(--color-auf-dunkel); --fokus: var(--color-akzent-dunkel); }
.b-showreel__kopf { display: grid; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.b-showreel__kopf h2 { font-size: var(--step-5); }
.b-showreel__kopf p { font-size: var(--step-1); color: var(--color-auf-dunkel-muted); }
@media (min-width: 64em) { .b-showreel__kopf { grid-template-columns: 1fr 1fr; align-items: end; } }
/* Modifier „kopf-breit“ (Startseite): längere Überschrift („Unsere Arbeit in 90 Sekunden“) – im schmalen Desktop breitere Titelspalte, sonst stehen Einzelwörter */
@media (min-width: 64em) and (max-width: 74.99em) { .b-showreel--kopf-breit .b-showreel__kopf { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.b-showreel__film { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: #000; }
.b-showreel__film[data-placeholder] { padding: 0; border: 0; color: inherit; }
.b-showreel__film[data-placeholder]::before { content: none; }
.b-showreel__film img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: saturate(0.85); }
.b-showreel__hinweis { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; text-align: center; background: radial-gradient(ellipse 40% 45% at 50% 52%, rgba(18, 13, 10, 0.78), rgba(18, 13, 10, 0) 100%); font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.b-showreel__hinweis small { font: 500 var(--step--1)/1.4 var(--font-body); letter-spacing: 0; color: #E9E2DC; }
.b-showreel__rec { width: 4.5rem; height: 4.5rem; margin-bottom: 0.5rem; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; }
.b-showreel__rec::after { content: ''; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rm-media); animation: rec-blinken 1.6s steps(1, end) 3; }
@media (prefers-reduced-motion: reduce) { .b-showreel__rec::after { animation: none; } }
/* Modifier „sucher“: Platzhalter ohne Foto, solange das Showreel fehlt – Fläche mit Sucherecken wie im Kameradisplay, breit im Kinoformat */
.b-showreel__film--sucher { --ecke: clamp(1.5rem, 3vw, 2.5rem); --rand: clamp(1rem, 2.5vw, 2rem); --strich: rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(var(--strich), var(--strich)) left var(--rand) top var(--rand) / var(--ecke) 2px,
    linear-gradient(var(--strich), var(--strich)) left var(--rand) top var(--rand) / 2px var(--ecke),
    linear-gradient(var(--strich), var(--strich)) right var(--rand) top var(--rand) / var(--ecke) 2px,
    linear-gradient(var(--strich), var(--strich)) right var(--rand) top var(--rand) / 2px var(--ecke),
    linear-gradient(var(--strich), var(--strich)) left var(--rand) bottom var(--rand) / var(--ecke) 2px,
    linear-gradient(var(--strich), var(--strich)) left var(--rand) bottom var(--rand) / 2px var(--ecke),
    linear-gradient(var(--strich), var(--strich)) right var(--rand) bottom var(--rand) / var(--ecke) 2px,
    linear-gradient(var(--strich), var(--strich)) right var(--rand) bottom var(--rand) / 2px var(--ecke),
    #1D1713;
  background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.b-showreel__film--sucher .b-showreel__hinweis { background: none; }
.b-showreel__film--sucher { aspect-ratio: 4 / 3; }
@media (min-width: 48em) { .b-showreel__film--sucher { aspect-ratio: 21 / 9; } }

/* Projekte unter dem Showreel (Leistungs-Detail): Kopflinien statt Karten, damit sich kein Bild der Seite wiederholt */
.b-showreel__projekte { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.b-showreel__projekte li { padding-top: 1.25rem; border-top: 2px solid var(--color-akzent-dunkel); }
.b-showreel__projekte b { display: block; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.b-showreel__projekte p { margin-top: 0.5rem; max-width: 40ch; color: var(--color-auf-dunkel-muted); }
.b-showreel__projekte small { display: block; margin-top: 0.6rem; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--color-auf-dunkel); }
.b-showreel__mehr { margin-top: 2rem; }
.b-showreel .textlink { color: var(--color-akzent-dunkel); }
.b-showreel__referenzen { display: grid; gap: 2rem 4rem; margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.b-showreel__referenzen .b-showreel__projekte { margin-top: 0; grid-template-columns: none; }
.b-showreel__bild { margin: 0; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.b-showreel__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48em) { .b-showreel__projekte { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
@media (min-width: 64em) { .b-showreel__referenzen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* b-region — Variante „orte“: die Region als Typografie auf der Bereichsfarbe, Haßfurt in der Mitte. Kein Kartendienst. */
.b-region { padding-block: var(--section-space-m); background: var(--color-flaeche); color: #fff; --fokus: #fff; }
.b-region ::selection { background: #fff; color: var(--color-flaeche); }
.b-region__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.b-region h2 { font-size: var(--step-5); max-width: 10ch; }
.b-region h2 .punkt { --punkt-farbe: var(--color-dunkel); }
.b-region__text p { margin-top: 1.25rem; max-width: 40ch; font-size: var(--step-1); line-height: 1.45; }
.b-region__orte { font: 760 var(--step-3)/1.25 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.b-region__orte li { display: inline-block; white-space: nowrap; }
.b-region__orte li:not(:last-child)::after { content: ''; display: inline-block; width: 0.2em; height: 0.2em; margin: 0 0.45em 0 0.12em; border-radius: 50%; background: var(--color-dunkel); }
.b-region__mitte { font-size: 1.45em; }
@media (min-width: 64em) { .b-region__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(3rem, 6vw, 7rem); } }

/* b-fokus — Variante „websites“: die wichtigste Leistung eines Bereichs direkt unter dem Hero –
   Aussage mit Preis und Aktion, vier Gründe, echte Arbeiten als Galerie, eine Kundenstimme. */
.b-fokus { padding-block: var(--section-space-m); background: var(--color-surface); overflow-x: clip; }
.b-fokus__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.b-fokus__kopf h2 { font-size: var(--step-5); max-width: 11ch; }
.b-fokus__kopf > p { margin-top: 1.25rem; max-width: 40ch; font-size: var(--step-1); line-height: 1.45; color: var(--rm-grau-700); }
.b-fokus__preis { margin-top: 1.75rem; color: var(--color-text-muted); font-size: var(--step-0); }
.b-fokus__preis a { color: var(--color-accent-text); font-weight: 650; }
.b-fokus__preis b { display: block; font: 760 var(--step-4)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-text); margin-bottom: 0.35rem; }
.b-fokus__preis b small { margin-right: 0.2em; font: 600 var(--step-1)/1 var(--font-body); letter-spacing: 0; color: var(--color-text-muted); }   /* „ab“ vor dem Preis */
.b-fokus__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }

/* Vier Gründe mit Linie in der Bereichsfarbe – wie die Stationen der Fallstudie und die Zusagen bei Live */
.b-fokus__punkte { display: grid; gap: 1.75rem 2.5rem; align-content: start; }
.b-fokus__punkte li { padding-top: 1.1rem; border-top: 2px solid var(--color-punkt); }
.b-fokus__punkte h3 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.25; }
.b-fokus__punkte p { margin-top: 0.5rem; color: var(--rm-grau-700); max-width: 36ch; }

/* Referenzen als seitlich scrollbares Band, das bis an den rechten Bildschirmrand läuft */
.b-fokus__galerie { min-width: 0; }
.b-fokus__galerie-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.b-fokus__galerie-titel { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.02em; }
.b-fokus__steuerung { display: flex; gap: 0.5rem; }
.b-fokus__steuerung[hidden] { display: none; }
.rundknopf { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid #D6D3CB; background: var(--color-surface); color: var(--color-text); cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out); }
.rundknopf svg { width: 1.1rem; height: 1.1rem; }
.rundknopf:active { transform: scale(0.94); }
.rundknopf:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rundknopf:not(:disabled):hover { border-color: var(--color-text); background: var(--color-text); color: #fff; } }
.b-fokus__band { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(17rem, 40%, 36rem); gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline-end: calc(50% - 50vw); padding-inline-end: calc(50vw - 50%); padding-block: 0.25rem 0.5rem; border-radius: var(--radius-m); }
.b-fokus__band::-webkit-scrollbar { display: none; }
.b-fokus__band:focus-visible { outline-offset: 6px; }
.b-fokus__band li { scroll-snap-align: start; }
.b-fokus__band figure { display: grid; gap: 0.85rem; }
.b-fokus__band img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius-l); background: #E9E7E2; transition: transform 700ms var(--ease-out); }
.b-fokus__band figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.b-fokus__band figcaption b { font: 700 1.05rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.b-fokus__band figcaption span { font: 500 var(--step--1)/1.3 var(--font-body); color: var(--color-text-muted); }
@media (max-width: 47.99em) { .b-fokus__band { grid-auto-columns: 84%; } }
/* Modifier „aufnahmen“: echte Bildschirmaufnahmen statt Geräte-Mockups – 16:10, oben angeschnitten, weißer Grund, Kontur innen (der Rand des Bands schneidet sonst ab) */
.b-fokus__band--aufnahmen img { aspect-ratio: 16 / 10; object-position: top center; border-radius: var(--radius-m); background: #fff; outline: 1px solid rgba(16, 18, 22, 0.1); outline-offset: -1px; }

.b-fokus__stimme { max-width: 52rem; }
.b-fokus__stimme blockquote p { font: 650 var(--step-2)/1.3 var(--font-display); letter-spacing: -0.02em; text-indent: -0.42em; }
.b-fokus__stimme figcaption { display: grid; gap: 0.15rem; margin-top: 1rem; color: var(--color-text-muted); }
.b-fokus__stimme figcaption b { color: var(--color-text); }

@media (min-width: 64em) {
  .b-fokus__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(3rem, 6vw, 7rem); }
  .b-fokus__punkte { grid-template-columns: 1fr 1fr; }
  .b-fokus__galerie, .b-fokus__stimme { grid-column: 1 / -1; }
}

/* rechner — Preis-Rechner (Signature von wp-einfach.de): Preis und Fertig-Datum rechnen live mit.
   Ohne JavaScript zeigt er das Komplettpaket; alle Eingaben sind echte Formularelemente. */
.rechner { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-xl); background: #fff; color: var(--color-text);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rechner ::selection { background: var(--color-accent); color: #fff; }
.rechner::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 var(--color-accent); transition: box-shadow 500ms var(--ease-out); }
.rechner.puls::after { box-shadow: 0 0 0 3px var(--color-accent); transition-duration: 60ms; }
.rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-line); }
.rechner__kopf p { font: 650 0.8rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.rechner__kopf p:first-child { color: var(--color-text); }
.rechner__gruppe { display: grid; gap: 0.6rem; border: 0; min-width: 0; }
.rechner__gruppe legend, .rechner__zeile span { font: 700 0.95rem/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 0.1rem; }
.rechner__zeile { display: flex; justify-content: space-between; align-items: baseline; }
.rechner__zeile output { font: 600 0.95rem/1 var(--font-body); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.rechner__hinweis { font-size: 0.88rem; line-height: 1.45; color: var(--color-text-muted); }
.rechner__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0.3rem; border-radius: var(--radius-m); background: var(--rm-papier); }
.rechner__wahl label { position: relative; cursor: pointer; }
.rechner__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rechner__wahl span { display: grid; place-items: center; min-height: 2.75rem; border-radius: 0.6rem; font-weight: 600; color: var(--color-text-muted); transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.rechner__wahl input:checked + span { background: #fff; color: var(--color-text); box-shadow: var(--schatten-s); }
.rechner__wahl input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.rechner input[type="range"] { width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fuell: 16.7%; }
.rechner input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent) var(--fuell), #E2E0DA var(--fuell)); }
.rechner input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -0.53rem; border-radius: 50%; background: var(--color-accent); border: 4px solid #fff; box-shadow: 0 1px 3px rgba(16, 18, 22, 0.3); transition: transform var(--dur-s) var(--ease-snap); }
.rechner input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.rechner input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #E2E0DA; }
.rechner input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--color-accent); }
.rechner input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-accent); border: 4px solid #fff; box-shadow: 0 1px 3px rgba(16, 18, 22, 0.3); }
.rechner__extra { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; min-height: 2.9rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-m); border: 1.5px solid var(--color-line); cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out); }
.rechner__extra input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--color-accent); }
.rechner__extra span { font-size: 0.95rem; color: var(--color-text-muted); }
.rechner__extra span b { color: var(--color-text); font-weight: 650; }
.rechner__extra em { font: 650 0.95rem/1 var(--font-body); font-style: normal; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rechner__extra:has(input:checked) { border-color: var(--color-accent); background: var(--color-akzent-nebel); }
.rechner__extra:has(input:checked) em { color: var(--color-accent-text); }
@media (hover: hover) and (pointer: fine) { .rechner__extra:hover { border-color: #C9C6BE; } }
.rechner__ergebnis { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-line); align-items: end; }
.rechner__label { font: 650 0.78rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.45rem; }
.rechner__preis { font: 780 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-text); }
.rechner__steuer { margin-top: 0.35rem; font-size: 0.8rem; }
.rechner__datum { font: 700 1.15rem/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--color-accent-text); }
.rechner__klein { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.4; color: var(--color-text-muted); }
.rechner__knopf { width: 100%; }
.rechner__fuss { margin-top: -0.5rem; text-align: center; }
@media (max-width: 30em) { .rechner__ergebnis { grid-template-columns: 1fr; } }

/* b-kasse — Variante „konfigurator“ (wp-einfach.de, Projekt buchen): links die Schritte unter 2px-Kopflinien,
   ab 80em rechts die mitlaufende Zusammenfassung auf Nacht (wie das empfohlene Paket). Darunter folgt die Zusammenfassung
   direkt vor „Prüfen und bestellen“, eine Leiste am unteren Rand zeigt die fällige Summe.
   Ohne JavaScript sind alle Schritte sichtbar und funktionieren als normales Formular. */
.b-kasse { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-space-m); background: var(--color-bg); }
.b-kasse [hidden] { display: none; }
.kasse { display: grid; gap: clamp(2.25rem, 4vw, 3rem); counter-reset: schritt; }

/* Schritte */
.kasse__schritt { display: grid; gap: 1.1rem; min-width: 0; margin: 0; padding: 1.4rem 0 0; border: 0; border-top: 2px solid var(--color-text); counter-increment: schritt; }
.kasse__schritt > legend { float: left; width: 100%; padding: 0; }   /* float: legend sitzt im Raster statt auf der Linie */
.kasse__titel { display: flex; align-items: baseline; gap: 0.75rem; font: 760 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.025em; }
.kasse__nr::before { content: counter(schritt); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }   /* Nummer in der Überschrift, leiser – keine Dachzeile */
.kasse__einleitung { max-width: 58ch; color: var(--rm-grau-700); line-height: 1.5; }
.kasse__hinweis { font-size: 0.92rem; line-height: 1.45; color: var(--color-text-muted); }

/* Umschalter (zwei Möglichkeiten, wie im Preis-Rechner) */
.kasse__umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; max-width: 34rem; padding: 0.3rem; border-radius: var(--radius-m); background: #E9E6DF; }
.kasse__umschalter label { position: relative; cursor: pointer; }
.kasse__umschalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kasse__umschalter span { display: grid; place-items: center; min-height: 2.9rem; padding: 0.4rem 0.75rem; border-radius: 0.6rem; font-weight: 600; text-align: center; color: var(--color-text-muted);
  transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.kasse__umschalter input:checked + span { background: #fff; color: var(--color-text); box-shadow: var(--schatten-s); }
.kasse__umschalter input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Wahlkarten: Paket, Betreuung, Hosting */
.kasse__optionen { display: grid; gap: 0.6rem; }
.option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.3rem; align-items: start; padding: 1.05rem 1.15rem; border-radius: var(--radius-m);
  border: 1.5px solid var(--color-line); background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.option input { grid-row: 1 / span 4; width: 1.2rem; height: 1.2rem; margin: 0.2rem 0 0; accent-color: var(--color-accent); }
.option__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.option__kopf b { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.option__preis { font: 780 var(--step-1)/1 var(--font-display); font-style: normal; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.option__preis small { margin-left: 0.15rem; font: 600 0.85rem/1 var(--font-body); letter-spacing: 0; color: var(--color-text-muted); }
.option__preis { text-align: right; }
.option__preis .steuer { margin: 0.3rem 0 0; font: 500 0.8rem/1.35 var(--font-body); white-space: normal; }
.option__preis--frei { color: var(--color-text-muted); }
.option__text { color: var(--rm-grau-700); line-height: 1.45; }
.option__meta { font-size: 0.9rem; font-weight: 600; color: var(--color-accent-text); }
.option__marke { position: absolute; top: -0.65rem; right: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-dunkel);
  font: 700 0.78rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-akzent-dunkel); }
.option__marke::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.option:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.option:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.kasse__optionen--klein .option { padding: 0.85rem 1rem; }
.kasse__optionen--klein .option__kopf b, .kasse__optionen--klein .option__preis { font-size: var(--step-0); }
.kasse__optionen--klein .option__text { font-size: 0.92rem; }
@media (min-width: 48em) { .kasse__optionen--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kasse__optionen--drei { grid-template-columns: minmax(0, 1fr); }   /* drei Karten: untereinander, ab 80em nebeneinander */
@media (min-width: 48em) { .kasse__optionen--drei { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 80em) { .kasse__optionen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .option:hover { border-color: #C9C6BE; } .option:has(input:checked):hover { border-color: var(--color-accent); } }
.kasse__gruppe { display: grid; gap: 0.7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.kasse__gruppe > legend { margin-bottom: 0.7rem; padding: 0; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.kasse__gruppe > legend span { margin-left: 0.4rem; font: 600 0.9rem/1 var(--font-body); letter-spacing: 0; color: var(--color-accent-text); }

/* Häkchen (Bestätigungen) */
.kasse__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; cursor: pointer; line-height: 1.45; }
.kasse__check input { width: 1.25rem; height: 1.25rem; margin: 0.12rem 0 0; accent-color: var(--color-accent); }
.kasse__check a { color: var(--color-accent-text); }
.kasse__check span[aria-hidden] { color: var(--color-accent-text); }
.kasse__check:has([aria-invalid="true"]) span { color: #B3261E; }

/* Projekt: Relaunch-Felder, Seiten */
.kasse__felder { display: grid; gap: 1rem; max-width: 40rem; }
.kasse__land { color: var(--rm-grau-700); }
.kasse__land b { color: var(--color-text); }
@media (min-width: 40em) { .formular__reihe.kasse__ort { grid-template-columns: 10rem minmax(0, 1fr); } }
.kasse__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 1.15rem; border-radius: var(--radius-m); background: var(--color-surface); }
.kasse__zeile label { display: grid; gap: 0.2rem; }
.kasse__zeile label b { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.kasse__zeile label span { font-size: 0.92rem; color: var(--color-text-muted); }

/* Zähler (− Zahl +) */
.zaehler { display: inline-grid; grid-template-columns: 2.75rem 3.25rem 2.75rem; align-items: stretch; height: 2.75rem; border: 1.5px solid #D6D3CB; border-radius: var(--radius-pill); background: #fff; overflow: hidden; }
.zaehler__knopf { display: grid; place-items: center; border: 0; background: transparent; font: 600 1.25rem/1 var(--font-body); color: var(--color-text); cursor: pointer; transition: background-color var(--dur-s) var(--ease-out); }
.zaehler__knopf:active { background: var(--rm-papier); }
.zaehler__knopf[aria-disabled="true"] { color: #B9B6AE; cursor: default; }
.zaehler__knopf:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.zaehler input { width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--color-line); background: transparent; font: 650 1rem/1 var(--font-body); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.zaehler input::-webkit-outer-spin-button, .zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .zaehler__knopf:not([aria-disabled="true"]):hover { background: var(--rm-papier); } }

/* Power-Ups als Liste zwischen Haarlinien auf Weiß */
.kasse__liste { border-radius: var(--radius-m); background: var(--color-surface); padding-inline: 1.15rem; }
.extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "preis wahl"; align-items: center; gap: 0.6rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--color-line); }
.extra:last-child { border-bottom: 0; }
.extra__text { grid-area: text; display: grid; gap: 0.15rem; }
.extra__text b { font-weight: 650; }
.extra__text span { font-size: 0.92rem; line-height: 1.4; color: var(--color-text-muted); }
.extra__preis { grid-area: preis; font: 750 var(--step-0)/1 var(--font-display); font-style: normal; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.extra__preis small { margin-left: 0.1rem; font: 600 0.82rem/1 var(--font-body); color: var(--color-text-muted); }
.extra__preis { white-space: nowrap; }
.extra__preis .steuer { margin: 0.3rem 0 0; font: 500 0.8rem/1.35 var(--font-body); white-space: normal; }
.extra .zaehler, .extra__schalter { grid-area: wahl; justify-self: end; }
/* Zeile mit breitem Knopf („Kurz-Analyse anfragen“): auf schmalen Bildschirmen Knopf unter den Preis */
@media (max-width: 30em) { .extra--breit { grid-template-areas: "text text" "preis preis" "wahl wahl"; } .extra--breit .extra__schalter { justify-self: start; } }
.extra__schalter { position: relative; cursor: pointer; }
.extra__schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.extra__schalter span { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius-pill); border: 1.5px solid #D6D3CB; background: #fff; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out); }
.extra__schalter span::before { content: '+' / ''; font-weight: 600; }   /* Zeichen nur fürs Auge */
.extra__schalter input:checked + span { background: var(--rm-tinte); border-color: var(--rm-tinte); color: #fff; }
.extra__schalter input:checked + span::before { content: '✓' / ''; }
.extra__schalter input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.extra__schalter input:disabled + span { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .extra__schalter input:not(:checked):not(:disabled) + span:hover { border-color: var(--rm-tinte); } }
@media (min-width: 40em) {
  .extra { grid-template-columns: minmax(0, 1fr) 7.5rem auto; grid-template-areas: "text preis wahl"; }
  .extra__preis { justify-self: end; }
}

/* Zusammenfassung: Nacht-Karte, ab 80em mitlaufend rechts */
.kasse__summe { min-width: 0; display: grid; gap: 1.1rem; padding: clamp(1.4rem, 2.5vw, 2rem); border-radius: var(--radius-l); background: var(--color-dunkel); color: var(--color-auf-dunkel); }
.kasse__summe h3 { font: 760 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.02em; }
.summe__posten { display: grid; border-top: 1px solid var(--color-line-dunkel); }
.summe__posten li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--color-line-dunkel); font-size: 0.95rem; color: var(--rm-grau-200); }
.summe__posten li b { font-weight: 650; color: var(--color-auf-dunkel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe__summen, .summe__plan { display: grid; gap: 0.45rem; }
.summe__summen div, .summe__plan div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.summe__summen dt, .summe__plan dt { min-width: 0; }
.summe__summen dt, .summe__plan dt { color: var(--color-auf-dunkel-muted); font-size: 0.95rem; }
.summe__summen dd, .summe__plan dd { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe__gesamt { padding-top: 0.55rem; border-top: 1px solid var(--color-line-dunkel); }
.summe__gesamt dt { color: var(--color-auf-dunkel); font-weight: 650; }
.summe__gesamt dd { font: 780 var(--step-2)/1 var(--font-display); letter-spacing: -0.02em; }
.summe__plan { padding: 1rem 1.1rem; border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.06); }
.summe__plan .summe__heute { display: grid; gap: 0.35rem; padding-bottom: 0.75rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--color-line-dunkel); }
.summe__heute dt { color: var(--color-auf-dunkel); font-weight: 650; }
.summe__heute dd { font: 780 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-akzent-dunkel); }
.summe__fertig { font-size: 0.95rem; color: var(--rm-grau-200); line-height: 1.45; }
.summe__fertig { display: grid; gap: 0.25rem; }
.summe__fertig b { font: 700 var(--step-1)/1.25 var(--font-display); color: var(--color-auf-dunkel); }
.summe__hinweis { font-size: 0.9rem; line-height: 1.45; color: var(--color-auf-dunkel-muted); }
.kasse__offen { padding: 0.75rem 0.9rem; border-radius: var(--radius-s); border: 1.5px dashed var(--color-line-dunkel); font-size: 0.88rem; line-height: 1.45; color: var(--rm-grau-200); }
.kasse__offen b { color: var(--color-auf-dunkel); }

/* Bestellen */
.kasse__widerruf { display: grid; gap: 0.8rem; padding: 1.1rem 1.15rem; border-radius: var(--radius-m); background: var(--color-surface); }
.kasse__widerruf a { color: var(--color-accent-text); }
.kasse__abschluss { display: grid; gap: 0.85rem; }
/* Bestellübersicht direkt über dem Knopf (§ 312j BGB): was, wie viel, wann */
.kasse__bestellung { display: grid; gap: 0.45rem; padding: 1.05rem 1.15rem; border-radius: var(--radius-m); background: var(--color-surface); }
.kasse__bestellung div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.25rem; }
.kasse__bestellung dt { color: var(--color-text-muted); }
.kasse__bestellung dd { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.kasse__bestellung div:first-child { padding-bottom: 0.55rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--color-line); }
.kasse__bestellung div:first-child { display: grid; gap: 0.3rem; }   /* Auswahl kann lang werden: Bezeichnung darüber */
.kasse__bestellung div:first-child dd { font-weight: 600; text-align: left; line-height: 1.45; }
.kasse__abschluss p { color: var(--rm-grau-700); }
.kasse__abschluss b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.kasse__knopf { justify-self: stretch; min-height: 3.5rem; font-size: 1.05rem; }
@media (min-width: 40em) { .kasse__knopf { justify-self: start; padding-inline: 2rem; } }

/* Mobil: Leiste mit der fälligen Summe, solange die Zusammenfassung nicht im Bild ist */
.kasse__leiste { display: none; }
@media (max-width: 79.99em) {
  .js .kasse__leiste { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--color-dunkel); color: var(--color-auf-dunkel); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.6); transition: transform var(--dur-m) var(--ease-out); }
  .js .kasse__leiste.weg { transform: translateY(110%); transition-duration: var(--dur-s); }   /* geht schneller, als sie kommt */
  .kasse__leiste p { display: grid; gap: 0.1rem; }
  .kasse__leiste span { font-size: 0.8rem; color: var(--color-auf-dunkel-muted); }
  .kasse__leiste b { font: 780 var(--step-1)/1 var(--font-display); color: var(--color-akzent-dunkel); font-variant-numeric: tabular-nums; }
  .kasse__leiste .knopf { min-height: 2.75rem; }
  .js .b-kasse { padding-bottom: calc(var(--section-space-m) + 4rem); }
}
@media (prefers-reduced-motion: reduce) { .js .kasse__leiste { transition: none; } }

/* Seitenleiste erst ab 80em – darunter steht die Zusammenfassung vor „Prüfen und bestellen“ */
.kasse .formular__reihe { align-items: start; }
@media (min-width: 80em) {
  .kasse { grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .kasse > .kasse__schritt { grid-column: 1; }
  .kasse__summe { grid-column: 2; grid-row: 1 / span 7; position: sticky; top: calc(var(--kopf-hoehe, 4.75rem) + 1.5rem); }
}

/* b-weg (Block weg-ergebnis) — geteilte Fläche: links der feste Weg auf Nacht, rechts das freie Ergebnis auf der Bereichsfarbe. */
.b-weg { display: grid; }
.b-weg__seite { padding: var(--section-space-m) var(--rand); }
.b-weg__innen { max-width: 36rem; display: grid; gap: 1.25rem; align-content: start; }
.b-weg__seite--weg { background: var(--color-dunkel); color: var(--color-auf-dunkel); }
.b-weg__seite--weg .punkt { --punkt-farbe: var(--color-akzent-dunkel); }
.b-weg__seite--weg > .b-weg__innen > p:not(.b-weg__fuss) { color: var(--rm-grau-200); font-size: var(--step-1); line-height: 1.45; }
.b-weg__seite--ergebnis { background: var(--color-flaeche); color: #fff; }
.b-weg__seite--ergebnis .punkt { --punkt-farbe: #fff; }
.b-weg h2 { font-size: var(--step-4); }
.b-weg__schritte { display: grid; margin-top: 0.5rem; counter-reset: schritt; }
.b-weg__schritte li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--color-line-dunkel); }
.b-weg__schritte li:last-child { border-bottom: 1px solid var(--color-line-dunkel); }
.b-weg__schritte b { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.b-weg__schritte span { color: var(--color-akzent-dunkel); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-weg__fuss { color: var(--color-auf-dunkel-muted); }
.b-weg__seite--ergebnis .b-weg__fuss { color: #fff; }
.b-weg__muster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.5rem; }
.b-weg__muster li { aspect-ratio: 1; border-radius: var(--radius-l); background: var(--m2); display: grid; place-items: center; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5); }
.b-weg__muster span { font: 780 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1 var(--font-display); color: var(--m1); letter-spacing: -0.03em; }
.b-weg__muster span.serif { font-family: var(--font-body); font-weight: 300; letter-spacing: 0; }
.b-weg__eigen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.015em; }
.b-weg__eigen li { display: inline-flex; align-items: center; gap: 0.5rem; }
.b-weg__eigen li::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; }
@media (min-width: 64em) {
  .b-weg { grid-template-columns: 1fr 1fr; }
  .b-weg__seite--weg .b-weg__innen { margin-left: auto; margin-right: clamp(2rem, 4vw, 4rem); }
  .b-weg__seite--ergebnis .b-weg__innen { margin-left: clamp(2rem, 4vw, 4rem); }
}

/* b-preise — Variante „pakete“: drei Pakete, das empfohlene auf Nacht; darunter der offene Stundensatz. */
.b-preise { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-preise__kopf { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.b-preise__kopf h2 { font-size: var(--step-5); }
.b-preise__kopf p { font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); max-width: 40ch; }
@media (min-width: 64em) { .b-preise__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: end; } }
.b-preise__pakete { display: grid; gap: 1rem; align-items: stretch; }
.paket { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.9rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--radius-l); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line); }
.paket h3 { font-size: var(--step-2); }
.paket__preis { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-line); }
.paket__preis b { font: 780 var(--step-4)/1 var(--font-display); letter-spacing: -0.04em; }
.paket__preis span { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.paket > p:not([class]) { color: var(--rm-grau-700); }
.paket__garantie { font-weight: 650; color: var(--color-accent-text); }
.paket__zahlung { font-size: var(--step--1); color: var(--color-text-muted); }
.paket--empfohlen { background: var(--color-dunkel); color: var(--color-auf-dunkel); box-shadow: none; }
.paket--empfohlen .paket__preis { border-bottom-color: var(--color-line-dunkel); }
.paket--empfohlen .paket__preis span, .paket--empfohlen .paket__zahlung { color: var(--color-auf-dunkel-muted); }
.paket__preis .steuer { flex-basis: 100%; margin-top: 0; }
.paket--empfohlen .paket__preis .steuer { color: var(--color-auf-dunkel-muted); }
.paket--empfohlen > p:not([class]) { color: var(--rm-grau-200); }
.paket--empfohlen .knopf { margin-top: 0.5rem; }
.paket__marke { position: absolute; top: clamp(1.5rem, 2.5vw, 2.25rem); right: clamp(1.5rem, 2.5vw, 2.25rem); display: inline-flex; align-items: center; gap: 0.4rem; font: 700 0.78rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-akzent-dunkel); }
.paket__marke::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.b-preise__stundensatz { display: grid; gap: 0.35rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-m); border: 1.5px dashed var(--color-line); color: var(--rm-grau-700); }
.b-preise__stundensatz b { color: var(--color-text); }
@media (min-width: 64em) { .b-preise__pakete { grid-template-columns: 1fr 1fr 1.1fr; } }

/* Pakete mit Leistungsliste und Anfrage je Paket; Variante mit empfohlenem Paket in der Mitte */
.b-preise--mitte .b-preise__pakete { align-items: stretch; }
@media (min-width: 64em) { .b-preise--mitte .b-preise__pakete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); } }
.b-preise--mitte .paket__preis { align-items: flex-end; }
/* Modifier „dauer-unten“: Dauer in allen Karten unter dem Preis – für lange Preise oder lange Dauerangaben (Imagefilm) */
.b-preise--dauer-unten .paket__preis { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.b-preise--dauer-unten .paket__preis .steuer { flex-basis: auto; order: 1; margin-top: -0.15rem; }   /* senkrecht: Steuerzeile direkt unter den Preis, Dauer danach */
.b-preise--dauer-unten .paket__preis > span { order: 2; }
.b-preise--mitte .paket { display: flex; flex-direction: column; gap: 0.9rem; }
.b-preise--mitte .paket .knopf { margin-top: auto; align-self: flex-start; }   /* Knopf unten bündig in allen drei Paketen */
.b-preise--mitte .paket__liste { margin-bottom: 1rem; }
.paket__preis b small { display: block; margin-bottom: 0.4rem; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: 0.02em; color: var(--color-text-muted); }
.paket--empfohlen .paket__preis b small { color: var(--color-auf-dunkel-muted); }
.paket__liste { display: grid; gap: 0.45rem; }
.paket__liste li { position: relative; padding-left: 1.1rem; color: var(--rm-grau-700); line-height: 1.4; }
.paket__liste li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--color-punkt); }
.paket--empfohlen .paket__liste li { color: var(--rm-grau-200); }
.paket--empfohlen .paket__liste li::before { background: var(--color-akzent-dunkel); }
.paket .knopf { justify-self: start; margin-top: 0.5rem; }
.paket--empfohlen .paket__marke ~ h3 { padding-right: 7rem; }
.b-preise__hinweis { margin-top: 1.25rem; font-size: var(--step--1); color: var(--color-text-muted); }

/* Anzahl-Modifier (wp-einfach.de-Unterseiten): ein Paket schmal, zwei nebeneinander, vier in zwei bzw. vier Spalten; Grund Weiß für den Bänder-Wechsel */
.b-preise--eins .b-preise__pakete { max-width: 30rem; }
@media (min-width: 48em) { .b-preise--zwei .b-preise__pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; } .b-preise--vier .b-preise__pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em) { .b-preise--vier .b-preise__pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* vier Spalten erst, wenn „272,50 €“ in die Karte passt */
.b-preise--vier .paket__preis b { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem); }
/* Knopf unten bündig wie bei „mitte“ – auch in den Anzahl-Varianten und wenn jedes Paket einen Knopf hat („knoepfe“) */
:is(.b-preise--eins, .b-preise--zwei, .b-preise--vier, .b-preise--knoepfe) .paket { display: flex; flex-direction: column; gap: 0.9rem; }
:is(.b-preise--eins, .b-preise--zwei, .b-preise--vier, .b-preise--knoepfe) .paket .knopf { margin-top: auto; align-self: flex-start; }
:is(.b-preise--eins, .b-preise--zwei, .b-preise--vier, .b-preise--knoepfe) .paket__liste { margin-bottom: 1rem; }
.b-preise--weiss { background: var(--color-surface); }
.b-preise--weiss .paket:not(.paket--empfohlen) { background: var(--color-bg); box-shadow: none; }
/* Ein Paket (Speed): Kopf links, Karte rechts daneben – statt einer schmalen Karte vor leerer Fläche */
@media (min-width: 64em) {
  .b-preise--eins .b-preise__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .b-preise--eins .b-preise__kopf { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .b-preise--eins .b-preise__pakete { max-width: none; grid-template-columns: minmax(0, 1fr); }
}
/* Empfohlen-Marke über dem Titel, wo die dritte Spalte den Paketnamen sonst unter die Marke schiebt (SEO: „Komplett-Paket“) */
@media (min-width: 64em) and (max-width: 79.99em) {
  .b-preise--marke-oben .paket__marke { position: static; }
  .b-preise--marke-oben .paket--empfohlen .paket__marke ~ h3 { padding-right: 0; }
}
/* Modifier „kopf-gestapelt“: Überschrift über der Einleitung, wenn sie in der halben Spalte das letzte Wort allein ließe (wp-einfach.de Betreuung) */
.b-preise--kopf-gestapelt .b-preise__kopf { grid-template-columns: minmax(0, 1fr); }
.b-preise--kopf-gestapelt .b-preise__kopf p { max-width: 52ch; }

/* b-person — Variante „flaeche“: der eine Ansprechpartner auf der Bereichsfarbe, großes Porträt. */
.b-person { padding-block: var(--section-space-m); background: var(--color-flaeche); color: #fff; overflow: clip; --fokus: #fff; }
.b-person ::selection { background: #fff; color: var(--color-flaeche); }
.b-person__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.b-person__bild { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; max-width: 26rem; background: var(--color-dunkel); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6); }
.b-person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.b-person h2 { font-size: var(--step-5); max-width: 13ch; }
.b-person h2 .punkt { --punkt-farbe: #fff; }
.b-person__text > p { margin-top: 1.25rem; max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
.b-person__text > p.b-person__name { font-size: var(--step-0); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.4); }
.b-person__name a { color: #fff; font-weight: 650; }
@media (min-width: 64em) { .b-person__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* b-danach (Block text-bild, Variante „danach“) — tonaler Bruch: Nacht, die Geschichte vom verschwundenen Entwickler, vier Zusagen, Betreuung. */
.b-danach { padding-block: var(--section-space-l); background: var(--color-dunkel); color: var(--color-auf-dunkel); --fokus: var(--color-akzent-dunkel); }
.b-danach ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.b-danach__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.b-danach h2 { font-size: var(--step-6); }
.b-danach__text > p { margin-top: 1.5rem; max-width: 44ch; font-size: var(--step-1); line-height: 1.5; color: var(--rm-grau-200); }
.b-danach__text > p.b-danach__satz { font: 780 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--color-akzent-dunkel); }
.b-danach__zusagen { display: grid; gap: 2rem 2.5rem; align-content: start; }
.b-danach__zusagen li { padding-top: 1.1rem; border-top: 2px solid var(--color-akzent-dunkel); }
.b-danach__zusagen h3 { font-size: var(--step-1); }
.b-danach__zusagen p { margin-top: 0.5rem; color: var(--color-auf-dunkel-muted); max-width: 36ch; }
.b-danach__betreuung h3 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.betreuung { display: grid; gap: 0.75rem; }
.betreuung li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-m); background: var(--color-dunkel-2); box-shadow: inset 0 0 0 1px var(--color-line-dunkel); }
.betreuung b { font: 700 1.05rem/1.3 var(--font-display); }
.betreuung span { font-weight: 650; color: var(--color-akzent-dunkel); }
.betreuung .zahl { text-align: right; }
.betreuung .steuer { margin-top: 0.3rem; font-size: 0.78rem; color: var(--color-auf-dunkel-muted); }
.betreuung p { grid-column: 1 / -1; font-size: var(--step--1); color: var(--color-auf-dunkel-muted); }
.b-danach__paket { margin-top: 1.25rem; color: var(--rm-grau-200); }
.b-danach__paket b { color: #fff; }
@media (min-width: 48em) { .b-danach__zusagen { grid-template-columns: 1fr 1fr; } .betreuung { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .b-danach__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 6vw, 7rem); }
  .b-danach__betreuung { grid-column: 1 / -1; }
}
/* fünf Karten nebeneinander erst ab 1280 px – darunter reicht die Breite nicht für „Hosting Business“, Preis und Steuerzeile */
@media (min-width: 80em) { .betreuung { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* b-seitenkopf — Kopf einer Unterseite. Variante „film“ (realmaker media): Media-Nacht unter dem durchsichtigen Kopf,
   links Pfad, Überschrift mit REC-Punkt, Einleitung, Aktionen, Belege; rechts ein echtes Sendebild im Rahmen. */
.b-seitenkopf { position: relative; isolation: isolate; margin-top: -4.75rem; padding-block: calc(4.75rem + clamp(2rem, 6vh, 4.5rem)) var(--section-space-s);
  background: var(--color-dunkel); color: var(--color-auf-dunkel); overflow: clip; --fokus: var(--color-akzent-dunkel); }
.b-seitenkopf ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.b-seitenkopf__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

/* Pfad: Stationen durch Punkte getrennt */
.b-seitenkopf__pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; font: 500 var(--step--1)/1.3 var(--font-body); color: var(--color-auf-dunkel-muted); }
.b-seitenkopf__pfad li { display: inline-flex; align-items: center; gap: 0.7rem; }
.b-seitenkopf__pfad li + li::before { content: ''; width: 0.28rem; height: 0.28rem; border-radius: 50%; background: currentColor; opacity: 0.7; }
.b-seitenkopf__pfad a { display: inline-block; text-decoration: none; padding-block: 0.6rem; }   /* Tippfläche ≥ 40 px */
.b-seitenkopf__pfad [aria-current] { color: var(--color-auf-dunkel); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .b-seitenkopf__pfad a:hover { color: var(--color-auf-dunkel); text-decoration: underline; } }

.b-seitenkopf__titel { margin-top: clamp(1rem, 2.5vh, 1.6rem); font-size: clamp(2.6rem, 1.25rem + 4.3vw, 5.4rem); font-weight: 780; letter-spacing: -0.04em; line-height: 0.96; max-width: 11.5ch; }
.b-seitenkopf__punkt { --punkt-farbe: var(--color-akzent-dunkel); animation: b-seitenkopf-einrasten 1150ms both 300ms, b-seitenkopf-rec 1.2s steps(1, end) 1500ms 3; }
@keyframes b-seitenkopf-einrasten {
  0%   { transform: translateY(-2.2em); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .35); }
  12%  { opacity: 1; }
  60%  { transform: translateY(0) scale(1.2, 0.76); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  77%  { transform: translateY(-0.08em) scale(0.95, 1.06); }
  90%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { transform: none; opacity: 1; }
}
@keyframes b-seitenkopf-rec { 50% { opacity: 0.15; } }

.b-seitenkopf__einleitung { margin-top: clamp(1.25rem, 2.5vh, 1.75rem); max-width: 36ch; font: 500 var(--step-1)/1.45 var(--font-body); color: color-mix(in oklab, var(--color-auf-dunkel) 90%, var(--color-dunkel)); }
.b-seitenkopf__aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.b-seitenkopf__belege { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: clamp(1.75rem, 3.5vh, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--color-line-dunkel);
  font: 500 1rem/1.4 var(--font-body); color: var(--color-auf-dunkel-muted); }
.b-seitenkopf__belege b { font: 750 1.2rem/1 var(--font-display); letter-spacing: -0.015em; color: var(--color-auf-dunkel); margin-right: 0.3rem; }

/* Sendebild im Rahmen, mit „Live“-Kennung (der Punkt darin blinkt, weil er Sendung bedeutet) */
.b-seitenkopf__bild { margin: 0; }
.b-seitenkopf__rahmen { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-dunkel-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.b-seitenkopf__rahmen img { width: 100%; height: 100%; object-fit: cover; }
.b-seitenkopf__live { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: var(--radius-s);
  background: var(--color-flaeche); color: #fff; font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.b-seitenkopf__live::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff; animation: b-seitenkopf-rec 1.6s steps(1, end) 3; }
.b-seitenkopf__bild figcaption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--color-auf-dunkel-muted); }

@media (min-width: 64em) {
  .b-seitenkopf__inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: clamp(3rem, 5.5vw, 6rem); }
  .b-seitenkopf__titel { font-size: min(5.9vw, 5.4rem); }   /* zweispaltig: Größe folgt der Spaltenbreite */
  /* Modifier „breit“: breitere Textspalte für Titel mit kurzem Anfangswort („Ihr Unternehmen,“), damit es nicht allein steht */
  .b-seitenkopf--breit .b-seitenkopf__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .b-seitenkopf--breit .b-seitenkopf__titel { font-size: min(5.6vw, 5.4rem); max-width: 13ch; }
  .b-seitenkopf__bild { padding-top: 2.5rem; }
}
@media (min-width: 88em) { .b-seitenkopf__belege li { white-space: nowrap; } }   /* Belege bleiben ganz; passt die Reihe nicht, bricht sie um */
@media (prefers-reduced-motion: reduce) { .b-seitenkopf__punkt, .b-seitenkopf__live::before { animation: none; } }
/* Modifier „lang“ (mit „breit“): Titel mit sehr langem Wort („Ansprechpartner“) – die Größe folgt der Wortlänge,
   damit der Titel in zwei Zeilen steht und nichts in die Bildspalte ragt */
.b-seitenkopf--lang .b-seitenkopf__titel { font-size: clamp(1.8rem, 8.6vw, 5.4rem); max-width: none; }
@media (min-width: 64em) {
  .b-seitenkopf--lang .b-seitenkopf__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }   /* breitere Titelspalte, damit der Titel groß bleiben kann */
  .b-seitenkopf--lang .b-seitenkopf__titel { font-size: min(5.1vw, 4.8rem); }
}
/* Modifier „kompakt“ (Referenz-Archiv): ohne Bild, einspaltig und kürzer – die Arbeiten beginnen schon im ersten Bildschirm */
.b-seitenkopf--kompakt { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.b-seitenkopf--kompakt .b-seitenkopf__inner { grid-template-columns: minmax(0, 1fr); }
.b-seitenkopf--kompakt .b-seitenkopf__titel { max-width: none; font-size: clamp(2.6rem, 1.25rem + 4.3vw, 5.4rem); }
.b-seitenkopf--kompakt .b-seitenkopf__einleitung { max-width: 52ch; }
.b-seitenkopf--kompakt .b-seitenkopf__belege { max-width: 46rem; }
/* Rahmen für Website-Aufnahmen im Format 16:10 (Referenz-Detail), oben bündig */
.b-seitenkopf__rahmen--website { aspect-ratio: 16 / 10; }
.b-seitenkopf__rahmen--website img { object-position: top center; }
/* Bild hochkant (Über): Porträt im Rahmen 4:5, rechts in der Bildspalte */
.b-seitenkopf__bild--hoch { justify-self: center; width: min(100%, 26rem); }
.b-seitenkopf__rahmen--hoch { aspect-ratio: 4 / 5; }
.b-seitenkopf__rahmen--hoch img { object-position: 50% 20%; }
@media (min-width: 64em) { .b-seitenkopf__bild--hoch { justify-self: end; padding-top: 0; } }
/* Modifier „person“ (Über): auf dem Handy steht das Gesicht vor dem Text, quadratisch angeschnitten */
@media (max-width: 63.99em) {
  .b-seitenkopf--person .b-seitenkopf__bild { order: -1; justify-self: start; width: min(100%, 15rem); }
  .b-seitenkopf--person .b-seitenkopf__rahmen--hoch { aspect-ratio: 1; }
  .b-seitenkopf--person .b-seitenkopf__bild figcaption { display: none; }
}
/* Stand-Zeile (Rechtstexte) */
.b-seitenkopf__stand { margin-top: 1rem; font-size: var(--step--1); color: var(--color-auf-dunkel-muted); }
/* Modifier „flaeche“ (realmaker.de, Blog): Kopf auf der Bereichsfläche – dem Hero-Grund der Haut software – statt auf Dunkel.
   Alles Weiß (gedämpftes Weiß erreicht auf Kobalt kein 4,5:1), Schlusspunkt in Nacht wie im Hero, Linie weiß 40 %. */
.b-seitenkopf--flaeche { background: var(--color-flaeche); --color-auf-dunkel: #fff; --color-auf-dunkel-muted: #fff; --color-line-dunkel: rgba(255, 255, 255, 0.4); --fokus: #fff; }
.b-seitenkopf--flaeche ::selection { background: #fff; color: var(--color-flaeche); }
.b-seitenkopf--flaeche .b-seitenkopf__einleitung { color: #fff; }
.b-seitenkopf--flaeche .b-seitenkopf__punkt { --punkt-farbe: var(--rm-nacht); }
/* Außerhalb von media rastet der Schlusspunkt nur ein – das Blinken (REC) gehört media */
@media (prefers-reduced-motion: no-preference) { body:not([data-skin="media"]) .b-seitenkopf__punkt { animation: b-seitenkopf-einrasten 1150ms both 300ms; } }
/* Auf der Bereichsfläche: Rahmen mit Schatten im Bereichston (wie Hero-Bild auf Kobalt), Kontur weiß 12 % */
.b-seitenkopf--flaeche .b-seitenkopf__rahmen { background: #fff; box-shadow: 0 50px 90px -40px rgba(4, 30, 80, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* b-faq — Variante „liste“: aufklappbare Fragen (details/summary, ohne JavaScript bedienbar).
   Statt Plus-Zeichen ein Ring, in den beim Öffnen der Punkt einrastet. */
.b-faq { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-faq__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.b-faq__kopf h2 { font-size: var(--step-5); max-width: 10ch; }
.b-faq__kopf p { margin-top: 1.25rem; max-width: 30ch; font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); }
.b-faq__liste { border-top: 1px solid var(--color-line); }

.frage { border-bottom: 1px solid var(--color-line); }
.frage summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none;
  font: 700 var(--step-1)/1.3 var(--font-display); letter-spacing: -0.015em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:focus-visible { outline-offset: 6px; }
.frage__marke { position: relative; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-text) 25%, var(--color-surface)); transition: box-shadow var(--dur-s) var(--ease-out); }
.frage__marke::after { content: ''; position: absolute; inset: 0.32rem; border-radius: 50%; background: var(--color-punkt); transform: scale(0); transition: transform var(--dur-s) var(--ease-out); }
.frage[open] .frage__marke { box-shadow: inset 0 0 0 1.5px var(--color-punkt); }
.frage[open] .frage__marke::after { transform: scale(1); transition: transform var(--dur-m) var(--ease-snap); }
.frage__antwort { padding: 0 3rem 1.6rem 0; }
.frage__antwort p { max-width: 62ch; color: var(--rm-grau-700); }
@media (hover: hover) and (pointer: fine) {
  .frage summary:hover .frage__marke { box-shadow: inset 0 0 0 1.5px var(--color-text); }
  .frage[open] summary:hover .frage__marke { box-shadow: inset 0 0 0 1.5px var(--color-punkt); }
}

/* Weiches Aufklappen, wo der Browser es kann; sonst springt die Antwort einfach auf. */
@supports (interpolate-size: allow-keywords) {
  .b-faq { interpolate-size: allow-keywords; }
  .frage::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-s) var(--ease-out), content-visibility var(--dur-s) allow-discrete; }
  .frage[open]::details-content { block-size: auto; transition-duration: var(--dur-m); }   /* öffnen 280 ms, schließen 160 ms */
}
@media (prefers-reduced-motion: reduce) {
  .frage::details-content { transition: none !important; }
  .frage__marke::after { transition: none; }
}

@media (min-width: 64em) {
  .b-faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .b-faq__kopf { position: sticky; top: 7rem; }
}
.b-faq--papier { background: var(--color-bg); }   /* Grund-Modifier für den Bänder-Wechsel */
/* Modifier „lang“ (Artikel): lange Überschrift aus dem Artikel („Häufige Fragen zum WordPress-Wartungsvertrag“) – kleiner, breiter */
.b-faq--lang .b-faq__kopf h2 { font-size: var(--step-3); max-width: 15ch; }

/* b-galerie — Variante „aufnahmen“ (Referenz-Detail): echte Bildschirmaufnahmen der Website in ruhigen Rahmen,
   zwei quer und die Handy-Ansicht hochkant daneben. Kein Gerätemockup. */
.b-galerie { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-galerie__kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }
.b-galerie__kopf h2 { font-size: var(--step-5); }
.b-galerie__raster { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.aufnahme { margin: 0; }
.aufnahme__rahmen { border-radius: var(--radius-m); overflow: hidden; background: #fff; box-shadow: var(--schatten-s), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.aufnahme__rahmen img { display: block; width: 100%; height: auto; }
.aufnahme figcaption { margin-top: 0.8rem; font: 600 var(--step--1)/1.4 var(--font-body); color: var(--color-text-muted); }
.aufnahme--hoch { justify-self: center; width: min(100%, 20rem); }
.aufnahme--hoch .aufnahme__rahmen { border-radius: 1.5rem; }
@media (min-width: 64em) {
  .b-galerie__raster { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: start; }
  .aufnahme--hoch { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
}
/* Raster „drei“ (Fallstudie realmaker.de): drei Ansichten gleich groß nebeneinander, Rahmen 16:10 oben bündig – auch ein Platzhalter bekommt dieselbe Fläche */
.b-galerie__raster--drei .aufnahme__rahmen { aspect-ratio: 16 / 10; }
.b-galerie__raster--drei .aufnahme__rahmen img { height: 100%; object-fit: cover; object-position: top center; }
.b-galerie__raster--drei .aufnahme__rahmen > [data-placeholder] { height: 100%; }
@media (min-width: 48em) { .b-galerie__raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .b-galerie__raster.b-galerie__raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* b-zitat — Variante „gross“ (Referenz-Detail): eine Kundenstimme im ganzen Wortlaut, groß auf Media-Nacht. */
.b-zitat { padding-block: var(--section-space-m); background: var(--color-dunkel); color: var(--color-auf-dunkel); --fokus: var(--color-akzent-dunkel); }
.b-zitat ::selection { background: var(--color-akzent-dunkel); color: var(--color-dunkel); }
.b-zitat figure { margin: 0; }
.b-zitat blockquote p { max-width: 44ch; font: 650 var(--step-2)/1.35 var(--font-display); letter-spacing: -0.02em; text-indent: -0.4em; }
.b-zitat figcaption { display: grid; gap: 0.2rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1rem; border-top: 2px solid var(--color-akzent-dunkel); max-width: 20rem; color: var(--rm-grau-300); }
.b-zitat figcaption b { color: var(--color-auf-dunkel); }
/* Modifier „leitsatz“ (Über): ein kurzer Satz als Aussage der Seite – größer und ausgeglichen */
.b-zitat--leitsatz blockquote p { max-width: 26ch; font-size: var(--step-4); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }

/* b-fakten — Variante „liste“ (Referenz-Detail): Eckdaten des Projekts als Begriffsliste mit Kopflinien. */
.b-fakten { padding-block: var(--section-space-s); background: var(--color-surface); }
.b-fakten__kopf h2 { margin-bottom: clamp(1.5rem, 3vw, 2rem); font-size: var(--step-4); }
.b-fakten dl { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 30em) { .b-fakten dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .b-fakten dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-fakten dl > div { padding-top: 0.85rem; border-top: 2px solid var(--color-line); }
.b-fakten dt { font: 600 var(--step--1)/1.3 var(--font-body); color: var(--color-text-muted); }
.b-fakten dd { margin: 0.4rem 0 0; font: 700 var(--step-1)/1.3 var(--font-display); letter-spacing: -0.015em; }
.b-fakten--papier { background: var(--color-bg); }   /* Grund-Modifier für den Bänder-Wechsel */
.b-fakten dd a { color: inherit; text-underline-offset: 0.18em; }
.b-fakten__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.b-fakten__links a { display: inline-block; padding-block: 0.6rem; }   /* Tippfläche ≥ 44 px */

/* b-text — Variante „werdegang“ (Über): Überschrift über die ganze Breite, darunter Erzählung (links) und Eckdaten (rechts). */
.b-text { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-text__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.b-text h2 { font-size: min(var(--step-5), 11vw); max-width: 18ch; text-wrap: balance; }
.b-text__absaetze { display: grid; gap: 1.1rem; align-content: start; }
.b-text__absaetze p { max-width: 60ch; font-size: var(--step-1); line-height: 1.5; color: var(--rm-grau-700); text-wrap: pretty; }
.b-text__absaetze p:first-child { color: var(--color-text); }
.b-text__eckdaten { display: grid; gap: 1.25rem 2rem; align-content: start; }
.b-text__eckdaten > div { padding-top: 0.8rem; border-top: 2px solid var(--color-line); }
.b-text__eckdaten dt { font: 600 var(--step--1)/1.3 var(--font-body); color: var(--color-text-muted); }
.b-text__eckdaten dd { margin: 0.35rem 0 0; font: 700 var(--step-0)/1.35 var(--font-display); letter-spacing: -0.01em; }
@media (min-width: 30em) and (max-width: 63.99em) { .b-text__eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .b-text__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .b-text h2 { grid-column: 1 / -1; }
}

/* b-rechtstext — Variante „lesen“ (Impressum, Datenschutz, KI-Transparenz): Fließtext im Lesemaß, H2/H3, Listen,
   bei langen Texten ein Inhaltsverzeichnis. Offene Punkte (Entwurf) als ruhiger Kasten. */
.b-rechtstext { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-rechtstext__inner > * { max-width: 46rem; }   /* Lesespalte bündig mit dem Seitenkopf, nicht mittig */
.b-rechtstext h2 { margin-top: clamp(2.25rem, 4vw, 3rem); font-size: var(--step-2); scroll-margin-top: 6rem; }
.b-rechtstext h2:first-child { margin-top: 0; }
.b-rechtstext h3 { margin-top: 1.5rem; font-size: var(--step-1); }
.b-rechtstext p, .b-rechtstext li { max-width: 68ch; color: var(--rm-grau-700); line-height: 1.6; text-wrap: pretty; }
.b-rechtstext p { margin-top: 0.75rem; }
.b-rechtstext ul { margin-top: 0.75rem; padding-left: 1.2rem; list-style: disc; }
.b-rechtstext li + li { margin-top: 0.35rem; }
.b-rechtstext a { color: var(--color-accent-text); text-underline-offset: 0.18em; }
.b-rechtstext strong { color: var(--color-text); }
.rechtstext__inhalt { margin-bottom: clamp(2rem, 4vw, 3rem); padding-top: 1rem; border-top: 2px solid var(--color-line); }
.rechtstext__inhalt h2 { margin-top: 0; font-size: var(--step-0); }
.rechtstext__inhalt ol { margin-top: 0.75rem; display: grid; gap: 0.35rem; padding-left: 1.4rem; list-style: decimal; }
.rechtstext__offen { margin-top: 1rem; padding: 1rem 1.25rem; border: 2px dashed color-mix(in oklab, var(--color-text) 35%, var(--color-bg)); border-radius: var(--radius-m); background: var(--color-bg); }   /* Entwurf: gestrichelt, nicht wie ein normaler Hinweis */
.rechtstext__offen p { margin-top: 0; color: var(--color-text); }
.rechtstext__offen b { font-weight: 700; }
.rechtstext__inhalt a { display: inline-block; padding-block: 0.3rem; }   /* Tippfläche ≥ 24 px */
/* Modifier „kurz“ (Impressum): kurze Einträge – kleinere Zwischenüberschriften, damit die Seite nicht nur aus Titeln besteht */
.b-rechtstext--kurz h2 { margin-top: clamp(1.5rem, 3vw, 2rem); font-size: var(--step-1); }
.b-rechtstext--kurz h2 + p { margin-top: 0.35rem; }
.rechtstext__offen + .rechtstext__inhalt { margin-top: 1.75rem; }

/* b-beitrag — Artikel als Vorschau. Variante „haupt“ (Blog-Übersicht): der neueste Artikel groß, Titelbild mit KI-Kennzeichnung.
   Variante „liste“ (Artikel): drei weitere Artikel derselben Kategorie, ohne Bilder, mit Kopflinie. */
.b-beitrag { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-beitrag__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.b-beitrag__kopf h2 { font-size: var(--step-4); }

/* Meta-Zeile: Kategorie · Datum · Lesezeit, getrennt durch kleine Punkte */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.65rem; font: 500 var(--step--1)/1.4 var(--font-body); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.meta > * { display: inline-flex; align-items: center; gap: 0.65rem; }
.meta > :not(:last-child)::after { content: ''; width: 0.24rem; height: 0.24rem; border-radius: 50%; background: currentColor; opacity: 0.6; }   /* Punkt am Ende der Zeile, nie am Anfang */
.meta__neu { padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-akzent-nebel); color: var(--color-accent-text); font-weight: 650; }
.meta__neu::after { display: none; }

/* KI-Kennzeichnung auf Titelbildern (KI-Transparenz, Art. 50 KI-VO) */
.ki-bild { position: relative; margin: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--color-dunkel); box-shadow: var(--schatten-s), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.ki-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ki-bild__marke { position: absolute; left: 0.85rem; bottom: 0.85rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-s); background: rgba(9, 12, 18, 0.78); color: #fff;
  font: 700 0.78rem/1 var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; }

/* Hauptbeitrag: Bild links, Text rechts; der Titel ist der Link, die ganze Fläche klickt mit */
.beitrag-haupt { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: center; }
.beitrag-haupt .ki-bild { aspect-ratio: 16 / 9; }
.beitrag-haupt .ki-bild img { transition: transform 800ms var(--ease-out); }
.beitrag-haupt h3 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.beitrag-haupt h3 a { text-decoration: none; color: inherit; }
.beitrag-haupt h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-l); }
.beitrag-haupt .meta { margin-top: 1rem; }
.beitrag-haupt p { margin-top: 1.1rem; max-width: 52ch; color: var(--rm-grau-700); text-wrap: pretty; }
.beitrag-haupt .textlink { margin-top: 1.4rem; }
@media (hover: hover) and (pointer: fine) {
  .beitrag-haupt:hover .ki-bild img { transform: scale(1.035); }
  .beitrag-haupt:hover h3 a { color: var(--color-accent-text); }
  .beitrag-haupt:hover .textlink svg { transform: translateX(3px); }
}
@media (min-width: 64em) { .beitrag-haupt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); } }

/* Variante „liste“: weitere Artikel als Kopflinien-Spalten */
.b-beitrag--liste { background: var(--color-bg); }
.beitrag-liste { display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 3rem); }
.beitrag-liste li { position: relative; padding-top: 1.15rem; border-top: 2px solid var(--color-line); transition: border-color var(--dur-s) var(--ease-out); }
.beitrag-liste h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.beitrag-liste h3 a { text-decoration: none; color: inherit; }
.beitrag-liste h3 a::after { content: ''; position: absolute; inset: 0; }
.beitrag-liste .meta { margin-top: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
  .beitrag-liste li:hover { border-top-color: var(--color-punkt); }
  .beitrag-liste li:hover h3 a { color: var(--color-accent-text); }
}
@media (min-width: 48em) { .beitrag-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .beitrag-haupt .ki-bild img, .beitrag-liste li { transition: none; } }

/* b-blog-liste — Variante „jahre“ (Blog-Übersicht): alle Artikel nach Jahren, Filter nach Kategorie.
   Nutzt das Archiv-Muster aus referenzen-teaser (.archiv: Filter, springender Punkt, Jahresregister; Logik in site.js [data-archiv]);
   hier nur die Artikelzeile: Titel links, rechts Kategorie · Datum · Lesezeit in festen Spalten. */
.b-blog-liste { padding-block: var(--section-space-m); background: var(--color-bg); }
.b-blog-liste__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.b-blog-liste__kopf h2 { font-size: var(--step-4); }
.archiv__projekt a.beitrag-zeile { display: grid; gap: 0.3rem 2rem; padding-block: 0.8rem; grid-template-columns: minmax(0, 1fr); }
.beitrag-zeile__titel { font-weight: 650; line-height: 1.4; text-wrap: pretty; transition: color var(--dur-s) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .beitrag-zeile:hover .beitrag-zeile__titel { color: var(--color-accent-text); } }
@media (min-width: 64em) {   /* darunter steht die Meta-Zeile unter dem Titel, sonst bleiben dem Titel bei 768 px nur 160 px */
  .archiv__projekt a.beitrag-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .beitrag-zeile .meta { display: grid; grid-template-columns: 10.5rem 7.25rem 3.75rem; column-gap: 1rem; }
  .beitrag-zeile .meta > *::after { display: none; }
  .beitrag-zeile .meta > :last-child { justify-content: end; }
}
@media (prefers-reduced-motion: reduce) { .beitrag-zeile__titel { transition: none; } }

/* b-autor — der Mensch hinter dem Text. Variante „kurz“ (Blog-Übersicht) und „box“ (Artikel): Porträt rund, Name, Rolle, zwei Sätze, Link. */
.b-autor { padding-block: var(--section-space-s); background: var(--color-surface); }
.autor { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.25rem clamp(1.25rem, 3vw, 2.25rem); align-items: start; max-width: 50rem; padding-top: 1.5rem; border-top: 2px solid var(--color-line); }
.autor__bild { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.autor h2 { font-size: var(--step-1); letter-spacing: -0.015em; }
.autor__rolle { margin-top: 0.15rem; font-size: var(--step--1); color: var(--color-text-muted); }
.autor p:not(.autor__rolle) { margin-top: 0.75rem; max-width: 58ch; color: var(--rm-grau-700); text-wrap: pretty; }
.autor .textlink { margin-top: 0.9rem; }
.b-autor--box .autor { grid-template-columns: 6.5rem minmax(0, 1fr); }
@media (min-width: 48em) { .b-autor--box .autor { grid-template-columns: 7.5rem minmax(0, 1fr); } }
/* Ohne Porträt (Artikel): das Porträt steht schon in der Autorzeile im Kopf – kein Bild doppelt auf einer Seite */
.autor--ohne-bild, .b-autor--box .autor--ohne-bild { grid-template-columns: minmax(0, 1fr); }

/* b-artikelkopf — Kopf eines Blogartikels (Lesemodus): auf Papier unter dem hellen Kopf. Pfad, Titel, Anriss,
   Zeile mit Autor, Datum und Lesezeit, darunter das gekennzeichnete Titelbild. Breite wie Inhaltsverzeichnis plus Lesespalte. */
.b-artikelkopf { margin-top: -4.75rem; padding-block: calc(4.75rem + clamp(1.75rem, 5vh, 3.5rem)) clamp(2.5rem, 5vw, 4rem); background: var(--color-bg); }
.b-artikelkopf__pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; font: 500 var(--step--1)/1.3 var(--font-body); color: var(--color-text-muted); }
.b-artikelkopf__pfad li { display: inline-flex; align-items: center; gap: 0.7rem; }
.b-artikelkopf__pfad li + li::before { content: ''; width: 0.28rem; height: 0.28rem; border-radius: 50%; background: currentColor; opacity: 0.7; }
.b-artikelkopf__pfad a { display: inline-block; padding-block: 0.6rem; text-decoration: none; }   /* Tippfläche ≥ 40 px */
.b-artikelkopf__pfad [aria-current] { color: var(--color-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .b-artikelkopf__pfad a:hover { color: var(--color-text); text-decoration: underline; } }
.b-artikelkopf__titel { margin-top: clamp(0.75rem, 2vh, 1.25rem); max-width: 21ch; font-size: clamp(2.2rem, 1.35rem + 3.4vw, 4.4rem); font-weight: 780; line-height: 1.02; letter-spacing: -0.04em; }
.b-artikelkopf__anriss { margin-top: clamp(1.1rem, 2.5vh, 1.6rem); max-width: 50ch; font: 500 var(--step-1)/1.45 var(--font-body); color: var(--rm-grau-700); text-wrap: pretty; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: clamp(1.5rem, 3vh, 2rem); font: 500 var(--step--1)/1.4 var(--font-body); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.byline__bild { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.byline__name { color: var(--color-text); font-weight: 650; }
.byline > span { display: inline-flex; align-items: center; gap: 0.75rem; }
.byline > span:not(:last-child)::after { content: ''; width: 0.24rem; height: 0.24rem; border-radius: 50%; background: currentColor; opacity: 0.6; }   /* Punkt am Ende der Zeile, nie am Anfang */
.b-artikelkopf .ki-bild { margin-top: clamp(2rem, 4vw, 3rem); max-width: calc(57rem + clamp(3rem, 5vw, 5.5rem)); aspect-ratio: 16 / 9; }   /* endet mit der Lesespalte darunter (15rem + Abstand + 42rem) */
@media (min-width: 48em) { .b-artikelkopf .ki-bild { aspect-ratio: 2 / 1; } }

/* b-richtext — Variante „artikel“: Lesetext eines Blogartikels. Ab 64em links das mitlaufende Inhaltsverzeichnis
   (der Punkt wandert zum Abschnitt, den man gerade liest), rechts die Lesespalte (42rem ≈ 70 Zeichen).
   Gestaltet für H2/H3, Listen mit Punkten, Schrittfolgen, Hinweiskästen, Tabellen, Checkliste, Zitat und Code. */
.b-richtext { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-richtext__inner { display: grid; gap: 2rem; }   /* linksbündig wie die übrigen Bänder; die Spuren sind fest, der Rest bleibt rechts frei */
@media (min-width: 64em) { .b-richtext__inner { grid-template-columns: 15rem minmax(0, 42rem); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; } }

/* Inhaltsverzeichnis: mobil aufklappbar, ab 64em offen, klebt und zeigt mit dem Punkt die aktuelle Stelle */
.inhalt { border-top: 2px solid var(--color-line); }
.inhalt summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; cursor: pointer; list-style: none;
  font: 700 var(--step-0)/1.2 var(--font-display); letter-spacing: -0.01em; }
.inhalt summary::-webkit-details-marker { display: none; }
.inhalt summary .frage__marke { width: 1.2rem; height: 1.2rem; }
.inhalt[open] summary .frage__marke { box-shadow: inset 0 0 0 1.5px var(--color-punkt); }
.inhalt[open] summary .frage__marke::after { transform: scale(1); }
.inhalt__liste { position: relative; }
.inhalt ol { display: grid; gap: 0.1rem; padding: 0.25rem 0 1rem; }
.inhalt a { display: block; padding: 0.4rem 0 0.4rem 1.1rem; text-decoration: none; font: 500 var(--step--1)/1.35 var(--font-body); color: var(--color-text-muted); transition: color var(--dur-s) var(--ease-out); }
.inhalt a[aria-current="true"] { color: var(--color-text); font-weight: 650; }
.inhalt__punkt { position: absolute; left: 0; top: 0; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-punkt); opacity: 0; }
@media (min-width: 64em) { .inhalt.bereit .inhalt__punkt { opacity: 1; transition: translate var(--dur-m) var(--ease-out), opacity var(--dur-s) var(--ease-out); } }   /* mobil ohne Punkt: dort ist das Verzeichnis ein Sprungmenü */
@media (hover: hover) and (pointer: fine) { .inhalt a:hover { color: var(--color-text); } }
@media (min-width: 64em) {
  .inhalt { position: sticky; top: 7rem; max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-top: 1rem; }
  .inhalt summary { pointer-events: none; min-height: 0; padding-bottom: 0.5rem; font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); }
  .inhalt summary .frage__marke { display: none; }
  .inhalt__liste::before { content: ''; position: absolute; left: 0.2rem; top: 0.6rem; bottom: 1.4rem; width: 1px; background: var(--color-line); }
}

/* Lesespalte */
.richtext { min-width: 0; color: var(--rm-grau-700); }
.richtext > * + * { margin-top: 1.1rem; }
.richtext p, .richtext li { line-height: 1.65; text-wrap: pretty; }
.richtext .richtext__anriss { font: 400 var(--step-1)/1.55 var(--font-body); color: var(--color-text); }
.richtext h2 { margin-top: clamp(3rem, 6vw, 4.5rem); font-size: var(--step-3); color: var(--color-text); scroll-margin-top: 6.5rem; }
.richtext h3 { margin-top: 2.25rem; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--color-text); scroll-margin-top: 6.5rem; }
.richtext h2 + *, .richtext h3 + * { margin-top: 0.85rem; }
.richtext strong { font-weight: 650; color: var(--color-text); }
.richtext a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .richtext a:hover { text-decoration-thickness: 2px; } }
.richtext ul:not([class]) { display: grid; gap: 0.55rem; }
.richtext ul:not([class]) > li { position: relative; padding-left: 1.35rem; }
.richtext ul:not([class]) > li::before { content: ''; position: absolute; left: 0.2rem; top: 0.68em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--color-punkt); }

/* Schrittfolge: Nummer, Titel, Text – mit Haarlinie dazwischen */
.schritte { counter-reset: schritt; border-top: 1px solid var(--color-line); }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--color-line); }
.schritte > li::before { content: counter(schritt); grid-row: span 2; font: 760 var(--step-1)/1.3 var(--font-display); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.richtext .schritte h3 { margin-top: 0; font: 700 var(--step-0)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--color-text); }
.schritte p { margin-top: 0.3rem; }

/* Hinweiskästen: ruhige Fläche mit Titel, ohne farbigen Seitenbalken. „kurz“ = Antwort vorab in Kobalt-Nebel; „archiv“ für alte Artikel. */
.hinweis { padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-m); background: var(--color-bg); }
.hinweis__titel { font: 700 var(--step-0)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--color-text); }
.hinweis__titel + * { margin-top: 0.5rem; }
.hinweis--kurz { background: var(--color-akzent-nebel); }
.hinweis--kurz .hinweis__titel { color: var(--color-accent-text); }
.hinweis--archiv { margin-bottom: 1rem; }

/* Tabellen: Spaltenköpfe als Label, Haarlinien, Ziffern tabellarisch; mobil seitlich scrollbar */
.tabelle { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-s); }
.tabelle:focus-visible { outline-offset: 4px; }
.tabelle table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; font-variant-numeric: tabular-nums; }
.tabelle th { padding: 0 1rem 0.6rem 0; text-align: left; vertical-align: bottom; font: 700 0.78rem/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-text); }
.tabelle td { padding: 0.75rem 1rem 0.75rem 0; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.tabelle td:first-child { color: var(--color-text); }

/* Checkliste zum Abhaken: echte Kontrollkästchen; beim Abhaken fällt der Punkt in den Ring */
.checkliste { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-l); background: var(--color-bg); }
.checkliste__titel { font: 700 var(--step-1)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--color-text); }
.checkliste__liste { margin-top: 0.75rem; }
.checkliste li + li { border-top: 1px solid var(--color-line); }
.checkliste label { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start; padding-block: 0.7rem; cursor: pointer; }
.checkliste input { appearance: none; position: relative; width: 1.5rem; height: 1.5rem; margin: 0.08rem 0 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-text) 30%, #fff); cursor: pointer;
  transition: box-shadow var(--dur-s) var(--ease-out), transform 120ms var(--ease-out); }
.checkliste input::after { content: ''; position: absolute; inset: 0.36rem; border-radius: 50%; background: var(--color-punkt); transform: scale(0); transition: transform var(--dur-s) var(--ease-out); }
.checkliste input:checked { box-shadow: inset 0 0 0 1.5px var(--color-punkt); }
.checkliste input:active { transform: scale(0.92); }   /* Druck: der Ring gibt kurz nach */
.checkliste input:checked::after { transform: scale(1); transition: transform var(--dur-m) var(--ease-snap); }
.checkliste input:checked + span { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .checkliste label:hover input:not(:checked) { box-shadow: inset 0 0 0 1.5px var(--color-text); } }

/* Zitat und Code (für andere Artikel; im Beispiel nicht verwendet) */
.richtext blockquote { padding-left: 1.25rem; border-left: 1px solid var(--color-line); font: 600 var(--step-1)/1.4 var(--font-display); letter-spacing: -0.015em; color: var(--color-text); }
.richtext code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--color-bg); font: 0.88em/1.4 var(--font-mono); color: var(--color-text); }
.richtext pre { overflow-x: auto; padding: 1.1rem 1.25rem; border-radius: var(--radius-m); background: var(--rm-nacht); color: var(--rm-papier); font: 0.88rem/1.6 var(--font-mono); tab-size: 2; }
.richtext pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.richtext pre::selection, .richtext pre ::selection { background: var(--color-akzent-dunkel); color: var(--rm-nacht); }
@media (prefers-reduced-motion: reduce) { .inhalt.bereit .inhalt__punkt, .inhalt a, .checkliste input, .checkliste input::after { transition: none !important; } }

/* b-produkte — Variante „liste“ (realmaker.de, Produkte): eigene Produkte als große Zeilen. Bildschirmaufnahme der
   Produkt-Website im Rahmen (Rahmen schwebend), daneben Name, ein Satz, Fakten zwischen Haarlinien und die Wege zum Produkt.
   Darunter weitere eigene Werkzeuge als Kopflinien-Spalten. */
.b-produkte { padding-block: var(--section-space-m); background: var(--color-surface); }
.b-produkte__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.b-produkte__kopf h2 { font-size: var(--step-4); }
.b-produkte__kopf p { margin-top: 0.9rem; max-width: 46ch; font-size: var(--step-1); line-height: 1.45; color: var(--color-text-muted); }
.produkt { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; padding-block: clamp(2.25rem, 5vw, 4rem); border-top: 1px solid var(--color-line); }
.produkt__bild { margin: 0; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; background: #fff; box-shadow: var(--schatten-l), 0 0 0 1px rgba(16, 18, 22, 0.06); }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.produkt h3 { font-size: var(--step-4); letter-spacing: -0.035em; }
.produkt__satz { margin-top: 0.9rem; max-width: 40ch; font: 500 var(--step-1)/1.45 var(--font-body); color: var(--rm-grau-700); }
.produkt__fakten { margin-top: 1.5rem; border-top: 1px solid var(--color-line); }
.produkt__fakten li { padding-block: 0.65rem; border-bottom: 1px solid var(--color-line); color: var(--rm-grau-700); font-variant-numeric: tabular-nums; }
.produkt__fakten b { color: var(--color-text); font-weight: 650; }
.produkt__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
@media (min-width: 64em) {
  .produkt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .produkt:nth-child(even) .produkt__bild { order: 2; }
  .produkt h3 { font-size: min(var(--step-4), 3.7vw); }   /* „Offenlegungs-XML“ passt bei 1024 px in die Textspalte */
}
.produkte__weitere { margin-top: clamp(1rem, 2vw, 1.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-line); }
.produkte__weitere > h3 { margin-bottom: 1.5rem; font-size: var(--step-3); }
.produkte__weitere ul { display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 3rem); }
.produkte__weitere h4 { font: 760 var(--step-2)/1.1 var(--font-display); letter-spacing: -0.03em; }
.produkte__weitere li { padding-top: 1.1rem; border-top: 2px solid var(--color-punkt); }
.produkte__weitere p { margin-top: 0.5rem; max-width: 44ch; color: var(--rm-grau-700); }
.produkte__weitere .textlink { margin-top: 0.75rem; }
@media (min-width: 48em) { .produkte__weitere ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sehr breite Aufnahmen (img2text.net, 2,3:1): links bündig anschneiden, damit die Überschrift der Seite ganz bleibt */
.produkt__bild--links img { object-position: left top; }