/*!
 * Template „sommer“ für sommer.at (Cassiopeia-Child, Joomla 6.2)
 * Farben, Schriften und Abstände von der bisherigen Seite (zo2_smilax) abgeleitet.
 * Baut auf Cassiopeia (Bootstrap 5 aus Joomla) auf; keine externen Ressourcen.
 */

/* ===== Schrift Roboto, lokal (aus Joomla, auf Latein reduziert; Apache-Lizenz 2.0) ===== */
/* Ersatzschrift mit Roboto-Maßen: Wechsel auf Roboto verschiebt nichts (Werte wie in next/font für Arial) */
@font-face {
  font-family: "Roboto Ersatz";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 92.49%;
  descent-override: 24.34%;
  line-gap-override: 0%;
  size-adjust: 100.3%;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto-light.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-bold.woff2") format("woff2");
}

/* ===== Farben und Maße ===== */
:root {
  --s-petrol: #006376;
  --s-petrol-dunkel: #004b5a;
  --s-petrol-tief: #002b33;
  --s-hellblau: #7cbcc9;
  --s-text: #4e4d4d;
  --s-ueberschrift: #272727;
  --s-grau: #6b6b6b;
  --s-linie: #e8e8e8;
  --s-flaeche: #f0f2f3;
  --s-weiss: #fff;
  --s-hintergrund: #f8f8f8;
  --s-breite: 1170px;
  --s-abstand: 30px;
  --s-rand: 15px;
  --s-schatten: 0 2px 10px rgba(0, 0, 0, .3);
  --s-schrift: "Roboto", "Roboto Ersatz", Arial, sans-serif;

  /* Cassiopeia und Bootstrap auf Sommer umstellen */
  --cassiopeia-color-primary: var(--s-petrol);
  --cassiopeia-color-link: var(--s-petrol);
  --cassiopeia-color-hover: var(--s-petrol-dunkel);
  --cassiopeia-font-family-body: var(--s-schrift);
  --cassiopeia-font-family-headings: var(--s-schrift);
  --cassiopeia-font-weight-headings: 400;
  --cassiopeia-font-weight-normal: 400;
  --primary: var(--s-petrol);
  --primary-rgb: 0, 99, 118;
  --link-color: var(--s-petrol);
  --link-color-rgb: 0, 99, 118;
  --link-hover-color: var(--s-petrol-dunkel);
  --link-hover-color-rgb: 0, 75, 90;
  --body-font-family: var(--s-schrift);
  --body-font-size: 15px;
  --body-line-height: 1.4;
  --body-color: var(--s-text);
  --body-bg: var(--s-hintergrund);
  --heading-color: var(--s-ueberschrift);
  --border-radius: 0;
  --focus-ring-color: rgba(0, 99, 118, .35);
}

/* ===== Grundlagen ===== */
html {
  -webkit-text-size-adjust: 100%;
}

body.sommer {
  min-height: 100vh;
  margin: 0;
  font-family: var(--s-schrift);
  font-size: 15px;
  line-height: 1.4;
  color: var(--s-text);
  background: var(--s-hintergrund) url("../images/muster.png") repeat;
}

:where(.sommer) a {
  color: var(--s-petrol);
  text-decoration: none;
}

:where(.sommer) a:hover {
  color: var(--s-petrol-dunkel);
  text-decoration: underline;
}

/* Links in Überschriften, Menüs, Listen und Kästen wie bisher ohne Unterstrich (Cassiopeia unterstreicht alle Links ohne Klasse) */
.sommer :is(h1, h2, h3, h4, h5, h6) a:not([class]),
.sommer-topbar a,
.sommer-mega a:not(.link),
.sommer-fuss li a:not([class]),
.sommer-leiste .mod-list a,
.sommer-kachel__titel a,
.sommer-news__titel a,
.sommer-liste__titel a,
.sommer-sprungmarken a,
.wetter-over-image a,
.support_block a,
.sommer-downloads__liste a {
  text-decoration: none;
}

.sommer :is(h1, h2, h3, h4, h5, h6) a:not([class]):hover,
.sommer-topbar a:hover,
.sommer-fuss li a:not([class]):hover,
.sommer-leiste .mod-list a:hover,
.sommer-kachel__titel a:hover,
.sommer-news__titel a:hover,
.sommer-liste__titel a:hover,
.sommer-sprungmarken a:hover,
.sommer-downloads__liste a:hover {
  text-decoration: underline;
}

/* Links im Fließtext unterstreichen (Farbe allein unterscheidet zu wenig vom Text) */
:where(.sommer-komponente, .sommer-modul__inhalt, .sommer-kategorie-text, .sommer-einwilligung) :is(p, td, dd) a:not([class]) {
  text-decoration: underline;
}

.sommer :focus-visible {
  outline: 3px solid var(--s-petrol);
  outline-offset: 2px;
}

:where(.sommer) h1,
:where(.sommer) h2,
:where(.sommer) h3,
:where(.sommer) h4,
:where(.sommer) h5,
:where(.sommer) h6 {
  font-family: var(--s-schrift);
  font-weight: 400;
  color: var(--s-ueberschrift);
  line-height: 1.2;
}

:where(.sommer) h1 { font-size: 1.6rem; }
:where(.sommer) h2 { font-size: 1.45rem; }
:where(.sommer) h3 { font-size: 1.18rem; }
:where(.sommer) h4 { font-size: 1.05rem; }

:where(.sommer) img {
  max-width: 100%;
  height: auto;
}

.sommer-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  vertical-align: -.15em;
  flex: none;
}

/* Sprunglink */
.sommer-sprung {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  padding: .6rem 1rem;
  color: var(--s-weiss) !important;
  background: var(--s-petrol-tief);
}

.sommer-sprung:focus {
  top: 1rem;
}

/* Knöpfe */
.sommer-btn,
.sommer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .45rem 1.25rem;
  font-family: var(--s-schrift);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--s-weiss);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--s-petrol);
  border: 1px solid var(--s-petrol);
  border-radius: 0;
}

.sommer-btn:hover,
.sommer-btn:focus-visible,
.sommer .btn-primary:hover,
.sommer .btn-primary:focus-visible {
  color: var(--s-weiss);
  text-decoration: none;
  background: var(--s-petrol-dunkel);
  border-color: var(--s-petrol-dunkel);
}

.sommer-btn--hell {
  color: var(--s-petrol);
  background: var(--s-flaeche);
  border-color: var(--s-flaeche);
}

.sommer-btn--hell:hover,
.sommer-btn--hell:focus-visible {
  color: var(--s-weiss);
}

/* Phoca Download: „Download“ (btn-success) wie Hauptknopf, „Details“ (btn-info) hell; sonst Bootstrap-Grün/-Türkis */
.sommer .pd-button-box-bt .btn-success,
.sommer .pd-button-box-bt .btn-info {
  border-radius: 0;
  font-size: 15px;
}

.sommer .pd-button-box-bt .btn-success {
  color: var(--s-weiss);
  background: var(--s-petrol);
  border-color: var(--s-petrol);
}

.sommer .pd-button-box-bt .btn-info {
  color: var(--s-petrol);
  background: var(--s-flaeche);
  border-color: var(--s-flaeche);
}

.sommer .pd-button-box-bt :is(.btn-success, .btn-info):is(:hover, :focus-visible) {
  color: var(--s-weiss);
  background: var(--s-petrol-dunkel);
  border-color: var(--s-petrol-dunkel);
}

.sommer-linkknopf {
  padding: 0;
  font: inherit;
  color: var(--s-petrol);
  cursor: pointer;
  background: none;
  border: 0;
}

.sommer-linkknopf:hover {
  text-decoration: underline;
}

.sommer .form-control,
.sommer .form-select {
  font-size: 15px;
  color: var(--s-text);
  border-color: #ccc;
  border-radius: 0;
}

.sommer .form-control:focus,
.sommer .form-select:focus {
  border-color: var(--s-petrol);
  box-shadow: 0 0 0 .2rem rgba(0, 99, 118, .2);
}

/* ===== Seite (Kasten 1170 px wie bisher) ===== */
.sommer-seite {
  width: 100%;              /* Cassiopeia macht body zur Flex-Spalte: ohne feste Breite schrumpft der Kasten bis die Bilder geladen sind (Layout-Verschiebung) */
  max-width: var(--s-breite);
  margin: 0 auto;
}

/* ===== Kopf ===== */
.sommer-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px var(--s-rand);
}

.sommer-logo__link {
  display: inline-block;
  line-height: 0;
}

.sommer-logo__bild {
  width: auto;
  height: 64px;
}

.sommer-burger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .9rem;
  font: inherit;
  color: var(--s-weiss);
  cursor: pointer;
  background: var(--s-petrol);
  border: 0;
}

.sommer-burger .sommer-icon {
  width: 24px;
  height: 24px;
}

/* Offcanvas (Handy) */
.sommer-nav.offcanvas-lg {
  --offcanvas-width: min(380px, 90vw);
  --offcanvas-bg: var(--s-weiss);
}

/* Geschlossen ganz aus dem Layout nehmen (sonst ragt es rechts aus dem Bildschirm und Nachladen von Schriften
   darin zählt als Verschiebung) */
@media (width < 992px) {
  .sommer-nav.offcanvas-lg:not(.show):not(.showing):not(.hiding) {
    display: none;
  }
}

.sommer-nav__kopf {
  border-bottom: 1px solid var(--s-linie);
}

.sommer-nav__titel {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--s-ueberschrift);
}

.sommer-nav__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Topbar */
.sommer-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
}

.sommer-topbar__kontakt {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-topbar__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  color: var(--s-petrol);
}

.sommer-topbar__kontakt .sommer-icon {
  width: 16px;
  height: 16px;
}

/* Sprachauswahl */
.sommer-sprachen__liste {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-sprachen__liste a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
  color: var(--s-text);
}

.sommer-sprachen__flagge {
  display: block;
  width: 18px;
  height: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.sommer-sprachen__liste .aktiv a {
  font-weight: 700;
}

/* Suche (Smart Search) */
.sommer-suche .mod-finder__search {
  flex-wrap: nowrap;
}

.sommer-suche .js-finder-search-query {
  min-height: 38px;
  background: var(--s-flaeche);
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.sommer-suche .mod-finder__search .btn {
  min-width: 52px;
  font-size: 0;
  background: var(--s-petrol);
  border-color: var(--s-petrol);
}

.sommer-suche .mod-finder__search .btn [class^="icon-"],
.sommer-suche .mod-finder__search .btn [class*=" icon-"] {
  font-size: 18px;
  color: var(--s-weiss);
}

/* ===== Hauptmenü ===== */
.sommer-menu,
.sommer-menu__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-menu__zeile {
  display: flex;
  align-items: stretch;
}

.sommer-menu__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.sommer-menu__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.sommer-menu__knopf .sommer-icon {
  width: 20px;
  height: 20px;
  transition: transform .15s ease;
}

.sommer-menu__knopf[aria-expanded="true"] .sommer-icon {
  transform: rotate(180deg);
}

.sommer-menu__feld {
  display: none;
}

.sommer-menu__punkt.ist-offen > .sommer-menu__feld {
  display: block;
}

/* Megamenü-Kästen: nur am Desktop */
.sommer-mega {
  display: none;
}

/* Handy: Akkordeon */
@media (width < 992px) {
  .sommer-menu {
    border-top: 1px solid var(--s-linie);
  }

  .sommer-menu__punkt {
    border-bottom: 1px solid var(--s-linie);
  }

  .sommer-menu__punkt .sommer-menu__punkt:last-child {
    border-bottom: 0;
  }

  .sommer-menu__link,
  .sommer-menu__text {
    min-height: 46px;
    padding: .55rem .25rem;
    color: var(--s-ueberschrift);
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__link {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .sommer-menu__punkt.current > .sommer-menu__zeile > .sommer-menu__link {
    font-weight: 700;
    color: var(--s-petrol);
  }

  .sommer-menu__knopf {
    min-height: 46px;
    color: var(--s-petrol);
    border-left: 1px solid var(--s-linie);
  }

  .sommer-menu__feld {
    padding-left: 1rem;
    background: #fafafa;
  }

  .sommer-menu__liste .sommer-menu__punkt {
    border-top: 1px solid var(--s-linie);
    border-bottom: 0;
  }
}

/* ===== Desktop ab 992 px ===== */
@media (width >= 992px) {
  .sommer-kopf {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "topbar topbar"
      "logo suche"
      "nav nav";
    gap: 0;
    padding: 0;
  }

  /* Offcanvas-Hülle löst sich am Desktop auf: Topbar, Suche und Menü liegen im Kopfraster */
  .sommer-nav.offcanvas-lg,
  .sommer-nav .offcanvas-body {
    display: contents;
  }

  .sommer-burger,
  .sommer-nav__kopf {
    display: none;
  }

  .sommer-logo {
    grid-area: logo;
    padding: 4px 0 12px 12px;
  }

  .sommer-logo__bild {
    height: 103px;
  }

  .sommer-topbar {
    grid-area: topbar;
    justify-content: flex-end;
    min-height: 40px;
    padding: 4px 5px 0 0;
  }

  .sommer-topbar__kontakt {
    flex-direction: row;
    gap: 0;
  }

  .sommer-topbar__kontakt li + li::before {
    content: "|";
    margin: 0 .55rem;
    color: var(--s-text);
  }

  .sommer-topbar__kontakt a,
  .sommer-sprachen__liste a {
    min-height: 24px;
  }

  .sommer-sprachen__kurz {
    display: none;
  }

  .sommer-suche {
    grid-area: suche;
    justify-self: end;
    width: 262px;
    margin-right: 0;
  }

  .sommer-hauptnav {
    grid-area: nav;
    position: relative;
    z-index: 100;
    background: var(--s-petrol);
  }

  .sommer-menu {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
  }

  .sommer-menu > .sommer-menu__punkt {
    position: relative;
  }

  .sommer-menu > .sommer-menu__punkt.art-mega,
  .sommer-menu > .sommer-menu__punkt.art-spalten {
    position: static;
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile {
    height: 53px;
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__link,
  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__text {
    padding: 0 0 0 20px;
    font-size: 14px;
    font-weight: 300;
    line-height: 53px;
    color: var(--s-weiss);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .sommer-menu > .sommer-menu__punkt:not(.hat-kinder) > .sommer-menu__zeile > .sommer-menu__link {
    padding-right: 20px;
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__knopf {
    min-width: 0;
    padding: 0 16px 0 4px;
    color: var(--s-weiss);
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile .sommer-icon {
    width: 14px;
    height: 14px;
  }

  /* Hervorhebung wie bisher (hellblau); dunkle Schrift für ausreichenden Kontrast */
  .sommer-menu > .sommer-menu__punkt.active > .sommer-menu__zeile,
  .sommer-menu > .sommer-menu__punkt.ist-offen > .sommer-menu__zeile,
  .sommer-menu > .sommer-menu__punkt:hover > .sommer-menu__zeile {
    background: var(--s-hellblau);
  }

  .sommer-menu > .sommer-menu__punkt.active > .sommer-menu__zeile > *,
  .sommer-menu > .sommer-menu__punkt.ist-offen > .sommer-menu__zeile > *,
  .sommer-menu > .sommer-menu__punkt:hover > .sommer-menu__zeile > * {
    color: var(--s-petrol-tief);
    text-decoration: none;
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile :focus-visible {
    outline: 3px solid var(--s-weiss);
    outline-offset: -5px;
  }

  .sommer-menu > .sommer-menu__punkt.active > .sommer-menu__zeile :focus-visible,
  .sommer-menu > .sommer-menu__punkt:hover > .sommer-menu__zeile :focus-visible {
    outline-color: var(--s-petrol-tief);
  }

  /* Felder */
  .sommer-menu > .sommer-menu__punkt > .sommer-menu__feld {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 230px;
    background: #fdfdfc;
    box-shadow: var(--s-schatten);
  }

  .sommer-menu > .sommer-menu__punkt.art-mega > .sommer-menu__feld,
  .sommer-menu > .sommer-menu__punkt.art-spalten > .sommer-menu__feld {
    right: 0;
    padding: 15px 15px 20px;
  }

  @media (hover: hover) {
    .sommer-menu > .sommer-menu__punkt:hover > .sommer-menu__feld {
      display: block;
    }
  }

  /* Einfache Liste */
  .sommer-menu__feld--liste .sommer-menu__liste .sommer-menu__link,
  .sommer-menu__feld--liste .sommer-menu__liste .sommer-menu__text {
    min-height: 40px;
    padding: .4rem 1rem .4rem 30px;
    font-size: 14px;
    font-weight: 300;
    color: #333;
    background: url("../images/m-punkt.png") no-repeat 14px 50%;
  }

  .sommer-menu__feld--liste .sommer-menu__liste .sommer-menu__link:hover,
  .sommer-menu__feld--liste .sommer-menu__liste .current > .sommer-menu__zeile > .sommer-menu__link {
    color: var(--s-petrol);
    text-decoration: none;
    background-color: var(--s-flaeche);
  }

  .sommer-menu__feld--liste .ebene-3,
  .sommer-menu__feld--liste .sommer-menu__knopf {
    display: none;
  }

  /* Spalten aus dem Menübaum */
  .sommer-menu__feld--spalten > .sommer-menu__liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 25px;
  }

  .sommer-menu__feld--spalten > .sommer-menu__liste > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__link {
    padding-bottom: .5rem;
    font-size: 17px;
    color: var(--s-ueberschrift);
    text-transform: uppercase;
    border-bottom: 1px solid var(--s-linie);
  }

  .sommer-menu__feld--spalten .sommer-menu__knopf,
  .sommer-menu__feld--spalten .ebene-3 .sommer-menu__feld {
    display: none;
  }

  .sommer-menu__feld--spalten .sommer-menu__punkt > .sommer-menu__feld {
    display: block;
  }

  .sommer-menu__feld--spalten .ebene-3 .sommer-menu__link {
    padding: .3rem 0 .3rem 16px;
    font-size: 14px;
    font-weight: 300;
    color: #333;
    background: url("../images/m-punkt.png") no-repeat 0 50%;
  }

  /* Megamenü mit Modul-Kästen */
  .sommer-menu__feld--mega > .sommer-menu__liste {
    display: none;
  }

  .sommer-mega {
    display: grid;
    gap: 20px 25px;
  }

  .sommer-mega--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sommer-mega--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sommer-mega--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .sommer-mega h3,
  .sommer-mega .h3 {
    margin: .5rem 0 1rem;
    font-size: 17px;
    text-transform: uppercase;
  }

  .sommer-mega h3 a {
    color: var(--s-ueberschrift);
  }

  .sommer-mega ul {
    margin: .5rem 0;
    padding: 0;
    list-style: none;
  }

  .sommer-mega li,
  .sommer-mega li p {
    margin: 0;
  }

  .sommer-mega li a {
    display: block;
    padding: .3rem 0 .3rem 18px;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background: url("../images/m-punkt.png") no-repeat 2px 50%;
  }

  .sommer-mega li a:hover {
    color: var(--s-petrol);
  }

  .sommer-mega .link {
    display: block;
    color: var(--s-ueberschrift);
    text-align: right;
    text-decoration: underline;
  }

  .sommer-mega br {
    display: none;
  }

  .sommer-mega .block_menu_bottom {
    margin-top: 1.25rem;
  }

  /* Obere und untere Kästen aller Spalten auf gemeinsamen Zeilen (Subgrid), „alle Produkte“ unten im Kasten: Spalten mit
     mehr Einträgen (Schnee & Eis seit IDS-30) schoben sonst die untere Reihe nach unten (Nachprüfung 30.10. abends) */
  @supports (grid-template-rows: subgrid) {
    .sommer-mega__spalte {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
    }

    .sommer-mega__spalte > .mod-custom {
      display: contents;
    }

    .sommer-mega .block_menu_top,
    .sommer-mega .block_menu_bottom {
      display: flex;
      flex-direction: column;
    }

    .sommer-mega .block_menu_bottom {
      margin-top: 0;
    }

    .sommer-mega .block_menu_top > :is(.link, p:has(> .link)),
    .sommer-mega .block_menu_bottom > :is(.link, p:has(> .link)) {
      margin-top: auto;
    }
  }
}

@media (width >= 992px) and (width < 1200px) {
  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__link {
    padding-left: 12px;
    letter-spacing: .5px;
  }

  .sommer-menu > .sommer-menu__punkt > .sommer-menu__zeile > .sommer-menu__knopf {
    padding-right: 10px;
  }

  .sommer-menu > .sommer-menu__punkt:not(.hat-kinder) > .sommer-menu__zeile > .sommer-menu__link {
    padding-right: 12px;
  }
}

/* ===== Kopfbild ===== */
.sommer-kopfbild {
  position: relative;
  margin: 0;
  overflow: hidden;
  line-height: 0;
  background: var(--s-petrol);
}

.sommer-kopfbild__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1170 / 250;
  object-fit: cover;
}

.sommer-kopfbild--start {
  border-bottom: 5px solid var(--s-petrol);
}

.sommer-kopfbild--start .sommer-kopfbild__bild {
  aspect-ratio: 1170 / 430;
}

.sommer-kopfbild__titel {
  position: absolute;
  left: 0;
  bottom: 22%;
  max-width: 62%;
  margin: 0;
  padding: .55rem 1rem;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2 !important;
  color: var(--s-weiss) !important;
  text-transform: none;
  background: rgba(0, 75, 90, .85);
}

.sommer-kopfbild--start .sommer-kopfbild__titel {
  bottom: 18%;
  padding: 1rem 1rem 1.1rem;
  font-size: clamp(1.15rem, 2.4vw, 1.8rem);
}

@media (width < 576px) {
  .sommer-kopfbild__bild {
    aspect-ratio: 375 / 150;
  }

  .sommer-kopfbild--start .sommer-kopfbild__bild {
    aspect-ratio: 375 / 190;
  }

  .sommer-kopfbild__titel,
  .sommer-kopfbild--start .sommer-kopfbild__titel {
    position: static;
    max-width: none;
    font-size: 1.15rem;
  }
}

.sommer-banner {
  margin-bottom: 0;
}

/* ===== Navigationspfad ===== */
.sommer-pfad {
  padding: 0 var(--s-rand);
  background: var(--s-weiss);
}

.sommer-pfad .breadcrumb {
  --breadcrumb-divider: "›";
  --breadcrumb-divider-color: #666;
  --breadcrumb-item-active-color: #666;
  margin: 0;
  padding: 10px 13px !important;
  font-size: 15px;
  background: none;
}

.sommer-pfad .breadcrumb a {
  color: #555;
}

.sommer-pfad .mod-breadcrumbs__here,
.sommer-pfad .mod-breadcrumbs__divider {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* ===== Reihen und Kästen ===== */
.sommer-reihe,
.sommer-haupt {
  margin-top: 20px;
}

.sommer-reihe--themen {
  display: grid;
  gap: 1.25rem;
  padding: 26px 25px 24px;
  background: var(--s-weiss);
  border-bottom: 5px solid var(--s-hellblau);
}

.sommer-reihe--karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.sommer-reihe--themen {
  grid-template-columns: minmax(0, 1fr);
}

.sommer-reihe > *,
.sommer-fuss__spalten > *,
.sommer-haupt > * {
  min-width: 0;
}

.sommer-reihe--karten > .sommer-modul,
.sommer-reihe--breit > .sommer-modul {
  padding: 15px var(--s-rand) 25px;
  background: var(--s-weiss);
}

@media (width >= 768px) {
  .sommer-reihe--themen {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
  }

  .sommer-reihe--karten {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Themenkästen der Startseite (Markup der alten Module: .block1 > .left/.right) */
.sommer-reihe--themen .sommer-modul__titel {
  margin: 0 0 .5rem;
  font-size: 17.7px;
  text-transform: uppercase;
}

.sommer-reihe--themen .block1 {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.sommer-reihe--themen .block1 .left {
  flex: none;
  width: 60px;
}

.sommer-reihe--themen .block1 h3 {
  margin: 0 0 .35rem;
  font-size: 17.7px;
  text-transform: uppercase;
}

.sommer-reihe--themen .block1 h3 a {
  color: #000 !important;
}

.sommer-reihe--themen .block1 p {
  margin: 0;
}

/* Überschrift im Modulinhalt (alte Module bringen sie selbst mit) */
.sommer-reihe h3.moduletitle {
  margin: 0 0 1rem;
  padding: 15px 0 8px;
  font-size: 17.7px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--s-linie);
}

/* Startseite: Online-Wetterstation (Modul „Wetterstation“) */
.wetter-over-image {
  position: relative;
}

.wetter-over-image p {
  margin: 0;
}

.wetter-over-image img,
.support-over-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.title-over-image {
  position: absolute;
  top: 25%;
  left: 0;
  max-width: 92%;
}

.title-over-image h4 {
  margin: 0 !important;
  padding: 8px 10px;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--s-weiss) !important;
  text-transform: uppercase;
  background: rgba(0, 75, 90, .85);
}

.title-over-image p {
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .55);
}

.title-over-image a {
  color: var(--s-weiss) !important;
}

.wetterstation-table {
  width: 100%;
  margin-top: .75rem;
  border-collapse: collapse;
}

.wetterstation-table tr {
  border-bottom: 1px solid #e9e9e9;
}

.wetterstation-table td {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 3px 0;
}

.wetterstation-table td > div,
.wetterstation-table .title-station div {
  display: inline !important;
}

.title-station {
  font-size: 13px;
  color: #335566;
  text-transform: uppercase;
}

.icon-style {
  flex: none;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-luft-temperatur { background-image: url("../images/lufttemperatur.png"); }
.icon-rel-luftfeuchte { background-image: url("../images/rel-luftfeuchte.png"); }
.icon-wingeschwindigkeit { background-image: url("../images/wingeschwindigkeit.png"); }
.icon-windrichtung { background-image: url("../images/windrichtung.png"); }
.icon-windboee { background-image: url("../images/windboee.png"); }

/* Startseite: Service & Support (Modul mit Plus-Leisten) */
.support-over-image + p {
  margin: .5rem 0 1rem;
}

.links_content {
  display: flex;
  margin-bottom: 10px;
}

.plus_block {
  flex: none;
  width: 39px;
  height: 39px;
  background: url("../images/plus-service.png") no-repeat;
}

.support_block {
  flex: 1 1 auto;
  min-height: 39px;
  background: var(--s-flaeche);
}

.support_block a {
  display: block;
  padding: 0 10px;
  line-height: 39px;
  color: #000;
}

/* Modultitel */
.sommer-modul__titel {
  margin: 0 0 1rem;
  padding: 15px 0 8px;
  font-size: 17.7px;
  font-weight: 400;
  color: var(--s-ueberschrift);
  text-transform: uppercase;
  border-bottom: 1px solid var(--s-linie);
}

/* ===== Hauptbereich mit Seitenleisten ===== */
.sommer-haupt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.sommer-inhalt {
  min-width: 0;
}

.sommer-inhalt:focus {
  outline: none;
}

.sommer-komponente,
.sommer-inhalt > .sommer-modul,
.sommer-leiste > .sommer-modul {
  padding: 15px var(--s-rand) 25px;
  background: var(--s-weiss);
}

.sommer-inhalt > .sommer-modul + .sommer-komponente,
.sommer-komponente + .sommer-modul,
.sommer-inhalt > .sommer-modul + .sommer-modul {
  margin-top: 20px;
}

.sommer-leiste {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sommer-leiste .mod-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-leiste .mod-list li {
  padding: .55rem 0 .35rem;
  border-bottom: 1px solid #ddd;
}

.sommer-leiste .mod-list li.active > a {
  font-weight: 700;
}

.sommer-leiste .sommer-modul__titel {
  padding: 0 0 0 12px;
  border-bottom: 0;
  border-left: 4px solid #000;
}

@media (width >= 992px) {
  .sommer-haupt.hat-links {
    grid-template-columns: 273px minmax(0, 1fr);
  }

  .sommer-haupt.hat-rechts {
    grid-template-columns: minmax(0, 1fr) 273px;
  }

  .sommer-haupt.hat-links.hat-rechts {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
  }

  .sommer-komponente {
    padding: 20px 30px 30px;
  }
}

/* Systemmeldungen */
.sommer-inhalt joomla-alert,
.sommer-inhalt .alert {
  margin-bottom: 20px;
}

/* ===== Seitentitel und Inhalt ===== */
.sommer-titel,
.sommer .page-header h1,
.sommer .sommer-komponente h1.ph-header {
  margin: 0 0 20px;
  padding-top: 15px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--s-petrol);
  text-transform: uppercase;
}

/* kleiner als die Hauptüberschrift (24 px), sonst wirkte die Zwischenüberschrift im Text größer als der Seitentitel */
.sommer-komponente h2 {
  font-size: 1.35rem;
  text-transform: uppercase;
}

.sommer-komponente h3 {
  margin: 1.25rem 0 .75rem;
  padding-bottom: 4px;
  font-size: 17.7px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--s-linie);
}

.sommer-komponente p {
  margin: 0 0 .9rem;
}

.sommer-komponente ul {
  padding-left: 1.25rem;
}

.sommer-komponente table {
  max-width: 100%;
}

/* Tabellen im Text: Abstand zwischen den Spalten (Jobs: „VertriebEntwicklungTechnik“ klebte am Handy zusammen);
   schmale Bildschirme scrollen die Tabelle waagrecht statt die Seite (Abnahme 2026-10-30) */
.sommer-komponente table th,
.sommer-komponente table td {
  padding: .25rem .75rem .25rem 0;
  vertical-align: top;
}

@media (max-width: 599.98px) {
  .sommer-komponente table {
    display: block;
    overflow-x: auto;
  }
}

/* Inline-Schriftgrößen aus Word kleiner als der Fließtext (12 px, 13 px, 10 pt) auf Textgröße (Abnahme 2026-10-30) */
.sommer .sommer-komponente [style*="font-size: 12px"],
.sommer .sommer-komponente [style*="font-size:12px"],
.sommer .sommer-komponente [style*="font-size: 13px"],
.sommer .sommer-komponente [style*="font-size:13px"],
.sommer .sommer-komponente [style*="font-size: 10pt"],
.sommer .sommer-komponente [style*="font-size:10pt"] {
  font-size: inherit !important;
}

.sommer-hinweis {
  padding: 1rem;
  background: var(--s-flaeche);
}

/* ===== Liste (Produktkategorie, News, Anwendungsberichte) ===== */
.sommer-liste__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.25rem 0;
}

.sommer-liste__eintrag + .sommer-liste__eintrag {
  border-top: 1px solid var(--s-linie);
}

.sommer-liste__bild img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.sommer-liste__titel {
  margin: 0 0 .75rem;
  font-size: 19px !important;
  text-transform: uppercase !important;
}

.sommer-liste__titel a {
  color: var(--s-ueberschrift);
}

.sommer-liste__einleitung p:first-child strong:only-child,
.sommer-liste__einleitung > p:first-child > b:only-child {
  display: block;
  color: #222;
}

.sommer-liste__weiter {
  margin: 1rem 0 0;
}

/* Infoblock (Datum, Autor …) klein und grau wie bisher */
.sommer .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin: 0 0 .6rem;
  font-size: 12px;
  color: var(--s-grau);
}

.sommer .article-info dd {
  margin: 0;
}

.sommer .article-info .article-info-term {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* Schlagwörter */
.sommer .tags {
  margin: 0 0 .6rem;
}

.sommer .tags a {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: 12px;
  color: var(--s-petrol);
  text-decoration: none;
  background: var(--s-flaeche);
  border: 0;
}

@media (width >= 768px) {
  .sommer-liste__eintrag:has(.sommer-liste__bild) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Teaser in der Liste einheitlich linksbündig, auch wenn der alte Inhalt <center> enthält */
.sommer-blog center,
.sommer-blog [style*="text-align: center"],
.sommer-blog [style*="text-align:center"] {
  text-align: inherit !important;
}

/* Weitere Beiträge als Linkliste unter dem Blog: genug Abstand zum Antippen */
.sommer-blog .items-more {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--s-linie);
}

.sommer-blog .items-more li {
  margin: 0 0 .25rem;
}

/* block statt inline-block: bei umbrechenden Titeln stünde die Nummer sonst neben der letzten statt der ersten Zeile */
.sommer-blog .items-more a {
  display: block;
  min-height: 24px;
  padding: 3px 0;
}

.sommer-blaettern {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.sommer .pagination {
  --pagination-color: var(--s-petrol);
  --pagination-active-bg: var(--s-petrol);
  --pagination-active-border-color: var(--s-petrol);
  --pagination-border-radius: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== Kacheln (Kategorien) ===== */
.sommer-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px 20px;
  padding: 10px 0;
}

.sommer-kachel {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.sommer-kachel__titel {
  order: 0;
  margin: 0 0 .7rem !important;
  padding: 0 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  border: 0 !important;
}

.sommer-kachel__titel a {
  color: var(--s-ueberschrift);
}

.sommer-kachel__bildlink {
  display: block;
  overflow: hidden;
}

.sommer-kachel__bild {
  display: block;
  width: 100%;
  aspect-ratio: 188 / 100;
  object-fit: cover;
  transition: transform .3s ease;
}

.sommer-kachel__bildlink:hover .sommer-kachel__bild {
  transform: scale(1.04);
}

.sommer-kachel__text {
  margin: .8rem 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.sommer-kachel__weiter {
  margin: 1rem 0 0;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 14px;
}

.sommer-kachel__weiter a {
  color: var(--s-petrol);
  text-decoration: underline;
  text-transform: uppercase;
}

.sommer-kachel__weiter a::after {
  content: " >";
  display: inline-block;
  margin-left: .25rem;
  color: var(--s-text);
  text-decoration: none;
}

@media (width >= 992px) {
  .sommer-kacheln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== News-Leiste ===== */
.sommer-news {
  position: relative;
}

.sommer-news__leiste {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sommer-news__leiste::-webkit-scrollbar {
  display: none;
}

.sommer-news__eintrag {
  position: relative;       /* hält unsichtbare Linktexte (visually-hidden, absolut) in der Leiste */
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.sommer-news__bild {
  display: block;
  width: 100%;
  aspect-ratio: 244 / 125;
  object-fit: cover;
}

.sommer-news__titel {
  margin: 1.2rem 0 .5rem !important;
  font-size: 15px !important;
  text-transform: none !important;
  border: 0 !important;
}

.sommer-news__titel a {
  color: var(--s-text);
}

.sommer-news__datum {
  margin: 0 0 .5rem;
  font-size: 12px;
  color: var(--s-grau);
}

.sommer-news__knoepfe {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}

.sommer-news__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  color: var(--s-weiss);
  cursor: pointer;
  background: #777;
  border: 0;
}

.sommer-news__knopf:hover {
  background: var(--s-petrol);
}

/* ===== Produktseite ===== */
.sommer-sprungmarken {
  margin: 0 0 1.5rem;
  padding: .9rem 1.5rem;
  background: var(--s-flaeche);
}

.sommer-sprungmarken ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-sprungmarken li + li::before {
  content: "|";
  margin: 0 .7rem;
  color: #c9cdd0;
}

.sommer-produkt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.25rem;
}

.sommer-produkt__raster > *,
.sommer-liste__eintrag > * {
  min-width: 0;
}

.sommer .sigplus-gallery {
  max-width: 100%;
}

/* Blätter-Knöpfe der Galerie groß genug für Finger (mind. 24 px) */
.sommer .slideplus-navigation a,
.sommer .slideplus-navigation .slideplus-button {
  min-width: 24px;
  min-height: 24px;
}

@media (width >= 992px) {
  .sommer-produkt__raster:not(.ohne-links) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.sommer-produkt__bild {
  margin: 0 0 1.5rem;
}

.sommer-produkt__bild img {
  display: block;
  width: 100%;
  object-fit: contain;
}

.sommer-produkt__bild figcaption {
  margin-top: .4rem;
  font-size: 13px;
  color: var(--s-grau);
}

.sommer-produkt__text > .com-content-article__body > h2:first-child,
.sommer-produkt__text > .com-content-article__body > p:first-child > strong:only-child {
  display: block;
  margin-top: 0;
}

.sommer-abschnitt {
  margin: 0 0 2rem;
  scroll-margin-top: 1rem;
}

.sommer-abschnitt__titel,
.sommer-kasten__titel {
  margin: 0 0 .9rem !important;
  padding-bottom: 4px;
  font-size: 17.7px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--s-linie);
}

.sommer-kasten {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid #ddd;
  scroll-margin-top: 1rem;
}

.sommer-kasten__titel {
  border-bottom: 0;
}

.sommer-infos {
  margin: 0;
}

.sommer-infos__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .45rem .3rem;
  border-bottom: 1px solid var(--s-linie);
}

.sommer-infos__zeile:nth-child(odd) {
  background: var(--s-flaeche);
}

.sommer-infos dt {
  font-weight: 400;
}

.sommer-infos dd {
  margin: 0;
}

.sommer-downloads__liste a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .2rem 1rem .2rem 0;
}

.sommer-downloads__liste a::before {
  content: "";
  flex: none;
  width: 14px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 0h8l5 5v11H1zM8.5 1v4.5H13z'/%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 14 16'%3E%3Cpath d='M1 0h8l5 5v11H1zM8.5 1v4.5H13z'/%3E%3C/svg%3E") no-repeat center / contain;
}

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

.sommer-technik strong,
.sommer-technik b {
  color: #222;
}

/* Technische Daten: Listen ohne Aufzählungszeichen, eingerückt wie bisher */
.sommer-produkt .com-content-article__body ul {
  padding-left: 1.5rem;
  list-style: none;
}

.sommer-produkt .com-content-article__body ul p {
  margin: 0;
}

/* Listen mit Haken wie bisher (Eigenschaften und Vorteile, Klasse aus dem alten Inhalt) */
.sommer .list_with_check {
  padding-left: 0 !important;
  list-style: none !important;
}

.sommer .list_with_check li {
  position: relative;
  margin: 0 0 .3rem;
  padding-left: 1.25rem;
}

.sommer .list_with_check li::before {
  content: "";
  position: absolute;
  top: .45em;
  left: .2rem;
  width: .45rem;
  height: .25rem;
  border-bottom: 2px solid var(--s-ueberschrift);
  border-left: 2px solid var(--s-ueberschrift);
  transform: rotate(-45deg);
}

/* ===== Zwei-Klick-Platzhalter ===== */
.sommer-embed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  color: var(--s-weiss);
  text-align: center;
  background: linear-gradient(135deg, var(--s-petrol-dunkel), #1d7f91);
}

.sommer-embed--16x9 { aspect-ratio: 16 / 9; }
.sommer-embed--4x3 { aspect-ratio: 4 / 3; }
.sommer-embed--1x1 { aspect-ratio: 1 / 1; }
.sommer-embed--21x9 { aspect-ratio: 21 / 9; }

.sommer-embed__inhalt {
  max-width: 34rem;
}

.sommer-embed p {
  margin: 0 0 .7rem;
}

.sommer-embed__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 17px;
}

.sommer-embed__name .sommer-icon {
  width: 34px;
  height: 34px;
}

.sommer-embed__text {
  font-size: 14px;
}

.sommer-embed a {
  color: var(--s-weiss);
  text-decoration: underline;
}

.sommer-embed__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.25rem;
}

.sommer-embed .sommer-btn {
  color: var(--s-petrol-tief);
  background: var(--s-weiss);
  border-color: var(--s-weiss);
}

.sommer-embed .sommer-btn:hover,
.sommer-embed .sommer-btn:focus-visible {
  color: var(--s-weiss);
  background: var(--s-petrol-tief);
}

.sommer-embed :focus-visible {
  outline-color: var(--s-weiss);
}

.sommer-embed__immer {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 14px;
  cursor: pointer;
}

.sommer-embed__immer input {
  width: 18px;
  height: 18px;
}

.sommer-embed.ist-geladen {
  display: block;
  padding: 0;
  background: #000;
}

.sommer-embed.ist-geladen iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
}

/* ===== Einwilligung ===== */
.sommer-einwilligung {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1080;
  padding: 0 12px 12px;
  pointer-events: none;
}

.sommer-einwilligung[hidden] {
  display: none;
}

.sommer-einwilligung__box {
  max-width: 820px;
  max-height: calc(100vh - 24px);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  pointer-events: auto;
  background: var(--s-weiss);
  border-top: 5px solid var(--s-petrol);
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .25);
}

.sommer-einwilligung__titel {
  margin: 0 0 .6rem !important;
  font-size: 18px !important;
  text-transform: uppercase;
}

.sommer-einwilligung__titel:focus {
  outline: none;
}

.sommer-einwilligung__text {
  margin: 0 0 .8rem;
  font-size: 14px;
}

.sommer-einwilligung__wahl {
  display: grid;
  gap: .4rem;
  margin: 0 0 1rem;
}

.sommer-einwilligung__option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 14px;
  cursor: pointer;
}

.sommer-einwilligung__option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--s-petrol);
}

.sommer-einwilligung__knoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
}

.sommer-einwilligung__knoepfe .sommer-btn {
  width: 100%;
  min-height: 44px;
}

/* Handy: Banner kompakt, drei gleich große Knöpfe nebeneinander */
@media (width < 576px) {
  .sommer-einwilligung {
    padding: 0;
  }

  .sommer-einwilligung__box {
    max-height: 75vh;
    padding: .9rem 1rem 1rem;
  }

  .sommer-einwilligung__titel {
    font-size: 16px !important;
  }

  .sommer-einwilligung__text,
  .sommer-einwilligung__option {
    font-size: 13px;
  }

  .sommer-einwilligung__knoepfe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }

  .sommer-einwilligung__knoepfe .sommer-btn {
    padding: .4rem .35rem;
    font-size: 13.5px;
  }
}

/* ===== Fußzeile ===== */
.sommer-fuss {
  margin-top: 20px;
  padding: 20px var(--s-rand) 30px;
  background: var(--s-weiss);
}

.sommer-fuss__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 30px;
}

.sommer-fuss .sommer-modul__titel {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: 10px 0 7px;
}

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

.sommer-fuss__spalten li a {
  display: inline-block;
  padding: 3px 0 3px 18px;
  font-size: 13px;
  line-height: 19px;
  background: url("../images/m-punkt.png") no-repeat 2px 50%;
}

.sommer-fuss__spalten p {
  margin: 0 0 .6rem;
  font-size: 13px;
}

/* Überschriften im Modulinhalt (Newsletter, Imagefilm) wie Modultitel */
/* block statt inline-block: im englischen Newsletter-Modul folgt die Überschrift direkt auf einen Link
   und stand sonst in derselben Zeile; fit-content hält den Unterstrich so breit wie den Text */
.sommer-fuss__spalten h3 {
  display: block;
  width: fit-content;
  margin: 0 0 .9rem;
  padding: 10px 0 7px;
  font-size: 17.7px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--s-linie);
}

.sommer-fuss__spalten .moduletable + .moduletable,
.sommer-fuss__spalten .modulecontent + h3 {
  margin-top: 1.25rem;
}

.sommer-fuss__spalten :is(strong, a) + h3 {
  margin-top: 1rem;
}

.sommer-fuss__unten {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--s-linie);
}

.sommer-fuss__info p {
  margin: 0 0 .4rem;
  font-size: 15px;
}

/* Am Handy über die ganze Breite, Logos mittig (drei Logos passen nicht in eine Zeile, linksbündig wirkte 2+1
   zufällig; Nachprüfung 30.10. abends), ab 768 px rechts neben Copyright und Social-Symbolen */
.sommer-fuss__logos {
  justify-self: stretch;
}

.sommer-fuss__logos img {
  max-width: 180px;
}

/* Phoca Download: Hinweis „Powered by Phoca Download“ unter den Listen ausblenden (Entscheidung Kai, 30.10.) */
.sommer div[style*="color:#ccc"]:has(> a[href*="phoca.cz/phocadownload"]) {
  display: none !important;
}

/* Zertifikats-Logos gleichmäßig nebeneinander (Altinhalt mit float, Rändern und Abstandsbild) */
.sommer-fuss__logos .certification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
}

.sommer-fuss__logos .certification img {
  float: none !important;
  margin: 0 !important;
}

.sommer-fuss__logos .certification img[src*="blank_300x10px"],
.sommer-fuss__logos .certification picture:has(> img[src*="blank_300x10px"]) {
  display: none;
}

.sommer-social {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--s-weiss) !important;
}

.sommer-social .sommer-icon {
  width: 26px;
  height: 26px;
}

.sommer-social__linkedin {
  background: #0a66c2;
}

.sommer-social__youtube {
  background: #c4302b;
}

.sommer-social a:hover {
  filter: brightness(.9);
}

@media (width >= 768px) {
  .sommer-fuss {
    padding: 20px 30px 30px;
  }

  .sommer-fuss__unten {
    grid-template-columns: 1fr auto;
  }

  .sommer-fuss__logos {
    justify-self: end;
    text-align: right;
  }

  .sommer-fuss__logos .certification {
    justify-content: flex-end;
  }
}

/* Social-Symbole am rechten Rand (wie bisher), wenn neben dem Kasten Platz ist */
@media (width >= 1300px) {
  .sommer-social {
    position: fixed;
    top: 160px;
    right: 0;
    z-index: 90;
    flex-direction: column;
    gap: 15px;
    padding: 0 0 0 0;
  }

  .sommer-social a {
    box-shadow: -2px 2px 6px rgba(0, 0, 0, .15);
  }
}

/* ===== Fehlerseite ===== */
.sommer-fehlerseite {
  margin-top: 20px;
  padding: 2.5rem var(--s-rand) 3rem;
  text-align: center;
  background: var(--s-weiss);
}

.sommer-fehlerseite:focus {
  outline: none;
}

.sommer-fehlerseite__code {
  margin: 0;
  font-size: clamp(5rem, 22vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: #4a9aaa;
}

.sommer-fehlerseite__titel {
  margin: .5rem 0 1rem !important;
  font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
  color: var(--s-petrol) !important;
  text-transform: uppercase;
}

.sommer-fehlerseite__text {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

.sommer-fehlerseite__suche {
  display: flex;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.sommer-fehlerseite__suche .form-control {
  min-height: 44px;
  background: var(--s-flaeche);
}

.sommer-fehlerseite__suche .sommer-btn {
  min-height: 44px;
}

.sommer-fehlerseite__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommer-fehlerseite__links .sommer-btn {
  min-height: 44px;
}

/* Suche ohne Treffer: Einstiege linksbündig unter dem Text */
.sommer-suche-leer .sommer-fehlerseite__links {
  justify-content: flex-start;
  padding-left: 0;
}

.sommer-fehlerseite__technik {
  margin-top: 2rem;
  text-align: left;
}

.sommer-fuss--schmal .sommer-fuss__unten {
  margin-top: 0;
  border-top: 0;
}

/* ===== Offline-Seite ===== */
.sommer-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sommer-offline__karte {
  width: 100%;
  max-width: 520px;
  padding: 2rem 1.75rem;
  text-align: center;
  background: var(--s-weiss);
  border-top: 5px solid var(--s-petrol);
  box-shadow: var(--s-schatten);
}

.sommer-offline__titel {
  margin: 1rem 0 .75rem !important;
  color: var(--s-petrol) !important;
  text-transform: uppercase;
}

.sommer-offline__kontakt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.sommer-offline__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
}

.sommer-offline__anmeldung {
  margin-top: 1.5rem;
  text-align: left;
}

.sommer-offline__anmeldung summary {
  cursor: pointer;
  color: var(--s-petrol);
}

.sommer-offline__anmeldung form {
  display: grid;
  gap: .5rem;
  margin-top: .75rem;
}

/* ===== Galerie (sigplus) ===== */
.sommer .sigplus-gallery {
  margin: 0 0 1rem;
}

/* Produktgalerie wie alt: großes erstes Bild, darunter Vorschauraster (Lightbox von sigplus) */
.sommer-galerie__gross {
  margin: 0 0 .5rem;
}

.sommer-galerie__gross a {
  display: block;
  cursor: zoom-in;
}

.sommer-galerie__gross img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  background: var(--s-flaeche);
}

.sommer-galerie__gross figcaption {
  padding: .35rem 0 0;
  font-size: .875rem;
  color: var(--s-grau);
}

/* sigplus setzt bei „sigplus-float“ float: left auf die Liste; dann hatte der Block die Höhe 0 und „Videos“
   klebte an den Vorschaubildern (Abnahme 2026-10-30). Für alle Galerien (Produkte und Beiträge):
   Vorschaubilder (150 px) füllen die Spaltenbreite gleichmäßig; in der schmalen Produktspalte 3 Spalten */
.sommer .sigplus-gallery.sigplus-float ul {
  float: none !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  justify-content: center; /* wenn sommer.js die Bilder auf gleich volle Reihen verteilt (feste Spalten), mittig statt links */
  gap: 6px;
  margin: 0;
  padding: 0;
}

.sommer .sommer-galerie__raster .sigplus-gallery.sigplus-float ul {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.sommer .sigplus-gallery.sigplus-float li {
  margin: 0 !important;
}

/* sigplus setzt den Link auf inline-block !important; dann bleibt das Bild bei 150 px und die Zelle hat rechts eine Lücke */
.sommer .sigplus-gallery.sigplus-float a.sigplus-image {
  display: block !important;
  width: 100%;
}

.sommer .sigplus-gallery.sigplus-float img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ===== Produktfilter (mod_sommer_produktfilter) in der Seitenleiste ===== */
.sommer-liste__eintrag[hidden] {
  display: none !important;
}

.sommer-leiste .sommer-produktfilter__legende {
  padding: 0 0 0 12px;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--s-ueberschrift);
  text-transform: uppercase;
  border-left: 4px solid #000;
}

.sommer-produktfilter__feld select {
  border-color: #bbb;
}

.sommer-produktfilter__feld select:focus-visible {
  outline: 2px solid var(--s-petrol);
  outline-offset: 2px;
}

.sommer-produktfilter__treffer {
  font-weight: 700;
  color: var(--s-petrol-dunkel);
}

/* ===== Formulare (Convert Forms): Kontakt, Anfrage in der Seitenleiste, Download im Partnerbereich ===== */
.sommer .sommer-formular {
  --s-fehler: #b3261e;
  --color-danger: var(--s-fehler);
  --color-primary: var(--s-petrol);
  --control-gap: 16px;
  max-width: 720px;
  font-family: var(--s-schrift);
  color: var(--s-text);
}

.sommer .sommer-formular .cf-label {
  line-height: 1.35;
}

.sommer .sommer-formular .cf-control-label {
  margin-bottom: 4px;
}

.sommer .sommer-formular .cf-required-label {
  margin-left: .15em;
  font-weight: 700;
  color: var(--s-fehler);
}

.sommer .sommer-formular .cf-input {
  width: 100%;
  min-height: 40px;
  font-family: var(--s-schrift);
  line-height: 1.4;
}

.sommer .sommer-formular textarea.cf-input {
  min-height: 7.5em;
  resize: vertical;
}

.sommer .sommer-formular .cf-input:focus {
  border-color: var(--s-petrol);
}

.sommer .sommer-formular .cf-input:focus-visible {
  outline: 3px solid var(--s-petrol);
  outline-offset: 1px;
}

.sommer .sommer-formular .cf-input[aria-invalid="true"] {
  border-color: var(--s-fehler);
  box-shadow: inset 4px 0 0 var(--s-fehler);
}

.sommer .sommer-formular .cf-input::placeholder {
  color: #767676;
  opacity: 1;
}

/* Datenschutz: Legende wie ein Label, Zustimmungstext normal, Häkchen groß genug zum Tippen */
/* Abstände wie die übrigen Feldgruppen (Convert Forms: 10px rundum); die Legende sitzt am oberen Rand
   des Fieldsets, daher Abstand oben als Außenabstand, sonst stünde er zwischen Legende und Häkchen */
.sommer .sommer-formular fieldset.cf-control-group {
  min-width: 0;
  margin: 10px 0 0;
  padding: 0 10px 10px;
  border: 0;
}

.sommer .sommer-formular fieldset.cf-control-group > legend.cf-label {
  float: none;
  width: auto;
  margin-bottom: 4px;
  padding: 0;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

.sommer .sommer-formular .cf-checkbox-group {
  align-items: flex-start;
  gap: 10px;
}

.sommer .sommer-formular .cf-checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 1px 0 0;
  accent-color: var(--s-petrol);
}

/* Fehlender Haken: roter Rahmen um das Kästchen statt des Balkens der Textfelder */
.sommer .sommer-formular .cf-checkbox-group input[type="checkbox"][aria-invalid="true"] {
  box-shadow: none;
  outline: 2px solid var(--s-fehler);
  outline-offset: 2px;
}

.sommer .sommer-formular .cf-checkbox-group .cf-label {
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  user-select: auto;
}

.sommer .sommer-formular .cf-control-input-desc {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--s-grau);
  opacity: 1;
}

.sommer .sommer-formular .cf-control-input-desc a {
  color: var(--s-petrol);
  text-decoration: underline;
}

/* Meldungen am Feld (sommer.js) und Zeichenzähler */
.sommer .sommer-formular__fehler {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--s-fehler);
}

.sommer .sommer-formular__fehler[hidden] {
  display: none;
}

.sommer .sommer-formular__zaehler {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--s-grau);
  text-align: right;
}

/* Absenden */
.sommer .sommer-formular .cf-btn {
  width: auto;          /* Convert Forms setzt 100 % */
  min-width: 160px;
  font-family: var(--s-schrift);
  border: 1px solid var(--s-petrol);
  transition: background-color .15s;
}

.sommer .sommer-formular .cf-btn:hover,
.sommer .sommer-formular .cf-btn:focus-visible {
  background-color: var(--s-petrol-dunkel);
  border-color: var(--s-petrol-dunkel);
  opacity: 1;
}

.sommer .sommer-formular .cf-btn:focus-visible {
  outline: 3px solid var(--s-petrol);
  outline-offset: 2px;
}

/* Rückmeldung nach dem Absenden: Text dunkel auf heller Fläche (Kontrast) */
.sommer .sommer-formular .cf-response {
  padding: 12px 15px;
  color: var(--s-text);
  text-align: left;
  border-left: 4px solid var(--s-petrol);
  border-radius: 0;
}

.sommer .sommer-formular.cf-success .cf-response {
  background-color: var(--s-flaeche);
}

.sommer .sommer-formular.cf-error .cf-response {
  color: var(--s-fehler);
  background-color: #fdf0ef;
  border-left-color: var(--s-fehler);
}

.sommer .sommer-formular .cf-response p {
  margin: 0 0 .5rem;
}

.sommer .sommer-formular__danke {
  font-weight: 700;
  color: var(--s-petrol-dunkel);
}

.sommer .sommer-formular .cf-response a {
  font-weight: 700;
  color: var(--s-petrol);
  text-decoration: underline;
}

/* Seitenleiste (Anfrage auf den Produktseiten): schmal, kleinere Abstände */
.sommer .sommer-leiste .sommer-formular {
  --control-gap: 12px;
}

.sommer .sommer-leiste .sommer-formular .cf-btn {
  width: 100%;
}

@media (width < 576px) {
  .sommer .sommer-formular .cf-btn {
    width: 100%;
  }
}

.sommer .sommer-leiste .sommer-formular .cf-checkbox-group .cf-label {
  font-size: 13px;
}

/* Unter 992 px stehen die Spalten untereinander. Enthält die linke Seitenleiste ein Formular (Anfrage auf Produkt-
   und Kategorieseiten), wird sie in ihre Module aufgelöst: Filter und Navigation bleiben über dem Inhalt, das
   Formular kommt danach, damit Produkt bzw. Produktliste zuerst zu sehen sind (Gesamttest 2026-10-30). */
@media (width < 992px) {
  .sommer-haupt > .sommer-leiste--links:has(.sommer-formular) {
    display: contents;
  }

  .sommer-haupt > .sommer-leiste--links > .sommer-modul:has(.sommer-formular) {
    order: 1;
  }

  /* News: Kategorieliste und Archiv-Link nach dem Beitrag, sonst begann er erst nach 1,5 Bildschirmen (Abnahme 2026-10-30) */
  .sommer-haupt > .sommer-leiste--links:has(.mod-articlescategories) {
    order: 1;
  }
}

/* Im Inhalt (Kontakt, Partnerbereich): Abstand zum Text davor */
.sommer-formular-einbindung {
  margin-top: 1.5rem;
}

/* Im Beitrag bündig mit dem Text darüber (Convert Forms rückt sonst 20 px ein) */
.sommer .sommer-formular-einbindung .cf-form-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* ===== Live-Chat (3CX): eigener Knopf bis zur Einwilligung ===== */
.sommer-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

.sommer-chat[hidden],
body.hat-einwilligung .sommer-chat {
  display: none;
}

.sommer-chat__knopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 48px;
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--s-weiss);
  cursor: pointer;
  background: var(--s-petrol);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--s-schatten);
}

.sommer-chat__knopf:hover,
.sommer-chat__knopf:focus-visible {
  background: var(--s-petrol-dunkel);
}

.sommer-chat__knopf:focus-visible {
  outline: 3px solid var(--s-hellblau);
  outline-offset: 2px;
}

.sommer-chat__symbol {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.sommer-chat__hinweis {
  order: -1;
  width: 320px;
  max-width: 100%;
  padding: 1rem;
  font-size: .9rem;
  background: var(--s-weiss);
  border-top: 4px solid var(--s-petrol);
  box-shadow: var(--s-schatten);
}

.sommer-chat__titel {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

.sommer-chat__immer {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .5rem 0;
}

.sommer-chat__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

@media print {
  .sommer-chat,
  .sommer-produktfilter {
    display: none !important;
  }
}

/* ===== Downloads (Phoca Download) ===== */
/* Kategorienübersicht: nur „Dateien: n“ zeigen; „Kategorien: 0“ sagt nichts aus (keine Unterkategorien) */
.sommer .pd-categories-number,
.sommer .pd-sep-number {
  display: none;
}

/* Lange Dateinamen und Adressen ohne Leerzeichen dürfen umbrechen (sonst am Handy breiter als der Bildschirm) */
.sommer .pd-filenamebox-bt,
.sommer .pd-filename,
.sommer .pd-title,
.sommer .result__title,
.sommer .result__title-url,
.sommer .result__description {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Trefferliste bündig mit dem Suchfeld (Listeneinzug kostet am Handy Platz) */
.sommer .com-finder__results-list {
  padding-left: 0;
}

/* ===== Druck ===== */
@media print {
  .sommer-kopf,
  .sommer-kopfbild,
  .sommer-pfad,
  .sommer-leiste,
  .sommer-fuss,
  .sommer-einwilligung,
  .sommer-sprung,
  .sommer-social {
    display: none !important;
  }

  body.sommer {
    background: #fff;
  }

  .sommer-komponente {
    padding: 0;
  }
}

/* ===== Weniger Bewegung ===== */
@media (prefers-reduced-motion: reduce) {
  .sommer *,
  .sommer *::before,
  .sommer *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}