/* ==========================================================================
   elsinger electronic – Theme (Contao 5.7)
   Farbwelt der Live-Seite: Türkis als Marke, Orange als Akzent.
   Kein Framework, keine Verläufe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Marke */
  --c-brand:         #009999;   /* Türkis – Kopf, Footer, aktive Navigation */
  --c-brand-dark:    #007a7a;
  --c-brand-light:   #ddf0f0;   /* helles Türkis – News-Archivmenü */

  /* Akzent */
  --c-accent:        #ff7400;   /* Orange – Überschriften */
  --c-accent-dark:   #de601a;

  /* Text */
  --c-text:          #444444;
  --c-text-muted:    #666666;

  /* Flächen */
  --c-page:          #d9d9d9;   /* Seitenhintergrund */
  --c-surface:       #ffffff;   /* Inhaltsfläche */
  --c-surface-2:     #f5f5f5;
  --c-surface-3:     #ebebeb;   /* Navigationsleiste */
  --c-navbtn:        #f0f0f0;   /* Navigations-Button */
  --c-navbar:        #fbfaf9;   /* Navigationsleiste – warmes Fast-Weiß */

  /* Linien */
  --c-border:        #cccccc;

  /* Footer */
  --c-footer-bg:     #009999;
  --c-footer-head:   #ffd24d;   /* gelbe Überschriften */
  --c-footer-text:   #ffffff;
  --c-footer-link:   #00f8c8;

  /* Typografie */
  --font-body: "Open Sans", Verdana, Arial, Helvetica, sans-serif;

  --fs-base:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;
  --fs-h1:    1.75rem;   
  --fs-h2:    1.3125rem;
  --fs-h3:    1.125rem;

  /* Abstände */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Raster */
  --wrap-max: 1200px;
  --col-left:  190px;   /* Altseite 160 px; darunter passt „Fertigungsplätze" neben dem Umschalter nicht in eine Zeile */
  --col-right: 160px;   /* Altseite 150 px */
  --radius:   3px;

  /* Seitliches Innenmaß von #header .inside, #container und #footer .inside.
     Alle Elemente, die daraus ausbrechen, rechnen mit diesem Wert. */
  --pad-x:    var(--sp-4);
}

/* Große Bildschirme (Full HD und mehr): Seite 1400 statt 1200 px breit, die
   Seitenspalten bleiben gleich, der Gewinn geht an die Inhaltsspalte.
   Laptops mit 1536 px (Full HD mit 125 % Skalierung) bleiben bei 1200 px
   (abweichungen.md, Nr. 41). */
@media (min-width: 1600px) {
  :root {
    --wrap-max: 1400px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset und Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text);
  background-color: var(--c-page);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--c-accent);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Contao gibt Sprunglinks mit .invisible aus –
   nur für Screenreader, nicht sichtbar. */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a.invisible:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  overflow: visible;
  clip-path: none;
  background: var(--c-accent);
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.25;
  font-weight: 400;
}

/* Seitenüberschrift – orange */
h1 {
  font-size: var(--fs-h1);
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
}

/* Abschnittsüberschrift – orange mit Unterlinie */
h2 {
  font-size: var(--fs-h2);
  color: var(--c-accent);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-accent);
}

/* Beitragstitel – türkis (News-Titel) */
h3 {
  font-size: var(--fs-h3);
  color: var(--c-brand);
  font-weight: 700;
}

h1 a, h2 a, h3 a, h4 a {
  text-decoration: none;
}

p {
  margin: 0 0 var(--sp-4);
}

/* Trennlinie wie auf der Altseite: türkise Doppellinie. Stammt aus dem
   Contao-3-Element divider, im Neuaufbau ein html-Element mit <hr>.
   content-box, damit die 2 px Höhe zwischen den beiden Rahmen liegen —
   mit dem globalen border-box fiele die Doppellinie zu einer zusammen.
   Werte von der Altseite gemessen (getComputedStyle, 21.09.2026). */
hr {
  box-sizing: content-box;
  height: 2px;
  margin: 7px 0;
  border: 1px inset #099;
  color: #099;
}

/* Contao-3-Rasterklasse grid4 (Seite „Wir über uns"): zwei Elemente
   nebeneinander, jeder Artikel ist eine Zeile. Altseite: 380 px breit,
   float left, 20 px Abstand (gemessen 21.09.2026). Contao 5 hat kein
   Grid-Framework mehr, die Klasse kommt aus dem Inhaltsimport.
   max-width lässt die Elemente auf schmalen Bildschirmen untereinander
   rutschen. */
.grid4 {
  float: left;
  width: 380px;
  max-width: 100%;
  margin-right: 20px;
}

.mod_article:has(.grid4)::after {
  content: "";
  display: table;
  clear: both;
}

/* Fotos in grid4-Elementen ohne Rahmen, wie auf der Altseite (Wir über uns:
   133 × 180 px, gemessen 21.09.2026). Zwei Klassen, damit die Regel die
   spätere Rahmenregel in Abschnitt 8 übersteuert. Bilder im Text-HTML
   (.rte .image_container, etwa im Impressum) behalten ihren Rahmen. */
.content-text.grid4 figure img {
  padding: 0;
  border: 0;
}

/* Contao-3-Rasterklasse grid8 am Artikel (Impressum): schmaler als der
   Inhaltsbereich, zentrierte Inhalte sitzen dadurch wie auf der Altseite.
   Altseite: Artikel 800 px breit (gemessen 21.09.2026). */
.mod_article.grid8 {
  max-width: 800px;
}

/* --------------------------------------------------------------------------
   4. Layout-Gerüst
   Contao: #wrapper > #header, #container (#left, #main, #right), #footer
   Contao gibt leere Layoutbereiche NICHT aus – das Raster passt sich an:
     Home            → 1 Spalte
     Unterseiten     → 2 Spalten (links + Inhalt)
     Produkte        → 3 Spalten (links + Inhalt + rechts)
   -------------------------------------------------------------------------- */

#wrapper {
  max-width: var(--wrap-max);
  margin-inline: auto;
  background-color: var(--c-surface);
}

#container {
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  align-items: start;
}

/* Spalten explizit zuweisen – unabhängig von der DOM-Reihenfolge */
#left  { grid-column: 1; grid-row: 1; }
#main  { grid-column: 2; grid-row: 1; min-width: 0; }
#right { grid-column: 3; grid-row: 1; }

/* Ohne Sidebars: eine Spalte */
#container:not(:has(#left)):not(:has(#right)) {
  grid-template-columns: 1fr;
}
#container:not(:has(#left)):not(:has(#right)) #main {
  grid-column: 1;
}

/* Nur linke Spalte */
#container:has(#left):not(:has(#right)) {
  grid-template-columns: var(--col-left) 1fr;
}

/* Nur rechte Spalte */
#container:not(:has(#left)):has(#right) {
  grid-template-columns: 1fr var(--col-right);
}
#container:not(:has(#left)):has(#right) #main {
  grid-column: 1;
}
#container:not(:has(#left)):has(#right) #right {
  grid-column: 2;
}

#main {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   5. Kopfbereich – türkis
   -------------------------------------------------------------------------- */

#header {
  background-color: var(--c-brand);
  margin-top: var(--sp-2);
}

/* Logo + Suche nebeneinander, mit Innenabstand */
#header .inside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

/* Navigation aus dem Flex-Kopf herauslösen: volle Breite darunter */
#header .nav-main {
  flex-basis: calc(100% + 2 * var(--pad-x));
  order: 99;
  margin: var(--sp-4) calc(-1 * var(--pad-x)) calc(-1 * var(--pad-x));
}

.logo {
  flex: 0 0 auto;
}

.logo img {
  max-height: 80px;
  width: auto;
}

.logo a {
  display: block;
}

/* Suchmodul rechts oben, kompakt statt volle Zeile */
#header .mod_search {
  flex: 0 1 auto;
  margin-left: auto;
}

#header .mod_search .formbody {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

#header .mod_search .widget {
  margin: 0;
}

#header .mod_search input.text {
  width: 200px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

#header .mod_search button,
#header .mod_search input.submit {
  width: auto;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-surface-3);
  color: var(--c-text);
  font-weight: 400;
}

/* Suchvorschläge (files/theme/js/suche.js): Liste unter dem Suchfeld im Kopf
   und im Suchfeld der Seite „Suchen" (Modul „Suche Ergebnisse").
   Ersatz für die Autoergänzung der Altseite, erweitert um Direkttreffer
   zu Produkten und Kategorien. Im Kopf rechtsbündig unter dem Feld, im
   Inhaltsbereich linksbündig (siehe #main .els-suggest unten). */
.els-suggest {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  width: 320px;
  max-width: calc(100vw - 2 * var(--sp-2));
  max-height: 60vh;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-align: left;
}

.els-suggest[hidden] {
  display: none;
}

.els-suggest__group {
  padding: var(--sp-1) var(--sp-2) 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
}

.els-suggest__item {
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
}

.els-suggest__item:hover,
.els-suggest__item.is-active {
  background: var(--c-brand-light);
}

.els-suggest__item--hit {
  color: var(--c-brand-dark);
}

/* Im Inhaltsbereich steht das Suchfeld links: Liste linksbündig */
#main .els-suggest {
  right: auto;
  left: 0;
}

/* Suchergebnisse (Modul „Suche Ergebnisse“ auf Seite Suchen): Optik wie
   Altseite – orange Titel in Versalien, orange fette Treffer ohne
   Hintergrund, Trennlinie #d4cbc5 wie beim Bildrahmen. */
#main .mod_search .search_default {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid #d4cbc5;
}

#main .mod_search .search_default h3 {
  margin: 0 0 var(--sp-1);
  font-size: 1em;
  text-transform: uppercase;
}

#main .mod_search .search_default h3 a {
  color: #e37a25;
  text-decoration: none;
}

#main .mod_search .search_default h3 a:hover,
#main .mod_search .search_default h3 a:focus {
  text-decoration: underline;
}

/* Etikett vor dem Titel: Bereich der Fundstelle (App\Search\Suchbereich),
   in den Treffern (templates/search_default.html.twig) und in den
   Suchvorschlägen (suche.js, auch im Kopf). Katalog und Webshop teilen sich
   eine Suche, das Etikett zeigt, ob man über die Info-Liste anfragt oder im
   Shop bestellt. Türkis und Orange dunkler als die Farben der Seite, damit
   die kleine weiße Schrift lesbar bleibt (Kontrast mindestens 4,5 : 1). */
.mod_search .els-art {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--radius);
  background-color: var(--c-text-muted);
  color: #fff;
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.mod_search .els-art--katalog {
  background-color: var(--c-brand-dark);
}

.mod_search .els-art--shop {
  background-color: #b85a12;
}

#main .mod_search mark.highlight {
  padding: 0;
  background: none;
  color: #ff7400;
  font-weight: 700;
}

#main .mod_search .search_default .url {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  overflow-wrap: anywhere;
}

/* Vorschaubild: Contao 5 übernimmt das Hauptbild der Seite (schema.org),
   bei News das Beitragsbild. Größe 100x100 am Modul „Suche Ergebnisse",
   links neben dem Treffer, Rahmen wie bei Events und Galerie. Die Altseite
   zeigte kein Bild, siehe abweichungen.md. */
#main .mod_search .search_default {
  display: flow-root;
}

#main .mod_search .search_default .image_container {
  float: left;
  margin: 0 var(--sp-4) var(--sp-1) 0;
}

#main .mod_search .search_default .image_container img {
  box-sizing: content-box;
  padding: 2px;
  border: 1px solid #d4cbc5;
}

/* Bildunterschrift des Seitenbilds (z. B. News) neben dem kleinen
   Vorschaubild nicht zeigen */
#main .mod_search .search_default figcaption {
  display: none;
}

/* Nur Logo und RSS sind weiß auf Türkis, Navigation nicht */
#header .logo a,
#header .rss a {
  color: #fff;
}

/* RSS-Kacheln */
.rss {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.rss a {
  display: block;
  text-align: center;
  font-size: var(--fs-xs);
}

/* Symbol (files/theme/img/rss.svg, 24 px) mittig über der Beschriftung */
.rss img {
  margin: 0 auto 2px;
}

/* Beschriftung „Event"/„News" nicht unterstrichen wie auf der Altseite (dort
   Bildunterschrift außerhalb des Links); beim Überfahren unterstrichen */
#header .rss a {
  text-decoration: none;
}

#header .rss a:hover,
#header .rss a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Navigation
   Leiste hellgrau, Buttons hell, aktiver Punkt türkis.
   Contao rendert die aktive Seite als <strong class="active">.
   -------------------------------------------------------------------------- */

.mod_navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Hauptnavigation --- */

.nav-main {
  background-color: var(--c-navbar);
  padding: var(--sp-3) var(--sp-4);
}

.nav-main > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.nav-main > ul > li {
  position: relative;
}

.nav-main > ul > li > a,
.nav-main > ul > li > span,
.nav-main > ul > li > strong {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-navbtn);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-main > ul > li > a:hover,
.nav-main > ul > li > a:focus-visible {
  background-color: #fff;
  color: var(--c-brand);
  text-decoration: none;
}

/* Aktive Seite und Pfad dorthin.
   strong.forward: Eine Weiterleitung, deren Ziel die aktuelle Seite ist (z. B.
   "Aktionen" auf Aktions-Preise), gibt Contao als <strong class="forward"> ohne
   "active" aus — sie gilt trotzdem als aktueller Punkt. */
.nav-main > ul > li > .active,
.nav-main > ul > li > .trail,
.nav-main > ul > li > a.trail,
.nav-main > ul > li > strong.forward {
  background-color: var(--c-brand);
  border-color: var(--c-brand-dark);
  color: #fff;
}

/* Aufklappmenü zweite Ebene */
.nav-main ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 16rem;
  padding: var(--sp-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  display: none;
}

.nav-main li:hover > ul,
.nav-main li:focus-within > ul {
  display: block;
}

.nav-main ul ul a,
.nav-main ul ul span,
.nav-main ul ul strong {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  white-space: normal;
}

.nav-main ul ul a:hover,
.nav-main ul ul a:focus-visible {
  background-color: var(--c-surface-2);
  color: var(--c-accent);
}

.nav-main ul ul .active,
.nav-main ul ul .trail {
  color: var(--c-accent);
  font-weight: 700;
}

/* --- Gruppenleiste Produktast ---

   Ersatz für cat-nav-main der Altseite: die sechs Produktgruppen waagrecht
   unter der Hauptnavigation. Dieselbe Mechanik wie .nav-main — aus dem
   Flex-Kopf herausgelöst und über die volle Breite gezogen —, nur eine Zeile
   tiefer (order 100 statt 99).

   Die Altseite legt den aktiven Punkt als Verlauf von Weiß nach Türkis an.
   Das Theme führt keine Verläufe, deshalb hier dieselbe flache Kachel wie in
   der Hauptnavigation. */

#header .cat-nav-main {
  flex-basis: calc(100% + 2 * var(--pad-x));
  order: 100;
  margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-x));
}

/* Ohne Gruppenleiste schliesst die Hauptnavigation den Kopf ab, mit ihr nicht */
#header .inside:has(.cat-nav-main) .nav-main {
  margin-bottom: 0;
}

.cat-nav-main {
  background-color: var(--c-surface-3);
  padding: var(--sp-2) var(--sp-4);
}

.cat-nav-main > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cat-nav-main > ul > li > a,
.cat-nav-main > ul > li > span,
.cat-nav-main > ul > li > strong {
  display: block;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--c-brand);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cat-nav-main > ul > li > a:hover,
.cat-nav-main > ul > li > a:focus-visible {
  background-color: #fff;
  color: var(--c-accent);
  text-decoration: none;
}

/* Aktuelle Gruppe und Pfad dorthin */
.cat-nav-main > ul > li > .active,
.cat-nav-main > ul > li > .trail,
.cat-nav-main > ul > li > a.trail {
  background-color: var(--c-brand);
  border-color: var(--c-brand-dark);
  color: #fff;
}

/* Mobil: eine Zeile, die man seitlich wischt, statt bis zu fünf Zeilen
   Umbruch (Shop: neun Gruppen). Der Verlauf am rechten Rand zeigt, dass
   es weitergeht; der Innenabstand rechts lässt den letzten Punkt ganz aus
   dem Verlauf herausrollen. mobile-nav.js rollt die aktive Gruppe beim
   Laden in den sichtbaren Bereich. */
@media (max-width: 767px) {
  /* min-width: 0 — .cat-nav-main ist ein Flex-Element im Kopf. Ohne das
     wächst es auf die Breite der ungebrochenen Zeile, zieht die ganze
     Seite in die Breite und scrollt selbst nie. */
  #header .cat-nav-main {
    min-width: 0;
    padding-inline: 0;
  }

  .cat-nav-main > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 var(--sp-6) 0 var(--sp-4);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-6)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-6)), transparent);
  }

  .cat-nav-main > ul::-webkit-scrollbar {
    display: none;
  }

  .cat-nav-main > ul > li {
    flex: 0 0 auto;
  }

  .cat-nav-main > ul > li > a,
  .cat-nav-main > ul > li > span,
  .cat-nav-main > ul > li > strong {
    white-space: nowrap;
  }
}

/* --- Sticky-Navigation beim Hochscrollen --- */

/* Platzhalter, damit der Inhalt nicht springt,
   sobald die Leiste aus dem Fluss genommen wird */
body.nav-sticky #header .nav-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: var(--wrap-max);
  margin: 0 auto;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  transform: translateY(-101%);
  transition: transform 0.25s ease, visibility 0.25s;
  visibility: hidden;
}

body.nav-sticky.nav-visible #header .nav-main {
  transform: translateY(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  body.nav-sticky #header .nav-main {
    transition: none;
  }
}

/* --- Seitennavigation links --- */

.nav-left ul {
  display: block;
  border: 1px solid var(--c-border);
}

/* :not(.nav-sub-icon) hält das Pfeil-Symbol der Umschalter heraus — es ist
   ebenfalls ein span und bekäme sonst Innenabstand, Fläche und Rahmen dieser
   Regel, statt 9 px klein und durchsichtig zu bleiben. */
.nav-left a,
.nav-left span:not(.nav-sub-icon),
.nav-left strong {
  display: block;
  padding: var(--sp-3);
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background-color: var(--c-surface-2);
  color: var(--c-brand);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: break-word;
}

.nav-left li:last-child a,
.nav-left li:last-child span:not(.nav-sub-icon),
.nav-left li:last-child strong {
  border-bottom: none;
}

.nav-left a:hover,
.nav-left a:focus-visible {
  background-color: #fff;
  color: var(--c-accent);
  text-decoration: none;
}

.nav-left .active,
.nav-left .trail,
.nav-left a.trail {
  background-color: var(--c-brand);
  border-color: var(--c-brand-dark);
  color: #fff;
  font-weight: 700;
}

.nav-left ul ul {
  margin-left: var(--sp-3);
}

/* --- Akkordeon in der Seitennavigation links ---

   Ersatz für das mod_mootoolsnav der Altseite. Eingeklappt wird nur, wenn
   left-nav.js gelaufen ist und die Klasse js-nav-left gesetzt hat — ohne
   JavaScript oder bei fehlender Datei bleibt die Navigation offen statt
   unbedienbar.

   Die Klassennamen nav-sub-toggle, nav-sub-icon und sub-open sind dieselben
   wie in der mobilen Hauptnavigation. Deren Regeln liegen dort aber im Block
   @media (max-width: 767px) und gelten hier nicht, deshalb stehen sie erneut.
   Die Selektoren führen .nav-left.js-nav-left doppelt gewichtet, damit sie
   unterhalb von 768px die dortige Regel html.js-nav .nav-sub-toggle
   überstimmen. */

.nav-left.js-nav-left li.submenu {
  display: grid;
  grid-template-columns: 1fr 40px;
}

/* Rechts neben dem Text steht der Umschalter und hält selbst Abstand; ein
   eigener Innenabstand rechts kostet nur Textbreite. */
.nav-left.js-nav-left li.submenu > a,
.nav-left.js-nav-left li.submenu > strong,
.nav-left.js-nav-left li.submenu > span:not(.nav-sub-icon) {
  padding-right: 0;
}

/* Unterliste über die volle Breite, sichtbar nur bei sub-open */
.nav-left.js-nav-left li.submenu > ul {
  display: none;
  grid-column: 1 / -1;
}

.nav-left.js-nav-left li.submenu.sub-open > ul {
  display: block;
}

.nav-left.js-nav-left .nav-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background-color: var(--c-surface-2);
  color: var(--c-brand);
  cursor: pointer;
  /* Die globale button-Regel bringt background-color 0.15s mit. Der Link
     daneben schaltet ohne Übergang; die Kachel zöge sonst sichtbar nach. */
  transition: none;
}

/* Letzter Punkt einer Liste: der Rahmen der Liste schliesst ab */
.nav-left.js-nav-left li:last-child > .nav-sub-toggle {
  border-bottom: none;
}

/* Elternpunkt und Umschalter reagieren als ein Element. Beide sind eigene
   Zellen des Rasters; ein Hover auf nur einer von ihnen färbt entweder den
   Text oder den Pfeil um, was wie ein Fehler aussieht.

   Der :has-Ausschluss verhindert, dass der Elternpunkt mitleuchtet, während
   der Zeiger über seiner geöffneten Unterliste steht — die liegt im selben
   li und löst sonst dessen :hover mit aus. */
.nav-left.js-nav-left li.submenu:hover:not(:has(> ul:hover)) > a,
.nav-left.js-nav-left li.submenu:hover:not(:has(> ul:hover)) > strong,
.nav-left.js-nav-left li.submenu:hover:not(:has(> ul:hover)) > .nav-sub-toggle,
.nav-left.js-nav-left li.submenu:focus-within:not(:has(> ul:focus-within)) > a,
.nav-left.js-nav-left li.submenu:focus-within:not(:has(> ul:focus-within)) > .nav-sub-toggle {
  background-color: #fff;
  color: var(--c-accent);
}

/* Aktuelle Seite und Pfad dorthin: Umschalter färbt mit dem Link mit.
   Die Rahmenfarbe gehört dazu: der Link bekommt über .nav-left .trail
   --c-brand-dark und sein Rahmen verschwindet damit auf der türkisen Kachel.
   Bliebe der Umschalter auf --c-border, stünde rechts ein hellgrauer Strich,
   der neben dem unsichtbaren linken wie ein dickerer Rahmen wirkt. */
.nav-left.js-nav-left li.submenu:has(> .trail) > .nav-sub-toggle,
.nav-left.js-nav-left li.submenu:has(> .active) > .nav-sub-toggle {
  border-color: var(--c-brand-dark);
  background-color: var(--c-brand);
  color: #fff;
}

/* currentColor kommt vom Umschalter, damit der Pfeil auf der türkisen Kachel
   des aktiven Pfads weiss wird und sonst türkis bleibt. */
.nav-left.js-nav-left .nav-sub-icon {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.nav-left.js-nav-left li.sub-open > .nav-sub-toggle .nav-sub-icon {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-left.js-nav-left .nav-sub-icon {
    transition: none;
  }
}

/* --- Mobiler Umschalter --- */

#jump-to-nav {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-surface-2);
  color: var(--c-brand);
  font-weight: 700;
}

/* --- Navigationspfad (Breadcrumb) --- */

.mod_breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-6);
}

.mod_breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.mod_breadcrumb li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--c-text-muted);
}

.mod_breadcrumb .active {
  color: var(--c-accent);
  font-weight: 700;
}

/* Kein Navigationspfad auf der Startseite */
.no-breadcrumb .mod_breadcrumb {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Content-Slider (Startseite, Swiper)
   -------------------------------------------------------------------------- */

.content-swiper {
  --swiper-theme-color: var(--c-brand);
  --swiper-navigation-color: var(--c-brand);
  --swiper-pagination-color: var(--c-brand);
  --swiper-navigation-size: 32px;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-inactive-color: #c4c4c4;
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.content-swiper .swiper-button-prev:hover,
.content-swiper .swiper-button-next:hover {
  color: var(--c-accent);
}

.content-swiper {
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}

/* Slide-Titel: Text bündig mit der Seitenüberschrift, die Unterlinie der
   globalen h2 läuft weiter über die volle Slide-Breite. Die Altseite rückte
   über &nbsp;-Zeichen im Titel ein. */
.content-swiper .swiper-slide h2 {
  padding-left: var(--pad-x);
}

/* Die Slide-Bilder sind 1200 px breit und werden nicht hochskaliert
   (abweichungen.md, Nr. 15). Ist der Slider breiter (Seitenbreite 1400 px,
   Nr. 41), steht das Bild mittig statt links mit Lücke rechts. */
.content-swiper .swiper-slide img {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   8. Inhaltselemente
   -------------------------------------------------------------------------- */

/* Inhaltsmuster: Bild links (gerahmt), Text rechts.
   Nur das Bild des Elements selbst (figure). Bilder im Text-HTML (.rte)
   behalten die Auszeichnung der Altseite und schweben nicht. */
.content-text figure {
  float: left;
  margin: 0 var(--sp-5) var(--sp-4) 0;
}

/* Bildrahmen wie auf der Altseite: 1 px #d4cbc5 plus 2 px Innenabstand,
   nur um Bilder in figure bzw. image_container (gemessen 21.09.2026).
   content-box, damit die Bildbreite aus der Bildgröße erhalten bleibt. */
.content-text figure img,
.content-text .image_container img {
  box-sizing: content-box;
  padding: 2px;
  border: 1px solid #d4cbc5;
}

/* Bilder im Text-HTML (Logo, Siegel) inline wie auf der Altseite, damit
   text-align: center greift. Ein Inline-Style display: block geht vor. */
.content-text .rte img {
  display: inline-block;
}

.content-text::after {
  content: "";
  display: block;
  clear: both;
}

/* Kategorie-Einleitung (Klasse hauptgr, 8 Elemente auf den Kategorieseiten
   des Produktasts). Wie auf der Altseite (gemessen 24.09.2026): Text als
   eigene Spalte neben dem Bild statt um das Bild herum, Bild ohne Rahmen,
   20 px Abstand, h3 in Versalien. Ist das Element für Bild und eine lesbare
   Textspalte zu schmal, steht das Bild über dem Text. */
.content-text.hauptgr {
  container-type: inline-size;
}

.content-text.hauptgr figure {
  margin-right: 20px;
}

.content-text.hauptgr figure img {
  padding: 0;
  border: 0;
}

.content-text.hauptgr .rte {
  display: flow-root;
}

.content-text.hauptgr h3 {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: #005d5d;
  text-transform: uppercase;
}

@container (max-width: 729px) {
  .content-text.hauptgr figure {
    float: none;
    margin-right: 0;
  }
}

/* Shop-Gruppen (Einstiegstexte mit hauptgr, z. B. esd-produkte): Die
   Shop-Layouts haben eine rechte Spalte, das Element ist dort nur rund
   770 px breit. Wie auf der Altseite steht das Bild trotzdem neben dem
   Text, solange die Textspalte lesbar bleibt (ab 480 px Elementbreite). */
@container (min-width: 480px) {
  body.shop .content-text.hauptgr figure {
    float: left;
    margin-right: 20px;
  }
}

/* Shop-Start (Seite webshop-artikel, Element 533, Klasse shop-start). Wie
   auf der Altseite (gemessen 07.10.2026): Warenkorb-Symbol vor der H1 in
   Farbe und Größe der Überschrift (Altseite: Font-Awesome-Symbol, hier ein
   eigenes SVG als Maske), Bild ohne Rahmen mit 20 px Abstand, Liste ohne
   Aufzählungszeichen und Einzug. */
.content-text.shop-start h1::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h3.2l.9 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 6h17l-2.4 8.3a1 1 0 0 1-1 .7H7.7a1 1 0 0 1-1-.8z'/%3E%3Ccircle cx='9' cy='19.5' r='2'/%3E%3Ccircle cx='17.5' cy='19.5' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h3.2l.9 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 6h17l-2.4 8.3a1 1 0 0 1-1 .7H7.7a1 1 0 0 1-1-.8z'/%3E%3Ccircle cx='9' cy='19.5' r='2'/%3E%3Ccircle cx='17.5' cy='19.5' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.content-text.shop-start figure {
  margin-right: 20px;
}

.content-text.shop-start figure img {
  padding: 0;
  border: 0;
}

.content-text.shop-start ul {
  list-style: none;
  padding-left: 0;
}

/* News-Sektion (Startseite) – graue Fläche, bündig aus dem #container-Padding ausgebrochen */
.news-section {
  background-color: var(--c-surface-2);
  margin: 0 calc(-1 * var(--pad-x)) 0;
  padding: var(--sp-5);
}

/* Nur Startseite: unteren Container-Abstand entfernen, damit News bündig an den Footer schließt */
.startseite #container {
  padding-bottom: 0;
}

/* News-Liste dreispaltig (Startseite) – CSS-Klasse "news-grid" am Modul */
.mod_newslist.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

.mod_newslist.news-grid .layout_short {
  padding-right: var(--sp-5);
  border-right: 1px solid var(--c-border);
  border-bottom: none;
  margin-bottom: 0;
}

.mod_newslist.news-grid .layout_short:last-child {
  border-right: none;
  padding-right: 0;
}

/* News-Teaser: Aufmacherbild rechts, gerahmt, mit Bildunterschrift.
   Contao 5.7 kann figure.float_right oder .image_container.float_right
   ausgeben – beide Varianten sind abgedeckt. */
.mod_newslist.news-grid figure.float_right,
.mod_newslist.news-grid .image_container.float_right {
  float: right;
  width: 120px;
  margin: 0 0 var(--sp-3) var(--sp-4);
}

.mod_newslist.news-grid figure img,
.mod_newslist.news-grid .image_container img {
  display: block;
  width: 120px;
  height: auto;
  border: 1px solid var(--c-border);
}

.mod_newslist.news-grid figcaption,
.mod_newslist.news-grid .image_container .caption {
  padding: 2px var(--sp-2);
  background-color: #EEE9E7;
  font-size: var(--fs-xs);
  color: var(--c-text);
}

/* News-Teaser: Titel-Link nur Farbwechsel beim Hover, keine Unterstreichung */
.mod_newslist.news-grid h2 a:hover {
  text-decoration: none;
}

.layout_latest,
.layout_short,
.layout_upcoming {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}

.layout_latest:last-child,
.layout_short:last-child,
.layout_upcoming:last-child {
  border-bottom: none;
}

.info,
.date {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --- News-Übersichtsseite (Nachrichtenarchiv) --- */

/* Beitragstitel türkis – das globale h2 ist orange */
.mod_newsarchive h2,
.mod_newslist h2 {
  color: var(--c-brand);
  font-weight: 700;
}

.mod_newsarchive h2 a,
.mod_newslist h2 a {
  color: inherit;
}

/* Aufmacherbild rechts, gerahmt, mit Bildunterschrift */
.mod_newsarchive figure.float_right,
.mod_newsarchive .image_container.float_right {
  float: right;
  width: 200px;
  margin: 0 0 var(--sp-4) var(--sp-5);
}

.mod_newsarchive figure img,
.mod_newsarchive .image_container img {
  display: block;
  width: 200px;
  height: auto;
  border: 1px solid var(--c-border);
}

.mod_newsarchive figcaption,
.mod_newsarchive .image_container .caption {
  padding: 2px var(--sp-2);
  background-color: #EEE9E7;
  font-size: var(--fs-xs);
  color: var(--c-text);
}

/* Beitrag umschließt das gefloatete Bild */
.layout_latest::after {
  content: "";
  display: block;
  clear: both;
}

/* Bild beginnt unterhalb der Überschriftslinie
   (figure steht im Markup vor dem h2, deshalb Abstand statt clear) */
.mod_newsarchive figure.float_right,
.mod_newsarchive .image_container.float_right {
  margin-top: 3rem;
}

/* Bildunterschrift mit Abstand zum Bildrahmen */
.mod_newsarchive figcaption,
.mod_newsarchive .image_container .caption {
  margin-top: var(--sp-1);
}

/* Detailseite: Bild rechts, Text umfließt es.
   Contao 5 setzt die Klasse media--right aus dem Feld „Bildausrichtung",
   liefert dafür aber kein CSS. */

.mod_newsreader .media--right figure {
  float: right;
  margin: 0 0 var(--sp-4) var(--sp-5);
}

.mod_newsreader .media--left figure {
  float: left;
  margin: 0 var(--sp-5) var(--sp-4) 0;
}

.mod_newsreader .media--right figure img,
.mod_newsreader .media--left figure img {
  max-width: 100%;
  height: auto;
}

.mod_newsreader .media::after {
  content: "";
  display: block;
  clear: both;
}

/* Bild über oder unter dem Text: kein Umfluss, volle Breite */
.mod_newsreader .media--above figure,
.mod_newsreader .media--below figure {
  float: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--sp-4);
}

/* Bilder in Textelementen der Detailseite ohne Rahmen, Bildunterschrift
   im grauen Kasten in Bildbreite (an der Altseite gemessen 13.10.2026).
   Der Bildrahmen aus Abschnitt 8 gilt nur fuer normale Seiten. */
.mod_newsreader .content-text figure img {
  padding: 0;
  border: 0;
}

.mod_newsreader .content-text figcaption {
  padding: 3px;
  background-color: #EEE9E7;
}

.mod_newsreader .layout_full::after {
  content: "";
  display: block;
  clear: both;
}

/* Info-Zeile kursiv, mit Trennlinie und Abstand zur Zwischenüberschrift */
.mod_newsreader .layout_full h1,
.mod_eventreader .layout_full h1 {
  margin-bottom: var(--sp-1);
}

.mod_newsreader .layout_full .info,
.mod_eventreader .layout_full .info {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 5px;
  margin-bottom: var(--sp-6);
  border-bottom: 1px dotted #D4C8C5;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Events (Messen & Seminare), nach Messung der Altseite 23.09.2026
   Liste: event_teaser (Modul 23), Leser: event_full (Modul 24),
   Footer: event_upcoming (Modul 7). h1 und Info-Zeile des Lesers teilen
   sich die Regeln mit dem News-Leser (oben).
   -------------------------------------------------------------------------- */

/* Tagesüberschrift: Datum wie der Wochentag. Die allgemeine .date-Regel
   macht es sonst klein und grau. */
.mod_eventlist .header .date {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Liste: jedes Event mit gepunkteter türkiser Abschlusslinie */
#main .mod_eventlist .layout_teaser {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #009999;
}

#main .mod_eventlist .layout_teaser::after {
  content: "";
  display: block;
  clear: both;
}

/* Abstand zur Tagesüberschrift wie auf der Altseite (dort 17 px) */
#main .mod_eventlist .layout_teaser h2 {
  margin-top: var(--sp-4);
}

/* Titel orange wie die Überschrift, bleibt Link zur Detailseite */
#main .mod_eventlist .layout_teaser h2 a {
  color: inherit;
  text-decoration: none;
}

#main .mod_eventlist .layout_teaser h2 a:hover,
#main .mod_eventlist .layout_teaser h2 a:focus-visible {
  text-decoration: underline;
}

/* Ort und "Weiterlesen" zeigt die Altseite in der Liste nicht */
#main .mod_eventlist .layout_teaser .location,
#main .mod_eventlist .layout_teaser .more {
  display: none;
}

/* Bild links, Text umfließt; Rahmen 1 px #d4cbc5 plus 2 px Innenabstand */
#main .mod_eventlist .layout_teaser .image_container {
  float: left;
  margin: 0 20px 0 0;
}

#main .mod_eventlist .layout_teaser .image_container img {
  box-sizing: content-box;
  padding: 2px;
  border: 1px solid #d4cbc5;
}

/* Leser: die Altseite zeigt kein Bild; Ort nach dem Text mit "Ort:" */
.mod_eventreader .layout_full {
  display: flex;
  flex-direction: column;
}

.mod_eventreader .layout_full .image_container {
  display: none;
}

.mod_eventreader .layout_full .location {
  order: 1;
}

.mod_eventreader .layout_full .location::before {
  content: "Ort: ";
}

/* Footer: Datum und Titel untereinander, jeder Eintrag mit Linie
   (auch der letzte, wie auf der Altseite) */
#footer .mod_eventlist .layout_upcoming,
#footer .mod_eventlist .layout_upcoming:last-child {
  margin: 15px 0 0;
  padding: 0 0 15px;
  border-bottom: 1px solid #60584d;
}

#footer .mod_eventlist .layout_upcoming .date {
  display: block;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

#footer .mod_eventlist .layout_upcoming a {
  display: block;
}

/* --------------------------------------------------------------------------
   Galerie, nach Messung der Altseite (Gallery Creator) 23.09.2026
   Übersicht: Modul „Galerie Übersicht", Template news_galerie
   Album:     Modul „Galerie Album", Template news_galerie_full, darin das
              Contao-Inhaltselement „Galerie"
   -------------------------------------------------------------------------- */

/* Übersicht: Datum über die volle Breite, darunter Bild (206 px inkl.
   Rahmen) und Textspalte (350 px, 30 px Abstand) */
#main .layout_galerie {
  display: grid;
  grid-template-columns: 206px minmax(0, 350px);
  column-gap: 30px;
  align-items: start;
}

#main .layout_galerie .galerie-datum {
  grid-column: 1 / -1;
  margin: 14px 0 2px;
}

#main .layout_galerie .image_container {
  margin: 0;
}

/* Rahmen wie bei Events und Suche: 1 px #d4cbc5 plus 2 px Innenabstand */
#main .layout_galerie .galerie-bild img,
#main .layout_galerie_full .content-gallery img {
  box-sizing: content-box;
  padding: 2px;
  border: 1px solid #d4cbc5;
}

/* Titel orange und normal wie auf der Altseite. Die Regel
   .mod_newslist h2 färbt die Titel der News-Listen türkis und fett.
   Oberkante bündig mit dem Vorschaubild — bewusst anders als auf der
   Altseite (dort 17 px tiefer), siehe abweichungen.md Nr. 31. */
#main .mod_newslist .layout_galerie h2 {
  margin-top: 0;
  color: var(--c-accent);
  font-weight: 400;
}

#main .mod_newslist .layout_galerie h2 a {
  color: inherit;
  text-decoration: none;
}

#main .mod_newslist .layout_galerie h2 a:hover,
#main .mod_newslist .layout_galerie h2 a:focus-visible {
  text-decoration: underline;
}

/* Album: Vorschaubilder im Raster ohne seitlichen Abstand, 5 px zwischen
   den Reihen (Altseite: 206 px Spaltenbreite, 211 px Zeilenabstand).
   auto-fill ergibt bei voller Breite vier Spalten, schmaler weniger. */
#main .layout_galerie_full .content-gallery ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 206px);
  gap: 5px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main .layout_galerie_full .content-gallery figure {
  margin: 0;
}

/* Schmale Bildschirme: Bild über dem Text */
@media (max-width: 767px) {
  #main .layout_galerie {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Seite „RSS Reader" (rss.html), Artikel mit Klasse rss-uebersicht
   Links Modul „RSS Nachrichten" (news_rss), rechts „RSS Events"
   (event_rss). Altseite: zwei Spalten à 380 px, 20 px Abstand.
   -------------------------------------------------------------------------- */
#main .rss-uebersicht {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  column-gap: 20px;
  align-items: start;
}

#main .rss-uebersicht > .content-headline {
  grid-column: 1 / -1;
}

/* Überschriften orange und normal wie auf der Altseite. Die Regel
   .mod_newslist h2 färbt sie sonst türkis und fett. */
#main .rss-uebersicht h2 {
  color: var(--c-accent);
  font-weight: 400;
}

/* Titel der Einträge als Link in der Linkfarbe, Linie der h2 bleibt orange */
#main .rss-uebersicht .layout_rss h2 a {
  color: var(--c-brand);
}

#main .rss-uebersicht .layout_rss h2 a:hover,
#main .rss-uebersicht .layout_rss h2 a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  #main .rss-uebersicht {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* News-Archivmenü (Sidebar) */
.mod_newsmenu ul {
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.mod_newsmenu .year {
  margin-bottom: var(--sp-4);
}

.mod_newsmenu a,
.mod_newsmenu span {
  display: block;
  margin-bottom: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-brand-light);
  color: var(--c-text);
  font-weight: 700;
  text-decoration: none;
}

.mod_newsmenu a:hover {
  background-color: var(--c-brand);
  color: #fff;
  text-decoration: none;
}

/* Aktiver Zeitraum orange (wie im Original) */
.mod_newsmenu .active,
.mod_newsmenu a.active,
.mod_newsmenu span.active {
  background-color: var(--c-accent);
  border-color: var(--c-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* Rechte Spalte – Infobox (Produkte-Seite) */
#right .mod_article,
#right .content-text {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-surface-2);
}

#right h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
}

#right p {
  font-size: var(--fs-sm);
}

/* Tabellen */
table {
  width: 100%;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--c-border);
  border-collapse: collapse;
}

th,
td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

th {
  background-color: var(--c-surface-3);
  font-weight: 700;
}

.even td {
  background-color: var(--c-surface-2);
}

/* Formulare */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--c-text);
}

button,
input[type="submit"],
.submit {
  width: auto;
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--c-brand-dark);
  border-radius: var(--radius);
  background-color: var(--c-brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
.submit:hover {
  background-color: var(--c-brand-dark);
}

/* Blättern */
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span,
.pagination strong {
  display: block;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.pagination .active {
  background-color: var(--c-brand);
  border-color: var(--c-brand-dark);
  color: #fff;
}

/* Zeile „Seite 1 von 2" über den Schaltflächen */
.pagination p {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Download-Links – Dateityp-Symbol wie im Original (Contao 5 gibt kein mime_icon mehr aus) */
.download-element.ext-pdf::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--sp-1);
  vertical-align: -4px;
  background: url("/files/theme/img/iconPDF.gif") no-repeat center / contain;
}

/* Hervorgehobener Einleitungssatz */
.highlight {
  color: #ff0000;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Fußbereich – türkis, gelbe Überschriften
   -------------------------------------------------------------------------- */

#footer {
  background-color: var(--c-footer-bg);
  color: var(--c-footer-text);
}

#footer .inside {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#footer h2,
#footer h3 {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-footer-head);
  color: var(--c-footer-head);
  font-weight: 400;
  font-size: var(--fs-h2);
}

#footer a {
  color: var(--c-footer-link);
  text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .copyright {
  margin-top: var(--sp-4);
  font-family: monospace;
  font-size: var(--fs-xs);
}

#footer p {
  margin-bottom: var(--sp-2);
}

/* Katalog-Tabelle im Footer */
#footer .katalog-tabelle {
  width: auto;
  border: none;
  margin-top: var(--sp-4);
}

#footer .katalog-tabelle td {
  padding: var(--sp-2);
  border: none;
  text-align: center;
  vertical-align: top;
  background: none;
}

#footer .katalog-tabelle img {
  margin-inline: auto;
}

/* Footer dreispaltig */
#footer .footer-inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 979px) {
  :root {
    --col-left:  180px;
    --col-right: 150px;
  }

  #container {
    gap: var(--sp-5);
  }

  .nav-main > ul > li > a,
  .nav-main > ul > li > span,
  .nav-main > ul > li > strong {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
  }
}

@media (max-width: 767px) {
  /* Alle Spalten untereinander.
     Die Selektoren müssen mindestens so spezifisch sein wie die Regeln
     "Nur linke Spalte" und "Nur rechte Spalte" in Abschnitt 4 — die
     haben mit :not(:has(…)) drei ID-Anteile und gewännen sonst auch hier.
     Folge war: Auf Seiten mit linker, aber ohne rechte Spalte (Shop) blieb
     mobil die 180-px-Spalte stehen, und #main lag darin. */
  #container,
  #container:has(#left),
  #container:has(#right),
  #container:has(#left):has(#right),
  #container:has(#left):not(:has(#right)),
  #container:not(:has(#left)):has(#right) {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  #left, #main, #right,
  #container:not(:has(#left)):has(#right) #main,
  #container:not(:has(#left)):has(#right) #right {
    grid-column: 1;
    grid-row: auto;
  }

  #main   { order: 1; }
  #left   { order: 2; }
  #right  { order: 3; }

  .nav-main > ul {
    flex-direction: column;
    gap: 2px;
  }

  .nav-main ul ul {
    position: static;
    display: block;
    padding-left: var(--sp-4);
    border: none;
    box-shadow: none;
  }

  #header .inside {
    justify-content: center;
    text-align: center;
  }

  .mod_newslist.news-grid .layout_short {
    padding-right: 0;
    padding-bottom: var(--sp-5);
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }

  .content-text figure,
  .content-text .image_container {
    float: none;
    margin: 0 0 var(--sp-4);
  }

  /* News-Übersicht: Bild nicht mehr umfließen lassen */
  .mod_newsarchive figure.float_right,
  .mod_newsarchive .image_container.float_right {
    float: none;
    width: auto;
    margin: 0 0 var(--sp-4);
  }

  .mod_newsarchive figure img,
  .mod_newsarchive .image_container img {
    width: 200px;
  }
}

@media (max-width: 479px) {
  :root {
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --pad-x: var(--sp-3);
  }

  #header .inside,
  #container,
  #footer .inside {
    padding-inline: var(--sp-3);
  }

  .form-search input[type="search"],
  .form-search input[type="text"] {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   10a. Mobile Navigation (Burger)
   Markup-Ergänzung durch files/theme/js/mobile-nav.js.
   Ohne JavaScript (kein .js-nav am <html>) bleibt die Navigation
   vollständig ausgeklappt wie bisher — keine Funktion geht verloren.
   -------------------------------------------------------------------------- */

.nav-toggle,
.nav-sub-toggle {
  display: none;
}

@media (max-width: 767px) {

  .nav-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 48px;
    padding: var(--sp-2) 0;
    border: none;
    background: none;
    color: var(--c-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .nav-toggle-icon {
    position: relative;
  }

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle-icon::before { top: -7px; }
  .nav-toggle-icon::after  { top:  7px; }

  /* Navigation eingeklappt, solange JavaScript sie steuert */
  html.js-nav #header .nav-main > ul.level_1 {
    display: none;
  }

  /* Offen im Seitenfluss: ganz aufgeklappt, gescrollt wird die Seite.
     Eine Höhengrenze ergäbe hier zwei Scrollbereiche ineinander. */
  html.js-nav #header .nav-main.nav-open > ul.level_1 {
    display: block;
  }

  /* Offen in der angehefteten Leiste (sticky-nav.js): Höhengrenze mit eigenem
     Scrollbereich, sonst wären die unteren Punkte nicht erreichbar.
     72 px = Menüzeile 48 px plus Innenabstand oben und unten. */
  html.js-nav body.nav-sticky #header .nav-main.nav-open > ul.level_1 {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Unterebenen nur über den Umschalter, nicht über Hover/Tap */
  html.js-nav .nav-main ul ul,
  html.js-nav .nav-main li:hover > ul,
  html.js-nav .nav-main li:focus-within > ul {
    display: none;
  }

  html.js-nav .nav-main li.submenu.sub-open > ul {
    display: block;
  }

  /* Elternpunkt: Link links, Umschalter rechts, Unterliste darunter.
     Beide zusammen ergeben optisch einen durchgehenden Navigations-Button. */
  html.js-nav .nav-main > ul > li.submenu {
    display: grid;
    grid-template-columns: 1fr 48px;
  }

  html.js-nav .nav-main > ul > li.submenu > ul {
    grid-column: 1 / -1;
  }

  html.js-nav .nav-main > ul > li.submenu > a,
  html.js-nav .nav-main > ul > li.submenu > span,
  html.js-nav .nav-main > ul > li.submenu > strong {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html.js-nav .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background-color: var(--c-navbtn);
    color: var(--c-text);
    cursor: pointer;
  }

  /* Aktive Seite und Pfad dorthin: Umschalter färbt mit */
  html.js-nav .nav-main > ul > li.submenu:has(> .active) .nav-sub-toggle,
  html.js-nav .nav-main > ul > li.submenu:has(> .trail) .nav-sub-toggle {
    border-color: var(--c-brand-dark);
    background-color: var(--c-brand);
    color: #fff;
  }

  .nav-sub-icon {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }

  .sub-open .nav-sub-icon {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* #header .inside zentriert auf Mobil – die Navigation bleibt linksbündig */
  .nav-main {
    text-align: left;
  }

  /* Tippflächen auf 44 px – nur echte Menüpunkte, nicht die Icons in den Umschaltern.
     Schrift 16 statt 14 px (am Desktop bleibt --fs-sm). Umbruch erlaubt, damit
     ein langer Punkt neben dem Umschalter nicht über den Rand läuft. */
  .nav-main > ul > li > a,
  .nav-main > ul > li > span,
  .nav-main > ul > li > strong {
    min-height: 44px;
    font-size: var(--fs-base);
    white-space: normal;
  }

  .nav-main ul ul a,
  .nav-main ul ul span,
  .nav-main ul ul strong {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-base);
  }

  /* Sticky bleibt aktiv: eingeklappt ist die Navigation nur die Menüzeile.
     Solange sie geöffnet ist, darf sie nicht wegscrollen. */
  body.nav-sticky #header .nav-main.nav-open {
    transform: translateY(0);
    visibility: visible;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nav-sub-icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   11. Druck
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  #header,
  #footer,
  #left,
  #right,
  .nav-main,
  .mod_breadcrumb,
  .pagination,
  .content-swiper,
  .mod_search {
    display: none;
  }

  #wrapper,
  #container {
    max-width: none;
    min-height: 0;
    display: block;
    padding: 0;
  }
}
/* ===========================================================================
   Produktkatalog
   Portiert aus dem Isotope-Stylesheet der Altseite (18268cc16bad.css).
   Alt: .mod_iso_productlist / .mod_iso_productreader
   Neu: .module-els-productlist / .module-els-productreader

   Diesen Block an das Ende von files/theme/css/theme.css anhängen.
   =========================================================================== */

.module-els-productlist .product,
.module-els-productreader .product {
    position: relative;
    margin-right: 10px;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #009999;
}

/* Produktüberschrift wie auf der Altseite: orange, Grossbuchstaben, normale
   Strichstärke, ohne Unterstreichung. Ohne diese Regel greift die
   h3-Grundregel des Themes, die für News-Titel geschrieben wurde (türkis,
   fett, gemischte Schreibweise), plus die globale a-Regel mit Unterstrich.
   Gemessen an der Altseite: #ff7400 = --c-accent, font-weight 400,
   text-transform uppercase, text-decoration none. */
.module-els-productlist .product h3,
.module-els-productreader .product h3 {
    color: var(--c-accent);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.5rem;
}

.module-els-productlist .product h3 a,
.module-els-productreader .product h3 a {
    color: inherit;
    text-decoration: none;
}

.module-els-productlist .sku,
.module-els-productreader .sku {
    display: flex;
    margin-bottom: 15px;
    background-color: #dedede;
    font-size: 1.3125rem;   /* statt 1.5em — 21px wie auf der Altseite */
    font-style: italic;
    color: #009999;
}

.module-els-productlist .kurztext,
.module-els-productreader .kurztext {
    margin-left: 15px;
}

/* Abstände der Beschreibung, aus dem Isotope-Stylesheet nachgezogen (Befund 6
   der Abnahme). Der erste Portierungsdurchgang hat sie ausgelassen, weil
   .description in der Listenansicht nicht vorkommt — sichtbar sind sie nur in
   der Detailansicht. Der linke Aussenabstand von 25px entspricht dem
   margin-right des umflossenen Produktbilds. */
.module-els-productreader .description {
    margin: 15px 10px 0 25px;
    padding: 20px 0 0;
}

/* Zeilenabstand wie auf der Altseite: dort 14px Schrift mit 19,6px Zeilenhoehe,
   also Faktor 1,4. Das Theme gibt 1,55 vor. Die Schriftgroesse bleibt bei 16px
   (Grundsatzentscheidung), nur der Faktor wird uebernommen — damit ist der
   Produkttext 251 statt 271 Pixel hoch und endet wieder innerhalb des
   umflossenen Bereichs neben dem Produktbild. */
.module-els-productlist .kurztext,
.module-els-productlist .description,
.module-els-productreader .kurztext,
.module-els-productreader .description {
    line-height: 1.4;
}

.module-els-productlist .kurztext ul,
.module-els-productreader .kurztext ul {
    list-style-type: circle;
}

/* Bilder mitten im Produkttext (aus {{file::…}}-Insert-Tags) müssen inline
   bleiben. Das Theme setzt global img { display: block }; ein Blockelement
   beginnt am linken Rand des Elternelements, und der reicht unter den
   umflossenen Produktbild-Bereich hinein — das Zeichen rutschte dann unter
   das grosse Bild statt in die Textspalte. Zeilenboxen werden vom Umfluss
   verkuerzt, Blockboxen nicht. */
.module-els-productlist .kurztext img,
.module-els-productlist .description img,
.module-els-productreader .kurztext img,
.module-els-productreader .description img {
    display: inline;
    box-sizing: content-box;
}

/* Der Link ist auf der Altseite bei 14px Grundschrift 18,19px gross — dort ein
   deutlicher Akzent. Als Faktor 1.3em wuerde er auf der 16px-Basis des
   Neuaufbaus rund 21px erreichen und den Produktblock dominieren. Hier bleibt
   deshalb die absolute Groesse der Altseite stehen, nicht der Faktor:
   Die groessere Grundschrift ist fuer Fliesstext entschieden, nicht fuer
   einen einzelnen Abschlusslink. */
.module-els-productlist .product .details {
    font-size: 1.125rem;
}

.module-els-productlist .details a {
    color: #007c7c;
}

/* In der Liste floatet nicht das Bild, sondern div.product-bildspalte mit
   Bild und Knopf "Auf die Info-Liste": Der Knopf steht so immer direkt unter
   dem Bild, unabhängig von der Textlänge (Abweichung Nr. 42). */
.module-els-productlist .product-bildspalte,
.module-els-productreader .image_container {
    float: left;
    margin-right: 25px;
}

/* Die Bildspalte ist oft höher als der Text daneben; ohne Abschluss liefe der
   Trennstrich durch Bild oder Knopf. clear statt flow-root, damit der obere
   Rand der h3 wie bisher mit dem Abstand zum Vorgänger zusammenfällt. */
.module-els-productlist .product::after {
    content: "";
    display: table;
    clear: both;
}

/* Das Bild kommt über Contaos Bildverarbeitung mit 250 px Breite und
   width/height-Attributen (Controller, produktbild()). Die Breite hier bleibt
   stehen: Contao vergrößert keine Quelle unter 250 px, die Anzeige soll aber
   einheitlich 250 px breit sein. */
.module-els-productlist .image_container img,
.module-els-productreader .image_container img {
    /* content-box ist nötig: theme.css setzt border-box, dann zählten die
       2px Innenabstand und der 1px Rahmen in die 250 hinein und das Bild
       käme mit 244 heraus. Die Altseite gibt die 250 als Attribut am Bild
       an, dort liegen Abstand und Rahmen außen. */
    box-sizing: content-box;
    width: 250px;
    height: auto;
}

#container .module-els-productlist .image_container a img,
#container .module-els-productreader .image_container a img {
    position: relative;
    display: inline-block;
    padding: 2px;
    border: 1px solid #d4cbc5;
}

#container .module-els-productlist .image_container a:hover img,
#container .module-els-productreader .image_container a:hover img {
    border-color: #ff7400;
}

@media (max-width: 767px) {
    .module-els-productlist .product-bildspalte,
    .module-els-productlist .image_container,
    .module-els-productreader .image_container {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 10px !important;
        padding: 0 !important;
    }
}
/* --- Videoblock im Produkttext --------------------------------- */
.module-els-productreader .video-block {
  margin: 20px 0;
  max-width: 100%;
}

.module-els-productreader .video-block video {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 338;
  height: auto;
  object-fit: contain;
  background: #000;
}

/* --- Info-Liste: Merkkorb und Knöpfe ---------------------------- */
/* position: sticky bewegt ein Element nur innerhalb seines Elternknotens.
   #container führt align-items: start, damit die Spalten oben bündig stehen —
   dadurch ist #right genau so hoch wie sein Inhalt und der Spielraum null.
   Nur dort, wo der Merkkorb steht, nimmt die Spalte deshalb die Höhe der
   Grid-Zelle an; #left und #main bleiben unberührt. Die Spalte hat weder
   Hintergrund noch Rahmen, das Strecken ist unsichtbar. */
@media (min-width: 768px) {
    #container:has(.infoliste-mini) > #right {
        align-self: stretch;
    }

    #right:has(.infoliste-mini) > .inside,
    #right .module-els-inquirymini:has(.infoliste-mini) {
        height: 100%;
    }
}

.infoliste-mini {
    position: sticky;
    top: calc(var(--nav-h, 0px) + 12px);
    max-height: calc(100vh - var(--nav-h, 0px) - 24px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #d4cbc5;
}

.infoliste-mini-titel {
    margin: 0 0 8px;
    font-size: 1.125rem;
    color: var(--c-accent);
    text-transform: none;
}

.infoliste-mini-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.infoliste-mini-items li {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Lange Produktnamen ("Netzrückspeisende") umbrechen statt den Kasten
   waagrecht scrollen zu lassen: Als Flex-Element schrumpft der Link sonst
   nicht unter sein längstes Wort. Wie .shop-mini-name im Mini-Warenkorb. */
.infoliste-mini-items a {
    min-width: 0;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Die globale button-Regel des Themes macht aus dem kleinen Symbol sonst
   einen grossen gefüllten Block — dieselbe Falle wie beim Umschalter der
   Seitennavigation. Deshalb alles zurücksetzen, was sie mitbringt. */
.infoliste-mini-remove {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: none;
    color: var(--c-text);
    font-size: 12px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: none;
}

.infoliste-mini-remove:hover,
.infoliste-mini-remove:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.infoliste-mini-leer {
    margin: 0;
    font-size: 0.9375rem;
    color: #777;
}

.infoliste-mini-go {
    margin: 10px 0 0;
}

/* Knopf "Auf die Info-Liste" im Produktblock und "Zur Info-Liste" im Korb */
.infoliste-form {
    margin: 6px 0 0;
}

.infoliste-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--c-brand);
    background: var(--c-brand);
    color: #fff;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.infoliste-btn:hover,
.infoliste-btn:focus-visible {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: #fff;
}

/* Bereits vorgemerkt: gedeckt und nicht mehr klickbar. */
.infoliste-btn.is-on,
.infoliste-btn:disabled {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: #777;
    cursor: default;
}

@media (max-width: 767px) {
    .infoliste-mini {
        position: static;
        max-height: none;
    }
}
/* --- Info-Liste: Seite /merkliste.html -------------------------- */
/* Positionen oben, darunter das Anfrageformular. Abschnittstitel wie auf
   der Altseite: orange mit Linie, ohne Rahmen um die Gruppe. */

.infoliste-positionen {
    margin: 0 0 var(--sp-6);
    padding: 0;
    list-style: none;
    border-top: 1px solid #d4cbc5;
}

.infoliste-positionen li {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid #d4cbc5;
}

/* Vorschaubild statt Originalgrösse; contain, weil die Produktbilder
   nicht alle quadratisch sind. */
.infoliste-positionen img {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    padding: 2px;
    border: 1px solid #d4cbc5;
    background: #fff;
    object-fit: contain;
}

.infoliste-positionen-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Wie die Produktüberschrift im Katalog: orange, Grossbuchstaben */
.infoliste-positionen-name a {
    color: var(--c-accent);
    font-size: 1.125rem;
    text-transform: uppercase;
    text-decoration: none;
}

.infoliste-positionen-name a:hover,
.infoliste-positionen-name a:focus-visible {
    text-decoration: underline;
}

/* Entfernen: dasselbe Symbol wie im Merkkorb, hier grösser */
.infoliste-positionen .infoliste-remove {
    flex: 0 0 auto;
    margin: 0;
}

.infoliste-positionen .infoliste-mini-remove {
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 20px;
}

/* Meldungen */
.infoliste-fehler {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid #c20000;
    border-left-width: 4px;
    background: #fdf0f0;
    color: #c20000;
}

.infoliste-danke {
    padding: var(--sp-5);
    border: 1px solid var(--c-brand);
    border-radius: var(--radius);
    background: var(--c-brand-light);
}

.infoliste-danke h2 {
    color: var(--c-brand);
    border-bottom-color: var(--c-brand);
}

.infoliste-danke p:last-child {
    margin-bottom: 0;
}

.infoliste-leer {
    padding: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface-2);
}

/* Formular: auf Lesebreite begrenzt, sonst werden die Felder im
   einspaltigen Layout über 1000 px breit. */
.infoliste-anfrage {
    max-width: 760px;
}

.infoliste-anfrage fieldset {
    min-width: 0;
    margin: 0 0 var(--sp-6);
    padding: 0;
    border: 0;
}

.infoliste-anfrage legend {
    width: 100%;
    margin-bottom: var(--sp-4);
    padding: 0 0 5px;
    border-bottom: 1px solid var(--c-accent);
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--c-accent);
}

.infoliste-anfrage .widget {
    margin: 0 0 var(--sp-4);
}

.infoliste-anfrage label {
    display: block;
    margin-bottom: var(--sp-1);
}

.infoliste-anfrage .mandatory {
    color: #c20000;
    font-weight: 700;
}

.infoliste-anfrage textarea {
    min-height: 8rem;
    resize: vertical;
}

/* Adresse: Vorname/Nachname und PLZ/Ort nebeneinander. Sechs Spalten,
   damit die Postleitzahl schmaler ausfällt als der Ort. Die legend ist
   kein Rasterelement und bleibt über der ganzen Breite. */
.infoliste-adresse {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--sp-4);
}

.infoliste-adresse > .widget {
    grid-column: 1 / -1;
}

.infoliste-adresse > .widget-firstname,
.infoliste-adresse > .widget-lastname {
    grid-column: span 3;
}

.infoliste-adresse > .widget-postal {
    grid-column: span 2;
}

.infoliste-adresse > .widget-city {
    grid-column: span 4;
}

/* Land: nur Anzeige */
.infoliste-anfrage .widget-fix input {
    background: var(--c-surface-3);
    color: var(--c-text-muted);
    cursor: default;
}

/* Auswahl: Kästchen links, Text bündig daneben. Zwei Klassen, damit die
   Regel .infoliste-anfrage label (display: block) nicht gewinnt. */
.infoliste-anfrage .infoliste-radio,
.infoliste-anfrage .infoliste-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    cursor: pointer;
}

.infoliste-anfrage .infoliste-radio input,
.infoliste-anfrage .infoliste-check input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2em 0 0;
    accent-color: var(--c-brand);
}

/* Wünsche nebeneinander, Zustellweg bleibt untereinander */
.infoliste-wuensche {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-5);
}

.infoliste-consent {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.infoliste-anfrage .infoliste-consent .infoliste-check {
    margin: 0;
}

/* Absenden in der normalen Knopfgrösse des Themes, nicht in der
   kleinen des Katalogknopfs */
.infoliste-absenden .infoliste-btn {
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-base);
}

/* Fehler */
.infoliste-anfrage .error {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: #c20000;
}

.infoliste-anfrage .has-error input:not([type="radio"]):not([type="checkbox"]),
.infoliste-anfrage .has-error textarea {
    border-color: #c20000;
}

.infoliste-anfrage .infoliste-consent.has-error {
    border-color: #c20000;
}

/* Browserprüfung: Nach einem Absendeversuch sind ALLE ungültigen
   Pflichtfelder :user-invalid, nicht nur das erste mit der Sprechblase.
   Vorher bleiben leere Felder unauffällig. */
.infoliste-anfrage input:user-invalid,
.infoliste-anfrage textarea:user-invalid {
    border-color: #c20000;
}

.infoliste-anfrage .infoliste-consent:has(input:user-invalid) {
    border-color: #c20000;
}

@media (max-width: 767px) {
    .infoliste-adresse {
        display: block;
    }

    .infoliste-positionen li {
        gap: var(--sp-3);
    }

    .infoliste-positionen img {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .infoliste-positionen-name a {
        font-size: 1rem;
    }
}

/* ===========================================================================
   Sitemap
   Seite sitemap-372, Modul „Sitemap" mit der Klasse sitemap-spalten
   (abweichungen.md Nr. 43). Baum wie auf der Altseite: Einrückung je Ebene
   mit gepunkteter Hilfslinie, kleine Schrift. Ab 768 px zwei Spalten: links
   Home und Produkte, rechts die übrigen Punkte mit dem Webshop.

   float statt Raster: Ein Rasterelement über viele Zeilen verteilt seine
   Höhe auf diese Zeilen und risse Lücken zwischen die Punkte rechts.
   „Home" ist der erste Punkt, „Produkte" wird am Link erkannt.
   =========================================================================== */

.sitemap-spalten ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.sitemap-spalten ul ul {
    margin: var(--sp-1) 0 var(--sp-2) var(--sp-1);
    padding-left: var(--sp-4);
    border-left: 1px dotted var(--c-border);
}

.sitemap-spalten li {
    margin: 2px 0;
}

.sitemap-spalten > ul > li {
    margin-bottom: var(--sp-3);
}

@media (min-width: 768px) {
    /* Liste eingerückt; Überschrift und Breadcrumb bleiben an der
       Seitenkante (Entscheidung Martin 09.10.2026) */
    .sitemap-spalten {
        padding-left: 2.5rem;
    }

    .sitemap-spalten > ul {
        display: flow-root;
    }

    .sitemap-spalten > ul > li:first-child,
    .sitemap-spalten > ul > li:has(> a[href$="produkte.html"]) {
        float: left;
        clear: left;
        width: calc(50% - var(--sp-4));
    }

    .sitemap-spalten > ul > li:not(:first-child, :has(> a[href$="produkte.html"])) {
        margin-left: 50%;
    }
}