/* FUNDAMENT Schallplatten — gemeinsame Stile aller Seiten.
   Reihenfolge: Schriften, Tokens, Grundlagen, Seitenkopf,
   Hero (nur Startseite), Inhaltsbausteine. */
/* ============================================================
     TungstenFunda — Hausschrift laut Brand Guidelines S. 15.
     Beide Schnitte sind in der Datei als Gewicht 400 deklariert —
     die @font-face-Angabe überschreibt das, deshalb funktioniert
     font-weight:600 hier korrekt.
     Die WOFF2-Dateien müssen im selben Ordner wie diese CSS-Datei
     liegen. Kein zweiter Pfad als Absicherung: mehrere Quellen
     lassen Safari die Schrift ganz verwerfen, sobald eine davon
     ins Leere läuft.
     ============================================================ */
  @font-face{
    font-family:'TungstenFunda';
    /* Genau EINE Quelle. Mehrere Eintraege waren der Fehler: laeuft
       einer davon ins Leere, bricht Safari die ganze Schrift ab
       statt zum naechsten zu wechseln. Die Datei liegt flach neben
       dieser CSS-Datei. */
    src:url(data:font/woff2;base64,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) format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'TungstenFunda';
    src:url(data:font/woff2;base64,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) format('woff2');
    font-weight:600; font-style:normal; font-display:swap;
  }

:root{
    /* --- Farben. Zwei, keine dritte. Kein Mittelton. (S. 4) ----- */
    --bg:#17181B;          /* Background — Flächen, Hintergründe */
    --mark:#E4E5E7;        /* Primary — Bildmarke, Text, Highlights */

    /* --- Spacing, Basiseinheit 16px (S. 12) --------------------- */
    --space-xs:8px;  --space-s:16px;  --space-m:24px;
    --space-l:32px;  --space-xl:48px;

    /* --- Typografische Skala (S. 5) ------------------------------
       H1/H2/H3 in SemiBold, Fließtext in Book. */
    --fs-h1:3.2rem;   --lh-h1:1.1;  --ls-h1:-0.02em;
    --fs-h2:2.0rem;   --lh-h2:1.2;  --ls-h2:-0.015em;
    --fs-h3:1.5rem;   --lh-h3:1.3;  --ls-h3:-0.01em;
    /* Abweichung vom Styleguide (dort 1rem/16px): TungstenFunda
       laeuft schmal, 16px wirken darin deutlich kleiner als in einer
       Breitschrift. 17px stellen die dort gemeinte Lesegroesse
       wieder her. Eine Zeile zurueckdrehen, falls der Kunde auf dem
       Wert besteht. */
    /* Eine Groesse fuer alle Seiten. Vorher lief die Startseite auf
       bis zu 1.35rem und die Unterseiten auf 1.0625rem — 27 %
       Unterschied bei gleichrangigem Text. 1.125rem liegt dazwischen
       und ist auf 58 Zeichen Zeilenlaenge gut lesbar. */
    --fs-body:1.125rem; --lh-body:1.55; --ls-body:0;
    --fs-small:.9rem; --lh-small:1.5;--ls-small:0.02em;

    /* Der Header ist hier die gesamte Bühne und wird ab Scrollposition 0
       gepinnt. Die gescrubbte Strecke entspricht damit exakt --track. */
    --track:150vh;

    --photo-opacity:.50;   /* Ausgangszustand, bevor der Aufbau beginnt */
    --gutter:clamp(var(--space-m), 4vw, var(--space-xl));

    /* Trennlinien: Primaerfarbe, in der Deckkraft zurueckgenommen.
       Keine neue Farbe im Sinne von S. 4, sondern dieselbe Farbe
       schwaecher aufgetragen. Bei voller Staerke wirken die Linien
       im dunklen Umfeld wuchtiger, als eine Trennung sein muss. */
    /* Dritte Farbe, Styleguide-Erweiterung: reduzierte Primaerfarbe.
       Bewusst fester Hexwert statt opacity — Deckkraft rechnet gegen
       das, was gerade dahinterliegt; ueber einem Foto kaeme ein
       anderer Ton heraus als ueber der Seitenflaeche.
       Entspricht 70 % --mark ueber --bg. Kontrast zu --bg 7.4:1 (AAA). */
    --mark-soft:#A6A7AA;
    --rule:rgba(228,229,231,.28);

    /* --- Abweichung vom Styleguide, mit dem Kunden abgestimmt ------
       Der Styleguide kennt zwei Farben ohne Mittelton. Fuer die
       Einstiegskacheln ist eine gedaempfte Fassung der Primaerfarbe
       freigegeben: die volle Flaeche in --mark ist auf dem dunklen
       Grund zu grell, sobald sie zwei Kacheln gross ist.

       Bewusst als eigene Deckfarbe definiert, nicht ueber opacity am
       Element: opacity wuerde Text und Rahmen mitverblassen und den
       Textkontrast zerstoeren. So bleibt die Schrift voll deckend.

       --mark-soft  = 75% --mark auf --bg  -> 8.37:1 gegen #17181B
                      (AA verlangt 4.5:1, AAA 7:1)
       --rule-solid = 38% --mark auf --bg  -> 3.09:1 gegen #17181B
                      (WCAG 1.4.11 verlangt 3:1 fuer Bedienelemente;
                       --rule liegt mit 2.24:1 darunter und taugt
                       deshalb nur fuer reine Deko-Linien) */
    --mark-soft:#B1B2B4;
    --rule-solid:#656669;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; background:var(--bg); overflow-x:clip}
  body{
    margin:0; background:var(--bg); color:var(--mark);
    font-family:'TungstenFunda', system-ui, sans-serif;
    font-weight:400;
    font-size:var(--fs-body); line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased;
    overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent;
  }
  h1,h2,h3{ font-weight:600 }

  /* ============================================================
     HEADER — trägt hier zugleich den Aufbau der Bildmarke.
     Wird ab Scrollposition 0 gepinnt, steht also während der
     gesamten Animation formatfüllend. overflow:clip fällt damit
     immer mit dem Bildschirmrand zusammen und ist unsichtbar.
     ============================================================ */
  .masthead{
    position:relative;
    height:100vh; height:100svh;
    overflow:clip;
    isolation:isolate;
  }

  .masthead__media{
    position:absolute; inset:0; z-index:0;
    will-change:transform;
  }
  .masthead__img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 46%;
    opacity:var(--photo-opacity);
    display:block;
  }

  /* Scrims. Neu gegenüber Variante A ist der radiale in der Mitte:
     das Foto hat dort helle Wandflächen und weiße Cover — ohne
     Abdunklung bricht die Marke darauf weg. Fest eingebaut, damit
     der Kontrast auch dann steht, wenn GSAP nicht lädt. */
  .masthead__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(ellipse 68% 52% at 50% 44%,
        rgba(23,24,27,.72) 0%, rgba(23,24,27,.34) 46%, rgba(23,24,27,0) 74%),
      linear-gradient(to bottom, rgba(23,24,27,.92) 0%, rgba(23,24,27,.35) 20%, rgba(23,24,27,0) 40%),
      linear-gradient(to top,    rgba(23,24,27,1)   0%, rgba(23,24,27,.70) 7%,  rgba(23,24,27,0) 30%);
  }

  /* ---- Wortmarke --------------------------------------------------
     Aufbau nach dem Lockup S. 6: „FUNDAMENT" in Versalien SemiBold,
     darunter „Schallplatten" gemischt in Book, per Sperrung auf die
     Breite der oberen Zeile gezogen (gemessen: 0,175em).
     Die Unterscheidung der Zeilen läuft über Gewicht, Größe und
     Sperrung — nicht über eine zweite Farbe (S. 4).
     Positioniert wird sie nicht mehr selbst, das übernimmt der
     Seitenkopf. ---------------------------------------------------- */
  .wordmark{
    margin:0; color:inherit; text-decoration:none;
    font-size:clamp(15px, 1.35vw, 19px);
    line-height:1.12;
  }
  .wordmark span{ display:block }
  .wordmark__main{
    font-weight:600; text-transform:uppercase;
    letter-spacing:var(--wm-ls-main, .04em);
  }
  .wordmark__sub{
    font-weight:400; font-size:.66em;
    letter-spacing:var(--wm-ls-sub, .175em);
  }
  .wordmark:focus-visible{ outline:2px solid var(--mark); outline-offset:6px }

  /* ---- Markenebene ------------------------------------------------
     Liegt über Foto und Scrims, füllt den Header. Das Padding hebt
     die Marke aus der rechnerischen in die optische Mitte. --------- */
  .mark-layer{
    position:absolute; inset:0; z-index:3;
    display:grid; place-items:center;
    padding-bottom:8svh;
    pointer-events:none;
  }
  .stage-inner{ width:min(46vw, 44svh, 330px); }
  /* Ein SVG-Root clippt per Default an seiner viewBox. Die einfliegenden
     Segmente liegen weit außerhalb von 0 0 240 260. viewBox bleibt
     unverändert — nur das Clipping wird aufgehoben. */
  .lockup{ width:100%; height:auto; display:block; color:var(--mark); overflow:visible; }
  /* Gehrungsnaehte zwischen den sechs Segmenten schliessen */
  #hex path{ stroke:currentColor; stroke-width:.45; stroke-linejoin:miter; }

  /* ---- Scroll-Hinweis --------------------------------------------- */
  .cue{
    position:absolute; z-index:4;
    left:50%; translate:-50% 0;
    bottom:max(calc(var(--gutter) + 8px), calc(env(safe-area-inset-bottom) + 24px));
    width:1px; height:64px;
    background:rgba(228,229,231,.18);
    overflow:hidden;
  }
  .cue::after{
    content:""; position:absolute; inset-inline:0; top:0; height:22px;
    background:var(--mark);
    animation:cue-run 2.4s cubic-bezier(.65,0,.35,1) infinite;
    will-change:transform;
  }
  @keyframes cue-run{
    0%   { transform:translateY(-100%) }
    55%  { transform:translateY(290%) }
    100% { transform:translateY(290%) }
  }

  .scroll-track{ height:var(--track); }

  @media (max-width:720px){
    :root{ --track:125vh }
    .mark-layer{ padding-bottom:6svh }
    .stage-inner{ width:min(66vw, 46svh, 300px) }
    /* Hochformat schneidet das Panorama hart: Ausschnitt auf Banner
       und Tresen legen, statt mittig ins Leere zu croppen. */
    .masthead__img{ object-position:10% 50% }
    .wordmark{ --wm-ls-main:.04em; --wm-ls-sub:.175em }
    .cue{ height:52px }
  }

  @media (prefers-reduced-motion:reduce){
    :root{ --track:0px; --photo-opacity:.20 }  /* Foto gedimmt, damit die
                                                  Marke ohne Animation liest */
    .cue{ display:none }
  }

  /* ============================================================
     SEITENKOPF UND NAVIGATION
     Fixiert, damit das Menü auf jeder Seite an derselben Stelle
     steht — auch über dem gepinnten Hero. Der obere Scrim des
     Headers liefert den Kontrast gegen das Foto.
     ============================================================ */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--space-m);
    padding-block:max(var(--gutter), env(safe-area-inset-top)) var(--space-s);
    padding-inline:
      max(var(--gutter), env(safe-area-inset-left))
      max(var(--gutter), env(safe-area-inset-right));
    /* Der Rahmen steht schon hier auf transparent. Erst im
       is-solid-Zustand eine Border zu ergaenzen wuerde die Kopfhoehe
       um 1px aendern — ein Layout-Shift, ausgeloest durch Scrollen. */
    border-bottom:1px solid transparent;
    transition:
      transform .34s cubic-bezier(.4,0,.2,1),
      background-color .3s ease,
      border-color .3s ease;
  }

  /* Eigene Flaeche, sobald der Kopf ueber Inhalt statt ueber dem
     Bildkopf steht: ohne sie laufen Menuepunkte in Primaerfarbe
     ueber hellen Bildstellen ins Unlesbare. Volltonflaeche in --bg,
     kein Mittelton, keine Transparenz (S. 4). */
  .site-header.is-solid{
    background:var(--bg);
    border-bottom-color:var(--rule);
  }

  .site-header.is-hidden{ transform:translateY(-100%) }

  /* Bei offenem Overlay traegt das Panel die Flaeche. Zwei
     uebereinanderliegende Volltonflaechen mit Trennlinie dazwischen
     ergaeben eine Kante mitten im Overlay.
     MUSS nach .is-solid stehen — gleiche Spezifitaet, Reihenfolge
     entscheidet. */
  .site-header.is-menu-open{
    background:transparent;
    border-bottom-color:transparent;
  }

  @media (prefers-reduced-motion:reduce){ .site-header{ transition:none } }

  /* Sprungmarke: erster fokussierbare Punkt der Seite, sichtbar nur
     bei Tastaturnutzung. Ohne sie muss sich jeder Screenreader-Nutzer
     auf jeder Seite erst durch das gesamte Menü arbeiten. */
  .skip{
    position:absolute; left:var(--space-s); top:var(--space-s);
    transform:translateY(-200%);
    background:var(--mark); color:var(--bg);
    padding:var(--space-s) var(--space-m);
    font-size:var(--fs-small); font-weight:600; text-decoration:none;
    z-index:80;
  }
  .skip:focus{ transform:none }

  .nav{ display:none }
  /* Bewusst leichter und enger gesetzt als .t-label: beide sind
     Versalien, aber die Navigation muss sich als Bedienelement vom
     Abschnittslabel unterscheiden. Book 12px/.10em gegen
     SemiBold 0.85rem/.24em — zwei klar getrennte Rollen. */
  .nav a{
    color:inherit; text-decoration:none;
    font-size:12px; font-weight:400;
    text-transform:uppercase; letter-spacing:.10em;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    display:inline-flex; align-items:baseline; gap:4px;
    transition:border-color .18s ease, opacity .18s ease;
  }
  .nav a:hover{ border-bottom-color:var(--mark) }
  .nav a:focus-visible{ outline:2px solid var(--mark); outline-offset:6px }
  .nav a[aria-current="page"]{ border-bottom-color:var(--mark) }

  /* Schwelle bewusst hoch: sechs Punkte, davon einer mit 15 Zeichen,
     brauchen Platz. Wird es enger, klappt das Menue auf den Knopf
     zusammen — lieber frueh als knapp. flex-wrap:nowrap verhindert
     zusaetzlich, dass ein Punkt in eine zweite Zeile rutscht: die
     Kopfleiste ist fixiert, eine zweite Zeile legt sich also ueber
     den Inhalt statt ihn wegzuschieben. */
  @media (min-width:1120px){
    .nav{ display:flex; flex-wrap:nowrap; justify-content:flex-end;
          gap:var(--space-l); padding-top:4px }
    .nav-toggle{ display:none }
  }
  .nav a{ white-space:nowrap }

  /* ---- Umschalter (mobil) -------------------------------------
     Wort statt Strichgrafik. Zwei Haarlinien von 1px lesen sich auf
     dieser Seite als Zierde, nicht als Knopf — zwischen all den
     anderen Haarlinien geht die Bedeutung unter. Ein beschriftetes
     Element ist unmissverstaendlich und passt zu einer Seite, die
     ohnehin ueber Typografie funktioniert. Der Text wechselt mit
     aria-expanded, der Zustand steht also nur an einer Stelle. */
  .nav-toggle{
    appearance:none; background:none; border:0; padding:0;
    cursor:pointer; color:inherit; font:inherit;
    font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:.14em;
    border-bottom:1px solid var(--mark); padding-bottom:3px;
  }
  .nav-toggle .is-closed-label{ display:none }
  .nav-toggle[aria-expanded="true"] .is-open-label{ display:none }
  .nav-toggle[aria-expanded="true"] .is-closed-label{ display:inline }
  .nav-toggle:focus-visible{ outline:2px solid var(--mark); outline-offset:6px }

  /* ---- Sprachumschaltung --------------------------------------
     Im Prototyp tauscht sie den Text im Dokument aus. In der
     spaeteren Fassung wird daraus ein Link auf /en/ — eigene URL
     je Sprache, damit sich Seiten verlinken und indexieren lassen.
     Das Markup bleibt dabei gleich. */
  .lang{ display:flex; align-items:baseline; gap:6px;
         font-size:12px; letter-spacing:.10em; text-transform:uppercase }
  .lang button{
    appearance:none; background:none; border:0; padding:0 0 2px;
    font:inherit; color:inherit; cursor:pointer;
    border-bottom:1px solid transparent; opacity:.55;
  }
  .lang button[aria-pressed="true"]{ opacity:1; border-bottom-color:var(--mark) }
  .lang button:focus-visible{ outline:2px solid var(--mark); outline-offset:4px }
  .lang span{ opacity:.4 }
  .nav-panel .lang{ font-size:14px; margin-top:var(--space-m) }

  /* ---- Overlay (mobil) ---------------------------------------- */
  .nav-panel{
    position:fixed; inset:0; z-index:55;
    background:var(--bg);
    display:grid; align-content:center; justify-items:center;
    gap:var(--space-l);
    padding:calc(var(--space-xl) * 2) var(--gutter);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility .3s;
    overscroll-behavior:contain; overflow-y:auto;
  }
  .nav-panel.is-open{ opacity:1; visibility:visible; pointer-events:auto }
  /* Die Menuepunkte sind inline-flex — ohne eigenes Raster fliessen sie
     wie Woerter eines Absatzes nebeneinander und brechen mitten in der
     Zeile um. Auf breiten Fenstern fiel das nie auf, weil jede Zeile
     Platz hatte; auf dem Telefon standen bis zu drei Punkte in einer
     Zeile. Das <nav> bekommt deshalb ein eigenes einspaltiges Raster. */
  .nav-panel nav{
    display:grid;
    gap:var(--space-m);
    justify-items:center;
    width:100%;
  }
  /* Die Sprachumschaltung steht schon im Kopfbereich, der ueber dem
     offenen Panel sichtbar bleibt. Zweimal dasselbe Bedienelement auf
     einem Bildschirm ist eine Fehlerquelle, keine Bequemlichkeit. */
  .nav-panel .lang{ display:none }
  .nav-panel a{
    color:inherit; text-decoration:none;
    font-size:clamp(1.7rem, 8vw, 2.4rem); font-weight:600;
    line-height:1.15; letter-spacing:var(--ls-h2);
    display:inline-flex; align-items:baseline; gap:var(--space-xs);
  }
  .nav-panel a:focus-visible{ outline:2px solid var(--mark); outline-offset:8px }
  @media (min-width:1120px){ .nav-panel{ display:none } }
  @media (prefers-reduced-motion:reduce){
    .nav-panel, .nav-toggle span{ transition:none }
  }

  /* ============================================================
     INFO-SEKTION — Kernkonzept, Ankauf, Besuch
     Durchgehend mittelachsig. Zentrierte Satzbilder brauchen eine
     einzige Spalte — nebeneinanderliegende zentrierte Blöcke
     verlieren die gemeinsame Achse und wirken zufällig.
     Hierarchie über Größe, Gewicht, Position und 1px-Haarlinien in
     voller Primärfarbe. Keine Graustufen, keine Flächen (S. 4).
     Alle Abstände sind Vielfache von 16px (S. 12).
     ============================================================ */
  /* Nur .info traegt den Abstand zwischen den Abschnitten. .block
     hatte denselben Wert noch einmal — zwischen zwei Abschnitten
     standen dadurch bis zu 384px Nichts. */
  /* Linksbuendig ist die Grundeinstellung. Vorher stand hier center,
     und zwoelf weitere Regeln haben es einzeln wieder zurueckgenommen —
     jede neue Komponente erbte erst die Zentrierung und musste sie
     abschalten. Zentriert wird jetzt nur noch dort, wo es ausdruecklich
     hingehoert: Logo-Buehne und .page-hero, beide mit eigener Regel. */
  /* Vorher 1.6 = 77px. Zwei Abschnitte ergaben dadurch 154px reinen
     Leerraum, bevor ueberhaupt Innenabstaende dazukamen. 48px oben und
     unten trennen die Abschnitte weiterhin klar, ohne Loecher. */
  .info{ padding-block:var(--space-xl); text-align:left }
  .wrap{
    width:min(100% - var(--gutter) * 2, 760px);
    margin-inline:auto;
  }
  .wrap--wide{ width:min(100% - var(--gutter) * 2, 1100px) }

  /* Größe aus der Skala, Semantik aus der Gliederung: die Kernaussage
     ist ein h2, trägt aber die H1-Größe. Nach oben auf den
     Guideline-Wert gedeckelt, nach unten für schmale Viewports
     geklemmt. */
  .t-h1{
    font-size:clamp(2.1rem, 7.5vw, var(--fs-h1));
    line-height:var(--lh-h1); letter-spacing:var(--ls-h1);
    font-weight:600; margin:0; text-wrap:balance;
  }
  .t-h2{
    font-size:clamp(1.6rem, 5vw, var(--fs-h2));
    line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
    font-weight:600; margin:0; text-wrap:balance;
  }
  .t-label{
    font-size:var(--fs-small); line-height:var(--lh-small);
    letter-spacing:.24em; text-transform:uppercase;
    font-weight:600; margin:0;
  }
  /* Zentrierte Fließtexte brauchen eine engere Zeile als linksbündige:
     ohne feste Anfangskante wird das Auge beim Rücksprung sonst
     unsicher. Daher 42ch statt der üblichen 60–70ch. */
  /* Frueher 42ch und mittig: zentrierter Satz hat keine feste
     Anfangskante, deshalb musste die Zeile kurz bleiben. Mit fester
     linker Kante faellt der Grund weg — 58ch entspricht der Breite
     im Dokumentraster, damit lesen alle Absaetze der Seite gleich. */
  .info p{ margin-inline:0; max-width:58ch }
  /* Vorher space-m zwischen jedem Element. Zusammen mit den
     Bildpaaren, die selbst schon Abstand mitbringen, ergaben sich
     Luecken mitten im Lesefluss. */
  .lede{ display:grid; gap:var(--space-s); justify-items:start }
  /* justify-items:start laesst jedes Kind auf Inhaltsbreite
     schrumpfen. Fuer Absaetze richtig, fuer ein zweispaltiges
     Bildpaar falsch: es blieb schmaler als der Container, rechts
     entstand Leerraum und die Bildkanten der beiden Paare lagen
     nicht uebereinander. */
  .lede > .paar{ justify-self:stretch; width:100% }
  /* .lede p hatte eine eigene Groesse — faellt weg, s. --fs-body. */

  /* ---- Ankauf: eigener Block, von Haarlinien gefasst ---------- */
  .band{
    margin-block:calc(var(--space-xl) * 1.25);
    border-block:1px solid var(--rule);
    padding-block:calc(var(--space-xl) + var(--space-s));
    display:grid; gap:var(--space-l); justify-items:center;
  }

  /* Ablauf in drei Schritten. Zahlen aus dem Listenzähler, damit die
     Reihenfolge auch ohne Sicht erhalten bleibt. */
  .steps{
    list-style:none; counter-reset:s; margin:0; padding:0;
    display:grid; gap:var(--space-m); width:100%;
  }
  @media (min-width:721px){
    /* auto-fit statt fester Spaltenzahl: die Reihe traegt drei wie
       vier Schritte, ohne dass eine Zelle allein in der zweiten
       Zeile landet. */
    .steps{ grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:var(--space-l) }
  }
  /* Regel der Seite: was in Spalten oder als Liste steht, richtet
     sich links aus. Nur einzelne Aussagen stehen mittelachsig.
     Zentrierte Spalten haben keine gemeinsame Anfangskante — das
     Auge findet keine Struktur, obwohl eine da ist. */
  .steps li{ counter-increment:s; display:grid; gap:var(--space-xs);
             justify-items:start; text-align:left }
  .steps li::before{
    content:counter(s,decimal-leading-zero);
    font-size:var(--fs-small); letter-spacing:.18em; font-weight:600;
  }
  .steps p{ font-size:var(--fs-small); line-height:var(--lh-small); max-width:26ch }

  /* Textlink mit eigener Unterlinie: text-decoration ließe sich nicht
     sauber auf Distanz und Stärke kontrollieren. */
  /* Unterstreichung statt Rahmenlinie: eine Rahmenlinie sitzt am
     unteren Rand der Zeilenbox und wirkt dadurch als Balken unter
     dem Text. text-decoration folgt der Schriftlinie und laesst
     sich in Staerke und Abstand feiner einstellen. Im Ruhezustand
     zurueckgenommen, beim Zeigen in voller Staerke. */
  .link{
    display:inline-flex; align-items:baseline; gap:var(--space-xs);
    color:inherit;
    font-size:var(--fs-h3); font-weight:600; letter-spacing:var(--ls-h3);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:.3em;
    text-decoration-color:var(--rule);
    transition:text-decoration-color .18s ease;
  }
  .link--small{ font-size:var(--fs-small); letter-spacing:.06em; text-underline-offset:.35em }
  .link:hover{ text-decoration-color:var(--mark) }
  .link:focus-visible{ outline:2px solid var(--mark); outline-offset:6px }

  /* Kontaktzeile des Ankaufs. Umbricht auf schmalen Viewports, die
     beiden Links bleiben dabei als Paar auf der Achse. */
  .contact{
    display:flex; flex-wrap:wrap; justify-content:center;
    align-items:baseline; gap:var(--space-xs) var(--space-m);
    font-size:var(--fs-small); letter-spacing:.06em;
  }

  /* ---- Besuch ------------------------------------------------- */
  .visit{ display:grid; gap:calc(var(--space-xl) + var(--space-s)); justify-items:center }
  .visit__item{ display:grid; gap:var(--space-m); justify-items:center }
  .visit address{ font-style:normal; font-size:1.35rem; line-height:1.45 }

  /* Öffnungszeiten als Definitionsliste: Tag und Zeit sind ein
     Begriffspaar. Zwei Spalten, die als Paar auf der Mittelachse
     stehen — Tage rechtsbündig, Zeiten linksbündig, damit die Fuge
     eine saubere Kante bekommt. */
  .hours{
    margin:0; display:grid; grid-template-columns:auto auto;
    justify-content:center; gap:var(--space-xs) var(--space-l);
    font-size:1.05rem;
  }
  .hours dt{ font-weight:400; text-align:right }
  .hours dd{ margin:0; text-align:left; font-variant-numeric:tabular-nums }
  /* Kein Abdunkeln einzelner Zeilen: der Styleguide kennt zwei
     Farben, und eine abgesenkte Deckkraft erzeugt genau den
     Mittelton, den S. 4 ausschliesst. Die Unterscheidung zwischen
     Tag und Zeit laeuft ueber das Schriftgewicht. */

  /* ---- Karte --------------------------------------------------
     Direkt eingebettet. Achtung: das iframe kontaktiert Google beim
     Seitenaufbau und überträgt dabei die IP des Besuchers. Soll das
     hinter eine Consent-Lösung, wird src durch data-src ersetzt und
     erst nach Zustimmung gesetzt — Markup und Styling bleiben gleich.
     aspect-ratio reserviert den Platz, es springt nichts nach. */
  .map-fig{ margin:0; width:100%; justify-items:stretch }
  .map-fig .t-label{ text-align:center }
  .map{
    width:100%; aspect-ratio:4/3;
    border:1px solid var(--rule);
    position:relative; overflow:hidden;
  }
  @media (min-width:721px){ .map{ aspect-ratio:16/9 } }
  .map iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    /* Google liefert die Karte farbig. grayscale+invert zieht sie ins
       Monochrome — sonst steht eine bunte Fläche gegen ein
       Zweifarbensystem (S. 4). Eine Zeile löschen und die Karte ist
       wieder im Google-Original. */
    filter:grayscale(1) invert(.92) contrast(1.05) brightness(.95);
  }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }


  /* ============================================================
     UNTERSEITEN
     ============================================================ */
  .page-head{
    padding-block:calc(var(--space-xl) * 3) calc(var(--space-xl) * 1.5);
    text-align:center;
  }
  .page-head .lede{ gap:var(--space-m) }

  /* ---- Reihen -------------------------------------------------
     Kein Name-links-Text-rechts mit Haarlinien: das ist das
     Default-Muster jeder Aufzaehlung und liest sich wie ein
     Inhaltsverzeichnis, nicht wie ein Programm.

     Stattdessen ein Raster aus Bloecken ohne Linien, der Name in
     Plakatgroesse. Die laufende Nummer davor macht aus der
     Aufzaehlung ein Programm — so wie ein Label seine Releases
     durchnummeriert. Sie kommt aus einem CSS-Zaehler und nicht aus
     dem Markup: kommt eine Reihe dazu oder faellt eine weg,
     stimmt die Nummerierung von selbst.

     Die Liste bleibt <ul>, nicht <ol>: die Reihen sind nicht
     gereiht, die Nummer ist Gestaltung. Als generierter Inhalt
     wird sie von Screenreadern ueblicherweise nicht vorgelesen —
     genau richtig fuer etwas rein Dekoratives. */
  .programm{
    list-style:none; margin:0; padding:0;
    counter-reset:reihe;
    display:grid; gap:calc(var(--space-xl) * 1.4) var(--space-xl);
  }
  @media (min-width:781px){
    .programm{ grid-template-columns:1fr 1fr }
  }
  .programm > li{
    counter-increment:reihe;
    display:grid; gap:var(--space-s); align-content:start;
  }
  .programm > li::before{
    content:counter(reihe, decimal-leading-zero);
    font-size:var(--fs-small); letter-spacing:.24em;
    font-variant-numeric:tabular-nums;
    opacity:.45;
  }
  .programm h3{
    margin:0; font-weight:600;
    font-size:clamp(1.7rem, 3.2vw, 2.5rem);
    line-height:1.02; letter-spacing:-.01em;
    max-width:16ch;
  }
  /* .82 auf --mark ueber --bg sind rund 12:1 — der Text tritt
     hinter den Namen zurueck, bleibt aber klar lesbar. */
  .programm p{ margin:0; max-width:44ch; opacity:.82 }

  /* Bild je Reihe, freiwillig. Fehlt es, faellt der Block auf
     Nummer, Name und Text zurueck — es entsteht kein leeres Feld.
     Liegen spaeter fuer ALLE Reihen Motive vor, macht zusaetzlich
     die Klasse .programm--bilder am <ul> daraus ein dreispaltiges
     Kartenraster. Mehr ist fuer den Wechsel nicht noetig. */
  .programm__bild{
    margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:3px;
    background:rgba(228,229,231,.04);
  }
  .programm__bild img{ display:block; width:100%; height:100%; object-fit:cover }

  @media (min-width:1041px){
    .programm--bilder{ grid-template-columns:repeat(3, 1fr);
                       gap:calc(var(--space-xl) * 1.1) var(--space-l) }
  }
  .programm--bilder h3{ font-size:clamp(1.4rem, 2.4vw, 1.8rem); max-width:20ch }

  /* ---- Mitschnitte --------------------------------------------
     Kein iframe im Markup. Drei YouTube-Einbindungen laden je rund
     500 KB und kontaktieren Google beim Seitenaufbau. Stattdessen
     eine Attrappe: erst der Klick erzeugt den Player, dann ueber
     youtube-nocookie.com. Spart Ladezeit und verschiebt die
     Datenuebertragung auf eine bewusste Handlung. */
  .clips{
    display:grid; gap:var(--space-l);
    grid-template-columns:1fr;
  }
  @media (min-width:721px){
    .clips{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) }
  }
  .clip{ margin:0; display:grid; gap:var(--space-s) }
  .clip__frame{
    position:relative; aspect-ratio:16/9;
    border:1px solid var(--rule);
    background:var(--bg);
    display:grid; place-items:center;
    width:100%; padding:0; cursor:pointer;
    color:inherit; font:inherit;
    transition:border-color .2s ease;
  }
  .clip__frame:hover{ border-color:var(--mark) }
  .clip__frame:focus-visible{ outline:2px solid var(--mark); outline-offset:4px }
  .clip__frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  /* Abspielzeichen aus derselben Geometrie wie die Marke: ein
     gleichseitiges Dreieck, keine Fremdgrafik. */
  .clip__play{
    width:0; height:0;
    border-left:22px solid var(--mark);
    border-block:13px solid transparent;
    margin-left:6px;
  }
  .clip figcaption{
    font-size:var(--fs-small); line-height:var(--lh-small);
    letter-spacing:.02em; text-align:left;
  }
  .clip__note{
    display:block; margin-top:4px; opacity:.6;
    text-transform:uppercase; letter-spacing:.16em; font-size:11px;
  }

  .outro{
    margin-top:calc(var(--space-xl) * 2);
    padding-top:calc(var(--space-xl) + var(--space-s));
    border-top:1px solid var(--rule);
    display:grid; gap:var(--space-m); justify-items:center; text-align:center;
  }
  .outro .links{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-m) }

  /* Ausgangszustand nur, wenn das Skript ihn auch wieder aufloesen
     kann — daher an js-reveal gebunden. */
  .js-reveal .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .75s ease, transform .75s cubic-bezier(.2,.6,.2,1);
    will-change:opacity, transform;
  }
  .js-reveal .reveal.is-in{ opacity:1; transform:none; will-change:auto }
  @media (prefers-reduced-motion:reduce){
    .js-reveal .reveal{ opacity:1; transform:none; transition:none }
  }


  /* ============================================================
     STARTSEITE — Rhythmus der Inhaltsflaeche
     Zentriert gesetzte Blöcke haben keine gemeinsame Anfangskante,
     an der sich Struktur ablesen liesse. Der Ausgleich läuft hier
     über drei Mittel: starker Schriftkontrast, sehr viel Stille um
     die Kernaussage, und Elemente, die über die volle Breite gehen
     statt in der Textspalte zu bleiben.
     ============================================================ */

  /* Randlose Trennlinie: sitzt ausserhalb der Textspalte und läuft
     von Kante zu Kante. Bricht die Spalte auf, ohne Inhalt zu
     brauchen — der Taktwechsel entsteht allein aus der Breite. */
  .rule-full{
    border:0; border-top:1px solid var(--rule);
    margin:0; width:100%;
  }

  /* Die Ankunft nach der Animation. Der Block bekommt bewusst mehr
     Luft als alles andere — Stille ist hier das Gestaltungsmittel,
     nicht Verschwendung. */
  .arrival{ padding-block:calc(var(--space-xl) * 2) calc(var(--space-xl) * 1.5) }
  /* Groesse UND Deckkraft entfielen hier bewusst: der Text stand auf
     85 % und war damit nicht nur groesser, sondern auch blasser als
     derselbe Text auf den Unterseiten. Zwei Abweichungen in einer
     Regel, beide ohne Grund. */

  /* Mittlere Stufe zwischen Überschrift und Fliesstext. Ohne sie
     springt die Seite von 3,2rem direkt auf 1rem — dieser Sprung
     ist der Hauptgrund, warum eine Seite flach wirkt. */
  /* Als p.statement notiert, nicht als .statement: die Regel .info p
     weiter oben ist spezifischer und wuerde max-width sonst
     ueberschreiben, ohne dass man es merkt. Der Wert gilt in ch,
     bezieht sich also auf die Zeichenbreite von TungstenFunda —
     bei einer schmal laufenden Schrift entspricht 36ch etwa dem,
     was in einer Breitschrift 24ch waeren. */
  .info p.statement{
    font-size:clamp(1.5rem, 4vw, 2.1rem);
    line-height:1.25; letter-spacing:var(--ls-h2);
    font-weight:600; margin:0;
    max-width:36ch; margin-inline:auto; text-wrap:balance;
  }

  .block{ padding-block:0; display:grid; gap:var(--space-m); justify-items:center }
  .block .t-label{ opacity:.7 }

  /* Öffnungszeiten sind die meistgesuchte Angabe auf der Seite
     eines Ladens. Sie tragen hier den Block, statt als Kleinkram
     unter einem Label zu stehen. */
  .hours--lead{
    font-size:clamp(1.25rem, 3.6vw, 1.75rem);
    gap:var(--space-xs) var(--space-xl);
    line-height:1.25;
  }
  .hours--lead dt{ font-weight:400 }
  .hours--lead dd{ font-weight:600 }

  .facts{
    display:grid; gap:var(--space-s); justify-items:center;
    font-size:1.05rem;
  }
  .facts address{ font-style:normal; line-height:1.5 }

  /* Karte von Kante zu Kante: als Band schliesst sie die Seite ab,
     statt als Rechteck in der Spalte zu schweben. */
  .map--bleed{ aspect-ratio:3/2; border-inline:0 }
  @media (min-width:721px){ .map--bleed{ aspect-ratio:24/9 } }


  /* ============================================================
     FAKTENBLOCK
     Kernaussagen bleiben mittelachsig — dort trägt die Zentrierung,
     weil es einzelne kurze Sätze sind. Die Fakten stehen dagegen in
     Spalten und linksbündig: Adresse, Zeiten und Kontakt sind
     gleichrangige Angaben, und drei gleich beginnende Spalten
     zeigen das auf einen Blick. Zentriert untereinander gestapelt
     sahen sie aus wie drei zufällig verstreute Zettel.
     ============================================================ */
  .facts-grid{
    display:grid; gap:0;
    grid-template-columns:1fr;
    text-align:left;
    border-top:1px solid var(--rule);
  }
  .facts-col{
    padding:calc(var(--space-l) + var(--space-xs)) 0;
    border-bottom:1px solid var(--rule);
    display:grid; gap:var(--space-m); align-content:start;
  }
  @media (min-width:721px){
    .facts-grid{
      grid-template-columns:repeat(3, 1fr);
      border-bottom:1px solid var(--rule);
    }
    .facts-col{
      border-bottom:0; border-left:1px solid var(--rule);
      padding:calc(var(--space-xl)) var(--space-l);
    }
    .facts-col:first-child{ border-left:0; padding-left:0 }
    .facts-col:last-child{ padding-right:0 }
  }
  .facts-col .t-label{ text-align:left; opacity:.7 }
  .facts-col address{ font-style:normal; font-size:1.15rem; line-height:1.45 }
  .facts-col .stack{ display:grid; gap:var(--space-xs); justify-items:start }

  /* Zeilenabstand hier bewusst eng: der Fliesstext-Wert von 1,6
     reisst Tabellenzeilen soweit auseinander, dass sie nicht mehr
     als zusammengehörige Liste lesbar sind. */
  .hours--cols{
    grid-template-columns:auto auto; justify-content:start;
    gap:6px var(--space-m); font-size:1.1rem; line-height:1.3;
  }
  .hours--cols dt{ text-align:left; font-weight:400 }
  .hours--cols dd{ text-align:left; font-weight:600 }

  /* ---- Bildband ------------------------------------------------
     Von Kante zu Kante, flach im Format. Unterbricht die Textstrecke
     ohne eine eigene Aussage zu behaupten — es ist Atem, kein
     Inhalt. Deckkraft zurückgenommen, damit es nicht mit dem
     Header-Foto um Aufmerksamkeit kämpft. */
  .band-img{
    width:100%; margin:0; display:block;
    /* Keine Rahmenlinie: eine Kontur waere genau die harte Kante,
       die das Bild hier nicht haben soll. */
  }
  .band-img img{
    display:block; width:100%; height:100%;
    aspect-ratio:16/9; object-fit:cover; object-position:50% 55%;
    opacity:.5;

    /* Weicher Auslauf nach oben und unten: eine Maske blendet die
       Bildkanten in Transparenz aus, das Bild geht dadurch in den
       Hintergrund ueber statt an einer Linie aufzuhoeren.
       Links und rechts braucht es nichts — dort ist der
       Bildschirmrand, es gibt nichts zu verblenden.
       Der Wert ist eine Maske, kein Verlauf in Farbe: waere es eine
       aufgelegte Flaeche, muesste sie die Hintergrundfarbe kennen
       und wuerde bei invertierten Farben (S. 4) falsch liegen. */
    -webkit-mask-image:linear-gradient(to bottom,
       transparent 0%, #000 26%, #000 74%, transparent 100%);
            mask-image:linear-gradient(to bottom,
       transparent 0%, #000 26%, #000 74%, transparent 100%);
  }
  @media (min-width:721px){ .band-img img{ aspect-ratio:24/8 } }


  /* ============================================================
     BILDKOPF DER UNTERSEITEN
     Deutlich flacher als der Hero der Startseite — dort steht die
     Marke im Mittelpunkt, hier nur die Seitenüberschrift. Gleiche
     Bildsprache, aber ohne Anspruch auf denselben Auftritt.
     ============================================================ */
  .page-hero{
    position:relative;
    min-height:52svh;
    display:grid; place-items:center;
    overflow:clip; isolation:isolate;
    padding:calc(var(--space-xl) * 2) var(--gutter) calc(var(--space-xl) * 1.5);
    text-align:center;
  }
  @media (max-width:720px){ .page-hero{ min-height:44svh } }

  .page-hero__media{ position:absolute; inset:0; z-index:0 }
  .page-hero__media img{
    width:100%; height:100%; object-fit:cover; object-position:50% 50%;
    display:block; opacity:.42;
  }
  /* Oben abdunkeln fuer den Seitenkopf, unten in --bg aufloesen,
     damit der Uebergang zum Inhalt keine Kante hat. */
  .page-hero__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(23,24,27,.92) 0%, rgba(23,24,27,.4) 26%, rgba(23,24,27,.15) 50%),
      linear-gradient(to top,    rgba(23,24,27,1)   0%, rgba(23,24,27,.6) 22%, rgba(23,24,27,0) 60%);
  }
  /* Bewusste Ausnahme: der Seitenkopf steht ueber einem randlosen Foto.
     Dort wird nicht gelesen, sondern geschaut — ein zentrierter Titel
     liest sich als Titelkarte, nicht als Fliesstext. Zusammen mit der
     Logo-Buehne die einzige Stelle, die noch zentriert. */
  .page-hero__inner{ position:relative; z-index:2; display:grid; gap:var(--space-m); justify-items:center }
  .page-hero__inner p{ margin-inline:auto; max-width:42ch }

  /* ---- Eingefasstes Bild im Textfluss -------------------------
     Anders als das randlose Band: hier gehoert das Bild zum
     Abschnitt und behaelt seine Kanten, damit erkennbar bleibt,
     dass es einen bestimmten Gegenstand zeigt. */
  .figure{ margin:0; display:grid; gap:var(--space-s); justify-items:center; width:100% }
  .figure img{
    width:100%; height:auto; display:block;
    border:1px solid var(--rule);
  }
  .figure figcaption{
    font-size:var(--fs-small); line-height:var(--lh-small);
    opacity:.7; max-width:46ch; text-align:center;
  }


  /* ============================================================
     BUTTON
     Gefuellte Flaeche in Primaerfarbe, Schrift in der
     Hintergrundfarbe. Das ist die staerkste Betonung, die das
     Zweifarbensystem hergibt — deshalb hoechstens einer pro
     Abschnitt, sonst hebt sich keiner mehr ab.
     ============================================================ */
  .btn{
    display:inline-block; text-decoration:none;
    font:inherit; font-weight:600;
    font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.14em;
    color:var(--bg);
    /* Flaeche zurueckgenommen: volles Primaerweiss leuchtet auf dem
       dunklen Grund zu hart. Die Schrift bleibt in voller
       Hintergrundfarbe, der Kontrast liegt weiterhin ueber 12:1. */
    background:rgba(228,229,231,.86);
    border:1px solid transparent;
    border-radius:3px;
    padding:var(--space-s) calc(var(--space-l) + var(--space-xs));
    transition:background-color .18s ease;
  }
  .btn:hover{ background:var(--mark) }
  .btn:focus-visible{ outline:2px solid var(--mark); outline-offset:4px }

  /* Zweitrangige Handlung neben dem Button: als Textlink, nicht als
     zweite Flaeche. Zwei gleich starke Flaechen nebeneinander
     zwingen zu einer Entscheidung, die niemand treffen will. */
  .cta{ display:grid; gap:var(--space-m); justify-items:center }
  /* Handlungsblock mittig unter dem Abschnitt. Bewusste Ausnahme von
     der linken Kante: der Knopf ist kein Lesetext, sondern Abschluss
     des Abschnitts — wie die Ueberschrift darueber. */
  .cta--start{ justify-items:center; text-align:center }
  .cta--start .contact--start{ justify-content:center }

  /* ============================================================
     ANKAUFBEREICH
     Text ueber dem Bild hat nicht getragen: die Aufnahme ist zu
     detailreich, jeder Kontrast im Hintergrund arbeitet gegen die
     Buchstaben. Bild und Text stehen deshalb untereinander — das
     Bild als weich auslaufendes Band, der Text darunter auf
     ruhiger Flaeche und in groesserer Stufe.
     ============================================================ */
  .info p.statement--lead{
    font-size:clamp(1.75rem, 5.2vw, 2.6rem);
    line-height:1.18; max-width:26ch;
  }
  .pitch{ padding-top:var(--space-l) }
  .pitch p{ max-width:46ch }

  /* ============================================================
     FUSSBEREICH
     Traegt Adresse, Zeiten und Kontakt vor dem Bild der Ladenfront.
     Das Bild laeuft nach oben in den Hintergrund aus, damit der
     Uebergang aus dem Inhalt keine Kante hat.
     ============================================================ */
  .site-footer{
    position:relative; overflow:clip; isolation:isolate;
    padding-block:calc(var(--space-xl) * 2.5) calc(var(--space-xl) + var(--space-s));
    margin-top:calc(var(--space-xl) * 1.5);
  }
  .site-footer__media{ position:absolute; inset:0; z-index:0 }
  .site-footer__media img{
    width:100%; height:100%; object-fit:cover; object-position:50% 42%;
    display:block; opacity:.32;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
  }
  .site-footer__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(23,24,27,1) 0%, rgba(23,24,27,.62) 34%, rgba(23,24,27,.8) 100%);
  }
  .site-footer__inner{ position:relative; z-index:2 }

  /* Karte als Anker links, Angaben rechts daneben. Keine Trennlinien:
     vor einem Bild wirken Rahmen wie ein zweites Raster ueber dem
     ersten. Die Gruppen trennt hier der Abstand. */
  .footer-grid{
    display:grid; gap:var(--space-xl);
    grid-template-columns:1fr;
    text-align:left; align-items:start;
  }
  @media (min-width:861px){
    .footer-grid{ grid-template-columns:260px 1fr; gap:calc(var(--space-xl) + var(--space-s)) }
  }
  .footer-cols{
    display:grid; gap:var(--space-xl);
    grid-template-columns:1fr;
  }
  @media (min-width:601px){
    .footer-cols{ grid-template-columns:repeat(3, auto); justify-content:start;
                  gap:calc(var(--space-xl) + var(--space-s)) }
  }
  .footer-col{ display:grid; gap:var(--space-s); align-content:start }
  /* Absaetze tragen von Haus aus einen Aussenabstand von 1em. Ohne
     Ruecksetzen startet die Kontaktspalte rund 17px tiefer als die
     Spalten daneben — die Oberkanten liegen dann nicht auf einer
     Linie. */
  .footer-col p, .footer-col dl, .footer-col address{ margin:0 }
  .footer-col .t-label{ text-align:left; opacity:.65 }
  .footer-col address{ font-style:normal; font-size:1.15rem; line-height:1.5 }
  .footer-col .stack{ display:grid; gap:var(--space-xs); justify-items:start }

  .footer-meta{
    display:flex; flex-wrap:wrap; align-items:baseline;
    gap:var(--space-xs) var(--space-l);
    margin:calc(var(--space-xl) + var(--space-s)) 0 0;
    padding-top:var(--space-l);
    border-top:1px solid var(--rule);
    font-size:var(--fs-small); opacity:.6;
  }
  .footer-meta a{ color:inherit; text-decoration:underline;
                  text-decoration-color:var(--rule); text-underline-offset:.3em }
  .footer-meta a:hover{ text-decoration-color:var(--mark) }

  /* Karte klein und beim Standort: sie beantwortet die Frage
     "wo ist das" und gehoert deshalb neben die Adresse, nicht als
     Band ueber die volle Breite. */
  .map--mini{
    width:100%; aspect-ratio:1/1;
    border-color:var(--rule);
  }
  @media (max-width:860px){ .map--mini{ max-width:340px; aspect-ratio:3/2 } }


  /* ============================================================
     LESBARKEIT AUF DEN INHALTSSEITEN
     TungstenFunda laeuft schmal — 16px wirken darin kleiner als in
     einer Breitschrift. Die Fliesstexte in den Inhaltsbloecken
     laufen deshalb eine Spur groesser als der Grundwert.
     ============================================================ */
  .block p{ font-size:1.18rem }
  .block p.t-label{ font-size:var(--fs-small) }
  .block p.contact{ font-size:var(--fs-small) }

  /* Schritte tragen die Seite mit — also duerfen sie nicht
     fluestern. Zahl gross und gesetzt, Text auf Lesegroesse. */
  .steps li::before{
    font-size:1.5rem; letter-spacing:.06em; font-weight:600; opacity:.45;
  }
  .steps h3, .steps h4{ font-size:var(--fs-small); text-align:left }
  .steps p{ font-size:1.03rem; line-height:1.5; max-width:30ch }
  .steps li{ gap:var(--space-s) }

  /* ---- Zwei Spalten: was wir nehmen, was nicht -----------------
     Eine Aufzaehlung, die zwei Seiten hat, gehoert nebeneinander.
     Untereinander liest man die zweite Liste als Fortsetzung der
     ersten und uebersieht die Verneinung. */
  /* Keine Linien. Zwei Listen mit eigener Überschrift und genug
     Abstand lesen sich ohne Weiteres als zwei Gruppen — eine Linie
     wiederholt nur, was die Anordnung ohnehin sagt. Der Abstand ist
     dafuer bewusst gross: er ist jetzt das einzige Trennmittel. */
  .pairs{
    display:grid; gap:var(--space-xl); grid-template-columns:1fr;
    text-align:left; width:100%;
  }
  @media (min-width:721px){ .pairs{ grid-template-columns:1fr 1fr } }
  .pairs__col{
    padding:0; display:grid; gap:var(--space-m); align-content:start;
  }
  @media (min-width:721px){
    .pairs{ column-gap:var(--space-l); gap:var(--space-l) }
  }
  /* Zweispaltiger Abschnitt: Fliesstext links, Aufzaehlung rechts.
     Einspaltig blieben rechts 44 % des Containers leer, weil das
     Textmass bei 58 Zeichen endet — verbreitern waere der falsche
     Weg, laengere Zeilen lesen sich schlechter. Die Flaeche wird
     stattdessen belegt. */
  @media (min-width:961px){
    .doc__body--zwei{
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      column-gap:calc(var(--space-xl) + var(--space-s));
      align-items:start;
    }
    /* Der Leitsatz laeuft ueber beide Spalten — er gehoert zum
       ganzen Abschnitt, nicht zur linken Haelfte. */
    .doc__body--zwei > .doc__lead{ grid-column:1 / -1 }
    /* In der halben Spalte greift die 58ch-Grenze ohnehin nicht mehr;
       ohne diese Zeile bliebe rechts in der Spalte nochmal Rest. */
    .doc__body--zwei > p{ max-width:none }
  }

  .pairs ul{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-s) }
  /* Vorher 1.12rem und damit groesser als der Fliesstext daneben —
     zwei Textsorten gleichen Rangs muessen dieselbe Groesse haben. */
  .pairs li{ font-size:var(--fs-body); line-height:var(--lh-body); padding-left:var(--space-m); position:relative }
  .pairs li::before{
    content:""; position:absolute; left:0; top:.62em;
    width:8px; height:1px; background:var(--mark);
  }
  /* Frueher stand diese Liste abgedunkelt da. Das erzeugt denselben
     Mittelton, den wir bei den Öffnungszeiten entfernt haben — und
     die Überschrift sagt bereits, worum es geht. */

  /* Liste und Schritte gehoeren zum Textblock darueber — also naeher
     an ihn heran als an den naechsten Abschnitt. Ohne das schwebt
     die Liste zwischen zwei Bloecken und man weiss nicht, zu
     welchem sie gehoert. */
  .pairs-wrap, .steps-wrap{ margin-top:calc(var(--space-xl) + var(--space-s)) }


  /* ============================================================
     DOKUMENTRASTER — Inhaltsseiten
     Ein einziges Raster fuer alle Abschnitte: das Label steht in
     einer schmalen Spalte links, der Inhalt in einer breiten
     rechts. Beide Kanten laufen ueber die gesamte Seite durch.

     Damit fallen zwei Ursachen fuer Unruhe weg. Erstens die
     wechselnden Textbreiten — vorher liefen Absaetze auf 760px und
     Listen auf 1100px, die Seite hatte an keiner Stelle eine
     gemeinsame Kante. Zweitens der Kapitelcharakter: als Randnotiz
     kuendigt ein Label den Abschnitt an, statt ihn zu eroeffnen.

     Die Startseite bleibt mittelachsig. Sie ist eine Aussage, die
     Unterseiten sind Auskunft — zwei Aufgaben, zwei Anordnungen.
     ============================================================ */
  .doc{
    display:grid; gap:var(--space-m);
    text-align:left;
  }
  /* Keine Label-Spalte mehr. Vorher sass die Bezeichnung in einer
     170px breiten Spalte links, der Text begann erst dahinter — die
     Seite hatte dadurch zwei linke Kanten, und die Textkante lag
     170px rechts von der Kachelkante. Jetzt steht das Label als
     Ueberschrift ueber seinem Abschnitt, alles auf einer Kante. */
  .doc__label{ text-align:left; margin:0 0 var(--space-xs) }
  .doc__body{ display:grid; gap:var(--space-l); min-width:0 }
  /* .info zentriert und mittet Absaetze — im Dokumentraster gilt
     die linke Kante. */
  .doc__body p{ margin-inline:0; max-width:58ch }
  .doc__lead{
    font-size:clamp(1.5rem, 3.4vw, 2rem);
    line-height:1.25; letter-spacing:var(--ls-h2);
    font-weight:600; margin:0; max-width:24ch;
  }

  /* ---- Schritte untereinander ---------------------------------
     In einer 620px-Spalte haben vier nebeneinanderliegende Spalten
     keinen Platz. Untereinander mit der Zahl links liest sich der
     Ablauf ohnehin naeher an dem, was er ist: eine Reihenfolge. */
  .steplist{
    list-style:none; margin:0; padding:0; counter-reset:s;
    display:grid; gap:var(--space-l);
  }
  .steplist li{
    counter-increment:s;
    display:grid; grid-template-columns:2.4em 1fr;
    gap:var(--space-s); align-items:baseline;
  }
  .steplist li::before{
    content:counter(s, decimal-leading-zero);
    font-size:1.2rem; font-weight:600; letter-spacing:.04em;
  }
  .steplist h3{ margin:0; font-size:var(--fs-small); letter-spacing:.18em;
                text-transform:uppercase; font-weight:600 }
  .steplist p{ margin:var(--space-xs) 0 0; max-width:52ch }
  .steplist__text{ min-width:0 }
  /* Frueher justify-items:start. Der Handlungsblock steht jetzt
     mittig — die Regel hier hat die weiter oben still ueberschrieben,
     weil sie spaeter in der Datei steht. */
  .cta--start{ justify-items:center }
  .contact--start{ justify-content:center }

  /* Breitere Fassung fuer Abschnitte, deren Inhalt selbst ein Raster
     ist — Reihenliste und Mitschnitte brauchen mehr als 620px. */
  /* .doc--wide ist gegenstandslos, seit es keine Spaltenaufteilung
     mehr gibt. Der Selektor bleibt vorerst im Markup stehen, damit
     kein toter Verweis entsteht. */
  /* Im Dokumentraster richtet sich auch aus, was sonst mittig steht. */
  .doc .outro{ justify-items:start; text-align:left; margin-top:calc(var(--space-xl)) }
  .doc .outro .links{ justify-content:flex-start }
  .doc .outro p{ margin-inline:0 }
  .doc .figure{ justify-items:start }
  .doc .figure figcaption{ text-align:left; margin-inline:0 }


  /* ==================================================================
     EINSTIEGSKACHELN — Verkaufen und Kaufen, direkt unter dem Kopf.
     Mobile first: eine Spalte ist der Ausgangszustand, die zweite
     kommt erst ab 861px dazu.
     ================================================================== */

  .einstiege{
    /* clip, nicht hidden: hidden auf einem Vorfahren setzt
       position:sticky im Rest der Seite ausser Kraft. clip schneidet
       den Einflug von rechts ab, ohne einen Scroll-Container zu
       erzeugen. */
    overflow-x:clip;
    padding-block:var(--space-xl);
  }

  .einstiege__grid{
    display:grid; gap:var(--space-s);
    grid-template-columns:1fr;
  }
  @media (min-width:861px){
    .einstiege__grid{ grid-template-columns:1fr 1fr; gap:var(--space-m) }
  }

  .einstieg{
    display:flex; flex-direction:column;
    /* Auf dem Handy stehen zwei Kacheln untereinander. 340px Mindest-
       hoehe je Kachel wuerden dort zwei Bildschirme fuellen, bevor
       ueberhaupt Inhalt kommt — deshalb erst ab Tablet. */
    padding:var(--space-l);
    border:1px solid var(--rule-solid);
    border-radius:4px;
    background:var(--bg);
    color:var(--mark);
    text-decoration:none;
    transition:
      transform .5s cubic-bezier(.22,1,.36,1),
      opacity .5s cubic-bezier(.22,1,.36,1),
      background-color .28s ease,
      border-color .28s ease,
      color .28s ease;
  }
  @media (min-width:721px){
    .einstieg{ padding:var(--space-xl); min-height:340px }
  }

  .einstieg__kicker{
    font-size:var(--fs-small); letter-spacing:.24em; text-transform:uppercase;
    font-weight:600; margin:0 0 var(--space-m);
  }
  .einstieg__titel{
    font-size:clamp(1.75rem, 6vw, 2.75rem); line-height:1.1;
    letter-spacing:var(--ls-h1); font-weight:600;
    margin:0 0 var(--space-m);
  }
  .einstieg__text{
    margin:0; max-width:44ch;
    font-size:var(--fs-body); line-height:var(--lh-body);
  }
  .einstieg__text + .einstieg__text{ margin-top:var(--space-s) }

  .einstieg__mehr{
    margin-top:auto; padding-top:var(--space-l);
    font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
    font-weight:600;
    display:flex; align-items:center; gap:var(--space-xs);
  }
  .einstieg__pfeil{
    display:inline-block;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }

  /* ---- Zeigergeraete: Invertierung in der gedaempften Fassung ---- */
  @media (hover:hover){
    .einstieg:hover{
      background:var(--mark-soft);
      border-color:var(--mark-soft);
      color:var(--bg);
      transform:translateY(-4px);
    }
    .einstieg:hover .einstieg__pfeil{ transform:translateX(6px) }
  }

  /* ---- Touch: kein Hover, also Rueckmeldung beim Antippen -------
     Ohne das wirkt die Kachel auf dem Handy tot — man tippt und es
     passiert sichtbar nichts, bis die neue Seite laedt. */
  .einstieg:active{
    background:var(--mark-soft);
    border-color:var(--mark-soft);
    color:var(--bg);
  }

  .einstieg:focus-visible{
    outline:2px solid var(--mark); outline-offset:3px;
  }

  /* ---- Einflug von rechts ---------------------------------------
     Der Ausgangszustand haengt an .js-einstiege am <html>: ohne
     Skript oder bei Bewegungsreduktion stehen die Kacheln normal da.
     Auf schmalen Schirmen kuerzerer Weg — 64px sind dort ein
     Fuenftel der Bildschirmbreite und wirken wie ein Ruckeln. */
  .js-einstiege .einstieg{ opacity:0; transform:translateX(32px) }
  @media (min-width:861px){
    .js-einstiege .einstieg{ transform:translateX(64px) }
  }
  .js-einstiege .einstieg.is-in{ opacity:1; transform:none }

  @media (prefers-reduced-motion:reduce){
    .einstieg, .einstieg__pfeil{ transition:none }
    .js-einstiege .einstieg{ opacity:1; transform:none }
  }

/* ====================================================================
   GESCHAEFTSBEREICHE — zwei Einstiegskacheln auf der Startseite
   Mobile First: der Grundzustand gilt fuer das Telefon, jede
   @media-Regel baut nach oben auf.
   ==================================================================== */

  .bereiche{
    padding-block:var(--space-xl);
    /* clip, nicht hidden: hidden auf einem Vorfahren setzt
       position:sticky im Rest der Seite ausser Kraft. Gebraucht wird
       es, weil die Kacheln von rechts hereinfahren. */
    overflow-x:clip;
  }
  @media (min-width:721px){
    .bereiche{ padding-block:calc(var(--space-xl) * 2) }
  }

  .duo{
    display:grid;
    gap:var(--space-s);
    grid-template-columns:1fr;          /* Telefon: untereinander */
  }
  @media (min-width:861px){
    .duo{ grid-template-columns:1fr 1fr; gap:var(--space-m) }
  }

  /* <a> statt <div> mit Klick-Handler: fokussierbar, tastaturbedienbar,
     per Mittelklick in neuem Tab zu oeffnen — ohne eine Zeile JS. */
  .kachel{
    display:flex; flex-direction:column;
    /* Telefon ohne feste Mindesthoehe: zwei 340px-Kacheln
       untereinander waeren auf einem 667px-Geraet zwei volle
       Bildschirme, bevor der naechste Abschnitt beginnt. */
    min-height:0;
    padding:var(--space-l);
    border:1px solid var(--rule);
    border-radius:4px;
    background:var(--bg);
    color:var(--mark);
    text-decoration:none;
    /* Eigene Ausrichtung, nicht geerbt: .info zentriert seinen Inhalt,
       und ohne diese Zeile stand dieselbe Kachel auf der Startseite
       mittig und auf der Verkaufen-Seite links. Eine Komponente muss
       ueberall gleich aussehen, egal worin sie haengt. */
    text-align:left;
    transition:
      transform .5s cubic-bezier(.22,1,.36,1),
      opacity   .5s cubic-bezier(.22,1,.36,1),
      background-color .28s ease,
      border-color .28s ease,
      color .28s ease;
  }
  @media (min-width:861px){
    .kachel{ min-height:340px; padding:var(--space-xl) }
  }


  .kachel__titel{
    /* clamp statt Breakpoints: skaliert stufenlos, die Schrift
       springt an keiner Kante. */
    font-size:clamp(1.75rem, 6vw, 2.75rem);
    line-height:1.1; letter-spacing:var(--ls-h1);
    font-weight:600; margin:0 0 var(--space-m);
  }

  .kachel__text{
    margin:0; max-width:44ch;
    font-size:var(--fs-body); line-height:var(--lh-body);
  }
  .kachel__text + .kachel__text{ margin-top:var(--space-s) }

  .kachel__mehr{
    margin-top:auto; padding-top:var(--space-l);
    font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
    font-weight:600;
    display:flex; align-items:center; gap:var(--space-xs);
  }
  .kachel__pfeil{
    display:inline-block;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }

  /* Zeigergeraete: Hover.
     @media (hover:hover) schliesst Touch aus — dort bliebe der Zustand
     nach dem Antippen kleben, bis woanders getippt wird. */
  @media (hover:hover){
    .kachel:hover{
      background:var(--mark-soft); color:var(--bg); border-color:var(--mark-soft);
      transform:translateY(-4px);
    }
    .kachel:hover .kachel__pfeil{ transform:translateX(6px) }
  }

  /* Touch: :active ist die einzige Rueckmeldung, die ein Telefon geben
     kann — ohne das waere die Kachel mobil ein toter Block. Kein
     translateY: unter dem Finger ist die Bewegung nicht sichtbar. */
  .kachel:active{
    background:var(--mark-soft); color:var(--bg); border-color:var(--mark-soft);
  }

  /* Tastatur: derselbe Zustand plus sichtbarer Ring. */
  .kachel:focus-visible{
    background:var(--mark-soft); color:var(--bg); border-color:var(--mark-soft);
    outline:2px solid var(--mark); outline-offset:3px;
  }

  /* Einflug von rechts. Ausgangszustand haengt an .js-duo am <html>:
     ohne Skript oder bei Bewegungsreduktion stehen die Kacheln da. */
  .js-duo .kachel{ opacity:0; transform:translateX(32px) }
  @media (min-width:861px){
    .js-duo .kachel{ transform:translateX(64px) }
  }
  .js-duo .kachel.is-in{ opacity:1; transform:none }

  @media (prefers-reduced-motion:reduce){
    .kachel, .kachel__pfeil{ transition:none }
    .js-duo .kachel{ opacity:1; transform:none }
  }

/* ====================================================================
   INFO-KACHEL — Kachel ohne Verlinkung
   Bewusst OHNE Hover-Invertierung und ohne Pfeil: ein Element, das
   auf Mausbewegung reagiert, sieht anklickbar aus. Wenn dann nichts
   passiert, ist das kein Effekt, sondern ein Fehler. Rueckmeldung
   gibt es nur dort, wo auch ein Ziel dahintersteht.
   ==================================================================== */

  .kachel--info{
    display:flex; flex-direction:column;
    min-height:0;
    /* Deutlich knapper als die verlinkten Kacheln der Startseite: die
       tragen zwei Absaetze und eine Handlungsaufforderung, diese hier
       je einen kurzen Text. Gleiches Innenmass haette nur Leerraum
       erzeugt. */
    padding:var(--space-m);
    /* Rahmen auf der weichen Primaerfarbe statt auf der Haarlinie —
       hebt die Kachel vom Grund ab, ohne die Flaeche zu fuellen. */
    border:1px solid var(--mark-soft);
    border-radius:4px;
    background:var(--bg);
    color:var(--mark);
    text-align:left;
    /* Nur transform und opacity — fuer den Einflug. Keine Farb-
       uebergaenge, weil es keinen zweiten Zustand gibt. */
    transition:
      transform .5s cubic-bezier(.22,1,.36,1),
      opacity   .5s cubic-bezier(.22,1,.36,1);
  }
  @media (min-width:721px){
    .kachel--info{ padding:var(--space-m) }
  }

  /* Die Ziffer traegt die Reihenfolge sichtbar — das <ol> traegt sie
     semantisch. Beides muss da sein: ohne Liste weiss eine
     Sprachausgabe nicht, dass es Schritte in Reihenfolge sind. */
  .kachel--info .kachel__nr{
    font-size:var(--fs-small); font-weight:600; letter-spacing:.04em;
    color:var(--mark-soft);
    margin:0 0 var(--space-s);
  }
  .kachel--info h4{
    margin:0 0 var(--space-s);
    font-size:var(--fs-small); letter-spacing:.18em;
    text-transform:uppercase; font-weight:600;
  }
  .kachel--info p{
    margin:0; max-width:38ch;
    font-size:var(--fs-body); line-height:var(--lh-body);
  }

  /* Raster fuer die Ablaufschritte. auto-fit statt fester Spaltenzahl:
     bricht selbsttaetig auf 2 und 1 Spalte um, ohne Breakpoint. */
  .kachelliste{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-s);
    grid-template-columns:1fr;
    /* Die Kacheln fahren beim Einblenden 32px von rechts herein und
       ragen dabei aus ihrem Container. Ohne Beschneidung erzeugt das
       waagerechtes Scrollen — auf dem Telefon der stoerendste
       Fehler ueberhaupt. clip statt hidden, damit position:sticky
       im Rest der Seite unberuehrt bleibt. */
    overflow-x:clip;
  }
  /* 2x2 statt 1x4. Vier Kacheln nebeneinander ergaben in der
     Textspalte je rund 210px — schmale, hohe Saeulen mit stark
     unterschiedlich langem Text und dadurch ungleichen Leerraeumen
     unten. Zwei mal zwei ergibt doppelt so breite Kacheln, kuerzere
     Zeilen pro Umbruch und ein symmetrisches Feld. */
  @media (min-width:641px){
    .kachelliste{ grid-template-columns:repeat(2, 1fr); gap:var(--space-m) }
  }
  /* Vier Spalten, sobald Platz ist. Bei zwei Spalten waren die Kacheln
     rund 420px breit und trugen drei Zeilen Text — der Rest blieb
     leer. Schmalere Kacheln fuellen sich staerker und die Hoehen
     gleichen sich an. */
  @media (min-width:1041px){
    .kachelliste{ grid-template-columns:repeat(4, 1fr); gap:var(--space-s) }
  }

  /* Einflug: gleiche Mechanik wie bei den verlinkten Kacheln. */
  .js-duo .kachel--info{ opacity:0; transform:translateX(32px) }
  @media (min-width:861px){
    .js-duo .kachel--info{ transform:translateX(64px) }
  }
  .js-duo .kachel--info.is-in{ opacity:1; transform:none }

  @media (prefers-reduced-motion:reduce){
    .kachel--info{ transition:none }
    .js-duo .kachel--info{ opacity:1; transform:none }
  }

/* ====================================================================
   BILD NEBEN TEXT
   Bild und Textblock als gleichrangiges Paar. Fuellt die rechte
   Haelfte, die einspaltig leer blieb, ohne das Textmass zu dehnen.
   ==================================================================== */

  .paar{
    display:grid; gap:var(--space-l);
    grid-template-columns:1fr;          /* Telefon: Bild ueber Text */
    align-items:center;
  }
  @media (min-width:861px){
    /* Gleich breite Spalten. Vorher 1.25 zu 1 — die Textspalte war
       576px, der Absatz aber auf 52 Zeichen (416px) gedeckelt.
       160px blieben ungenutzt und wirkten wie ein Loch zwischen
       Text und Bild. Bei 1:1 ist die Spalte 562px breit, das
       entspricht rund 56 Zeichen: der Absatz fuellt sie aus und
       bleibt lesbar. */
    .paar{ grid-template-columns:1fr 1fr; gap:calc(var(--space-xl) + var(--space-s)) }
    /* Umgekehrte Reihenfolge fuer den Wechsel Bild links / Bild rechts.
       Ueber order, nicht ueber die Markup-Reihenfolge: im Quelltext
       bleibt der Text immer vor dem Bild, sonst laesen Sprachausgaben
       je nach Abschnitt eine andere Reihenfolge vor. */
    .paar--bild-links > .paar__bild{ order:-1 }
    /* order allein tauscht nur die Reihenfolge, nicht die Breiten.
       Ohne das lag das Bild in der breiteren Spalte, sobald es links
       stand — die beiden Bildpaare untereinander hatten dadurch
       unterschiedlich breite Bilder und versetzte Kanten. */
    .paar--bild-links{ grid-template-columns:1fr 1fr }
  }

  .paar__bild{
    margin:0;
    border-radius:4px;
    overflow:hidden;      /* haelt das Bild in der gerundeten Ecke */
    background:var(--bg);
  }
  .paar__bild img{
    display:block; width:100%; height:100%;
    object-fit:cover;
    /* Feste Proportion: reserviert den Platz vor dem Laden, dadurch
       springt beim Nachladen nichts. */
    aspect-ratio:4/3;
  }
  .paar__bild--hoch img{ aspect-ratio:3/4 }
  .paar__bild--quadrat img{ aspect-ratio:1/1 }

  /* Detailreiches Motiv, das Zeichnung braucht: bekommt die breitere
     Spalte statt der haelftigen Teilung. */
  @media (min-width:861px){
    .paar--bild-gross{ grid-template-columns:1fr 1.45fr }
    .paar--bild-gross.paar--bild-links{ grid-template-columns:1.45fr 1fr }

    /* Ausnahme vom Hoehenabgleich. Der Abgleich ist richtig, wenn
       Text und Bild aehnlich viel Inhalt tragen. Hier steht ein
       dreizeiliger Absatz neben einem Schaufoto — das Bild auf drei
       Zeilen Hoehe zu druecken zerstoert es. Also behaelt es seine
       Proportion, der Text steht oben daneben. */
    .paar--bild-gross{ align-items:start }
    .paar--bild-gross .paar__bild{ position:static; min-height:0 }
    .paar--bild-gross .paar__bild img{
      position:static; height:auto; aspect-ratio:1/1;
    }
  }

  .paar__text{ display:grid; gap:var(--space-m); align-content:center }
  /* Bild- und Textkante auf einer Hoehe — oben UND unten. Dafuer
     muss das Bild die Hoehe der Textspalte uebernehmen, statt seine
     eigene Proportion zu behalten: align-items:stretch zieht die
     Spalte auf, aspect-ratio:auto gibt die feste Proportion frei,
     object-fit:cover beschneidet den Ueberstand mittig.
     Nur ab 861px — darunter stehen Bild und Text untereinander, dort
     soll das Bild seine natuerliche Proportion behalten. */
  .paar .paar__text{ align-content:start }
  @media (min-width:861px){
    .paar{ align-items:stretch }

    /* align-items:stretch allein reicht nicht. Die Zeilenhoehe des
       Rasters richtet sich nach dem hoechsten Element — und das Bild
       bringt ueber seine natuerliche Proportion weiter eine eigene
       Hoehe mit. Ergebnis: die Zeile wird so hoch wie das Bild, der
       Text streckt sich mit und laesst unten Platz.
       Loesung: das Bild aus dem Fluss nehmen. Absolut positioniert
       traegt es nichts mehr zur Zeilenhoehe bei, die Zeile richtet
       sich nach dem Text, und das Bild fuellt sie exakt aus. */
    .paar__bild{
      position:relative;
      min-height:320px;   /* Untergrenze bei sehr kurzem Text */
    }
    .paar__bild picture{ display:block; height:100% }
    .paar__bild img{
      position:absolute; inset:0;
      width:100%; height:100%;
      aspect-ratio:auto;
      object-fit:cover;
      object-position:var(--bildpos, center);
    }
  }
  /* Keine eigene Deckelung: die Spalte ist mit rund 56 Zeichen
     bereits das Lesemass. Ein zusaetzliches max-width wuerde nur
     wieder Leerraum in der Spalte erzeugen. */
  .paar__text p{ margin:0; max-width:none }

  /* Einblenden. Bewegt wird das FOTO im Rahmen, nicht der Rahmen.
     Vorher fuhr die ganze Figur von aussen herein und ragte dabei
     48px ueber die Containerkante — sichtbar, solange die Animation
     laeuft, und bei schmalen Fenstern eine Ursache fuer waagerechtes
     Scrollen. Jetzt bleibt der Rahmen stehen, das Bild gleitet
     darin; overflow:hidden schneidet den Ueberstand ab.
     scale(1.06) verhindert, dass beim Verschieben eine Kante frei
     liegt. */
  .paar__bild img{
    transition:
      transform .7s cubic-bezier(.22,1,.36,1),
      opacity   .7s cubic-bezier(.22,1,.36,1);
  }
  .js-duo .paar__bild img{ opacity:0; transform:translateX(6%) scale(1.06) }
  .js-duo .paar--bild-links .paar__bild img{ transform:translateX(-6%) scale(1.06) }
  .js-duo .paar__bild.is-in img{ opacity:1; transform:none }

  @media (prefers-reduced-motion:reduce){
    .paar__bild img{ transition:none }
    .js-duo .paar__bild img{ opacity:1; transform:none }
  }

  /* Zentrierte Ueberschriften. Nur Ueberschriften — der Fliesstext
     behaelt seine feste linke Kante. */
  .doc__label, .doc__lead, .lede .t-h1{ text-align:center }
  .doc__lead{ margin-inline:auto; max-width:34ch }
  /* Im Rasterkontext reicht text-align nicht: .lede setzt
     justify-items:start, das Element selbst muesste sonst links
     kleben und der zentrierte Satz saesse im linken Drittel. */
  .lede .t-h1{ justify-self:stretch; width:100% }

  /* ================================================================
     .team — Personenraster auf staff.html
     ================================================================
     Bewusst KEINE Kachel: .kachel--info ist der Ablaufschritt auf
     verkaufen.html und traegt dort einen Rahmen. Eine Person in
     denselben Rahmen zu setzen, macht aus einem Menschen einen
     Verfahrensschritt. Hier traegt das Bild, der Text steht darunter
     ohne Kasten.

     Kein Hover — die Eintraege sind nicht verlinkt, und was reagiert,
     sieht klickbar aus (gleiche Begruendung wie bei .kachel--info).

     Rasterstufen wie bei .kachel--info: 1 -> 2 (641px) -> 3 (1041px).
     Drei Spalten, nicht vier: Portraits brauchen mehr Breite als eine
     Ziffer mit zwei Zeilen Text.

     overflow-x:clip auf der Liste. Ohne das scrollt die Seite
     waagerecht, solange die Eintraege von unten einfliegen — derselbe
     Fall wie bei .kachelliste.

     KEIN .reveal an den <li>. Das <ul> ist als ".doc__body > *"
     bereits Reveal-Kandidat, und site.js verwirft verschachtelte
     Treffer. Ein <li> mit .reveal wuerde herausgefiltert, nie
     beobachtet und bliebe dauerhaft auf opacity:0 — genau der Fall,
     vor dem der Kommentar an AUSWAHL warnt. Die Liste blendet
     deshalb als Block ein. Ein gestaffelter Einflug je Person
     braeuchte einen Eintrag in der .js-duo-Zeile von site.js. */
  .team{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-l);
    overflow-x:clip;
  }
  @media (min-width:641px){  .team{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
  @media (min-width:1041px){ .team{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

  .team__person{
    display:grid; gap:var(--space-xs);
    justify-items:start; text-align:left;
    min-width:0;
  }

  /* Einheitliches Format fuer alle Portraits, sonst steht je nach
     Vorlage eine andere Bildhoehe in der Reihe und die Namen sitzen
     auf verschiedenen Linien. 4/3 liegt nah an den vorhandenen
     Portraits und schneidet am wenigsten weg.
     Der Ausschnitt ist je Motiv ueber --bildpos am <figure>
     nachstellbar — gleiche Konvention wie bei .paar. */
  .team__bild{
    margin:0 0 var(--space-xs); width:100%;
  }
  .team__bild img{
    width:100%; height:auto; display:block;
    aspect-ratio:4/3; object-fit:cover;
    object-position:var(--bildpos, 50% 38%);  /* leicht nach oben: Gesichter */
    border-radius:4px;
    border:1px solid var(--rule);
  }

  .team__name{
    margin:0; font-weight:600;
    font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3);
  }
  /* Rolle wie die uebrigen Labels zurueckgenommen, aber nicht unter
     die Lesbarkeitsgrenze: .7 auf --mark ueber --bg ergibt rund
     9.6:1 und liegt damit weiter ueber AAA. */
  .team__rolle{ opacity:.7; margin:0 }
  .team__person p:not(.team__rolle){ margin:0; max-width:46ch }

  /* ================================================================
     .page-hero--schlicht — Seitenkopf ohne Foto
     ================================================================
     Fuer Impressum und Datenschutz. Ein Foto wuerde dort Werbung
     suggerieren, wo eine Pflichtangabe steht. Ohne Bild braucht der
     Kopf auch nicht die volle Buehnenhoehe — 52svh waeren eine leere
     Flaeche. Die Trennlinie unten ersetzt die Kante, die sonst der
     Bildabschluss gibt. */
  .page-hero--schlicht{
    min-height:0;
    padding-block:calc(var(--space-xl) * 1.5) var(--space-xl);
    border-bottom:1px solid var(--rule);
  }

  /* ================================================================
     Schriften als Data-URI — WARUM
     ================================================================
     Unter file:// blockiert Chrome Webfonts per CORS ("Access to
     font ... from origin 'null'"). Das Handover verlangt aber
     ausdruecklich, dass die Seite per Doppelklick laeuft — dort
     stand dann die Fallback-Grotesk statt TungstenFunda.
     Eingebettet gibt es keinen Font-Request und damit auch kein
     CORS: laeuft unter file:// wie unter https://.
     Je Schnitt genau EINE src-Quelle, wie es die Regel verlangt.
     Kostet rund 48 KB im CSS, spart dafuer zwei Requests und das
     swap-Fenster entfaellt — kein Textsprung beim Laden.
     Die .woff2-Dateien bleiben im Ordner: fuer die Uebergabe an
     Dritte und falls spaeter doch extern geladen werden soll.
     Ein metrischer Ersatz-Font ist damit hinfaellig und deshalb
     entfernt — er war ausserdem fehlerhaft (zwei local()-Quellen,
     Status "error", also wirkungslos). */

  /* ================================================================
     .map--consent — Zwei-Klick-Karte
     ================================================================
     Die Karte laedt erst nach ausdruecklichem Klick. Vorher geht
     keine Anfrage an Google, es steht kein iframe im Markup.
     § 25 TDDDG verlangt die Einwilligung VOR dem Zugriff aufs
     Endgeraet — ein iframe mit display:none wuerde trotzdem laden
     und waere damit keine Loesung.
     Bewusst kein Google-Vorschaubild: das waere selbst wieder eine
     Anfrage an Google. Stattdessen eine Flaeche in Hausfarben. */
  .map--consent{ display:grid; place-items:center; background:rgba(228,229,231,.04) }
  .map__hinweis{
    display:grid; gap:var(--space-s); justify-items:center;
    text-align:center; padding:var(--space-m);
    max-width:36ch;
  }
  .map__hinweis p{ margin:0; font-size:var(--fs-small); line-height:var(--lh-small) }
  .map__hinweis .t-label{ opacity:.65 }
  .map__btn{ cursor:pointer }
  /* Nach dem Laden traegt der Container das iframe wie zuvor. */
  .map--consent.is-geladen{ display:block; background:none }


  /* ================================================================
     Vertikaler Rhythmus im Dokumentfluss — Korrektur
     ================================================================
     .doc__body ist ein Grid mit gap:var(--space-l) (32px). Die
     Absaetze behielten aber ihre Browser-Margins von 1em (18px), und
     im Grid addieren sich Item-Margins auf die Luecke. Gemessen kam
     dabei heraus:
        Absatz  -> Absatz     32 + 18 + 18 = 68px
        Leitsatz-> Absatz     32 +  0 + 18 = 50px
        Absatz  -> Bild       32 + 18 +  0 = 50px
        Absatz  -> Kontakt    32 + 18 + 14 = 64px
     Vier verschiedene Abstaende fuer denselben Sprung. Jetzt
     bestimmt allein der Grid-Abstand den Rhythmus. */
  .doc__body > *{ margin-block:0 }

  /* Ein Leitsatz, der mitten im Abschnitt einen neuen Gedanken
     aufmacht, bekommt Luft davor — sonst steht er auf demselben
     Abstand wie ein Folgeabsatz und die Hierarchie faellt flach.
     Der erste im Abschnitt braucht sie nicht, da traegt schon der
     Abstand zum Label. */
  .doc__body > .doc__lead:not(:first-child){ margin-top:var(--space-m) }

  /* Bildpaare: die Spaltenluecke darf breit bleiben, die Zeilen-
     luecke nicht. Untereinander (Telefon) standen Bild und Text mit
     64px auseinander, waehrend im selben Fluss 32px gelten. */
  .paar{ row-gap:var(--space-l) }

  /* ================================================================
     Ueberschrift ueber den Einstiegskacheln
     ================================================================ */
  .bereiche__titel{
    text-align:center;
    margin:0 0 var(--space-m);
  }

  /* ================================================================
     Startseiten-Einleitung — Abstandskorrektur
     ================================================================
     .lede stand auf row-gap:var(--space-s), also 16px. Gemessen:
     16px zwischen der H1 und dem ersten Bildpaar, 16px zwischen den
     beiden Bildpaaren. Fuer Bloecke dieser Groesse — je ein Foto
     plus drei Absaetze — ist das zu wenig; die Seite wirkt dadurch
     gedrungen, die Paare lesen sich als ein Block statt als zwei.

     Jetzt gestaffelt und mitwachsend:
       Bildpaar -> Bildpaar   48px (schmal) bis 72px (ab ~1440px)
       H1       -> Bildpaar   +16 bis 24px extra, also 64 bis 96px
     Die H1 bekommt mehr, weil sie den ganzen Abschnitt anfuehrt und
     nicht auf derselben Stufe stehen darf wie der Sprung zwischen
     zwei gleichrangigen Paaren. clamp statt fester Werte: 96px
     Leerraum sind auf 390px Breite ein Drittel des Bildschirms. */
  .lede{ row-gap:clamp(var(--space-xl), 5vw, calc(var(--space-xl) * 1.5)) }
  .lede > .t-h1{ margin-bottom:clamp(var(--space-s), 2vw, var(--space-m)) }

  /* Dieselbe Ueberlegung fuer Bildpaare im Dokumentfluss: neben
     laufendem Text ist ein Paar ein eigener Block, kein Absatz.
     32px aus dem Grundraster lassen es am Text kleben. */
  .doc__body > .paar{ margin-block:var(--space-s) }

  /* ================================================================
     Abschnittsrhythmus — Abstandskorrektur (zweite Runde)
     ================================================================
     Gemessen vorher, bei 1440px:
       ueber dem Abschnittslabel   48px
       Label -> Leitsatz           32px
       Leitsatz -> Inhalt          48px
     Label, Leitsatz und Inhalt standen damit fast gleich eng
     beieinander — der Abschnittskopf las sich als ein Klumpen.

     Zwei Variablen statt verstreuter Einzelwerte, damit sich das an
     einer Stelle nachziehen laesst. Beide wachsen mit der Breite:
     feste 72px sind auf 390px ein Fuenftel des Bildschirms. */
  :root{
    --raum-abschnitt:clamp(var(--space-xl), 5vw,   calc(var(--space-xl) * 1.5)); /* 48 – 72 */
    --raum-kopf:     clamp(var(--space-l),  3.4vw, var(--space-xl));             /* 32 – 48 */
  }

  /* Luft ueber und unter dem Abschnitt. Zwischen zwei Abschnitten
     addiert sich das auf das Doppelte — gewollt, das ist die
     deutlichste Zaesur im Dokument. */
  .info{ padding-block:var(--raum-abschnitt) }

  /* Label -> Leitsatz. .doc traegt den Abstand, das Label selbst
     hat zusaetzlich 8px margin-bottom aus dem Bestand. */
  .doc{ row-gap:var(--raum-kopf) }

  /* Leitsatz -> Inhalt. Etwas mehr als Label -> Leitsatz: Label und
     Leitsatz bilden zusammen den Kopf, der Sprung zum Inhalt ist
     der groessere von beiden. */
  .doc__body > .doc__lead{ margin-bottom:clamp(var(--space-s), 2.2vw, var(--space-l)) }

  /* ================================================================
     .paar--bild-gross — Textspalte, Abstandskorrektur
     ================================================================
     Gemessen auf verkaufen.html, Abschnitt "Loslegen", bei 1440px:
     die Textspalte ist 613px hoch, also exakt so hoch wie das
     quadratische Bild daneben. Ihr Inhalt braucht aber nur rund
     180px und klebte oben — darunter blieben ueber 400px leer.

     Ursache: .paar__text bringt align-content:center mit, wird aber
     von ".paar .paar__text{align-content:start}" ueberschrieben.
     Fuer den normalen Fall ist start richtig, dort sind Bild und
     Text etwa gleich hoch. Hier nicht: .paar--bild-gross ist die
     dokumentierte Ausnahme mit 1.45fr-Bild im Format 1:1.
     Deshalb nur fuer diesen Fall zurueck auf center — der Leerraum
     verteilt sich dann auf oben und unten statt nur nach unten.

     Zusaetzlich mehr Luft im Block selbst: Absatz, Button und
     Kontaktzeile standen auf 24px und wirkten zusammengedraengt. */
  .paar--bild-gross .paar__text{
    align-content:center;
    gap:var(--raum-abschnitt);     /* 48 – 72 statt 24: Absatz -> Button */
  }
  /* Und unter dem Button, auf denselben Wert. Absatz -> Button und
     Button -> Kontaktzeile sind zwei gleichrangige Spruenge; stehen
     sie auf verschiedenen Abstaenden, kippt der Block optisch nach
     unten. Deshalb dieselbe Variable wie eine Zeile hoeher. */
  .paar--bild-gross .cta{ gap:var(--raum-abschnitt) }   /* 48 – 72 */

  /* ================================================================
     .aushang — Veranstaltungstermine
     ================================================================
     Gespeist aus termine.js, gerendert in site.js. Zwei Ausgaben aus
     einer Quelle: die volle Liste auf veranstaltungen.html, der
     naechste Termin auf der Startseite. Beide benutzen dieselbe
     Komponente, damit die Startseite keine zweite Sprache einfuehrt.

     Kein Datum-links-Text-rechts mit Trennlinien: das ist das
     Default-Muster jeder Terminliste und liest sich wie ein
     Verwaltungskalender. Stattdessen traegt die Tageszahl in der
     Plakatschrift. TungstenFunda ist eine kondensierte Plakatschrift
     und arbeitet hier zum ersten Mal in der Groesse, fuer die sie
     gemacht ist. Getrennt wird mit Abstand, nicht mit Linie. */
  .aushang{
    list-style:none; margin:0; padding:0;
    display:grid; gap:calc(var(--space-xl) * 1.5);   /* 72 – 108 */
  }
  .aushang__eintrag{
    display:grid; gap:var(--space-s);
    align-items:start; text-align:left;
  }
  @media (min-width:721px){
    /* Feste Datumsspalte, damit alle Eintraege auf derselben
       Textkante stehen — auch wenn eine Zahl einstellig waere. */
    .aushang__eintrag{ grid-template-columns:minmax(0,7.5rem) 1fr; gap:var(--space-xl) }
  }

  /* Die Versalhoehe der Plakatschrift beginnt spuerbar unter der
     Boxoberkante. Das negative margin-top holt die Zahl hoch, damit
     sie optisch mit der Reihenzeile rechts auf einer Linie startet. */
  .aushang__datum{ display:block; margin-top:-.12em }
  .aushang__tag{
    display:block; font-weight:600;
    font-size:clamp(4rem, 9vw, 7rem); line-height:.78; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  .aushang__monat{
    display:block; margin-top:6px;
    font-size:var(--fs-small); letter-spacing:.2em;
    text-transform:uppercase; opacity:.65;
  }

  /* Text und optionales Bild. Ohne Bild bleibt eine Spalte — die
     Komponente ist nicht auf Material angewiesen, das der Kunde
     vielleicht nicht liefert. */
  .aushang__inhalt{ display:grid; gap:var(--space-l); min-width:0 }
  @media (min-width:941px){
    .aushang__eintrag--bild .aushang__inhalt{
      grid-template-columns:1fr minmax(0,17rem);
      align-items:start;
    }
  }
  .aushang__text{ display:grid; gap:var(--space-xs); justify-items:start; min-width:0 }
  .aushang__reihe{ margin:0; opacity:.6 }
  .aushang__titel{
    margin:0; font-weight:600;
    font-size:clamp(1.5rem, 3.4vw, 2.3rem); line-height:1.05; letter-spacing:-.01em;
    max-width:26ch;
  }
  /* .7 auf --mark ueber --bg sind rund 9.6:1 — zurueckgenommen,
     aber deutlich ueber der Lesbarkeitsgrenze. */
  .aushang__meta{ margin:var(--space-xs) 0 0; font-size:var(--fs-small); opacity:.7 }
  .aushang__body{ margin:var(--space-xs) 0 0; max-width:52ch }
  .aushang__text .link{ margin-top:var(--space-xs) }

  /* Flyer werden NICHT beschnitten: object-fit:cover wuerde bei einem
     Plakat die Schrift an den Raendern abschneiden. Das Bild behaelt
     sein eigenes Format und wird nur in der Breite begrenzt. */
  .aushang__bild{ margin:0 }
  .aushang__bild img{
    display:block; width:100%; height:auto; border-radius:3px;
    background:rgba(228,229,231,.04);
  }
  @media (max-width:940px){
    .aushang__bild{ max-width:20rem }
  }

  /* ---------------------------------------------------------------
     Naechster Termin im Footer
     ---------------------------------------------------------------
     Bewusst KEIN eigener Block auf der Startseite: dort stand die
     Tageszahl in der Plakatschrift halb so breit wie alles andere
     daneben und hat ein Loch in die Komposition gerissen.

     Im Footer steht der Termin dagegen zwischen lauter Angaben
     derselben Art — Adresse, Oeffnungszeiten, Kontakt sind ebenfalls
     das, was jemand vor einem Besuch braucht. Und weil der Footer auf
     jeder Seite steht, findet man den Termin ueberall, nicht nur auf
     der Veranstaltungsseite.

     Das Raster bleibt bei drei Spalten. Die vierte Angabe rutscht
     damit in eine eigene Zeile und bekommt dort mehr Luft, als sie
     als gequetschte vierte Spalte haette. */
  .footer-col--termin{ gap:var(--space-xs) }
  .fuss-termin__datum{ font-weight:600 }
  /* .85 statt voller Deckkraft: der Titel ist die laengste Zeile der
     Spalte und soll das Datum darueber nicht ueberstimmen.
     .85 auf --mark ueber dem abgedunkelten Footerbild sind rund 11:1. */
  .fuss-termin__titel{ opacity:.85 }

  /* ================================================================
     TERMINBUCHUNG
     ================================================================
     Formular und Terminraster fuer termin.php, termin-antwort.php und
     termin-verwaltung.php. Bewusst im selben Zweifarbensystem wie der
     Rest: kein Gruen fuer "frei", kein Rot fuer "belegt". Farbe traegt
     hier keine Bedeutung, die nicht auch im Text steht — das ist
     zugleich die Anforderung aus WCAG 1.4.1. */

  /* ---- Auswahl: wo soll gesichtet werden ------------------------ */
  /* auto-fit statt fester Spaltenzahl: die Anlaesse stehen in der
     Konfiguration und koennen zu zweit, zu dritt oder zu viert sein.
     Ein fester Zweispalter liesse bei drei Anlaessen ein Loch. */
  .wahl{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-m);
    grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  }
  .wahl__feld{
    display:grid; gap:var(--space-xs); align-content:start;
    border:1px solid var(--rule); border-radius:4px;
    padding:var(--space-m); height:100%;
    color:inherit; text-decoration:none;
    transition:border-color .18s ease;
  }
  .wahl__feld:hover{ border-color:var(--mark-soft) }
  .wahl__feld:focus-visible{ outline:2px solid var(--mark); outline-offset:3px }
  .wahl__titel{ font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3) }
  .wahl__text{ margin:0; opacity:.8 }
  .wahl__pfeil{ opacity:.7 }

  /* ---- Terminraster --------------------------------------------- */
  .tage{ border:0; margin:0; padding:0; display:grid; gap:var(--space-l) }
  .tag{ display:grid; gap:var(--space-s) }
  .tag__datum{ margin:0; font-weight:600 }
  .zeiten{ display:flex; flex-wrap:wrap; gap:var(--space-xs) }

  /* Der eigentliche Radioknopf bleibt im Dokument — nur so bleibt er
     mit der Tastatur erreichbar und wird von Screenreadern angesagt.
     Sichtbar ist die Flaeche drumherum. */
  .zeit{ position:relative; display:inline-flex }
  .zeit input{
    position:absolute; inset:0; margin:0;
    opacity:0; cursor:pointer;
  }
  .zeit span{
    display:inline-block;
    border:1px solid var(--rule-solid); border-radius:3px;
    padding:10px 16px;
    font-variant-numeric:tabular-nums;
    transition:border-color .15s ease, background-color .15s ease;
  }
  .zeit:hover span{ border-color:var(--mark-soft) }
  .zeit input:checked + span{
    background:rgba(228,229,231,.86); color:var(--bg);
    border-color:transparent; font-weight:600;
  }
  .zeit input:focus-visible + span{ outline:2px solid var(--mark); outline-offset:3px }

  .blaettern{ display:flex; flex-wrap:wrap; gap:var(--space-m); margin:var(--space-l) 0 0 }

  /* ---- Formularfelder ------------------------------------------- */
  .felder{ display:grid; gap:var(--space-m) }
  @media (min-width:721px){
    .felder{ grid-template-columns:1fr 1fr; gap:var(--space-m) var(--space-l) }
    .feld--breit{ grid-column:1 / -1 }
  }
  .feld{ display:grid; gap:6px; align-content:start; min-width:0 }
  .feld label{ font-size:var(--fs-small); letter-spacing:.06em; opacity:.8 }
  .feld input, .feld select, .feld textarea{
    font:inherit; font-size:var(--fs-body);
    background:transparent; color:var(--mark);
    border:1px solid var(--rule-solid); border-radius:3px;
    padding:12px 14px; width:100%; max-width:100%;
  }
  .feld textarea{ min-height:6em; resize:vertical }
  .feld select{
    /* Die Klappliste wird vom System gezeichnet; ohne diese beiden
       Zeilen steht dort schwarz auf schwarz. */
    color-scheme:dark;
    appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--mark-soft) 50%),
                     linear-gradient(135deg, var(--mark-soft) 50%, transparent 50%);
    background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    padding-right:42px;
  }
  .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible{
    outline:2px solid var(--mark); outline-offset:2px; border-color:transparent;
  }
  .feld__hinweis{ margin:0; font-size:var(--fs-small); opacity:.65 }
  /* Fehler ohne Farbe kenntlich machen: staerkerer Rahmen plus Text.
     Ein roter Rand allein waere fuer Farbenblinde kein Hinweis. */
  .feld--fehler input, .feld--fehler select, .feld--fehler textarea{
    border-color:var(--mark); border-width:2px;
  }
  .feld__fehler{ margin:0; font-size:var(--fs-small); font-weight:600 }

  .hinweis{ font-size:var(--fs-small); opacity:.72; max-width:64ch; margin:var(--space-m) 0 0 }
  .hinweis--fehler{
    opacity:1; font-weight:600;
    border-left:3px solid var(--mark); padding-left:var(--space-s);
  }
  .cta__zeile{ margin:var(--raum-abschnitt) 0 0 }

  /* Honigtopf gegen Skripte. Nicht display:none und nicht
     visibility:hidden — beides pruefen bessere Skripte ab. Das Feld
     steht ausserhalb des Bildes und ist fuer die Tastatur gesperrt. */
  .koeder{
    position:absolute; left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }

  /* ---- Verwaltung ----------------------------------------------- */
  .anfragen{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-l) }
  .anfrage{
    border:1px solid var(--rule); border-radius:4px;
    padding:var(--space-m); display:grid; gap:var(--space-s);
  }
  .anfrage__kopf{ display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-m); align-items:baseline }
  .anfrage__wann{ font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3) }
  /* Zustand als Wort, nicht als Farbpunkt. */
  .anfrage__stand{
    font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
    border:1px solid var(--rule-solid); border-radius:2px; padding:4px 10px;
  }
  .anfrage__stand--offen{ background:rgba(228,229,231,.86); color:var(--bg); border-color:transparent }
  .anfrage__daten{ margin:0; display:grid; gap:4px }
  .anfrage__daten div{ display:flex; flex-wrap:wrap; gap:var(--space-xs) }
  .anfrage__daten dt{ min-width:9em; opacity:.6; font-size:var(--fs-small) }
  .anfrage__daten dd{ margin:0; min-width:0; overflow-wrap:anywhere }
  .anfrage__knoepfe{ display:flex; flex-wrap:wrap; gap:var(--space-s); margin-top:var(--space-xs) }

  .btn--still{
    display:inline-block; background:transparent; color:var(--mark);
    border:1px solid var(--rule-solid); border-radius:3px;
    font:inherit; font-weight:600; font-size:var(--fs-small);
    text-transform:uppercase; letter-spacing:.14em;
    padding:var(--space-s) var(--space-m);
    cursor:pointer; text-decoration:none;
  }
  .btn--still:hover{ border-color:var(--mark) }
  .btn--still:focus-visible{ outline:2px solid var(--mark); outline-offset:3px }
  /* Dauer als eigene Zeile im Auswahlfeld: der Besucher soll den
     Zeitbedarf sehen, bevor er sich festlegt. */
  .wahl__dauer{ margin:0; font-size:var(--fs-small); letter-spacing:.14em;
                text-transform:uppercase; opacity:.55 }
  /* Anlass neben dem Datum in der Verwaltung. */
  .anfrage__anlass{ opacity:.7 }

  /* ==================================================================
     .doc--ruf — Aufruf-Abschnitt
     ==================================================================
     Warum es diesen Zusatz braucht: Die Seite mischt zwei Anordnungen,
     und zwar mit Absicht. Ueberschrift und Vorspann stehen mittig
     (siehe .doc__label/.doc__lead weiter oben), der Fliesstext haelt
     seine linke Kante bei 58ch, der Handlungsblock steht wieder mittig.

     In den langen Abschnitten faellt das nicht auf: der Textkoerper
     fuellt seine Spalte ueber mehrere Absaetze, die linke Kante wird
     selbst zur Ordnung. In einem kurzen Abschnitt — Ueberschrift, ein
     Satz, ein Knopf — steht genau ein Absatz zwischen zwei mittigen
     Elementen. Er ist dann zwar linksbuendig, aber seine Spalte sitzt
     nicht auf der Achse der Zeilen darueber und darunter. Das liest
     sich nicht als zweite Ordnung, sondern als Fehler.

     Deshalb hier: eine Achse fuer alles. Das passt auch zur Aufgabe.
     Ein Aufruf ist kein Lesetext, sondern eine Ansage — dieselbe
     Begruendung, aus der .cta--start mittig steht.

     Das Mass ist bewusst enger als die 58ch des Fliesstextes: mittig
     gesetzter Text braucht kuerzere Zeilen, sonst muss das Auge bei
     jedem Zeilenanfang den Einstieg neu suchen.
     ================================================================== */
  .doc--ruf{ justify-items:center; text-align:center }
  .doc--ruf .doc__label{ text-align:center }
  .doc--ruf .doc__body{ justify-items:center; width:100% }
  .doc--ruf .doc__body p{ margin-inline:auto; max-width:44ch; text-align:center }
  .doc--ruf .doc__lead{ max-width:26ch }

  /* ==================================================================
     .sortiment — Genrebloecke auf laden.html
     ==================================================================
     Sechzehn Abschnitte untereinander waeren eine Bleiwueste. Als
     Raster gelesen entsprechen sie dem, was sie im Laden auch sind:
     Trennkarten im Regal. Deshalb der Genrename in der Schrift des
     Hauses, gross genug, um beim Ueberfliegen zu tragen, und darunter
     der Satz, der erklaert, was dahinter steckt.

     auto-fit statt fester Spaltenzahl: Die Zahl der Genres aendert
     sich, wenn der Laden sich aendert. Ein Raster, das mitzaehlt,
     laesst am Ende keine Luecke stehen.

     Bewusst keine Rahmen und keine Linien. Die Abstaende trennen
     genug, und Kaesten wuerden aus einer Auswahl einen Katalog
     machen.
     ================================================================== */
  .sortiment{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-xl) var(--space-l);
    grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  }
  .sortiment__name{
    margin:0 0 var(--space-xs);
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3); font-weight:600;
  }
  .sortiment p{ margin:0; max-width:42ch }

  /* Schlusssatz unter dem Raster: kein weiterer Genreblock, sondern
     eine Ansprache. Darum abgesetzt und in der Textbreite. */
  .sortiment-schluss{ margin-top:var(--raum-abschnitt) }

  /* ==================================================================
     .aufzaehlung — schlichte Liste im Textfluss
     ==================================================================
     Fuer Aufzaehlungen, die weder Reihenfolge noch Erklaerung
     brauchen — das Zubehoer im Laden etwa. Punkte statt Marker:
     ein gesetzter Punkt vor der Zeile steht ruhiger als ein Bullet
     und passt zur uebrigen Typografie.
     ================================================================== */
  .aufzaehlung{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-s);
  }
  .aufzaehlung li{
    position:relative; padding-left:1.4em; max-width:52ch;
  }
  .aufzaehlung li::before{
    content:"·"; position:absolute; left:.35em; top:0;
    opacity:.55; font-weight:600;
  }

  /* ==================================================================
     .release — Veroeffentlichung auf label.html
     ==================================================================
     Kein Raster: Zurzeit gibt es genau eine Veroeffentlichung, und
     ein Raster mit einem Eintrag sieht aus wie ein Raster, aus dem
     etwas herausgefallen ist. Untereinander gesetzt traegt auch ein
     einzelner Eintrag.

     Kommen weitere dazu, stehen sie mit Abstand darunter — die
     Reihenfolge ist dann die Chronologie, und die liest man
     untereinander ohnehin besser als nebeneinander.
     ================================================================== */
  .releases{ list-style:none; margin:0; padding:0;
             display:grid; gap:var(--raum-abschnitt) }
  .release__titel{
    margin:0 0 var(--space-xs);
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3); font-weight:600;
  }
  /* Katalognummer, Format, Jahr: die harten Angaben, an denen ein
     Sammler eine Platte wiedererkennt. Deshalb direkt unter dem Titel
     und nicht im Fliesstext vergraben. */
  .release__daten{
    margin:0 0 var(--space-s); font-size:var(--fs-small);
    letter-spacing:.14em; text-transform:uppercase; opacity:.6;
  }
  .release p{ margin:0; max-width:58ch }

  /* ---- Nachtrag Reihen, 23.09.2026 -----------------------------
     Die Namen kommen jetzt vom Kunden und sind laenger als die
     Arbeitstitel, unter denen die Komponente gebaut wurde: aus
     "Lager Blowout" wurde "Lager Blowout — die grosse
     2nd-Hand-Plattenboerse". Bei max-width:16ch stand das ueber
     vier Zeilen und drueckte den Block auseinander. 22ch fasst die
     langen Namen in zwei Zeilen, ohne die kurzen breit laufen zu
     lassen. */
  .programm h3{ max-width:22ch }

  /* Preise beim Lager Blowout. Sie sind das Argument der Reihe und
     gehen im Fliesstext unter — deshalb als eigene Zeile, in der
     Auszeichnung, die auf der Seite ohnehin fuer harte Angaben
     steht (vgl. .release__daten). */
  .programm__preise{
    margin:0; font-size:var(--fs-small);
    letter-spacing:.1em; font-variant-numeric:tabular-nums;
    opacity:.6;
  }

  /* ==================================================================
     .klappen — Kacheln, die sich auf Klick oeffnen
     ==================================================================
     Fuer Inhalte, bei denen der Name schon die halbe Auskunft ist und
     der Text nur auf Nachfrage gebraucht wird: die Veranstaltungsreihen
     und die Genres im Laden. Alles gleichzeitig offen erschlaegt den
     Leser — sechzehn Genres mit je vier Zeilen sind eine Bleiwueste.

     Gebaut auf <details>/<summary>, NICHT auf JavaScript. Drei Gruende:

       1. Es funktioniert auch, wenn ein Skript nicht laedt. Die Seite
          liegt als Dateisammlung beim Kunden — sie muss ohne
          Voraussetzungen laufen.
       2. Tastatur und Screenreader koennen es von Haus aus. Ein
          nachgebauter Aufklapper muesste aria-expanded, Fokus und
          Enter/Leertaste selbst mitbringen und waere doch schlechter.
       3. Die Browsersuche (Strg+F) findet in modernen Browsern auch
          Text in geschlossenen <details> und klappt ihn auf.

     Kein Rahmen um die ganze Kachel: Die Flaeche traegt durch Abstand
     und den Wechsel beim Ueberfahren. Sechzehn Kaesten nebeneinander
     saehen aus wie ein Formular.
     ================================================================== */
  .klappen{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-m);
    grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
    align-items:start;          /* sonst waechst die ganze Zeile mit,
                                   sobald eine Kachel geoeffnet wird */
  }

  .klapp{
    border-top:1px solid var(--rule-solid);
    padding-top:var(--space-s);
    transition:border-color .18s ease;
  }
  .klapp:hover{ border-top-color:var(--mark) }

  .klapp__titel{
    display:grid; grid-template-columns:1fr auto; gap:var(--space-s);
    align-items:start;
    cursor:pointer; list-style:none;
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3); font-weight:600;
    padding-block:var(--space-xs);
  }
  /* Das Standarddreieck weg — in jedem Browser einzeln. */
  .klapp__titel::-webkit-details-marker{ display:none }
  .klapp__titel::marker{ content:"" }

  /* Eigenes Zeichen rechts: Strich wird zu Kreuz. Bewusst kein
     Pfeil — der wuerde ein Weiterspringen versprechen, hier oeffnet
     sich aber etwas an Ort und Stelle. */
  .klapp__zeichen{
    position:relative; width:1em; height:1em; margin-top:.25em;
    flex:none; opacity:.55; transition:opacity .18s ease;
  }
  .klapp__titel:hover .klapp__zeichen{ opacity:1 }
  .klapp__zeichen::before,
  .klapp__zeichen::after{
    content:""; position:absolute; inset:50% 0 auto 0;
    height:1.5px; background:currentColor; transform:translateY(-50%);
  }
  .klapp__zeichen::after{ transform:translateY(-50%) rotate(90deg);
                          transition:transform .22s cubic-bezier(.22,1,.36,1) }
  .klapp[open] .klapp__zeichen::after{ transform:translateY(-50%) rotate(0deg) }

  .klapp__text{
    padding-top:var(--space-s); padding-bottom:var(--space-xs);
    display:grid; gap:var(--space-s);
  }
  .klapp__text p{ margin:0; max-width:46ch; opacity:.82 }

  .klapp__titel:focus-visible{ outline:2px solid var(--mark); outline-offset:4px }

  @media (prefers-reduced-motion:reduce){
    .klapp, .klapp__zeichen, .klapp__zeichen::after{ transition:none }
  }

  /* ==================================================================
     .presse — Presseschau auf laden.html
     ==================================================================
     Quelle und Datum stehen UEBER dem Titel, nicht darunter. Bei einer
     Presseschau entscheidet die Quelle, ob man weiterliest — "NOZ,
     März 2026" sagt mehr ueber die Relevanz als die Ueberschrift des
     Beitrags. Was zuerst gebraucht wird, steht zuerst.

     Zwei Spalten ab mittlerer Breite, damit eine Handvoll Eintraege
     nicht als endlose Spalte herunterlaeuft.
     ================================================================== */
  .presse{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-xl) var(--space-l);
    grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
    align-items:start;
  }
  .presse__quelle{
    margin:0 0 var(--space-xs);
    font-size:var(--fs-small); letter-spacing:.14em;
    text-transform:uppercase; opacity:.55;
  }
  .presse__titel{
    margin:0 0 var(--space-xs);
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3); font-weight:600;
  }
  .presse p:not(.presse__quelle){ margin:0; max-width:44ch; opacity:.82 }

  /* ==================================================================
     .mehr-laden — Verweis unter den beiden Einstiegskacheln
     ==================================================================
     Kein Knopf und keine dritte Kachel. Die beiden Kacheln sind die
     Wege, auf denen der Laden Geschaeft macht; "mehr erfahren" ist
     keiner davon. Eine gleich starke dritte Flaeche wuerde die
     Entscheidung verwaessern, die die Kacheln gerade erst eindeutig
     gemacht haben.

     Deshalb eine ruhige Zeile mit Zusatz darunter — sichtbar fuer den,
     der noch sucht, unaufdringlich fuer den, der schon weiss, was er
     will.
     ================================================================== */
  .mehr-laden{
    display:grid; justify-items:center; gap:var(--space-xs);
    text-align:center; margin:var(--raum-abschnitt) 0 0;
    /* Im Rasterkontext reicht text-align nicht: Der Elternblock zieht
       seine Kinder sonst auf Inhaltsbreite zusammen, und der mittig
       gesetzte Verweis saesse im linken Drittel. Dieselbe Falle wie
       bei .lede .t-h1 weiter oben. */
    justify-self:stretch; width:100%;
    /* .info p deckelt Absaetze auf 58ch (rund 464px). Das ist fuer
       Lesetext richtig, hier aber falsch: Der Block soll die volle
       Breite einnehmen, damit sein Inhalt auf der Mittelachse der
       Kacheln darueber sitzt und nicht im linken Drittel. */
  }
  /* Eigener Selektor mit Element, nicht nur Klasse: .info p ist
     spezifischer als .mehr-laden und gewinnt sonst, egal wie weit
     unten diese Regel steht. */
  p.mehr-laden{ max-width:none }
  .mehr-laden__zusatz{
    font-size:var(--fs-small); letter-spacing:.06em; opacity:.55;
  }

  /* ==================================================================
     .merke — Hinweiskasten auf der Buchungsseite
     ==================================================================
     Traegt die Absage, bevor jemand einen Termin waehlt: Klassik,
     Schlager, Volksmusik, Oper, Operette kaufen wir nicht an.

     Warum ein Kasten und keine normale Textzeile: Er muss beim
     Ueberfliegen haengen bleiben. Wer ihn erst nach der Terminwahl
     liest, hat schon geplant.

     Warum trotzdem KEIN Warnrot: Es ist keine Fehlermeldung, sondern
     eine Auskunft — und sie richtet sich an jemanden, der dem Laden
     gerade seine Sammlung anbieten will. Ein roter Kasten wuerde ihn
     behandeln, als haette er etwas falsch gemacht. Der Rahmen in der
     Hausfarbe genuegt.

     Die Liste der ausgeschlossenen Genres steht bewusst gross und
     allein auf einer Zeile: Sie ist die Information, alles andere ist
     Begruendung.
     ================================================================== */
  .merke{
    border:1px solid var(--rule-solid);
    border-left-width:3px;
    padding:var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) - 2px);
    display:grid; gap:var(--space-s);
    max-width:56ch;
  }
  .merke__titel{ margin:0; opacity:.6 }
  .merke__liste{
    margin:0; font-weight:600;
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3);
  }
  .merke__text{ margin:0; font-size:var(--fs-small); line-height:var(--lh-small); opacity:.75 }
  /* Was wir NEHMEN, steht abgesetzt darunter — sonst liest sich der
     Kasten wie eine reine Absage. */
  .merke__text--ja{
    border-top:1px solid var(--rule-solid);
    padding-top:var(--space-s); opacity:.62;
  }

  /* ==================================================================
     .buchungsseite — Layout der Terminbuchung (29.09.2026)
     ==================================================================
     Vorher hingen Hinweiskasten (56ch) und Tagesliste (je ~330px) an
     der linken Kante einer 760px-Spalte; rechts blieb die Haelfte leer,
     und unter dem mittigen Seitenkopf wirkte das wie verrutscht.
     Jetzt fuellt alles dieselbe mittige Spalte: der Kasten ueber die
     volle Breite, die Tage ab Tablet zweispaltig. Das halbiert
     nebenbei die Seitenlaenge. Keine Bilder: Auf einer Formularseite
     lenken sie vom einzigen Zweck ab. */
  .buchungsseite .merke{ max-width:none }
  .buchungsseite .merke__text{ max-width:none }
  .buchungsseite .info + .info{ padding-top:0 }
  @media (min-width:721px){
    .buchungsseite .tage{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:var(--space-l) var(--space-xl);
    }
  }
  /* Zeiten als festes Dreierraster: sechs Slots stehen als zwei
     saubere Reihen, statt 5 + 1 umzubrechen. align-content:start,
     damit kurze Tage nicht auf die Hoehe des Nachbarn gestreckt
     werden. */
  .buchungsseite .tag{ align-content:start }
  .buchungsseite .zeiten{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:start;
  }
  .buchungsseite .zeit{ display:flex }
  .buchungsseite .zeit span{ width:100%; text-align:center }

  /* ==================================================================
     .archiv — Fundament Archive Series auf label.html, 29.09.2026
     ==================================================================
     Baut auf .paar auf (Text links, Foto rechts). Abweichung: Die
     Texte der Editionen sind drei- bis viermal so hoch wie ein Foto
     in Spaltenbreite. Auf Texthoehe gestreckt (Standard bei .paar)
     bliebe vom Motiv ein schmaler Streifen. Deshalb behaelt das Foto
     hier seine Proportion und haftet beim Lesen unter der Kopfzeile.
     Ohne Foto bleibt die rechte Spalte schlicht frei. */
  .archiv__kopf{ display:grid; gap:var(--space-xs) }
  .archiv__kopf .release__titel,
  .archiv__kopf .release__daten{ margin:0 }
  .archiv__unter{ opacity:.75; font-size:var(--fs-small); letter-spacing:.02em }
  .archiv__zwischen{ text-align:left; margin-top:var(--space-s) }
  .doc__body > .archiv--edition{ margin-top:var(--raum-abschnitt) }

  @media (min-width:861px){
    .archiv{ align-items:start }
    .archiv > .paar__bild{
      position:sticky; top:120px; min-height:0;
    }
    .archiv > .paar__bild picture{ height:auto }
    .archiv > .paar__bild img{
      position:static; height:auto; aspect-ratio:4/5;
      object-position:var(--bildpos, center);
    }
  }
  /* Telefon: .paar stellt das Foto unter den Text. Bei langen Texten
     laege es dann weit vom Titel entfernt — hier steht es darueber. */
  @media (max-width:860px){
    .archiv > .paar__bild{ order:-1 }
    .archiv > .paar__bild img{ aspect-ratio:4/3 }
  }

  /* ==================================================================
     .klappen als Kacheln — 29.09.2026
     ==================================================================
     Vorher Trennstriche ueber jedem Eintrag. Wirkte wie eine Liste
     und nicht wie etwas, das man anklickt. Jetzt geschlossene
     Flaechen in der Sprache der Einstiegskacheln (1px Rahmen, 4px
     Radius, Hover hellt auf). Geschlossene Kacheln sind gleich hoch,
     damit das Raster ruhig steht; eine geoeffnete waechst allein
     (align-items:start bleibt aus dem Bestand). */
  .klappen{ gap:var(--space-s) }
  @media (min-width:721px){ .klappen{ gap:var(--space-m) } }

  .klapp{
    border:1px solid var(--rule-solid);
    border-radius:4px;
    padding:0;
    background:var(--bg);
    transition:border-color .22s ease, background-color .22s ease;
  }
  .klapp:hover{ border-color:var(--mark-soft); border-top-color:var(--mark-soft) }
  .klapp[open]{
    border-color:var(--mark-soft);
    background:color-mix(in srgb, var(--mark) 4%, var(--bg));
  }

  .klapp__titel{
    min-height:5rem;
    padding:var(--space-m);
    align-content:space-between;
  }
  @media (min-width:721px){
    .klapp__titel{ min-height:9rem; padding:var(--space-l) }
  }
  /* Offene Kachel: Titel ruecken an den Text, sonst stuende die
     Mindesthoehe als Loch zwischen Name und Beschreibung. */
  .klapp[open] .klapp__titel{ min-height:0; padding-bottom:0 }

  .klapp__text{ padding:var(--space-m) var(--space-m) var(--space-l) }
  @media (min-width:721px){
    .klapp__text{ padding:var(--space-m) var(--space-l) var(--space-l) }
  }

  .klapp__titel:focus-visible{ outline-offset:-4px; border-radius:4px }

  @media (prefers-reduced-motion:reduce){ .klapp{ transition:none } }

  /* Hinweis der lokalen Vorschau, siehe site.js ganz unten. */
  .info p.vorschau-hinweis{
    flex-basis:100%; max-width:40ch; margin:var(--space-s) auto 0;
    font-size:var(--fs-small); opacity:.75; text-align:center;
  }

  /* ==================================================================
     .dreh — Kacheln, die sich um die eigene Achse drehen, 30.09.2026
     ==================================================================
     Zwei Arten:
       .dreh--logo  Vorderseite Logo, Rueckseite Text. Klick dreht.
       .dreh--drei  Vorderseite Titel. Klick 1 klappt den Text auf,
                    Klick 2 dreht zur Rueckseite (Produktbild oder
                    Plakat), Klick 3 dreht zurueck und schliesst.

     Beide Seiten liegen im selben Rasterfeld uebereinander. Bei
     .dreh--logo bestimmt die hoehere Seite die Kachelhoehe. Bei
     .dreh--drei traegt nur die Vorderseite zur Hoehe bei, das Bild
     auf der Rueckseite fuellt die Flaeche (contain) — so springt die
     Kachel beim Drehen nicht.

     Ohne Skript (keine Klasse js-dreh am <html>) stehen Text und Bild
     einfach untereinander, nichts ist versteckt.
     ================================================================== */
  .dreh-raster{
    list-style:none; margin:0; padding:0;
    display:grid; gap:var(--space-s);
    grid-template-columns:1fr;
    align-items:start;
  }
  @media (min-width:721px){
    .dreh-raster{ gap:var(--space-m); grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)) }
    .dreh-raster--zwei{ grid-template-columns:1fr 1fr }
  }

  .dreh{ position:relative; perspective:1800px; min-width:0 }
  .dreh__innen{ display:grid; min-width:0 }
  .dreh__seite{
    position:relative; min-width:0;
    border:1px solid var(--rule-solid); border-radius:4px;
    background:var(--bg); color:var(--mark);
    transition:border-color .22s ease, background-color .22s ease;
  }
  .dreh:hover .dreh__seite{ border-color:var(--mark-soft) }

  /* Knopf ueber die ganze Seite: der eigentliche <button> sitzt im
     Titel, sein ::after spannt die Klickflaeche auf. */
  .dreh__knopf{
    all:unset; cursor:pointer;
    display:grid; grid-template-columns:1fr auto; gap:var(--space-s);
    align-items:start; width:100%; box-sizing:border-box;
    font-size:var(--fs-h3); line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3); font-weight:600; text-align:left;
  }
  .dreh__knopf::after{ content:""; position:absolute; inset:0; border-radius:4px; z-index:1 }
  .dreh__knopf:focus-visible::after{ outline:2px solid var(--mark); outline-offset:-4px }
  .dreh__kopf{ padding:var(--space-m); display:grid; gap:var(--space-xs) }
  @media (min-width:721px){ .dreh__kopf{ padding:var(--space-l) } }
  .dreh--drei .dreh__kopf{ min-height:5rem }
  @media (min-width:721px){ .dreh--drei .dreh__kopf{ min-height:9rem; align-content:start } }
  .dreh__kicker{
    margin:0; font-size:var(--fs-small); letter-spacing:.14em;
    text-transform:uppercase; opacity:.6;
  }
  .dreh__unter{ margin:0; font-size:var(--fs-small); letter-spacing:.02em; opacity:.75 }
  .dreh__text{
    display:grid; gap:var(--space-s);
    padding:0 var(--space-m) var(--space-l);
  }
  @media (min-width:721px){ .dreh__text{ padding:0 var(--space-l) var(--space-l) } }
  .dreh__text p{ margin:0; max-width:none; opacity:.85 }
  .dreh__text h4{ margin:var(--space-xs) 0 0 }

  /* Rueckseite mit Bild */
  .dreh__bild{ margin:0; background:#0f1012; border-radius:3px; overflow:hidden }
  .dreh__bild picture{ display:block; height:100% }
  .dreh__bild img{ display:block; width:100%; height:auto }
  .dreh__zurueck{
    position:absolute; top:var(--space-s); right:var(--space-s); z-index:2;
    width:2.5rem; height:2.5rem; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(23,24,27,.8); border:1px solid var(--rule-solid);
    color:var(--mark); cursor:pointer; padding:0;
  }
  .dreh__zurueck::after{ content:""; position:absolute; inset:0 }
  .dreh__zurueck:focus-visible{ outline:2px solid var(--mark); outline-offset:2px }
  .dreh__zurueck .klapp__zeichen{ margin:0; opacity:1 }

  /* Logo-Kachel */
  .dreh__logo{
    display:grid; justify-items:center; align-content:center; gap:var(--space-m);
    min-height:18rem; height:100%; padding:var(--space-xl) var(--space-l);
    box-sizing:border-box;
  }
  .dreh__logo svg{ width:clamp(5rem, 12vw, 7.5rem); height:auto; color:var(--mark) }
  .dreh__wortmarke{ display:grid; justify-items:center; gap:2px; text-align:center; margin:0 }
  .dreh__wortmarke b{
    font-weight:600; font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .dreh__wortmarke span{ font-size:clamp(1.05rem, 2vw, 1.35rem); letter-spacing:.08em }
  .dreh__wortmarke span.gross{ text-transform:uppercase; letter-spacing:.3em; font-weight:600; font-size:clamp(.85rem,1.6vw,1rem) }
  .dreh__hinweis{
    margin:0; font-size:var(--fs-small); letter-spacing:.2em; text-transform:uppercase;
    opacity:.55; display:inline-flex; gap:var(--space-xs); align-items:center;
  }
  .dreh--logo .dreh__rueck{ padding:var(--space-l); display:grid; gap:var(--space-s); align-content:start }
  @media (min-width:721px){ .dreh--logo .dreh__rueck{ padding:var(--space-xl) var(--space-l) } }
  .dreh--logo .dreh__rueck h3{ margin:0 0 var(--space-xs); font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); font-weight:600; padding-right:3rem }
  .dreh--logo .dreh__rueck p{ margin:0; max-width:none; opacity:.85 }

  /* ---- Mit Skript: drehen ------------------------------------------ */
  .js-dreh .dreh__innen{
    transform-style:preserve-3d;
    transition:transform .75s cubic-bezier(.22,1,.36,1);
  }
  .js-dreh .dreh__seite{
    grid-area:1 / 1;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .js-dreh .dreh__seite--hinten{ transform:rotateY(180deg) }
  .js-dreh .dreh.is-gedreht .dreh__innen{ transform:rotateY(180deg) }

  /* drei Stufen: Text erst auf Klick, Bild fuellt die Rueckseite */
  .js-dreh .dreh--drei:not(.is-offen) .dreh__text{ display:none }
  .js-dreh .dreh--drei .dreh__seite--hinten{ overflow:hidden }
  .js-dreh .dreh--drei .dreh__bild{ position:absolute; inset:0; border-radius:3px }
  .js-dreh .dreh--drei .dreh__bild img{ height:100%; object-fit:contain }
  .js-dreh .dreh.is-offen .dreh__seite--vorn{
    border-color:var(--mark-soft);
    background:color-mix(in srgb, var(--mark) 4%, var(--bg));
  }
  .js-dreh .dreh--drei.is-offen .dreh__kopf{ min-height:0 }

  /* Ohne Skript: Rueckseite unter die Vorderseite */
  html:not(.js-dreh) .dreh__innen{ gap:var(--space-s) }
  html:not(.js-dreh) .dreh__zurueck,
  html:not(.js-dreh) .dreh__hinweis{ display:none }

  @media (prefers-reduced-motion:reduce){
    .js-dreh .dreh__innen{ transition:none }
  }
  .klapp__titel-h{ margin:0; font:inherit }
  .klapp__zeichen.is-minus::after{ transform:translateY(-50%) rotate(0deg) }
  .dreh.is-offen .dreh__knopf .klapp__zeichen::after{ transform:translateY(-50%) rotate(0deg) }
  .dreh__logo{ position:relative }
  @media (min-width:721px){ .dreh-raster--vo{ grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr)) } }
  /* Logo-Kacheln gleich hoch */
  .dreh-raster--zwei{ align-items:stretch }
  .dreh--logo .dreh__innen{ height:100% }
  /* Gedreht: das Bild bestimmt die Hoehe, der Text ist zu. So steht
     das Cover formatfuellend und nicht in einer hohen Leerflaeche. */
  .js-dreh .dreh--drei.is-gedreht .dreh__bild{ position:relative; inset:auto }
  .js-dreh .dreh--drei.is-gedreht .dreh__bild img{ height:auto; object-fit:cover }

  /* Ankauf, Korrektur 30.09.2026: Listen untereinander, der
     Begruendungssatz neben der Nicht-Liste. */
  @media (min-width:721px){ .pairs.pairs--einspaltig{ grid-template-columns:1fr } }
  .pairs__neben{ display:grid; gap:var(--space-m); align-items:start }
  @media (min-width:600px){ .pairs__neben{ grid-template-columns:minmax(9rem, auto) 1fr; gap:var(--space-l) } }
  .pairs__neben p{ margin:0; max-width:none; opacity:.85 }
  /* Sortiment: Einleitung mittig (Korrektur 30.09.2026) */
  .info p.sortiment-intro{ text-align:center; margin-inline:auto; justify-self:center; max-width:52ch }
  /* Reihen: drei Spalten wie vorher die Klappkacheln */
  @media (min-width:1041px){ .dreh-raster--reihen{ grid-template-columns:repeat(3, 1fr) } }
  .dreh__hinweis--plakat{ margin-top:var(--space-xs) }
  html:not(.js-dreh) .dreh__hinweis--plakat{ display:none }

  /* Abschnittstitel etwas groesser (Korrektur 30.09.2026) */
  .doc__label.t-label{ font-size:clamp(1rem, 1.3vw, 1.15rem) }
  .paar__text .contact--start{ justify-content:flex-start }
  /* Handy: Logo-Kachel richtet sich nach der sichtbaren Seite, sonst
     steht das Logo in einer bildschirmhohen Leerflaeche. */
  @media (max-width:720px){
    .js-dreh .dreh--logo:not(.is-gedreht) .dreh__seite--hinten{ position:absolute; inset:0; overflow:hidden }
    .js-dreh .dreh--logo.is-gedreht .dreh__seite--vorn{ position:absolute; inset:0 }
    .dreh--logo .dreh__logo{ min-height:15rem }
  }

  /* ==================================================================
     Korrekturen 30.09.2026, zweite Runde
     ================================================================== */
  /* Social-Knoepfe in der Kontaktspalte */
  .social{ list-style:none; margin:var(--space-xs) 0 0; padding:0; display:flex; gap:var(--space-s) }
  .social__knopf{
    display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--rule-solid); color:var(--mark);
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .social__knopf svg{ width:20px; height:20px }
  .social__knopf:hover, .social__knopf:focus-visible{ background:var(--mark-soft); border-color:var(--mark-soft); color:var(--bg) }
  .social__knopf:focus-visible{ outline:2px solid var(--mark); outline-offset:3px }

  /* Veroeffentlichungen: geschlossene Kacheln gleich hoch */
  .dreh-raster--vo:not(:has(.is-offen, .is-gedreht)){ align-items:stretch }
  .dreh-raster--vo .dreh__innen{ height:100% }
  .dreh-raster--vo .dreh__seite--vorn{ display:flex; flex-direction:column }

  /* Waschen: ganzes Bild, nicht beschnitten */
  @media (min-width:861px){
    .paar--natuerlich{ align-items:center }
    .paar--natuerlich .paar__bild{ position:static; min-height:0 }
    .paar--natuerlich .paar__bild img{ position:static; height:auto; aspect-ratio:auto; object-fit:contain }
  }
  .paar--natuerlich .paar__bild img{ aspect-ratio:auto }

  /* Freigestellte Motive: kein Rahmen, kein Beschnitt */
  .paar__bild--frei{ background:none; border-radius:0; overflow:visible; display:grid; place-items:center }
  @media (min-width:861px){
    .paar:has(.paar__bild--frei){ align-items:center }
    .paar__bild--frei{ position:static; min-height:0 }
    .paar__bild--frei picture{ height:auto }
    .paar__bild--frei img{ position:static; height:auto; max-height:460px; width:auto; max-width:100%; aspect-ratio:auto; object-fit:contain }
  }
  .paar__bild--frei img{ aspect-ratio:auto; object-fit:contain; max-height:420px; width:auto; max-width:100% }

  /* Zubehoer: vier freigestellte Produkte */
  .produkte{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l) var(--space-m); align-items:center; justify-items:center }
  .produkte__stueck{ display:grid; place-items:center; width:100% }
  .produkte__stueck img{ display:block; width:auto; height:auto; max-width:100%; max-height:220px }
  .produkte__stueck:nth-child(4) img{ max-height:300px }

  /* Sortiment: Etiketten-Legende (30.09.2026) */
  .etiketten{ display:grid; gap:var(--space-s); justify-items:center; text-align:center }
  .info p.etiketten__legende{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:var(--space-xs) var(--space-s); margin:0; max-width:none;
    font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase;
  }
  .etikett{
    display:inline-block; padding:3px 10px; border-radius:2px;
    font-weight:600; letter-spacing:.12em; font-size:.8rem; line-height:1.4;
  }
  .etikett--weiss{ background:#E4E5E7; color:#17181B }
  .etikett--orange{ background:#E8792B; color:#17181B }
  .etiketten__trenner{ opacity:.35; margin-inline:var(--space-xs) }
  /* Zubehoer: Produkte etwas kleiner (30.09.2026) */
  .produkte{ max-width:440px; justify-self:center; gap:var(--space-l) var(--space-l) }
  .produkte__stueck img{ max-height:170px }
  .produkte__stueck:nth-child(4) img{ max-height:230px }
  .page-hero__inner p.page-hero__lead{ font-size:clamp(1.15rem,2vw,1.4rem); font-weight:600; letter-spacing:.02em; margin:0 }

  /* Label, 30.09.2026 */
  .dreh__logo-bild{ display:block; width:min(100%, 340px); height:auto }
  .vo-gruppe{
    margin:0; text-align:center; font-size:var(--fs-small); font-weight:600;
    letter-spacing:.24em; text-transform:uppercase; opacity:.7;
  }
  .doc__body > .vo-gruppe:not(:first-child){ margin-top:var(--raum-abschnitt) }
  .vo-daten{
    display:grid; grid-template-columns:auto 1fr; gap:4px var(--space-s);
    margin:var(--space-xs) 0 0; padding-top:var(--space-s);
    border-top:1px solid var(--rule-solid); font-size:var(--fs-small);
  }
  .vo-daten dt{ opacity:.6; letter-spacing:.06em }
  .vo-daten dd{ margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
  /* Freigestellte Cover: kein dunkler Kasten dahinter */
  .dreh__bild--frei{ background:var(--bg) }
  .js-dreh .dreh--drei .dreh__bild--frei img{ object-fit:contain }
  /* Mehrtaegige Termine: Zeitraum passt in die Datumsspalte */
  .aushang__tag--spanne{ font-size:clamp(2rem, 4vw, 3rem) !important; white-space:nowrap; letter-spacing:-.01em }

  /* ==================================================================
     Zubehoer als Produktraster mit Bezeichnung (30.09.2026, abends)
     Vier gleich grosse Felder, Bilder auf gemeinsamer Grundlinie,
     Bezeichnung darunter linksbuendig.
     ================================================================== */
  .produkte{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl) var(--space-l);
    max-width:460px; width:100%; justify-self:center; align-self:center;
  }
  .produkt{ margin:0; display:grid; gap:var(--space-s); align-content:end }
  .produkt__bild{ height:200px; display:flex; align-items:flex-end; justify-content:center }
  .produkt__bild picture{ display:contents }
  .produkt__bild img{ display:block; max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain }
  .produkt figcaption{ display:grid; gap:2px; text-align:center; padding-top:var(--space-s); border-top:1px solid var(--rule-solid) }
  .produkt__marke{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55 }
  .produkt__name{ font-size:var(--fs-small); letter-spacing:.04em }
  @media (max-width:560px){ .produkt__bild{ height:150px } }

  /* Packstation: ganzes Bild, Hochformat, nicht beschnitten */
  .paar__bild--ganz{ background:none }
  .paar__bild--ganz img{ max-height:620px; width:auto !important; max-width:100%; margin-inline:auto; border-radius:4px }

  /* Logo-Kacheln: Quer-Lockup wie das Archive-Series-Logo,
     "Mehr erfahren" am unteren Rand (30.09.2026, abends) */
  .dreh__logo{ position:relative; padding-bottom:calc(var(--space-xl) + var(--space-l)) }
  .dreh__logo .dreh__hinweis{ position:absolute; left:0; right:0; bottom:var(--space-l); justify-content:center }
  .dreh__lockup{ display:flex; align-items:center; gap:clamp(12px, 2.2vw, 22px); width:min(100%, 340px) }
  .dreh__lockup svg{ width:31%; height:auto; flex:none }
  .dreh__lockup-text{ margin:0; display:grid; line-height:.95; text-transform:uppercase }
  .dreh__lockup-text b{ font-weight:600; font-size:clamp(2.1rem, 4.4vw, 3.35rem); letter-spacing:.045em }
  .dreh__lockup-text span{ font-weight:400; font-size:clamp(1.55rem, 3.2vw, 2.45rem); letter-spacing:.07em; margin-top:.12em }
  .info .dreh__logo p.dreh__hinweis{ max-width:none; margin:0 }
  .dreh__lockup svg{ width:33% }
  .dreh__lockup-text span{ letter-spacing:.055em }

  /* Termine aufklappbar (30.09.2026, abends): sichtbar sind Datum,
     Reihe, Titel und Metazeile. Klick auf den Titel oeffnet Text und
     Plakat nebeneinander. */
  .aushang__eintrag--bild .aushang__inhalt{ grid-template-columns:1fr !important }
  .aushang__text{ justify-items:stretch }
  .aushang__knopf{
    all:unset; cursor:pointer; box-sizing:border-box; width:100%;
    display:grid; grid-template-columns:1fr auto; gap:var(--space-m); align-items:start;
  }
  .aushang__knopf .klapp__zeichen{ margin-top:.3em; font-size:.6em }
  .aushang__knopf:hover .klapp__zeichen{ opacity:1 }
  .aushang__knopf:focus-visible{ outline:2px solid var(--mark); outline-offset:6px }
  .aushang__eintrag.is-offen .aushang__knopf .klapp__zeichen::after{ transform:translateY(-50%) rotate(0deg) }
  .aushang__titel{ max-width:none }
  .aushang__mehr{ display:grid; gap:var(--space-l); margin-top:var(--space-m); padding-top:var(--space-m); border-top:1px solid var(--rule-solid) }
  .aushang__mehr[hidden]{ display:none }
  .aushang__mehrtext{ display:grid; gap:var(--space-s); justify-items:start }
  @media (min-width:941px){
    .aushang__mehr:has(.aushang__bild){ grid-template-columns:1fr minmax(0,17rem); align-items:start; gap:var(--space-xl) }
  }
  .aushang__eintrag{ padding-bottom:var(--space-l); border-bottom:1px solid var(--rule) }
  /* Produkte: Bezeichnungslinie ueber volle Feldbreite */
  .produkte{ justify-items:stretch }

  /* ==================================================================
     Nachtrag 30.09.2026, spaet
     ================================================================== */
  /* Waschen: Bild kleiner, damit es zur Textmenge passt */
  @media (min-width:861px){
    section[aria-labelledby="waschen-titel"] .paar__bild{ justify-self:center; width:min(100%, 440px) }
  }

  /* Termine: keine Trennlinien, kein Plus. Der unterstrichene Titel
     zeigt, dass man ihn anklicken kann. */
  .aushang__eintrag{ border-bottom:0 }
  .aushang__mehr{ border-top:0; padding-top:0 }
  .aushang__knopf .klapp__zeichen{ display:none }
  .aushang__knopf{ grid-template-columns:1fr }
  .aushang__knopf > span:first-child{
    text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:.18em; text-decoration-color:var(--rule-solid);
    transition:text-decoration-color .2s ease;
  }
  .aushang__knopf:hover > span:first-child,
  .aushang__eintrag.is-offen .aushang__knopf > span:first-child{ text-decoration-color:var(--mark) }

  /* Logo-Lockup: Schrift skaliert mit der Kachel, nicht mit dem
     Fenster. Beide Logos gleich breit. */
  .dreh__lockup{ container-type:inline-size }
  .dreh__lockup-text b{ font-size:15.4cqi }
  .dreh__lockup-text span{ font-size:11.3cqi }
  .dreh__logo-bild{ width:min(100%, 340px) }
  .dreh__lockup-text b{ font-size:14.8cqi }
  .dreh__lockup-text span{ font-size:10.9cqi }
  .aushang__eintrag{ padding-bottom:0 }

  /* Social: nur die Zeichen, keine Kreise (30.09.2026, 22 Uhr).
     Klickflaeche bleibt 44 px gross. */
  .social{ gap:var(--space-xs); margin-left:-10px }
  .social__knopf{ border:0; border-radius:4px; background:none; opacity:.8; transition:opacity .2s ease }
  .social__knopf svg{ width:22px; height:22px }
  .social__knopf:hover, .social__knopf:focus-visible{ background:none; color:var(--mark); opacity:1 }

  /* Startbild etwas naeher heran: die hellen Hauswaende links und
     rechts treten zurueck, Laden und Inhaber fuellen das Bild. */
  .masthead__media{ overflow:hidden }
  /* Seit 30.09.2026 abends: Hauswaende sind aus der Datei geschnitten. */
  .masthead__img{ object-position:50% 58% }
  @media (max-width:720px){ .masthead__img{ object-position:10% 50% } }

  /* ===== Mitschnitte (01.10.2026) =====
     Ohne Vorschaubilder: YouTube-Bilder wuerden schon beim Laden eine
     Anfrage an Google ausloesen. Stattdessen ruhige Kacheln im Stil der
     Reihen-Kacheln — Nummer, Abspielzeichen, Titel darunter. */
  .clips--raster{ gap:var(--space-l) var(--space-m) }
  @media (min-width:721px){
    .clips--raster{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  }
  @media (min-width:1080px){
    .clips--raster{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  }
  .clip__frame{ border-color:var(--rule-solid) }
  .clip__nr{
    position:absolute; top:var(--space-s); left:var(--space-m);
    font-family:"TungstenFunda", sans-serif; font-weight:600;
    letter-spacing:.12em; font-size:14px; color:var(--mark-soft);
  }
  .clip__play{ transition:transform .2s ease }
  .clip__frame:hover .clip__play{ transform:scale(1.12) }
  .clip__frame[disabled]{ cursor:default; opacity:.55 }
  .clip__frame[disabled]:hover{ border-color:var(--rule-solid) }
  .clip__titel{ display:block; font-size:var(--fs-body, 1rem); color:var(--mark) }
  .info p.clips__mehr{ margin-top:var(--space-xl); display:flex; justify-content:center; max-width:none }
  .info p.clips__zurueck{ margin-top:var(--space-m); display:flex; justify-content:center; max-width:none }
  .info p.reihen__mitschnitte{ margin-top:var(--space-xl); display:flex; justify-content:center; max-width:none; grid-column:1 / -1 }
  a.clip__frame{ text-decoration:none; box-sizing:border-box }
  .clips--raster > .clip{ min-width:0; grid-template-columns:minmax(0,1fr); align-content:start }
  .clips--raster .clip__frame{ width:100%; min-width:0 }

  /* ------------------------------------------------------------------ */
  /*  Push-Banner                                                        */
  /* ------------------------------------------------------------------ */

  .push-banner{
    padding:var(--space-s) 0;
    background:color-mix(in srgb, var(--bg) 92%, var(--mark));
    border-bottom:1px solid var(--rule-solid);
  }
  .push-banner__text{
    display:flex; align-items:center; gap:var(--space-s);
    flex-wrap:wrap;
    font-size:var(--fs-small); color:var(--mark-soft);
    margin:0;
  }
  .push-banner--aktiv .push-banner__text{ color:var(--mark) }
  .push-banner--aktiv #push-knopf{ opacity:.65 }
  /* Verwaltung: schlanker Fuss ohne Bild, Karte und Frontend-Links. */
  .site-footer--verwaltung{
    padding-block:var(--space-l) var(--space-l);
    margin-top:var(--space-xl);
    border-top:1px solid var(--rule-solid);
  }