/*
Theme Name: A.S. Light & Sound
Theme URI: https://www.as-lightsound.de/
Author: A.S. Light & Sound
Description: Natives Block-Theme fuer A.S. Light & Sound. Inhalte stammen aus den geprueften Quellen der Bahn webseite-neubau.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: proprietaer
Text Domain: as-lightsound
*/

:root {
    /* Marke, verbindlich aus dem Markenhandbuch */
    --violett: #43358B;
    --violett-tief: #2B2159;
    --violett-hell: #6B5CC0;
    --orange: #EF7D00;
    --orange-hell: #FF9528;
    /* Das Markenorange bleibt fuer Flaechen, Knoepfe, Linien und Symbole unangetastet.
       Als *Schrift* auf hellem Grund reicht es nicht: #EF7D00 auf #FCFBFD sind 2,68:1,
       gefordert sind 4,5:1 (bzw. 3:1 ab 24px). Gemessen am 03.09.2026 an rund 223
       Stellen. Christian hat am selben Tag entschieden, dass die Schriftfassung
       dunkler werden darf. Zwei Stufen, damit die grosse Kursivschrift in den
       Ueberschriften ihren Charakter behaelt:
         --orange-text  #AD5A00  4,51-4,80:1  fuer alles unter 24px
         --orange-gross #D97200  3,01-3,30:1  fuer Schrift ab 24px
       In dunklen Abschnitten stellen beide sich weiter unten selbst zurueck. */
    --orange-text: #AD5A00;
    --orange-gross: #D97200;

    /* Grundtoene, aus dem Violett abgeleitet statt neutralgrau */
    --papier: #FCFBFD;
    --papier-warm: #F6F3F9;
    --flaeche: #FFFFFF;
    --nacht: #100C1C;
    --nacht-weich: #191331;
    --nacht-karte: #221A3F;

    --text: #16121F;
    --text-leise: #5B5470;
    --text-zart: #736C88;
    --text-nacht: #F4F1FB;
    --text-nacht-leise: #B0A8C8;
    --linie: #E7E2F0;
    --linie-nacht: #2E2650;

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --bahn: 74rem;
    --lesebahn: 40rem;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papier: #0D0A16; --papier-warm: #140F23; --flaeche: #171128;
      --text: #F4F1FB; --text-leise: #B0A8C8; --text-zart: #8C84A6;
      --linie: #2A2247;
      --violett: #B3A6EE; --violett-hell: #CCC2F7; --violett-tief: #8877D4;
      --orange: #FF9528; --orange-hell: #FFAE5C;
      /* Im Dunkelmodus ist der Grund dunkel — dort braucht Orange keine Absenkung. */
      --orange-text: #FF9528; --orange-gross: #FF9528;
    }
  }
  :root[data-theme="dark"] {
    --papier: #0D0A16; --papier-warm: #140F23; --flaeche: #171128;
    --text: #F4F1FB; --text-leise: #B0A8C8; --text-zart: #8C84A6;
    --linie: #2A2247;
    --violett: #B3A6EE; --violett-hell: #CCC2F7; --violett-tief: #8877D4;
    --orange: #FF9528; --orange-hell: #FFAE5C;
    --orange-text: #FF9528; --orange-gross: #FF9528;
  }

  /* Dunkle Abschnitte tragen ihren eigenen Grund, unabhaengig vom Farbschema des
     Geraets. Sie stellen die beiden Schrift-Token deshalb selbst zurueck auf das
     helle Orange — eine Zeile, die den Fehler nicht wieder auftreten laesst. */
  section.nacht, section.hero, .fall-kopf, .fallstudie {
    --orange-text: var(--orange-hell);
    --orange-gross: var(--orange-hell);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  /* Jedes Sprungziel beginnt UNTER der klebenden Kopfzeile (85 px), nicht dahinter.
     Vorher lag der Abschnittsanfang bei 0 px - mitten im Abschnitt statt an seinem
     Anfang (Christian, 16.09.2026 abends: "komme irgendwo in der Mitte der Seite").
     Gilt auch fuer Formularfelder, zu denen die Pruefung nach einem Fehler springt.
     Gemessen in scripts/vorschau_messen.js. */
  [id] { scroll-margin-top: 6.5rem; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
  body {
    margin: 0; background: var(--papier); color: var(--text);
    font-family: var(--sans); font-size: 17.5px; line-height: 1.72;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  .bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
  .lesebahn { max-width: var(--lesebahn); }

  /* ---------- Typografie ---------- */
  h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
  h1 {
    font-family: var(--serif); font-weight: 340;
    font-size: clamp(2.6rem, 6.4vw, 5.1rem); line-height: 1.02;
    letter-spacing: -.025em;
    /* Ein einzelnes langes Wort passt in der H1-Groesse nicht auf ein schmales
       Telefon. Gemessen am 03.09.2026 bei 360px: „Datenschutzerklaerung" ist dort
       361px breit und schob die ganze Seite auf 381px — sie liess sich seitwaerts
       schieben. Trennen statt ueberlaufen; `lang="de"` liefert den Rahmen die
       deutschen Trennregeln. */
    overflow-wrap: break-word; hyphens: auto;
  }
  h1 em { font-style: italic; font-weight: 380; color: var(--orange-gross); }
  h2 {
    font-family: var(--serif); font-weight: 380;
    font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.12;
    letter-spacing: -.02em; color: var(--violett);
  }
  h2 em { font-style: italic; color: var(--orange-gross); }
  h3 { font-family: var(--sans); font-weight: 620; font-size: 1.1rem; line-height: 1.35; letter-spacing: -.008em; }
  p { margin: 0 0 1.2rem; text-wrap: pretty; }
  .fuehrend { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.6; color: var(--text-leise); }
  strong { font-weight: 620; color: var(--text); }
  a { color: var(--violett); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 3px;
  }

  .augenbraue {
    font-family: var(--mono); font-size: .7rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--orange-text);
    display: block; margin-bottom: 1.1rem;
  }
  .augenbraue::before { content: "— "; opacity: .55; }

  /* ---------- Abschnitte ---------- */
  /* Abstand zwischen den Abschnitten: vorher bis 7,5rem oben und unten, also bis zu
     240 Pixel Luft zwischen zwei Abschnitten. Auf 5,5rem verringert. */
  section { padding: clamp(3rem, 6.5vw, 5.5rem) 0; position: relative; }
  section.warm { background: var(--papier-warm); }
  section.nacht { background: var(--nacht); color: var(--text-nacht); }
  section.nacht h2 { color: #fff; }
  section.nacht h3 { color: #fff; }
  section.nacht p { color: var(--text-nacht-leise); }
  section.nacht strong { color: #fff; }
  section.nacht .augenbraue { color: var(--orange-hell); }

  /* Feine Trennkante zwischen hell und dunkel */
  section.nacht::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange) 22%, var(--violett-hell) 62%, transparent);
    opacity: .5;
  }

  /* ---------- Kopfzeile ---------- */
  header.kopf {
    position: sticky; top: 0; z-index: 60;
    /* Rueckfall zuerst: Ein Browser ohne color-mix (Safari vor 16.2, Firefox vor 113) haette
       sonst eine durchsichtige Kopfzeile ueber dem Kopfbild. Das Safari-Praefix fuer den
       Weichzeichner gilt bis Safari 17. (Paket fuer alle Browser, 16.09.2026 spaet) */
    background: rgba(252, 251, 253, .9);
    background: color-mix(in srgb, var(--papier) 90%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--linie);
  }
  /* `padding-block`, nicht `padding: 1.05rem 0`. Die Kurzform setzte das seitliche
     Polster auf 0 und schlug damit `.bahn` — beide sind Klassenselektoren, und
     `.kopf-innen` steht später im Stylesheet. Folge: Unter 1184 px klebten Signet
     und Knopf am Bildschirmrand, während jeder andere Inhalt der Seite 20 bis 40 px
     Abstand hielt. Gefunden am 03.09.2026 beim Ausmessen des Mobilmenüs. */
  /* Sieben Punkte seit dem 24.09.2026 („Referenzen", Alex 21.09.). Gemessen bei 1184 bis
     1440 px: mit den alten Abständen (2rem hier, 1.7rem in der Leiste) brach der Knopf
     „Projekt besprechen" in zwei Zeilen und die Kopfzeile wuchs von 85 auf 111 px, hinter
     die die Sprungmarken fielen. Engere Abstände und ein einzeiliger Knopf: 85 px, kein
     Überlauf ab 1184 px (scratchpad/messung/kopf_varianten.js, Variante f). */
  .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 1.05rem; }
  /* ACHTUNG, gemessen am 03.09.2026: Das Signet wird gestaucht, weil `.kopf-innen` ein
     Flex-Behaelter ist und die zehn Navigationspunkte mehr Platz brauchen, als die
     Bahn hergibt — der Kopf braucht 1243px, `.bahn` ist 1184px breit. Bei 1200-1440px
     schrumpft das Logo auf 83 statt 142px (42 % Stauchung), bei 1025-1100px auf 0px:
     Dort ist es unsichtbar, und die Seite laesst sich zusaetzlich seitwaerts schieben.
     `.signet { flex: none }` behebt die Stauchung, verschiebt den Ueberlauf aber auf
     die Seite (dann scrollt sie bis 1280px waagerecht). Die eigentliche Ursache ist
     die Zahl der Navigationspunkte — das ist Christians Entscheidung, siehe
     docs/pruefung/2026-09-03-gesamtpruefung.md, Block 2. Deshalb hier bewusst
     unveraendert gelassen. */
  /* `flex: none`: Das Signet ist ein Flex-Element und durfte bisher schrumpfen.
     Sobald die Navigation Platz brauchte, wurde als Erstes das Firmenlogo
     zusammengedrueckt — bei 1025-1100 px auf null Pixel. Jetzt gibt stattdessen
     die Navigation nach: Sie schaltet eine Breite frueher aufs Menue um. */
  .signet { flex: none; }
  .signet img { height: 42px; width: auto; display: block; }
  nav.haupt { display: flex; gap: 1.15rem; flex-wrap: nowrap; }
  nav.haupt a {
    text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--text-leise);
    padding: .35rem 0; position: relative; white-space: nowrap;
  }
  nav.haupt a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
    background: var(--orange); transition: right .28s cubic-bezier(.2,.8,.3,1);
  }
  nav.haupt a:hover { color: var(--violett); }
  nav.haupt a:hover::after { right: 0; }
  .kopf-rechts { display: flex; align-items: center; gap: 1.2rem; }
  .kopf-rechts .knopf { white-space: nowrap; }
  .fon { font-family: var(--mono); font-size: .92rem; font-weight: 500; color: var(--violett); text-decoration: none; white-space: nowrap; }

  /* ---------- Ausklappmenü (16.09.2026 abends, Christians Wunsch) ----------
     "Leistungen" und "Anlässe" bleiben Verweise auf die Startseiten-Abschnitte und
     klappen darunter die sieben Leistungs- bzw. vier Anlassseiten aus: beim Überfahren
     und bei Tastaturfokus (:focus-within), ohne JavaScript. Die Leiste behält ihre
     sechs Punkte (Christian, 03.09.2026). Gemessen in scripts/vorschau_messen.js. */
  /* Seit dem 16.09. spät ist der Öffner eine <summary>, kein Verweis: Klick öffnet nur
     das Menü und springt nirgends hin (Christian: „oben im Header ankommen"). */
  nav.haupt .menue-gruppe { position: relative; display: flex; align-items: center; }
  nav.haupt .menue-oeffner {
    appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem; font: inherit;
    font-size: .93rem; font-weight: 500; color: var(--text-leise); padding: .35rem 0;
    position: relative; white-space: nowrap;
  }
  nav.haupt .menue-oeffner::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
    background: var(--orange); transition: right .28s cubic-bezier(.2,.8,.3,1);
  }
  nav.haupt .menue-oeffner:hover, nav.haupt .menue-oeffner[aria-expanded="true"] { color: var(--violett); }
  nav.haupt .menue-oeffner:hover::after, nav.haupt .menue-oeffner[aria-expanded="true"]::after { right: 0; }
  nav.haupt .menue-oeffner:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
  nav.haupt .pfeil { width: .7rem; height: .7rem; flex: none; transition: rotate .25s ease; }
  nav.haupt .menue-gruppe:hover .pfeil,
  nav.haupt .menue-gruppe:focus-within .pfeil { rotate: 180deg; }
  nav.haupt .menue-gruppe.geschlossen .pfeil { rotate: 0deg; }
  nav.haupt .menue-gruppe > .menue-oeffner[aria-expanded="true"] .pfeil { rotate: 180deg; }
  /* Unsichtbare Brücke über die Lücke, damit die Maus zur Tafel wandern kann. */
  nav.haupt .menue-gruppe::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.2rem; }
  nav.haupt .untermenue {
    position: absolute; top: calc(100% + 1rem); left: -1rem; z-index: 70;
    list-style: none; margin: 0; padding: .5rem; min-width: 18.5rem;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px;
    box-shadow: 0 28px 56px -28px rgba(43,33,89,.45), 0 2px 6px -2px rgba(43,33,89,.12);
    opacity: 0; visibility: hidden; translate: 0 -.4rem;
    transition: opacity .18s ease, translate .18s ease, visibility 0s linear .18s;
  }
  nav.haupt .menue-gruppe:hover > .untermenue,
  nav.haupt .menue-gruppe:focus-within > .untermenue { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  /* Nach Escape oder zweitem Klick bleibt die Tafel zu, auch wenn Maus oder Fokus noch am
     Oeffner sind; das Skript setzt den Merker und nimmt ihn beim Verlassen wieder weg. */
  nav.haupt .menue-gruppe.geschlossen:hover > .untermenue,
  nav.haupt .menue-gruppe.geschlossen:focus-within > .untermenue { opacity: 0; visibility: hidden; translate: 0 -.4rem; transition-delay: 0s, 0s, .18s; }
  nav.haupt .menue-gruppe > .menue-oeffner[aria-expanded="true"] + .untermenue { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  nav.haupt .untermenue a {
    display: block; padding: .55rem .85rem; border-radius: 4px;
    font-size: .92rem; font-weight: 500; color: var(--text); white-space: nowrap;
  }
  nav.haupt .untermenue a::after { content: none; }
  nav.haupt .untermenue a:hover { background: var(--papier-warm); color: var(--violett); }
  nav.haupt .untermenue a[aria-current="page"] { background: var(--papier-warm); color: var(--violett); font-weight: 620; }
  .fallstudie nav.haupt .untermenue { background: #1A1428; border-color: var(--linie-nacht); }
  .fallstudie nav.haupt .untermenue a { color: #fff; }
  .fallstudie nav.haupt .untermenue a:hover,
  .fallstudie nav.haupt .untermenue a[aria-current="page"] { background: rgba(255,255,255,.08); color: #fff; }

  /* ---------- Mobilmenü ----------
     Bis zum 03.09.2026 wurde `nav.haupt` unter 64rem einfach ausgeblendet — ohne
     Ersatz. Auf einem Telefon blieben Signet und Knopf; der erste Verweis auf eine
     andere Seite stand 17.096 px weiter unten im Fuß. Christians Entscheidung:
     „Ja, es soll auf jeden Fall eine Mobilnavigation geben."

     Umgesetzt als `<details>`, also ohne JavaScript — dieselbe Browserfunktion, die
     schon das Fragen-Akkordeon trägt. Ein Menü, das JavaScript braucht, wäre auf
     einer Seite fehl am Platz, deren Formular ausdrücklich auch ohne funktioniert. */
  .menue { display: none; position: relative; }
  .knopf-kurz { display: none; }

  /* 70rem = 1120 px, nicht 64rem. Die breite Leiste erschien bisher ab 1025 px und
     drückte das Signet dort noch zusammen. Sie gehört dorthin, wo sie mitsamt
     Seitenpolster wirklich passt: Der Kopf braucht mit sechs Punkten rund 1034 px
     Inhaltsbreite, die Bahn lässt links und rechts je 40 px. Nachgemessen am
     03.09.2026 über zwölf Fensterbreiten von 320 bis 1920 px. */
  @media (max-width: 70rem) {
    nav.haupt:not(.wp-block-navigation) { display: none; }
    .menue { display: block; }
  }

  .menue > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    /* 44 x 44: die Mindestgröße einer antippbaren Fläche. */
    width: 44px; height: 44px;
    border: 1px solid var(--linie); border-radius: 3px;
    color: var(--text); background: var(--flaeche);
    transition: border-color .2s ease;
  }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary::marker { content: ""; }
  .menue > summary:hover { border-color: var(--violett); }

  /* Zwei Striche, die beim Öffnen zum Kreuz werden. Der dritte fehlt absichtlich:
     Zwei genügen als Zeichen und ergeben ein sauberes Kreuz. */
  .menue-linien { position: relative; width: 18px; height: 12px; }
  .menue-linien::before, .menue-linien::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 1px;
    transition: top .25s ease, transform .25s ease;
  }
  .menue-linien::before { top: 1px; }
  .menue-linien::after  { top: 9px; }
  .menue[open] .menue-linien::before { top: 5px; transform: rotate(45deg); }
  .menue[open] .menue-linien::after  { top: 5px; transform: rotate(-45deg); }

  .menue-tafel {
    position: absolute; top: calc(100% + .6rem); right: 0; z-index: 70;
    width: min(17rem, calc(100vw - 2.5rem));
    background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: 3px;
    box-shadow: 0 20px 44px -18px rgba(22,18,31,.42);
    padding: .4rem;
    display: grid;
  }
  .menue-tafel nav { display: grid; }
  .menue-tafel a {
    display: flex; align-items: center;
    /* 48 px hoch: Im Fuß sind die Verweise 20 px hoch, und der Fuß war bisher die
       einzige Navigation auf dem Telefon. */
    min-height: 48px; padding: .4rem .9rem;
    text-decoration: none; color: var(--text);
    font-size: 1rem; font-weight: 500; line-height: 1.3;
    border-radius: 2px;
  }
  .menue-tafel a + a { border-top: 1px solid var(--linie); }
  .menue-tafel a:hover { background: var(--papier-warm); color: var(--violett); }
  .menue-tafel a[aria-current="page"] { color: var(--violett); font-weight: 620; }
  .menue-fon { font-family: var(--mono); font-size: .95rem; color: var(--violett) !important; }
  .menue-knopf {
    justify-content: center; margin-top: .3rem;
    background: var(--orange); color: #14111F !important;
    font-weight: 600; border-top: 0 !important;
  }
  .menue-knopf:hover { background: var(--orange-hell); }
  /* Ganz oben in der Tafel, vor der Navigation: der Shop (Alex, 01.10.2026). Wie
     .menue-knopf, aber violett umrandet statt orange gefuellt, damit er neben dem
     Anfrage-Knopf als zweiter Weg lesbar bleibt und nicht als derselbe. */
  .menue-shop {
    justify-content: center; margin-bottom: .3rem;
    color: var(--violett) !important; font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--violett);
  }
  .menue-shop:hover { background: var(--papier-warm); }
  /* Im Handymenü stehen die Unterseiten eingerückt unter ihrem Punkt, sofort sichtbar;
     kein zweites Aufklappen. Mit 17 Einträgen kann die Tafel höher als der Bildschirm
     werden, deshalb darf sie scrollen. */
  .menue-tafel { max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; }
  .menue-tafel .menue-gruppe { display: grid; }
  .menue-tafel .menue-titel {
    display: flex; align-items: center; min-height: 44px; padding: .5rem .9rem .2rem;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange-text); font-weight: 500;
  }
  .menue-tafel .menue-gruppe + a,
  .menue-tafel .menue-gruppe + .menue-gruppe > .menue-titel { border-top: 1px solid var(--linie); }
  .menue-tafel .untermenue { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 .9rem; display: grid; }
  .menue-tafel .untermenue a {
    min-height: 40px; padding: .3rem .9rem; font-size: .93rem; font-weight: 400;
    color: var(--text-leise); border-left: 2px solid var(--linie); border-radius: 0 2px 2px 0;
  }
  .menue-tafel .untermenue a[aria-current="page"] { border-left-color: var(--orange); }

  /* Rechner (ab 70rem), gemessen am 01.10.2026 mit Playwright bei 1184 und 1440 px: Die
     Zeile war vor dem Shop-Knopf schon voll (Signet 142, Leiste 636, Nummer 115, Knopf 190,
     letzter Rand 2 px vor der Bahnkante). Der Shop-Knopf braucht 144 px plus Abstand, und
     die Bahn wird ab 1184 px nicht breiter. Ohne die Nummer und mit 1rem statt 1.5rem
     Seitenpolster an den beiden Kopfknoepfen bleiben 5,6 px Rand; mit der Nummer fehlen
     selbst bei kurzer Beschriftung „Shop" und engerer Leiste noch 70 px. Die Nummer
     steht weiter im Handymenue, im Fuss und in jedem Anfrageabschnitt. */
  @media (min-width: 70.01rem) {
    .fon { display: none; }
    .kopf-rechts .knopf { padding-inline: 1rem; }
    /* Der Textpunkt „Verleih-Shop" stand direkt neben dem gleichnamigen Knopf. Am Rechner
       traegt der Knopf den Weg allein; gemessen 34 px mehr Luft, kein Ueberlauf mehr bis 1130 px. */
    nav.haupt > a[href$="/wordpress/"] { display: none; }
  }
  @media (max-width: 36rem) {
    .fon { display: none; }
    /* Auf 360 px teilen sich Signet, Knopf und Menü 320 px Inhaltsbreite. Der Knopf
       trägt dort die kurze Beschriftung, das Signet wird eine Spur kleiner. */
    .knopf-lang { display: none; }
    .knopf-kurz { display: inline; }
    .signet img { height: 36px; }
    .kopf-innen { gap: .75rem; }
    /* Zwei Knoepfe statt einem (Shop, 01.10.2026): Bei 390 px teilen sich Signet 121,
       „Shop" und „Anfragen" und das Menue 44 die Zeile. Mit .8rem Seitenpolster und
       .5rem Abstand endet das Menue bei 390 px genau an der Polsterkante (gemessen),
       so wie der alte Kopf bei 360 px. Unter 24rem tritt der Shop-Knopf zurueck. */
    .kopf-rechts { gap: .5rem; }
    .kopf-rechts .knopf { padding-inline: .8rem; }
  }
  @media (max-width: 24rem) {
    /* Unter 384 px passen Signet, zwei Knoepfe und Menue nicht mehr in die Zeile:
       gemessen am 01.10.2026 ragt das Menue bei 375 px 16 px ins Seitenpolster, bei
       360 px 11 px ueber den Bildschirmrand. Der Shop-Knopf tritt zurueck — er steht
       in der Menuetafel ganz oben (iPhone SE/mini 375, viele Android 360). Der
       Anfrage-Knopf bleibt bis 21rem, siehe unten. `.kopf-rechts .knopf-zweit`, nicht
       `.knopf-zweit`: `.knopf { display: inline-flex }` steht weiter unten und gewaenne
       sonst (gleiche Spezifitaet, spaetere Regel; bei 360 px nachgemessen). */
    .kopf-rechts .knopf-zweit { display: none; }
  }
  @media (max-width: 21rem) {
    /* Unter 336 px reicht der Platz fuer Signet, Knopf und Menue nicht mehr. Der
       Knopf tritt zurueck — er steht in der Menuetafel ganz unten und dort sogar
       auffaelliger. Betrifft alte iPhone SE und schmale Androidgeraete. */
    .kopf-rechts .knopf { display: none; }
  }

  /* ---------- Schaltflächen ---------- */
  .knopf {
    display: inline-flex; align-items: center; gap: .5rem;
    /* Dunkel auf Orange statt weiss: 6,73:1 statt 2,76:1. Die Markenfarbe bleibt
       unveraendert, nur die Schrift wird lesbar. Gemessen, nicht geschaetzt. */
    background: var(--orange); color: #14111F; text-decoration: none;
    font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
    padding: .75rem 1.5rem; border: 0; border-radius: 2px; cursor: pointer;
    transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .18s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
  .knopf:hover { background: #D96F00; transform: translateY(-1.5px); box-shadow: 0 6px 18px -6px rgba(239,125,0,.55); }
  .knopf:active { transform: translateY(0); }
  .knopf.gross { padding: 1rem 2.1rem; font-size: 1.02rem; }
  .knopf.leise {
    background: transparent; color: var(--violett);
    border: 1px solid rgba(67, 53, 139, .4); border-color: color-mix(in srgb, var(--violett) 40%, transparent); box-shadow: none;
  }
  /* Auf dunklem Hero braucht der zweite Knopf mehr Kontrast */
  .hero .knopf.leise, section.nacht .knopf.leise {
    color: #fff; border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .hero .knopf.leise:hover, section.nacht .knopf.leise:hover {
    background: #fff; color: var(--nacht); border-color: #fff;
  }
  .knopf.leise:hover { background: var(--violett); color: #fff; border-color: var(--violett); box-shadow: 0 6px 18px -8px rgba(67,53,139,.5); }
  /* Der Shop-Knopf in der Kopfzeile (Alex, 01.10.2026): gleiche Hoehe und Polster wie
     .knopf, aber violett umrandet statt orange gefuellt. Der Rahmen liegt als innerer
     Schatten, damit der Knopf keinen Pixel hoeher wird als sein orangener Nachbar. */
  .knopf-zweit { background: transparent; color: var(--violett); box-shadow: inset 0 0 0 1.5px var(--violett); }
  .knopf-zweit:hover { background: var(--papier-warm); color: var(--violett); box-shadow: inset 0 0 0 1.5px var(--violett); }
  section.nacht .knopf.leise { color: #fff; border-color: rgba(255,255,255,.32); }
  section.nacht .knopf.leise:hover { background: #fff; color: var(--nacht); border-color: #fff; }

  /* ---------- Hero ---------- */
  .hero { padding: 0; background: var(--nacht); position: relative; overflow: hidden; }
  .hero-bild, .hero .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
  .hero picture{position:absolute;inset:0}
  .hero picture img.hero-bild,.hero img.hero-bild{width:100%;height:100%;object-fit:cover}
  .bild-rahmen picture{display:block}
  .bild-rahmen picture img{display:block;width:100%}
  .hero-schleier {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 80% at 8% 100%, rgba(67,53,139,.55), transparent 62%),
      linear-gradient(98deg, #100C1C 6%, rgba(16,12,28,.86) 42%, rgba(16,12,28,.42) 78%, rgba(16,12,28,.62) 100%);
  }
  .hero-korn {
    position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Oben nur so viel Luft, dass der Text nicht an der Leiste klebt. Vorher standen
     hier 176px unter einer 111px hohen Kopfzeile — der Handlungsknopf fiel dadurch
     auf einem 900px hohen Bildschirm unter die Falz. */
  /* padding-block, nicht padding: Das Kurzschreiben setzte den seitlichen Abstand der .bahn auf
     null — am Rechner unsichtbar (die Bahn ist schmaler als das Fenster), auf dem Telefon klebte
     der ganze Kopf am linken Rand (Endkontrolle 25.09.2026, alle Seiten mit Kopfbild). */
  .hero-innen { position: relative; z-index: 2; padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
  .hero-text-bahn { max-width: 50rem; }
  .hero h1 { color: #fff; }
  .hero-unter { font-size: clamp(1.12rem, 2vw, 1.36rem); line-height: 1.58; color: #D8D2EA; margin: 1.5rem 0 2.1rem; max-width: 40rem; }
  .hero-knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; }
  .hero-fuss {
    position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.12);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.6rem 2.5rem;
    padding-block: 1.9rem 2.2rem;
  }
  .hero-fakt .zahl {
    font-family: var(--mono); font-size: 1.45rem; font-weight: 500; color: var(--orange-hell);
    display: block; line-height: 1.1; font-variant-numeric: tabular-nums; margin-bottom: .35rem;
  }
  .hero-fakt .was { font-size: .88rem; color: #B8B0D0; line-height: 1.45; }

  /* ---------- Rasterbausteine ---------- */
  .zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  @media (max-width: 58rem) { .zweispalt { grid-template-columns: 1fr; } }
  .versatz { padding-top: clamp(0rem, 4vw, 3.5rem); }

  .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; }
  /* Kein Bild allein in der letzten Reihe (Endabnahme 16.09.2026). Sieben Seiten fuehren
     fuenf Bilder in einem Vierer-Raster: vier oben, eines allein darunter - das liest
     sich wie "eins passte nicht mehr". Bei fuenf Bildern stehen jetzt zwei grosse ueber
     drei mittleren, bei sechs drei und drei; vier bleiben vier. Die Anzahl liest das CSS
     selbst (`:has`), ein Browser ohne `:has` zeigt das bisherige Raster. Unter 700 px ist
     ohnehin alles einspaltig. Gemessen in scripts/vorschau_messen.js. */
  .karten:has(> figure:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .karten:has(> figure:nth-child(5):last-child) > figure { grid-column: span 2; }
  .karten:has(> figure:nth-child(5):last-child) > figure:nth-child(-n+2) { grid-column: span 3; }
  .karten:has(> figure:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 700px) {
    .karten:has(> figure:nth-child(5):last-child),
    .karten:has(> figure:nth-child(6):last-child) { grid-template-columns: 1fr; }
    /* `:nth-child(n)` haelt die Spezifitaet der Spannregel fuer die ersten zwei Bilder -
       ohne sie spannten die beiden im Einspalten-Raster weiter und drueckten die Seite
       bei 360 px um bis zu 82 px zu breit (Messung 16.09.2026). */
    .karten:has(> figure:nth-child(5):last-child) > figure:nth-child(n) { grid-column: auto; }
  }
  .karte {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
    padding: 1.7rem 1.6rem 1.8rem; transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
  }
  .karte:hover { border-color: var(--violett-hell); transform: translateY(-2px); }
  .karte h3 { color: var(--violett); margin-bottom: .6rem; }
  .karte p { font-size: .96rem; color: var(--text-leise); margin: 0; }
  .karte .num {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--orange-text);
    display: block; margin-bottom: .9rem;
  }

  /* ---------- Tabelle ---------- */
  .tabelle-rahmen { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--linie); border-radius: 4px; }
  .tabelle { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
  .tabelle th, .tabelle td { text-align: left; padding: 1rem 1.3rem; vertical-align: top; border: 0; }
  .tabelle thead th {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 500; color: var(--orange-text); background: var(--papier-warm);
    border-bottom: 1px solid var(--linie);
  }
  .tabelle tbody th {
    font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--violett);
    white-space: nowrap;
  }
  .tabelle tbody tr + tr th, .tabelle tbody tr + tr td { border-top: 1px solid var(--linie); }
  .tabelle td { color: var(--text-leise); line-height: 1.6; }
  section.nacht .tabelle-rahmen { border-color: var(--linie-nacht); }
  section.nacht .tabelle thead th { background: var(--nacht-karte); border-bottom-color: var(--linie-nacht); }
  section.nacht .tabelle tbody tr + tr th, section.nacht .tabelle tbody tr + tr td { border-top-color: var(--linie-nacht); }
  section.nacht .tabelle td { color: var(--text-nacht-leise); }
  /* Die Zeilenkoepfe erben sonst `var(--violett)` aus der hellen Fassung: #43358B auf
     #100C1C sind 1,94:1. Gemessen am 03.09.2026 auf fuenf Seiten, 25 Zellen. Es ist
     derselbe Fehler wie bei `.karte` und `.kontaktliste` — eine Regel der hellen
     Fassung, die im dunklen Abschnitt weitergilt. Weiss ist hier schon die Antwort
     des Hauses: `section.nacht .referenz-name` macht es fuer denselben Serifen-Namen
     genauso. 14,5:1. */
  section.nacht .tabelle tbody th { color: #fff; }
  /* Auf dem Telefon als Liste: Die Tabelle war 34rem breit und wurde im Rahmen rechts
     abgeschnitten, ohne dass man ihr das Wischen ansah (Endkontrolle 25.09.2026). Jede
     Zeile wird ein Block, jede Zelle trägt ihren Spaltennamen aus data-spalte. */
  @media (max-width: 40rem) {
    .tabelle { min-width: 0; }
    .tabelle thead { display: none; }
    .tabelle tbody tr { display: block; padding: .9rem 1.1rem; }
    .tabelle tbody tr + tr { border-top: 1px solid var(--linie); }
    .tabelle tbody tr + tr th, .tabelle tbody tr + tr td { border-top: 0; }
    .tabelle tbody th, .tabelle td { display: block; padding: 0; }
    .tabelle tbody th { margin-bottom: .35rem; }
    .tabelle td + td { margin-top: .35rem; }
    .tabelle td::before { content: attr(data-spalte) ": "; font-family: var(--mono); font-size: .72rem;
      letter-spacing: .06em; text-transform: uppercase; color: var(--text-zart); }
  }

  /* ---------- Leistungen ---------- */
  .gewerke { display: grid; gap: 0; margin-top: 1rem; }
  .gewerk {
    display: grid; grid-template-columns: 13rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: 2.4rem 0; border-top: 1px solid var(--linie); align-items: start;
  }
  .gewerk:last-child { border-bottom: 1px solid var(--linie); }
  @media (max-width: 52rem) { .gewerk { grid-template-columns: 1fr; gap: .8rem; } }
  .gewerk-titel { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; line-height: 1.15; color: var(--violett); letter-spacing: -.015em; }
  .gewerk-nr { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--orange-text); display: block; margin-bottom: .5rem; }
  .gewerk p { margin: 0 0 .9rem; }
  .gewerk p:last-child { margin-bottom: 0; }
  .gewerk .stichworte {
    font-family: var(--mono); font-size: .82rem; color: var(--text-zart);
    line-height: 1.75; margin-top: 1rem;
  }

  /* ---------- Bilder ---------- */
  figure { margin: 0; }
  figure img { width: 100%; display: block; border-radius: 3px; }
  .bild-rahmen { position: relative; overflow: hidden; border-radius: 3px; }
  .bild-rahmen img { transition: transform .7s cubic-bezier(.2,.8,.3,1); }
  .bild-rahmen:hover img { transform: scale(1.03); }
  figcaption, .wp-block-image :where(figcaption), .wp-block-video :where(figcaption) { font-size: .87rem; color: var(--text-leise); margin-top: .7rem; margin-bottom: 0; line-height: 1.5; }
  section.nacht figcaption { color: var(--text-nacht-leise); }
  .marke-auf-bild {
    position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
    background: rgba(16,12,28,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-family: var(--mono); font-size: .64rem; letter-spacing: .15em;
    text-transform: uppercase; padding: .38rem .7rem; border-radius: 2px;
  }

  /* ---------- Anlässe ---------- */
  .anlaesse { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
  .anlass {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px; overflow: hidden;
    transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
  }
  .anlass:hover { border-color: var(--violett-hell); transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(43,33,89,.45); }
  .anlass .bild-rahmen img { aspect-ratio: 3/2; object-fit: cover; border-radius: 0; }
  .anlass-innen { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
  .anlass h3 { font-family: var(--serif); font-size: 1.42rem; font-weight: 400; color: var(--violett); margin-bottom: .6rem; letter-spacing: -.012em; }
  /* Kein `flex: 1` auf den Absaetzen: Bei zwei Absaetzen dehnte sich der erste und liess
     eine Luecke vor dem zweiten (Industrie-Karte, 57 px). Der Restraum gehoert unter den
     Text - `margin-top: auto` am Weiter-Verweis haelt ihn am Kartenboden. Gemessen in
     scripts/vorschau_messen.js, Endabnahme 16.09.2026. */
  .anlass p { font-size: .95rem; color: var(--text-leise); margin: 0 0 1.2rem; }
  .anlass .weiter { margin-top: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--orange-text); font-weight: 500; }

  /* ---------- Ablauf ---------- */
  .ablauf, .wp-block-columns > .wp-block-column.ablauf { counter-reset: s; margin-top: 1rem; }
  .schritt {
    display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.6rem;
    padding: 1.8rem 0; border-top: 1px solid var(--linie); counter-increment: s;
  }
  .schritt:last-child { border-bottom: 1px solid var(--linie); }
  .schritt::before {
    content: counter(s, decimal-leading-zero);
    font-family: var(--serif); font-size: 2.1rem; font-weight: 300; line-height: 1;
    color: var(--orange-text); opacity: 1;
  }
  .schritt h3 { margin-bottom: .4rem; font-size: 1.14rem; }
  .schritt p { margin: 0; color: var(--text-leise); font-size: .98rem; }

  /* ---------- Zitat / Merksatz ---------- */
  .merksatz {
    border-left: 2px solid var(--orange); padding: .3rem 0 .3rem 1.6rem; margin: 2.2rem 0;
    font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.62rem); line-height: 1.42;
    font-weight: 340; letter-spacing: -.012em;
  }
  section.nacht .merksatz { color: #fff; }

  /* ---------- Platzhalter ---------- */
  .ph {
    display: block; border: 1.5px dashed var(--orange); border-radius: 3px;
    background: rgba(239, 125, 0, .07); background: color-mix(in srgb, var(--orange) 7%, transparent);
    padding: .8rem 1rem; font-family: var(--mono); font-size: .78rem; line-height: 1.55;
    color: var(--orange-text); 
  }
  .ph strong { color: inherit; font-weight: 600; }
  /* Auf hellem Grund (Datenschutzerklaerung) kam die Mono-Schrift des Kastens nur auf
     4,23:1 - unter der Grenze von 4,5 fuer kleine Schrift. Dunkleres Orange nur dort;
     in den dunklen Anfrage-Abschnitten stimmt der Kontrast (Messung 16.09.2026). */
  .rechtstext .ph { color: #9A4E00; }
  .ph-band {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 95;
    /* Dunkel auf Orange wie bei den Knoepfen: Weiss auf Orange waren 2,76:1. Das Band
       geht zwar nie live, taucht aber in jeder Kontrastmessung auf und verdeckt dort
       echte Funde. */
    background: var(--orange); color: #14111F; font-family: var(--mono); font-size: .71rem;
    padding: .6rem .9rem; border-radius: 2px; max-width: 15rem; line-height: 1.45;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  }

  /* ---------- Team ----------
     Geordnet nach Aufgabe (Christian, 14.09.2026): Links der Bereich, rechts die Namen.
     Die Kopfzahl steht nur, wo mehr als eine Person arbeitet. Die Rolle unter dem Namen
     wiederholt nicht die Überschrift.

     Christian, 16.09.2026: Die Teamfotos kommen. Jede Person hat deshalb einen runden
     Bildplatz, der bis dahin die Initialen trägt. Das kehrt die Entscheidung vom 14.09.
     um, ohne die Gliederung von damals wegzuwerfen — getauscht wird später nur der
     Inhalt des Kreises, nicht der Aufbau. */
  .kopfperson { display: grid; grid-template-columns: 2.6rem 1fr; gap: .1rem .7rem;
    align-items: center; }
  .kopfperson .kreis { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--papier-warm);
    border: 1px solid var(--linie); font-family: var(--sans); font-size: .78rem;
    font-weight: 600; letter-spacing: .02em; color: var(--text-leise); }
  .kopfperson .nam { align-self: end; }
  .kopfperson .rol { align-self: start; }
  .team-leitung .kopfperson { grid-template-columns: 3.6rem 1fr; gap: .15rem 1rem; }
  .team-leitung .kopfperson .kreis { width: 3.6rem; height: 3.6rem; font-size: 1rem; }
  section.nacht .kopfperson .kreis { background: var(--nacht-karte);
    border-color: var(--linie-nacht); color: var(--text-nacht-leise); }
  .team { display: grid; margin-top: 2.6rem; border-bottom: 1px solid var(--linie); }
  .team-gruppe {
    display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: .8rem 2.5rem;
    padding-block: 1.6rem; border-top: 1px solid var(--linie);
  }
  .team-bereich {
    margin: 0; padding-top: .3rem; display: flex; align-items: baseline; gap: .6rem;
    font-family: var(--sans); font-size: 1rem; font-weight: 620; color: var(--violett);
  }
  .team-zahl { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; line-height: 1; color: var(--orange-text); }
  .team-namen {
    list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1.15rem 2rem;
  }
  .kopfperson .nam {
    display: block; font-family: var(--serif); font-size: 1.32rem; font-weight: 400;
    line-height: 1.2; letter-spacing: -.01em; color: var(--text);
  }
  .kopfperson .rol { display: block; margin-top: .25rem; font-size: .82rem; line-height: 1.4; color: var(--text-zart); }
  .team-leitung .team-namen { grid-template-columns: 1fr; }
  .team-leitung .kopfperson .nam { font-size: clamp(1.75rem, 3.2vw, 2.3rem); letter-spacing: -.02em; }
  @media (max-width: 760px) {
    .team-gruppe { grid-template-columns: 1fr; gap: .9rem; padding-block: 1.3rem; }
    .team-bereich { padding-top: 0; }
    .team-namen { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .95rem 1.2rem; }
    .kopfperson .nam { font-size: 1.18rem; }
    /* Nach der allgemeinen Regel, sonst schrumpft Alex' Name auf die Größe aller anderen. */
    .team-leitung .kopfperson .nam { font-size: 1.6rem; }
  }

  /* ---------- Region ---------- */
  .orte { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .orte li {
    font-family: var(--mono); font-size: .82rem; color: var(--text-leise);
    border: 1px solid var(--linie); border-radius: 2px; padding: .3rem .7rem;
  }

  /* ---------- Anfrage ---------- */
  .anfrage-raster { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 56rem) { .anfrage-raster { grid-template-columns: 1fr; } }
  .formular { display: grid; gap: 1rem; }
  .feld { display: grid; gap: .35rem; }
  .feld label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #B8B0D0; }
  .feld input, .feld select, .feld textarea {
    /* 1rem, nicht .97rem: Safari auf iOS zoomt beim Antippen in jedes Feld hinein,
       dessen Schrift kleiner als 16px ist. Gemessen am 03.09.2026: .97rem sind
       15,52px — knapp darunter. Der Zoom bleibt nach dem Verlassen des Feldes stehen,
       die Seite ist danach verschoben. Das ist der Unterschied zwischen einem
       bedienbaren und einem aergerlichen Formular auf dem Telefon. */
    font-family: var(--sans); font-size: 1rem; padding: .72rem .85rem; border-radius: 2px;
    border: 1px solid var(--linie-nacht); background: var(--nacht-karte); color: #fff;
    transition: border-color .2s ease;
  }
  .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--orange); }
  .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 34rem) { .feld-paar { grid-template-columns: 1fr; } }
  .kontaktliste { margin: 2rem 0 0; }
  .kontaktliste dt, .kontaktliste .dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-hell); margin-top: 1.4rem; }
  .kontaktliste dd, .kontaktliste .dd { margin: .3rem 0 0; color: #D8D2EA; }
  .kontaktliste a { color: #fff; }
  /* Fliesstext-Verweise in dunklen Abschnitten. `a { color: var(--violett) }` aus der
     hellen Fassung gilt hier weiter: #43358B auf #100C1C sind 1,94:1. Betroffen waren
     am 03.09.2026 alle 14 Formulare (der Pflichtverweis auf die Datenschutzerklaerung
     im Einwilligungsfeld und die Telefonnummer in der Bestaetigung) und sieben
     Querverweise in Fach- und Ablaufabschnitten. `.knopf` bleibt ausgenommen: Dort ist
     die dunkle Schrift auf Orange die geprueften 6,73:1. */
  section.nacht p a:not(.knopf),
  section.nacht label a:not(.knopf) { color: #fff; }

  /* ---------- Kopfzeile mit integriertem Band ---------- */

  /* ---------- Schmerz und Nutzen: zwei Spalten mit Kacheln ---------- */
  .vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; }
  @media (max-width: 54rem) { .vergleich { grid-template-columns: 1fr; } }

  .saeule > h3 {
    font-family: var(--mono); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 500; margin-bottom: 1.1rem; padding-bottom: .8rem;
    border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: .6rem;
  }
  .saeule.ohne > h3 { color: var(--text-zart); }
  .saeule.mit > h3 { color: var(--orange-text); border-bottom-color: color-mix(in srgb, var(--orange) 35%, transparent); }

  .stapel { display: grid; gap: .8rem; }
  .zeile {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: .95rem; align-items: start;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
    padding: 1.15rem 1.3rem 1.25rem;
    transition: border-color .22s ease;
  }
  .saeule.mit .zeile {
    border-color: color-mix(in srgb, var(--orange) 22%, var(--linie));
    background: color-mix(in srgb, var(--orange) 3%, var(--flaeche));
  }
  .saeule.mit .zeile:hover { border-color: var(--orange); }

  .zeichen {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
    flex: 0 0 auto; margin-top: .05rem;
  }
  .zeichen svg { width: .78rem; height: .78rem; display: block; }
  .saeule.ohne .zeichen { background: color-mix(in srgb, var(--text-zart) 13%, transparent); }
  .saeule.ohne .zeichen svg { stroke: var(--text-zart); }
  .saeule.mit .zeichen { background: var(--orange); }
  .saeule.mit .zeichen svg { stroke: #fff; }

  .zeile .satz { font-size: 1rem; line-height: 1.45; display: block; margin-bottom: .4rem; letter-spacing: -.006em; }
  .saeule.ohne .satz { color: var(--text-leise); }
  .saeule.mit .satz { color: var(--text); font-weight: 550; }
  .zeile .dazu { font-size: .9rem; line-height: 1.55; color: var(--text-zart); display: block; }

  /* ---------- Gewerk mit Bild ---------- */
  .gewerk { grid-template-columns: 15rem 1fr; }
  @media (max-width: 60rem) { .gewerk { grid-template-columns: 1fr; } }
  .gewerk-bild { margin-bottom: 1rem; }
  .gewerk-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; }
  .gewerk-knopf {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
    font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--violett); text-decoration: none; font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--violett) 35%, transparent);
    padding-bottom: .25rem; transition: color .2s ease, border-color .2s ease, gap .2s ease;
  }
  .gewerk-knopf:hover { color: var(--orange); border-color: var(--orange); gap: .75rem; }

  /* ---------- Ablauf mit Bild ---------- */
  .ablauf-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 58rem) { .ablauf-raster { grid-template-columns: 1fr; } }
  .ablauf-bild { position: sticky; top: 7rem; }
  .ablauf-bild img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 3px; display: block; }
  @media (max-width: 58rem) { .ablauf-bild { position: static; } .ablauf-bild img { aspect-ratio: 16/9; } }

  /* ---------- Shop mit Bild ---------- */
  .shop-raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
  @media (max-width: 54rem) { .shop-raster { grid-template-columns: 1fr; } }
  .shop-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; }

  /* ---------- Anlässe als 2x2 mit grossen Bildern ---------- */
  .anlaesse { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.2rem); }
  @media (max-width: 52rem) { .anlaesse { grid-template-columns: 1fr; } }
  .anlass .bild-rahmen img { aspect-ratio: 16/10; }
  .anlass-innen { padding: 1.8rem 1.9rem 2rem; }
  .anlass h3 { font-size: 1.62rem; }
  .anlass p { font-size: .98rem; line-height: 1.65; }
  .anlass .marke-klein {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-zart); display: block; margin-bottom: .7rem;
  }

  /* ---------- Ablauf als Zeitstrahl ---------- */
  .ablauf { position: relative; padding-left: 0; }
  .schritt {
    grid-template-columns: 5.5rem 1fr; border-top: 0; padding: 0 0 2.6rem;
    position: relative;
  }
  .schritt:last-child { border-bottom: 0; padding-bottom: 0; }
  .schritt::before {
    font-size: 2.4rem; opacity: 1; position: relative; z-index: 2;
    background: var(--papier-warm); padding-bottom: .3rem;
    /* Nur so hoch wie die Ziffer: Als Rasterkind wurde der Kasten auf die Zeilenhöhe gestreckt —
       auf dem Telefon ein 250 px hohes leeres Rechteck neben dem Text (Endkontrolle 25.09.2026). */
    align-self: start;
  }
  .schritt::after {
    content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: -.4rem;
    width: 1px; background: linear-gradient(180deg, var(--orange), color-mix(in srgb, var(--orange) 15%, transparent));
  }
  .schritt:last-child::after { display: none; }
  .schritt-inhalt { padding-top: .35rem; }

  /* ---------- Rechtsseiten ---------- */
  .rechtstext { padding-top: clamp(2.5rem, 5vw, 4rem); }
  .rechtstext h1 { margin-bottom: 1.2rem; }
  .rechtstext h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 2.8rem 0 .9rem;
    padding-top: 1.6rem; border-top: 1px solid var(--linie);
  }
  .rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
  .rechtstext p { margin: 0 0 1rem; }
  .rechtstext .anschrift {
    background: var(--papier-warm); border-left: 3px solid var(--orange);
    padding: 1.1rem 1.3rem; line-height: 1.75; margin: 1.2rem 0 1.4rem;
  }
  /* Eigener Name, nicht `.kontaktliste`: die gehoert dem dunklen Anfrageabschnitt
     und faerbt Links weiss. Auf hellem Grund waeren sie unsichtbar. */
  .rechtsdaten { margin: 1.2rem 0 1.4rem; display: grid; gap: .55rem; }
  .rechtsdaten > div { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
  .rechtsdaten dt, .rechtsdaten .dt {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-zart);
    min-width: 7rem; padding-top: .2rem;
  }
  .rechtsdaten dd, .rechtsdaten .dd { margin: 0; }
  .rechtsdaten a { color: var(--violett); }

  /* ---------- Abschnittskopf mit Linie ---------- */
  .kopfblock { position: relative; padding-top: 1.6rem; }
  .kopfblock::before {
    content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 2px;
    background: var(--orange);
  }

  /* ---------- Fragen als Akkordeon ---------- */
  .fragen { margin-top: 2rem; max-width: 50rem; margin-left: auto; margin-right: auto; }
  .frage { border-top: 1px solid var(--linie); }
  .fragen .frage:last-child { border-bottom: 1px solid var(--linie); }
  .frage > summary {
    display: flex; align-items: flex-start; gap: 1.2rem; cursor: pointer;
    padding: 1.5rem 0; list-style: none;
    font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.36rem); font-weight: 400;
    color: var(--violett); letter-spacing: -.012em; line-height: 1.3;
    transition: color .2s ease;
  }
  .frage > summary::-webkit-details-marker { display: none; }
  .frage > summary::marker { content: ""; }
  .frage > summary:hover { color: var(--orange-text); }
  .frage > summary::after {
    content: ""; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-left: auto;
    margin-top: .3rem; position: relative;
    background:
      linear-gradient(var(--orange), var(--orange)) center/100% 1.5px no-repeat,
      linear-gradient(var(--orange), var(--orange)) center/1.5px 100% no-repeat;
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .frage[open] > summary::after { transform: rotate(135deg); }
  .frage[open] > summary { color: var(--orange-text); }
  .frage-inhalt { padding: 0 3rem 1.7rem 0; }
  .frage-inhalt p { margin: 0 0 .9rem; color: var(--text-leise); }
  .frage-inhalt p:last-child { margin-bottom: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .frage[open] .frage-inhalt { animation: aufklappen .32s cubic-bezier(.2,.8,.3,1); }
    @keyframes aufklappen {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
    }
  }


  /* ---------- Fußzeile ---------- */
  footer.fuss { background: #0A0713; color: var(--text-nacht-leise); padding: 3.5rem 0 2rem; }
  /* Fünf Spalten seit dem 24.09.2026 („Referenzen", Alex 21.09.). Mit minmax(12rem) passten
     bei 1440 px nur vier in eine Reihe, „Weiteres" rutschte allein darunter (Endkontrolle,
     Fensterfoto). 10rem trägt fünf Spalten in der 1184-px-Bahn; auf dem Telefon wie vorher. */
  .fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2.5rem 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.09); }
  .fuss-raster h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-hell); margin-bottom: 1rem; font-weight: 500; }
  .fuss-raster ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
  .fuss-raster li { margin-bottom: .5rem; }
  .fuss-raster a { text-decoration: none; color: var(--text-nacht-leise); }
  .fuss-raster a:hover { color: #fff; text-decoration: underline; }
  .fuss-unten { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-top: 1.6rem; font-size: .84rem; font-family: var(--mono); }

  /* ---------- Plan zur Halle ---------- */
  .plan-zur-halle{padding:clamp(4rem,9vw,7rem) 0}
  .stufen{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1.75rem;
    grid-template-columns:repeat(4,1fr)}
  @media (max-width:1000px){.stufen{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.stufen{grid-template-columns:1fr}}
  .stufe{position:relative}
  .stufe-bild{position:relative;overflow:hidden;border-radius:2px}
  .stufe-bild picture{display:block}
  .stufe-nummer{position:absolute;left:0;bottom:0;padding:.35rem .7rem;
    font-family:"DM Mono",ui-monospace,monospace;font-size:.8rem;letter-spacing:.08em;
    color:#fff;background:#43358B}
  .stufe h3{margin:1rem 0 .35rem;font-size:1.05rem}
  .stufe p{margin:0;font-size:.92rem;line-height:1.6;opacity:.78}
  /* Aufbau beim Scrollen — nur wo der Browser es kann und der Besucher es zulässt */
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .stufe{animation:stufe-auf linear both;animation-timeline:view();
        animation-range:entry 5% cover 26%}
      @keyframes stufe-auf{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}
    }
  }

  /* ---------- Fallstudie ---------- */
  /* Die einzige durchgehend dunkle Seite: ein Projektbuch, keine Unterseite.
     Die Artefakt-Seiten dieses Projekts tragen kein eigenes <body> — deshalb sitzt die
     Kapselung auf einem Wrapper-Div (.fallstudie), nicht auf body.fallstudie. */
  .fallstudie{background:#0d0b16;color:var(--text-nacht)}
  .fallstudie h2{color:#fff}
  .fallstudie h2 em{color:var(--orange-hell)}
  .fallstudie h3{color:#fff}
  .fallstudie strong{color:#fff}
  /* Der Anfrageabschnitt der Fallstudie traegt kein `.nacht`, sondern erbt sein Dunkel
     von `.fallstudie`. Die Regel fuer `section.nacht` greift dort deshalb nicht, und der
     Pflichtverweis auf die Datenschutzerklaerung stand mit 1,97:1 da (gemessen
     03.09.2026). Gleiche Ausnahme fuer `.knopf` wie oben. */
  .fallstudie p a:not(.knopf),
  .fallstudie label a:not(.knopf) { color: #fff; }
  .fallstudie .fuehrend{color:#D8D2EA}
  .fallstudie .augenbraue{color:var(--orange-hell)}
  .fallstudie figcaption{color:var(--text-nacht-leise)}
  /* Kein pauschales ".fallstudie a" mehr: das ueberschrieb die Kopfleisten-Schaltflaeche
     (Kontrast 1,26:1, praktisch unlesbar) und die eigens eingefaerbten Fuss-/Kontaktlinks.
     Stattdessen gezielt dort, wo tatsaechlich unstilisierte Links stehen. */
  .fallstudie header.kopf{
    background: color-mix(in srgb, #0d0b16 88%, transparent);
    border-bottom-color: rgba(255,255,255,.10);
  }
  .fallstudie header.kopf nav a, .fallstudie header.kopf nav .menue-oeffner, .fallstudie header.kopf .fon{color:#ADA6C2}
  .fallstudie header.kopf nav a:hover, .fallstudie header.kopf nav .menue-oeffner:hover, .fallstudie header.kopf nav .menue-oeffner[aria-expanded="true"]{color:#fff}
  .fallstudie header.kopf .knopf-zweit{color:#ADA6C2;box-shadow:inset 0 0 0 1.5px #ADA6C2}
  .fallstudie header.kopf .knopf-zweit:hover{color:#fff;box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)}
  .fallstudie .fall-kopf{position:relative;min-height:82vh;overflow:hidden;display:grid;
    align-items:end}
  .fallstudie .fall-kopf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Kopf mit Standbild statt Schleife (seit 24.09.2026, drei der vier neuen Referenzen haben
     keinen Film): Das <picture> darf kein Rasterkind sein, sonst legt es eine leere Zeile an. */
  .fallstudie .fall-kopf picture{display:contents}
  /* Etwas abgedunkelt (Endkontrolle 24.09.): Auf dem orangen Flammenbild (Saltatio) und den
     Laserstrahlen (Flammende Sterne) waren Kennzahlen und Überschrift schwer lesbar. */
  .fallstudie .fall-kopf .hero-bild,.fallstudie .fall-kopf .wp-block-cover__image-background{opacity:.72}
  .fallstudie .fall-kopf video{opacity:.85}
  .fallstudie .fall-schleier{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(13,11,22,.35) 0%,rgba(13,11,22,.15) 45%,rgba(13,11,22,.92) 100%)}
  .fallstudie .fall-kopf .bahn{position:relative;z-index:1;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
  .fallstudie .kennzahlen{display:grid;grid-template-columns:repeat(3,auto);gap:2.5rem;
    margin-top:2rem;font-family:"DM Mono",ui-monospace,monospace}
  .fallstudie .kennzahl b{display:block;font-size:clamp(1.5rem,3vw,2.25rem);color:#EF7D00}
  .fallstudie .kennzahl span{font-size:.85rem;color:var(--text-nacht-leise)}
  /* Drei Spalten mit `auto` trugen nur kurze Werte (101 · 3 · rund 400). Die vier neuen
     Referenzen (24.09.2026) haben Werte wie „Feuer & Pyro" und „ShowCalling": Bei 390 px lief
     das Raster über den Rand, die Kopfzeile verschob sich und die dritte Kennzahl wurde
     abgeschnitten (Fensterfoto). Unter 40rem deshalb zwei Spalten, die nicht wachsen dürfen. */
  @media (max-width:40rem){
    .fallstudie .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.2rem}
    .fallstudie .kennzahl b{overflow-wrap:anywhere}
    /* Der Bildausschnitt ist auf dem Telefon die helle Bildmitte, und die Kennzahlen liegen
       darauf (Endkontrolle 25.09.2026: Flammen, Traverse, LED-Leinwand). Deshalb dunkler. */
    .fallstudie .fall-kopf .hero-bild,.fallstudie .fall-kopf .wp-block-cover__image-background{opacity:.55}
    .fallstudie .fall-kopf video{opacity:.65}
    .fallstudie .fall-schleier{background:linear-gradient(180deg,rgba(13,11,22,.55) 0%,rgba(13,11,22,.5) 40%,rgba(13,11,22,.96) 100%)}
    .fallstudie .kennzahl span{color:#D8D2EA}
  }
  .fallstudie .breit{width:min(1600px,96vw);margin-inline:auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
  .fallstudie figure{margin:0}
  /* 18rem statt 20rem: Mit 20rem passten bei 1440 px nur drei in die Reihe, das vierte
     Bild stand allein darunter (Endabnahme 16.09.2026). */
  .fallstudie .fall-strecke{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
    gap:1.4rem;margin-top:2rem}
  .fallstudie .fall-film{width:min(1200px,94vw);margin:clamp(3rem,7vw,6rem) auto 0}
  .fallstudie .fall-film video{width:100%;display:block;border-radius:2px}
  /* Seit dem 16.09. steht die Liste in der Textspalte zwischen zwei Absaetzen (Befund R1)
     und braucht deshalb auch nach unten Luft. */
  .fallstudie .fall-schritte{list-style:none;margin:1.4rem 0 1.6rem;padding:0;display:grid;gap:1.1rem;
    counter-reset:schritt}
  .fallstudie .fall-schritte li{padding-left:2.2rem;position:relative}
  .fallstudie .fall-schritte li::before{counter-increment:schritt;content:counter(schritt) ".";
    position:absolute;left:0;top:.05rem;font-family:"DM Mono",ui-monospace,monospace;
    font-size:.85rem;font-weight:500;color:var(--orange-hell)}
  .fallstudie .fall-weiterfuehrend{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:2rem}
  .fallstudie .fall-weiterfuehrend a{font-family:"DM Mono",ui-monospace,monospace;
    font-size:.85rem;color:var(--orange-hell)}
  .fallstudie .fall-weiterfuehrend a:hover{color:#fff}
  @media (prefers-reduced-motion:reduce){.fallstudie .fall-kopf video{display:none}}

  /* ---- Anfrageformular ---------------------------------------------------
     Ergaenzt am 02.09.2026. Vorher hatte das Formular weder Pflichtkennzeichnung
     noch Fehlerdarstellung, weil es ohnehin jede Eingabe wegwarf. */

  /* Ohne diese Regel bleibt alles stehen, was das Skript mit `hidden` ausblendet:
     Jede eigene display-Regel schlaegt das hidden-Attribut des Browsers. Betroffen
     waren die Felder nach dem Absenden und die Fehlerplaetze. */
  [hidden] { display: none !important; }

  .pflicht { color: var(--orange-text); font-weight: 700; }
  .pflicht-hinweis { font-size: .84rem; color: var(--text-leise); margin: .2rem 0 .9rem; }
  section.nacht .pflicht-hinweis { color: var(--text-nacht-leise); }
  /* Dieselbe Luecke wie bei den Verweisen: Die Fallstudie ist dunkel, traegt aber kein
     `.nacht`. #5B5470 auf #0D0B16 sind 2,74:1 (gemessen 03.09.2026). */
  .fallstudie .pflicht-hinweis { color: var(--text-nacht-leise); }

  .feld-fehler {
    margin: .35rem 0 0; font-size: .86rem; line-height: 1.45;
    color: #C0392B; font-weight: 500;
  }
  section.nacht .feld-fehler, .fallstudie .feld-fehler { color: #FF8A7A; }
  .formular [aria-invalid="true"] { border-color: #C0392B; }
  section.nacht .formular [aria-invalid="true"] { border-color: #FF8A7A; }

  .formular-meldung {
    margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 3px;
    background: rgba(192,57,43,.10); border-left: 3px solid #C0392B;
    font-size: .92rem; font-weight: 600; color: #C0392B;
  }
  section.nacht .formular-meldung, .fallstudie .formular-meldung {
    background: rgba(255,138,122,.12); border-left-color: #FF8A7A; color: #FF8A7A;
  }

  .formular-erfolg {
    padding: 1.2rem 1.3rem; border-radius: 3px;
    background: var(--gut-flaeche); border-left: 3px solid var(--gut);
  }
  .formular-erfolg p { margin: 0 0 .5rem; }
  .formular-erfolg p:last-child { margin-bottom: 0; }

  .feld.einwilligung {
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
    align-items: start; margin: 1rem 0 .3rem;
  }
  .feld.einwilligung input { width: 1.1rem; height: 1.1rem; margin-top: .22rem; }
  /* Die Einwilligung ist ein Satz, keine Feldbeschriftung. Sie erbt sonst Versalien,
     Sperrsatz und Schreibmaschinenschrift von `.feld label` — und wird unlesbar.
     Ausgerechnet der Text, dem jemand zustimmen soll, muss sich lesen lassen. */
  .feld.einwilligung label {
    font-family: var(--schrift, inherit); font-size: .9rem; line-height: 1.55;
    font-weight: 400; text-transform: none; letter-spacing: normal;
    color: inherit; opacity: 1;
  }
  .feld.einwilligung label a { text-decoration: underline; }
  .feld.einwilligung .feld-fehler { grid-column: 2; }

  /* Honigtopf: fuer Menschen unsichtbar, fuer Bots verlockend. Bewusst NICHT
     display:none — das erkennen viele Bots und lassen das Feld dann leer. */
  .honigtopf {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; white-space: nowrap;
  }
  /* Deutschlandkarte im Einsatzgebiet. Sie füllt die Spalte, die vorher unter der
     Überschrift leer blieb, und macht „europaweit" zu etwas Sichtbarem.
     Nicht `.karte` nennen: So heißen bereits die Ablaufkacheln, und das figure hätte
     deren Rahmen geerbt. */
  .gebietskarte { margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; }
  .gebietskarte svg { width: 100%; max-width: 27rem; height: auto; display: block; }
  .gebietskarte figcaption { font-size: .82rem; color: var(--text-leise); margin-top: .9rem;
    max-width: 24rem; line-height: 1.55; text-wrap: pretty; }
  @media (max-width: 860px) { .gebietskarte svg { max-width: 20rem; } }
  /* Fachabschnitt der Gewerkeseiten: vier Stufen statt einer Textwand.
     Vorher lief der ganze Abschnitt als eine schmale Spalte durch, teils über 3.500
     Pixel am Stück. Nummer und Überschrift stehen jetzt links, der Text rechts:
     Das gibt Orientierung und halbiert die gefühlte Länge. */
  .fachstufen { margin-top: clamp(2.4rem, 5vw, 3.4rem); display: grid;
    gap: clamp(2rem, 4vw, 3rem); }
  .fachstufe { display: grid; grid-template-columns: 1fr 1.55fr;
    gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
  .fachstufe + .fachstufe { border-top: 1px solid var(--linie-nacht);
    padding-top: clamp(2rem, 4vw, 3rem); }
  .fachstufe h3 { font-family: var(--serif); font-size: clamp(1.28rem, 2.3vw, 1.68rem);
    font-weight: 400; line-height: 1.18; letter-spacing: -.012em; margin: .45rem 0 0;
    text-wrap: balance; }
  .fachstufe .gewerk-nr { margin-bottom: 0; }
  .fachstufe p { margin-bottom: .9rem; }
  .fachstufe p:last-child { margin-bottom: 0; }
  @media (max-width: 820px) {
    .fachstufe { grid-template-columns: 1fr; gap: .8rem; }
  }
  /* Die vier Beispiele standen als Aufzählung mitten im Fließtext und blieben dort
     unbemerkt. Nach vorn geholt füllen sie die Spalte, die unter der Überschrift leer
     blieb, und der stärkste Teil des Arguments wird überfliegbar. */
  .risiken { list-style: none; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 0;
    display: grid; gap: 1.15rem; max-width: 25rem; }
  .risiken li { position: relative; padding-left: 1.9rem; font-size: .93rem;
    color: var(--text-leise); line-height: 1.6; text-wrap: pretty; }
  .risiken li::before { content: ""; position: absolute; left: .1rem; top: .48em;
    width: .62rem; height: .62rem; border: 2px solid var(--orange); border-radius: 50%; }
  .risiken strong { display: block; color: var(--violett); font-weight: 600;
    font-size: .97rem; margin-bottom: .15rem; }
  section.nacht .risiken strong { color: #fff; }
  /* Bild in der linken Spalte des Problem-Abschnitts. Ohne es blieb dort auf jeder
     Seite eine halbe Bildschirmhöhe leer, weil die Überschrift kurz und der Text
     rechts lang ist. Gemessen am 02.09.2026: 350 bis 500 Pixel je Seite. */
  .problembild { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; }
  .problembild img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 3px; display: block; }
  .problembild figcaption { font-size: .84rem; color: var(--text-leise);
    margin-top: .8rem; line-height: 1.55; text-wrap: pretty; max-width: 26rem; }
  section.nacht .problembild figcaption { color: var(--text-nacht-leise); }
  @media (max-width: 820px) { .problembild img { aspect-ratio: 16/10; } }
  /* Die drei Fragen, die die Visualisierung beantwortet. Sie standen als Aufzählung
     mitten im Fließtext; links neben der Überschrift füllen sie die Spalte und sind
     das, was ein Auftraggeber wirklich wissen will. */
  .klaerungen { list-style: none; counter-reset: k; margin: clamp(1.6rem,3.5vw,2.4rem) 0 0;
    padding: 0; display: grid; gap: 1.1rem; max-width: 25rem; }
  .klaerungen li { counter-increment: k; position: relative; padding-left: 2.4rem;
    font-size: .93rem; line-height: 1.6; text-wrap: pretty; }
  .klaerungen li::before { content: counter(k, decimal-leading-zero); position: absolute;
    left: 0; top: .1em; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
    color: var(--orange-text); }
  .klaerungen strong { display: block; font-weight: 600; margin-bottom: .15rem;
    font-size: .97rem; }
  /* Symbole auf den Betriebskacheln. Als Strichzeichnung im Markenton, nicht als Bild:
     Sie geben den vier Kacheln auf den ersten Blick eine Ordnung, ohne etwas zu
     behaupten, das nicht belegt ist. */
  .karte .kartensymbol { width: 2.25rem; height: 2.25rem; color: var(--orange);
    display: block; margin-bottom: 1rem; opacity: .95; }
  section.nacht .karte .kartensymbol { color: var(--orange-hell); }
  /* Symbol im Leistungsblock. Die Startseite hat dort Fotos; auf den Unterseiten
     reichen die rechtefreien Bilder für fünf Blöcke je Seite nicht. Das Symbol gibt
     die Ordnung, ohne ein Foto vorzutäuschen. */
  .gewerk .gewerk-symbol { width: 2.1rem; height: 2.1rem; color: var(--orange);
    display: block; margin-bottom: .9rem; }
  section.nacht .gewerk .gewerk-symbol { color: var(--orange-hell); }
  /* Der Überschriftenblock wandert mit, solange rechts noch Text läuft.
     Grund: In der Zweispalten-Anordnung ist die linke Spalte oft nur ein paar Zeilen
     hoch, die rechte mehrere Bildschirme. Der Leser scrollt dann an einer leeren
     Fläche vorbei und verliert obendrein den Bezug zur Überschrift. Sticky löst
     beides mit einer Zeile, ohne dass Inhalt dazuerfunden werden muss.
     `top` hält Abstand zur festen Kopfzeile. Auf schmalen Geräten stapeln die Spalten
     ohnehin untereinander, dort ist Sticky sinnlos und wird abgeschaltet. */
  @media (min-width: 861px) {
    .zweispalt > .kopfblock,
    /* 7rem = 112px. Die Kopfzeile ist ab 1280px Breite 111px hoch (gemessen
       03.09.2026, darunter 85px). Mit den vorherigen 6.5rem = 104px rutschte die
       Augenbraue des klebenden Blocks 7px unter die durchscheinende Kopfzeile. */
    .fachstufe > div:first-child { position: sticky; top: 7rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .zweispalt > .kopfblock,
    .fachstufe > div:first-child { position: static; }
  }
  /* Benannte Referenzen. Was fehlt, fehlt sichtbar: Ein Eintrag ohne Jahr zeigt
     keines an, statt eines zu erfinden. */
  .referenzliste { list-style: none; margin: 1.6rem 0 0; padding: 0;
    border-top: 1px solid var(--linie); }
  .referenzliste li { display: grid; grid-template-columns: 1fr 1.5fr;
    gap: .5rem clamp(1.2rem, 3vw, 2.5rem); padding: 1.15rem 0;
    border-bottom: 1px solid var(--linie); align-items: baseline; }
  .referenz-name { font-family: var(--serif); font-size: 1.22rem; color: var(--violett);
    line-height: 1.25; }
  .referenz-daten { grid-column: 1; font-family: var(--mono); font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-zart); }
  .referenz-was { grid-column: 2; grid-row: 1 / span 2; font-size: .96rem;
    color: var(--text-leise); line-height: 1.6; text-wrap: pretty; }
  section.nacht .referenzliste,
  section.nacht .referenzliste li { border-color: var(--linie-nacht); }
  section.nacht .referenz-name { color: #fff; }
  section.nacht .referenz-was { color: var(--text-nacht-leise); }
  /* Ohne Beschreibung gibt es nichts fuer Spalte 2, und `1fr 1.5fr` laesst dann die
     rechte Haelfte leer — auf der Tonseite ueber die ganze Liste, weil dort beide
     Eintraege unbeschrieben sind. Genau das laesst einen nackten Namen unfertig
     aussehen: ein Loch im Raster, kein fehlender Text. Die Beschreibungen werden
     NICHT ergaenzt; zu "Saltatio Mortis · Tour" ist nur der Name belegt
     (Faktenbereinigung 15.09.2026, Spec R4). Behoben wird die
     Darstellung. Steht bewusst VOR der Medienabfrage: Unter 700 px ist ohnehin
     alles einspaltig, und diese Regel soll das nicht aushebeln. */
  .referenzliste li.ohne-was { grid-template-columns: 1fr; }
  @media (max-width: 700px) {
    .referenzliste li { grid-template-columns: 1fr; }
    .referenz-was { grid-column: 1; grid-row: auto; }
  }

  /* ---------- Effekte "Buehnenlicht" (16.09.2026 abends, Christians Freigabe: Set A) ----------
     Fuenf ruhige Bewegungen. Regeln, die fuer alle gelten:
     - Nur Bewegung, kein Inhalt haengt daran. Ein Browser ohne Scroll-Animationen
       (Safari vor 26, Firefox) zeigt alles sofort und vollstaendig: Die Einblendung
       steht in @supports, ausserhalb existiert sie nicht.
     - Wer "Bewegung reduzieren" eingestellt hat, bekommt keine dieser Animationen -
       jede steht in @media (prefers-reduced-motion: no-preference). Die globale
       .01ms-Regel reicht dafuer NICHT: Scroll-Animationen haben keine Dauer, und eine
       Endlos-Animation mit .01ms wuerde flackern statt stillstehen.
     - Bewegt wird ausschliesslich ueber `translate`, `scale` und `opacity` - nie ueber
       `transform`, damit die Hover-Regeln der Karten (`transform: translateY`) nicht
       von einer abgeschlossenen Animation ueberschrieben werden.
     - Gemessen in scripts/vorschau_messen.js: vorhanden, nichts bleibt unsichtbar,
       still bei reduzierter Bewegung, kein waagerechtes Scrollen. */

  /* 1. Lichtkegel in den dunklen Abschnitten - zwei weiche Scheine, orange links oben,
        violett rechts unten. Statisch als Farbe, mit Bewegung atmet nur die Deckkraft. */
  section.nacht { isolation: isolate; }
  section.nacht::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(70rem 36rem at 18% 12%, rgba(239,125,0,.15), transparent 62%),
      radial-gradient(60rem 34rem at 84% 88%, rgba(122,106,196,.20), transparent 62%);
    /* Staerke gerechnet, nicht geschaetzt: Fliesstext #B0A8C8 im Kegelzentrum orange
       7,05:1, violett 6,75:1 - beides deutlich ueber 4,5:1 (Messung 16.09.2026). */
  }

  /* 5. Glanz auf den Knoepfen: ein schmaler Lichtstreifen gleitet beim Ueberfahren
        von links nach rechts. Der Knopf schneidet ihn an seinen Kanten ab. */
  .knopf { position: relative; overflow: hidden; }
  .knopf::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
    translate: -180% 0; rotate: 12deg; pointer-events: none;
    transition: translate .75s cubic-bezier(.2,.8,.3,1);
  }
  .knopf:hover::after { translate: 320% 0; }
  .knopf.leise::after { background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); }

  @media (prefers-reduced-motion: no-preference) {
    /* 2. Das Kopfbild atmet: kaum merklich groesser ueber 28 Sekunden, dann zurueck. */
    .hero .hero-bild, .fall-kopf video, .fall-kopf .hero-bild,
    .hero .wp-block-cover__image-background, .fall-kopf .wp-block-cover__image-background {
      animation: atmen 28s ease-in-out infinite alternate; transform-origin: 50% 40%;
    }
    @keyframes atmen { from { scale: 1; } to { scale: 1.07; } }

    /* 1b. Der Lichtkegel atmet mit - nur die Deckkraft, das kostet nichts. */
    section.nacht::after { animation: kegel-atmen 14s ease-in-out infinite alternate; }
    @keyframes kegel-atmen { from { opacity: .72; } to { opacity: 1; } }

    @supports (animation-timeline: view()) {
      /* 3. Einblenden beim Scrollen: Bausteine kommen leicht von unten, sobald sie ins
            Fenster treten, und sind fertig, bevor sie das untere Viertel verlassen. Jeder
            zweite Baustein einer Reihe folgt etwas spaeter - das ergibt die Staffelung. */
      .kopfblock > .augenbraue, .kopfblock > h2, .kopfblock > h3, .kopfblock > .merksatz,
      .kopfblock > .problembild, .klaerungen > li, .risiken > li,
      .versatz > p, .versatz > .fuehrend,
      .gewerk, .karte, .karten > figure, .anlass, .schritt, .fachstufe,
      .referenzliste > li, .frage, .team-gruppe, .fall-strecke > figure,
      .stapel > .zeile, .tabelle-rahmen, .kontaktliste, .anfrage-raster > div,
      .shop-raster > *, .gebietskarte, .orte {
        animation: einblenden linear both; animation-timeline: view();
        animation-range: entry 0% cover 22%;
      }
      .gewerk:nth-child(even), .karte:nth-child(even), .karten > figure:nth-child(even),
      .anlass:nth-child(even), .fachstufe:nth-child(even), .referenzliste > li:nth-child(even),
      .frage:nth-child(even), .fall-strecke > figure:nth-child(even), .stapel > .zeile:nth-child(even),
      .klaerungen > li:nth-child(even), .risiken > li:nth-child(even) {
        animation-range: entry 8% cover 30%;
      }
      @keyframes einblenden { from { opacity: 0; translate: 0 1.1rem; } to { opacity: 1; translate: 0 0; } }

      /* 4. Die Ablauf-Linie zeichnet sich von oben nach unten, waehrend man liest. */
      .schritt::after {
        transform-origin: top; animation: linie-zeichnen linear both;
        animation-timeline: view(); animation-range: entry 10% cover 55%;
      }
      @keyframes linie-zeichnen { from { scale: 1 0; } to { scale: 1 1; } }
    }
  }

/* WordPress-Anpassungen (Task 10): Regeln ohne Gegenstück im Entwurf. Erzeugt von
   scripts/theme_stylesheet.py, jede mit Grund aus der Messung des Probelaufs. */

/* core/columns bringt `body .is-layout-flex { display: flex }` (0,1,1) und `flex-wrap/align-items` mit !important; der Entwurf rastert dieselben Klassen mit display:grid (0,1,0) und verlor (Probelauf 1440 px: Spalten nebeneinander gequetscht). `margin-bottom` ist WordPress' 1.75em unter Spalten. */
body .wp-block-columns.zweispalt, body .wp-block-columns.anfrage-raster, body .wp-block-columns.ablauf-raster,
body .wp-block-columns.shop-raster, body .wp-block-columns.vergleich, body .wp-block-columns.kennzahlen,
body .wp-block-columns.fuss-raster { display: grid; flex-wrap: nowrap !important; align-items: start !important; margin-bottom: 0; }

/* core/column setzt `min-width: 0` und `word-break: break-word`. Im Raster des Entwurfs (auto-Spalten der Kennzahlen) ändert das die Mindestbreiten: Spalten rückten 4–87 px, „ShowCalling“ brach um (Probelauf, Referenzen LifeWave, Waldfestival, Saltatio Mortis). */
body .wp-block-columns > .wp-block-column { min-width: auto; word-break: normal; overflow-wrap: normal; flex-grow: 0; }

/* Die !important-Zeile oben setzte align-items für alle Raster auf start; Anfrage (Entwurf: start) und Shop (Entwurf: center) bekommen ihren Wert aus dem Entwurf zurück. */
.wp-block-columns.fuss-raster { padding-bottom: 2.5rem; }
body .wp-block-columns.anfrage-raster, body .wp-block-columns.shop-raster { align-items: normal !important; }
body .wp-block-columns.shop-raster { align-items: center !important; }

/* WordPress setzt `.is-layout-flex { flex-wrap: wrap }` (0,1,0); die Kopfzeile des Entwurfs ist einzeilig (85 px). Mit Umbruch rutschten Telefonnummer und Knopf in eine zweite Zeile (Probelauf, 1440 px). */
.is-layout-flex.kopf-innen, .is-layout-flex.kopf-rechts, nav.haupt.is-layout-flex { flex-wrap: nowrap; }

/* core/button schreibt `knopf gross leise` an div.wp-block-button, der Verweis ist a.wp-block-button__link (WordPress-Knopfstil: dunkle Pille). Die Hülle trägt deshalb das ganze Aussehen des Entwurfs (alle .knopf-Regeln greifen unverändert), der Verweis wird neutral und spannt seine Klickfläche über die ganze Hülle. */
.wp-block-button.knopf { display: inline-flex; }
.wp-block-button.knopf > .wp-block-button__link {
  all: unset; display: inline; color: inherit; font: inherit; cursor: pointer; white-space: inherit;
}
.wp-block-button.knopf > .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.wp-block-button.knopf:focus-within { outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* section.hero/.fall-kopf sind core/cover (Ruling 12). Cover bringt min-height 430px, padding 1em, Flex-Zentrierung und macht den Innenbehälter zum Bezugsrahmen — Schleier und Korn (position:absolute) deckten dann nur den Text statt das ganze Bild. */
.wp-block-cover.hero { display: block; padding: 0; min-height: 0; }
.wp-block-cover.fall-kopf { padding: clamp(3rem, 6.5vw, 5.5rem) 0; min-height: 0; justify-content: normal; }
.fallstudie .wp-block-cover.fall-kopf { min-height: 82vh; display: grid; align-items: end; }
.wp-block-cover.hero > .wp-block-cover__inner-container { position: static; width: 100%; z-index: auto; }
.wp-block-cover.fall-kopf > .wp-block-cover__inner-container { position: static; width: auto; z-index: auto; }

/* core/cover färbt seinen Inhalt weiß (:where, ohne .has-text-color); der Entwurf erbt die Schriftfarbe — in der Fallstudie #F4F1FB statt #FFF für die Überschrift (Probelauf, alle Referenzseiten). */
.wp-block-cover.hero, .wp-block-cover.fall-kopf { color: inherit; }

/* core/navigation färbt seine Verweise mit `color: inherit` (0,3,0) und schlägt damit `nav.haupt a` des Entwurfs (Probelauf: Leiste in Textschwarz statt text-leise). Der Pfeil ist WordPress' Umschaltknopf statt des .pfeil im Entwurf; Größe wie dort (drehen tut WordPress das Zeichen beim Öffnen selbst). */
header.kopf nav.haupt.wp-block-navigation ul.wp-block-navigation__container { flex-wrap: nowrap; justify-content: flex-start; }
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation-item__content { color: var(--text-leise); cursor: pointer; }
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header.kopf nav.haupt.wp-block-navigation .has-child:has(> [aria-expanded="true"]) > .wp-block-navigation-item__content { color: var(--violett); }
header.kopf nav.haupt.wp-block-navigation .has-child:hover > .wp-block-navigation-item__content::after,
header.kopf nav.haupt.wp-block-navigation .has-child:has(> [aria-expanded="true"]) > .wp-block-navigation-item__content::after { right: 0; }
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation-item__content { color: #ADA6C2; }
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: #fff; }
header.kopf nav.haupt .wp-block-navigation__submenu-icon { width: .7rem; height: .7rem; margin-left: .35rem; }

/* Die Ausklapptafel ist WordPress' .wp-block-navigation__submenu-container statt .untermenue (Task-5-Bericht, Bedenken 2). Maße, Schatten, Einblendung und Verweise wie `nav.haupt .untermenue` im Entwurf; der Selektor ist so lang, weil WordPress die Tafel bei `items-justified-right` mit (0,5,0) rechtsbündig setzt. */
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + 1rem); left: -1rem; right: auto; z-index: 70; padding: .5rem; min-width: 18.5rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; color: var(--text);
  box-shadow: 0 28px 56px -28px rgba(43,33,89,.45), 0 2px 6px -2px rgba(43,33,89,.12);
  translate: 0 -.4rem; transition: opacity .18s ease, translate .18s ease, visibility 0s linear .18s;
}
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__container .has-child:hover > .wp-block-navigation__submenu-container,
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__container .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  translate: 0 0; transition-delay: 0s;
}
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; padding: .55rem .85rem; border-radius: 4px; font-size: .92rem; font-weight: 500;
  color: var(--text); white-space: nowrap;
}
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { background: var(--papier-warm); color: var(--violett); }
header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { font-weight: 620; }
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container { background: #1A1428; border-color: var(--linie-nacht); }
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #fff; }
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fallstudie header.kopf nav.haupt.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { background: rgba(255,255,255,.08); color: #fff; }

/* Das Handymenü des Entwurfs ist ein <details> mit Tafel; core/navigation bringt stattdessen seinen Öffnen-Knopf und ein bildschirmfüllendes Overlay, erst unter 600 px (Entwurf: 70rem). Hier bekommt das Overlay das Aussehen der Tafel (rechts unter dem Knopf, Gruppen mit Titel und eingerückten Unterseiten, Telefon und Knopf am Ende), der Schließen-Knopf liegt als Kreuz genau auf dem Öffnen-Knopf wie im Entwurf. */
@media (min-width: 70.01rem) {
  header.kopf nav.haupt .menue-fon, header.kopf nav.haupt .menue-knopf, header.kopf nav.haupt .menue-shop { display: none; }
  header.kopf nav.haupt .wp-block-navigation-item:has(> a[href$="/wordpress/"]):not(.menue-shop) { display: none; }
}
@media (max-width: 70rem) {
  header.kopf nav.haupt.wp-block-navigation { order: 3; flex: none; }
  header.kopf nav.haupt .wp-block-navigation__responsive-container-open {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--linie); border-radius: 3px; color: var(--text); background: var(--flaeche);
    transition: border-color .2s ease;
  }
  header.kopf nav.haupt .wp-block-navigation__responsive-container-open:hover { border-color: var(--violett); }
  header.kopf nav.haupt .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
  header.kopf nav.haupt .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  header.kopf nav.haupt .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute; inset: calc(100% + .6rem) 0 auto auto; width: min(17rem, calc(100vw - 2.5rem));
    padding: .4rem !important; overflow: visible; animation: none;
    background: var(--flaeche) !important; color: var(--text) !important;
    border: 1px solid var(--linie); border-radius: 3px; box-shadow: 0 20px 44px -18px rgba(22,18,31,.42);
  }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__responsive-container-close {
    top: calc(-44px - 1rem - 1px); right: calc(-.4rem - 1px); width: 44px; height: 44px; display: flex; align-items: center;
    justify-content: center; border: 1px solid var(--violett); border-radius: 3px; background: var(--flaeche);
  }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto;
    display: grid !important; gap: 0 !important;
  }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__container { display: grid !important; gap: 0 !important; align-items: stretch !important; }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation-item { display: grid !important; align-items: stretch !important; gap: 0 !important; }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: flex; align-items: center; min-height: 48px; padding: .4rem .9rem !important; color: var(--text);
    font-size: 1rem; font-weight: 500; line-height: 1.3; border-radius: 2px; white-space: normal;
  }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item > .wp-block-navigation-item__content { border-top: 1px solid var(--linie); }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation-item__content::after { content: none; }
  header.kopf nav.haupt .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
    min-height: 44px; padding: .5rem .9rem .2rem !important; cursor: default;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange-text); font-weight: 500;
  }
  header.kopf nav.haupt.wp-block-navigation .is-menu-open .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
    margin: 0 0 .4rem; padding: 0 0 0 .9rem !important; display: grid !important; gap: 0 !important;
    min-width: 0; border: 0; box-shadow: none; translate: none; background: none;
  }
  header.kopf nav.haupt.wp-block-navigation .is-menu-open .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex; align-items: center; min-height: 40px; padding: .3rem .9rem !important; font-size: .93rem; line-height: 1.3;
    font-weight: 400; color: var(--text-leise); border-left: 2px solid var(--linie); border-radius: 0 2px 2px 0; white-space: normal;
  }
  header.kopf nav.haupt.wp-block-navigation .is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content:hover { background: var(--papier-warm); color: var(--violett); }
  header.kopf nav.haupt.wp-block-navigation .is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] { background: none; color: var(--violett); font-weight: 620; }
  header.kopf nav.haupt.wp-block-navigation .is-menu-open .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { border-left-color: var(--orange); font-weight: 400; color: var(--text-leise); }
  header.kopf nav.haupt .is-menu-open .menue-fon > .wp-block-navigation-item__content { font-family: var(--mono); font-size: .95rem; color: var(--violett); }
  header.kopf nav.haupt .is-menu-open .menue-knopf > .wp-block-navigation-item__content {
    justify-content: center; margin-top: .3rem; background: var(--orange); color: #14111F; font-weight: 600; border-top: 0 !important;
  }
  header.kopf nav.haupt .is-menu-open .menue-knopf > .wp-block-navigation-item__content:hover { background: var(--orange-hell); color: #14111F; }
  header.kopf nav.haupt .is-menu-open .menue-shop > .wp-block-navigation-item__content {
    justify-content: center; margin-bottom: .3rem; color: var(--violett); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--violett);
  }
  header.kopf nav.haupt .is-menu-open .menue-shop > .wp-block-navigation-item__content:hover { background: var(--papier-warm); color: var(--violett); }
}

/* dt/dd sind jetzt Absätze und bekämen `p { margin-bottom: 1.2rem }` bzw. `.rechtstext p { 1rem }`; dt und dd hatten im Entwurf keinen unteren Abstand. */
.definitionsliste > .dt, .definitionsliste > .dd, .definitionsliste > div > .dt, .definitionsliste > div > .dd { margin-bottom: 0; text-wrap: wrap; }
.rechtsdaten > div > .dt, .rechtsdaten > div > .dd { margin-top: 0; }

/* Inline-Läufe in Behältern (hero-fakt, kennzahl, zeile, gewerk-titel, fall-weiterfuehrend) stehen jetzt in einem Absatz, <span>-Marken sind Absätze (Task-4-Bericht). `p { margin; text-wrap: pretty }` machte den Kopf 19 px höher und brach die Kopfzahlen anders um (Probelauf, Startseite 1440 px). */
.hero-fakt > p, .kennzahl > p, .zeile > div > p, .gewerk-titel > p, .fall-weiterfuehrend > p,
p.augenbraue, p.gewerk-nr, p.marke-klein, p.num, p.weiter { text-wrap: wrap; }
.hero-fakt > p, .kennzahl > p, .zeile > div > p, .gewerk-titel > p, .fall-weiterfuehrend > p { margin: 0; }

/* Im Entwurf stand der Film als Inline-Element im Rahmen (Grundlinienlücke darunter); core/video setzt `vertical-align: middle` — die Unterschrift rückte 9 px nach oben (Probelauf, Showeffekte). */
.wp-block-video.bild-rahmen video { vertical-align: baseline; }

/* Die Kartenunterschrift ist eine Gruppe mit Absatz (Task-4-Bericht, Grafikfigur); dessen 1.2rem Außenabstand schob alles darunter 19 px tiefer (Probelauf, Startseite). */
.gebietskarte figcaption > p { margin: 0; }

/* Die Stufennummer war ein <span>; als Absatz griffen `.stufe p` (Schriftgröße .92rem, Deckkraft .78) und `section.nacht p` (Farbe) — Probelauf: 14,7 statt 12,8 px und grau statt weiß. */
.stufe p.stufe-nummer, section.nacht .stufe p.stufe-nummer {
  margin: 0; font-size: .8rem; line-height: inherit; opacity: 1; color: #fff; text-wrap: wrap;
}

/* Im Entwurf stand das Stufenbild als Inline-Bild in <picture>; die Grundlinienlücke darunter trug die Nummer ein Stück unter die Bildkante. figure.wp-block-image macht das Bild zum Block — Nummer und Überschrift saßen 10 px höher (Probelauf, Startseite, Plan zur Halle). */
.stufe-bild > .wp-block-image img { display: inline; vertical-align: baseline; }

/* Aus <span> wurden Absätze: `.gewerk p` (.9rem) bzw. `.anlass p` (1.2rem, Zeilenhöhe 1.65) überstimmten die Klassenregeln — je Leistungsblock 7 px, je Anlasskarte 19 px mehr (Probelauf, Startseite 1440 px). */
.gewerk p.gewerk-nr { margin-bottom: .5rem; }
.anlass p.weiter, .anlass p.marke-klein { line-height: inherit; }
.anlass p.weiter { margin-bottom: 0; }

/* Bildstrecken (.karten, .fall-strecke) sind core/gallery: Flex mit festen Breiten (bis (1,6,0) über :not(#individual-image), daher !important), beschnittene Bilder und Unterschriften als weiße Schrift auf dem Bild. Der Entwurf rastert mit grid und setzt die Unterschrift unter das Bild (Probelauf: Bühne, Show- effekte — Bilder 188 px zu breit, drittes Bild in eigener Reihe, Unterschrift weiß). */
body figure.wp-block-gallery.karten, body figure.wp-block-gallery.fall-strecke { display: grid; }
figure.wp-block-gallery.has-nested-images.karten > figure.wp-block-image,
figure.wp-block-gallery.has-nested-images.fall-strecke > figure.wp-block-image {
  display: block; width: auto !important; margin: 0 !important; flex: none; align-self: stretch;
}
figure.wp-block-gallery.has-nested-images.karten > figure.wp-block-image img,
figure.wp-block-gallery.has-nested-images.fall-strecke > figure.wp-block-image img { width: 100% !important; height: auto !important; flex: none !important; }
figure.wp-block-gallery.has-nested-images.karten > figure.wp-block-image figcaption,
figure.wp-block-gallery.has-nested-images.fall-strecke > figure.wp-block-image figcaption {
  position: static; max-height: none; overflow: visible; padding: 0; margin: .7rem 0 0; background: none;
  color: var(--text-leise); font-size: .87rem; line-height: 1.5; text-align: left; text-shadow: none; will-change: auto;
}
section.nacht figure.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption,
.fallstudie figure.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption { color: var(--text-nacht-leise); }
figure.wp-block-gallery.has-nested-images > figure.wp-block-image:has(figcaption)::before { content: none; }

/* Die weiterführenden Verweise stehen jetzt gemeinsam in einem Absatz: Die Flex-Reihe des Entwurfs gehört deshalb an den Absatz, und `.fallstudie p a { color: #fff }` überstimmte das Orange (Probelauf, Referenzen). */
.fallstudie .fall-weiterfuehrend > p { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.fallstudie .fall-weiterfuehrend p a { color: var(--orange-hell); }
.fallstudie .fall-weiterfuehrend p a:hover { color: #fff; }

/* Die Tabelle ist figure.wp-block-table.tabelle: WordPress zieht unter den Kopf eine 3-px-Linie. Die Spaltennamen des Telefonlayouts kamen aus td[data-spalte], das core/table nicht trägt (Ruling 9) — sie stehen deshalb hier; es gibt genau eine solche Tabelle (Showeffekte). */
.wp-block-table.tabelle { overflow-x: visible; margin: 0; }
.wp-block-table.tabelle thead { border-bottom: 0; }
@media (max-width: 40rem) {
  .tabelle tbody td:nth-child(2)::before { content: "Braucht: "; }
  .tabelle tbody td:nth-child(3)::before { content: "Geht nicht bei: "; }
}

/* Die zwei Kopfknöpfe (Shop, Projekt besprechen; Alex 01.10.2026) stehen in einem core/buttons-Behälter, der seinen eigenen Abstand (.5em) und Umbruch mitbringt; im Entwurf sind sie direkte Kinder von .kopf-rechts mit dessen Abstand (1.2rem am Rechner, .5rem unter 36rem). Nicht im Probelauf gemessen. */
.kopf-rechts > .wp-block-buttons { display: flex; flex-wrap: nowrap; gap: inherit; }

/* Probelauf 01.10.2026: Im Theme blieb der Shop-Knopf bei 360 px stehen (9 px Überlauf auf allen 21 Seiten). `.wp-block-button.knopf { display: inline-flex }` steht hier hinter den Entwurfsregeln `.kopf-rechts .knopf-zweit` / `.kopf-rechts .knopf` und gewinnt bei gleicher Spezifität (0,2,0). Diese Regeln tragen (0,3,0) und stehen dahinter. */
@media (max-width: 24rem) {
  .kopf-rechts .wp-block-button.knopf-zweit { display: none; }
}
@media (max-width: 21rem) {
  .kopf-rechts .wp-block-button.knopf { display: none; }
}

/* Im Entwurf lag das Menü in .kopf-rechts; hier ist nav.haupt ein eigenes Kind der Kopfzeile. Damit Knopf und Menü wie dort rechts zusammenstehen (Abstand .6/1.2rem statt .75/1.25rem), rückt .kopf-rechts nach rechts. Die Telefonnummer steht in einem Absatz — der blieb als leeres Flex-Kind mit Abstand stehen, wenn die Nummer ausgeblendet ist; der Signet-Verweis (inline-block) machte die Kopfzeile unten 9 px höher (Probelauf, 390 px). */
.kopf-rechts > p { display: contents; }
.signet > a { display: block; }
@media (max-width: 70rem) { .kopf-innen > .kopf-rechts { margin-left: auto; } header.kopf nav.haupt.wp-block-navigation { margin-left: -.05rem; } }
@media (max-width: 36rem) { header.kopf nav.haupt.wp-block-navigation { margin-left: -.15rem; } }

/* Das Formular des Themes trägt den Platzhalterabsatz des Entwurfs leer weiter (die Vorschau-Notiz „wird noch nichts abgeschickt“ gehört nicht auf die echte Seite). Leer blieb von ihm ein gestrichelter Kasten über dem Absendeknopf stehen (Probelauf, Pixelabgleich aller Formularseiten bei 390 px). */
.formular .ph:empty { display: none; }

/* Im Entwurf war die ganze Karte ein <a> ohne Unterstreichung; jetzt tragen Bild, Überschrift und „Mehr dazu“ je einen Verweis. Ohne diese Regeln waren sie violett und unterstrichen (Probelauf: „Mehr dazu“ violett statt orange), und nur Text war klickbar — der gestreckte Überschriftverweis macht wieder die ganze Karte klickbar. */
.anlass { position: relative; }
.anlass a { color: inherit; text-decoration: none; }
.anlass h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.anlass .wp-block-image > a { display: block; }

/* Endabnahme A-1: Die Schrittnummern im „Ablauf“ standen im dunklen Abschnitt auf einem fast weißen Kasten (Hintergrund --papier-warm für den hellen Abschnitt der Startseite; Ziffer 2,0 : 1). Betraf 10 Seiten, alle Breiten. Die Linie beginnt ohnehin erst unter der Ziffer (top: 2.6rem). */
section.nacht .schritt::before { background: transparent; }

/* Endabnahme T-1: Zwischen etwa 700 und 760 px (z. B. 200 % Zoom am Laptop) brauchten Signet 142, Nummer 115, beide Knöpfe 353 und Menü 44 px mehr als die 662 px Bahn; die Seite ließ sich seitwärts schieben (gemessen 720 px: 741). Die Nummer steht weiter im Menü, im Fuß und in jedem Anfrageabschnitt. */
@media (max-width: 50rem) { .kopf-rechts .fon { display: none; } }

/* Endabnahme A-6: Die Trennung (hyphens: auto, nötig gegen Überlauf langer Wörter) trennte am Handy „Veranstaltungstech-nik“ und „in-ternationalen“. Mindestens fünf Zeichen vor und nach der Trennstelle: jetzt „Veranstaltungs-technik“ (390 px nachgemessen). */
h1, h2, h3 { hyphenate-limit-chars: 10 5 5; }

/* Endabnahme A-4: Im Kopf der Film-Referenzen (LifeWave, Videomapping) lag Text ohne Abdunklung auf hellen Lichtkegeln (core/cover mit dim 0). Halbe Abdunklung, der Film bleibt erkennbar (1440 px nachgesehen). */
.wp-block-cover.fall-kopf .wp-block-cover__background.has-background-dim { opacity: .5; }

/* Christians Handyfoto 02.10.2026: „Anfrage senden“ stand linksbündig in einem Knopf über die ganze Formularbreite (der Knopf ist ein Flex-Element ohne justify-content; 350 px am Handy, 556 px am Rechner). Steckte schon im Entwurf. */
.formular button.knopf { justify-content: center; }