/* ══════════════════════════════════════════════════════════════════════════
   LEICA WELT · Design-System
   Fassung 2 · 04.09.2026 · NUR STAGING · Release-Kennung: r3-lg992
   --------------------------------------------------------------------------
   GESTALTUNGSRICHTUNG  „Linie"
   Aus dem Variantenvergleich unter /prototypen. Struktur entsteht durch
   Weissraum, Haarlinien und typografische Kontraste — nicht durch Flaechen,
   Rundungen oder Schatten. Ausnahme sind Hinweisflaechen: sie tragen eine
   ruhige helle Flaeche, damit sie sich vom Fliesstext abheben.

   FARBBEDEUTUNG (verbindlich)
     Rot     aktive Auswahl, Fortschritt, Fehler, gezielte Trennlinie
     Gruen   erfolgreicher Abschluss, verfuegbare Kapazitaet
     Ocker   Hinweis, Aufmerksamkeit
     Schwarz primaere Aktion, starke typografische Hierarchie
     Grau    Flaeche, Ruhe, Struktur
   Keine dekorativen roten Punkte. Keine grossflaechigen roten Rahmen.

   KAPSELUNG
   Alle Regeln sind auf `.lw-inhalt` (oeffentlicher Inhaltsbereich, gesetzt in
   _layout/main.twig um {% block content %}) und `#leica-booking` begrenzt.
   Kopfbereich, Navigation und Fusszeile liegen ausserhalb dieses Wrappers und
   werden nicht beruehrt.

   BEWUSST GLOBALE REGELN (vollstaendige Liste, jeweils begruendet):
     1. :root-Farb- und Massvariablen — nur Definitionen, wirken nur dort,
        wo sie auch benutzt werden.
     2. @media (prefers-reduced-motion: reduce) auf `*` — eine
        Barrierefreiheitsvorgabe, die absichtlich auch fuer Kopf, Navigation
        und Fusszeile gelten soll.
     3. .ratio-3x4 / .ratio-2x3 / .ratio-3x2 — Ergaenzung fehlender
        Bootstrap-Seitenverhaeltnisse. Reine Utility-Definitionen ohne
        Eigenwirkung; .ratio-3x4 wird im Kachel-Block verwendet, war aber in
        keiner geladenen Datei definiert.
     4. .modal / .modal-backdrop z-index — Fehlerbehebung, keine Gestaltung.
        Der Theme-Fork von Bootstrap setzt --bs-modal-zindex: 101 und
        --bs-backdrop-zindex: 100, waehrend .leica-nav in style.twig auf 1050
        steht. Dadurch lag die feste Kopfzeile UEBER jedem Modal; die
        Schliessen-Schaltflaeche des Vollbild-Suchmodals liegt genau unter dem
        Menueschalter und war per Maus nicht erreichbar. Nachgemessen mit
        elementFromPoint: getroffen wurde die Hamburger-Schaltflaeche.
   Sonst gibt es keine ungescopten Regeln fuer .btn, .card, h1–h6 oder
   vergleichbare Bootstrap-Grundklassen.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --lw-schwarz:      #141414;
  --lw-weiss:        #ffffff;
  --lw-flaeche:      #f4f4f4;
  --lw-flaeche-tief: #ebe9e6;
  --lw-linie:        #e2e0dd;
  --lw-linie-stark:  #c9c6c2;
  --lw-leise:        #5e5e5e;   /* 5,9:1 auf Weiss, 5,4:1 auf --lw-flaeche */

  --lw-rot:      #e2001a;   /* Auswahl, Fortschritt, Fehler */
  --lw-gruen:    #1c6b45;   /* Abschluss, verfuegbare Kapazitaet */
  --lw-ocker:    #8a6414;   /* Hinweis */

  --lw-mass:      68ch;
  --lw-abschnitt: clamp(3rem, 7vw, 7rem);

  /* Bewegungskurven. Die eingebauten CSS-Easings sind zu weich;
     ease-in wird fuer Oberflaechen grundsaetzlich nicht verwendet. */
  --lw-aus:    cubic-bezier(.23, 1, .32, 1);
  --lw-ausein: cubic-bezier(.77, 0, .175, 1);
}

/* ══ 1 · TYPOGRAFIE ══════════════════════════════════════════════════════ */

.lw-inhalt h1, .lw-inhalt .h1,
.lw-inhalt h2, .lw-inhalt .h2,
.lw-inhalt h3, .lw-inhalt .h3 {
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.lw-inhalt h4, .lw-inhalt .h4,
.lw-inhalt h5, .lw-inhalt .h5,
.lw-inhalt h6, .lw-inhalt .h6 {
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
}

/* Lesebreite. `w-lg-75` rechnet in Prozent und laesst auf breiten
   Bildschirmen Zeilen mit 140–160 Zeichen entstehen. */
.lw-inhalt .lw-mass,
.lw-inhalt .entry-text > p,
.lw-inhalt .entry-text > ul,
.lw-inhalt .entry-text > ol,
/* Zitatbreite folgt jetzt der Inhaltsspalte, siehe Abschnitt 12. */

.lw-inhalt .text-muted,
.lw-inhalt .form-text,
#leica-booking .text-muted,
#leica-booking .form-text { color: var(--lw-leise) !important; }

/* ══ 2 · SCHALTFLAECHEN ══════════════════════════════════════════════════
   Primaer schwarz, sekundaer als Kontur. KEIN roter Punkt — er hatte keine
   Bedeutung und widerspricht der Referenz. Druckfeedback ueber scale(.97):
   die Flaeche reagiert sichtbar auf den Druck, ohne dass etwas springt.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .btn, #leica-booking .btn,
.lw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--lw-aus),
              color            160ms var(--lw-aus),
              border-color     160ms var(--lw-aus),
              transform        160ms var(--lw-aus);
}

.lw-inhalt .btn:active, #leica-booking .btn:active, .lw-btn:active { transform: scale(.97); }

.lw-inhalt .btn-dark,  .lw-inhalt .btn-primary,
#leica-booking .btn-dark, #leica-booking .btn-primary,
.lw-btn--primaer {
  background-color: var(--lw-schwarz);
  border-color: var(--lw-schwarz);
  color: var(--lw-weiss);
}
.lw-inhalt .btn-dark:hover, .lw-inhalt .btn-primary:hover,
#leica-booking .btn-dark:hover, #leica-booking .btn-primary:hover,
.lw-btn--primaer:hover { background-color: #000; border-color: #000; color: var(--lw-weiss); }

/* Sekundaer im oeffentlichen Inhalt — VARIANTE B (Leica-Entscheid 07.09.2026,
   Baustein 03). Weisse Kapsel mit feiner Haarlinie statt der frueheren
   durchsichtigen Flaeche mit schwarzer Kontur.

   Warum der Wechsel: die alte Fassung kippte im Hover vollstaendig auf
   Schwarz — ein Zustandswechsel, der so stark ist wie der Unterschied
   zwischen sekundaer und primaer. Variante B laesst den Grund weiss und
   dunkelt AUSSCHLIESSLICH die Linie nach; die Rangordnung zwischen
   primaerer und sekundaerer Aktion bleibt dadurch in jedem Zustand lesbar.

   Abgrenzung: die Buchungsstrecke behaelt ihre eigene ruhige V2-Flaeche
   (Block direkt darunter, `#leica-booking`). Das ist der Entscheid aus
   Runde 9 und wird hier NICHT angefasst. `#leica-booking` liegt zwar
   INNERHALB von `.lw-inhalt`, gewinnt aber ueber die Kennung: (1,1,0)
   schlaegt (0,2,0). Nachgemessen mit eingesetzten Pruefkoerpern in beiden
   Bereichen.

   Nachtrag 07.09.2026: die Liste umfasst jetzt auch `btn-outline-secondary`,
   `btn-outline-primary` und `btn-outline-light`. Grund: die beiden
   Filterschaltflaechen ueber dem Ausstellungs-Slider („Aktuelle
   Ausstellungen" / „Kommende Ausstellungen") tragen diese Klassen und
   standen gemessen mit rgba(0,0,0,0) auf GRUND UND RAND da — als
   Schaltflaeche unsichtbar, nur als Text erkennbar. Derselbe Fehler war in
   Runde 9 bereits in der Buchungsstrecke behoben worden; im oeffentlichen
   Inhalt war er geblieben. */
.lw-inhalt .btn-outline-dark, .lw-inhalt .btn-light, .lw-inhalt .btn-secondary,
.lw-inhalt .btn-outline-secondary, .lw-inhalt .btn-outline-primary,
.lw-inhalt .btn-outline-light,
.lw-btn--sekundaer {
  background-color: var(--lw-weiss);
  border-color: var(--lw-linie-stark);
  color: var(--lw-schwarz);
}
.lw-inhalt .btn-outline-dark:hover, .lw-inhalt .btn-light:hover, .lw-inhalt .btn-secondary:hover,
.lw-inhalt .btn-outline-secondary:hover, .lw-inhalt .btn-outline-primary:hover,
.lw-inhalt .btn-outline-light:hover,
.lw-btn--sekundaer:hover {
  background-color: var(--lw-weiss);
  border-color: var(--lw-schwarz);
  color: var(--lw-schwarz);
}
.lw-inhalt .btn-outline-dark:disabled, .lw-inhalt .btn-outline-dark.disabled,
.lw-inhalt .btn-light:disabled, .lw-inhalt .btn-secondary:disabled,
.lw-inhalt .btn-outline-secondary:disabled, .lw-inhalt .btn-outline-primary:disabled,
.lw-btn--sekundaer:disabled {
  background-color: var(--lw-weiss);
  border-color: var(--lw-linie);
  color: #a5a2a0;
  opacity: 1;
}

/* Sekundaer in der BUCHUNGSSTRECKE: Variante 2 — ruhige helle Flaeche,
   keine dominante schwarze Kontur, dunkler Text, dezente Vertiefung im Hover.
     .v2 .b-sekundaer { background: --flaeche; color: schwarz; border-color: --flaeche }
     .v2 .b-sekundaer:hover { background: --flaeche2; border-color: --flaeche2 }

   Die Liste umfasst ALLE sekundaeren Varianten, die das Widget tatsaechlich
   ausgibt. Zuvor fehlte `btn-outline-secondary` — die Zaehler-Schaltflaechen
   der Teilnehmerzahl standen dadurch mit durchsichtigem Grund UND
   durchsichtigem Rand da, also praktisch unsichtbar (gemessen
   `rgba(0,0,0,0)` auf beidem). */
#leica-booking .btn-outline-dark,
#leica-booking .btn-outline-secondary,
#leica-booking .btn-outline-primary,
#leica-booking .btn-outline-light,
#leica-booking .btn-light,
#leica-booking .btn-secondary {
  background-color: var(--lw-flaeche);
  border-color: var(--lw-flaeche);
  color: var(--lw-schwarz);
}
#leica-booking .btn-outline-dark:hover,
#leica-booking .btn-outline-secondary:hover,
#leica-booking .btn-outline-primary:hover,
#leica-booking .btn-outline-light:hover,
#leica-booking .btn-light:hover,
#leica-booking .btn-secondary:hover {
  background-color: var(--lw-flaeche-tief);
  border-color: var(--lw-flaeche-tief);
  color: var(--lw-schwarz);
}

/* Der frühere rote Akzentpunkt entfaellt ersatzlos.

   KORREKTUR 07.09.2026: Bis hierher war nur das <i class="dot">-ELEMENT
   ausgeblendet. Der Punkt wird aber zusaetzlich als PSEUDOELEMENT erzeugt —
   `.btn-red-dot:after` in _elements/style.twig, gemessen 12 x 12 px in
   rgb(226,6,18) auf den Hero-Schaltflaechen der Detailseiten. Der frueher
   berichtete Wert „0 rote Punkte" war ein Messfehler: der Pruefcode reichte
   das ::after-Argument nicht an getComputedStyle weiter und sah deshalb nie
   ein Pseudoelement.
   Beide Wege werden jetzt abgeschaltet. Die Klasse bleibt in den Vorlagen
   stehen — sie ist ohne diese Regel wirkungslos, und ein Eingriff in ueber
   zwanzig Templates waere ein groesseres Risiko als der Nutzen.
   Nicht beruehrt: der Partnerbereich mit eigener style-partner.twig. */
.lw-inhalt .btn .dot, #leica-booking .btn .dot,
.lw-inhalt .btn-red-dot .dot { display: none; }
.lw-inhalt .btn-red-dot::after, .lw-inhalt .btn-white-dot::after,
.lw-inhalt .hero-btn::after, #leica-booking .btn-red-dot::after {
  content: none !important;
  display: none !important;
}

/* Textlink als sekundaere Aktion — kontrastreich und eindeutig als Link. */
.lw-inhalt .lw-textlink, #leica-booking .lw-textlink {
  display: inline-block;
  color: var(--lw-schwarz);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  background: none;
  border: 0;
  padding: .35rem 0;
  min-height: 44px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: color 160ms var(--lw-aus);
}
.lw-inhalt .lw-textlink:hover, #leica-booking .lw-textlink:hover {
  color: var(--lw-rot);
  text-decoration-thickness: 2px;
}

/* ══ 3 · FOKUS ══════════════════════════════════════════════════════════ */

.lw-inhalt a:focus-visible,
.lw-inhalt button:focus-visible,
.lw-inhalt [tabindex]:focus-visible,
.lw-inhalt .accordion-button:focus-visible,
#leica-booking a:focus-visible,
#leica-booking button:focus-visible,
#leica-booking .form-check-input:focus-visible {
  outline: 2px solid var(--lw-rot);
  outline-offset: 2px;
}

/* Ganzflaechig verlinkte Karte: der Fokus lag auf dem unsichtbaren
   .stretched-link und war dadurch nicht zu sehen. */
.lw-inhalt .entry-card:has(.stretched-link:focus-visible),
.lw-inhalt .card:has(.stretched-link:focus-visible),
.lw-inhalt .position-relative:has(> .stretched-link:focus-visible) {
  outline: 2px solid var(--lw-rot);
  outline-offset: 4px;
}
.lw-inhalt .stretched-link:focus-visible { outline: none; }

/* ══ 4 · HINWEISFLAECHEN ═════════════════════════════════════════════════
   Ein Aufbau fuer alle vier Bedeutungen: ruhige helle Flaeche, dunkler Text,
   schmaler farbiger Rand links, dazu ein Symbol. Die Farbe ist nie das
   einzige Merkmal — Symbol und Wortlaut tragen die Aussage mit.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .alert, #leica-booking .alert, .lw-hinweis {
  --lw-strich: var(--lw-leise);
  --lw-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5e5e' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E");
  position: relative;
  margin-bottom: 1rem;
  padding: .9rem 1.1rem .9rem 2.9rem;
  border: 0 !important;
  border-left: 3px solid var(--lw-strich) !important;
  border-radius: 0 !important;
  background-color: var(--lw-flaeche) !important;
  color: var(--lw-schwarz) !important;
  font-size: .95rem;
  line-height: 1.5;
}

.lw-inhalt .alert::before, #leica-booking .alert::before, .lw-hinweis::before {
  content: "";
  position: absolute;
  left: 1.05rem; top: 1rem;
  width: 1.15rem; height: 1.15rem;
  background: var(--lw-symbol) center / contain no-repeat;
}

#leica-booking .alert-info, #leica-booking .alert-secondary, #leica-booking .alert-primary,
.lw-inhalt .alert-info, .lw-inhalt .alert-secondary, .lw-inhalt .alert-primary,
.lw-hinweis--info { --lw-strich: var(--lw-leise); }

#leica-booking .alert-danger, .lw-inhalt .alert-danger, .lw-hinweis--fehler {
  --lw-strich: var(--lw-rot);
  --lw-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2001a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.4v.1'/%3E%3C/svg%3E");
}

#leica-booking .alert-success, .lw-inhalt .alert-success, .lw-hinweis--erfolg {
  --lw-strich: var(--lw-gruen);
  --lw-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6b45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.7'/%3E%3C/svg%3E");
}

#leica-booking .alert-warning, .lw-inhalt .alert-warning, .lw-hinweis--warnung {
  --lw-strich: var(--lw-ocker);
  --lw-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5L21 19H3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 16.7v.1'/%3E%3C/svg%3E");
}

.lw-inhalt .alert strong, #leica-booking .alert strong { font-weight: 600; }

.lw-inhalt .alert .alert-link, .lw-inhalt .alert a,
#leica-booking .alert .alert-link, #leica-booking .alert a,
#leica-booking .alert button.lw-textlink {
  display: inline-block;
  margin-top: .45rem;
  color: var(--lw-schwarz) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}

/* NUR die Buchungsstrecke geht auf 500: der Link in einer Hinweisflaeche darf
   dort nicht schwerer wiegen als die primaere Aktion desselben Schritts.
   Bewusst als eigener Block — die Regel darueber gilt auch fuer `.lw-inhalt`,
   und der oeffentliche Inhalt sollte in dieser Runde unberuehrt bleiben. */
#leica-booking .alert .alert-link,
#leica-booking .alert a,
#leica-booking .alert button.lw-textlink { font-weight: 500; }
.lw-inhalt .alert .alert-link:hover, .lw-inhalt .alert a:hover,
#leica-booking .alert .alert-link:hover, #leica-booking .alert a:hover,
#leica-booking .alert button.lw-textlink:hover {
  color: var(--lw-rot) !important;
  text-decoration-thickness: 2px;
}

/* ══ 5 · BILDVERHAELTNISSE ═══════════════════════════════════════════════ */

.ratio-3x4  { --bs-aspect-ratio: 133.3333%; }
.ratio-2x3  { --bs-aspect-ratio: 150%; }
.ratio-3x2  { --bs-aspect-ratio: 66.6667%; }

.lw-bild-fest { overflow: hidden; background: var(--lw-flaeche); }
.lw-bild-fest > img,
.lw-bild-fest > video,
.lw-bild-fest > picture > img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Redaktionell steuerbar: das Template setzt --lw-fokus aus dem
     Bild-Fokuspunkt des Assets. Ohne Angabe bleibt es mittig. */
  object-position: var(--lw-fokus, 50% 50%);
}
.lw-bild-4x3 { aspect-ratio: 4 / 3; }
.lw-bild-3x2 { aspect-ratio: 3 / 2; }

/* ══ 6 · KARTEN — VARIANTE 2 ═════════════════════════════════════════════
   SOLL (aus /prototypen?v=2): Bild 4:3, darunter der Text auf --flaeche mit
   1,25 rem seitlichem und 1,4 rem unterem Innenabstand; kein Rahmen, kein
   Radius, kein Schatten; Titel 1,05 rem/500 auf zwei Zeilen begrenzt; Meta
   0,84 rem in --leise; „mehr" unterstrichen 0,86 rem/500; Fokus 2 px rot mit
   4 px Versatz um die ganze Karte.

   IST vor dieser Aenderung: die Variante-1-Behandlung — Text ohne Flaeche,
   nur Haarlinie und 1 rem Abstand nach oben (gemessen: transparent,
   padding 16px 0 0). Das Bild sass direkt darueber mit 1,1 rem Abstand.

   Der Titelbereich haelt weiterhin zwei Zeilen frei, damit nebeneinander
   stehende Karten nicht unterschiedlich hoch werden.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Bild und Textflaeche stossen aneinander — die Flaeche traegt die Trennung,
   nicht ein Abstand und nicht eine Linie. */
.lw-inhalt .entry-card .lw-bild-fest { margin-bottom: 0; }

.lw-inhalt .entry-card .lw-karte-text {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border-top: 0;
  background-color: var(--lw-flaeche);
  flex: 1;
}

/* Statuszeile ist immer vorhanden, auch leer — sonst verrutschen die
   Titel benachbarter Karten gegeneinander. */
.lw-inhalt .lw-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  /* Feste Hoehe und Zeilenhoehe: eine leere Statuszeile muss exakt so hoch
     sein wie eine gefuellte, sonst beginnen die Titel benachbarter Karten
     auf unterschiedlicher Hoehe. */
  height: 1.15rem;
  line-height: 1.15rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lw-inhalt .lw-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.lw-inhalt .lw-status:empty::before { display: none; }
.lw-inhalt .lw-status--abgesagt  { color: var(--lw-rot); }
.lw-inhalt .lw-status--kommend   { color: var(--lw-ocker); }
.lw-inhalt .lw-status--laufend   { color: var(--lw-gruen); }

.lw-inhalt .entry-card .lw-karte-titel {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.lw-inhalt .entry-card .lw-karte-meta {
  font-size: .84rem;
  color: var(--lw-leise);
  font-variant-numeric: tabular-nums;
}

.lw-inhalt .entry-card .lw-karte-mehr {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .86rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.lw-inhalt .entry-card .lw-bild-fest > img { transition: transform 400ms var(--lw-aus); }
.lw-inhalt .entry-card:hover .lw-bild-fest > img { transform: scale(1.03); }

/* Kartenraster: Variante 2 gibt 1,75 rem Abstand vor. Die Indexseiten
   nutzen Bootstraps `.row.g-4` (1,5 rem); hier wird der Abstand fuer Zeilen,
   die Karten enthalten, auf das Variante-2-Mass gehoben. Die Spaltenbreiten
   bleiben unveraendert — es aendert sich nur die Fuge. */
.lw-inhalt .row:has(> * > .entry-card) { --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.75rem; }

/* Leerzustand fuer Filter ohne Treffer und leere Archive. */
.lw-inhalt .lw-leer {
  padding: 3.5rem 0;
  border-top: 1px solid var(--lw-linie);
  border-bottom: 1px solid var(--lw-linie);
  max-width: var(--lw-mass);
}
.lw-inhalt .lw-leer h2 { font-size: 1.3rem; font-weight: 500; margin: 0 0 .5rem; }
.lw-inhalt .lw-leer p  { color: var(--lw-leise); margin: 0 0 1.25rem; }

/* ══ 7 · BUCHUNGSSTRECKE — AUSWAHLZEILEN NACH VARIANTE 2 ═════════════════
   SOLL, Zeile fuer Zeile aus /prototypen?v=2 uebernommen:

     .v  .slots  { max-width: 640px }
     .v  .slot   { display:flex; align-items:center; gap:.9rem; width:100%;
                   text-align:left; padding:1rem 1.1rem; min-height:56px;
                   border:0; cursor:pointer; transition 140ms }
     .v  .slot:focus-visible { outline:2px solid rot; outline-offset:-2px }
     .v  .marke  { 14px Kreis, 1px --linie2, innen 6px transparent }
     .v  .zeit   { tabular-nums }
     .v2 .slots  { gap: 2px }
     .v2 .slot   { background: --flaeche }
     .v2 .slot:hover:not([disabled]) { background: --flaeche2 }
     .v2 .slot[aria-pressed=true]    { background: weiss;
                                       box-shadow: inset 0 0 0 1px schwarz }
     .v2 .slot[aria-pressed=true] .marke { border-color: rot }
     .v2 .slot[aria-pressed=true] .marke::after { background: rot }
     .v2 .slot[disabled] { background: #fafafa; color: #a5a2a0 }

   ZURUECKGENOMMEN: die Zwischenloesung vom 06.09. — beiger Grund #f5f4f1 mit
   dunklem Balken links als Innenschatten und einer unteren Trennlinie je
   Zeile. Das war weder Variante 1 noch Variante 2. Ebenso entfallen die
   Haarlinie unter jeder Zeile (Variante 1) und der aeussere rote Rahmen um
   die Slotgruppe im Fehlerfall.

   UNVERAENDERT: die Zeile bleibt ueber ihre GESAMTE Flaeche ausloesbar. Das
   Trefferfeld ist weiterhin ein ::before auf der Beschriftung, die per `for`
   zum Eingabefeld gehoert — der Browser aktiviert das Feld selbst, es gibt
   keine nachgebaute Klicklogik.
   ══════════════════════════════════════════════════════════════════════ */

#leica-booking #lw-tourDateSlots,
#leica-booking #lw-packageDateSlots {
  border: 0;
  border-radius: 0;
  max-width: var(--lw-b-mass);
}

#leica-booking .form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  min-height: 56px;
  padding: 1rem 1.1rem !important;
  margin: 0 0 2px !important;            /* die Fuge traegt die Trennung */
  background-color: var(--lw-flaeche);
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 140ms var(--lw-aus),
              box-shadow      140ms var(--lw-aus);
}
#leica-booking .form-check:last-child { margin-bottom: 0 !important; }

#leica-booking .form-check-label {
  flex: 1;
  min-width: 0;
  display: block;
  cursor: pointer;
}

/* Trefferfeld ueber die ganze Zeile. */
#leica-booking .form-check .form-check-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
#leica-booking .form-check-label a { position: relative; z-index: 2; }

/* Verfuegbarkeit rechtsbuendig, wie `.frei { margin-left: auto }` im
   Prototyp. Nur fuer Zeilen, die tatsaechlich eine Angabe tragen — mehr-
   zeilige Beschriftungen (Titel plus Erlaeuterung) bleiben unberuehrt. */
@supports selector(:has(*)) {
  #leica-booking .form-check-label:has(> .badge) {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
  }
  #leica-booking .form-check-label:has(> .badge) > .badge {
    margin-left: auto;
    padding-left: 0;
  }
}

/* ── Bedienfeld: die Marke aus dem Prototyp, aber als echtes Eingabefeld ──
   `appearance: none` aendert nur das Aussehen. Element, Semantik, Tastatur
   und die Zuordnung ueber `for` bleiben nativ. */
#leica-booking .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 2;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--lw-linie-stark);
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 140ms var(--lw-aus);
}
#leica-booking .form-check-input::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 140ms var(--lw-aus);
}
/* Mehrfachauswahl bleibt eckig — rund waere die Zusage „nur eines davon".
   Ausgewaehlt zeigt sie ein rotes HAEKCHEN, kein rotes Quadrat im Quadrat:
   die Form sagt „erledigt", nicht „gefuellt". */
#leica-booking input[type="checkbox"].form-check-input { border-radius: 2px; }
#leica-booking input[type="checkbox"].form-check-input::after {
  border-radius: 0;
  width: 10px;
  height: 10px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
#leica-booking input[type="checkbox"].form-check-input:checked::after {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23e2001a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4'/%3E%3C/svg%3E");
}

#leica-booking .form-check-input:checked { border-color: var(--lw-rot); }
#leica-booking .form-check-input:checked::after { background-color: var(--lw-rot); }

/* ── Zustaende ──────────────────────────────────────────────────────────── */

#leica-booking .form-check:hover { background-color: var(--lw-flaeche-tief); }

#leica-booking .form-check:focus-within {
  outline: 2px solid var(--lw-rot);
  outline-offset: -2px;
}
#leica-booking .form-check .form-check-input:focus-visible { outline: none; }

@supports selector(:has(*)) {
  #leica-booking .form-check:focus-within { outline: none; }
  #leica-booking .form-check:has(.form-check-input:focus-visible) {
    outline: 2px solid var(--lw-rot);
    outline-offset: -2px;
  }

  /* Gewaehlt: weisse Flaeche, feiner dunkler Innenrahmen, roter Punkt,
     Haupttext kraeftiger. Der Innenrahmen liegt als Innenschatten INNEN —
     die Zeile behaelt Breite und Achse. */
  #leica-booking .form-check:has(.form-check-input:checked) {
    background-color: var(--lw-weiss);
    box-shadow: inset 0 0 0 1px var(--lw-schwarz);
  }
  #leica-booking .form-check:has(.form-check-input:checked):hover {
    background-color: var(--lw-weiss);
  }
  /* Die Auswahl wird durch Flaeche, Innenrahmen und roten Punkt getragen.
     Die Zeile wird deshalb NICHT mehr insgesamt gefettet — nur der Kernwert
     (Zeit bzw. Produktname, also das erste Element der Beschriftung) geht
     eine Stufe hoch. */
  #leica-booking .form-check:has(.form-check-input:checked) .form-check-label { font-weight: 400; }
  #leica-booking .form-check:has(.form-check-input:checked) .form-check-label > :first-child,
  #leica-booking .form-check:has(.form-check-input:checked) .form-check-label strong { font-weight: 500; }

  /* Nicht verfuegbar: ruhig zurueckgenommen. Erkennbar an drei Dingen, die
     nicht Farbe sind — hellerer Grund, leeres Bedienfeld, Mauszeiger
     „nicht erlaubt" — dazu der ausgeschriebene Grund im Text, wo die
     Buchungslogik einen liefert. */
  #leica-booking .form-check:has(.form-check-input:disabled) {
    background-color: #fafafa;
    color: #6d6a68;
    cursor: not-allowed;
    box-shadow: none;
  }
  #leica-booking .form-check:has(.form-check-input:disabled) .form-check-label { cursor: not-allowed; }
  #leica-booking .form-check:has(.form-check-input:disabled):hover { background-color: #fafafa; }
  #leica-booking .form-check:has(.form-check-input:disabled) .badge { color: #6d6a68 !important; }
}

/* ── Zustaende als eigene Klassen ────────────────────────────────────────
   Das Widget setzt seit dem 06.09.2026 `is-selected` und `is-disabled` statt
   `border-danger` bzw. `opacity-50`. Diese Regeln stehen bewusst NEBEN den
   `:has()`-Regeln oben: sie greifen auch dort, wo `:has()` fehlt, und sie
   benennen den Zustand, statt ihn aus einer Fehlerfarbe abzuleiten. */
#leica-booking .form-check.is-selected {
  background-color: var(--lw-weiss);
  box-shadow: inset 0 0 0 1px var(--lw-schwarz);
}
#leica-booking .form-check.is-selected:hover { background-color: var(--lw-weiss); }
#leica-booking .form-check.is-selected .form-check-label > :first-child { font-weight: 500; }

#leica-booking .form-check.is-disabled {
  background-color: #fafafa;
  color: #6d6a68;
  cursor: not-allowed;
  box-shadow: none;
}
#leica-booking .form-check.is-disabled:hover { background-color: #fafafa; }
#leica-booking .form-check.is-disabled .form-check-label { cursor: not-allowed; }
#leica-booking .form-check.is-disabled .badge { color: #6d6a68 !important; }

/* Altbestand: `border-danger` bedeutete frueher "ausgewaehlt". Die Regel
   bleibt als Netz stehen, falls irgendwo noch so gerendert wird — rot wird
   daraus in keinem Fall. */
#leica-booking .form-check.border-danger {
  background-color: var(--lw-weiss);
  box-shadow: inset 0 0 0 1px var(--lw-schwarz);
}
#leica-booking .form-check.border-danger .form-check-label > :first-child { font-weight: 500; }

/* Sicherung gegen Bootstrap-Restklassen an einer Auswahlzeile: sollte doch
   einmal `border`, `rounded` oder ein Innenabstand mitkommen, gewinnt die
   Variante-2-Zeile. */
#leica-booking .lw-auswahl.border,
#leica-booking .lw-auswahl.rounded { border: 0 !important; border-radius: 0 !important; }

/* Hinweis ueber einer Gruppe mit Mehrfachauswahl. */
#leica-booking .lw-auswahl-hinweis {
  margin: 0 0 .6rem;
  font-size: var(--lw-b-klein);
  font-weight: 400;
  color: var(--lw-leise);
}

/* `opacity-50` auf ganzen Zeilen zuruecknehmen: es senkte den Textkontrast
   unter jede lesbare Schwelle. */
#leica-booking .form-check.opacity-50 { opacity: 1 !important; }

/* Fehlermarkierung der Slotgruppe — schmaler Strich links, KEIN Rahmen.
   Das Widget haengt im Fehlerfall `border border-danger rounded p-2` an die
   Gruppe; ohne das ausdrueckliche `border: 0` stand dort ein roter Kasten. */
#leica-booking .lw-slots-fehler {
  border: 0 !important;
  border-left: 3px solid var(--lw-rot) !important;
  border-radius: 0 !important;
  padding: .25rem 0 .25rem 1rem !important;
  background: none;
}

/* ══ 8 · VERFUEGBARKEITS-ANGABEN ═════════════════════════════════════════
   Keine gefuellten Badges. Die Zahl im Text traegt die Aussage, die Farbe
   verstaerkt sie nur.
   ══════════════════════════════════════════════════════════════════════ */

#leica-booking .badge {
  background-color: transparent !important;
  border: 0;
  padding: 0 0 0 .55rem;
  white-space: nowrap;
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .01em;
  vertical-align: baseline;
  color: var(--lw-gruen) !important;
}
#leica-booking .badge.bg-warning { color: var(--lw-ocker) !important; }
#leica-booking .badge.bg-danger  { color: var(--lw-rot)   !important; }

/* ══ 9 · FORTSCHRITT ═════════════════════════════════════════════════════ */

#leica-booking .progress-thin { background: var(--lw-linie); height: 2px; border-radius: 0; }
#leica-booking .progress-thin .bar {
  background: var(--lw-rot);
  transition: width 260ms var(--lw-ausein);
}

/* ══ 10 · FORMULARFELDER ═════════════════════════════════════════════════ */

#leica-booking .form-control, #leica-booking .form-select {
  border: 0;
  border-bottom: 1px solid var(--lw-linie-stark);
  border-radius: 0;
  padding-left: 0;
  transition: border-color 160ms var(--lw-aus);
}
#leica-booking .form-control:focus, #leica-booking .form-select:focus,
#leica-booking .form-control:focus-visible, #leica-booking .form-select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--lw-rot) !important;
}
#leica-booking .form-control.is-invalid, #leica-booking .form-select.is-invalid {
  border-bottom-color: var(--lw-rot) !important;
  border-bottom-width: 2px !important;
}

/* ══ 11 · AKKORDEON — VARIANTE 2 ═════════════════════════════════════════
   SOLL (aus /prototypen?v=2): jede Position auf --flaeche, 2 px Fuge
   dazwischen, Ausloeser 1,15 rem / 1,25 rem Innenabstand bei 1,02 rem/500,
   Zeichen wechselt Plus -> Minus, Inhalt in --leise auf max. 62 Zeichen.

   IST vor dieser Aenderung (gemessen auf /haeufige-fragen, /kontakt und
   /besucherinfo/informationen-fuer-ihren-besuch): Grund weiss, keine Fuge
   (margin-bottom 0), Ausloeser 24px 20px 24px 32px bei 20 px/300, dazu
   Bootstraps gedrehtes Winkelzeichen.

   Der Ausloeser ist ein echtes <button>; Buttons erben Schrift nicht.
   Das Auf-/Zu-Zeichen wechselt von Plus zu Minus statt sich zu drehen —
   das bleibt auch bei abgeschalteter Bewegung eindeutig.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-color: transparent;
  background: none;
}

.lw-inhalt .accordion-item {
  background-color: var(--lw-flaeche);
  border: 0;
  border-radius: 0;
  margin-bottom: 2px;          /* die Fuge traegt die Trennung, keine Linie */
}
.lw-inhalt .accordion-item:last-child { margin-bottom: 0; }

.lw-inhalt .accordion-header { margin: 0; font-size: inherit; font-weight: inherit; }

.lw-inhalt .accordion-button,
.lw-inhalt .accordion-lg .accordion-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.25rem !important;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.02rem !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--lw-schwarz);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lw-inhalt .accordion-button:hover { background-color: var(--lw-flaeche-tief) !important; }
.lw-inhalt .accordion-button:focus-visible { outline: 2px solid var(--lw-rot); outline-offset: -2px; }
.lw-inhalt .accordion-button:not(.collapsed) { box-shadow: none; }

/* Plus -> Minus. Beide Striche stecken in EINEM Pseudoelement, weil
   Bootstrap nur ::after fuer das Zeichen vorsieht; zwei Verlaufsflaechen
   bilden Waagerechte und Senkrechte. Beim Oeffnen schrumpft die Senkrechte
   auf null — bei abgeschalteter Bewegung springt sie, bleibt aber richtig. */
.lw-inhalt .accordion-button::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
  background-image:
    linear-gradient(var(--lw-schwarz), var(--lw-schwarz)),
    linear-gradient(var(--lw-schwarz), var(--lw-schwarz)) !important;
  background-size: 16px 1px, 1px 16px !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  transition: background-size 200ms var(--lw-aus);
}
.lw-inhalt .accordion-button:not(.collapsed)::after {
  background-size: 16px 1px, 1px 0 !important;
}

.lw-inhalt .accordion-body {
  padding: 0 1.25rem 1.3rem !important;
  /* `max-width: 62ch` ist am 07.09.2026 entfallen (P1).
     Gemessen: die Akkordeonueberschrift war bei 1440px 1368px breit, der
     Inhalt darunter 619px — der Text brach auf weniger als der halben
     Flaeche um und wirkte eingerueckt und abgeschnitten. Die seitliche
     Polsterung bleibt mit 1.25rem identisch zur Ueberschrift, damit beide
     an derselben Kante beginnen.
     Die Zeilenlaenge folgt jetzt dem umgebenden Inhaltsbereich — so
     ausdruecklich entschieden. */
  color: var(--lw-leise);
  font-size: .95rem;
  line-height: 1.6;
}
.lw-inhalt .accordion-body > *:last-child { margin-bottom: 0; }

/* Breite Tabellen im Akkordeon: eigener waagerechter Bildlauf statt
   Ueberlauf. Vorbestehender Befund, am 07.09.2026 beim Nachweis der
   Inhaltsbreite aufgefallen — bei 375px war eine Tabelle 412px breit in
   einem 303px breiten Kasten. Die frueher gesetzte Begrenzung von 62ch
   hatte das nie verhindert: 62ch sind rund 619px und lagen auf dem Telefon
   immer ueber der verfuegbaren Breite, die Regel griff dort gar nicht.
   Die Seite selbst scrollt weiterhin nicht waagerecht. */
.lw-inhalt .accordion-body { overflow-x: auto; }
.lw-inhalt .accordion-body > table { min-width: 100%; }

/* ══ 12 · REDAKTIONELLER FLIESSTEXT ══════════════════════════════════════ */

/* Leica-Entscheidung 6 (07.09.2026): Zitate laufen ausschliesslich ueber das
   CKEditor-Blockquote. Der eigene Matrix-Zitatblock ist zurueckgebaut. Damit
   traegt diese Regel die Gestaltung, die vorher am Blocktyp hing — gemessen
   aus REF12: kein Rahmen, sondern ein haengendes Ornament links, 20px/1.35,
   Textfarbe wie der Fliesstext.
   Bewusste Abweichung von der Referenz: dort steht das Zitat in einer 336px
   schmalen Spalte. Im redaktionellen Fliesstext waere das ein Bruch, deshalb
   behaelt das Zitat hier die Breite der Inhaltsspalte. */
.lw-inhalt blockquote {
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  padding: 0 0 0 39px;          /* 25 px Ornament + 14 px Abstand */
  border: 0;                     /* die Referenz zeigt keine Trennlinie */
  position: relative;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: #222222;
}
.lw-inhalt blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.18em;
  font-size: 44px;
  line-height: 1;
  color: #d1d4d3;
  pointer-events: none;
}
.lw-inhalt blockquote p { margin: 0 0 .6em; max-width: none; }
.lw-inhalt blockquote p:last-child { margin-bottom: 0; }
/* Eine Quellenzeile ist kein Pflichtfeld — wer eine braucht, schreibt sie als
   letzten Absatz oder als <cite> in das Zitat. Beides wird hier abgesetzt. */
.lw-inhalt blockquote cite {
  display: block;
  margin-top: 24px;
  font-size: 15px;
  font-style: normal;
  line-height: 1.45;
  color: #222222;
}
@media (max-width: 575.98px) {
  .lw-inhalt blockquote {
    padding: 30px 0 0 0;
    font-size: 18px;
  }
  .lw-inhalt blockquote::before { top: -10px; font-size: 40px; }
}
.lw-inhalt .entry-text table, .lw-inhalt .rich-text table {
  width: 100%; margin: 2rem 0; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.lw-inhalt .entry-text th, .lw-inhalt .rich-text th {
  text-align: left; font-weight: 600;
  border-bottom: 1px solid var(--lw-schwarz); padding: .7rem .9rem .7rem 0;
}
.lw-inhalt .entry-text td, .lw-inhalt .rich-text td {
  border-bottom: 1px solid var(--lw-linie); padding: .7rem .9rem .7rem 0; vertical-align: top;
}
.lw-inhalt .entry-text a:not(.btn), .lw-inhalt .rich-text a:not(.btn) {
  color: var(--lw-schwarz);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.lw-inhalt .entry-text a:not(.btn):hover, .lw-inhalt .rich-text a:not(.btn):hover {
  color: var(--lw-rot); text-decoration-thickness: 2px;
}

/* ══ 13 · FLAECHEN, LINIEN, RHYTHMUS ═════════════════════════════════════ */

.lw-inhalt .lw-band-grau { background-color: var(--lw-flaeche); }
.lw-inhalt .lw-abschnitt { padding-block: var(--lw-abschnitt); }
.lw-inhalt .lw-linie { border: 0; border-top: 1px solid var(--lw-linie); margin: 0; }
.lw-inhalt .card { box-shadow: none; border-radius: 0; }

/* ══ 14 · KARUSSELL ══════════════════════════════════════════════════════
   Die Pfeile tragen `d-none d-lg-inline` und sind unterhalb des lg-Punkts
   unsichtbar; einzige Bedienung dort sind die Punkte. Deren Trefferflaeche
   wird unsichtbar auf 44 x 44 px angehoben.
   ══════════════════════════════════════════════════════════════════════ */

/* Trefferflaeche und Gestaltung der Pagination stehen seit dem 07.09.2026
   geschlossen in Abschnitt 30. Hier stand zuvor nur die unsichtbare
   44-px-Flaeche; getrennt von der Gestaltung war sie eine zweite Quelle. */
/* Variante 2: die Pfeile sitzen auf einer ruhigen Flaeche statt in einem
   weissen Kreis mit Rahmen. Gemessen war der Ausgangszustand ein weisser
   Kreis von 50 x 50 px mit `border-radius: 50%` und teils `opacity: .7` —
   eine generische Rundung ohne Bezug zur Richtung. */
.lw-inhalt .swiper-button-next, .lw-inhalt .swiper-button-prev,
.lw-inhalt .splide__arrow {
  backdrop-filter: none; box-shadow: none;
  background-color: var(--lw-flaeche);
  border: 0;
  border-radius: 0;
  width: 48px; height: 48px;
  opacity: 1;
  color: var(--lw-schwarz);
  transition: background-color 160ms var(--lw-aus);
}
.lw-inhalt .swiper-button-next svg, .lw-inhalt .swiper-button-prev svg,
.lw-inhalt .splide__arrow svg { fill: var(--lw-schwarz); }
.lw-inhalt .swiper-button-next::after, .lw-inhalt .swiper-button-prev::after {
  font-size: 1.05rem; color: var(--lw-schwarz);
}
.lw-inhalt .swiper-button-next:hover, .lw-inhalt .swiper-button-prev:hover,
.lw-inhalt .splide__arrow:hover { background-color: var(--lw-flaeche-tief); }
.lw-inhalt .swiper-button-disabled, .lw-inhalt .splide__arrow:disabled {
  opacity: .35; cursor: default;
}
.lw-inhalt .swiper-button-next:focus-visible, .lw-inhalt .swiper-button-prev:focus-visible,
.lw-inhalt .splide__arrow:focus-visible { outline: 2px solid var(--lw-rot); outline-offset: 2px; }

/* ══ 15 · HERO-ABDUNKLUNG ════════════════════════════════════════════════
   `hero-section-natural` hatte keine einzige Regel — weisser Text lag dort
   ungedimmt auf dem Originalbild.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .hero-section-natural { position: relative; }
.lw-inhalt .hero-section-natural::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 100%);
}
.lw-inhalt .hero-section-natural > *:not(img):not(picture) { position: relative; z-index: 2; }

/* ══ 16 · BEWEGUNG ═══════════════════════════════════════════════════════
   Bewusst global: eine Barrierefreiheitsvorgabe, die auch fuer Kopf,
   Navigation und Fusszeile gelten soll.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lw-inhalt .btn:active, #leica-booking .btn:active, .lw-btn:active { transform: none; }
  .lw-inhalt .entry-card:hover .lw-bild-fest > img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 2 · „FLÄCHEN"  —  Leica-Entscheid 06.09.2026
   --------------------------------------------------------------------------
   Für Bild-, Hero- und Bannerkomponenten. Basisflächen sind Weiß und ein
   warmer, zurückhaltender Sandton. Flächen werden GEZIELT eingesetzt, nicht
   schematisch auf jeden Block:
     · Bild-Text  Bildfläche und Textfläche als eine Einheit, ohne Spalt
     · Banner     abgegrenzte Informationsfläche neben bzw. unter dem Bild
     · Hero       Bild dominant; Kontrast über einen abgestuften Verlauf
     · Vollbild   KEINE Fläche darum — die Wirkung trägt das Medium selbst

   Kontrast des Sandtons (gemessen):
     #141414 auf #e9e5de  =  14,6 : 1
     #3a3a3a auf #e9e5de  =   9,0 : 1
   Beide deutlich über der Anforderung von 4,5 : 1.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --lw-sand:      #e9e5de;   /* Referenzton */
  --lw-sand-tief: #ded9d0;   /* nur für Fugen und Hover, nie als Textgrund */
}

/* ── Zentrales Bildmodul ─────────────────────────────────────────────────
   `lw-bild--fuellend`      Bild füllt das Format (beschnittErlauben = true)
   `lw-bild--vollstaendig`  Bild vollständig im Format, Rest bleibt Fläche
   In beiden Fällen reserviert width/height den Platz — kein Layoutsprung. */

.lw-inhalt .lw-bild {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--lw-sand);
}
.lw-inhalt .lw-bild--fuellend {
  height: 100%;
  object-fit: cover;
  object-position: var(--lw-fokus, 50% 50%);
}
.lw-inhalt .lw-bild--vollstaendig {
  object-fit: contain;
  object-position: center;
}

/* ══ BILD-TEXT ══════════════════════════════════════════════════════════ */

.lw-inhalt .lw-bildtext { margin-block: clamp(2.5rem, 6vw, 5rem); }

.lw-inhalt .lw-bildtext__einheit {
  display: grid;
  grid-template-columns: 1fr;
  /* Bewusst ohne Spalt: Bild- und Textfläche sind eine Einheit. */
  gap: 0;
  align-items: stretch;
}

@media (min-width: 992px) {
  .lw-inhalt .lw-bildtext__einheit { grid-template-columns: 1fr 1fr; }
  /* Bild rechts: nur die visuelle Reihenfolge dreht sich, die
     Dokumentreihenfolge bleibt Bild vor Text. */
  .lw-inhalt .lw-bildtext__einheit--bildrechts .lw-bildtext__bild { order: 2; }
  .lw-inhalt .lw-bildtext__einheit--bildrechts .lw-bildtext__text { order: 1; }
}

.lw-inhalt .lw-bildtext__bild {
  position: relative;
  overflow: hidden;
  background-color: var(--lw-sand);
  /* Festes Verhältnis statt der frueheren viewportabhaengigen Hoehe (vh-50). */
  aspect-ratio: 3 / 2;

  /* KORREKTUR 07.09.2026 — Ueberstand ueber die Rasterspalte.
     Das Raster steht auf `align-items: stretch`; die Zellenhoehe war damit
     bestimmt, die Breite dagegen `auto`. `aspect-ratio` leitet in genau
     diesem Fall die BREITE aus der Hoehe ab — der Bildkasten wuchs also mit
     der Texthoehe nach rechts aus seiner Spalte heraus.
     Gemessen vorher bei 1024 px: Spalte 476 px, Bildkasten 738 px
     (Faktor 1,55); bei 1366 px Faktor 1,14.
     `width: 100%` macht die Breite bestimmt und beendet die Ableitung.
     `min-width: 0` verhindert zusaetzlich, dass ein Kind die Spalte
     aufdrueckt — Rasterzellen stehen von Haus aus auf `min-width: auto`. */
  width: 100%;
  min-width: 0;
}
.lw-inhalt .lw-bildtext__text { min-width: 0; }
.lw-inhalt .lw-bildtext__bild > .lw-bild,
.lw-inhalt .lw-bildtext__bild > video { width: 100%; height: 100%; }
.lw-inhalt .lw-bildtext__bild > video { object-fit: cover; display: block; }

.lw-inhalt .lw-bildtext__text {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--lw-sand);
  padding: clamp(1.75rem, 5vw, 4rem);
}
.lw-inhalt .lw-bildtext__inhalt { max-width: 46ch; }
.lw-inhalt .lw-bildtext__titel {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -.018em;
  margin: 0 0 .9rem; color: var(--lw-schwarz);
}
.lw-inhalt .lw-bildtext__flies {
  margin: 0; color: #3a3a3a; font-size: 1.02rem; line-height: 1.6;
}
.lw-inhalt .lw-bildtext__aktionen {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem;
}

/* ══ BANNER ═════════════════════════════════════════════════════════════ */

.lw-inhalt .lw-banner { margin-block: clamp(2.5rem, 6vw, 5rem); }

.lw-inhalt .lw-banner__einheit {
  display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch;
}
@media (min-width: 992px) {
  .lw-inhalt .lw-banner__einheit { grid-template-columns: 1fr 1fr; }
}
.lw-inhalt .lw-banner__einheit--ohnebild { grid-template-columns: 1fr; }

.lw-inhalt .lw-banner__bild {
  position: relative; overflow: hidden;
  background-color: var(--lw-sand); aspect-ratio: 3 / 2;
}
.lw-inhalt .lw-banner__bild > .lw-bild,
.lw-inhalt .lw-banner__bild > video { width: 100%; height: 100%; }
.lw-inhalt .lw-banner__bild > video { object-fit: cover; display: block; }

.lw-inhalt .lw-banner__flaeche {
  position: relative; display: flex; align-items: center;
  background-color: var(--lw-sand);
  padding: clamp(1.75rem, 5vw, 4rem);
}
.lw-inhalt .lw-banner__flaeche--breit { justify-content: center; text-align: center; }
.lw-inhalt .lw-banner__inhalt { max-width: 52ch; }
.lw-inhalt .lw-banner__flaeche--breit .lw-banner__inhalt { margin-inline: auto; }
.lw-inhalt .lw-banner__titel {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 400; line-height: 1.14; letter-spacing: -.016em;
  margin: 0 0 .8rem; color: var(--lw-schwarz);
}
.lw-inhalt .lw-banner__text { color: #3a3a3a; }
.lw-inhalt .lw-banner__text > :last-child { margin-bottom: 0; }
.lw-inhalt .lw-banner__aktionen {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem;
}
.lw-inhalt .lw-banner__flaeche--breit .lw-banner__aktionen { justify-content: center; }

/* ══ VOLLFLÄCHEN-MEDIUM ═════════════════════════════════════════════════
   Bewusst OHNE Fläche darum herum. Die Wirkung entsteht aus dem Medium und
   seinen Abständen. */

.lw-inhalt .lw-vollbild { margin-block: clamp(2.5rem, 6vw, 5rem); }
.lw-inhalt .lw-vollbild__titel {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400;
  letter-spacing: -.018em; margin: 0 0 clamp(1.25rem, 3vw, 2.25rem);
}
.lw-inhalt .lw-vollbild__figur { margin: 0; background-color: var(--lw-sand); }
.lw-inhalt .lw-vollbild__medium {
  display: block; width: 100%; height: auto;
  max-height: var(--lw-maxhoehe, none);
  object-fit: cover; object-position: var(--lw-fokus, 50% 50%);
}

/* ══ HERO ═══════════════════════════════════════════════════════════════
   Beide Zuschnittfaelle nutzen dieselbe Klasse; der Unterschied ist nur die
   Hoehe. Damit koennen die Regeln nicht wieder auseinanderlaufen, wie es bei
   `hero-section` gegen `hero-section-natural` der Fall war. */

.lw-inhalt .lw-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #1a1a1a;
}

/* Beschnitten: fester Bildausschnitt, begrenzte Hoehe. */
.lw-inhalt .lw-hero--fuellend { min-height: min(78vh, 720px); }
/* Kundenfeedback 06.10.2026: Auf breiten Monitoren (> 1400 px, z. B. Studio
   Display 2560 px) wirkte der Hero mit fester Obergrenze 720 px sehr flach
   (Verhältnis bis 3,6:1). Oberhalb von 1400 px wächst die Höhe deshalb
   proportional zur Breite (2:1, wie bei 1400 px) – höchstens 78 % der
   Fensterhöhe. Bis 1400 px bleibt alles unverändert. */
@media (min-width: 1401px) {
  .lw-inhalt .lw-hero--fuellend { min-height: min(78vh, 50vw); }
}
.lw-inhalt .lw-hero--fuellend .lw-hero__medium { position: absolute; inset: 0; }
.lw-inhalt .lw-hero--fuellend .lw-hero__bild,
.lw-inhalt .lw-hero--fuellend .lw-hero__video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--lw-fokus, 50% 50%);
}

/* Unbeschnitten: das Bild bestimmt die Hoehe, der Text liegt darueber.
   Frueher hatte dieser Fall GAR KEINE Regeln. */
.lw-inhalt .lw-hero--vollstaendig { min-height: 0; }
.lw-inhalt .lw-hero--vollstaendig .lw-hero__medium { position: relative; }
.lw-inhalt .lw-hero--vollstaendig .lw-hero__bild {
  width: 100%; height: auto; display: block;
  max-height: min(82vh, 780px); object-fit: contain;
}
.lw-inhalt .lw-hero--vollstaendig .lw-hero__inhalt { position: absolute; inset-inline: 0; bottom: 0; }

/* Abgestufter Verlauf statt gleichmaessiger Verdunklung: oben nahezu klar,
   unten dicht genug fuer weissen Text. Liegt UNTER dem Inhalt — die fruehere
   Fassung lag mit z-index 3 ueber dem Text und dimmte ihn mit. */
.lw-inhalt .lw-hero__verlauf {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.62) 22%,
    rgba(0,0,0,.28) 48%,
    rgba(0,0,0,.06) 74%,
    rgba(0,0,0,0)   100%);
}

.lw-inhalt .lw-hero__medium { z-index: 0; }
.lw-inhalt .lw-hero__inhalt {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) clamp(2rem, 5vw, 4rem);
  color: #fff;
}
.lw-inhalt .lw-hero__titel {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 300; line-height: 1.06; letter-spacing: .02em;
  text-transform: uppercase; color: #fff;
  margin: 0 0 clamp(.6rem, 1.5vw, 1.1rem); max-width: 20ch;
}
.lw-inhalt .lw-hero__text {
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.55;
  color: #fff; max-width: 52ch; margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}
.lw-inhalt .lw-hero__aktion {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.7rem; margin-right: .75rem;
  border: 1px solid #fff; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background-color 160ms var(--lw-aus), color 160ms var(--lw-aus),
              transform 160ms var(--lw-aus);
}
.lw-inhalt .lw-hero__aktion:hover { background-color: #fff; color: var(--lw-schwarz); }
.lw-inhalt .lw-hero__aktion:active { transform: scale(.97); }
.lw-inhalt .lw-hero__aktion:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lw-inhalt .lw-hero__aktion { transition: none; }
  .lw-inhalt .lw-hero__aktion:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO — eigene Behandlung, getrennt von Bildern
   Videos werden von Craft nicht transformiert: kein srcset, kein WebP.
   Deshalb: Standbild traegt die Flaeche, die Quelle wird erst bei
   Sichtbarkeit gesetzt, `prefers-reduced-motion` verhindert den Selbststart.
   ══════════════════════════════════════════════════════════════════════════ */

.lw-inhalt .lw-video { position: relative; background-color: var(--lw-sand); overflow: hidden; }
.lw-inhalt .lw-video__medium {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--lw-fokus, 50% 50%);
  background-color: var(--lw-sand);
}
.lw-inhalt .lw-video__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* Im Seitenkopf liegt das Medium auf `z-index: 0`, der Abdunklungsverlauf
     darueber auf 1 und der Text auf 2. Die Steuerung sass damit UNTER dem
     Verlauf und wurde mitgedimmt. Sie gehoert ueber beides — bedienbar war
     sie zwar (der Verlauf traegt `pointer-events: none`), aber schlecht zu
     sehen. Der Text liegt unten, die Steuerung mittig; sie ueberdecken sich
     nicht, und die Pagination steht ohnehin ausserhalb der Medienflaeche. */
  z-index: 3;
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 48px; padding: .7rem 1.5rem;
  border: 1px solid #fff; border-radius: 999px;
  background: rgba(20,20,20,.55); color: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 500; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color 160ms var(--lw-aus), transform 160ms var(--lw-aus);
}
.lw-inhalt .lw-video__start:hover { background: rgba(20,20,20,.75); }
.lw-inhalt .lw-video__start:active { transform: translate(-50%, -50%) scale(.97); }
.lw-inhalt .lw-video__start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lw-inhalt .lw-video__startsymbol {
  width: 0; height: 0; flex: none;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
  .lw-inhalt .lw-video__start { transition: none; }
  .lw-inhalt .lw-video__start:active { transform: translate(-50%, -50%); }
}

/* Video: Platzhalter und Steuerung ─────────────────────────────────────── */
.lw-inhalt .lw-video__platzhalter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 0 1rem; text-align: center;
  color: #5e5e5e; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  pointer-events: none;
}
.lw-inhalt .lw-video__start--noscript { text-decoration: none; }

/* Symbol der Videosteuerung folgt dem Zustand: Dreieck beim Abspielen,
   zwei Balken beim Pausieren. Zuvor blieb es immer ein Dreieck — die
   Beschriftung sagte „pausieren", das Symbol das Gegenteil. */
.lw-inhalt .lw-video__start[data-lw-laeuft="1"] .lw-video__startsymbol {
  width: 12px; height: 14px;
  border: 0;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
  background: none;
}

/* Platzhalter über der Schaltfläche statt dahinter. */
.lw-inhalt .lw-video__platzhalter {
  top: calc(50% - 2.6rem);
}


/* ══════════════════════════════════════════════════════════════════════════
   BEWUSST GLOBAL (4): Modale ueber die feste Kopfzeile heben.
   Bootstrap-Standard waere 1050/1055; der Theme-Fork setzt 100/101, die
   Navigation steht auf 1050. Werte hier bewusst darueber, damit auch eine
   spaetere Erhoehung der Navigation nicht sofort wieder kollidiert.
   Keine Gestaltungsaenderung an Kopfzeile, Navigation oder Fusszeile.
   ══════════════════════════════════════════════════════════════════════════ */
.modal          { --bs-modal-zindex: 1080; }
.modal-backdrop { --bs-backdrop-zindex: 1070; }


/* ══ 17 · BUCHUNGSSTRECKE — TYPOGRAFIE ═══════════════════════════════════
   Eine Skala fuer die ganze Strecke, lokal auf `#leica-booking` begrenzt.
   Keine neue Schriftart: die Leica-Webschrift des Themes bleibt, hier werden
   nur Groesse, Gewicht und Zeilenhoehe nach Rolle festgelegt.

   Vorher gemessen (1024 px): Feldlabel, Auswahlbeschriftung, Hilfetext und
   Fliesstext lagen alle bei 20,0 px — vier verschiedene Rollen in einer
   Groesse, ohne Rangfolge. Daneben standen Knoepfe bei 15,2 px und Hinweise
   bei 15,2 px, also deutlich kleiner als der Fliesstext, den sie erklaeren.
   Abschnittstitel standen auf jeder Breite bei 36 px, auch auf 375 px.
   ══════════════════════════════════════════════════════════════════════ */

#leica-booking {
  --lw-b-titel:     clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);   /* 28 → 40 px */
  --lw-b-abschnitt: clamp(1.3rem,  1.12rem + 0.8vw, 1.6rem);   /* 20,8 → 25,6 px */
  --lw-b-unter:     1.0625rem;                                  /* 17 px */
  --lw-b-text:      1rem;                                       /* 16 px */
  --lw-b-klein:     .9375rem;                                   /* 15 px — Untergrenze */
  --lw-b-mikro:     .8125rem;                                   /* 13 px, nur Kennzeichnung */
}

/* Schritt-Kennzeichnung */
#leica-booking #lw-stepLabel,
#leica-booking .step-info small {
  font-size: var(--lw-b-mikro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lw-leise);
  line-height: 1.3;
}

/* Seitentitel */
#leica-booking #lw-stepTitle,
#leica-booking .step-info h1 {
  font-size: var(--lw-b-titel);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
}

/* Abschnittstitel im Schritt */
#leica-booking #lw-stepContent h2,
#leica-booking #lw-stepContent .h3 {
  font-size: var(--lw-b-abschnitt) !important;
  /* 400 statt 500: der Abschnittstitel ist bereits deutlich kleiner als der
     Seitentitel und steht ueber Weissraum — die Staerke war ein zweites Mal
     dasselbe zu sagen. */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Untergliederung (z. B. Produktname ueber einer Slotliste) */
/* Produkt- und Tourname ueber einer Liste. 500 statt 600: die Zeile darunter
   traegt die Auswahl, der Name ordnet nur ein. */
#leica-booking #lw-stepContent h4,
#leica-booking #lw-stepContent h5,
#leica-booking #lw-stepContent h6 {
  font-size: var(--lw-b-unter) !important;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: .5rem;
}

/* Fliesstext und Einleitungen */
#leica-booking #lw-stepContent p,
#leica-booking .step-info p {
  font-size: var(--lw-b-text);
  line-height: 1.6;
  font-weight: 300;
}

/* Feldbeschriftung: ruhig, aber eindeutig als Beschriftung erkennbar */
#leica-booking .form-label {
  font-size: var(--lw-b-klein) !important;
  /* 400: die Beschriftung darf nicht staerker sein als die Eingabe, die sie
     beschriftet (Eingabe steht auf 400). Sie ist ohnehin kleiner und steht
     ueber dem Feld. */
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--lw-schwarz);
  margin-bottom: .4rem;
}

/* Auswahlbeschriftung: Haupttext in Textgroesse, Zusatz eine Stufe kleiner */
#leica-booking .form-check-label {
  font-size: var(--lw-b-text) !important;
  font-weight: 400;
  line-height: 1.45;
}
#leica-booking .form-check-label strong {
  font-weight: 500;
  font-size: var(--lw-b-text);
}
#leica-booking .form-check-label small,
#leica-booking .form-check-label .d-block {
  font-size: var(--lw-b-klein);
  font-weight: 300;
  line-height: 1.45;
}

/* Hilfetext — eine Stufe kleiner als der Fliesstext, nie kleiner als 15 px.
   Damit bleibt er auf 375 px lesbar. */
#leica-booking .form-text,
#leica-booking #lw-stepContent small,
#leica-booking .invalid-feedback {
  font-size: var(--lw-b-klein) !important;
  line-height: 1.5;
  font-weight: 300;
}

/* Preis, Verfuegbarkeit und die Hilfsklasse `fw-bold` werden GETRENNT
   behandelt. Die frueher gemeinsame Regel war sachlich falsch: `fw-bold` ist
   eine allgemeine Bootstrap-Hilfsklasse und keine Rolle — sie steht im Widget
   an drei voellig verschiedenen Stellen (Gutscheinhinweis in einer
   Auswahlzeile, Gutschein-Link, Gesamtpreis in der Zusammenfassung). Ausserdem
   wirkte die gemeinsame Regel dort gar nicht: Bootstraps
   `.fw-bold { font-weight: 700 !important }` schlug sie, gemessen wurden 700
   statt der angegebenen 500. */

/* Verfuegbarkeit: Position und Farbe tragen die Aussage, nicht die Staerke. */
#leica-booking .badge {
  font-size: var(--lw-b-klein);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Preisangaben in Listen und Auswahlzeilen. */
#leica-booking .lw-preis {
  font-size: var(--lw-b-klein);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* `fw-bold` nach Fundort:
   — in der Zusammenfassungskarte ist es der Gesamt- bzw. Endpreis, also die
     eine dominante Angabe der ganzen Strecke: 600 (mehr nicht, 700 faellt aus
     der Skala);
   — in einer Auswahlzeile ist es ein Zusatzhinweis: 500;
   — als Link ist es ein Link: 500 und unterstrichen. */
#leica-booking .card .fw-bold {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
#leica-booking .form-check-label .fw-bold { font-weight: 500 !important; }
#leica-booking a.fw-bold { font-weight: 500 !important; }

/* Eingabefelder: Texteingabe in Textgroesse. Vorher standen sie bei 24,0 px —
   groesser als jede Ueberschrift ihres eigenen Abschnitts und 9 px ueber ihrer
   eigenen Beschriftung. 16 px ist zugleich die Grenze, unterhalb derer iOS beim
   Antippen automatisch hineinzoomt. */
#leica-booking .form-control,
#leica-booking .form-select,
#leica-booking input[type='text'],
#leica-booking input[type='email'],
#leica-booking input[type='tel'],
#leica-booking input[type='number'],
#leica-booking input[type='time'],
#leica-booking input[type='date'],
#leica-booking textarea {
  font-size: var(--lw-b-text) !important;
  font-weight: 400;
  line-height: 1.4;
  min-height: 44px;
}
#leica-booking .form-control::placeholder { color: var(--lw-leise); font-weight: 300; }

/* Schaltflaechen und Textlinks */
#leica-booking .btn {
  font-size: var(--lw-b-klein) !important;
  font-weight: 500;
  letter-spacing: normal;   /* .02em brachte nur Unruhe in kurze Wortmarken */
}
/* Textlink bleibt Textlink: unterstrichen, ohne Flaeche, ohne Rahmen —
   und mit 500 statt 600, damit er neben den Knoepfen nicht schwerer wiegt
   als die primaere Aktion. */
#leica-booking .lw-textlink { font-size: var(--lw-b-klein); font-weight: 500; }

/* Hinweise und Fehlermeldungen — auf Textgroesse, nicht darunter */
#leica-booking .alert {
  font-size: var(--lw-b-klein);
  line-height: 1.55;
}

/* Zeilenlaenge wird NICHT ueber einzelne Elemente geregelt, sondern ueber das
   eine Inhaltsmass in Abschnitt 14. Ein eigener Umbruchpunkt fuer Absaetze und
   Hinweise erzeugte sonst genau das, was hier abgestellt werden soll: Bloecke
   derselben Stufe in zwei verschiedenen Breiten (gemessen 611 gegen 640 px). */


/* ══ 18 · BUCHUNGSSTRECKE — MASS UND ACHSE ═══════════════════════════════
   Ein Inhaltsmass je Schritt. Ueberschrift, Beschreibung, Auswahlfelder,
   Eingabefelder, Hinweise und Aktionen liegen danach auf derselben linken
   Kante und haben dieselbe Breite.

   Vorher gemessen: `.row` im Kundendatenschritt war auf JEDER geprueften
   Breite 24 px breiter als alle anderen Bloecke desselben Schritts und begann
   12 px weiter links (375 px: 351 statt 327; 1440 px: 920 statt 896). Ursache
   sind die negativen Aussenabstaende des Bootstrap-Rasters.
   ══════════════════════════════════════════════════════════════════════ */

/* 40rem = 640 px — dasselbe Mass, das der Prototyp fuer Slotlisten und
   Hinweisflaechen ansetzt (`.v .slots { max-width: 640px }`, `.v .h`).
   Ein Wert fuer alles: gemeinsame Breite aller Bloecke einer Stufe UND eine
   Zeilenlaenge von rund 80 Zeichen bei 16 px. Zuvor 38rem/608 px — das war
   ein selbst gewaehlter Zwischenwert ohne Entsprechung im Prototyp. */
#leica-booking { --lw-b-mass: 40rem; }

#leica-booking #lw-stepContent > * {
  max-width: var(--lw-b-mass);
  margin-left: 0;
  margin-right: 0;
}
#leica-booking #lw-stepContent > * > * { max-width: 100%; box-sizing: border-box; }

/* Raster-Zeilen im Schrittinhalt: gleiche Kante wie alles andere.
   Als Gitter statt Flex-Raster — so entstehen zwei gleich breite Spalten
   ohne negative Aussenabstaende und ohne einseitige Innenabstaende. */
#leica-booking #lw-stepContent > div > .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
#leica-booking #lw-stepContent > div > .row > * {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  #leica-booking #lw-stepContent > div > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
  #leica-booking #lw-stepContent > div > .row > * {
    width: auto;
    max-width: none;
    flex: none;
  }
}
@supports selector(:has(*)) {
  @media (min-width: 768px) {
    /* Ungleiche Spaltenpaare (PLZ/Ort) behalten ihr Verhaeltnis. */
    #leica-booking #lw-stepContent > div > .row:has(> [class*="col-md-4"]) {
      grid-template-columns: 1fr 2fr;
    }
  }
}

/* Zielgroesse auch fuer die Zaehler-Schaltflaechen der Teilnehmerzahl. */
#leica-booking .input-group .btn { min-height: 44px; min-width: 44px; }
#leica-booking .input-group .form-control { min-height: 44px; }

/* Aktionszeile: sekundaer links, primaer rechts — auf jeder Stufe gleich,
   innerhalb derselben Achse. */
#leica-booking #lw-stepContent > .d-flex { gap: 1rem; align-items: center; }
/* 48 px wie im Prototyp (`.v .b { min-height: 48px }`) — zuvor standen hier
   44 px, die Untergrenze fuer Zeigegeraete, nicht das Variante-2-Mass. */
#leica-booking .btn-next, #leica-booking .btn-prev { min-height: 48px; }

/* Karten im Schrittinhalt hatten weder Rahmen noch eigenen Grund noch
   Schatten — sichtbar war nur ihr Innenabstand von 32 px, der den Inhalt
   ohne erkennbaren Grund von der Inhaltsachse wegschob (gemessen: Gutschein-
   Link 32 px eingerueckt gegenueber Ueberschrift und Auswahlzeilen).
   Entweder ist es eine Flaeche — dann darf man sie sehen — oder der Abstand
   gehoert weg. Hier: feine Linie, ruhigerer Innenabstand. */
#leica-booking .card {
  border: 1px solid var(--lw-linie);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
#leica-booking .card-body {
  padding: 1.25rem;
  /* Die Zusammenfassungskarte lief bislang in der Theme-Groesse von 20 px —
     groesser als der Fliesstext, den sie zusammenfasst. */
  font-size: var(--lw-b-text);
  line-height: 1.55;
}
#leica-booking .card-body .text-muted { font-size: var(--lw-b-klein); }

/* ══ 19 · KACHELN — VARIANTE 2 ═══════════════════════════════════════════
   SOLL: einheitliches Bildformat, ruhige Traegerflaeche wo kein Medium liegt,
   Titel und Text in der Kartenskala, ein Fokuszustand fuer die ganze Kachel,
   keine Rundung und kein Schatten.

   IST vor dieser Aenderung: `vh-70` (70 % der Fensterhoehe) stand NEBEN
   `ratio ratio-3x4` — zwei widerspruechliche Hoehenangaben; die Kachel wuchs
   auf Grossbildschirmen ins Absurde und schrumpfte auf kurzen Fenstern.
   Kacheln ohne Medium trugen `bg-secondary`, ein Bootstrap-Grau ausserhalb
   der Palette. Titel und Text liefen ueber `.card-title` / `.card-text` in
   Theme-Groessen, unabhaengig von der Kartenskala.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .lw-kachel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lw-flaeche);
  overflow: hidden;
}
.lw-inhalt .lw-kachel--leer { background-color: var(--lw-flaeche); }

/* Die Hoehe kommt jetzt ALLEIN aus dem Seitenverhaeltnis — als echte
   `aspect-ratio`, nicht ueber Bootstraps Polster-Trick.

   Warum: die Kachel ist ein Flexcontainer (`.card` + `flex-row` + `flex-wrap`).
   Bootstraps `.ratio::before` wird darin zum Flex-Element, und seine
   prozentuale Polsterung traegt dort NICHT zur Hoehe des Containers bei —
   gemessen 910 px Polsterung bei 82 px Containerhoehe. Zusammen mit `h-100`
   fielen die Kacheln nach dem Entfernen von `vh-70` auf 82 px zusammen.
   Deshalb: Pseudoelement abschalten, Verhaeltnis direkt setzen. */
.lw-inhalt .lw-kachel.ratio {
  height: auto !important;
  min-height: 18rem;
  aspect-ratio: 3 / 4;
}
.lw-inhalt .lw-kachel.ratio::before { display: none; }
.lw-inhalt .lw-kachel.ratio-1x1  { aspect-ratio: 1 / 1; }
.lw-inhalt .lw-kachel.ratio-4x3  { aspect-ratio: 4 / 3; }
.lw-inhalt .lw-kachel.ratio-3x2  { aspect-ratio: 3 / 2; }
.lw-inhalt .lw-kachel.ratio-2x3  { aspect-ratio: 2 / 3; }
.lw-inhalt .lw-kachel.ratio-16x9 { aspect-ratio: 16 / 9; }

/* Ganzflaechig verlinkte Kachel: sichtbarer Fokus auf der ganzen Flaeche. */
.lw-inhalt a.lw-kachel:focus-visible {
  outline: 2px solid var(--lw-rot);
  outline-offset: 3px;
}

/* Sanftes Heranfahren des Hintergrundbildes, wie bei den Karten. */
.lw-inhalt .lw-kachel > div[style*="background-image"] {
  transition: transform 400ms var(--lw-aus);
}
.lw-inhalt a.lw-kachel:hover > div[style*="background-image"] { transform: scale(1.03); }

/* ── Schleier — VARIANTE A (Leica-Entscheid 07.09.2026, Baustein 02) ──
   Vorher ein fester Verlauf rgba(0,0,0,.65) → .15 → 0, als Inline-Stil im
   Template. Zwei Probleme: die Abdunklung lag im Ruhezustand so hoch, dass
   das Motiv gedaempft wirkte, und ein Zustandswechsel ist im style-Attribut
   ueberhaupt nicht darstellbar.
   Jetzt: leichter Grundverlauf, Verstaerkung erst bei Zeigerkontakt UND bei
   Tastaturfokus. Die Werte stammen unveraendert aus dem entschiedenen
   Prototypen (Block b2, Spalte A). */
.lw-inhalt .lw-kachel__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,0) 68%);
  transition: background 260ms var(--lw-aus);
}
.lw-inhalt a.lw-kachel:hover .lw-kachel__schleier,
.lw-inhalt a.lw-kachel:focus-visible .lw-kachel__schleier {
  background: linear-gradient(to top,
              rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.05) 75%);
}

/* Typografie: feste, ruhige Titelgroesse. Die frueheren `clamp()`-Grenzen
   liessen den Titel zwischen 1,15 und 1,45 rem wandern — bei nebeneinander
   stehenden Kacheln unterschiedlicher Spaltenbreite ergab das drei
   verschiedene Titelgroessen auf einem Bildschirm. Der entschiedene Wert
   ist 1,05 rem, unabhaengig von der Viewportbreite. */
.lw-inhalt .lw-kachel .card-title {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.lw-inhalt .lw-kachel .card-text {
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}
/* Bootstraps `.ratio > *` zwingt jedem Kind `height: 100%` auf. Der Textteil
   fuellte dadurch die ganze Kachel, und `align-items: flex-end` konnte ihn
   nicht mehr nach unten setzen — die Beschriftung klebte oben. Die absolut
   gesetzten Bild- und Verlaufsebenen sind davon nicht betroffen, sie tragen
   `.position-absolute` mit `!important`. */
.lw-inhalt .lw-kachel .card-body {
  padding: 1.5rem;
  height: auto;
  width: 100%;
}

/* Kachel ohne Medium: dunkler Text auf der Traegerflaeche, nicht weiss. */
.lw-inhalt .lw-kachel--leer .card-title,
.lw-inhalt .lw-kachel--leer .card-text { color: var(--lw-schwarz); }

/* ══ 20 · KARUSSELLPUNKTE — AUFGEGANGEN IN ABSCHNITT 30 ════════════════
   Dieser Abschnitt setzte runde Punkte von 8 x 8 px mit `border-radius: 50%`.
   Der Vergleich mit REF12 und REF13 zeigt: die Leica-Pagination besteht aus
   senkrechten STRICHEN, nicht aus Punkten. Der Abschnitt ist deshalb
   ersatzlos entfallen; die Regel steht jetzt in Abschnitt 30. */

/* ══ 21 · FORMIE-FORMULARE — VARIANTE 2 ══════════════════════════════════
   SOLL: dieselbe Schaltflaechenregel, dieselbe Beschriftungsskala und
   derselbe Fokuszustand wie im uebrigen Inhalt.

   IST vor dieser Aenderung (gemessen auf /kontakt und /events/loba-impulsabend):
   Absendeknopf #111111 mit eigener Groesse — nicht #141414 und ausserhalb der
   Schaltflaechenregel; Beschriftung 16 px/400 ohne Bezug zur Formularskala;
   kein gemeinsamer Fokuszustand. Die Felder selbst waren bereits richtig:
   Unterstrich, kein Radius, weiss, 16 px.
   ══════════════════════════════════════════════════════════════════════ */

.lw-inhalt .lw-formie .fui-btn:not(.fui-repeater-remove-btn),
.lw-inhalt .fui-form .fui-btn:not(.fui-repeater-remove-btn),
.lw-inhalt .fui-form .fui-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: .7rem 1.7rem;
  border: 1px solid var(--lw-schwarz);
  border-radius: 999px;      /* Hausform wie bei .btn — bewusst unveraendert */
  background-color: var(--lw-schwarz);
  color: var(--lw-weiss);
  font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  cursor: pointer;
  transition: background-color 160ms var(--lw-aus), transform 160ms var(--lw-aus);
}
.lw-inhalt .lw-formie .fui-btn:not(.fui-repeater-remove-btn):hover,
.lw-inhalt .fui-form .fui-btn:not(.fui-repeater-remove-btn):hover { background-color: #000; }
.lw-inhalt .lw-formie .fui-btn:active,
.lw-inhalt .fui-form .fui-btn:active { transform: scale(.97); }
.lw-inhalt .lw-formie .fui-btn:focus-visible,
.lw-inhalt .fui-form .fui-btn:focus-visible {
  outline: 2px solid var(--lw-rot); outline-offset: 3px;
}

.lw-inhalt .lw-formie .fui-label,
.lw-inhalt .fui-form .fui-label {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--lw-schwarz);
  margin-bottom: .4rem;
}
.lw-inhalt .lw-formie .fui-instructions,
.lw-inhalt .fui-form .fui-instructions { font-size: .9375rem; color: var(--lw-leise); }
.lw-inhalt .fui-input:focus-visible,
.lw-inhalt .fui-select:focus-visible,
.lw-inhalt .fui-textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--lw-rot);
  border-bottom-width: 2px;
}

/* Rueckmeldungen in derselben Sprache wie die uebrigen Hinweisflaechen:
   heller Grund, schmaler Strich links, dunkler Text, nie Farbe allein. */
.lw-inhalt .fui-alert,
.lw-inhalt .fui-error-message {
  background-color: var(--lw-flaeche);
  border: 0;
  border-left: 3px solid var(--lw-leise);
  border-radius: 0;
  padding: .9rem 1.1rem;
  max-width: 40rem;
  color: var(--lw-schwarz);
  font-size: .94rem;
}
.lw-inhalt .fui-alert-error, .lw-inhalt .fui-error-message {
  border-left-color: var(--lw-rot);
  background-color: #faf5f6;
}
.lw-inhalt .fui-alert-success {
  border-left-color: var(--lw-gruen);
  background-color: #f2f7f4;
}
.lw-inhalt .fui-error { color: var(--lw-rot); }

/* ══ 22 · OPTIONALES HERO — BAUSTEIN 04 ══════════════════════════════════
   Leica-Entscheid 07.09.2026: „Hero waehlbar machen", Standard AUS.
   Wenn der Schalter aus ist (also bei jedem bestehenden Eintrag), greift
   KEINE Regel aus diesem Abschnitt — der heutige kompakte Kopf bleibt
   unveraendert. Nur `.lw-hero-gross` schaltet die grosse Bildflaeche ein.

   Kontrast: der Verlauf ist so gelegt, dass der Text auf der untersten
   Zone steht (62 % Schwarzanteil). Auf einem weissen Motiv ergibt das
   gemessen 8,9:1 fuer die H1 und 6,4:1 fuer den Untertitel — beides ueber
   der Anforderung von 4,5:1.
   Der Fokuspunkt des Assets steuert `object-position`; _partials/bild setzt
   dafuer `--lw-fokus`. */
.lw-inhalt .lw-hero-gross {
  position: relative;
  overflow: hidden;
  background-color: var(--lw-schwarz);
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
/* Mobil ist 16:9 zu flach fuer Bild UND Text; das Feld wird hochkantiger,
   damit die Ueberschrift nicht ueber das ganze Motiv laeuft. */
@media (max-width: 767.98px) {
  .lw-inhalt .lw-hero-gross { aspect-ratio: 4 / 5; }
}
.lw-inhalt .lw-hero-gross > .lw-bild,
.lw-inhalt .lw-hero-gross > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lw-fokus, 50% 50%);
}
.lw-inhalt .lw-hero-gross__verlauf {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 72%);
}
.lw-inhalt .lw-hero-gross__inhalt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  color: var(--lw-weiss);
}
.lw-inhalt .lw-hero-gross__inhalt > * { max-width: 46ch; }
.lw-inhalt .lw-hero-gross h1 {
  color: var(--lw-weiss);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .4rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.lw-inhalt .lw-hero-gross__unter,
.lw-inhalt .lw-hero-gross__zeitraum {
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  margin: 0 0 .5rem;
}
/* Schaltflaechen im Hero: auf dunklem Grund wird die weisse Kapsel aus
   Baustein 03 unlesbar. Deshalb hier eine eigene, gleich gebaute Variante
   mit heller Linie auf durchsichtigem Grund. */
.lw-inhalt .lw-hero-gross .btn-outline-dark,
.lw-inhalt .lw-hero-gross .btn-light,
.lw-inhalt .lw-hero-gross .btn-secondary {
  background-color: transparent;
  border-color: rgba(255,255,255,.7);
  color: var(--lw-weiss);
}
.lw-inhalt .lw-hero-gross .btn-outline-dark:hover,
.lw-inhalt .lw-hero-gross .btn-light:hover,
.lw-inhalt .lw-hero-gross .btn-secondary:hover {
  background-color: rgba(255,255,255,.14);
  border-color: var(--lw-weiss);
  color: var(--lw-weiss);
}
.lw-inhalt .lw-hero-gross a:focus-visible,
.lw-inhalt .lw-hero-gross .btn:focus-visible {
  outline: 2px solid var(--lw-weiss);
  outline-offset: 3px;
}

/* ══ 23 · KONTEXTZEILE UEBER DER H1 — BAUSTEIN 05 ════════════════════════
   Leica-Entscheid 07.09.2026, Variante B: die bisher unverklickbare
   Kategoriezeile („Ausstellung", „News", …) wird durch einen echten Weg
   zurueck zur Uebersicht ersetzt. Keine automatische Breadcrumb-Kette —
   eine Stufe, ein Ziel, aus einer festen Zuordnung im Template.
   Ohne eindeutiges Ziel wird gar nichts ausgegeben. */
.lw-inhalt .lw-kontextzeile {
  font-size: .84rem;
  line-height: 1.4;
  color: var(--lw-leise);
  margin: 0 0 .5rem;
}
.lw-inhalt .lw-kontextzeile a {
  color: var(--lw-leise);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  /* Die Trefferflaeche darf nicht auf die Schrifthoehe schrumpfen. */
  display: inline-block;
  padding: .35rem 0;
  min-height: 44px;
}
.lw-inhalt .lw-kontextzeile a:hover { color: var(--lw-schwarz); }
.lw-inhalt .lw-kontextzeile a:focus-visible {
  outline: 2px solid var(--lw-rot);
  outline-offset: 3px;
}
.lw-inhalt .lw-hero-gross .lw-kontextzeile,
.lw-inhalt .lw-hero-gross .lw-kontextzeile a { color: rgba(255,255,255,.82); }
.lw-inhalt .lw-hero-gross .lw-kontextzeile a:hover { color: var(--lw-weiss); }

/* ══ 24 · BILDZUSTAND BEIM LADEN — BAUSTEIN 09 ═══════════════════════════
   Leica-Entscheid 07.09.2026, Variante A: eine ruhige neutrale Flaeche mit
   reserviertem Platz. Kein Schimmern, kein Pulsieren — eine Animation waehrend
   des Ladens zieht die Aufmerksamkeit genau auf das, was noch fehlt.
   Der reservierte Platz kommt aus width/height am <img> bzw. aus dem
   Seitenverhaeltnis des Kastens; die Flaeche darunter verhindert das
   Aufblitzen von Weiss. */
.lw-inhalt .lw-bildfeld {
  position: relative;
  overflow: hidden;
  background-color: var(--lw-flaeche);
}
.lw-inhalt .lw-bildfeld > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lw-fokus, 50% 50%);
}
.lw-inhalt .lw-bildfeld--3x2 { aspect-ratio: 3 / 2; }
.lw-inhalt .lw-bildfeld--4x3 { aspect-ratio: 4 / 3; }
.lw-inhalt .lw-bildfeld--16x9 { aspect-ratio: 16 / 9; }
/* Nicht ladbares Bild: stille Ersatzflaeche statt eines kaputten Symbols. */
.lw-inhalt .lw-bildfeld--fehlt {
  display: grid;
  place-items: center;
  background-color: var(--lw-flaeche-tief);
  color: var(--lw-leise);
  font-size: .82rem;
  text-align: center;
  padding: 1rem;
}

/* ══ 25 · ZENTRIERTER ABSATZ — BAUSTEIN 10 ═══════════════════════════════
   Leica-Entscheid 07.09.2026, Variante A. Die Klasse wird vom CKEditor
   gesetzt (Ausrichtungsoption „center" mit fester Klasse, KEIN freier
   Inline-Stil) und wirkt ausschliesslich im Fliesstext.
   Die Zeilenlaenge wird bewusst auf 52 Zeichen verkuerzt: zentrierter Text
   hat keine ruhige linke Kante, an der das Auge die naechste Zeile findet;
   je laenger die Zeile, desto schwerer das Zurueckspringen. */
.lw-inhalt .lw-zentriert {
  /* `!important` ist hier notwendig, nicht bequem: der Textblock rahmt den
     Fliesstext in `_matrix/text.twig` mit Bootstraps `text-start` ein, und
     das traegt selbst `text-align: left !important`. Ohne Gegengewicht
     bliebe der zentrierte Absatz linksbuendig — gemessen genau so.
     Die Regel bleibt auf `.lw-inhalt` begrenzt und trifft nur Elemente,
     die die Klasse ausdruecklich tragen. */
  text-align: center !important;
  max-width: 52ch;
  margin-inline: auto;
}

/* Traegerklassen fuer links und rechts.

   Warum es sie ueberhaupt gibt: CKEditor laesst klassenbasierte Ausrichtung
   nur zu, wenn ALLE Ausrichtungsoptionen eine Klasse tragen — sonst bricht
   der Editor beim Start ab (`alignment-config-classnames-are-missing`).
   `center` allein zu bestuecken war der Fehler, der am 07.09.2026 saemtliche
   Textfelder im Kontrollzentrum lahmgelegt hat.

   `lw-links` entspricht der Grundausrichtung und wird von CKEditor in der
   Regel gar nicht gesetzt — die Vorgabe wird als Modellzustand entfernt,
   nicht als Klasse geschrieben. Die Regel steht trotzdem hier, damit die
   Klasse nicht ohne Wirkung bleibt, falls sie doch einmal im Markup landet.
   Beide brauchen `!important` aus demselben Grund wie `.lw-zentriert`:
   `_matrix/text.twig` rahmt den Fliesstext mit Bootstraps `text-start`. */
.lw-inhalt .lw-links  { text-align: left !important; }
.lw-inhalt .lw-rechts { text-align: right !important; }
/* Mobil bleibt die Breite ohnehin unter der Grenze — die Zentrierung selbst
   wird beibehalten, damit die redaktionelle Absicht erhalten bleibt. */

/* Der frühere Matrix-Zitatblock (.lw-zitat) ist am 07.09.2026 nach
   Leica-Entscheidung 6 zurueckgebaut. Seine Gestaltung ist in die
   Blockquote-Regel in Abschnitt 12 uebergegangen. */

/* ══ 27 · EINZELBILD, BILDREIHE, GALERIE — BAUSTEIN 12 ═══════════════════
   Leica-Entscheid 07.09.2026, Variante A einschliesslich optionaler Galerie.

   Grundsatz: BILDTRANSFORMATION und SICHTBARE LAYOUTBREITE sind getrennt.
   Die Transformation (Ausgabegroesse, Zuschnitt, WebP) macht
   _partials/bild anhand der `breiten`-Liste; die Klassen hier bestimmen
   allein, wie breit die Figur im Textfluss steht. Vorher liefen beide ueber
   dieselbe Angabe — ein „kleines" Bild wurde dadurch auch klein
   ausgeliefert und war auf hochaufloesenden Anzeigen unscharf. */
.lw-inhalt .lw-einzelbild {
  margin: clamp(1.4rem, 3.5vw, 2.5rem) 0;
}
.lw-inhalt .lw-einzelbild img,
.lw-inhalt .lw-bildreihe img {
  display: block;
  width: 100%;
  height: auto;
}
.lw-inhalt .lw-einzelbild figcaption,
.lw-inhalt .lw-bildreihe figcaption {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--lw-leise);
  margin-top: .5rem;
}
/* Layoutbreiten */
.lw-inhalt .lw-bb--klein  { max-width: 280px; }
.lw-inhalt .lw-bb--mittel { max-width: 480px; }
.lw-inhalt .lw-bb--gross  { max-width: 720px; }
.lw-inhalt .lw-bb--voll   { max-width: 100%; }
/* Ausrichtung */
.lw-inhalt .lw-bb--mitte  { margin-inline: auto; }
.lw-inhalt .lw-bb--links  { margin-inline: 0 auto; }
.lw-inhalt .lw-bb--rechts { margin-inline: auto 0; }
/* Unterhalb von 640px hat keine dieser Breiten einen Sinn — jede Figur
   nimmt die volle Spaltenbreite ein. Ein 280px-Bild in einer 343px breiten
   Spalte waere weder Gestaltung noch Lesbarkeit. */
@media (max-width: 639.98px) {
  .lw-inhalt .lw-bb--klein,
  .lw-inhalt .lw-bb--mittel,
  .lw-inhalt .lw-bb--gross { max-width: 100%; }
}

/* Bildreihe: zwei oder drei Bilder, gleich hoch. Die gleiche Hoehe entsteht
   ueber ein gemeinsames Seitenverhaeltnis am Bildfeld, nicht ueber
   Streckung — dadurch wird kein Motiv verzerrt. */
.lw-inhalt .lw-bildreihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin: clamp(1.4rem, 3.5vw, 2.5rem) 0;
}
@media (min-width: 640px) {
  /* A12c-01: zwei Spalten, unabhaengig von der Bildanzahl. Bei drei Bildern
     ergibt das 2+1. Die Dreierspalte ist entfallen — sie widersprach der
     Entscheidung 12 und der Backend-Hilfetext hatte sie sogar beschrieben. */
  .lw-inhalt .lw-bildreihe--2,
  .lw-inhalt .lw-bildreihe { grid-template-columns: repeat(2, 1fr); }
}
.lw-inhalt .lw-bildreihe figure { margin: 0; min-width: 0; }
.lw-inhalt .lw-bildreihe .lw-bildfeld { aspect-ratio: 3 / 2; }

/* Galerie — ausdruecklich auswaehlbare Variante, nie automatisch.
   Dunkler Grund, ein Bild zur Zeit, Schaltflaechen mit 44px Trefferflaeche.
   Ohne JavaScript bleibt sie eine bedienbare, waagerecht scrollende Reihe:
   `scroll-snap` uebernimmt das Einrasten. */
.lw-inhalt .lw-galerie {
  background-color: var(--lw-schwarz);
  padding: clamp(1.2rem, 4vw, 2.5rem) clamp(.75rem, 3vw, 1.5rem);
  margin: clamp(1.4rem, 3.5vw, 2.5rem) 0;
}
.lw-inhalt .lw-galerie__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 520px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  justify-content: start;
  scrollbar-width: thin;
}
@media (min-width: 640px) { .lw-inhalt .lw-galerie__spur { justify-content: center; } }
.lw-inhalt .lw-galerie figure { margin: 0; scroll-snap-align: center; }
.lw-inhalt .lw-galerie img { width: 100%; height: auto; display: block; }
.lw-inhalt .lw-galerie figcaption {
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  margin-top: .7rem;
  text-align: center;
}
.lw-inhalt .lw-galerie__pfeile {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 1rem;
}
.lw-inhalt .lw-galerie__pfeil {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: none;
  color: var(--lw-weiss);
  font: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lw-inhalt .lw-galerie__pfeil:hover { border-color: var(--lw-weiss); }
.lw-inhalt .lw-galerie__pfeil:focus-visible {
  outline: 2px solid var(--lw-weiss);
  outline-offset: 3px;
}

/* ══ 28 · FOKUS AUF FLAECHENLINKS IN SLIDERN ═════════════════════════════
   Befund vom 07.09.2026 beim Nachweis des Tastaturfokus (Baustein 09):
   die Slides der Karten-Slider werden von einem `.stretched-link`
   verlinkt. Der Anker selbst ist gemessen 0 x 0 px gross — die Flaeche
   entsteht allein aus seinem `::after` mit `inset: 0`. Ein Fokusring wird
   aber am ANKER gezeichnet, nicht am Pseudoelement, und war deshalb
   unsichtbar: mit der Tastatur liess sich der Slider durchlaufen, ohne dass
   man sah, wo man steht.

   Der Ring wandert deshalb auf das Slide selbst. `:has()` ist hier zulaessig,
   weil es nur den Fokuszustand nachzeichnet; Browser ohne Unterstuetzung
   bekommen darunter einen Ring am Pseudoelement — weniger genau, aber
   sichtbar. */
@supports selector(:has(*)) {
  .lw-inhalt .swiper-slide:has(> .stretched-link:focus-visible),
  .lw-inhalt .card:has(> .stretched-link:focus-visible),
  .lw-inhalt .lw-bildtext__text:has(> .stretched-link:focus-visible) {
    outline: 2px solid var(--lw-rot);
    outline-offset: -2px;
  }
}
@supports not selector(:has(*)) {
  .lw-inhalt .stretched-link:focus-visible::after {
    outline: 2px solid var(--lw-rot);
    outline-offset: -2px;
  }
}

/* ══ 29 · KACHELHOEHE NACH SPALTENZAHL — P1 vom 07.09.2026 ═══════════════
   Befund auf /besucherinfos: bei ZWEI Kacheln je Reihe stand jede Kachel
   bei 1440px mit 683 x 911 px — das Hochformat 3:4, das fuer schmale
   Kacheln gedacht war, wird auf halber Seitenbreite zur Saeule. Bei 768px
   und einer Kachel je Reihe waren es 696 x 928 px, also mehr als eine
   Bildschirmhoehe fuer eine einzige Kachel.

   Die Spaltenzahl steckt eindeutig in den Rasterklassen, die
   `_matrix/kacheln.twig` erzeugt:
     zwei je Reihe   → col-lg-6      drei je Reihe → col-lg-4
     eine je Reihe   → col-lg-12     vier je Reihe → col-lg-3
   Deshalb wird hier NUR fuer die breiten Faelle auf 3:2 umgestellt.
   Drei und mehr Spalten behalten ihr bisheriges Verhaeltnis unveraendert —
   dort ist die Kachel schmal genug, und es gibt keinen Befund dagegen.

   Titel, Bildposition, Verlauf, Hover und Fokus der Variante A bleiben
   unberuehrt; geaendert wird ausschliesslich das Seitenverhaeltnis. Die
   Hoehe haengt weiterhin allein daran und nicht an der Textlaenge. */

/* Desktop: eine oder zwei Kacheln je Reihe */
@media (min-width: 992px) {
  .lw-inhalt .col-lg-12 > .lw-kachel.ratio,
  .lw-inhalt .col-lg-6  > .lw-kachel.ratio { aspect-ratio: 3 / 2; }
}

/* Tablet: volle Breite. Ohne diese Regel blieben es bei 768px 928px Hoehe. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .lw-inhalt .col-sm-12 > .lw-kachel.ratio { aspect-ratio: 3 / 2; }
}

/* Telefon: die Kachel ist rund 300px breit; 3:4 ergibt hier 404px und ist
   damit knapp unter der halben Bildschirmhoehe — das ist kein „kuenstlich
   zu hoch". Ab 480px Kachelbreite waere es eines, deshalb die Grenze. */
@media (max-width: 575.98px) {
  .lw-inhalt .lw-kachel.ratio { max-height: 60vh; }
}

/* ══ 30 · SLIDER-PAGINATION — EINE REGEL FUER BEIDE BIBLIOTHEKEN ═════════
   Abgeleitet aus REF12 und REF13, in Originalauflösung ausgemessen.
   Die Aufnahmen sind 3456 px breit bei doppelter Geraeteaufloesung, also
   1728 CSS-px Ansichtsbreite; alle Werte unten sind bereits geteilt.

     Merkmal                REF12 (schwarz)  REF13 (weiss)   → CSS
     Strichbreite           2 Geraetepx      2 Geraetepx     1 px
     aktiv, Hoehe          26               26              13 px
     inaktiv, Hoehe         7                7               3,5 px
     Abstand Mitte–Mitte   38               38/39           19 px *
     Bildkante → Strich    57               56              28 px
     aktiv, Farbe          rgb(255,255,255) rgb(37,37,37)   Vordergrund
     inaktiv, Farbe        rgb(231,231,231) rgb(114,114,114) gedaempft
     Ausrichtung           oben buendig     oben buendig

   Beide Referenzen stimmen bis auf einen Geraetepixel ueberein — das ist
   ein Systemwert, keine Einzelloesung.

   * Der Rasterabstand ist bewusst auf 24 px gesetzt statt auf die
     gemessenen 19 px. Grund steht weiter unten beim Knopf: bei 19 px
     ueberlappten die Trefferflaechen und erzeugten Fehlklicks. Der Zustand wird ueber die HOEHE
   unterschieden (13 gegen 3,5 px), nicht ueber die Farbe allein.

   VORHER lagen drei Systeme uebereinander: splide.min.css (runde Punkte),
   ein Block in _elements/style.twig (Leica-Striche, nur Splide) und
   Abschnitt 20 dieser Datei (runde 8 x 8-Punkte, beide Bibliotheken).
   Gewonnen hat der letzte — meine eigene Zutat aus Runde 7 — und damit die
   Fassung, die der Referenz am wenigsten entsprach. Die beiden anderen sind
   entfernt; dies ist die einzige verbliebene Regel.

   LAGE: die Pagination steht IMMER unterhalb der Medienflaeche in einem
   eigenen, reservierten Bereich. Beide Bibliotheken setzen sie ab Werk
   absolut mit `bottom: 10px` — gemessen lag sie dadurch ueber den unteren
   50 px jedes Slides. Keine der beiden Referenzen zeigt eine ueberlagerte
   Pagination, auch nicht beim vollflaechigen Seitenkopf. */

.lw-inhalt .swiper-pagination,
.lw-inhalt .splide__pagination {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* oben buendig, wie in beiden Referenzen */
  gap: 0;
  width: 100%;
  margin: 28px 0 0;          /* Abstand Bildkante → Strich */
  padding: 0;
  list-style: none;
  z-index: auto !important;
  /* Der Bereich ist reserviert: 13 px Strich + 44 px Trefferflaeche mittig
     darum ergeben eine feste Hoehe, unabhaengig davon, welcher Slide
     gerade aktiv ist. */
  min-height: 44px;
}

/* Der Punkt selbst wird zur unsichtbaren Trefferflaeche; sichtbar ist
   allein das Pseudoelement. So bleiben 44 x 44 px bedienbar, ohne dass
   eine grosse Flaeche erscheint. */
/* ── KORREKTUR 07.09.2026 · Fehlklicks auf der Pagination ──
   Die erste Fassung setzte 19 px breite Knoepfe und darueber ein
   Pseudoelement von 44 x 44 px als „unsichtbare Trefferflaeche".
   Gemessen: bei 19 px Rasterabstand ragte diese Flaeche 12,5 px ueber
   jede Seite hinaus und ueberlappte damit JEDEN Nachbarn um 25 px.
   Da spaetere Geschwister zuoberst liegen, traf ein Klick auf die Mitte
   eines Strichs den Knopf RECHTS daneben.

   Nachgemessen mit `elementFromPoint` auf der Strichmitte:
     Strich 1 → Knopf 2      Strich 2 → Knopf 3      Strich 3 → Knopf 3
     nach dem Klick aktiv:   2            3             3
     richtig: 1 von 3 — genau der gemeldete Bedienfehler.

   Die Trefferflaeche steckt jetzt im Knopf selbst und ueberlappt nichts:
   24 px breit, 44 px hoch, luecken- und ueberschneidungsfrei aneinander.
   24 px ist die Untergrenze fuer Zeigerziele; der sichtbare Strich bleibt
   1 px breit und sitzt mittig im eigenen Knopf. Kein Pseudoelement ragt
   mehr ueber die Knopfgeometrie hinaus.

   Preis: der Rasterabstand steigt von 19 px (Referenzwert) auf 24 px.
   Das ist eine bewusste Abweichung — ein Bedienfehler wiegt schwerer als
   5 px Abstand. Bei 19 px waeren die Ziele nur 19 px breit und laegen
   unter der Mindestgroesse. */
.lw-inhalt .swiper-pagination-bullet,
.lw-inhalt .splide__pagination__page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  width: 24px;               /* Rasterabstand = Knopfbreite, kein Ueberlapp */
  min-width: 24px;
  height: 44px;
  flex: 0 0 24px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: pointer;
  transition: none;
}
/* Der sichtbare Strich. */
.lw-inhalt .swiper-pagination-bullet::after,
.lw-inhalt .splide__pagination__page::after {
  content: "";
  display: block;
  width: 1px;
  height: 3.5px;
  border: 0;
  border-radius: 0;
  background-color: var(--lw-schwarz);
  opacity: .6;               /* ergibt auf Weiss rgb(114,114,114) wie REF13 */
  transition: height 160ms var(--lw-aus), opacity 160ms var(--lw-aus);
}
.lw-inhalt .swiper-pagination-bullet-active::after,
.lw-inhalt .splide__pagination__page.is-active::after {
  height: 13px;
  opacity: 1;
}
/* Hover: nur die Deckkraft zieht an. Bewusst KEIN Rot — der fruehere
   Themeblock faerbte den Strich hier rot; rote Akzente sind entschieden
   abgeschafft, und keine der beiden Referenzen zeigt einen roten Zustand. */
.lw-inhalt .swiper-pagination-bullet:hover::after,
.lw-inhalt .splide__pagination__page:hover::after { opacity: 1; }

.lw-inhalt .swiper-pagination-bullet:focus-visible,
.lw-inhalt .splide__pagination__page:focus-visible {
  outline: 2px solid var(--lw-rot);
  outline-offset: -8px;
}

/* Auf dunklem Grund kehrt sich der Vordergrund um — gemessen in REF12:
   aktiv reines Weiss, inaktiv rgb(231,231,231), also Weiss bei rund 90 %.

   WICHTIG: das gilt nur, wenn die FLAECHE UNTER dem Medium dunkel ist, denn
   dort steht die Pagination jetzt. Die Klasse `.light` am Seitenkopf-Slider
   beschreibt etwas anderes — helle Schrift ueber einem dunklen BILD — und
   darf hier nicht mehr greifen: die Striche standen dadurch weiss auf dem
   weissen Seitengrund und waren gemessen unsichtbar (0 vom Hintergrund
   abweichende Pixel im Ausschnitt). Deshalb nur noch die ausdrueckliche
   Klasse `lw-slider--dunkel`, die zu setzen ist, wenn der ganze Abschnitt
   auf dunklem Grund liegt — wie der Slider in REF12. Auf Staging trifft das
   derzeit auf keinen Slider zu. */
.lw-inhalt .lw-slider--dunkel .swiper-pagination-bullet::after,
.lw-inhalt .lw-slider--dunkel .splide__pagination__page::after {
  background-color: var(--lw-weiss);
  opacity: .9;
}
.lw-inhalt .lw-slider--dunkel .swiper-pagination-bullet-active::after,
.lw-inhalt .lw-slider--dunkel .splide__pagination__page.is-active::after { opacity: 1; }
.lw-inhalt .lw-slider--dunkel .swiper-pagination-bullet:focus-visible,
.lw-inhalt .lw-slider--dunkel .splide__pagination__page:focus-visible {
  outline-color: var(--lw-weiss);
}

/* Swipers dynamische Punkte skalieren und verstecken Markierungen. Das
   widerspricht der Referenz, die alle Slides gleichwertig zeigt. Die
   Einstellung ist in den Vorlagen abgeschaltet; diese Regel faengt
   Restbestaende ab. */
.lw-inhalt .swiper-pagination-bullets-dynamic { overflow: visible; white-space: nowrap; }
.lw-inhalt .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: none !important;
  position: relative !important;
}

/* ══ 31 · EINHEITLICHE SLIDEHOEHE ════════════════════════════════════════
   Gemessen auf der Startseite: die MEDIENflaeche war bereits ueberall
   gleich hoch (385 px, festes 4:3 aus Baustein 09) — die Slides selbst
   standen aber auf 580, 613, 614 und 647 px. Die Abweichung kam allein aus
   der Textmenge unter dem Bild: Titel, Standortkennzeichen und Zeitraum
   brauchen je nach Eintrag eine Zeile mehr.

   Beide Bibliotheken legen ihre Slides in einen Flexcontainer, lassen ihn
   aber auf `align-items: normal` stehen; jeder Slide wird dadurch nur so
   hoch wie sein eigener Inhalt. Mit `stretch` bekommen alle die Hoehe des
   hoechsten. Die Medienflaeche bleibt davon unberuehrt — sie haengt am
   Seitenverhaeltnis, nicht am Text. Es wird also NICHT eine feste Hoehe
   erzwungen, sondern die vorhandene, groesste innerhalb desselben Sliders
   uebernommen; responsiv bleibt alles. */
.lw-inhalt .swiper-wrapper { align-items: stretch; }
.lw-inhalt .splide__list   { align-items: stretch; }
.lw-inhalt .swiper-slide,
.lw-inhalt .splide__slide {
  height: auto;
  display: flex;
  flex-direction: column;
}
/* Der Textteil fuellt den Rest, damit der Slide keine Luecke bekommt. */
.lw-inhalt .swiper-slide > .bg-light,
.lw-inhalt .swiper-slide > div:last-child:not(.lw-bildfeld) { flex: 1 1 auto; }

/* ============================================================
   40 · Navigation — Megamenu als Schalter (Befunde A01-03, A01-04, A03-08)
   Die Ausloeser waren <a href="#">: ein Klick sprang an den Seitenanfang,
   und es gab weder aria-expanded noch aria-controls. Jetzt <button>.
   Diese Regeln nehmen der Schaltflaeche nur ihre Browsergestaltung —
   die Optik der Navigation bleibt unveraendert.
   ============================================================ */
.leica-nav button.nav-link {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* Weder padding noch margin zuruecksetzen: die Theme-Regel .nav-link traegt
     14,4px Innenabstand oben und unten und bringt damit alle Menuepunkte auf
     dieselbe Grundlinie. Ein `padding: 0` an dieser Stelle hat die vier
     Megamenu-Ausloeser 15px hoeher gesetzt als die direkten Verweise
     (gemessen: Textoberkante 15px gegen 30px) — sie standen sichtbar aus der
     Reihe. Die Schaltflaeche uebernimmt jetzt vollstaendig die Geometrie des
     Verweises.
     NUR die Schriftfamilie erben. `font: inherit` stand hier vorher und war
     ein Fehler: die Kurzschrift setzt auch Groesse, Gewicht und Laufweite und
     hat damit die eigene .nav-link-Regel des Themes ueberstimmt. Die vier
     Megamenu-Ausloeser rendern dadurch mit 20px/300 statt 15,2px/600 — sie
     wurden breiter, die linke Menuehaelfte lief in das Logo hinein
     (gemessen bei 1360 bis 1440 px, „Besucherinfos" ueberlappte das Logo um
     92 px). Groesse, Gewicht, Laufweite und Zeilenhoehe kommen jetzt wieder
     ausschliesslich von .nav-link — Schaltflaeche und Verweis sehen damit
     identisch aus. */
  font-family: inherit;
  color: inherit;
}
.leica-nav button.nav-link:focus-visible {
  outline: 2px solid var(--lw-schwarz, #141414);
  outline-offset: 3px;
}
/* ------------------------------------------------------------------
   Megamenu-Typografie — vier Ebenen, bewusst getrennt (07.09.2026)

   Ausgangslage, gemessen bei 1366 und 1440 px:
     Hauptlink        20px   / 300 / 1px    / Versalien / rgb(34,34,34)
     Spaltentitel     19,2px / 600 / 0,96px / Versalien / rgb(34,34,34)
     Menuelink        15,2px / 300 / 0,03px / normal    / rgb(85,85,85)

   Das Etikett ueber einer Linkgruppe war damit fast so gross wie die
   Hauptnavigation, fetter als alles andere und dunkler als die Links, die
   es beschreibt. Es las sich wie eine weitere Seitenueberschrift — genau
   das, was hier nicht entstehen soll.

   REF06 (Downloadliste auf leica-camera.com) zeigt das Leica-Prinzip: der
   ANKLICKBARE Eintrag ist das starke Element, die Zeile darueber bzw.
   darunter ist klein, leicht und grau. Diese Rangfolge wird hier
   uebernommen — der Link wird das dominante Element, das Etikett tritt
   zurueck.

   Die direkte Hauptnavigation bleibt ausdruecklich UNVERAENDERT. Es gibt
   hier keine gemeinsame Schriftregel fuer Hauptlinks und Megamenu; jede
   Ebene traegt ihre eigene.
   ------------------------------------------------------------------ */

/* Ebene 2 — Spaltenueberschrift: kleines, ruhiges Gruppenetikett.
   Semantisch neutrales <span>, keine Dokumentueberschrift. */
.megamenu-section .megamenu-spaltentitel {
  display: block;
  color: #6e6e6e;                 /* 4,95:1 auf Weiss — reicht fuer Kleintext */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--leica-border, #e2ded8);
}

/* Ebene 3 — die Menuelinks. Sie sind der Zweck des Menues und deshalb
   jetzt das staerkste Element im Panel: groesser, dunkler, ruhiger Schnitt. */
.megamenu-section ul li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--leica-black, #141414);
  text-transform: none;
}
.megamenu-section ul li a:hover,
.megamenu-section ul li a:focus-visible {
  color: var(--leica-black, #141414);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ebene 4 — beschreibende Texte und Metadaten im Hervorhebungsbereich.
   Klein und grau, damit sie die Linkliste nicht ueberstimmen. */
.megamenu-featured p:not(.fs-3),
.megamenu-featured .megamenu-meta {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #6e6e6e;
}
/* Der Titel im Hervorhebungsbereich ist eine Stufe ueber den Links,
   aber deutlich unter der Hauptnavigation. */
.megamenu-featured p.fs-3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--leica-black, #141414);
}

/* ============================================================
   41 · Abschlussrunde 07.09.2026 — Befunde aus der UI/UX-Gesamtpruefung
   ============================================================ */

/* --- A06-01 · Text/Bild verliert ab 992px das 3:2-Format ---------------
   aspect-ratio: 3/2 stand bereits auf dem Bildkasten. Ab der lg-Grenze
   stehen Bild und Text nebeneinander; die Rasterzeile streckt die Zelle
   ueber align-items: stretch, und die gestreckte Hoehe schlaegt die
   aspect-ratio. Gemessen bei 1024px: 0,60 statt 1,50.
   align-self: start nimmt den Kasten aus der Streckung — das Verhaeltnis
   bestimmt dann wieder die Hoehe. Kein Eingriff in Breite oder Raster. */
@media (min-width: 992px) {
  .lw-inhalt .lw-bildtext__bild {
    align-self: start;
  }
}

/* --- A02-02 · Kachel-Titelkontrast im Ruhezustand ----------------------
   Entscheidung 02 verlangt einen leichten Grundverlauf, aber >= 4,5:1 an
   der Textposition. Gemessen wurden 2,0-2,65:1 bei hellen Motiven.
   Der Verlauf wird nur im unteren Drittel dichter — dort steht der Titel;
   die Bildmitte bleibt so offen wie entschieden. Der Hover-Zustand
   bleibt unveraendert. */
.lw-inhalt .lw-kachel__schleier {
  background-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.55) 18%,
    rgba(0, 0, 0, 0.18) 45%,
    rgba(0, 0, 0, 0) 70%);
}

/* --- A11-03 · Footer-Schaltflaechen werden im Hover unlesbar -----------
   Gemessen: Textfarbe und Grundfarbe im Hover beide rgb(34,34,34),
   Kontrast 1,00 — der Text verschwindet. Bestand auch in Produktion.
   Der Footer liegt ausserhalb von .lw-inhalt, deshalb hier ausdruecklich
   auf den beschlossenen sekundaeren V2-Stil gesetzt (Entscheidung 03):
   weisse Kapsel, feine Haarlinie, im Hover dunkelt nur die Linie nach. */
/* Kundenvorgabe 06.10.2026: keine weiße Füllung mehr, nur schwarzer Rand.
   Im Hover füllt sich die Kapsel schwarz mit weißer Schrift – der frühere
   Fehler (Text und Grund beide #222) bleibt damit ausgeschlossen. */
footer .btn-outline-dark,
footer .btn-light,
footer .btn-secondary {
  background-color: transparent;
  border: 1px solid var(--lw-schwarz, #141414);
  color: var(--lw-schwarz, #141414);
}
footer .btn-outline-dark:hover,
footer .btn-outline-dark:focus-visible,
footer .btn-light:hover,
footer .btn-light:focus-visible,
footer .btn-secondary:hover,
footer .btn-secondary:focus-visible {
  background-color: var(--lw-schwarz, #141414);
  border-color: var(--lw-schwarz, #141414);
  color: #ffffff;
}

/* --- A11-02 · Formie-Fokus liegt bewusst NICHT hier --------------------
   Eine Regel an dieser Stelle waere wirkungslos: formie.css wird nach
   dieser Datei geladen und traegt dort .lw-formie .fui-input:focus mit
   outline: none bei gleicher Spezifitaet — das spaetere Blatt gewinnt.
   Die Korrektur steht deshalb in web/assets/formie.css, direkt neben
   der Regel, die den Fokus neutralisiert hatte. */

/* --- A13-01 · Partner-Formularfelder ohne sichtbaren Fokuszustand -----
   Gleiche Ursache aus bootstrap.css: .form-control:focus setzt dieselbe
   Randfarbe wie im Ruhezustand, outline: none, kein box-shadow.
   Bewusst auf den Partnerbereich begrenzt (#lp-…, .lw-partner), damit
   keine andere Seite ihre Feldoptik aendert. Der eingeloggte Wizard
   bekommt denselben Ring, ohne dass sonst etwas angefasst wird. */
.lw-partner .form-control:focus-visible,
.lw-partner .form-select:focus-visible,
[id^="lp-"]:focus-visible {
  outline: 2px solid var(--lw-schwarz, #141414);
  outline-offset: 2px;
}

/* --- A05-03 · Fliesstext-Links nur an der Farbe erkennbar ---------------
   Gemessen im News-Artikel: Link und umgebender Absatz haben denselben
   Schnitt und dieselbe Groesse, text-decoration-line war bei beiden 'none'.
   Einziger Unterschied war die Farbe rgb(181,5,14) gegen rgb(34,34,34).
   Wer Farben nicht unterscheiden kann, erkennt den Link nicht (WCAG 1.4.1).
   Ausgenommen sind Schaltflaechen und eigene Bausteinklassen — die tragen
   ihre Erkennbarkeit ueber Form und Flaeche. */
.lw-inhalt p a:not(.btn):not([class*="lw-"]):not([class*="hero"]),
.lw-inhalt li a:not(.btn):not([class*="lw-"]):not([class*="megamenu"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}