/* Gestaltung der Satellitenseite. Drei Stile ueber Design-Tokens, ein Regelwerk. */

/* ---------- Tokens ----------
 *
 * Zwei Ebenen. Die Primitive sagen, WELCHE Farben, Schriften und Formen ein
 * Erscheinungsbild mitbringt; die Semantik sagt, WOFUER sie stehen. Das
 * Regelwerk unten benutzt ausschliesslich die Semantik - deshalb kann eine
 * Stilvorlage die Primitive austauschen, ohne dass eine einzige Regel sich
 * aendert.
 *
 * Die sechs Stile (html[data-stil=...]), die Darstellung einer Installation
 * (Inline-CSS aus darstellung.php) und die Designsysteme der Bibliothek setzen
 * heute die Semantik direkt. Das bleibt gueltig und gewinnt gegen die
 * Ableitung hier - die Ebene darunter ist eine Ergaenzung, kein Bruch.
 *
 * Geplant fuer die Stilvorlagen (2.4.0), hier noch nicht gesetzt, damit nichts
 * unbenutzt herumsteht: Leitern fuer Neutraltoene (--ton-0 ... --ton-950),
 * Akzentfamilien (--akzent-50 ... --akzent-700), Textgroessen, Abstaende,
 * Radien und Schatten.
 */
:root {
    /* Ebene 1: Primitive */
    --ton-papier: #ffffff;
    --ton-flaeche: #f3f5f1;
    --ton-linie: #ccd3cf;
    --ton-ruhig: #5b6662;
    --ton-tinte: #18201e;
    --marke-500: #165d50;
    --marke-700: #0d4037;
    --marke-schrift: #ffffff;
    --akzent-300: #f2c95e;
    --akzent-500: #d7a527;
    --melde-fehler: #b53636;
    --melde-erfolg: #278351;
    --schrift-display: Georgia, "Times New Roman", serif;
    --schrift-grund: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    --radius-m: 4px;
    --schatten-l: 0 18px 50px rgb(24 32 30 / 10%);
    --breite-inhalt: 1180px;

    /* Ebene 2: Semantik - diese Namen benutzt das Regelwerk */
    --farbe-text: var(--ton-tinte);
    --farbe-ruhig: var(--ton-ruhig);
    --farbe-flaeche: var(--ton-flaeche);
    --farbe-papier: var(--ton-papier);
    --farbe-primaer: var(--marke-500);
    --farbe-primaer-dunkel: var(--marke-700);
    --farbe-akzent: var(--akzent-500);
    --farbe-akzent-hell: var(--akzent-300);
    --farbe-linie: var(--ton-linie);
    --farbe-fehler: var(--melde-fehler);
    --farbe-erfolg: var(--melde-erfolg);
    /* Schrift auf Marken- und Akzentflaechen: bisher feste Werte im Regelwerk */
    --farbe-auf-primaer: var(--marke-schrift);
    --farbe-auf-akzent: var(--farbe-text);
    /* Kennzeichnung auf der Primaerflaeche: der helle Akzent traegt dort
       nicht in jedem Stil, deshalb ein eigenes Token statt einer Ausnahme. */
    --farbe-kennzeichnung-auf-primaer: var(--farbe-akzent-hell);
    /* Der Akzent, so weit abgedunkelt, dass er auf Papier UND Flaeche 3:1
       erreicht - die Grenze fuer Grafik (WCAG 1.4.11). Der Akzent selbst
       schafft das in keinem Stil. Hier der Wert fuer "sachlich" (3,32 auf
       Papier, 3,02 auf Flaeche); jeder Stil und jede Vorlage setzt ihn
       eigens. Zwei Dinge haengen daran: */
    --farbe-akzent-dunkel: #b08720;
    /* die Sterne der Rezensionen (die Glyphen sind aria-hidden, den Wert
       traegt das aria-label - also Grafik, nicht Text) ... */
    --farbe-sterne: var(--farbe-akzent-dunkel);
    /* ... und der Fokusrahmen, der nach WCAG 1.4.11 ebenfalls 3:1 braucht. */
    --farbe-fokus: var(--farbe-akzent-dunkel);
    /* Auf dunklen Flaechen traegt der dunkle Akzent nicht mehr; dort gilt die
       Schrift der Markenflaeche, wie die Vorlagen es schon halten. */
    --farbe-fokus-auf-dunkel: var(--farbe-auf-primaer);
    --schrift-titel: Georgia, "Times New Roman", serif;
    --schrift-text: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    --radius: 4px;
    --schatten: 0 18px 50px rgb(24 32 30 / 10%);
    --rahmen: 1180px;
}

html[data-stil="modern"] {
    --farbe-kennzeichnung-auf-primaer: var(--farbe-auf-primaer);
    --farbe-text: #151a24;
    --farbe-ruhig: #606978;
    --farbe-flaeche: #eef2f3;
    --farbe-primaer: #006d77;
    --farbe-primaer-dunkel: #004f57;
    --farbe-akzent: #dc6b3f;
    --farbe-akzent-hell: #f4a482;
    --farbe-akzent-dunkel: #dc693d;
    --radius: 8px;
    --schrift-titel: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

html[data-stil="frisch"] {
    --farbe-kennzeichnung-auf-primaer: var(--farbe-auf-primaer);
    --farbe-text: #14212b;
    --farbe-ruhig: #546470;
    --farbe-flaeche: #eef6f4;
    --farbe-primaer: #0b7a75;
    --farbe-primaer-dunkel: #075552;
    --farbe-akzent: #ff8a5b;
    --farbe-akzent-hell: #ffb493;
    --farbe-akzent-dunkel: #ff4d06;
    --farbe-linie: #cfdedb;
    --radius: 14px;
    --schrift-titel: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

html[data-stil="elegant"] {
    --farbe-text: #1c1a1a;
    --farbe-ruhig: #6a6260;
    --farbe-flaeche: #f5f1ec;
    --farbe-primaer: #5a3a2e;
    --farbe-primaer-dunkel: #3a241c;
    --farbe-akzent: #b9975b;
    --farbe-akzent-hell: #e2c98f;
    --farbe-akzent-dunkel: #a88648;
    --farbe-linie: #d9d0c7;
    --radius: 0px;
    --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

html[data-stil="technisch"] {
    --farbe-text: #12151b;
    --farbe-ruhig: #5b6270;
    --farbe-flaeche: #eef0f4;
    --farbe-primaer: #1f3a5f;
    --farbe-primaer-dunkel: #14273f;
    --farbe-akzent: #e08a2e;
    --farbe-akzent-hell: #f4b86a;
    --farbe-akzent-dunkel: #c9761e;
    --farbe-linie: #cfd5de;
    --radius: 2px;
    --schrift-titel: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-stil="handwerklich"] {
    --farbe-kennzeichnung-auf-primaer: var(--farbe-auf-primaer);
    --farbe-text: #201e19;
    --farbe-ruhig: #665f53;
    --farbe-flaeche: #f1efe8;
    --farbe-primaer: #315c44;
    --farbe-primaer-dunkel: #213f30;
    --farbe-akzent: #c9812a;
    --farbe-akzent-hell: #e6b06a;
    --farbe-akzent-dunkel: #be7a28;
    --farbe-linie: #cec7b8;
    --radius: 2px;
    --schrift-titel: Rockwell, "Roboto Slab", Georgia, serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--farbe-text); background: var(--farbe-papier); font-family: var(--schrift-text); font-size: 1rem; line-height: 1.65; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; background-image: linear-gradient(rgb(24 32 30 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(24 32 30 / 3%) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
a { color: var(--farbe-primaer-dunkel); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; }
/* Auf dunklen Flaechen wird das Token umgesetzt statt der Umriss selbst -
   dann ziehen auch die Karten mit, die ihren Umriss selbst zeichnen
   (Projektverweis, Produktkarte, Beitragskarte, Kategorienkarte). Mit
   :where() bleibt die Spezifitaet null, damit eine Vorlage weiter gewinnt. */
:where(.abschnitt--dunkel, .abschnitt--bild, .einstieg--dunkel, .einstieg--bild,
    .kontaktband:not(.kontaktband--hell), .newsletterband--dunkel, .newsletterband--primaer,
    .laufschrift, .abschlusskasten, .mobil-cta, .seitenfuss) { --farbe-fokus: var(--farbe-fokus-auf-dunkel); }
h1, h2, h3 { margin: 0 0 .65em; font-family: var(--schrift-titel); line-height: 1.12; letter-spacing: 0; }
h1 { max-width: 18ch; font-size: clamp(2.5rem, 6vw, 5.2rem); }
h2 { max-width: 24ch; font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.25rem; }
.rahmen { width: min(calc(100% - 2rem), var(--rahmen)); margin-inline: auto; }
.lesebreite { max-width: 780px; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprunglink { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem 1rem; background: var(--farbe-papier); transform: translateY(-150%); }
.sprunglink:focus { transform: none; }
small { color: var(--farbe-ruhig); }
address { font-style: normal; }

/* ---------- Kopf und Navigation ---------- */
.seitenkopf { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--farbe-linie); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
/* Ueber einem Startbild steht der Kopf IM Bild statt als Balken davor. Nur
   dort: Seiten ohne Startbild behalten ihre Kopfzeile. Die Auswahl ist
   zweiteilig (body:has ... .seitenkopf), damit sie auch die Farbregel aus der
   Darstellung schlaegt, die sonst als spaeterer Eintrag gewinnt. */
body:has(.einstieg--bild) { position: relative; }
body:has(.einstieg--bild) .seitenkopf { position: absolute; right: 0; left: 0; border-bottom: 0; background: transparent; backdrop-filter: none; }
/* Der Kopf liegt jetzt IM Startbereich, nimmt also keinen Platz mehr weg -
   ohne zusaetzliches Polster stuende die Ueberschrift hinter der Navigation.
   74px ist die Mindesthoehe der Kopfzeile. */
body:has(.einstieg--bild) .einstieg--bild { padding-top: calc(74px + clamp(2rem, 4vw, 4rem)); }
body:has(.einstieg--bild) .seitenkopf .wortmarke,
body:has(.einstieg--bild) .seitenkopf .hauptnavigation,
body:has(.einstieg--bild) .seitenkopf .hauptnavigation > a:not(.knopf),
body:has(.einstieg--bild) .seitenkopf .menueknopf { color: #fff; }
body:has(.einstieg--bild) .seitenkopf .menueknopf { border-color: rgb(255 255 255 / 45%); background: transparent; }
.kopfzeile { position: relative; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wortmarke { display: inline-flex; align-items: center; gap: .65rem; color: var(--farbe-text); font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.wortmarke img { width: 32px; height: 32px; flex: 0 0 32px; }
/* Liegt ein echtes Logo vor, traegt es die Wortmarke selbst - dann kein
   Quadrat erzwingen und keinen Namen danebensetzen. */
.wortmarke--logo img { width: auto; height: 40px; max-width: 220px; flex: 0 0 auto; }
.hauptnavigation { display: flex; align-items: center; gap: 1.25rem; color: var(--farbe-text); }
/* Megamenue: ein Menuepunkt, der seine Unterseiten als Spalten zeigt.
   Ohne Skript bleibt der Schalter verborgen und der Menuepunkt ein
   gewoehnlicher Verweis auf die Uebersichtsseite - erreichbar bleibt alles. */
.navi-gruppe { display: inline-flex; align-items: center; gap: .3rem; }
/* Farbe erben statt setzen: sonst faerbt eine Regel fuer die Kopfzeile nur
   die direkten Verweise und laesst die Untermenues dunkel stehen. */
.navi-gruppe > a { color: inherit; text-decoration: none; }
.navi-schalter { display: none; width: 26px; height: 26px; align-items: center; justify-content: center; border: 0; padding: 0; color: inherit; background: transparent; font-size: .7rem; line-height: 1; cursor: pointer; }
.navi-schalter[hidden] { display: none; }
.navi-schalter:not([hidden]) { display: inline-flex; }
.navi-schalter span { pointer-events: none; transition: transform .15s ease; }
.navi-schalter[aria-expanded="true"] span { transform: rotate(180deg); }
.megamenue { position: absolute; z-index: 30; top: calc(100% + .35rem); right: 0; left: 0; display: none; width: auto; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.35rem 1.5rem; background: var(--farbe-papier); box-shadow: 0 18px 44px rgb(0 0 0 / 12%); }
.megamenue[data-offen="true"] { display: block; }
.megamenue-marke { margin: 0 0 .7rem; color: var(--farbe-ruhig); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.megamenue-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.megamenue-liste a { display: block; border-radius: var(--radius); padding: .4rem .6rem; color: var(--farbe-text); font-size: .93rem; line-height: 1.35; text-decoration: none; overflow-wrap: break-word; }
.megamenue-liste a:hover, .megamenue-liste a:focus-visible { background: var(--farbe-flaeche); color: var(--farbe-primaer); }
.megamenue-alle { display: inline-block; margin-top: .85rem; color: var(--farbe-primaer); font-size: .9rem; font-weight: 700; }
/* Video-Platzhalter, zwei Klicks. Vor dem Klick wird von YouTube nichts
   geladen - kein Vorschaubild, kein Skript, kein Cookie; das waere sonst eine
   Einwilligung, die niemand gegeben hat. Ohne JavaScript bleibt der Verweis
   stehen und fuehrt zum Video. */
.fliesstext a.video { position: relative; display: grid; width: min(1024px, calc(100vw - 2rem)); margin: 1.75rem 0 1.75rem 50%; transform: translateX(-50%); aspect-ratio: 16 / 9; place-content: center; justify-items: center; gap: .9rem; border-radius: var(--radius); padding: 1.25rem; color: #fff; background: var(--farbe-primaer-dunkel); font-weight: 700; text-align: center; text-decoration: none; }
.fliesstext a.video::before { content: "\25B6"; display: grid; width: 74px; height: 74px; place-content: center; border-radius: 50%; background: var(--farbe-akzent); color: var(--farbe-text); font-size: 1.7rem; padding-left: .2rem; }
.fliesstext a.video:hover::before, .fliesstext a.video:focus-visible::before { background: #fff; }
.video-rahmen { width: min(1024px, calc(100vw - 2rem)); margin: 1.75rem 0 1.75rem 50%; transform: translateX(-50%); aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-rahmen iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Startbereich mit Hintergrundbild. "section" davor, weil .einstieg--dunkel
   spaeter in der Datei "background" als Kurzform setzt - die wirft
   background-size auf auto zurueck und das Bild stuende in Originalgroesse.
   Der Schleier liegt zwischen Bild und Text, sonst haengt die Lesbarkeit
   davon ab, was zufaellig hinter der Zeile liegt. */
section.einstieg--bild { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; }
.einstieg--bild > * { position: relative; z-index: 1; }
.einstieg--schleier::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 50%); }
.einstieg--bild h1, .einstieg--bild .kicker, .einstieg--bild .vorspann { color: #fff; }
.hauptnavigation > a:not(.knopf) { color: var(--farbe-text); text-decoration: none; }
.hauptnavigation a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--farbe-akzent); text-decoration-thickness: 3px; }
.menueknopf { display: none; border: 1px solid var(--farbe-linie); padding: .55rem .75rem; color: var(--farbe-text); background: var(--farbe-papier); }

/* ---------- Schaltflaechen und Textelemente ---------- */
.knopf { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); padding: .75rem 1.25rem; color: var(--farbe-auf-primaer); background: var(--farbe-primaer); font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf:hover { color: var(--farbe-auf-primaer); background: var(--farbe-primaer-dunkel); }
.knopf-klein { min-height: 40px; padding: .5rem 1rem; }
.knopf-breit { width: 100%; }
.knopf-sekundaer { border: 1px solid var(--farbe-primaer); color: var(--farbe-primaer); background: transparent; }
.knopf-sekundaer:hover { color: var(--farbe-auf-primaer); }
.textlink { font-weight: 700; }
.aktionsgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.aktionsgruppe--mittig { justify-content: center; }
.aktionsgruppe--unten { margin-top: 2.5rem; }
.kicker { margin-bottom: .8rem; color: var(--farbe-primaer); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vorspann { max-width: 62ch; color: var(--farbe-ruhig); font-size: 1.25rem; }
.mikrotext, .fussnote, .quelle { color: var(--farbe-ruhig); font-size: .9rem; }
.fussnote, .quelle { margin-top: 1.5rem; }
.pillen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pillen li { border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; }
.punkte { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.punkte li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.punkte li::before { position: absolute; left: 0; content: "\2713"; color: var(--farbe-primaer); font-weight: 800; }
.faehnchen { display: inline-block; border-radius: 999px; padding: .2rem .7rem; color: var(--farbe-auf-akzent); background: var(--farbe-akzent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.abschnittskopf { max-width: 760px; margin-bottom: 2.5rem; }
.abschnittskopf--mit-knopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.abschnittskopf-text { max-width: 760px; }
.abschnittskopf-text .vorspann, .abschnittskopf .vorspann { margin-bottom: 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4rem, 9vw, 7rem) 0; }
/* Fliesstext-Abschnitte stehen enger. Das grosse Polster ist fuer einzelne
   Werbebaender gedacht; auf einer Textseite mit zehn Abschnitten ergeben
   112 px oben und unten je Abschnitt rund 224 px Luft zwischen zwei
   Absaetzen - der Text zerfaellt dabei in Inseln. */
.abschnitt:has(> .fliesstext) { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
/* Enger nur zwischen gewoehnlichen Textabschnitten - auf beiden Seiten. Ein
   Bildband behaelt sein Polster (sonst klebt die Ueberschrift an der
   Bildkante), und der Abschnitt NACH einem Band bekommt seinen Abstand
   ebenfalls zurueck. */
.abschnitt:has(> .fliesstext):not(.abschnitt--bild) + .abschnitt:has(> .fliesstext):not(.abschnitt--bild) { padding-top: 0; }
/* Bildband: ein Textabschnitt mit Hintergrundbild. "section" und zweimal
   Klasse, damit die enge Polsterung der Textabschnitte hier nicht greift -
   ein Band braucht Luft, sonst klebt der Text am Rand. */
section.abschnitt.abschnitt--bild { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; }
.abschnitt--bild > * { position: relative; z-index: 1; }
.abschnitt--schleier::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 50%); }
.abschnitt--bild h2, .abschnitt--bild h3, .abschnitt--bild p, .abschnitt--bild li { color: #fff; }
.abschnitt--bild .kicker { color: var(--farbe-akzent-hell); }
.abschnitt--bild a { color: #fff; }
.abschnitt--flaeche { background: var(--farbe-flaeche); }
.abschnitt--dunkel { color: var(--farbe-auf-primaer); background: var(--farbe-primaer-dunkel); }
.abschnitt--dunkel .kicker { color: var(--farbe-akzent-hell); }
.abschnitt--dunkel .vorspann, .abschnitt--dunkel small, .abschnitt--dunkel .fussnote { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel a { color: var(--farbe-auf-primaer); }
.abschnitt--dunkel .knopf { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.abschnitt--dunkel .knopf-sekundaer { border-color: var(--farbe-auf-primaer); color: var(--farbe-auf-primaer); background: transparent; }
.seitentitel { padding-bottom: 0; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); }

/* ---------- Einstieg ---------- */
/* Eine Spalte, die nie breiter wird als der Bereich. Ohne Angabe waere es eine
   auto-Spalte, und die waechst mit dem breitesten Inhalt: die Kennzahlenleiste
   braucht 712 px, der Rahmen wurde auf dem Handy 680 statt 343 px breit, und
   overflow: hidden schnitt alles rechts davon ab. */
.einstieg { min-height: min(680px, calc(100vh - 74px)); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 5rem 0 6rem; overflow: hidden; background: linear-gradient(120deg, var(--farbe-flaeche) 0 68%, transparent 68%); }
.einstieg--dunkel { color: var(--farbe-auf-primaer); background: linear-gradient(120deg, var(--farbe-primaer-dunkel) 0 68%, var(--farbe-primaer) 68%); }
.einstieg--dunkel .kicker { color: var(--farbe-akzent-hell); }
.einstieg--dunkel .vorspann { color: rgb(255 255 255 / 82%); }
.einstieg--dunkel .textlink, .einstieg--dunkel .pillen li { color: var(--farbe-auf-primaer); border-color: rgb(255 255 255 / 35%); }
.einstieg--dunkel .knopf { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.einstieg-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.einstieg-text { position: relative; }
.einstieg-text::after { position: absolute; width: 86px; height: 7px; margin-top: 2.6rem; content: ""; background: var(--farbe-akzent); }
.einstieg-text--mittig { max-width: 820px; margin-inline: auto; text-align: center; }
.einstieg-text--mittig h1, .einstieg-text--mittig .vorspann { max-width: none; margin-inline: auto; }
.einstieg-text--mittig::after { left: 50%; transform: translateX(-50%); }
.einstieg-text--mittig .pillen { justify-content: center; }
.einstieg--mittig:not(.einstieg--dunkel) { background: var(--farbe-flaeche); }
/* Dunkler Startbereich mit Foto: Das Foto deckt die Flaeche (cover), die
   Farbe darunter sieht man nur, solange es laedt - dann aber weisse
   Schrift auf hellem Grund. Deshalb dunkel. */
.einstieg--bild.einstieg--dunkel { background-color: var(--farbe-primaer-dunkel); }
.einstieg-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.einstieg-bildbreit { margin-top: 4rem; }
.einstieg-bildbreit img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.regionshinweis { border-top: 5px solid var(--farbe-akzent); border-radius: var(--radius); padding: 1.6rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: var(--schatten); }
.regionshinweis span { display: block; color: var(--farbe-ruhig); font-size: .82rem; text-transform: uppercase; }
.regionshinweis strong { display: block; margin: .4rem 0 .8rem; font-family: var(--schrift-titel); font-size: 1.45rem; line-height: 1.25; }
.regionshinweis p { margin: 0; color: var(--farbe-ruhig); font-size: .92rem; }

/* ---------- Logoleiste ---------- */
.logoleiste { border-bottom: 1px solid var(--farbe-linie); padding: 1.5rem 0; }
.logoleiste-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
/* Schrumpfen darf der Titel nur, wenn er allein nicht in die Zeile passt -
   neben dem Band ist immer Platz, sonst rueckt das Band in die naechste
   Zeile. Mit 0 0 auto stand "Unternehmen aus der Region, die uns vertrauen"
   bei 320 px in einer Zeile von 325 px ueber den Rand. */
.logoleiste-titel { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; flex: 0 1 auto; }
.logoleiste-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.logoleiste-liste img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; }
.logoleiste-wort { font-family: var(--schrift-titel); font-weight: 700; color: var(--farbe-ruhig); }

/* Das fliessende Band.
   Die Spur traegt zwei gleiche Listen; die Verschiebung um -50 % entspricht
   deshalb genau einer Listenbreite. Genau darum ist der Ruecksprung
   unsichtbar - und genau darum darf die Spur nicht umbrechen. */
.logoleiste-band { flex: 1 1 320px; min-width: 0; }
.logoleiste--laufend .logoleiste-band { overflow: hidden; }
/* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
   auftauchen, sondern hereinkommen. */
.logoleiste--laufend .logoleiste-band {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logoleiste--laufend .logoleiste-spur {
    display: flex;
    width: max-content;
    animation: logoband var(--logoband-dauer, 32s) linear infinite;
}
.logoleiste--laufend .logoleiste-liste { flex-wrap: nowrap; padding-right: 2.5rem; }
/* Angehalten heisst angehalten - nicht zurueckgesetzt. */
.logoleiste--laufend .logoleiste-spur[data-angehalten] { animation-play-state: paused; }
/* Beim Ueberfahren stehenbleiben: wer ein Logo ansehen will, soll es koennen. */
.logoleiste--laufend .logoleiste-band:hover .logoleiste-spur { animation-play-state: paused; }

@keyframes logoband {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.logoleiste-pause {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--farbe-linie);
    border-radius: 999px;
    padding: .3rem .8rem;
    color: var(--farbe-ruhig);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.logoleiste-pause:hover { color: var(--farbe-text); border-color: var(--farbe-ruhig); }

/* ---------- Leistungen ---------- */
.leistungsraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--farbe-linie); }
.leistung { min-height: 240px; display: flex; flex-direction: column; padding: 2rem; background: var(--farbe-papier); }
.leistung > span { color: var(--farbe-primaer); font-weight: 800; }
.leistung h3 { margin-top: 2.5rem; }
.leistung p { color: var(--farbe-ruhig); flex: 1; }
.leistungstabelle-rahmen { overflow-x: auto; }
.leistungstabelle { width: 100%; min-width: 760px; border-collapse: collapse; }
.leistungstabelle th, .leistungstabelle td { border-bottom: 1px solid var(--farbe-linie); padding: 1rem; text-align: left; vertical-align: top; }
.leistungstabelle thead th { vertical-align: bottom; }
.leistungstabelle tbody th { font-weight: 600; }
.leistungstabelle td { text-align: center; }
.leistungstabelle-ecke span { display: block; font-family: var(--schrift-titel); font-size: 1.15rem; }
.leistungstabelle-paket { text-align: center; }
.leistungstabelle-paket .paket-titel { display: block; margin-top: .5rem; font-family: var(--schrift-titel); font-size: 1.3rem; }
.paket-preis { display: block; font-weight: 800; color: var(--farbe-primaer); }
.leistungstabelle-paket--empfohlen, .leistungstabelle-zelle--empfohlen { background: var(--farbe-flaeche); }
.tabelle-ja { color: var(--farbe-erfolg); font-weight: 800; }
.tabelle-nein { color: var(--farbe-ruhig); }
.leistungspakete { display: none; gap: 1.5rem; }
.leistungspaket { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-papier); }
.leistungspaket--empfohlen { border-color: var(--farbe-akzent); box-shadow: var(--schatten); }
.paket-merkmale { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.paket-merkmale li { padding: .35rem 0; border-bottom: 1px solid var(--farbe-linie); }
.paket-merkmal--fehlt { color: var(--farbe-ruhig); }

/* ---------- Argumente, Text-Bild, Karten ---------- */
.argumente-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.argumente-raster--ohne-bild { grid-template-columns: 1fr; }
.argumente-bild img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); }
.argumente-liste { margin: 0; padding: 0; list-style: none; counter-reset: argument; display: grid; gap: 1.5rem; }
.argumente-liste li { position: relative; padding-left: 3.2rem; counter-increment: argument; }
.argumente-liste li::before { position: absolute; left: 0; top: .1rem; content: "0" counter(argument); color: var(--farbe-akzent-hell); font-weight: 800; }
.argumente-liste h3 { margin-bottom: .3rem; }
.argumente-liste p { margin: 0; color: rgb(255 255 255 / 80%); }
.textbild-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: 2.5rem 0; }
.textbild-zeile + .textbild-zeile { border-top: 1px solid var(--farbe-linie); }
.textbild-zeile--gedreht .textbild-bild { order: -1; }
.textbild-zeile--ohne-bild { grid-template-columns: minmax(0, 780px); }
.textbild-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.kartenraster { display: grid; gap: 1.5rem; }
.kartenraster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartenraster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartenraster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karte { border-radius: var(--radius); padding: 1.75rem; }
.karte--rahmen { border: 1px solid var(--farbe-linie); background: var(--farbe-papier); }
.karte--flaeche { background: var(--farbe-flaeche); }
.abschnitt--flaeche .karte--flaeche { background: var(--farbe-papier); }
.karte p { color: var(--farbe-ruhig); }

/* ---------- Ablauf, Kennzahlen, Akzentliste ---------- */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ablaufliste { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablaufliste li { position: relative; border-bottom: 1px solid var(--farbe-linie); padding: 1.25rem 0 1.25rem 3.4rem; counter-increment: schritt; }
.ablaufliste li::before { position: absolute; left: 0; top: 1.3rem; content: "0" counter(schritt); color: var(--farbe-akzent); font-weight: 800; }
.ablaufliste h3 { margin-bottom: .3rem; }
.ablaufliste p { margin-bottom: .5rem; }
.ablaufkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablaufkarte { border-top: 4px solid var(--farbe-akzent); border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-papier); counter-increment: schritt; box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
.ablaufkarte::before { display: block; margin-bottom: 1rem; content: "0" counter(schritt); color: var(--farbe-akzent); font-weight: 800; }
.ablauf-ergebnis { color: var(--farbe-ruhig); font-size: .92rem; margin: 0; }
.abschlusskasten { border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-primaer-dunkel); color: var(--farbe-auf-primaer); }
.abschlusskasten .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.kennzahlen-titel { margin-bottom: 2rem; }
.kennzahlenleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin: 0; }
.kennzahlenleiste--einstieg { margin-top: 3.5rem; max-width: 820px; }
.kennzahl { border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }
.kennzahl dt { color: var(--farbe-ruhig); font-size: .9rem; }
.kennzahl dd { margin: 0; font-family: var(--schrift-titel); font-size: 2.2rem; line-height: 1.1; }
.akzent-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.akzent-raster--einspaltig { grid-template-columns: minmax(0, 780px); }
.akzentliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
.akzentliste li { border-left: 4px solid var(--farbe-akzent); padding-left: 1.25rem; }
.akzentliste h3 { margin-bottom: .3rem; }
.akzentliste p { margin: 0; color: var(--farbe-ruhig); }
.merkmalkasten { border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche .merkmalkasten { background: var(--farbe-papier); }
.merkmalkasten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.merkmalkasten span { display: block; color: var(--farbe-ruhig); font-size: .92rem; }

/* ---------- FAQ, Galerie, Zitat, Rezensionen, Team ---------- */
.faq-telefon { margin-top: -1.5rem; margin-bottom: 2rem; }
.faq { border-top: 1px solid var(--farbe-linie); }
.faq-eintrag { border-bottom: 1px solid var(--farbe-linie); }
.faq-eintrag summary { padding: 1.1rem 2.5rem 1.1rem 0; position: relative; cursor: pointer; font-weight: 700; list-style: none; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { position: absolute; right: .25rem; top: 1.1rem; content: "+"; color: var(--farbe-primaer); font-size: 1.4rem; line-height: 1; }
.faq-eintrag[open] summary::after { content: "\2212"; }
.faq-antwort { padding: 0 0 1.25rem; color: var(--farbe-ruhig); }
.galerie { display: grid; gap: 1rem; }
.galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie figure { margin: 0; }
.galerie img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.galerie--4-3 img { aspect-ratio: 4 / 3; }
.galerie--1-1 img { aspect-ratio: 1; }
.galerie--16-9 img { aspect-ratio: 16 / 9; }
.galerie figcaption { padding-top: .5rem; color: var(--farbe-ruhig); font-size: .9rem; }
.zitat { margin: 0; border-left: 5px solid var(--farbe-akzent); padding: .5rem 0 .5rem 1.75rem; }
.zitat p { font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1.35; }
.zitat footer { color: var(--farbe-ruhig); }
.zitat cite { font-style: normal; font-weight: 700; }
.zitat footer span::before { content: " \00b7 "; }
.rezensionen-liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1.5rem; margin: 0; padding: 0 0 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.rezension { scroll-snap-align: start; border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-papier); border: 1px solid var(--farbe-linie); }
.rezension blockquote { margin: 0 0 1rem; }
.rezension blockquote p { margin: 0; }
.sterne { margin: 0 0 .75rem; color: var(--farbe-sterne); letter-spacing: .1em; }
.rezension-name { margin: 0; }
.rezension-name span { display: block; color: var(--farbe-ruhig); font-size: .9rem; }
.rezension-quelle { margin: .75rem 0 0; font-size: .85rem; }
.rezensionen-steuerung { display: flex; gap: .5rem; justify-content: flex-end; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.person-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.person h3 { margin-bottom: .2rem; }
.person-rolle { color: var(--farbe-primaer); font-weight: 700; }
.person .pillen { margin-top: .75rem; }

/* ---------- Standorte, Links, Verlauf, GEO, GMB ---------- */
.standorte { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.sitzkarte { position: relative; border-radius: var(--radius); padding: 2rem; background: var(--farbe-papier); box-shadow: var(--schatten); }
.sitzkarte .faehnchen { margin-bottom: 1rem; }
.sitz-hinweise { margin: 1rem 0; padding: 1rem; border-radius: var(--radius); background: var(--farbe-flaeche); list-style: none; }
.sitz-hinweise li { padding: .2rem 0; }
.ortsliste { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.ortsliste li { break-inside: avoid; display: flex; flex-direction: column; border-bottom: 1px solid var(--farbe-linie); padding: .7rem 0; }
.ortsliste a, .ortsliste span { font-weight: 700; }
.linkliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.linkliste li { border-bottom: 1px solid var(--farbe-linie); padding-bottom: 1.25rem; }
.linkliste a { font-weight: 700; }
.linkliste-art { margin-left: .75rem; color: var(--farbe-ruhig); font-size: .85rem; }
.linkliste p { margin: .35rem 0 0; color: var(--farbe-ruhig); }
.verlauf-eckwerte { margin-bottom: 2rem; }
.verlauf { margin: 0; }
.verlauf-bild { display: block; width: 100%; height: 280px; border-radius: var(--radius); background: var(--farbe-flaeche); }
.abschnitt--flaeche .verlauf-bild { background: var(--farbe-papier); }
.verlauf-raster { stroke: var(--farbe-linie); stroke-width: 1; }
.verlauf-flaeche { fill: var(--farbe-primaer); opacity: .12; }
.verlauf-linie { fill: none; stroke: var(--farbe-primaer); stroke-width: 3; }
.verlauf-zeitachse { display: flex; justify-content: space-between; padding-top: .5rem; color: var(--farbe-ruhig); font-size: .85rem; }
.verlauf-tabelle { margin-top: 1.5rem; }
.verlauf-tabelle summary { cursor: pointer; font-weight: 700; }
.verlauf-tabelle table { width: 100%; max-width: 420px; margin-top: 1rem; border-collapse: collapse; }
.verlauf-tabelle th, .verlauf-tabelle td { border-bottom: 1px solid var(--farbe-linie); padding: .4rem .6rem; text-align: left; }
.geo-balken { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.geo-zeile { display: grid; grid-template-columns: 2rem minmax(120px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 1rem; }
.geo-zeile--hervor .geo-name { font-weight: 800; color: var(--farbe-primaer); }
.geo-rang { color: var(--farbe-ruhig); font-weight: 800; }
.geo-name small { display: block; }
.geo-spur { display: block; height: 14px; border-radius: 999px; background: var(--farbe-linie); overflow: hidden; }
.geo-wert { display: block; height: 100%; background: var(--farbe-primaer); }
.geo-zeile--hervor .geo-wert { background: var(--farbe-akzent); }
.geo-zahl { font-weight: 800; white-space: nowrap; }
.geo-abschluss { margin-top: 2.5rem; }
.gmb-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.gmb-vergleich--gedreht .gmb-widget { order: -1; }
.gmb-widget { min-height: 200px; }

/* ---------- Fliesstext, Rechtstexte, Fakten ---------- */
.fliesstext h2, .fliesstext h3 { margin-top: 2rem; }
.fliesstext img { border-radius: var(--radius); }
/* Bilder duerfen aus der Lesespalte heraustreten - sonst waeren sie auf die
   780 px Lesebreite gedeckelt und kleiner als in der Quelle. Gedeckelt auf
   1024 px; mehr liefern die Dateien nicht, und Hochskalieren hilft nichts.
   max-width statt width bei den nackten Bildern, damit kleine klein bleiben. */
.fliesstext.lesebreite figure { width: min(1024px, calc(100vw - 2rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.fliesstext figure img { display: block; margin-inline: auto; }
.fliesstext.lesebreite p > img { display: block; max-width: min(1024px, calc(100vw - 2rem)); margin-left: 50%; transform: translateX(-50%); }
.fliesstext table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.fliesstext th, .fliesstext td { border-bottom: 1px solid var(--farbe-linie); padding: .6rem; text-align: left; }
.fliesstext blockquote { margin: 1.5rem 0; border-left: 4px solid var(--farbe-akzent); padding-left: 1.25rem; color: var(--farbe-ruhig); }
/* Abgesetzter Aufgabenkasten fuer Unterrichtsseiten: eigener Grund statt nur
   eines Strichs, damit eine Aufgabe im langen Fliesstext sofort auffaellt.
   Farben kommen aus den Token, nicht fest verdrahtet - so passt der Kasten
   auf jeder Seite zur Palette. */
.fliesstext blockquote.aufgabe { border-left-color: var(--farbe-primaer); background: var(--farbe-akzent-hell); padding: 1.25rem 1.5rem; color: var(--farbe-text); border-radius: 0 var(--radius) var(--radius) 0; }
.fliesstext blockquote.aufgabe > :first-child { margin-top: 0; }
.fliesstext blockquote.aufgabe > :last-child { margin-bottom: 0; }
.fliesstext blockquote.aufgabe h3 { margin-top: 1.25rem; }
.fliesstext blockquote.aufgabe h3:first-child { margin-top: 0; }
.faktenseite h2, .rechtstext h2 { margin-top: 3rem; font-size: 2.1rem; }
.faktenliste { border-top: 1px solid var(--farbe-linie); }
.faktenliste div { display: grid; grid-template-columns: minmax(130px, .45fr) 1fr; border-bottom: 1px solid var(--farbe-linie); padding: 1rem 0; gap: 1rem; }
.faktenliste dt { font-weight: 800; }
.faktenliste dd { margin: 0; }
.faktenabschnitt { margin: 2rem 0; }
.quellenliste { padding-left: 1.2rem; }
.pruefstand { border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }

/* ---------- Kontakt und Formular ---------- */
.kontaktband { color: var(--farbe-auf-primaer); background: var(--farbe-primaer); }
.kontaktband .kicker { color: var(--farbe-kennzeichnung-auf-primaer); }
.kontaktband .knopf { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.kontaktband .knopf-sekundaer { border-color: var(--farbe-auf-primaer); color: var(--farbe-auf-primaer); background: transparent; }
.kontaktband .mikrotext { color: rgb(255 255 255 / 92%); }
.kontaktband--dunkel { background: var(--farbe-primaer-dunkel); }
.kontaktband--hell { color: var(--farbe-text); background: var(--farbe-flaeche); }
.kontaktband--hell .kicker { color: var(--farbe-primaer); }
.kontaktband--hell .knopf { background: var(--farbe-primaer); color: var(--farbe-auf-primaer); }
.kontaktband--hell .knopf-sekundaer { border-color: var(--farbe-primaer); color: var(--farbe-primaer); background: transparent; }
.kontaktband--hell .mikrotext { color: var(--farbe-ruhig); }
.kontakt-titel { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.kanaele { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.kanal { display: grid; border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }
.kanal-art { color: var(--farbe-ruhig); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.kanal-wert { font-size: 1.15rem; font-weight: 700; }
.kontaktformular { display: grid; gap: 1.1rem; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
/* align-content: start - steht ein Feld neben einem hoeheren (Fehlertext
   darunter), bleibt sein Eingabefeld oben und so hoch wie sonst, statt mit
   der Zeile zu wachsen. Zusaetze wie "(optional)" gehoeren mit der
   Beschriftung in ein Element (.feld-titel), sonst werden sie eine eigene Zeile. */
.feld { display: grid; align-content: start; gap: .35rem; font-weight: 700; }
.feld-zusatz { font-weight: 400; color: var(--farbe-ruhig); }
.kontaktformular input:not([type="checkbox"]), .kontaktformular textarea, .kontaktformular select { width: 100%; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: .75rem; color: var(--farbe-text); background: var(--farbe-papier); }
.kontaktformular textarea { resize: vertical; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--farbe-fehler); }
.feld-fehler { color: var(--farbe-fehler); font-size: .9rem; font-weight: 400; }
.kontrollfeld { grid-template-columns: auto 1fr; align-items: start; font-size: .9rem; font-weight: 400; }
.kontrollfeld input { margin-top: .3rem; }
.feld--captcha { display: block; }
.captchame { margin: .25rem 0; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formular-fuss .mikrotext { margin: 0; }
.honigtopf { position: absolute; left: -9999px; }
.meldung { border-left: 4px solid; padding: .8rem 1rem; }
.meldung.erfolg { border-color: var(--farbe-erfolg); background: #e7f5ec; }
.meldung.fehler { border-color: var(--farbe-fehler); background: #fbeaea; }

/* ---------- Fuss, Dialog, mobile Leiste ---------- */
.seitenfuss { padding: 3.5rem 0 7rem; color: #fff; background: var(--farbe-text); }
.fussraster { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.seitenfuss nav { display: grid; justify-items: start; gap: .45rem; }
.seitenfuss a { color: #fff; }
.cookie-dialog { width: min(calc(100% - 2rem), 680px); border: 0; border-radius: var(--radius); padding: 0; color: var(--farbe-text); box-shadow: var(--schatten); }
.cookie-dialog::backdrop { background: rgb(14 22 20 / 68%); }
.cookie-dialog form { padding: 1.5rem; }
.cookie-dialog fieldset { display: grid; border: 0; padding: 0; gap: .6rem; }
.dialog-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mobil-cta { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: none; grid-template-columns: .8fr 1.2fr; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 28px rgb(0 0 0 / 18%); }
.mobil-cta a { min-height: 54px; display: grid; place-items: center; color: var(--farbe-auf-primaer); background: var(--farbe-primaer-dunkel); font-weight: 800; text-decoration: none; }
.mobil-cta a + a { background: var(--farbe-primaer); }

/* ---------- Bewegte Grafiken: gemeinsame Teile ----------
   Handy, Laufschrift, Schaubild und Radar bewegen sich per CSS. Jede traegt
   data-bewegung; website.js haelt sie an, wenn jemand den Knopf drueckt
   (data-angehalten) oder die Grafik ausser Sicht ist (data-ruht) - die
   Regeln dafuer stehen am Ende, damit sie jede Animation ueberstimmen. */
.bewegung-pause { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .25rem .75rem; color: var(--farbe-ruhig); background: var(--farbe-papier); font: inherit; font-size: .78rem; line-height: 1.4; cursor: pointer; }
.bewegung-pause:hover { border-color: var(--farbe-ruhig); color: var(--farbe-text); }
/* Der Knopf setzt display selbst - ohne diese Regel ueberstimmte das das
   hidden-Attribut, und ein toter Knopf stuende ohne Skript im Bild. */
.bewegung-pause[hidden] { display: none; }
.bewegung-pause .symbol { width: .9rem; height: .9rem; flex: 0 0 auto; }
.bewegung-pause .symbol-weiter, .bewegung-pause[aria-pressed="true"] .symbol-pause { display: none; }
.bewegung-pause[aria-pressed="true"] .symbol-weiter { display: block; }
.bewegung-pause--rund { justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; }
.bewegung-pause--rund .bewegung-pause-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.einstieg--dunkel .bewegung-pause, .abschnitt--dunkel .bewegung-pause, .laufschrift--dunkel .bewegung-pause, .laufschrift--primaer .bewegung-pause { border-color: rgb(255 255 255 / 35%); color: #fff; background: rgb(255 255 255 / 10%); }

/* ---------- Startbereich mit Handy ----------
   Ein Takt von zwoelf Sekunden fuer alles im Handy: 2-13 % tippt der
   Suchbegriff, ab 16 % erscheint die Liste, dann steigt der eigene Eintrag
   in drei Schritten (24-30, 42-48, 60-66 %) nach oben, bleibt bis 92 % auf
   Platz 1 und blendet mit der Liste aus. Listen mit drei Plaetzen (Karte,
   KI) sparen sich den ersten Schritt.

   Die Grundwerte ausserhalb der Keyframes sind das ENDE der Bewegung. Ohne
   Animation - "Bewegung reduzieren", angehalten vor dem Start, altes
   Browserprogramm - steht der eigene Eintrag also oben. */
.einstieg--handy { background: var(--farbe-flaeche); }
.einstieg--handy.einstieg--dunkel { background: var(--farbe-primaer-dunkel); }
.einstieg--handy .einstieg-raster { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.einstieg--handy h1 { max-width: 15ch; margin-bottom: .35em; font-size: clamp(2.3rem, 5vw, 4.3rem); }
.einstieg-unterzeile { max-width: 24ch; margin: 0 0 1.25rem; color: var(--farbe-primaer); font-family: var(--schrift-titel); font-size: clamp(1.3rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.2; }
.einstieg--dunkel .einstieg-unterzeile { color: var(--farbe-akzent-hell); }
.einstieg-mikrotext { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; }
.einstieg-mikrotext .symbol { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--farbe-erfolg); }
.einstieg--dunkel .einstieg-mikrotext { color: rgb(255 255 255 / 75%); }
.einstieg--dunkel .einstieg-mikrotext .symbol { color: var(--farbe-akzent-hell); }
.einstieg--dunkel .knopf-sekundaer { border-color: rgb(255 255 255 / 55%); color: #fff; background: transparent; }
.einstieg--dunkel .knopf-sekundaer:hover { border-color: #fff; background: rgb(255 255 255 / 10%); }
.kontaktzeile { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; color: var(--farbe-ruhig); font-size: .88rem; }
.kontaktzeile li, .kontaktzeile a { display: inline-flex; align-items: center; gap: .4rem; }
.kontaktzeile a { color: inherit; text-decoration: none; }
.kontaktzeile a:hover { color: var(--farbe-text); text-decoration: underline; }
.kontaktzeile .symbol { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--farbe-primaer); }
.einstieg--dunkel .kontaktzeile { color: rgb(255 255 255 / 78%); }
.einstieg--dunkel .kontaktzeile a:hover { color: #fff; }
.einstieg--dunkel .kontaktzeile .symbol { color: var(--farbe-akzent-hell); }

/* Die Buehne: ein weicher Lichtkreis und ein Punktraster hinter dem Handy. */
.handy-buehne { position: relative; z-index: 0; display: grid; justify-items: center; gap: 1.1rem; margin: 0; padding-top: 1rem; }
.handy-buehne::before { position: absolute; z-index: -1; top: 2%; left: 50%; width: min(480px, 118%); aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, rgb(22 93 80 / 16%), transparent 68%); background: radial-gradient(circle, color-mix(in srgb, var(--farbe-primaer) 22%, transparent), transparent 68%); transform: translateX(-50%); }
.handy-buehne::after { position: absolute; z-index: -1; right: 0; bottom: 16%; width: 34%; aspect-ratio: 1; content: ""; background-image: radial-gradient(var(--farbe-primaer) 1.3px, transparent 1.7px); background-size: 14px 14px; opacity: .28; }
.einstieg--dunkel .handy-buehne::before { background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 68%); }
.einstieg--dunkel .handy-buehne::after { background-image: radial-gradient(var(--farbe-akzent-hell) 1.3px, transparent 1.7px); }

/* Das Geraet. Innen rechnet alles in em, und die Schriftgroesse folgt der
   Breite des Handys (cqw) - so bleibt der Bildschirm in jeder Groesse gleich
   aufgeteilt, und die Schritte der Liste passen immer. */
.handy { position: relative; width: clamp(250px, 23vw, 300px); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 9px; background: #10161a; box-shadow: 0 34px 70px rgb(16 22 26 / 30%), inset 0 0 0 2px rgb(255 255 255 / 10%); container-type: inline-size; }
.handy::before { position: absolute; top: 22%; right: -3px; width: 3px; height: 11%; content: ""; border-radius: 0 3px 3px 0; background: #10161a; }
.handy::after { position: absolute; top: 17%; left: -3px; width: 3px; height: 6%; content: ""; border-radius: 3px 0 0 3px; background: #10161a; }
.handy-gehaeuse { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 34px; color: #1b2327; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-size: clamp(11px, 4.5cqw, 14px); line-height: 1.3; text-align: left; }
.handy-gehaeuse::before { position: absolute; z-index: 3; top: 8px; left: 50%; width: 31%; height: 22px; content: ""; border-radius: 999px; background: #10161a; transform: translateX(-50%); }
.handy-statusleiste { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 20px 0 26px; font-size: .82em; font-weight: 700; }
.handy-symbole { display: inline-flex; align-items: flex-end; gap: 2px; }
.handy-symbole i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.handy-symbole i:nth-child(1) { height: 5px; }
.handy-symbole i:nth-child(2) { height: 7px; }
.handy-symbole i:nth-child(3) { height: 9px; }
.handy-symbole b { display: block; width: 18px; height: 9px; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 3px; background: currentColor; box-shadow: inset 0 0 0 1px #fff, inset -6px 0 0 #fff; }
.handy-inhalt { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: .8em; min-height: 0; padding: .6em .95em 1em; }

.handy-suchfeld { display: flex; align-items: center; gap: .55em; min-height: 2.7em; margin-top: .4em; border: 1px solid #e0e4e7; border-radius: 999px; padding: 0 1em; background: #fff; box-shadow: 0 2px 10px rgb(16 22 26 / 7%); font-size: .95em; }
.handy-suchfeld .symbol { width: 1.05em; height: 1.05em; flex: 0 0 auto; color: #6b757b; }
.handy-suchtext { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.handy-cursor { width: 1.5px; height: 1.15em; flex: 0 0 auto; margin-left: -.4em; background: var(--farbe-primaer); }
.handy-reiter { display: flex; gap: 1.15em; border-bottom: 1px solid #eceff1; padding: 0 .3em; color: #6b757b; font-size: .8em; }
.handy-reiter span { padding-bottom: .5em; }
.handy-reiter-aktiv { color: var(--farbe-primaer); font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; }

/* Die Liste: Plaetze fester Hoehe (--schritt), jeder Eintrag absolut auf
   seinem Platz. Bewegt wird nur transform - der Platz im Markup bleibt. */
.handy-liste { --schritt: 6.3em; position: relative; flex: 0 0 auto; height: calc(4 * var(--schritt)); margin: 0; padding: 0; list-style: none; }
.handy-liste--3 { --schritt: 5.9em; height: calc(3 * var(--schritt)); }
.handy-buehne--ki .handy-liste--3 { --schritt: 6.9em; }
.handy-treffer { position: absolute; top: calc(var(--platz, 0) * var(--schritt)); right: 0; left: 0; display: grid; grid-template-columns: 2em minmax(0, 1fr); align-content: start; column-gap: .65em; height: calc(var(--schritt) - .6em); border-radius: .85em; padding: .6em .75em; background: #fff; }
.handy-treffer--a { --platz: 1; }
.handy-treffer--b { --platz: 2; }
.handy-treffer--c { --platz: 3; }
.handy-treffer--eigen { z-index: 2; background: #f2f7f5; background: color-mix(in srgb, var(--farbe-primaer) 7%, #fff); box-shadow: 0 0 0 1.5px var(--farbe-primaer), 0 12px 24px rgb(16 22 26 / 14%); }
.handy-treffer--eigen::after { position: absolute; inset: -.3em; content: ""; border: 2px solid var(--farbe-akzent); border-radius: 1.1em; opacity: 0; pointer-events: none; }
.handy-favicon { display: grid; grid-row: span 3; place-items: center; width: 2em; height: 2em; border-radius: 50%; color: #fff; background: #e6e9eb; font-weight: 800; }
.handy-treffer--eigen .handy-favicon { background: var(--farbe-primaer); }
.handy-domain { overflow: hidden; color: #4f585d; font-size: .74em; white-space: nowrap; text-overflow: ellipsis; }
.handy-titel { overflow: hidden; color: var(--farbe-primaer-dunkel); font-size: .98em; white-space: nowrap; text-overflow: ellipsis; }
.handy-text { display: -webkit-box; overflow: hidden; color: #5b656a; font-size: .78em; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.handy-strich { display: block; height: .55em; margin: .32em 0; border-radius: 999px; background: #e6e9eb; }
.handy-strich--kurz { width: 42%; }
.handy-strich--mittel { width: 68%; }
.handy-strich--lang { width: 94%; }
.handy-mehr { padding: 0 .75em 0 3.4em; opacity: .6; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* Faehnchen "Platz n": die Ziffern stehen untereinander, das Fenster zeigt
   eine. --letzte ist die Nummer der Zeile mit der 1. */
.handy-rang { position: absolute; z-index: 1; top: -.75em; right: .75em; display: inline-flex; align-items: center; gap: .3em; border-radius: 999px; padding: .2em .65em; color: var(--farbe-text); background: var(--farbe-akzent); box-shadow: 0 4px 12px rgb(16 22 26 / 18%); font-size: .8em; font-weight: 800; line-height: 1.25; }
.handy-rang-fenster { display: inline-block; height: 1.25em; overflow: hidden; }
.handy-rang-ziffern { --letzte: 3; display: flex; flex-direction: column; transform: translateY(calc(var(--letzte) * -1.25em)); }
.handy-liste--3 .handy-rang-ziffern { --letzte: 2; }
.handy-rang-ziffern b { display: block; height: 1.25em; }

/* Kartenansicht: eine gezeichnete Stadt, Stecknadeln, Firmeneintraege. */
.handy-karte { position: relative; flex: 0 0 auto; height: 12em; overflow: hidden; border-radius: .9em; }
.handy-karte-bild { display: block; width: 100%; height: 100%; }
.handy-karte-grund { fill: #eef1ea; }
.handy-karte-park { fill: #d4e8cd; }
.handy-karte-wasser { fill: #cde2ee; }
.handy-karte-block { fill: #e2e5e0; }
.handy-karte-strasse { fill: none; stroke: #fff; stroke-width: 7; }
.handy-karte-gasse { fill: none; stroke: #fff; stroke-width: 3.5; }
.handy-pin { position: absolute; width: 1.35em; height: 1.35em; border-radius: 50% 50% 50% 0; background: #9aa4aa; transform: translate(-50%, -100%) rotate(-45deg); }
.handy-pin::after { position: absolute; inset: 30%; content: ""; border-radius: 50%; background: #fff; }
.handy-pin--eigen { z-index: 2; width: 1.9em; height: 1.9em; background: var(--farbe-primaer); box-shadow: 0 6px 14px rgb(16 22 26 / 25%); }
.handy-pin-puls { position: absolute; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--farbe-primaer); opacity: .2; transform: translate(-50%, -50%); }
.handy-treffer--ort, .handy-treffer--ki { grid-template-columns: minmax(0, 1fr); }
.handy-zeile { overflow: hidden; color: #5b656a; font-size: .78em; white-space: nowrap; text-overflow: ellipsis; }
.handy-knoepfe { display: flex; gap: .4em; margin-top: .45em; }
.handy-knoepfe span { border: 1px solid #dde2e5; border-radius: 999px; padding: .12em .6em; color: var(--farbe-primaer-dunkel); font-size: .7em; font-weight: 700; }
.handy-knoepfe--leer span { width: 3.6em; height: 1.45em; border-color: #eceff1; padding: 0; background: #f4f6f7; }

/* KI-Antwort: Frage, drei Punkte "denkt nach", Antwort mit Empfehlungen. */
.handy-ki-kopf { display: flex; align-items: center; gap: .45em; margin-top: .5em; border-bottom: 1px solid #eceff1; padding-bottom: .6em; font-weight: 800; }
.handy-ki-kopf .symbol { width: 1.25em; height: 1.25em; color: var(--farbe-primaer); }
.handy-blase { align-self: flex-end; max-width: 86%; margin: 0; border-radius: 1.1em 1.1em .3em; padding: .65em .9em; color: #fff; background: var(--farbe-primaer); font-size: .86em; line-height: 1.35; }
/* Nimmt keinen Platz: die Antwort legt sich spaeter genau dorthin. */
.handy-denkt { display: flex; align-items: center; gap: .3em; height: 1.9em; margin-bottom: -1.9em; padding-left: .3em; opacity: 0; }
.handy-denkt i { width: .45em; height: .45em; border-radius: 50%; background: #9aa4aa; }
.handy-antwort { display: flex; flex-direction: column; gap: .75em; }
.handy-antwort-kopf { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .5em; align-items: start; }
.handy-antwort-kopf .symbol { width: 1.3em; height: 1.3em; color: var(--farbe-primaer); }
.handy-quelle { display: inline-block; justify-self: start; margin-top: .45em; border-radius: 999px; padding: .12em .6em; color: var(--farbe-primaer-dunkel); background: #e7f0ed; background: color-mix(in srgb, var(--farbe-primaer) 12%, #fff); font-size: .68em; font-weight: 700; }
.handy-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; color: #6b757b; font-size: .75em; }
.handy-quellen .handy-quelle { margin: 0; font-size: .92em; }
.handy-quelle:empty { width: 4.6em; height: 1.45em; background: #f0f2f3; }

/* Abzeichen, Portrait und Hinweis rund um das Handy. Das Abzeichen liegt
   unten ueber den grauen Platzhaltern - oben saesse es auf dem eigenen
   Eintrag, um den es geht. */
.handy-abzeichen { position: absolute; z-index: 3; bottom: 24%; left: 0; display: grid; max-width: 13rem; margin: 0; border-radius: 1rem; padding: .75rem 1rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: 0 16px 36px rgb(16 22 26 / 18%); text-align: left; }
.handy-abzeichen strong { color: var(--farbe-primaer); font-family: var(--schrift-titel); font-size: 1.6rem; line-height: 1.1; }
.handy-abzeichen span { color: var(--farbe-ruhig); font-size: .82rem; line-height: 1.3; }
.handy-buehne--mit-bild { justify-items: start; }
.handy-buehne--mit-bild .handy { margin-top: 16%; margin-left: 3%; }
.handy-buehne--mit-bild .handy-abzeichen { right: 0; bottom: 14%; left: auto; max-width: 11rem; }
.handy-portrait { position: absolute; z-index: -1; top: 0; right: 0; width: 60%; max-width: 330px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--farbe-papier); box-shadow: var(--schatten); }
.handy-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Rechtsbuendig: links liegt das Handy ueber dem Bild. */
.handy-portrait-name { position: absolute; right: 0; bottom: 0; left: 0; display: grid; justify-items: end; margin: 0; padding: 3.5rem 1.1rem 1rem 30%; color: #fff; background: linear-gradient(transparent, rgb(10 14 16 / 78%)); text-align: right; line-height: 1.3; }
.handy-portrait-name span { font-size: .85rem; opacity: .85; }
.handy-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; color: var(--farbe-ruhig); font-size: .78rem; }
.einstieg--dunkel .handy-fuss { color: rgb(255 255 255 / 70%); }
.handy-buehne--mit-bild .handy-fuss { margin-left: 3%; }

.handy-suchtext { animation: handy-tippt 12s steps(var(--zeichen, 20), end) infinite; }
.handy-cursor { animation: handy-cursor 12s linear infinite, handy-blinkt 1s steps(1) infinite; }
.handy-buehne--suche .handy-liste, .handy-buehne--karte .handy-liste, .handy-antwort { animation: handy-blende 12s ease infinite; }
.handy-liste--4 .handy-treffer--eigen { animation: handy-steigt-3 12s ease-in-out infinite; }
.handy-liste--3 .handy-treffer--eigen { animation: handy-steigt-2 12s ease-in-out infinite; }
.handy-treffer--c { animation: handy-weicht-1 12s ease-in-out infinite; }
.handy-treffer--b { animation: handy-weicht-2 12s ease-in-out infinite; }
.handy-treffer--a { animation: handy-weicht-3 12s ease-in-out infinite; }
.handy-liste--4 .handy-rang-ziffern { animation: handy-rang-4 12s ease-in-out infinite; }
.handy-liste--3 .handy-rang-ziffern { animation: handy-rang-3 12s ease-in-out infinite; }
.handy-treffer--eigen::after { animation: handy-glanz 12s ease-out infinite; }
.handy-pin-puls { animation: handy-puls 2.4s ease-out infinite; }
.handy-blase { animation: handy-frage 12s ease infinite; }
.handy-denkt { animation: handy-denkt 12s linear infinite; }
.handy-denkt i { animation: handy-hopst 1s ease-in-out infinite; }
.handy-denkt i:nth-child(2) { animation-delay: .15s; }
.handy-denkt i:nth-child(3) { animation-delay: .3s; }
.handy-abzeichen { animation: handy-schwebt 6s ease-in-out infinite; }

@keyframes handy-tippt {
    0%, 2% { clip-path: inset(0 100% 0 0); }
    13%, 94% { clip-path: inset(0 0 0 0); }
    98%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes handy-cursor {
    0%, 13% { opacity: 0; }
    14%, 93% { opacity: 1; }
    94%, 100% { opacity: 0; }
}
@keyframes handy-blinkt { 50% { visibility: hidden; } }
@keyframes handy-blende {
    0%, 14% { opacity: 0; }
    18%, 92% { opacity: 1; }
    97%, 100% { opacity: 0; }
}
@keyframes handy-steigt-3 {
    0%, 24% { transform: translateY(calc(var(--schritt) * 3)); }
    30%, 42% { transform: translateY(calc(var(--schritt) * 2)); }
    48%, 60% { transform: translateY(var(--schritt)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-steigt-2 {
    0%, 42% { transform: translateY(calc(var(--schritt) * 2)); }
    48%, 60% { transform: translateY(var(--schritt)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-1 {
    0%, 24% { transform: translateY(calc(var(--schritt) * -1)); }
    30%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-2 {
    0%, 42% { transform: translateY(calc(var(--schritt) * -1)); }
    48%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-3 {
    0%, 60% { transform: translateY(calc(var(--schritt) * -1)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-rang-4 {
    0%, 24% { transform: translateY(0); }
    30%, 42% { transform: translateY(-1.25em); }
    48%, 60% { transform: translateY(-2.5em); }
    66%, 100% { transform: translateY(-3.75em); }
}
@keyframes handy-rang-3 {
    0%, 42% { transform: translateY(0); }
    48%, 60% { transform: translateY(-1.25em); }
    66%, 100% { transform: translateY(-2.5em); }
}
@keyframes handy-glanz {
    0%, 64% { opacity: 0; transform: scale(.97); }
    69% { opacity: 1; transform: scale(1); }
    84%, 100% { opacity: 0; transform: scale(1.04); }
}
@keyframes handy-puls {
    from { opacity: .45; transform: translate(-50%, -50%) scale(.4); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes handy-frage {
    0% { opacity: 0; transform: translateY(.6em); }
    3%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
}
@keyframes handy-denkt {
    0%, 4% { opacity: 0; }
    6%, 15% { opacity: 1; }
    17%, 100% { opacity: 0; }
}
@keyframes handy-hopst {
    0%, 100% { opacity: .45; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-.3em); }
}
@keyframes handy-schwebt { 50% { transform: translateY(-8px); } }

/* ---------- Laufschrift ----------
   Mechanik wie beim Logoband: zwei gleiche Listen, Verschiebung um -50 %.
   Jedes Stichwort traegt sein Trennzeichen hinter sich, auch das letzte -
   so sitzt auch an der Nahtstelle zwischen den beiden Listen eines. */
.laufschrift { position: relative; padding: 1.15rem 0; overflow: hidden; color: #fff; background: var(--farbe-primaer-dunkel); }
.laufschrift--primaer { background: var(--farbe-primaer); }
.laufschrift--hell { border-block: 1px solid var(--farbe-linie); color: var(--farbe-text); background: var(--farbe-flaeche); }
.laufschrift-band { overflow: hidden; }
.laufschrift--laufend .laufschrift-band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.laufschrift-spur { display: flex; }
.laufschrift--laufend .laufschrift-spur { width: max-content; animation: laufschrift var(--laufschrift-dauer, 40s) linear infinite; }
.laufschrift--laufend .laufschrift-band:hover .laufschrift-spur { animation-play-state: paused; }
.laufschrift-liste { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 2.4rem; margin: 0; padding: 0 1rem; list-style: none; }
.laufschrift--laufend .laufschrift-liste { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 2.4rem; padding: 0 2.4rem 0 0; }
.laufschrift-liste li { display: inline-flex; align-items: center; gap: 2.4rem; font-family: var(--schrift-titel); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; white-space: nowrap; }
.laufschrift-liste li::after { content: "\2726"; content: "\2726" / ""; color: var(--farbe-akzent-hell); font-size: .75em; }
.laufschrift--punkt .laufschrift-liste li::after { content: "\2022"; content: "\2022" / ""; font-size: 1em; }
.laufschrift--strich .laufschrift-liste li::after { content: "\2014"; content: "\2014" / ""; font-size: 1em; }
.laufschrift--hell .laufschrift-liste li::after { color: var(--farbe-akzent); }
.laufschrift:not(.laufschrift--laufend) .laufschrift-liste li:last-child::after { display: none; }
.laufschrift .bewegung-pause { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); }

@keyframes laufschrift { to { transform: translateX(-50%); } }

/* ---------- Schaubild ----------
   Reihum leuchtet ein Punkt auf, mit ihm seine Zeile in der Liste und seine
   Linie. Getragen wird das von einer einzigen Zahl, --an (0 bis 1), die je
   Punkt versetzt animiert wird; Farben und Groessen rechnen sich daraus.
   Das Fenster je Punkt ist ein n-tel des Umlaufs, deshalb ein Satz
   Keyframes je Anzahl. Wo @property fehlt, springt --an statt zu gleiten. */
@property --an { syntax: "<number>"; inherits: true; initial-value: 0; }
.schaubild { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.schaubild--kreis { grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr); }
.schaubild-liste { display: grid; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.schaubild:not(.schaubild--kreis) .schaubild-liste { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem 2rem; }
.schaubild-liste li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; border-left: 3px solid transparent; border-radius: var(--radius); padding: .8rem 1rem; }
.schaubild-nummer { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--farbe-primaer); background: var(--farbe-flaeche); font-weight: 800; }
.abschnitt--flaeche .schaubild-nummer { background: var(--farbe-papier); }
.abschnitt--dunkel .schaubild-nummer { color: #fff; background: rgb(255 255 255 / 10%); }
.schaubild-liste h3 { margin: .35rem 0 .2rem; font-size: 1.15rem; }
.schaubild-liste p { margin: 0; color: var(--farbe-ruhig); }
.abschnitt--dunkel .schaubild-liste p { color: rgb(255 255 255 / 78%); }
.schaubild-buehne { position: relative; }
.schaubild-grafik { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.schaubild-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.schaubild-ring { fill: none; stroke: var(--farbe-linie); stroke-width: .35; stroke-dasharray: 1 1.4; }
.schaubild-linie { stroke: var(--farbe-primaer); stroke-width: .45; stroke-dasharray: 1.2 2.2; opacity: .45; }
.abschnitt--dunkel .schaubild-linie { stroke: var(--farbe-akzent-hell); }
.schaubild-mitte { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; padding: .8rem; color: #fff; background: var(--farbe-primaer); box-shadow: 0 0 0 .7rem rgb(22 93 80 / 12%), var(--schatten); box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--farbe-primaer) 14%, transparent), var(--schatten); transform: translate(-50%, -50%); font-family: var(--schrift-titel); font-size: clamp(.85rem, 1.5vw, 1.1rem); font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.schaubild-mitte::after { position: absolute; inset: 0; content: ""; border: 2px solid var(--farbe-primaer); border-radius: 50%; opacity: 0; }
.abschnitt--dunkel .schaubild-mitte { color: var(--farbe-text); background: var(--farbe-akzent); }
/* Der Kreis des Punktes sitzt auf dem Ende seiner Linie, die Beschriftung
   darunter. */
/* So breit wie der Inhalt, hoechstens 8.5rem: laengere Beschriftungen brechen
   wie in einem 8.5rem-Kasten um, Kreis und Beschriftung stehen gleich. Ein
   fester Kasten ragte mit seinem leeren Rand am rechten Punkt ueber den
   Bildschirm (Vier Punkte, 961-979 px: 1 px). */
.schaubild-knoten { position: absolute; display: grid; justify-items: center; gap: .35rem; width: max-content; max-width: 8.5rem; transform: translate(-50%, -1.6rem); text-align: center; }
.schaubild-knoten > span { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 2px solid var(--farbe-primaer); border-radius: 50%; color: var(--farbe-primaer); background: var(--farbe-papier); box-shadow: 0 8px 18px rgb(24 32 30 / 10%); font-weight: 800; }
.schaubild-knoten small { color: var(--farbe-text); font-size: .85rem; font-weight: 700; line-height: 1.2; }
.abschnitt--dunkel .schaubild-knoten small { color: #fff; }
.schaubild .bewegung-pause { position: absolute; right: 0; bottom: 0; }
.schaubild--3 { --takt: schaubild-takt-3; }
.schaubild--4 { --takt: schaubild-takt-4; }
.schaubild--5 { --takt: schaubild-takt-5; }
.schaubild--6 { --takt: schaubild-takt-6; }
.schaubild--kreis :is(.schaubild-liste li, .schaubild-knoten) { animation: var(--takt) calc(var(--anzahl) * 2.2s) ease-in-out calc(var(--i) * 2.2s) infinite; }
.schaubild--kreis .schaubild-linie { animation: schaubild-fluss 1.4s linear infinite, var(--takt) calc(var(--anzahl) * 2.2s) ease-in-out calc(var(--i) * 2.2s) infinite; }
.schaubild--kreis .schaubild-mitte::after { animation: schaubild-puls 3.2s ease-out infinite; }
.schaubild--kreis .schaubild-liste li { border-left-color: color-mix(in srgb, var(--farbe-akzent) calc(var(--an) * 100%), transparent); background: color-mix(in srgb, var(--farbe-primaer) calc(var(--an) * 7%), transparent); }
.schaubild--kreis .schaubild-knoten > span { color: color-mix(in srgb, #fff calc(var(--an) * 100%), var(--farbe-primaer)); background: color-mix(in srgb, var(--farbe-primaer) calc(var(--an) * 100%), var(--farbe-papier)); transform: scale(calc(1 + var(--an) * .14)); }
.schaubild--kreis .schaubild-linie { opacity: calc(.4 + var(--an) * .6); stroke-width: calc(.45 + var(--an) * .35); }
/* Wer die Liste liest, soll sie nicht unter der Hand weiterleuchten sehen. */
.schaubild--kreis:hover *, .schaubild--kreis:hover *::after { animation-play-state: paused; }

@keyframes schaubild-takt-3 { 0%, 33%, 100% { --an: 0; } 5%, 28% { --an: 1; } }
@keyframes schaubild-takt-4 { 0%, 25%, 100% { --an: 0; } 4%, 21% { --an: 1; } }
@keyframes schaubild-takt-5 { 0%, 20%, 100% { --an: 0; } 3%, 17% { --an: 1; } }
@keyframes schaubild-takt-6 { 0%, 16.6%, 100% { --an: 0; } 3%, 14% { --an: 1; } }
@keyframes schaubild-fluss { to { stroke-dashoffset: -3.4; } }
@keyframes schaubild-puls {
    from { opacity: .6; transform: scale(1); }
    to { opacity: 0; transform: scale(1.45); }
}

/* ---------- Radar (Einzugsgebiet) ----------
   Ein Strahl dreht sich um den Sitz; jeder Ort leuchtet auf, wenn der
   Strahl ihn trifft. Der Strahl beginnt oben und dreht im Uhrzeigersinn;
   den passenden Verzug je Ort rechnet block-standortliste.php aus. */
.radar { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 1rem auto; }
.radar-flaeche { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--farbe-linie); border-radius: 50%; background: var(--farbe-papier); }
.abschnitt--dunkel .radar-flaeche { border-color: rgb(255 255 255 / 18%); background: rgb(255 255 255 / 6%); }
.radar-ring { position: absolute; inset: 12%; border: 1px dashed var(--farbe-linie); border-radius: 50%; }
.radar-ring--mitte { inset: 26%; }
.radar-ring--innen { inset: 40%; }
.abschnitt--dunkel .radar-ring { border-color: rgb(255 255 255 / 16%); }
.radar-strahl { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 76%, rgb(22 93 80 / 24%) 100%); background: conic-gradient(from 0deg, transparent 0 76%, color-mix(in srgb, var(--farbe-primaer) 30%, transparent) 100%); animation: radar-dreht var(--umlauf, 8s) linear infinite; }
.radar-mitte { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; gap: .35rem; margin: 0; transform: translate(-50%, -.55rem); font-family: var(--schrift-titel); font-weight: 700; line-height: 1.2; text-align: center; }
.radar-punkt { position: relative; width: 1.1rem; height: 1.1rem; border: 3px solid var(--farbe-papier); border-radius: 50%; background: var(--farbe-primaer); box-shadow: 0 4px 10px rgb(24 32 30 / 25%); }
.radar-punkt::after { position: absolute; inset: -3px; content: ""; border-radius: 50%; background: var(--farbe-primaer); opacity: 0; animation: radar-puls 2.4s ease-out infinite; }
.radar-orte { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.radar-orte li { position: absolute; top: var(--y); left: var(--x); display: grid; justify-items: center; gap: .15rem; width: 8rem; transform: translate(-50%, -.35rem); font-size: .88rem; font-weight: 700; line-height: 1.2; text-align: center; }
.radar-orte li::before { width: .7rem; height: .7rem; margin-bottom: .2rem; content: ""; border-radius: 50%; background: var(--farbe-akzent); box-shadow: 0 0 0 3px var(--farbe-papier); animation: radar-blip var(--umlauf, 8s) ease-out var(--verzug, 0s) infinite; }
.radar-orte small { color: var(--farbe-ruhig); font-size: .76rem; font-weight: 400; }
.abschnitt--dunkel .radar-orte small { color: rgb(255 255 255 / 70%); }
.radar .bewegung-pause { position: absolute; right: 0; bottom: 0; }

@keyframes radar-dreht { to { transform: rotate(1turn); } }
@keyframes radar-puls {
    from { opacity: .5; transform: scale(1); }
    to { opacity: 0; transform: scale(3); }
}
@keyframes radar-blip {
    0% { transform: scale(1.9); }
    22%, 100% { transform: scale(1); }
}

/* ---------- Einblenden beim Hineinscrollen ----------
   Greift nur, wenn website.js "wartet" gesetzt hat - also mit Skript und
   ohne "Bewegung reduzieren". Ohne Skript steht alles von Anfang an da. */
[data-einblenden="wartet"] :is(.ablaufkarte, .ablaufliste > li) { opacity: 0; transform: translateY(1.5rem); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 130ms); }
[data-einblenden="wartet"][data-sichtbar] :is(.ablaufkarte, .ablaufliste > li) { opacity: 1; transform: none; }
[data-einblenden="wartet"] .verlauf-kurve { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.35, .7, .2, 1); }
[data-einblenden="wartet"][data-sichtbar] .verlauf-kurve { clip-path: inset(0 0 0 0); }
/* Gedruckt wird, was da ist - auch das, wohin noch niemand gescrollt hat. */
@media print {
    [data-einblenden="wartet"] :is(.ablaufkarte, .ablaufliste > li) { opacity: 1; transform: none; }
    [data-einblenden="wartet"] .verlauf-kurve { clip-path: none; }
}

/* ---------- Darstellungen ----------
   Dieselben Inhalte, anders angeordnet. Die Wahl steht als data-darstellung
   am Abschnitt, gesetzt vom Renderer. Die erste Darstellung eines Bausteins
   braucht keine Regel: sie ist das Aussehen von vor 2.1.0.

   Jede Regel haengt zusaetzlich an der inneren Klasse des Bausteins.
   "raster" gibt es beim Logoband, bei der Galerie und bei den Rezensionen -
   ohne die Klasse traefe eine Regel alle drei. */

/* Logoband als Kacheln: alle Logos auf einen Blick, nichts bewegt sich. */
.logoleiste[data-darstellung="raster"] .logoleiste-innen { display: block; }
.logoleiste[data-darstellung="raster"] .logoleiste-titel { margin-bottom: 1.25rem; text-align: center; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste li { display: grid; place-items: center; min-height: 88px; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1rem; background: var(--farbe-papier); }
.logoleiste[data-darstellung="raster"] .logoleiste-liste img { max-height: 44px; transition: filter .2s, opacity .2s; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste li:hover img { filter: none; opacity: 1; }

/* Logoband als ruhige Reihe: mittig, ohne Kacheln, ohne Bewegung. */
.logoleiste[data-darstellung="reihe"] .logoleiste-innen { flex-direction: column; gap: 1rem; text-align: center; }
.logoleiste[data-darstellung="reihe"] .logoleiste-band { width: 100%; }
.logoleiste[data-darstellung="reihe"] .logoleiste-liste { justify-content: center; }

/* Kennzahlen als Kacheln: jede Zahl auf eigener Flaeche, der Wert zuerst. */
[data-darstellung="kacheln"] .kennzahlenleiste { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
[data-darstellung="kacheln"] .kennzahl { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; border-left: 0; border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche[data-darstellung="kacheln"] .kennzahl { background: var(--farbe-papier); box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
.abschnitt--dunkel[data-darstellung="kacheln"] .kennzahl { background: rgb(255 255 255 / 8%); }

/* Kennzahlen gross: die Zahl ist die Botschaft - mittig, mit Trennstrichen. */
[data-darstellung="gross"] .kennzahlen-titel { max-width: none; text-align: center; }
[data-darstellung="gross"] .kennzahlenleiste { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; text-align: center; }
[data-darstellung="gross"] .kennzahl { display: flex; flex-direction: column-reverse; gap: .5rem; border-left: 0; padding: .5rem 1.5rem; }
[data-darstellung="gross"] .kennzahl + .kennzahl { border-left: 1px solid var(--farbe-linie); }
[data-darstellung="gross"] .kennzahl dd { color: var(--farbe-primaer); font-size: clamp(2.6rem, 6vw, 4.2rem); }
.abschnitt--dunkel[data-darstellung="gross"] .kennzahl dd { color: var(--farbe-akzent-hell); }

/* Leistungen als einzelne Karten: Abstand statt Trennlinien. */
[data-darstellung="karten"] .leistungsraster { gap: 1.5rem; background: none; }
[data-darstellung="karten"] .leistung { border-top: 4px solid var(--farbe-akzent); border-radius: var(--radius); box-shadow: var(--schatten); }

/* Leistungen als Liste: eine Zeile je Leistung - Nummer, Titel, Text. */
[data-darstellung="liste"] .leistungsraster { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--farbe-linie); background: none; }
[data-darstellung="liste"] .leistung { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr); align-items: baseline; column-gap: 2rem; min-height: 0; border-bottom: 1px solid var(--farbe-linie); padding: 1.5rem 0; background: none; }
[data-darstellung="liste"] .leistung h3, [data-darstellung="liste"] .leistung p { margin: 0; }
[data-darstellung="liste"] .leistung .textlink { grid-column: 3; margin-top: .6rem; }
.abschnitt--dunkel[data-darstellung="liste"] .leistung p { color: rgb(255 255 255 / 78%); }

/* Galerie als Mosaik: das erste Bild gross, die anderen darum herum. Erst ab
   Tablet-Breite - in einer einspaltigen Galerie gaebe es keine zweite
   Spalte, ueber die der Aufmacher reichen koennte, und das Bildformat soll
   dort wieder gelten. */
@media (min-width: 761px) {
    [data-darstellung="mosaik"] .galerie { grid-auto-flow: dense; }
    [data-darstellung="mosaik"] .galerie figure:first-child { display: flex; flex-direction: column; grid-column: span 2; grid-row: span 2; }
    [data-darstellung="mosaik"] .galerie figure:first-child img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
}

/* Galerie als Band: seitlich blaettern, ein Bild rastet ein. */
[data-darstellung="band"] .galerie { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 32%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }
[data-darstellung="band"] .galerie figure { scroll-snap-align: start; }

/* Fragen in zwei Spalten - fuer lange Listen, die sonst endlos werden. */
[data-darstellung="zweispaltig"] .lesebreite { max-width: none; }
[data-darstellung="zweispaltig"] .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 3rem; border-top: 0; }
[data-darstellung="zweispaltig"] .faq-eintrag:nth-child(-n + 2) { border-top: 1px solid var(--farbe-linie); }

/* Fragen als Karten. */
[data-darstellung="karten"] .faq { display: grid; gap: .75rem; border-top: 0; }
[data-darstellung="karten"] .faq-eintrag { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 0 1.25rem; background: var(--farbe-papier); }
[data-darstellung="karten"] .faq-eintrag[open] { box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
[data-darstellung="karten"] .faq-eintrag summary::after { right: 0; }

/* Rezensionen im Raster: alle auf einmal, nichts zu blaettern. Die
   Blaetterknoepfe bleiben verborgen, weil nichts ueberlaeuft. */
[data-darstellung="raster"] .rezensionen-liste { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }

/* Team kompakt: runde Bilder, mittig, mehr Personen auf einen Blick. */
[data-darstellung="kompakt"] .team { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2rem 1.5rem; text-align: center; }
[data-darstellung="kompakt"] .person-bild img { width: 128px; border-radius: 50%; margin-inline: auto; }
[data-darstellung="kompakt"] .person h3 { font-size: 1.1rem; }
[data-darstellung="kompakt"] .person .pillen { justify-content: center; }

/* Zitat zentriert: ein grosses Anfuehrungszeichen statt der Kante. */
[data-darstellung="zentriert"] .zitat { border-left: 0; padding: 0; text-align: center; }
[data-darstellung="zentriert"] .zitat::before { display: block; height: 3.4rem; content: "\201C"; color: var(--farbe-akzent); font-family: var(--schrift-titel); font-size: 5.5rem; line-height: 1; }
[data-darstellung="zentriert"] .zitat p { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Zitat als Karte - mit eigener Textfarbe, sonst waere es auf dunklem
   Grund weiss auf weiss. */
[data-darstellung="karte"] .zitat { border-left: 0; border-top: 5px solid var(--farbe-akzent); border-radius: var(--radius); padding: 2rem 2.25rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: var(--schatten); }

/* Schnellkontakt ohne Telefonnummer: ein Knopf ueber die ganze Breite. */
.mobil-cta--einzeln { grid-template-columns: 1fr; }

/* ---------- Umbrueche ---------- */
@media (max-width: 960px) {
    .leistungsraster, .kartenraster--3, .kartenraster--4, .galerie--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .argumente-raster, .ablauf-raster, .akzent-raster, .standorte, .gmb-vergleich { grid-template-columns: 1fr; }
    /* minmax(0, ...) statt 1fr: eine 1fr-Spalte ist mindestens so breit wie ihr
       laengstes Wort. "zusammenarbeitet" in Archivo Black (309 px bei 288 px
       Zeile) zog Liste, Knopf und Grafik mit ueber den Rand. */
    .schaubild--kreis { grid-template-columns: minmax(0, 1fr); }
    .gmb-vergleich--gedreht .gmb-widget { order: 0; }
    .einstieg--handy .einstieg-raster { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 2rem; }
    /* Startueberschrift in der schmalen Spalte (768 px: 432 px bei 46 px
       Schrift): ein Wort, laenger als die Zeile, bricht um, statt ueber den
       Rand oder in den Kasten daneben zu laufen. Passt jedes Wort, aendert
       sich nichts. Fuer den Desktop siehe "Startueberschrift ab 501 px"
       weiter unten. */
    :is(.einstieg, .herofoto) h1 { overflow-wrap: break-word; }
    /* Nach Silben ("Umzugsunter-nehmen") nur, wo sich die Trennung begrenzen
       laesst: Woerter ab zwoelf Zeichen, fuenf je Teil. Ohne Grenze trennte
       der Browser auch den Ort ("SEO Agentur Muster-stadt"). Safari kennt die
       Grenze nicht und bricht deshalb nur um. */
    @supports (hyphenate-limit-chars: 12 5 5) {
        :is(.einstieg, .herofoto) h1 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
    }
}

@media (max-width: 500px) {
    /* Startueberschrift auf dem Handy hochkant mit der Breite: calc(8.35vw -
       2.8px), hoechstens 2.4rem - 24 px bei 320, 28.5 bei 375, 33 bei 430,
       38.4 ab 494 px; bisher je nach Variante und Vorlage 33.6 bis 44.8 px,
       nirgends kleiner als hier. So passt ein Stichwort wie "Umzugsunternehmen"
       in jeder Schrift in die Zeile (Archivo Black bei 375 px: 331 von 343 px),
       statt mitten im Wort zu brechen - Safari trennt nicht nach Silben. Ohne
       die Grenze in ch: mit kleinerer Schrift waeren 18ch schmaler als das Wort
       (Iowan: knapp 20ch). Mit .rahmen bzw. .herofoto-inhalt davor gilt es auch
       gegen die h1 einer Vorlage. */
    .einstieg .rahmen .einstieg-text h1, .herofoto .herofoto-inhalt h1 { max-width: none; font-size: min(2.4rem, calc(8.35vw - 2.8px)); }
}

@media (max-width: 760px) {
    body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
    .vorspann { font-size: 1.1rem; }
    /* Unter 345 px schrumpft die Abschnittsueberschrift mit der Breite (bei
       320 px 28 statt 30 px), statt fest bei 1.9rem zu bleiben. Sonst ragt ein
       langes Wort in einer breiten Schrift ueber den Rand ("zusammenarbeitet"
       in Archivo Black: 309 px bei 288 px Zeile). Ein Umbruch mitten im Wort
       waere schlechter als eine etwas kleinere Schrift. Ab 345 px wie bisher. */
    h2 { font-size: min(1.9rem, 8.8vw); }
    .faktenseite h2, .rechtstext h2 { font-size: 1.7rem; }
    .menueknopf { display: inline-flex; }
    .hauptnavigation { position: absolute; top: 74px; right: 0; left: 0; display: none; align-items: stretch; border-bottom: 1px solid var(--farbe-linie); padding: 1rem; background: var(--farbe-papier); flex-direction: column; }
    .hauptnavigation[data-offen="true"] { display: flex; }
    /* Auf dem Handy klappt die Navigation als weisses Feld UNTER der
       Kopfzeile auf - dort gilt die helle Schrift des Bildkopfes nicht mehr,
       sonst stuende Weiss auf Weiss. Wortmarke und Menueknopf bleiben hell,
       die liegen weiter im Bild. */
    body:has(.einstieg--bild) .seitenkopf .hauptnavigation,
    body:has(.einstieg--bild) .seitenkopf .hauptnavigation > a:not(.knopf) { color: var(--farbe-text); }
    /* Auf dem Handy steckt das Megamenue im aufgeklappten Menue: kein
       schwebendes Fenster, sondern eine eingerueckte Liste in einer Spalte. */
    .navi-gruppe { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
    .megamenue { position: static; width: 100%; transform: none; border: 0; border-left: 3px solid var(--farbe-linie); border-radius: 0; padding: .25rem 0 .75rem .9rem; box-shadow: none; }
    .megamenue-liste { grid-template-columns: 1fr; }
    .einstieg { min-height: auto; padding: 4rem 0; background: var(--farbe-flaeche); }
    .einstieg--dunkel { background: var(--farbe-primaer-dunkel); }
    /* minmax(0, ...) statt 1fr: eine 1fr-Spalte ist mindestens so breit wie ihr
       laengstes Wort - bei "Umzugsunternehmen" wurde die Textspalte 449 px
       breit und rechts abgeschnitten. */
    .einstieg-raster { grid-template-columns: minmax(0, 1fr); }
    .zweispaltig, .textbild-zeile, .feldpaar, .kartenraster, .galerie, .fussraster { grid-template-columns: 1fr; }
    /* Kennzahlen im Startbereich zu zweit: vier mal 160 px passen nicht, und
       eine Zahl je Zeile zoege die Leiste unnoetig in die Laenge. */
    .kennzahlenleiste--einstieg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .textbild-zeile--gedreht .textbild-bild { order: 0; }
    .leistungsraster { grid-template-columns: 1fr; }
    .leistungstabelle-rahmen { display: none; }
    .leistungspakete { display: grid; }
    .ortsliste { columns: 1; }
    .rezensionen-liste { grid-auto-columns: 85%; }
    .mobil-cta { display: grid; }
    .dialog-aktionen { display: grid; }

    /* Handy im Startbereich: unter den Text, etwas kleiner. Das Abzeichen
       rutscht nach unten, damit es nicht ueber der Liste liegt. */
    .einstieg--handy .einstieg-raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .einstieg--handy h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
    .handy { width: min(270px, 76vw); }
    .handy-abzeichen { bottom: 16%; padding: .6rem .8rem; }
    .handy-abzeichen strong { font-size: 1.3rem; }
    .handy-portrait { width: 58%; }
    /* Hier ueberdeckt das Handy den unteren Teil des Bildes - der Name
       wandert an den oberen Rand. */
    .handy-portrait-name { top: 0; bottom: auto; padding: 1rem 1rem 3rem 20%; background: linear-gradient(rgb(10 14 16 / 72%), transparent); }
    .kontaktzeile { margin-bottom: 1.25rem; font-size: .82rem; }

    /* Schaubild und Radar: kleiner, die Beschriftung knapper - die Liste
       daneben traegt die Titel ohnehin. */
    /* Ein Wort, laenger als der Knoten ("Unternehmensprofil"), steht mittig
       unter seinem Punkt und ragt nach beiden Seiten gleich weit hinaus. In der
       auto-Spalte wuchs die Spalte mit dem Wort nur nach rechts - am rechten
       Punkt bis ueber den Rand der Seite. */
    .schaubild-knoten { width: 6rem; grid-template-columns: minmax(0, 1fr); transform: translate(-50%, -1.3rem); }
    .schaubild-knoten > span { width: 2.6rem; height: 2.6rem; font-size: .85rem; }
    .schaubild-knoten small { font-size: .72rem; }
    /* Unter 356 px mit der Breite kleiner: im 86-px-Kreis (320 px) brach
       "Anfragen" in breiten Schriften (Archivo Black, Georgia, Sora) mitten
       im Wort (overflow-wrap: anywhere). */
    .schaubild-mitte { font-size: min(.8rem, 3.6vw); }
    .radar { width: min(100%, 360px); }
    .radar-orte li { width: 6.5rem; font-size: .78rem; }
    .radar-orte small { display: none; }

    /* Darstellungen auf dem Handy */
    [data-darstellung="gross"] .kennzahlenleiste { grid-template-columns: 1fr; }
    [data-darstellung="gross"] .kennzahl + .kennzahl { border-left: 0; border-top: 1px solid var(--farbe-linie); padding-top: 1.25rem; }
    [data-darstellung="liste"] .leistung { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .5rem; }
    [data-darstellung="liste"] .leistung p, [data-darstellung="liste"] .leistung .textlink { grid-column: 2; }
    [data-darstellung="band"] .galerie { grid-auto-columns: 82%; }
    [data-darstellung="zweispaltig"] .faq { grid-template-columns: 1fr; }
    [data-darstellung="zweispaltig"] .faq-eintrag:nth-child(2) { border-top: 0; }
}

/* Startueberschrift ab 501 px (Tablet, Handy quer, Desktop). Die Grenze von
   18ch (Handy-Startbereich 15ch) ist in Schriften mit schmalen Ziffern
   schmaler als ein langes Stichwort (Iowan: 9em, "Umzugsunternehmen" 9.9em)
   und brach es mitten im Wort oder liess es ueberstehen. Hier gilt mindestens
   12em - mehr braucht das Wort in keiner Schrift (Archivo Black: 11.6em);
   breite Schriften behalten 18ch. Der mittige Startbereich hat keine Grenze,
   die Blog-Vorlage ihre eigene. Bis 500 px gilt die Regel fuer das Handy. */
@media (min-width: 501px) {
    :is(.einstieg, .herofoto) h1 { max-width: max(18ch, 12em); }
    .einstieg--handy h1 { max-width: max(15ch, 12em); }
    .einstieg-text--mittig h1 { max-width: none; }
}

/* Einspaltig (bis 760 px) ist der Handy-Startbereich bis 569 px zu gross fuer
   ein solches Wort in einer breiten Schrift (Archivo Black bei 501 px: 520 px
   bei 469 px Zeile) - dort wie auf dem Handy hochkant mit der Breite, nie
   groesser als bisher (2.8rem). */
@media (min-width: 501px) and (max-width: 760px) {
    .einstieg--handy h1 { font-size: min(2.8rem, calc(8.35vw - 2.8px)); }
}

/* Zweispaltig (ab 761 px) ist die Textspalte fuer die Schrift zu schmal
   (761 px: 426 px Spalte, das Wort 530 px bei 45.7 px Schrift; 1366 px: 731 px
   Spalte, das Wort 951 px bei 82 px). Die Groesse folgt deshalb der Spalte:
   8.35cqi, also 8.35 % ihrer Breite - so passt ein Wort von 11.6em. Das ist
   ueberall kleiner als bisher (6vw bis 5.2rem, Handy-Start 5vw, Vorlagen ab
   5.2vw bzw. 4rem): bei 768 px 36 statt 46, bei 960 px 48 statt 57.6, bei
   1366 px 61 statt 82 px. */
@media (min-width: 761px) {
    .einstieg-raster > .einstieg-text { container-type: inline-size; }
    .einstieg .einstieg-raster > .einstieg-text h1 { font-size: 8.35cqi; }
}

/* Auf dem Desktop (ab 961 px) sind auch der mittige Startbereich (Spalte bis
   820 px) und der mit Foto (48 bzw. 54rem) zu schmal fuer ein solches Wort bei
   bis zu 83.2 px (Archivo Black: 966 von 820 px). Auch dort folgt die Groesse
   der Spalte, hoechstens wie bisher: erst ab etwa 1070 px (Foto) bzw. 1140 px
   (mittig) wird sie kleiner, auf hoechstens 64 bis 72 px; eine Vorlage mit
   eigener Groesse behaelt sie. Im zweispaltigen Startbereich bricht ein noch
   laengeres Wort als letzte Sicherung um, statt in den Kasten daneben zu
   laufen - ohne Silbentrennung, die hier Zeilen aendern wuerde, die heute
   passen. */
@media (min-width: 961px) {
    :is(.einstieg-text--mittig, .herofoto-inhalt) { container-type: inline-size; }
    :is(.einstieg-text--mittig, .herofoto) h1 { font-size: min(clamp(2.5rem, 6vw, 5.2rem), 8.35cqi); }
    .einstieg-raster > .einstieg-text h1 { overflow-wrap: break-word; }
}

/* Angehalten (Knopf) oder ausser Sicht (website.js): alles in der Grafik
   steht - an der Stelle, an der es gerade war. Am Ende des Stilblatts, damit
   es jede Animation darueber ueberstimmt. */
[data-bewegung][data-angehalten], [data-bewegung][data-angehalten] *, [data-bewegung][data-angehalten] *::before, [data-bewegung][data-angehalten] *::after,
[data-bewegung][data-ruht], [data-bewegung][data-ruht] *, [data-bewegung][data-ruht] *::before, [data-bewegung][data-ruht] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }

    /* Nichts bewegt sich - also braucht es keinen Knopf zum Anhalten. */
    .bewegung-pause { display: none !important; }

    /* Die Laufschrift steht als umbrechende Reihe, ohne die Wiederholungen,
       die nur fuer das Laufen da waren. */
    .laufschrift--laufend .laufschrift-band { -webkit-mask-image: none; mask-image: none; }
    .laufschrift--laufend .laufschrift-spur { width: auto; }
    .laufschrift--laufend .laufschrift-liste { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: .5rem; padding: 0 1rem; }
    .laufschrift--laufend .laufschrift-liste[aria-hidden], .laufschrift--laufend .laufschrift-liste li[aria-hidden] { display: none; }
    .laufschrift--laufend .laufschrift-liste li:is(:last-child, :has(+ li[aria-hidden]))::after { display: none; }
}

/* ============ Bausteine fuer ganze Erscheinungsbilder (2.3.0) ============
   Entstanden fuer die Local SEO Agentur Vorlage, aber an keine gebunden: die
   Regeln arbeiten mit den Tokens des Stils. Das Stilblatt einer Vorlage
   ueberschreibt nur, was ihr eigenes Aussehen ausmacht. */

/* ---------- Gemeinsames ---------- */
.abschnittskopf--mitte { margin-inline: auto; text-align: center; }
.abschnittskopf--mitte h2, .abschnittskopf--mitte .vorspann { margin-inline: auto; }
.knopf-hell { color: var(--farbe-text); background: #fff; }
.knopf-hell:hover { color: var(--farbe-text); background: var(--farbe-flaeche); }
.knopf .symbol { width: 1.05em; height: 1.05em; flex: 0 0 auto; margin-left: .55em; }
.knopf .symbol-telefon { margin: 0 .55em 0 0; }
.pillen--dunkel li { border-color: transparent; color: #fff; background: var(--farbe-primaer-dunkel); }
.pillen--akzent li { border-color: transparent; color: var(--farbe-text); background: var(--farbe-akzent-hell); font-weight: 700; }
.hakenliste { display: grid; gap: .8rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.hakenliste li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .65rem; align-items: start; }
.hakenliste .symbol { width: 1.35rem; height: 1.35rem; margin-top: .15rem; color: var(--farbe-akzent); }
/* Hintergrundgrafik unter dem Inhalt eines Abschnitts (hintergrundgrafik() in
   bausteine.php): Lage per Klasse, Bild und Schleier als Inline-Style. Der
   Schleier ist ein ::before in der Farbe des Abschnitts zwischen Grafik und
   Inhalt, deshalb liegt der Inhalt eine Ebene hoeher. Ein Platzhalter (die
   schraffierte Flaeche einer Vorlage) bekommt keinen Schleier - man soll sehen,
   dass hier noch etwas hochzuladen ist. */
.abschnitt--grafik { position: relative; background-repeat: no-repeat; background-position: center; background-size: contain; }
.abschnitt--grafik > * { position: relative; z-index: 1; }
.abschnitt--grafik::before { position: absolute; z-index: 0; inset: 0; content: ""; background: color-mix(in srgb, var(--abschnitt-grund, var(--farbe-papier)) var(--grafik-schleier, 0%), transparent); pointer-events: none; }
.abschnitt--grafik-oben-rechts { background-position: top right; }
.abschnitt--grafik-unten-mitte { background-position: bottom center; }
.abschnitt--grafik-deckend { background-size: cover; }
.abschnitt--grafik-platzhalter::before { display: none; }
/* Graustufen: Farbton und Saettigung kommen aus der (unbunten) Grundfarbe, die
   Helligkeit aus dem Foto - der Kontrast zum Text bleibt derselbe wie farbig. */
.abschnitt--grafik-grau { background-color: var(--abschnitt-grund, var(--farbe-papier)); background-blend-mode: luminosity; }
.abschnitt--flaeche { --abschnitt-grund: var(--farbe-flaeche); }
.abschnitt--dunkel { --abschnitt-grund: var(--farbe-primaer-dunkel); }

/* ---------- Schieber: Band zum seitlichen Blaettern ---------- */
.schieber { position: relative; }
.schieber-spur { display: grid; grid-auto-flow: column; gap: 1.5rem; margin: 0; padding: .5rem max((100% - var(--rahmen)) / 2, 1rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.schieber-spur::-webkit-scrollbar { display: none; }
.schieber-spur > * { scroll-snap-align: start; }
.schieber-steuerung { display: flex; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.schieber-knopf { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--farbe-linie); border-radius: 999px; color: var(--farbe-text); background: var(--farbe-papier); cursor: pointer; }
.schieber-knopf:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.abschnitt--dunkel .schieber-knopf { border-color: rgb(255 255 255 / 35%); color: #fff; background: transparent; }

/* ---------- Startbereich mit Foto ---------- */
.herofoto { position: relative; display: flex; align-items: flex-end; min-height: clamp(480px, 76vh, 820px); padding: clamp(6rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 4.5rem); color: #fff; background: var(--farbe-primaer-dunkel); isolation: isolate; }
.herofoto-bild { position: absolute; z-index: -2; inset: 0; }
.herofoto-bild img { width: 100%; height: 100%; object-fit: cover; }
.herofoto::after { position: absolute; z-index: -1; inset: 0; content: ""; }
.herofoto--leicht::after { background: linear-gradient(to top, rgb(10 16 24 / 62%), rgb(10 16 24 / 18%)); }
.herofoto--mittel::after { background: linear-gradient(to top, rgb(10 16 24 / 78%), rgb(10 16 24 / 36%)); }
.herofoto--stark::after { background: linear-gradient(to top, rgb(10 16 24 / 88%), rgb(10 16 24 / 58%)); }
.herofoto--ohne-bild::after { background: none; }
/* min-width: 0 - als Flex-Kind waere der Inhalt sonst mindestens so breit wie
   sein laengstes Wort und schoebe die ganze Seite auf dem Handy zur Seite. */
.herofoto-inhalt { min-width: 0; max-width: 48rem; }
.herofoto--mitte .herofoto-inhalt { max-width: 54rem; margin-inline: auto; text-align: center; }
.herofoto--mitte .vorspann, .herofoto--mitte h1 { margin-inline: auto; }
.herofoto--mitte .aktionsgruppe { justify-content: center; }
.herofoto h1 { color: #fff; }
.herofoto-ort { display: block; }
.herofoto .kicker { color: var(--farbe-akzent-hell); }
.herofoto .vorspann { color: rgb(255 255 255 / 86%); }

/* ---------- Versprechen mit Kernleistungen ---------- */
.versprechen-kopf { max-width: 62rem; margin-inline: auto; text-align: center; }
.versprechen-kopf h2 { max-width: none; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.versprechen-kopf .vorspann { margin-inline: auto; }
.versprechen-zwischentitel { margin: 3rem 0 1.5rem; color: var(--farbe-ruhig); font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.versprechen-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.versprechen-spalten h3 { margin-bottom: .4rem; }
.versprechen-spalten p { margin: 0; color: var(--farbe-ruhig); }

/* ---------- Leistungen als Kacheln ---------- */
.leistungskacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.leistungskachel a { display: grid; height: 100%; align-content: start; gap: .6rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.75rem 1.5rem; color: var(--farbe-text); background: var(--farbe-papier); text-decoration: none; }
.leistungskachel a:hover { border-color: var(--farbe-primaer); box-shadow: var(--schatten); }
.leistungskachel-symbol img { width: 56px; height: 56px; }
.leistungskachel-titel { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 700; }
.leistungskachel-stichworte { color: var(--farbe-ruhig); font-size: .9rem; }
.leistungskachel--dunkel a { border-color: transparent; color: #fff; background: var(--farbe-primaer-dunkel); }
.leistungskachel--dunkel .leistungskachel-stichworte { color: rgb(255 255 255 / 75%); }
.abschnitt--flaeche .leistungskachel:not(.leistungskachel--dunkel) a { background: var(--farbe-papier); }

/* ---------- Plattformen ---------- */
.plattformen { position: relative; overflow: hidden; }
.plattformkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.plattformkarte { display: grid; gap: .75rem; align-content: start; justify-items: center; border-radius: var(--radius); padding: 1.75rem 1.25rem; background: rgb(255 255 255 / 8%); text-align: center; }
.abschnitt:not(.abschnitt--dunkel) .plattformkarte { border: 1px solid var(--farbe-linie); background: var(--farbe-papier); }
.plattformkarte-logo img { max-height: 38px; width: auto; }
.plattformkarte-name { margin: 0; font-family: var(--schrift-titel); font-size: 1.15rem; }
.plattformkarte-text { margin: 0; font-size: .92rem; opacity: .8; }
.plattformen-fussbild { margin-top: clamp(2.5rem, 6vw, 4rem); opacity: .28; }
.plattformen-fussbild img { display: block; width: 100%; }

/* ---------- Vorteile mit Grafik ---------- */
.vorteile-kopf { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.vorteile-grafik { position: relative; }
.vorteile-grafik > img { display: block; width: 100%; border-radius: var(--radius); }
.vorteile-zeichen { position: absolute; right: -1rem; bottom: -1rem; width: clamp(92px, 18%, 148px); animation: schweben 6s ease-in-out infinite; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.vorteilskarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.vorteilskarte { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 2rem 1.75rem; background: var(--farbe-papier); }
.vorteilskarte h3 { margin-bottom: .5rem; }
.vorteilskarte p { margin: 0; color: var(--farbe-ruhig); }
.vorteilskarte--dunkel { border-color: transparent; color: #fff; background: var(--farbe-primaer-dunkel); }
.vorteilskarte--dunkel p { color: rgb(255 255 255 / 78%); }

/* ---------- Bildband ---------- */
.bildband-hinweis { max-width: 62ch; color: var(--farbe-ruhig); }
.bildband-spur { grid-auto-columns: min(520px, 78vw); }
.bildband-eintrag figure { margin: 0; }
.bildband-eintrag img { display: block; width: 100%; border-radius: var(--radius); object-fit: cover; }
.bildband-spur--16-10 img { aspect-ratio: 16 / 10; }
.bildband-spur--3-2 img { aspect-ratio: 3 / 2; }
.bildband-spur--4-3 img { aspect-ratio: 4 / 3; }
.bildband-eintrag figcaption { margin-top: .75rem; color: var(--farbe-ruhig); font-size: .9rem; }

/* ---------- Kundenstimmen ---------- */
.stimmenspur { grid-auto-columns: min(420px, 84vw); align-items: stretch; }
.stimmenkarte { display: grid; align-content: start; gap: .85rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 2rem 1.75rem; background: var(--farbe-papier); }
.stimmenkarte-logo { min-height: 42px; display: flex; align-items: center; }
.stimmenkarte-logo img { max-height: 42px; width: auto; }
.stimmenkarte-firma { margin: 0; font-family: var(--schrift-titel); font-size: 1.2rem; }
.stimmenkarte .pillen { margin-top: 0; }
.stimmenkarte-zitat { margin: .5rem 0 0; font-size: 1.05rem; }
.stimmenkarte-person { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; font-weight: 700; }

/* ---------- Team, Werte, Stellen ---------- */
.teamwerte-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.teamwerte-spalte { position: sticky; top: 6rem; }
.teamwerte-inhalt { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.teamportraits { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.teamportraits img { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.teamportrait-name { margin: .75rem 0 0; font-weight: 700; }
.teamportrait-rolle { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; }
.wertekarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.wertekarten h4 { margin: 0 0 .4rem; font-family: var(--schrift-titel); font-size: 1.1rem; }
.wertekarten p { margin: 0; color: var(--farbe-ruhig); }
.stellenliste { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.stelle { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.stelle-titel { margin: 0; font-weight: 700; }
.stelle-ort { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; }

/* ---------- Regionale Tipps ---------- */
.tipps-kopf { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: end; justify-content: space-between; margin-bottom: clamp(2rem, 5vw, 3rem); }
.tipps-titel { margin-bottom: 1.25rem; }
.tipps-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .75rem 2rem; }
.tipp { border-bottom: 1px solid var(--farbe-linie); }
.tipp summary { padding: 1rem 0; font-weight: 700; cursor: pointer; }
.tipp summary::marker { color: var(--farbe-akzent); }
.tipp .fliesstext { padding-bottom: 1rem; }
.linkkarte { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-radius: var(--radius); padding: 2rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche .linkkarte { background: var(--farbe-papier); }
.linkkarte h3 { margin-bottom: .35rem; }
.linkkarte-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.linkkarte-liste a { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; }
.linkkarte-liste .symbol { width: 1rem; height: 1rem; }

/* ---------- Kontaktbereich ---------- */
.kontaktbereich-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kontaktkarte { position: sticky; top: 6rem; border-radius: var(--radius); padding: 2.25rem 2rem; color: #fff; background: var(--farbe-primaer-dunkel); }
.kontaktkarte-titel { margin: 0 0 .35rem; font-family: var(--schrift-titel); font-size: 1.5rem; }
.kontaktkarte-text { margin: 0; color: rgb(255 255 255 / 78%); }
.kontaktkarte .knopf { width: 100%; }
.kontaktkarte .mikrotext { margin: 1.25rem 0 0; color: rgb(255 255 255 / 65%); }
.kontaktbereich-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin: 2.5rem 0; }
.kontaktbereich-daten h3 { font-size: 1.05rem; }
.zeitenliste { margin: 0; }
.zeitenliste > div { display: flex; gap: 1rem; justify-content: space-between; border-bottom: 1px solid var(--farbe-linie); padding: .5rem 0; }
.zeitenliste dt { color: var(--farbe-ruhig); }
.zeitenliste dd { margin: 0; font-weight: 700; }
.kontaktbereich .kanal { display: flex; gap: .6rem; align-items: center; }
.kontaktbereich .kanal .symbol { width: 1.15rem; height: 1.15rem; color: var(--farbe-primaer); }
.kontaktbereich-formular { border-top: 1px solid var(--farbe-linie); padding-top: 2.5rem; }

/* ---------- Anfahrt ---------- */
.anfahrt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.anfahrt-anschrift { display: flex; gap: .75rem; align-items: start; font-size: 1.05rem; }
.anfahrt-anschrift .symbol { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin-top: .2rem; color: var(--farbe-akzent); }
.anfahrt-bild { margin-top: 2rem; }
.anfahrt-bild img { display: block; width: 100%; border-radius: var(--radius); }

@media (max-width: 960px) {
    .vorteile-kopf, .teamwerte-raster, .kontaktbereich-raster, .anfahrt-raster { grid-template-columns: 1fr; }
    .teamwerte-spalte, .kontaktkarte { position: static; }
}

@media (max-width: 760px) {
    .herofoto { min-height: 0; }
    /* Kacheln mindestens 12.5rem breit (166 px Text): ein Titelwort wie
       "Firmenschulung" (bis 161 px) passt hinein. Mit 160 px stand es in fast
       jedem Stil ueber den Kachelrand, in Archivo Black bei 375 px ueber den
       Bildschirm. Unter 452 px deshalb eine Spalte. */
    .leistungskacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
    .leistungskachel a { padding: 1.25rem 1rem; }
    .tipps-liste { grid-template-columns: 1fr; }
    .stelle { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    /* Der Selbstlauf des Bandes startet ohnehin nicht (website.js); die
       schwebende Grafik haelt hier an. */
    .vorteile-zeichen { animation: none !important; }
    .schieber-spur { scroll-behavior: auto; }
}

/* ============ Bausteine der Landingpage-Vorlage ============
   Umgesetzt aus der KI-Vorlage "Landingpage". Wie die Bausteine oben an keine
   Vorlage gebunden: die Regeln arbeiten mit den Tokens des Stils. */

/* ---------- Preisstufen ---------- */
.preisstufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; align-items: stretch; margin: 0; padding: 0; list-style: none; }
/* Eigene Textfarbe: auf einem dunklen Abschnitt bleibt die Karte hell und lesbar. */
.preisstufe { position: relative; display: flex; flex-direction: column; gap: .9rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 2.25rem 1.75rem 1.75rem; color: var(--farbe-text); background: var(--farbe-papier); }
.preisstufe--hervorgehoben { border-color: var(--farbe-primaer); box-shadow: 0 0 0 1px var(--farbe-primaer), var(--schatten); }
.preisstufe-titel { margin: 0; font-size: 1.35rem; text-align: center; }
/* Das Faehnchen steht im Markup hinter dem Titel - ein Vorleseprogramm liest
   beides zusammen - und sitzt optisch auf der Oberkante der Karte. Grund in
   der Hausfarbe, weil weisse Schrift auf manchem Akzent zu blass waere. */
.preisstufe-faehnchen { position: absolute; top: 0; left: 50%; margin: 0; color: var(--farbe-auf-primaer); background: var(--farbe-primaer); transform: translate(-50%, -50%); white-space: nowrap; }
.preisstufe-beschreibung { margin: 0; color: var(--farbe-ruhig); text-align: center; }
.preisstufe-preis { margin: .25rem 0 0; text-align: center; }
.preisstufe-preis strong { display: block; font-family: var(--schrift-titel); font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.preisstufe-preis small { display: block; margin-top: .35rem; font-size: .88rem; }
.preisstufe-merkmale { flex: 1; align-content: start; margin: .5rem 0 .25rem; border-top: 1px solid var(--farbe-linie); padding-top: 1.25rem; }
.preisstufe-merkmale .symbol { color: var(--farbe-erfolg); }
.preisstufe .knopf { margin-top: auto; }
.preisbereich-fussnote { text-align: center; }
/* Auf dunklem Grund erbte die Karte sonst weisse Nebentexte und weisse
   Zweitknoepfe - weiss auf weiss. */
.abschnitt--dunkel .preisstufe small, .abschnitt--dunkel .preisstufe-beschreibung { color: var(--farbe-ruhig); }
.abschnitt--dunkel .preisstufe .knopf-sekundaer { border-color: var(--farbe-primaer); color: var(--farbe-primaer); background: transparent; }
.abschnitt--dunkel .preisstufe .knopf-sekundaer:hover { color: #fff; background: var(--farbe-primaer); }
.abschnitt--dunkel .preisstufe--hervorgehoben { border-color: var(--farbe-akzent); box-shadow: 0 0 0 1px var(--farbe-akzent), var(--schatten); }

/* ============ Bausteine der Portfolio-Vorlage ============
   Umgesetzt aus der KI-Vorlage "Portfolio": Arbeiten mit Filter,
   Faehigkeiten, Werdegang. An keine Vorlage gebunden - die Regeln arbeiten
   mit den Tokens des Stils. */

/* ---------- Arbeiten im Raster ---------- */
.projektraster-alle { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.projektraster-alle .symbol { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
/* Der Filter steht mit hidden im Markup und erscheint erst mit Skript - ohne
   die Regel fuer [hidden] ueberstimmte display das Attribut. */
.projektfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.75rem 0 2rem; }
.projektfilter[hidden] { display: none; }
.projektfilter-knopf { min-height: 40px; border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .4rem 1rem; color: var(--farbe-text); background: transparent; font: inherit; font-size: .92rem; cursor: pointer; }
.projektfilter-knopf:hover { border-color: var(--farbe-text); }
.projektfilter-knopf[aria-pressed="true"] { border-color: var(--farbe-text); color: var(--farbe-papier); background: var(--farbe-text); }
.projektliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.projektliste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Eigene Textfarbe: auf einem dunklen Abschnitt bleibt die Karte hell. */
.projekt { position: relative; display: flex; flex-direction: column; border: 1px solid var(--farbe-linie); border-radius: var(--radius); overflow: hidden; color: var(--farbe-text); background: var(--farbe-papier); }
/* Ausgefiltert. Staerker als jede Darstellung, die display setzt. */
.projektraster .projektliste .projekt[hidden] { display: none; }
.projekt-bild { overflow: hidden; background: var(--farbe-flaeche); }
.projekt-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.projektliste--3-2 .projekt-bild img { aspect-ratio: 3 / 2; }
.projektliste--1-1 .projekt-bild img { aspect-ratio: 1; }
.projektliste--4-5 .projekt-bild img { aspect-ratio: 4 / 5; }
.projekt--verweis:hover { box-shadow: var(--schatten); }
.projekt--verweis:hover .projekt-bild img { transform: scale(1.03); }
.projekt-text { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.4rem 1.5rem 1.6rem; }
.projekt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; color: var(--farbe-ruhig); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
/* "Beispiel" gestrichelt umrandet - das Zeichen fuer einen Platzhalter. */
.projekt-beispiel { border: 1px dashed currentColor; border-radius: 999px; padding: 0 .55rem; color: var(--farbe-text); font-weight: 700; }
.projekt-jahr { font-variant-numeric: tabular-nums; }
.projekt-titel { margin: 0; font-size: 1.3rem; line-height: 1.25; }
/* Der Titel ist der Verweis; seine Flaeche legt sich ueber die ganze Karte. */
.projekt-verweis { color: inherit; text-decoration: none; }
.projekt-verweis::after { position: absolute; z-index: 1; inset: 0; border-radius: var(--radius); content: ""; }
.projekt-verweis:focus-visible { outline: none; }
.projekt-verweis:focus-visible::after { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; }
.projekt--verweis:hover .projekt-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.projekt-beschreibung { margin: 0; color: var(--farbe-ruhig); font-size: .98rem; }
.projekt-stichworte { gap: .4rem; margin: .35rem 0 0; }
.projekt-stichworte li { padding: .1rem .65rem; font-size: .8rem; }
.projekt-mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; color: var(--farbe-primaer); font-size: .92rem; font-weight: 700; }
.projekt-mehr .symbol { width: 1em; height: 1em; flex: 0 0 auto; transition: transform .2s ease; }
.projekt--verweis:hover .projekt-mehr .symbol { transform: translateX(3px); }
.projektraster-hinweis { margin-top: 2rem; }
.abschnitt--dunkel .projekt { border-color: transparent; }
.abschnitt--dunkel .projekt-verweis { color: inherit; }
.abschnitt--dunkel .projektfilter-knopf { border-color: rgb(255 255 255 / 35%); color: #fff; }
.abschnitt--dunkel .projektfilter-knopf[aria-pressed="true"] { border-color: #fff; color: var(--farbe-primaer-dunkel); background: #fff; }

/* Grosse Bilder: die Arbeit steht vorn, der Text knapp darunter, ohne Kartenrahmen. */
.projektraster[data-darstellung="kacheln"] .projektliste { gap: 3rem 2rem; }
.projektraster[data-darstellung="kacheln"] .projekt { overflow: visible; border: 0; border-radius: 0; color: inherit; background: none; }
.projektraster[data-darstellung="kacheln"] .projekt--verweis:hover { box-shadow: none; }
.projektraster[data-darstellung="kacheln"] .projekt-bild { border-radius: var(--radius); }
.projektraster[data-darstellung="kacheln"] .projekt-text { gap: .4rem; padding: 1.1rem 0 0; }
.abschnitt--dunkel[data-darstellung="kacheln"] :is(.projekt-meta, .projekt-beschreibung) { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel[data-darstellung="kacheln"] .projekt-beispiel { color: #fff; }

/* Werkliste: eine Zeile je Arbeit, das Bild klein am rechten Rand. */
.projektraster[data-darstellung="liste"] .projektliste { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--farbe-linie); }
.projektraster[data-darstellung="liste"] .projekt { display: grid; grid-template-columns: minmax(0, 1fr) clamp(7rem, 16vw, 11rem); gap: 1.5rem; align-items: center; overflow: visible; border: 0; border-bottom: 1px solid var(--farbe-linie); border-radius: 0; padding: 1.5rem 0; color: inherit; background: none; }
.projektraster[data-darstellung="liste"] .projekt--ohne-bild { grid-template-columns: 1fr; }
.projektraster[data-darstellung="liste"] .projekt--verweis:hover { box-shadow: none; }
.projektraster[data-darstellung="liste"] .projekt-bild { order: 2; border-radius: var(--radius); }
.projektraster[data-darstellung="liste"] .projekt-text { padding: 0; }
.projektraster[data-darstellung="liste"] .projekt-titel { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.projektraster[data-darstellung="liste"] .projekt-verweis::after { border-radius: 0; }
.abschnitt--dunkel[data-darstellung="liste"] :is(.projektliste, .projekt) { border-color: rgb(255 255 255 / 20%); }
.abschnitt--dunkel[data-darstellung="liste"] :is(.projekt-meta, .projekt-beschreibung) { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel[data-darstellung="liste"] .projekt-beispiel { color: #fff; }

/* ---------- Faehigkeiten in Gruppen ---------- */
.faehigkeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 2.5rem 2rem; }
.faehigkeit { border-top: 1px solid var(--farbe-linie); padding-top: 1.25rem; }
.faehigkeit-titel { margin: 0 0 .5rem; font-size: 1.15rem; }
.faehigkeit-text { margin: 0; color: var(--farbe-ruhig); font-size: .95rem; }
.faehigkeit-stichworte { margin-top: 1rem; }
.abschnitt--dunkel .faehigkeit { border-top-color: rgb(255 255 255 / 25%); }
.abschnitt--dunkel .faehigkeit-text { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel .faehigkeit-stichworte li { border-color: rgb(255 255 255 / 35%); }
/* Mittig: eine Wolke aus Stichworten wie in der KI-Vorlage, die Gruppen untereinander. */
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeiten { grid-template-columns: minmax(0, 860px); justify-content: center; gap: 2.25rem; text-align: center; }
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeit { border-top: 0; padding-top: 0; }
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeit-titel { color: var(--farbe-ruhig); font-family: var(--schrift-text); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeit-text { max-width: 60ch; margin-inline: auto; }
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeit-stichworte { justify-content: center; }
.faehigkeiten-bereich[data-darstellung="wolke"] .faehigkeit-stichworte li { border-color: transparent; padding: .45rem 1.1rem; background: var(--farbe-flaeche); font-size: .95rem; }
.abschnitt--flaeche[data-darstellung="wolke"] .faehigkeit-stichworte li { background: var(--farbe-papier); }
.abschnitt--dunkel[data-darstellung="wolke"] .faehigkeit-titel { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel[data-darstellung="wolke"] .faehigkeit-stichworte li { background: rgb(255 255 255 / 10%); }

/* ---------- Werdegang als Zeitleiste ---------- */
.werdegang { position: relative; display: grid; gap: 2.25rem; max-width: 900px; margin: 0; padding: 0; list-style: none; }
/* Die Linie laeuft zwischen Zeitraum und Inhalt, jeder Punkt sitzt auf ihr. */
.werdegang::before { position: absolute; top: .5rem; bottom: .5rem; left: 10.25rem; width: 1px; content: ""; background: var(--farbe-linie); }
.station { position: relative; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; }
.station::before { position: absolute; top: .45rem; left: calc(10.25rem - 5px); width: 11px; height: 11px; border: 2px solid var(--farbe-akzent); border-radius: 50%; content: ""; background: var(--farbe-papier); }
.station-zeitraum { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.station-titel { margin: 0 0 .2rem; font-size: 1.2rem; }
.station-ort { margin: 0; color: var(--farbe-primaer); font-size: .95rem; font-weight: 700; }
.station-text { margin: .5rem 0 0; color: var(--farbe-ruhig); }
.abschnitt--flaeche .station::before { background: var(--farbe-flaeche); }
.abschnitt--dunkel .werdegang::before { background: rgb(255 255 255 / 25%); }
.abschnitt--dunkel .station::before { border-color: var(--farbe-akzent-hell); background: var(--farbe-primaer-dunkel); }
.abschnitt--dunkel :is(.station-zeitraum, .station-text) { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel .station-ort { color: var(--farbe-akzent-hell); }
/* Ruhige Liste: Zeilen mit Trennlinie, der Text rechts neben Titel und Ort. */
.werdegang-bereich[data-darstellung="liste"] .werdegang { gap: 0; max-width: none; border-top: 1px solid var(--farbe-linie); }
.werdegang-bereich[data-darstellung="liste"] :is(.werdegang, .station)::before { display: none; }
.werdegang-bereich[data-darstellung="liste"] .station { gap: 2rem; border-bottom: 1px solid var(--farbe-linie); padding: 1.25rem 0; }
.werdegang-bereich[data-darstellung="liste"] .station-zeitraum { text-align: left; }
.werdegang-bereich[data-darstellung="liste"] .station-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .25rem 2rem; align-content: start; }
.werdegang-bereich[data-darstellung="liste"] .station-text { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* Einblenden wie beim Vorgehen: "wartet" setzt website.js nur mit Skript und
   ohne "Bewegung reduzieren". Die Verzoegerung waechst nur bis zur achten
   Station, damit eine lange Liste nicht auf sich warten laesst. */
[data-einblenden="wartet"] .station { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(min(var(--i, 0), 8) * 120ms); }
[data-einblenden="wartet"][data-sichtbar] .station { opacity: 1; transform: none; }
@media print {
    [data-einblenden="wartet"] .station { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
    .projektliste--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .projektliste--2, .projektliste--3 { grid-template-columns: 1fr; }
    .projektraster[data-darstellung="liste"] .projekt { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 1rem; }
    .werdegang::before { left: .3rem; }
    .station { grid-template-columns: 1fr; gap: .35rem; padding-left: 1.75rem; }
    .station::before { top: .35rem; left: calc(.3rem - 5px); }
    .station-zeitraum { text-align: left; }
    .werdegang-bereich[data-darstellung="liste"] .station { padding-left: 0; }
    .werdegang-bereich[data-darstellung="liste"] .station-inhalt { grid-template-columns: 1fr; }
    .werdegang-bereich[data-darstellung="liste"] .station-text { grid-column: auto; grid-row: auto; margin-top: .4rem; }
}

/* ============ Bausteine der Onlineshop-Vorlage ============
   Umgesetzt aus der KI-Vorlage "Onlineshop" als Schaufenster: Produktkopf,
   Produktraster, Highlights, Kategorien und Vorteilsleiste. Wie die Bausteine
   oben an keine Vorlage gebunden: die Regeln arbeiten mit den Tokens des
   Stils. Karten tragen eigene Farben, damit sie auch auf dunklem Grund lesbar
   bleiben. */

/* ---------- Vorteilsleiste ---------- */
section.vorteilsleiste { border-bottom: 1px solid var(--farbe-linie); padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.vorteilsleiste-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.vorteilsleiste-eintrag { display: flex; gap: .85rem; align-items: center; }
.vorteilsleiste-symbol { display: inline-grid; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius); color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 10%, transparent); }
.vorteilsleiste-symbol .symbol { width: 1.35rem; height: 1.35rem; }
.vorteilsleiste-text { display: grid; min-width: 0; line-height: 1.35; }
.vorteilsleiste-text strong { font-size: .95rem; }
.vorteilsleiste-text span { color: var(--farbe-ruhig); font-size: .86rem; }
.abschnitt--dunkel .vorteilsleiste-symbol { color: var(--farbe-akzent-hell); background: rgb(255 255 255 / 10%); }
.abschnitt--dunkel .vorteilsleiste-text span { color: rgb(255 255 255 / 75%); }

/* ---------- Produktkarten (Raster und Highlights) ---------- */
.produktraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.produktkarte { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--farbe-linie); border-radius: var(--radius); color: var(--farbe-text); background: var(--farbe-papier); transition: border-color .2s ease, box-shadow .2s ease; }
.produktkarte:hover { border-color: var(--farbe-primaer); box-shadow: var(--schatten); }
.produktkarte-bild { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--farbe-flaeche); }
.produktkarte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.produktkarte:hover .produktkarte-bild img { transform: scale(1.04); }
.produktkarte-ohne-bild, .kategoriekachel-ohne-bild { display: grid; width: 100%; height: 100%; place-items: center; color: var(--farbe-ruhig); }
.produktkarte-ohne-bild .symbol, .kategoriekachel-ohne-bild .symbol { width: 3rem; height: 3rem; opacity: .5; }
.produktkarte-etiketten { position: absolute; z-index: 1; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.produktetikett { display: inline-block; border-radius: 999px; padding: .2rem .65rem; color: #fff; background: var(--farbe-primaer); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.produktetikett--beispiel { color: var(--farbe-text); background: var(--farbe-akzent-hell); }
.produktkarte-text { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.2rem; }
.produktkarte-kategorie { margin: 0; color: var(--farbe-ruhig); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.produktkarte-name { margin: 0; font-size: 1.1rem; line-height: 1.3; overflow-wrap: break-word; }
.produktkarte-name a { color: inherit; text-decoration: none; }
/* Der Verweis liegt auf dem Namen und spannt sich ueber die ganze Karte; der
   Fokusrahmen sitzt deshalb auf der Flaeche, nicht auf dem Wort. */
.produktkarte-name a::after, .kategoriekachel-name a::after { position: absolute; z-index: 2; inset: 0; border-radius: var(--radius); content: ""; }
.produktkarte-name a:focus-visible, .kategoriekachel-name a:focus-visible { outline: none; }
.produktkarte-name a:focus-visible::after, .kategoriekachel-name a:focus-visible::after { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; }
.produktkarte small { color: var(--farbe-ruhig); }
.produktkarte-preis { margin-top: auto; padding-top: .35rem; }
.produktkarte-verfuegbar { margin: 0; color: var(--farbe-ruhig); font-size: .8rem; }

/* ---------- Preis ---------- */
.produktpreis { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0; line-height: 1.35; }
.produktpreis-betrag { color: var(--farbe-primaer-dunkel); font-weight: 800; }
.produktpreis small { font-size: .78rem; }
.produktpreis--anfrage .produktpreis-betrag { color: var(--farbe-ruhig); font-weight: 700; }
.produktkarte-preis .produktpreis-betrag { font-size: 1.05rem; }

/* ---------- Filter, Anzahl, leeres Raster ---------- */
.produktfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.produktfilter a { display: inline-flex; min-height: 40px; align-items: center; gap: .45rem; border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .35rem 1rem; color: var(--farbe-text); background: var(--farbe-papier); font-size: .92rem; font-weight: 700; text-decoration: none; }
.produktfilter a:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.produktfilter a[aria-current] { border-color: var(--farbe-primaer); color: #fff; background: var(--farbe-primaer); }
.produktfilter-zahl { font-size: .82rem; font-weight: 400; opacity: .78; }
.produktraster-anzahl { margin: 0 0 1rem; color: var(--farbe-ruhig); font-size: .9rem; }
.produktraster-leer { max-width: 62ch; margin-inline: auto; border: 1px dashed var(--farbe-linie); border-radius: var(--radius); padding: 2rem; color: var(--farbe-ruhig); text-align: center; }
.produktbereich-alle { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
:is(.produktbereich, .kategoriebereich) .abschnittskopf--mit-knopf { row-gap: .75rem; }
.produktbereich-alle .symbol { width: 1.1rem; height: 1.1rem; }
.abschnitt--dunkel .produktraster-anzahl { color: rgb(255 255 255 / 75%); }

/* ---------- Kategorien ---------- */
/* auto-fit: drei Kategorien fuellen die Zeile, statt eine vierte Spalte leer
   zu lassen. Damit eine einzelne Kachel nicht bildschirmhoch wird, ist das
   Bild in der Hoehe gedeckelt. */
.kategoriekacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.kategoriekachel { position: relative; overflow: hidden; border: 1px solid var(--farbe-linie); border-radius: var(--radius); color: var(--farbe-text); background: var(--farbe-papier); transition: border-color .2s ease, box-shadow .2s ease; }
.kategoriekachel:hover { border-color: var(--farbe-primaer); box-shadow: var(--schatten); }
.kategoriekachel-bild { max-height: 300px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--farbe-flaeche); }
.kategoriekachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kategoriekachel:hover .kategoriekachel-bild img { transform: scale(1.04); }
.kategoriekachel-text { padding: 1rem 1.2rem 1.2rem; }
.kategoriekachel-name { margin: 0 0 .2rem; font-size: 1.15rem; overflow-wrap: break-word; }
.kategoriekachel-name a { color: inherit; text-decoration: none; }
.kategoriekachel-text p { margin: 0; color: var(--farbe-ruhig); font-size: .92rem; }
.kategoriekachel-text .kategoriekachel-zahl { margin-top: .35rem; font-size: .82rem; font-weight: 700; }

/* ---------- Produktkopf (Produktseite) ---------- */
section.produktkopf { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.produktkopf-zurueck { margin: 0 0 1.5rem; font-size: .92rem; }
.produktkopf-zurueck a { display: inline-flex; align-items: center; gap: .4rem; color: var(--farbe-ruhig); font-weight: 700; text-decoration: none; }
.produktkopf-zurueck a:hover { color: var(--farbe-primaer); }
.produktkopf-zurueck .symbol { width: 1rem; height: 1rem; }
.produktkopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.produktkopf-bilder { position: relative; min-width: 0; }
.produktkopf-bilder .produktkarte-etiketten { top: 1rem; left: 1rem; }
/* Das Band des Bildbands, hier in der Spalte: ein Bild je Breite, ohne den
   Seitenrand, den das Band sonst zur Ausrichtung am Rahmen braucht. */
.produktgalerie-spur { grid-auto-columns: 100%; gap: 1rem; padding: 0; }
.produktgalerie .schieber-steuerung { margin-top: 1rem; }
.produktgalerie-bild { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--farbe-flaeche); }
.produktgalerie-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.produktgalerie-bild--leer { display: grid; place-items: center; color: var(--farbe-ruhig); }
.produktgalerie-bild--leer .symbol { width: 4rem; height: 4rem; opacity: .45; }
.produktkopf-text { min-width: 0; }
.produktkopf-text h1 { max-width: none; margin-bottom: .75rem; font-size: clamp(2rem, 4vw, 3.1rem); overflow-wrap: break-word; }
.produktkopf-beispiel { border-left: 4px solid var(--farbe-akzent); padding: .5rem .9rem; background: var(--farbe-flaeche); font-size: .9rem; }
.produktkopf-preis { margin: 0 0 .75rem; }
.produktkopf-preis .produktpreis-betrag { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3vw, 2rem); }
.produktkopf-preis small { color: var(--farbe-ruhig); font-size: .86rem; }
.produktkopf-preis.produktpreis--anfrage .produktpreis-betrag { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.produktkopf-verfuegbar { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .9rem; font-weight: 700; }
.produktkopf-verfuegbar::before { width: .6rem; height: .6rem; border-radius: 50%; background: var(--farbe-erfolg); content: ""; }
.produktkopf-verfuegbar--bestellbar::before, .produktkopf-verfuegbar--anfertigung::before { background: var(--farbe-akzent); }
.produktkopf-verfuegbar--ausverkauft::before { background: var(--farbe-ruhig); }
.produktkopf-text .vorspann { font-size: 1.1rem; }
.produktkopf-merkmale { margin: 1.25rem 0 1.75rem; }
.produktkopf-hinweis { margin: .75rem 0 0; }
.produktkopf-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--farbe-linie); padding-top: clamp(2rem, 4vw, 3rem); }
.produktkopf-details h2 { margin-bottom: 1rem; font-size: 1.4rem; }
.produktdaten { margin: 0; border-top: 1px solid var(--farbe-linie); }
.produktdaten > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 1rem; border-bottom: 1px solid var(--farbe-linie); padding: .7rem 0; }
.produktdaten dt { color: var(--farbe-ruhig); }
.produktdaten dd { margin: 0; font-weight: 700; overflow-wrap: break-word; }
/* Der Hinweis zum Produkt im Anfrageformular (teil-formular.php). */
.formular-produkt { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin: 0; border-left: 4px solid var(--farbe-primaer); border-radius: 0 var(--radius) var(--radius) 0; padding: .75rem 1rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche .formular-produkt { background: var(--farbe-papier); }
.formular-produkt small { color: var(--farbe-ruhig); }

@media (max-width: 960px) {
    .produktkopf-raster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    /* Zwei Karten nebeneinander wie in jedem Laden auf dem Handy - eine je
       Zeile machte aus sechs Produkten sechs Bildschirmhoehen. */
    .produktraster, .kategoriekacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .produktkarte-text { padding: .8rem .6rem 1rem; }
    /* Der Name waechst mit der Karte (3.5vw: 13 px bis 371 px, 16 px ab
       457 px). Mit 16 px brauchte "Geschenkgutschein" bis 173 px (Archivo
       Black) und brach in der halben Breite mitten im Wort (375 px: 136 px
       Platz); jetzt passt es ab 375 px in jeder Schrift. Mit .produktkarte
       davor gilt die Groesse auch gegen die h3 einer Vorlage (Landingpage 20,
       Portfolio 21.6 px). */
    .produktkarte .produktkarte-name { font-size: clamp(.8125rem, 3.5vw, 1rem); }
    /* Der Preis im selben Verhaeltnis, sonst stuende "Preis auf Anfrage" groesser
       als der Name. */
    .produktkarte-preis .produktpreis-betrag { font-size: clamp(.85rem, 3.7vw, 1.05rem); }
    .produktkarte-etiketten { top: .5rem; left: .5rem; }
    .kategoriekachel-text { padding: .8rem .9rem 1rem; }
    .kategoriekachel-name { font-size: 1.02rem; }
    .vorteilsleiste-liste { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .produktdaten > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    /* Unter 375 px reicht die halbe Breite dafuer auch mit 13 px nicht: dort
       nach Silben trennen ("Geschenk-gutschein"), begrenzt wie in der
       Startueberschrift. Safari kennt die Grenze nicht und bricht nur um. */
    @supports (hyphenate-limit-chars: 12 5 5) {
        .produktkarte-name { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
    }
}

/* ============ Bausteine der Blog-Vorlage ============
   Umgesetzt aus der KI-Vorlage "Blog": Beitragskarten (Raster, Liste,
   kompakt), Highlights, Suche und Kategorien, der Hinweis auf Feed und
   Newsletter und die Beitragsansicht. Wie die Bausteine oben an keine Vorlage
   gebunden: die Regeln arbeiten mit den Tokens des Stils. */

/* ---------- Beitragskarten ---------- */
.beitragsliste { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.beitragsliste--karten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2rem 1.5rem; }
.beitragsliste--liste { gap: 1rem; }
.beitragsliste--kompakt { gap: 0; border-top: 1px solid var(--farbe-linie); }
.beitragsliste > li { display: flex; min-width: 0; }
/* Eigene Farben: auch in einem dunklen Abschnitt bleibt die Karte hell. */
.beitragskarte { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid var(--farbe-linie); border-radius: var(--radius); overflow: hidden; color: var(--farbe-text); background: var(--farbe-papier); transition: box-shadow .2s ease; }
.beitragskarte:hover { box-shadow: var(--schatten); }
.beitragskarte-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--farbe-flaeche); }
.beitragskarte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.beitragskarte:hover .beitragskarte-bild img { transform: scale(1.04); }
.beitragskarte-text { display: flex; flex: 1; flex-direction: column; gap: .6rem; min-width: 0; padding: 1.35rem 1.4rem 1.5rem; }
.beitragskarte-kategorie { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Ueber der klickbaren Flaeche, damit die Kategorie ein eigener Verweis bleibt. */
.beitragskarte .beitragskarte-kategorie a { position: relative; z-index: 1; color: var(--farbe-primaer); text-decoration: none; }
.beitragskarte .beitragskarte-kategorie a:hover { text-decoration: underline; }
/* h2 und h3 bringen Groesse und Breite fuer Abschnittsueberschriften mit. */
.beitragskarte-titel { max-width: none; margin: 0; font-size: 1.25rem; line-height: 1.25; overflow-wrap: break-word; }
.beitragskarte .beitragskarte-verweis { color: inherit; text-decoration: none; }
/* Der Verweis sitzt am Titel, seine Flaeche deckt die ganze Karte. */
.beitragskarte-verweis::after { position: absolute; inset: 0; content: ""; }
.beitragskarte:hover .beitragskarte-verweis { text-decoration: underline; text-decoration-thickness: 1px; }
.beitragskarte-verweis:focus-visible { outline: none; }
.beitragskarte:has(.beitragskarte-verweis:focus-visible) { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; }
.beitragskarte-auszug { display: -webkit-box; margin: 0; overflow: hidden; color: var(--farbe-ruhig); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.beitragsmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: auto 0 0; padding-top: .35rem; color: var(--farbe-ruhig); font-size: .86rem; }
.beitragsmeta > * + *::before { content: "·"; margin-right: .5rem; }
.beitragskarte-weiter { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 0; color: var(--farbe-primaer); font-weight: 700; }
.beitragskarte-weiter .symbol { width: 1em; height: 1em; transition: transform .2s ease; }
.beitragskarte:hover .beitragskarte-weiter .symbol { transform: translateX(3px); }

/* Liste mit Vorschaubild */
.beitragskarte--zeile { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.beitragskarte--zeile.beitragskarte--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.beitragskarte--zeile .beitragskarte-bild { min-height: 150px; aspect-ratio: auto; }
.beitragskarte--zeile .beitragskarte-text { padding: 1.2rem 1.5rem 1.3rem; }

/* Kompakt: Datum und Titel in einer Zeile, ohne Karte */
.beitragskarte--kompakt { border: 0; border-bottom: 1px solid var(--farbe-linie); border-radius: 0; overflow: visible; background: transparent; }
.beitragskarte--kompakt:hover { box-shadow: none; }
.beitragskarte--kompakt .beitragskarte-text { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; gap: .25rem 1.5rem; padding: 1rem 0; }
.beitragskarte--kompakt .beitragsmeta { grid-row: 1; grid-column: 1; margin: 0; padding: 0; }
.beitragskarte--kompakt .beitragskarte-titel { grid-row: 1; grid-column: 2; font-size: 1.1rem; }

/* ---------- Highlights ---------- */
.highlights { display: grid; gap: 1.5rem; }
.highlights--aufmacher { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.highlights--aufmacher.highlights--3 > :first-child { grid-row: span 2; }
.highlights--aufmacher.highlights--2, .highlights--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.highlights--1 { grid-template-columns: minmax(0, 1fr); }
.beitragskarte--aufmacher .beitragskarte-bild { flex: 1 0 auto; min-height: 240px; aspect-ratio: 16 / 10; }
.beitragskarte--aufmacher .beitragskarte-titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.beitragskarte--aufmacher .beitragskarte-auszug { font-size: 1.05rem; -webkit-line-clamp: 4; line-clamp: 4; }
.beitragskarte--band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.beitragskarte--band.beitragskarte--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.beitragskarte--band .beitragskarte-bild { min-height: 280px; aspect-ratio: auto; }
.beitragskarte--band .beitragskarte-text { justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.beitragskarte--band .beitragskarte-titel { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.beitragskarte--band .beitragskarte-auszug { font-size: 1.1rem; -webkit-line-clamp: 5; line-clamp: 5; }
.beitragskarte--band .beitragsmeta { margin-top: .5rem; }

/* ---------- Suche, Kategorien, Blaettern ---------- */
.beitragsfilter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.beitragssuche { display: flex; flex: 1 1 300px; gap: .5rem; max-width: 480px; margin: 0; }
/* Der Feldrand in der Farbe des Nebentexts: ein Eingabefeld muss als solches
   erkennbar sein (WCAG 1.4.11, 3:1) - die feine Linie der Karten reicht nicht. */
.beitragssuche input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--farbe-ruhig); border-radius: var(--radius); padding: .55rem .9rem; color: var(--farbe-text); background: var(--farbe-papier); }
.beitragssuche input:focus-visible { border-color: var(--farbe-primaer); outline-offset: 1px; }
.beitragssuche .knopf { gap: .45rem; min-height: 44px; }
.beitragssuche .knopf .symbol { width: 1.05em; height: 1.05em; margin: 0; }
.kategorienleiste ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kategorienleiste a, .kategorienleiste span:not([class]) { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .35rem 1rem; color: var(--farbe-text); background: var(--farbe-papier); font-size: .92rem; font-weight: 600; text-decoration: none; }
.kategorienleiste a:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.kategorienleiste a[aria-current="page"] { border-color: var(--farbe-primaer); color: #fff; background: var(--farbe-primaer); }
.kategorienleiste-zahl { display: inline-grid; min-width: 1.7em; place-items: center; border-radius: 999px; padding: 0 .4em; color: var(--farbe-ruhig); background: var(--farbe-flaeche); font-size: .8rem; line-height: 1.6; }
.kategorienleiste a[aria-current="page"] .kategorienleiste-zahl { color: #fff; background: rgb(255 255 255 / 22%); }
.kategorienleiste--gross a { min-height: 48px; padding: .55rem 1.25rem; font-size: 1rem; }
.beitragssuche-ergebnis { margin: -.75rem 0 1.5rem; color: var(--farbe-ruhig); }
.beitraege-leer { margin: 0; border: 1px dashed var(--farbe-linie); border-radius: var(--radius); padding: 2rem; color: var(--farbe-ruhig); text-align: center; }
.blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.blaettern a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.blaettern .symbol { width: 1em; height: 1em; }
.blaettern-stand { color: var(--farbe-ruhig); font-size: .92rem; }

/* ---------- Kategorien als Karten ---------- */
.kategorienkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.kategorienkarte { position: relative; display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.5rem; color: var(--farbe-text); background: var(--farbe-papier); transition: border-color .2s ease; }
.kategorienkarte:hover { border-color: var(--farbe-primaer); }
.kategorienkarte-titel { max-width: none; margin: 0; font-size: 1.25rem; }
.kategorienkarte .kategorienkarte-titel a { color: inherit; text-decoration: none; }
.kategorienkarte-titel a::after { position: absolute; inset: 0; content: ""; }
.kategorienkarte-titel a:focus-visible { outline: none; }
.kategorienkarte:has(a:focus-visible) { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; }
.kategorienkarte p { margin: 0; color: var(--farbe-ruhig); }
.kategorienkarte .kategorienkarte-zahl { margin-top: auto; padding-top: .5rem; color: var(--farbe-primaer); font-size: .88rem; font-weight: 700; }

/* ---------- Newsletter und Feed ---------- */
.newsletterband { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.newsletterband--flaeche { background: var(--farbe-flaeche); }
.newsletterband--dunkel { color: #fff; background: var(--farbe-primaer-dunkel); }
.newsletterband--primaer { color: #fff; background: var(--farbe-primaer); }
.newsletterband-innen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 1.25rem 3rem; }
.newsletterband h2 { max-width: 26ch; margin-bottom: .5rem; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.newsletterband-text p:last-child { margin-bottom: 0; }
.newsletterband-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.newsletterband .knopf .symbol { margin: 0 .5em 0 0; }
.newsletterband-hinweis { grid-column: 1 / -1; margin: 0; }
.newsletterband:is(.newsletterband--dunkel, .newsletterband--primaer) :is(p, .mikrotext) { color: rgb(255 255 255 / 92%); }
.newsletterband--dunkel .kicker { color: var(--farbe-akzent-hell); }
/* Auf der Hausfarbe reicht der helle Akzent nicht immer fuer 4,5:1. */
.newsletterband--primaer .kicker { color: #fff; }
.newsletterband--dunkel .knopf { color: var(--farbe-text); background: var(--farbe-akzent); }
.newsletterband--primaer .knopf { color: var(--farbe-primaer-dunkel); background: #fff; }
.newsletterband:is(.newsletterband--dunkel, .newsletterband--primaer) .knopf-sekundaer { border: 1px solid rgb(255 255 255 / 70%); color: #fff; background: transparent; }

/* ---------- Beitragsansicht ---------- */
.beitragskopf { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
.beitragskopf h1 { max-width: 22ch; font-size: clamp(2.1rem, 4.6vw, 3.6rem); overflow-wrap: break-word; }
.beitragskopf .vorspann { margin-bottom: 1.25rem; }
.beitragskopf-kategorie a { color: inherit; text-decoration: none; }
.beitragskopf-kategorie a:hover { text-decoration: underline; }
.beitragskopf-meta { gap: .2rem .75rem; margin: 0; font-size: .95rem; }
.beitragskopf-bild { margin-block: clamp(1.75rem, 4vw, 3rem) 0; }
.beitragskopf-bild img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); object-fit: cover; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1.75rem; padding: 0; color: var(--farbe-ruhig); font-size: .88rem; list-style: none; }
/* Der Trenner ist Schmuck: Vorleseprogramme lesen die Liste ohnehin als Folge. */
.brotkrumen li + li::before { content: "/"; content: "/" / ""; margin-right: .5rem; color: var(--farbe-linie); }
.brotkrumen a { color: inherit; }
.brotkrumen [aria-current="page"] { color: var(--farbe-text); }
/* Ein Beitrag ist ein Lesefluss: Bausteine zwischen den Absaetzen (Fragen,
   Schritte, Galerie) bekommen weniger Polster als auf einer Werbeseite. Farbige
   Baender behalten etwas mehr, sonst klebt ihr Text am Rand. */
.beitrag-inhalt > .abschnitt { padding-block: clamp(1.75rem, 4vw, 3rem); }
.beitrag-inhalt > .abschnitt:is(.abschnitt--flaeche, .abschnitt--dunkel, .abschnitt--bild) { padding-block: clamp(2.5rem, 6vw, 4rem); }
.beitrag-inhalt > .abschnitt:has(> .fliesstext):not(.abschnitt--bild) { padding-block: clamp(.75rem, 2vw, 1.25rem); }
.beitrag-inhalt > .abschnitt:first-child { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.beitragsfuss { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }
.beitragsfuss .rahmen { border-top: 1px solid var(--farbe-linie); padding-top: 1.5rem; }
.beitragsfuss-stand { color: var(--farbe-ruhig); font-size: .92rem; }
.beitragsfuss-verweise { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-weight: 700; }

@media (max-width: 760px) {
    .beitragskarte--zeile, .beitragskarte--band { grid-template-columns: minmax(0, 1fr); }
    .beitragskarte--zeile .beitragskarte-bild, .beitragskarte--band .beitragskarte-bild { min-height: 0; aspect-ratio: 16 / 9; }
    .beitragskarte--kompakt .beitragskarte-text { grid-template-columns: minmax(0, 1fr); }
    .beitragskarte--kompakt .beitragskarte-titel { grid-row: 2; grid-column: 1; }
    .highlights--aufmacher, .highlights--aufmacher.highlights--2, .highlights--paar { grid-template-columns: minmax(0, 1fr); }
    .highlights--aufmacher.highlights--3 > :first-child { grid-row: auto; }
    .beitragskarte--aufmacher .beitragskarte-bild { min-height: 0; }
    /* Titel im Aufmacher und im Band mit der Breite kleiner (6.4vw) statt fest
       bei 24/25.6 px: "Unternehmensprofil:" brauchte bei 320 px bis 286 px in
       einer Zeile von 238 px (Archivo Black) und brach mitten im Wort. Ab 375
       bzw. 400 px wie bisher. */
    .beitragskarte--aufmacher .beitragskarte-titel { font-size: min(1.5rem, 6.4vw); }
    .beitragskarte--band .beitragskarte-titel { font-size: min(1.6rem, 6.4vw); }
    /* min-width: 0 - sonst ist die Suche mindestens so breit wie Feld (seine
       Vorgabebreite) und Knopf zusammen, rund 330 px, und laeuft bei 320 px
       ueber den Rand. So gibt das Feld nach. */
    .beitragssuche { flex-basis: 100%; min-width: 0; max-width: none; }
    .newsletterband-innen { grid-template-columns: minmax(0, 1fr); }
    .newsletterband-aktionen { justify-content: flex-start; }
}

@media (max-width: 390px) {
    /* Seitenueberschrift von Produkt und Beitrag bis 390 px mit der Breite:
       8.2vw sind dort hoechstens 32 px, also nie mehr als bisher (32 bzw.
       33.6 px, Onlineshop 38.4 px). "Geschenkgutschein" brauchte bei 375 px
       bis 351 px, "Umzugsleistungen" bei 360 px bis 338 px - beide brachen
       mitten im Wort. Mit dem Kopf davor gilt die Groesse auch gegen die h1
       einer Vorlage; die Blog-Vorlage bringt fuer Beitraege eine eigene mit. */
    .produktkopf .produktkopf-text h1, .beitragskopf .rahmen h1 { font-size: 8.2vw; }
}

@media (prefers-reduced-motion: reduce) {
    .beitragskarte, .beitragskarte-bild img, .beitragskarte-weiter .symbol, .kategorienkarte { transition: none; }
    .beitragskarte:hover .beitragskarte-bild img, .beitragskarte:hover .beitragskarte-weiter .symbol { transform: none; }
}

@media print {
    .beitragsfilter, .blaettern, .newsletterband, .beitraege-weitere { display: none; }
}