/* ==========================================================================
   searchit AI Agent — Produktseite auf der Wurzeldomain. Reines CSS, kein Build.

   Seit 2026-09-18 vollständig nach dem Gestaltungssatz
   (AI/conventions/gestaltung.md, Seitenklasse „Verkaufsseite", R-GEST-080):
   neun Schriftstufen s-00..s-08, Abstandsleiter a-0..a-8 in rem, drei
   Umbruchpunkte b-s 40rem · b-m 56rem · b-l 72rem, Farbe erst Rolle, dann Wert
   (R-GEST-040), ein Blau — das der Bohne im Logo (R-GEST-041). Vorlage war
   AI/conventions/styleguide.html, nicht eine bestehende Seite.

   Die Seite ist linear: sie wird ohne Begleitung gelesen, von oben nach unten,
   und steht auch ohne JavaScript vollständig da.
   ========================================================================== */

:root {
  /* Farbrollen (R-GEST-040). Die Namen --accent … bleiben, weil die Komponenten
     unter usecases/ und kundenakte/ sie mit Rückfallwert erben (R-GEST-066). */
  --marke:         #14253A;   /* Marke — Schriftzug „search" */
  --marke-tief:    #0A1828;
  --accent:        #026CDF;   /* Markenblau — Bohne im Logo */
  --accent-dark:   #0147B1;   /* Markenblau dunkel — „it" im Logo */
  --accent-soft:   #DCEBFF;   /* Markenblau hell */
  --handlung:      #FFA245;   /* Handlung — Iphos-Orange, ein Knopf je Kopf (R-GEST-040, 2026-10-05) */
  --handlung-text: #FFFFFF;   /* Schrift darauf: Weiß, fett — bewusst unter AA (2,0 : 1), User 2026-10-05 */
  --fach:          #A332FF;   /* Fachthema Datenschutz — nur dort (R-GEST-042) */
  --erfolg:        #7CB945;
  --fehler:        #EB5055;
  --white:         #ffffff;
  --bg:            #f5f5f5;
  --border:        #e9e9e9;
  --line:          #dbe3ea;
  --ink:           #2b3033;
  --grey:          #61686c;   /* Nebentext — leiser Text immer hier, nie #868B8E (R-GEST-043) */

  --schrift: 'Source Sans Pro', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Schriftstufen (R-GEST-011) */
  --s-00: 0.75rem; --s-01: 0.875rem; --s-02: 1.0625rem; --s-03: 1.25rem; --s-04: 1.5rem;
  --s-05: 1.875rem; --s-06: 2.375rem; --s-07: 3rem;

  /* Abstandsleiter (R-GEST-020) */
  --a-0: 0.25rem; --a-1: 0.5rem; --a-2: 0.75rem; --a-3: 1rem; --a-4: 1.5rem;
  --a-5: 2rem; --a-6: 3rem; --a-7: 4rem; --a-8: 6rem;

  /* Radien, Tiefe, Dauern (R-GEST-060/061/070) */
  --r-2: 12px; --r-3: 16px; --r-pille: 999px;
  --e-0: 0 1px 2px rgba(43, 48, 51, 0.14);
  --e-1: 0 6px 18px rgba(43, 48, 51, 0.08);
  --e-2: 0 18px 48px rgba(43, 48, 51, 0.12);
  --e-3: 0 24px 64px rgba(43, 48, 51, 0.28);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms;
  --d-band: 60s;              /* Ausnahme von R-GEST-070: Logo-Band, anhaltbar (Knopf, Überfahren, Fokus) */

  --breite: 1180px;
  --breite-text: 820px;
  --rand-seite: clamp(1rem, 3vw, 2rem);
  --ziel: 2.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-padding-top: 5rem; }

body {
  font-family: var(--schrift);
  color: var(--ink);
  background: var(--white);
  font-size: var(--s-02);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Lange deutsche Wörter trennen, Netz für Browser ohne Silbenwörterbuch (R-GEST-035). */
  hyphens: auto;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand-seite); }
.wrap--narrow { max-width: calc(var(--breite-text) + 2 * var(--rand-seite)); }

/* ---------- Grundtypografie (R-GEST-012/013/014) ---------- */
/* Überschriften werden nicht getrennt: „Ge-dächtnis" über zwei Zeilen zerreißt das tragende
   Wort der Kernaussage (User 2026-09-20). Das Wort rückt dann als Ganzes in die nächste Zeile;
   `overflow-wrap` aus dem Grundsatz bleibt als Notnagel für sehr schmale Schirme. */
h1, h2, h3, .hero__stufe2 { hyphens: manual; -webkit-hyphens: manual; }
h1 {
  font-size: clamp(var(--s-06), 5vw, var(--s-07));
  line-height: 1.25; letter-spacing: -0.01em; font-weight: 700;
}
h2 {
  font-size: clamp(var(--s-05), 4vw, var(--s-06));
  line-height: 1.25; letter-spacing: -0.01em; font-weight: 700;
}
h3 { font-size: var(--s-04); line-height: 1.35; font-weight: 700; }
h4 { font-size: var(--s-03); line-height: 1.5; font-weight: 600; }

.eyebrow {
  margin-bottom: var(--a-2);
  font-size: var(--s-01); font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent);
}
.eyebrow--fach { color: var(--fach); }
/* Trägt die Eyebrow den Produktnamen, bleibt sie in ihrer Schreibweise: Versalien machten
   aus „searchit" sichtbar „SEARCHIT" (R-BRAND-001). */
.eyebrow--name { text-transform: none; letter-spacing: 0.02em; }
/* Im Einstieg steht der Produktname zwischen der großen Marke und der Überschrift; in der
   Eyebrow-Stufe ging er dort unter (User 2026-09-20). Eine Stufe größer, wie der Lead. */
.hero .eyebrow--name { font-size: var(--s-03); margin-bottom: var(--a-3); }

.lead { margin-top: var(--a-3); max-width: 72ch; font-size: var(--s-03); line-height: 1.5; color: var(--grey); }
.sect__text { margin-top: var(--a-4); max-width: 72ch; }

.link {
  display: inline-flex; align-items: center; min-height: var(--ziel);
  color: var(--accent); font-weight: 600; text-decoration: none;
  transition: color var(--d-1) ease;
}
.link:active { color: var(--accent-dark); }
/* Sprungmarken im Fließtext (Lead im Einstieg): inline, unterstrichen, damit sie als Verweis
   erkennbar sind, ohne wie ein Knopf zu wirken. Verweise mitten im Text sind von der
   44-px-Zielgröße ausgenommen (R-GEST-036). */
.lead a.link { display: inline; min-height: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.weiter { margin-top: var(--a-3); }

/* Fokusring überall derselbe (R-GEST-063). */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---------- Schaltflächen (R-GEST-064) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ziel); padding: var(--a-2) var(--a-4);
  font: inherit; font-size: var(--s-02); font-weight: 700; line-height: 1;
  text-decoration: none; border-radius: var(--r-pille); border: 2px solid transparent;
  transition: background-color var(--d-1) ease, border-color var(--d-1) ease, color var(--d-1) ease;
}
.btn--primary { background: var(--accent); color: var(--white); box-shadow: var(--e-1); }
.btn--primary:active { background: var(--accent-dark); }
/* Rolle Handlung (R-GEST-040, User 2026-10-05): der Haupt-Handlungsaufruf der Seite ist im
   Ruhezustand Markenblau, beim Überfahren und Drücken Iphos-Orange, Schrift weiß und fett. */
.btn--handlung:active { background: var(--handlung); color: var(--handlung-text); }
/* Auf dunklem Grund ist das Bedienelement weiß (R-GEST-046). */
.btn--hell { background: var(--white); color: var(--marke); box-shadow: var(--e-1); }
.btn--hell:active { background: var(--accent-soft); }
.btn--hell:focus-visible { outline-color: var(--white); }
/* Zweitrangig: derselbe Umriss, gefüllt wird nur der eine Handlungsaufruf (R-PSY-008). */
.btn--geist { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--geist:active { background: var(--accent-soft); }
.btn--lg { font-size: var(--s-03); padding: var(--a-3) var(--a-5); }
.aktion { margin-top: var(--a-5); }

@media (hover: hover) {
  .link:hover { color: var(--accent-dark); text-decoration: underline; }
  .btn--primary:hover { background: var(--accent-dark); }
  .btn--handlung:hover { background: var(--handlung); color: var(--handlung-text); }
  .btn--hell:hover { background: var(--accent-soft); }
}

/* ---------- Kopf: Baustein _shared/nav/ (nav.css, Plan SITE-15 S2) ----------
   Auch die Regel des aktiven Menüpunkts (R-GEST-039) steht nur dort; PortalTokensUnitTest
   in ../spring-angular liest sie aus nav.css. */

/* ---------- Abschnitte (Rhythmus a-8, R-GEST-022/080) ---------- */
.sect { padding: var(--a-8) 0; border-top: 1px solid var(--border); }
.sect--tint { background: var(--bg); }
/* Eigene Fläche in der Rolle Markenblau hell: hebt den EU-AI-Act-Abschnitt aus der Folge der
   grauen Abschnitte heraus, ohne die dunkle Markenfläche der Referenzen zu entwerten
   (User 2026-09-21). Kein neuer Farbwert — die Rolle --accent-soft besteht (R-GEST-041). */
.sect--soft { background: var(--accent-soft); border-top: 0; }
.sect__kopf { max-width: var(--breite-text); }
.ausschnitt__kurat { max-width: var(--breite-text); margin: var(--a-4) auto 0; text-align: center; }
.sect__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-6); align-items: center; }
.sect__split--oben { align-items: start; margin-top: var(--a-5); }
.sect__split > * { min-width: 0; }

.fig { margin: 0; }
.fig img { display: block; width: 100%; border-radius: var(--r-3); background: var(--white); box-shadow: var(--e-1); }
.fig figcaption { margin-top: var(--a-1); font-size: var(--s-01); color: var(--grey); }

/* ---------- Einstieg ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--a-7) 0 var(--a-8);
  background: linear-gradient(180deg, var(--white) 0%, var(--accent-soft) 100%);
}
/* Wissensgraph als Hintergrund (SITE-5 §14): statisch, leise, ohne Text. Er wird links
   ausgeblendet, wo der Einstiegstext steht — sonst laufen Kanten durch den Lead und der
   Kontrast fällt unter die Schwelle (User 2026-09-20, R-GEST-044). */
.hero__graph {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.12) 42%, #000 68%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.12) 42%, #000 68%);
}
.hero__kanten path { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.14; }
.hero__knoten circle { fill: var(--accent); opacity: 0.18; }
/* Der Einstiegstext steht auf dem hellblauen Verlauf; Nebentextgrau trägt dort nicht. */
.hero .lead { color: var(--ink); }
/* Bean als Erkennungszeichen (R-GEST-053: im Einstieg darf sie Mittelpunkt sein). Sie schwebt
   drei Mal und bleibt dann stehen — endlich statt Dauerschleife (R-GEST-071). */
/* Die Marke im Einstieg: dieselbe Grafik wie auf der Startfolie der Präsentation
   (Logo mit Bohne, User 2026-09-20). Kein Schweben — die Ausnahme von R-GEST-070 gilt
   der Bohne allein, nicht einem Logo. */
/* Das tragende Wort der Kernaussage in Markenblau, wie auf der Startfolie der
   Präsentation (User 2026-09-20). */
.hero h1 .hl { color: var(--accent); }
.hero__logo {
  display: block; width: min(21rem, 70vw); height: auto; margin-bottom: var(--a-3);
  filter: drop-shadow(0 10px 14px rgba(2, 108, 223, 0.18));
}
.sect__kopf--links { max-width: 60ch; }
/* Das Hochformat würde die halbe Abschnittsbreite füllen und den Text allein stehen lassen. */
#gedaechtnis .fig { max-width: 24rem; margin-left: auto; }
/* Der Kopf des Schaubilds steht in der linken Spalte neben dem Foto, damit unter dem Lead
   keine leere Fläche bleibt (User 2026-09-20). Das Schaubild selbst bleibt voll breit. */
#gedaechtnis .ausschnitt__kopf { margin-top: var(--a-5); }
#gedaechtnis .ausschnitt { margin-top: var(--a-4); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-6); align-items: start; }
.hero__grid > * { min-width: 0; }
.hero__stufe2 { font-size: var(--s-04); line-height: 1.35; color: var(--marke); }
.hero__hinweis { margin: var(--a-1) 0 var(--a-3); font-size: var(--s-01); color: var(--grey); }

/* ---------- Karten und Kachelreihen (R-GEST-064/033) ---------- */
.cards { margin-top: var(--a-5); display: grid; gap: var(--a-3); grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
/* Karte mit Bean-Pose als Wegweiser, wie die Ecken-Bohne der Präsentation */
.card--bean { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: var(--a-3); align-items: start; }
.card--bean .card__bean { grid-row: span 3; width: 4.5rem; height: 4.5rem; object-fit: contain; }
.fig--breit { margin-top: var(--a-5); }
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--a-4); box-shadow: var(--e-1);
}
.card h3 { margin-bottom: var(--a-1); }
.card p { color: var(--grey); }

/* ---------- Aufzählungen (R-GEST-069) ---------- */
.liste { margin-top: var(--a-3); list-style: none; display: grid; gap: var(--a-2); }
.liste li { position: relative; padding-left: var(--a-4); line-height: 1.5; }
.liste li::before {
  content: ""; position: absolute; left: var(--a-0); top: 0.55em;
  width: var(--a-1); height: var(--a-1); border-radius: 50%; background: var(--accent);
}
/* Zeichenliste: ✗ nur im Abschnitt „Was der Status quo kostet", ✓ für Zusagen. */
.liste--problem li::before { content: "✗"; width: auto; height: auto; background: none; top: 0; left: 0; color: var(--fehler); font-weight: 700; }
.liste--ok li::before { content: "✓"; width: auto; height: auto; background: none; top: 0; left: 0; color: var(--erfolg); font-weight: 700; }

/* ---------- Grenz-Absatz, Zitat, Kennzeichnung (R-GEST-064) ---------- */
.grenze {
  margin-top: var(--a-4); max-width: 72ch;
  border-left: 3px solid var(--line); padding-left: var(--a-2); color: var(--grey);
}
.zitat {
  background: var(--white); border-radius: var(--r-3); padding: var(--a-3) var(--a-4);
  font-style: italic; border: 1px solid var(--border);
}
.sect--tint .zitat { background: var(--white); }
.sect:not(.sect--tint) .zitat { background: var(--bg); border-color: var(--bg); }
.kennung {
  display: inline-block; padding: var(--a-0) var(--a-2); border: 1px solid var(--border);
  border-radius: var(--r-pille); background: var(--white);
  font-size: var(--s-00); font-weight: 600; line-height: 1.5; color: var(--grey);
}

/* ---------- Gedächtnis: Ausschnitt des Graph-Schaubilds (User 2026-09-19) ----------
   Das Schaubild steht nicht großflächig da, sondern als Ausschnitt mit Verlauf; der Knopf und
   jeder Klick hinein öffnen das Vollbild des Bausteins. Der Verlauf fängt keine Klicks ab. */
.ausschnitt { position: relative; margin-top: var(--a-5); }
.ausschnitt__kopf { max-width: var(--breite-text); margin-bottom: var(--a-3); }
.ausschnitt__kopf p { margin-top: var(--a-1); color: var(--grey); }
.ausschnitt__fenster {
  position: relative; max-height: 26rem; overflow: hidden; border-radius: var(--r-3);
  border: 2px solid var(--border); box-shadow: var(--e-1);
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
/* Den Rahmen trägt hier das Fenster, nicht das Schaubild: das Fenster schneidet ab, Rand und
   Schatten des Schaubilds wären nur halb zu sehen (User 2026-09-21: „zu schwacher Rahmen").
   Überfahren nach R-GEST-073 — auch über dem Eckknopf und „Ganzen Graphen öffnen". */
.ausschnitt .ka:not(.ka--vollbild) .ka__svg { border-color: transparent !important; box-shadow: none !important; border-radius: 0; }
@media (hover: hover) {
  .ausschnitt__fenster:hover, .ausschnitt:has(.ausschnitt__knopf:hover) .ausschnitt__fenster { border-color: var(--accent); box-shadow: var(--e-2); }
}
.ausschnitt__fenster .ka-traeger { margin-top: 0; }
.ausschnitt__fenster::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, var(--bg) 85%);
}
.ausschnitt__knopf { position: absolute; left: 50%; bottom: var(--a-4); transform: translateX(-50%); z-index: 2; }

/* ---------- Mitarbeiter: drei Aufträge, die die Frage fortsetzen ---------- */
.auftraege { margin-top: var(--a-5); padding: var(--a-5); border-radius: var(--r-3); background: var(--bg); }
.auftraege__kopf p { margin-top: var(--a-1); color: var(--grey); max-width: 72ch; }
.auftraege__liste { margin-top: var(--a-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-3); }
.auftrag {
  display: grid; grid-template-rows: auto auto 1fr; text-align: left; overflow: hidden;
  min-height: var(--ziel); padding: 0 0 var(--a-3); border: 2px solid var(--border); border-radius: var(--r-3);
  background: var(--white); box-shadow: var(--e-0); font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
/* Dieselben Fotos wie die Anwendungsfall-Karten der Präsentation (User 2026-09-20);
   Hochformat, deshalb als Kopfband beschnitten. */
.auftrag__foto { width: 100%; height: 9rem; object-fit: cover; object-position: center 30%; }
.auftrag__titel { margin: var(--a-3) var(--a-3) 0; font-weight: 700; color: var(--marke); }
.auftrag__titel::after { content: " \203A"; color: var(--accent); }
.auftrag__text { margin: var(--a-1) var(--a-3) 0; font-size: var(--s-01); color: var(--grey); }
.auftrag:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.auftrag:active { box-shadow: var(--e-0); }
@media (hover: hover) { .auftrag:hover { border-color: var(--accent); box-shadow: var(--e-1); } }
@media (hover: hover) { .auftrag:hover .auftrag__foto { filter: saturate(1.08); } }
.auftraege__kennung { margin-top: var(--a-3); font-size: var(--s-01); color: var(--grey); }

/* ---------- Mitarbeiter: Werkzeug-Übersicht ----------
   Die vier Textkacheln sind seit SITE-11 ersetzt durch das geteilte Objekt unter
   01_projekte/_shared/werkzeuge/ (eigenes Stylesheet). Die Figur „Wo er läuft" stand bis
   2026-09-21 darunter; sie ist entfallen, ihre Aussage steht als Leitplanke wz.lp7. */

/* ---------- Overlay (dialog) für Beispiele und Aufträge (R-GEST-064/070) ----------
   Overlay-Kennzeichen (R-GEST-039, User 2026-09-21): dunkler Grund, der ringsum sichtbar
   bleibt, Rahmen 3 px Markenblau, und das ✕ oben rechts läuft beim Scrollen mit — auch in einem
   langen Overlay auf dem Telefon sieht man, wo man ist und wie man herauskommt. Nur das ✕, nicht
   der ganze Kopf: der wäre auf dem Telefon höher als die 15 % für feste Flächen.
   Dasselbe gilt für das Vollbild des Wissensgraphen und die Agenten-Vorführung (_shared/). */
dialog.ov {
  --ov-pad: var(--a-5);
  width: min(44rem, calc(100vw - 2 * var(--rand-seite)));
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  margin: auto; padding: var(--ov-pad); border: 3px solid var(--accent); border-radius: var(--r-3);
  background: var(--white); color: var(--ink); box-shadow: var(--e-3); overflow: auto; overscroll-behavior: contain;
}
dialog.ov[open] { animation: ovAuf var(--d-3) ease-out; }
dialog.ov::backdrop { background: rgba(10, 24, 40, 0.72); }
@keyframes ovAuf { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
html.ov-offen { overflow: hidden; }
.ov__kopf { display: flex; align-items: flex-start; gap: var(--a-3); padding-right: calc(var(--ziel) + var(--a-1)); }
/* Leiste ohne Höhe am Anfang des Overlays: sie klebt oben, das ✕ hängt aus ihr heraus. */
.ov__zu-leiste {
  position: sticky; top: 0; z-index: 3; height: 0;
  display: flex; justify-content: flex-end;
  margin: calc(-1 * var(--ov-pad)) calc(-1 * var(--ov-pad)) 0 0;
}
.ov__zu-leiste .ov__zu { margin: var(--a-2) var(--a-2) 0 0; box-shadow: var(--e-1); }
.ov__kopf > div { flex: 1; min-width: 0; }
.ov__kopf h3 { color: var(--marke); }
.ov__kennung { font-size: var(--s-00); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.ov__zu {
  flex: none; width: var(--ziel); height: var(--ziel); display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--white); cursor: pointer;
}
.ov__zu svg { width: 1rem; height: 1rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ov__zu:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Die Person im Kopf des Overlays ist dieselbe, die auf der Auftragskarte zu sehen ist
   (User 2026-09-20): je Auftrag ein Ausschnitt auf das Gesicht des jeweiligen Fotos. */
.ov__person {
  flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--accent-soft) no-repeat; background-size: 480% auto;
}
.ov__person--legal { background-image: url("../assets/photos/uc-legal-320w.webp"); background-position: 30% 5%; }
.ov__person--finance { background-image: url("../assets/photos/uc-finance-320w.webp"); background-position: 47.5% 14%; }
.ov__person--sales { background-image: url("../assets/photos/uc-sales-320w.webp"); background-position: 47% 20%; }
.ov h4 { margin-top: var(--a-4); font-size: var(--s-03); line-height: 1.5; font-weight: 600; color: var(--marke); }
.ov__lead { margin-top: var(--a-3); }
.ov__cap { margin-top: var(--a-4); font-weight: 600; }
.ov__prompt { margin-top: var(--a-1); padding: var(--a-3); border-radius: var(--r-2); background: var(--accent); color: var(--white); }
.ov__tabelle { margin-top: var(--a-2); display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; }
.ov__tabelle > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--a-3); padding: var(--a-2) var(--a-3); background: var(--white); }
.ov__tabelle dt { font-weight: 600; }
.ov__tabelle dd { margin: 0; color: var(--grey); }
/* Auftrags-Overlay zweispaltig: das Foto des Anwendungsfalls links, der Ablauf rechts
   (User 2026-09-20). Die Symbole darunter sind dieselben wie auf den Anwendungsfall-Karten
   der Präsentation — das Sprite bringt die Vorführung oben auf der Seite mit. */
dialog.ov--auftrag { width: min(62rem, calc(100vw - 2 * var(--rand-seite))); }
.ov__zwei { margin-top: var(--a-4); display: grid; grid-template-columns: 19rem 1fr; gap: var(--a-5); align-items: start; }
.ov__bild { margin: 0; position: sticky; top: 0; }
.ov__bild img { display: block; width: 100%; height: auto; border-radius: var(--r-3); border: 1px solid var(--border); }
.ov__inhalt > :first-child { margin-top: 0; }
.ov__prozesse { margin-top: var(--a-3); list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-2); }
.ov__proz {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent);
}
.ov__proz svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ov__inhalt .ablauf { grid-template-columns: 1fr; gap: var(--a-5); }
.ov__inhalt .ablauf__schritt + .ablauf__schritt::before {
  content: "⌄"; left: 50%; top: calc(-1 * var(--a-4)); transform: translateX(-50%); width: auto; line-height: 1;
}
.ov__scroll { margin-top: var(--a-2); overflow-x: auto; }
.ov__vergleich { width: 100%; border-collapse: collapse; font-size: var(--s-01); }
.ov__vergleich caption { text-align: left; font-size: var(--s-03); font-weight: 700; color: var(--marke); padding-bottom: var(--a-2); }
.ov__vergleich th, .ov__vergleich td { padding: var(--a-1) var(--a-2); text-align: left; vertical-align: top; line-height: 1.5; }
.ov__vergleich thead th {
  font-size: var(--s-00); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grey); border-bottom: 2px solid var(--ink);
}
.ov__vergleich thead td { border-bottom: 2px solid var(--ink); }
.ov__vergleich tbody th { font-weight: 600; white-space: nowrap; }
.ov__vergleich tbody tr:nth-child(even) { background: var(--bg); }
.ov__vergleich td { color: var(--grey); }
.ov__note { margin-top: var(--a-3); font-size: var(--s-01); color: var(--grey); }

/* Ablauf als Blockdiagramm: Schritte nebeneinander mit Pfeil, auf dem Telefon untereinander */
.ablauf { margin-top: var(--a-2); list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-4); }
.ablauf__schritt {
  position: relative; padding: var(--a-3); border: 1px solid var(--accent-soft); border-radius: var(--r-2);
  background: var(--bg); line-height: 1.5; font-size: var(--s-01); color: var(--grey);
}
.ablauf__schritt strong { display: block; color: var(--marke); font-size: var(--s-02); }
.ablauf__nr {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-bottom: var(--a-1);
  border-radius: 50%; background: var(--accent); color: var(--white); font-weight: 700; font-size: var(--s-00);
}
.ablauf__schritt + .ablauf__schritt::before {
  content: "›"; position: absolute; left: calc(-1 * var(--a-4)); top: 50%; width: var(--a-4);
  transform: translateY(-50%); text-align: center; color: var(--accent); font-weight: 700; font-size: var(--s-04);
}

/* ---------- Gezeichnete Hintergründe je Abschnitt (wie der Einstieg, R-GEST-050) ----------
   Leise Linien im Markenblau als Hintergrundbild, rechts verankert; kein Text, keine Aussage. */
.motiv { background-repeat: no-repeat; background-position: right -6rem top var(--a-5); background-size: min(46rem, 55%) auto; }
.motiv--arbeitsplatz { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22 fill=%22none%22 stroke=%22%23026CDF%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg opacity=%22.16%22%3E%3Cg transform=%22rotate%280 493.0 70.0%29%22%3E%3Cpath d=%22M470 40h34l12 12v48h-46z%22/%3E%3Cpath d=%22M504 40v12h12%22/%3E%3Cpath d=%22M478 58h30%22/%3E%3Cpath d=%22M478 67h20%22/%3E%3Cpath d=%22M478 76h30%22/%3E%3Cpath d=%22M478 85h20%22/%3E%3C/g%3E%3Cg transform=%22rotate%280 523.0 100.0%29%22%3E%3Cpath d=%22M500 70h34l12 12v48h-46z%22/%3E%3Cpath d=%22M534 70v12h12%22/%3E%3Cpath d=%22M508 88h30%22/%3E%3Cpath d=%22M508 97h20%22/%3E%3Cpath d=%22M508 106h30%22/%3E%3Cpath d=%22M508 115h20%22/%3E%3C/g%3E%3C/g%3E%3Cg opacity=%22.15%22%3E%3Cpath d=%22M495 140C495 200 430 200 430 250%22/%3E%3Cpath d=%22M424 243l6 8 6-8%22/%3E%3C/g%3E%3Cg opacity=%22.18%22%3E%3Ccircle cx=%22430%22 cy=%22290%22 r=%2230%22/%3E%3Ccircle cx=%22430%22 cy=%22290%22 r=%2210%22 fill=%22%23026CDF%22 stroke=%22none%22 opacity=%22.6%22/%3E%3C/g%3E%3Cg opacity=%22.15%22%3E%3Cpath d=%22M430 330C430 380 520 380 520 430%22/%3E%3Cpath d=%22M514 423l6 8 6-8%22/%3E%3C/g%3E%3Cg opacity=%22.18%22%3E%3Cg transform=%22rotate%280 520.0 475.0%29%22%3E%3Cpath d=%22M497 445h34l12 12v48h-46z%22/%3E%3Cpath d=%22M531 445v12h12%22/%3E%3Cpath d=%22M505 463h30%22/%3E%3Cpath d=%22M505 472h20%22/%3E%3Cpath d=%22M505 481h30%22/%3E%3Cpath d=%22M505 490h20%22/%3E%3C/g%3E%3Cpath d=%22M507 480l8 8 16-16%22 stroke-width=%222.5%22/%3E%3C/g%3E%3Cg opacity=%22.1%22 stroke-dasharray=%222 6%22%3E%3Cpath d=%22M300 60h120M320 520h150M340 290h55%22/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- Tabelle (R-GEST-067/068) ---------- */
.tabelle {
  margin-top: var(--a-5); background: var(--white); border-radius: var(--r-3);
  box-shadow: var(--e-1); padding: var(--a-3) var(--a-4); overflow-x: auto;
}
.tabelle table { width: 100%; border-collapse: collapse; }
.tabelle caption { text-align: left; font-size: var(--s-02); font-weight: 700; padding-bottom: var(--a-2); }
.tabelle thead th {
  text-align: left; font-size: var(--s-00); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--grey); padding: var(--a-1) var(--a-2);
  border-bottom: 2px solid var(--ink);
}
.tabelle tbody th, .tabelle td {
  text-align: left; vertical-align: top; font-size: var(--s-01); line-height: 1.5;
  padding: var(--a-1) var(--a-2);
}
.tabelle tbody th { font-weight: 600; }
.tabelle tbody tr:nth-child(even) { background: var(--bg); }
.tabelle__quelle { margin-top: var(--a-2); font-size: var(--s-01); color: var(--grey); }

/* ---------- Schrittfolge (R-GEST-069) ---------- */
.schritte {
  margin-top: var(--a-5); list-style: none; counter-reset: schritt;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a-3);
}
.schritt {
  counter-increment: schritt; position: relative;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--a-6) var(--a-3) var(--a-3); box-shadow: var(--e-1);
}
.schritt::before {
  content: counter(schritt); position: absolute; top: var(--a-3); left: var(--a-3);
  display: flex; align-items: center; justify-content: center;
  width: var(--a-5); height: var(--a-5); border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.schritt h3 { font-size: var(--s-03); line-height: 1.5; font-weight: 600; }
.schritt p { margin-top: var(--a-0); font-size: var(--s-01); color: var(--grey); }

/* ---------- Wirkungsfall (Karte, R-GEST-064; Quelle und Datum im Baustein, R-GEST-090) ---------- */
.fall {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--a-4); box-shadow: var(--e-2);
}
.fall h3 { margin-top: var(--a-2); }
.fall h4 { margin-top: var(--a-3); }
.fall__wer { margin: var(--a-0) 0 var(--a-2); color: var(--grey); font-weight: 600; }
.fall__zeiten { margin-top: var(--a-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); }
.fall__zeiten div { background: var(--bg); border-radius: var(--r-2); padding: var(--a-3); }
.fall__zeiten div + div { background: var(--accent-soft); }
.fall__zeiten dt { font-size: var(--s-01); color: var(--grey); }
.fall__zeiten dd { font-size: var(--s-04); line-height: 1.35; font-weight: 700; color: var(--marke); }
.fall .grenze { margin-top: var(--a-3); font-size: var(--s-01); }

.hinweis { margin-top: var(--a-4); font-size: var(--s-01); }

/* ---------- Dunkler Abschnitt in der Rolle Marke (R-GEST-046) ----------
   Trug bis 2026-09-21 den Abschluss; seither die Referenzen, die davon leben, dass sie sich
   vom Rest der Seite abheben (User). */
.sect--dunkel { background: linear-gradient(160deg, var(--marke), var(--marke-tief)); color: var(--white); border-top: 0; }
.sect--dunkel h2, .sect--dunkel h3, .sect--dunkel h4 { color: var(--white); }
.sect--dunkel .eyebrow { color: rgba(255, 255, 255, 0.72); }
.sect--dunkel .lead, .sect--dunkel .liste li, .sect--dunkel .hinweis, .sect--dunkel .referenz__quelle { color: rgba(255, 255, 255, 0.78); }
.sect--dunkel .liste li::before { background: rgba(255, 255, 255, 0.55); }
.sect--dunkel .link { color: var(--white); }

/* ---------- Vorführung: das Ziel der Seite (dunkle Fläche in der Rolle Marke, R-GEST-046) ----------
   Seit 2026-09-21 ist die Vorführung der Handlungsaufruf der Seite, nicht mehr der Rechner. Die
   Fläche schließt den Preis-Abschnitt ab: erst die vier Punkte zur Rechnung, dann der Termin. */
/* Testphase als Weg zur Vorführung (User 2026-09-23): eigener Kasten im Preismodell,
   heller als der Vorführungs-Block darunter — er führt dorthin, statt mit ihm zu wetteifern. */
.probe {
  margin-top: var(--a-6); padding: var(--a-5); border-radius: var(--r-3);
  background: var(--accent-soft);
  display: grid; grid-template-columns: 1fr auto; gap: var(--a-4); align-items: center;
}
.probe h3 { margin-bottom: var(--a-1); }
.probe p { margin-bottom: 0; }
.probe .aktion { margin-top: 0; }
@media (max-width: 720px) {
  .probe { grid-template-columns: 1fr; }
}

.demo {
  margin-top: var(--a-7); padding: var(--a-6); border-radius: var(--r-3);
  background: linear-gradient(160deg, var(--marke), var(--marke-tief)); color: var(--white);
}
.demo h3 { color: var(--white); font-size: var(--s-05); }
.demo .eyebrow { color: rgba(255, 255, 255, 0.72); }
.demo .lead, .demo .liste li, .demo .hinweis { color: rgba(255, 255, 255, 0.78); }
.demo .liste--ok li::before { color: var(--white); }
.demo__form { margin-top: var(--a-5); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a-3) var(--a-4); }
.demo__feld { display: flex; flex-direction: column; gap: var(--a-1); }
.demo__feld--weit { grid-column: 1 / -1; }
.demo__l { font-size: var(--s-01); font-weight: 600; color: rgba(255, 255, 255, 0.86); }
/* 17 px, damit Telefone beim Hineintippen nicht zoomen (R-GEST-037). */
.demo__e {
  font: inherit; font-size: 1.0625rem; min-height: var(--ziel); padding: var(--a-2) var(--a-3);
  color: var(--ink); background: var(--white); border: 2px solid transparent; border-radius: var(--r-2);
}
textarea.demo__e { min-height: 5.5rem; resize: vertical; }
.demo__e:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.demo__fehler { grid-column: 1 / -1; margin: 0; font-size: var(--s-01); font-weight: 700; color: var(--white); }
.demo .aktion { grid-column: 1 / -1; margin-top: var(--a-2); }
.demo .btn--primary { background: var(--white); color: var(--marke); }
.demo .btn--primary:active { background: var(--accent-soft); }
.demo .btn--primary:focus-visible { outline-color: var(--white); }

/* Der Logo-Teppich steht seit 2026-09-21 als eigener Abschnitt — auf demselben dunklen
   Grund, auf dem er vorher stand. */
#referenz h4 { margin-top: var(--a-5); }
/* Logo-Teppich: fremde Marken auf weißen Kacheln in ihren eigenen Farben — sie bezeichnen
   Kunden, keine Partnerschaft (R-IMG-004). Statisch, kein Laufband (R-GEST-071). */
.logos { margin-top: var(--a-4); list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a-2); }
.logos li {
  display: flex; align-items: center; justify-content: center;
  min-height: 5.5rem; padding: var(--a-2) var(--a-3); background: var(--white); border-radius: var(--r-2);
}
.logos img { max-height: 3rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.referenz__quelle { margin-top: var(--a-3); font-size: var(--s-01); }

/* ---------- Diaschau der Bildschirmfotos (SITE-11 §13, R-GEST-071) ----------
   Ohne Skript stehen alle Bilder untereinander und es bewegt sich nichts; erst `dia--js`
   macht daraus eine Schau. Die Pfeile liegen im Bild, die Bildunterschrift steckt in der
   Figur und wechselt deshalb mit dem Bild. Die Unterschrift bekommt eine feste Mindesthöhe,
   damit die Pfeile bei jedem Bild auf derselben Höhe sitzen und das Bild beim Wechseln
   nicht springt. */
.dia { margin-top: var(--a-5); --dia-u: 3.5rem; }
.dia__rahmen { position: relative; }
.dia__bilder { display: grid; gap: var(--a-4); }
.dia--js .dia__bilder { display: block; }
.dia__bild { margin: 0; }
.dia__bild img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--border); border-radius: var(--r-3); box-shadow: var(--e-1);
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
/* Überfahren wie jede anklickbare Fläche (R-GEST-073): 2 px Markenblau, eine Tiefe mehr —
   über dem Bild und über dem Eckknopf, nicht über den Pfeilen (die öffnen nichts). */
@media (hover: hover) {
  .dia--gross .dia__bild img:hover,
  .dia--gross .dia__rahmen:has(.dia__ecke:hover) .dia__bild:not([hidden]) img { border-color: var(--accent); box-shadow: var(--e-2); }
}
.dia__bild figcaption {
  display: flex; align-items: flex-start; min-height: var(--dia-u);
  padding-top: var(--a-2); font-size: var(--s-01); color: var(--grey);
}
/* Pfeile: nur mit Skript, sonst führen sie ins Leere. Sie sitzen auf der Mitte des Bildes,
   nicht der Figur — deshalb die halbe Unterschriftshöhe abgezogen. */
.dia__pfeil { display: none; }
.dia--js .dia__pfeil {
  position: absolute; top: calc(50% - var(--dia-u) / 2); transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ziel); min-height: var(--ziel); padding: 0;
  background: rgba(255, 255, 255, 0.92); color: var(--marke);
  border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--e-2); cursor: pointer;
  font: inherit; font-size: var(--s-05); font-weight: 700; line-height: 1;
  transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.dia__pfeil--links { left: var(--a-2); }
.dia__pfeil--rechts { right: var(--a-2); }
.dia__pfeil:active { background: var(--accent); color: var(--white); }
.dia__pfeil:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .dia__pfeil:hover { background: var(--accent); color: var(--white); }
}
/* Anhalten und Standanzeige liegen in der unteren Ecke des Bildes. */
.dia__leiste { display: none; }
.dia--js .dia__leiste {
  position: absolute; right: var(--a-2); top: calc(100% - var(--dia-u) - var(--a-2));
  transform: translateY(-100%);
  margin: 0; display: flex; align-items: center; gap: var(--a-2);
  padding: 0 var(--a-2); border-radius: var(--r-pille);
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--e-1);
}
.dia__pause {
  min-height: var(--ziel); padding: 0 var(--a-2);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--s-01); font-weight: 700; color: var(--accent);
}
.dia__pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dia__stand { font-size: var(--s-01); font-weight: 700; color: var(--grey); font-variant-numeric: tabular-nums; }
.dia--gross .dia__bild img { cursor: pointer; }

/* Eckknopf mit Lupe: das eine Zeichen für „öffnet ein Overlay" (R-GEST-064, User 2026-09-21).
   Steht im Ruhezustand sichtbar oben rechts an jedem Auslöser — auf dem Telefon gibt es kein
   Überfahren, also muss das Zeichen ohne Maus da sein. Symbol Lupe, dazu das Wort, was sich
   öffnet. Dieselben Werte wie .ka__ecke (_shared/kundenakte) und .agdemo__hint (_shared/usecases).
   Überfahren des Auslösers füllt ihn. */
.ecke {
  position: absolute; top: var(--a-2); right: var(--a-2); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--a-1); min-height: var(--ziel); padding: 0 var(--a-3);
  border-radius: var(--r-pille); border: 2px solid var(--accent); background: var(--white); color: var(--accent);
  font: inherit; font-size: var(--s-01); font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color var(--d-1) ease, color var(--d-1) ease, border-color var(--d-1) ease;
}
.ecke__symbol { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ecke:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ecke:active, .auftrag:active .ecke { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
@media (hover: hover) {
  .ecke:hover, .auftrag:hover .ecke, .dia__rahmen:has(.dia__bild img:hover) .ecke {
    background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white);
  }
}
.dia__ecke { display: none; }
.dia--gross .dia__ecke { display: inline-flex; }
.auftrag { position: relative; }

/* Vergrößerung (js/diaschau.js): zentriert, so breit wie das Bild es trägt — höchstens die
   ausgelieferten 1400 px, sonst würde es unscharf aufgezogen. Eingepasst in Breite und Höhe
   des Bildschirms; auf dem Telefon zeigt ein Tippen die volle Breite zum Verschieben
   (ov--voll), dann scrollt nur die Bildfläche, nicht das Overlay. */
dialog.ov--bild {
  --ov-pad: var(--a-3);
  width: auto; max-width: min(calc(1400px + 2 * var(--a-3)), calc(100vw - 2 * var(--a-3)));
  overflow: hidden;
  flex-direction: column; gap: var(--a-2);
}
dialog.ov--bild[open] { display: flex; }
.ov--bild .ov__kopf { align-items: center; min-height: var(--ziel); }
.ov__bildtext { flex: 1; min-width: 0; font-size: var(--s-01); color: var(--grey); }
.ov__flaeche { min-height: 0; display: flex; justify-content: center; }
.ov__flaeche img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem);
  border: 1px solid var(--border); border-radius: var(--r-2);
}
.ov--zoombar .ov__flaeche img { cursor: pointer; }
.ov__hinweis { font-size: var(--s-00); color: var(--grey); text-align: center; }
dialog.ov--voll { width: calc(100vw - 2 * var(--a-3)); height: calc(100vh - 2rem); height: calc(100dvh - 2rem); }
.ov--voll .ov__flaeche { flex: 1; display: block; overflow: auto; overscroll-behavior: contain; }
.ov--voll .ov__flaeche img { max-width: none; max-height: none; width: 1400px; cursor: pointer; }
.ov--voll .ov__hinweis { display: none; }


/* ---------- Fuß ---------- */
.foot { background: var(--white); border-top: 1px solid var(--border); padding: var(--a-5) 0; }
.foot__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--a-2) var(--a-4); flex-wrap: wrap; color: var(--grey); font-size: var(--s-01); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--a-1); }
.foot__nav a,
.foot__nav [data-consent-oeffnen] {   /* Fußlink der Einwilligungs-Leiste (MASTER-29, S13) wie die Verweise */
  display: inline-flex; align-items: center; min-height: var(--ziel); padding: 0 var(--a-1);
  color: var(--grey); text-decoration: none; font-weight: 600;
}
.foot__bilder { flex-basis: 100%; }
/* ---------- Logo-Band unter dem Einstieg (SITE-5 §14.9, R-GEST-070/071) ----------
   Ein Verweis über die ganze Fläche nach #referenz; daneben der Knopf zum Anhalten.
   Die Spur trägt die Logos zweimal und wandert um genau eine Hälfte. */
.band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--white); }
.band__innen { display: flex; align-items: center; gap: var(--a-3); padding-top: var(--a-2); padding-bottom: var(--a-2); }
.band__link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--a-4);
  min-height: var(--ziel); color: var(--grey); text-decoration: none; border-radius: var(--r-2);
}
.band__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.band__titel { flex: none; font-size: var(--s-00); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.band__fenster {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.band__spur { display: flex; width: max-content; animation: bandLauf var(--d-band) linear infinite; }
.band__liste { display: flex; align-items: center; gap: var(--a-6); padding-right: var(--a-6); list-style: none; }
.band__liste img {
  display: block; height: 2rem; width: auto; max-width: 9rem; object-fit: contain;
  filter: grayscale(1); opacity: 0.7; transition: filter var(--d-1) ease, opacity var(--d-1) ease;
}
.band.ist-angehalten .band__spur,
.band__link:hover .band__spur,
.band__link:focus-visible .band__spur { animation-play-state: paused; }
@media (hover: hover) { .band__link:hover .band__liste img { filter: none; opacity: 1; } }
.band__pause {
  flex: none; min-width: var(--ziel); min-height: var(--ziel); padding: 0 var(--a-3);
  border: 1px solid var(--border); border-radius: var(--r-pille); background: var(--white);
  font: inherit; font-size: var(--s-01); color: var(--ink); cursor: pointer;
}
.band__pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .band__pause:hover { border-color: var(--accent); color: var(--accent); } }
.band__pause:active { background: var(--accent-soft); }
@keyframes bandLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (hover: hover) { .foot__nav a:hover, .foot__nav [data-consent-oeffnen]:hover { color: var(--accent); } }

/* Schaubild „Kundenakte" im Abschnitt #graph (Plan SITE-9) — Komponente: kundenakte/kundenakte.css */
.ka-traeger { display: flex; flex-direction: column; gap: var(--a-3); margin-top: var(--a-5); }

/* ---------- Umbruchpunkte (R-GEST-030) ---------- */
@media (max-width: 72rem) {
  .cards, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: repeat(2, 1fr); }
}

/* b-m: Menüschalter, eine Spalte für Abschnitte (R-GEST-033/039) */
@media (max-width: 56rem) {
  .ov__zwei { grid-template-columns: 1fr; }
  .ov__bild { position: static; max-width: 18rem; }

  .hero__grid, .sect__split { grid-template-columns: 1fr; }
  .sect { padding: var(--a-7) 0; }
  .hero { padding: var(--a-6) 0 var(--a-7); }
}

/* b-s: Telefon */
@media (max-width: 40rem) {
  .auftraege__liste, .ablauf { grid-template-columns: 1fr; }
  .ablauf__schritt + .ablauf__schritt::before { content: "⌄"; left: 50%; top: calc(-1 * var(--a-4)); transform: translateX(-50%); width: auto; line-height: 1; }
  .auftraege { padding: var(--a-3); }
  .ausschnitt__fenster { max-height: 22rem; }
  .ov__tabelle > div { grid-template-columns: 1fr; gap: 0; }
  dialog.ov { --ov-pad: var(--a-4); width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  dialog.ov--bild { --ov-pad: var(--a-2); }
  .band__titel { display: none; }
  .band__liste { gap: var(--a-5); padding-right: var(--a-5); }
  .band__liste img { height: 1.5rem; }
  .cards, .cards--2, .cards--3, .cards--4, .schritte, .fall__zeiten { grid-template-columns: 1fr; }
  .demo { padding: var(--a-4); }
  .demo__form { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  /* Das tragende Wort der Kernaussage in Markenblau, wie auf der Startfolie der
   Präsentation (User 2026-09-20). */
.hero h1 .hl { color: var(--accent); }
.hero__logo { width: min(16rem, 70vw); }
  .card--bean { grid-template-columns: 3.5rem 1fr; }
  .card--bean .card__bean { width: 3.5rem; height: 3.5rem; }
  .sect { padding: var(--a-6) 0; }
  .aktion .btn { width: 100%; }
  .tabelle { padding: var(--a-2); }
  .tabelle table { min-width: 34rem; }
}


/* Bewegung abschaltbar (R-GEST-071). */
@media (prefers-reduced-motion: reduce) {
  .btn, .link, .band__liste img, .dia__pfeil { transition: none; }
  /* Band steht still: nur die erste Hälfte, seitlich verschiebbar; der Knopf entfällt. */
  .band__spur { animation: none; }
  dialog.ov[open] { animation: none; }
  .auftrag { transition: none; }
  .band__fenster { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .band__liste[aria-hidden="true"], .band__pause { display: none; }
}

/* ---------- EU-AI-Act: Lead links, Bild rechts oben (User 2026-09-21) ----------
   Ab 56 rem zweispaltig, darunter untereinander — das Bild wandert unter den Lead. */
.sect__kopfbild { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--a-6); align-items: start; }
.fig--aiact { margin: 0; }
.fig--aiact img { width: 100%; height: auto; border-radius: var(--r-3); display: block; }
@media (max-width: 56rem) {
  .sect__kopfbild { grid-template-columns: 1fr; gap: var(--a-4); }
  .fig--aiact { max-width: 28rem; margin-inline: auto; }
}