/* ═══════════════════════════════════════════════════════════════════════════
   heimseiten.de — THEME-NEUBAU: Komponenten
   Jede Sektion ersetzt die zugehörigen Regeln aus live-design.css/heimseiten.css
   (dort skriptgestützt entfernt — tools/remove-rules.py, Stufen-Backups).
   Prinzip: Werte = effektiver IST-Zustand (0-Pixel-Ziel), Farben über tokens.css;
   Literal-Farben NUR wo Dark bewusst NICHT flippen darf (kommentiert).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ TEXT-BILD-LAYOUT (live-design-stämmig, Stufe 13 — MUSS VOR der
   Typo-Feinschicht stehen: die figure.float_*-60px-Regeln hier sind Probe-belegte
   STILLE VERLIERER gegen deren 20px-Regeln (Reihenfolge!); Transfer nur aus
   Selektor-Treue [P5] + np=18-Restunsicherheit. Originalreihenfolge live-design. ═══════════ */

/* — image_(full_width_)height_as_text: Bild halbseitig absolut, Text daneben
   (np=2: webdesign-koeln DE/EN; full_width-Variante nirgends im DOM — Listen-Treue) — */
.content-text.hs-image-full-width-height-as-text:not(.has_inside),.content-text.hs-image-full-width-height-as-text>.inside,.content-text.hs-image-height-as-text:not(.has_inside),.content-text.hs-image-height-as-text>.inside{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;padding:0;overflow-y:hidden}
@media (max-width:767px){.content-text.hs-image-full-width-height-as-text:not(.has_inside),.content-text.hs-image-full-width-height-as-text>.inside,.content-text.hs-image-height-as-text:not(.has_inside),.content-text.hs-image-height-as-text>.inside{display:block}}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) figure,.content-text.hs-image-full-width-height-as-text>.inside figure,.content-text.hs-image-height-as-text:not(.has_inside) figure,.content-text.hs-image-height-as-text>.inside figure{position:absolute;width:50%;height:100%;left:0;float:none}
@media (max-width:767px){.content-text.hs-image-full-width-height-as-text:not(.has_inside) figure,.content-text.hs-image-full-width-height-as-text>.inside figure,.content-text.hs-image-height-as-text:not(.has_inside) figure,.content-text.hs-image-height-as-text>.inside figure{position:relative;width:100%;height:auto}}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) figure.float_right,.content-text.hs-image-full-width-height-as-text>.inside figure.float_right,.content-text.hs-image-height-as-text:not(.has_inside) figure.float_right,.content-text.hs-image-height-as-text>.inside figure.float_right{left:auto;right:0}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) figure img,.content-text.hs-image-full-width-height-as-text>.inside figure img,.content-text.hs-image-height-as-text:not(.has_inside) figure img,.content-text.hs-image-height-as-text>.inside figure img{width:100%;height:100%;object-fit:cover}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) .text,.content-text.hs-image-full-width-height-as-text>.inside .text,.content-text.hs-image-height-as-text:not(.has_inside) .text,.content-text.hs-image-height-as-text>.inside .text{width:var(--article_inside_width, 100%);max-width:100%;margin:auto;float:none}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) .text .inside,.content-text.hs-image-full-width-height-as-text>.inside .text .inside,.content-text.hs-image-height-as-text:not(.has_inside) .text .inside,.content-text.hs-image-height-as-text>.inside .text .inside{padding:var(--text_image_margin, 60px);padding-right:var(--document_content_margin);margin-left:50%}
@media (max-width:767px){.content-text.hs-image-full-width-height-as-text:not(.has_inside) .text .inside,.content-text.hs-image-full-width-height-as-text>.inside .text .inside,.content-text.hs-image-height-as-text:not(.has_inside) .text .inside,.content-text.hs-image-height-as-text>.inside .text .inside{margin-left:auto;padding:var(--article_space_top) var(--document_content_margin) var(--article_space_bottom) var(--document_content_margin)}}
.content-text.hs-image-full-width-height-as-text:not(.has_inside) .text.float_right_text .inside,.content-text.hs-image-full-width-height-as-text>.inside .text.float_right_text .inside,.content-text.hs-image-height-as-text:not(.has_inside) .text.float_right_text .inside,.content-text.hs-image-height-as-text>.inside .text.float_right_text .inside{padding:var(--text_image_margin, 60px);padding-left:var(--document_content_margin);margin-left:0;margin-right:50%}
@media (max-width:767px){.content-text.hs-image-full-width-height-as-text:not(.has_inside) .text.float_right_text .inside,.content-text.hs-image-full-width-height-as-text>.inside .text.float_right_text .inside,.content-text.hs-image-height-as-text:not(.has_inside) .text.float_right_text .inside,.content-text.hs-image-height-as-text>.inside .text.float_right_text .inside{margin-right:auto;padding:var(--article_space_top) var(--document_content_margin) var(--article_space_bottom) var(--document_content_margin)}}
.content-text.hs-image-height-as-text:not(.has_inside),.content-text.hs-image-height-as-text>.inside{width:var(--article_inside_width);max-width:100%}

/* — content-text-Basis: overflow + cc-margins-Generator-Schnittstelle
   (--margin-*-mobile sind nirgends definiert → invalid→0 = Bestand) — */
.content-text{overflow:visible}
@media (min-width:1024px){.content-text{margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}}
@media (max-width:1023px){.content-text{margin-top:var(--margin-top-mobile);margin-bottom:var(--margin-bottom-mobile)}}

/* — cc_text_in_center_of_image (np=14): Text vertikal mittig neben Bild — */
.content-text.hs-text-on-image{display:flex;justify-content:space-between;align-items:center}
@media (max-width:1023px){.content-text.hs-text-on-image{display:block}}
@media (max-width:1023px){.content-text.hs-text-on-image>*:first-child{margin-bottom:20px}}
.content-text.hs-text-on-image .text{flex-shrink:1}
.content-text.hs-text-on-image .text h1:first-child,.content-text.hs-text-on-image .text h2:first-child,.content-text.hs-text-on-image .text h3:first-child,.content-text.hs-text-on-image .text h4:first-child,.content-text.hs-text-on-image .text h5:first-child,.content-text.hs-text-on-image .text h6:first-child{margin-top:0}
.content-text.hs-text-on-image figure{flex-shrink:0;float:none !important} /* !important Bestand: gegen Float-Basis */
.content-text.hs-text-on-image figure.float_right{order:2}
@media (max-width:1023px){.content-text.hs-text-on-image figure{flex-shrink:0}}

/* — Clearfix + Listen (check.svg-Häkchen mit transition:var(--tr)) — */
.content-text:after{content:"";clear:both;display:block}
.content-text ul{margin:12px 0;overflow:hidden}
.content-text ul li{padding:4.5px 0px 4.5px 27px;text-align:left;list-style:none;position:relative;line-height:1.3}
.content-text ul li:before{position:absolute;background-image:url("/files/layout/img/icons/check.svg");background-size:15px;background-repeat:no-repeat;width:15px;height:15px;content:"";margin:0px -24px;transition:var(--tr)}
.content-text ul:first-child{margin-top:0}
.content-text ol{margin-left:30px}
.content-text ol li{list-style:decimal}

/* — Float-Margins 60px: Probe-belegte STILLE VERLIERER gegen die 20px-Regeln
   der Typo-Feinschicht unten (Reihenfolge!) — NICHT nach hinten ziehen — */
.content-text figure.float_left{margin-right:60px}
@media (max-width:1023px){.content-text figure.float_left{margin-right:0px}}
.content-text figure.float_right{margin-left:60px}
@media (max-width:1023px){.content-text figure.float_right{margin-left:0px}}

/* — Rahmen-/Trenner-Varianten (np=2: kostenlose-seo-backlinks DE/EN) — */
.content-text.hs-img-border img{border:1px solid var(--c-border)}
.content-text.hs-border-bottom{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--c-border)}

/* ═══════════ TYPO-FEINSCHICHT (heimseiten-stämmig — MUSS spät laden:
   gewinnt Reihenfolge-Duelle gegen text-image-positioning/live-design-Reste) ═══════════ */
figure.image_container.float_left { margin: 0 20px 12px 0; }
figure.image_container.float_right { margin: 0 0 12px 20px; }
@media (max-width: 1023px) {
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}
/* Fließtext-Abstände (rte) + Sonderfälle */
.mod_article .rte :is(h2, h3, h4, h5, h6) { margin-top: 1.3em; margin-bottom: 0.4em; }
.mod_article .rte > :first-child,
.mod_article .rte :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.mod_article > .content-text:only-child :is(h1, h2, h3, h4, h5, h6):only-child { margin-bottom: 0; }
.mod_article.hs-rechtstext :is(h2, h3) { margin-top: 34px; }
.mod_article.hs-rechtstext :is(h2, h3):first-child { margin-top: 0; }
/* Fließtext-Links: echte Unterlinie (Bild-/em-Links ausgenommen) */
.mod_article .rte :is(p, li) a:not(:has(img)):not(:has(em)) {
  text-decoration: underline from-font;
  text-underline-offset: 0.18em;
  border-radius: 3px;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  transition: background .15s ease-in-out, color .15s ease-in-out;
}
.mod_article .rte :is(p, li) a:not(:has(img)):not(:has(em)):hover,
.mod_article .rte :is(p, li) a:not(:has(img)):not(:has(em)):focus-visible {
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}

/* ═══════════ DARK: Text-Layer (Literale = Bestand; Grün bleibt unangetastet) ═══════════ */
html[data-theme="dark"] body { background: #161616; color: #cfcfcf; }
html[data-theme="dark"] :is(p, li, td, dd, dt, .rte, .content-text .text, figcaption, .info, .stars_and_date) { color: #cfcfcf; }
html[data-theme="dark"] :is(strong, b, .content-text h1) { color: #ececec; }
html[data-theme="dark"] :is(h4, h5, h6) { color: #e4e4e4; }
html[data-theme="dark"] :is(#container, .hs-footer-main, #header nav) a[target="_blank"]::after { filter: brightness(0) invert(1); }

/* ═══════════ LAYOUT-FEINSCHICHT (heimseiten-stämmig, spätgebunden) ═══════════ */
#main h1 { margin-bottom: 20px; }
/* FAQ-/Ausnahme-Artikel: Headline auf Innenbreite einrücken */
#article-973 .content-headline, #article-974 .content-headline, #article-986 .content-headline,
.mod_article.hs-faq .content-headline { padding-left: 20px; padding-right: 20px; }
@media (max-width: 1023px) {
  #article-973 .content-headline, #article-974 .content-headline, #article-986 .content-headline,
  .mod_article.hs-faq .content-headline { padding-left: 0; padding-right: 0; }

  /* Artikel-BGs mobil: immer Vollfläche, Parallax/Animation aus */
  .mod_article > .bg { display: block !important; width: 100% !important; max-width: 100% !important; }
  .mod_article > .bg .inside {
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
    animation: none !important;
    transform: none !important;
  }
  .mod_article > .bg picture { display: block; height: 100%; }
  .mod_article > .bg :is(video, img) { width: 100%; height: 100%; object-fit: cover; }

  /* Medien-Split-Feinschicht mobil */
  #wrapper .ivp.hs-fadein-left { left: 0 !important; }
  #wrapper .ivp.hs-fadein-right { right: 0 !important; }
  #wrapper :is(.hs-text-on-image, .text_in_center_of_image, .hs-image-height-as-text, .hs-image-full-width-height-as-text):not(.hs-icon-green) figure.float_left { margin-right: 0; }
  #wrapper :is(.hs-text-on-image, .text_in_center_of_image, .hs-image-height-as-text, .hs-image-full-width-height-as-text):not(.hs-icon-green) figure.float_right { margin-left: 0; }
  #wrapper .hs-icon-green figure.float_left { margin-right: 24px; }
  #wrapper .hs-icon-green figure.float_right { margin-left: 24px; }
}

/* — fb-Flex-Umbauten (heimseiten-stämmig, Stufe 13; Live-<style>-Reproduktionen,
   Original-Kommentare gekürzt — Messwerte im Stufen-Backup stufen/13c-heimseiten/).
   !importants = Bestand: gegen Grid-Framework + Artikel-Breiten-Klemmen. — */
/* Element-Gruppen-Überschrift spannt volle Breite ÜBER die Spalten (Nutzer 2026-07-16):
   In den fb-Flex-Gruppen wurde die Überschrift sonst als eigene Spalte zwischen die
   Inhalte gequetscht. !important schlägt die fb-Spaltenbreiten; zentriert wie ein
   Sektions-Header. */
/* .mod_article-Präfix nötig: schlägt die fb-Spaltenregel .content-element-group.fb-N > *
   (zwei Klassen) — sonst gewinnt deren margin:10px !important */
.mod_article .content-element-group > :is(h1, h2, h3, h4, h5, h6) {
  flex-basis: 100% !important; width: 100% !important;
  margin: 1.3em 0 12px !important;  /* Standard-Abstand oben, Luft zu den Spalten unten */
  text-align: center;
  /* Kein Karten-Look für Sektions-Überschriften: der fb-Generator (lädt NACH dem Theme)
     gibt allen Gruppen-Kindern Kasten+Rahmen+30px — für Überschriften neutralisieren
     (Nutzer 2026-07-16, Technologien-Seite) */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Überschrift überm Video-Hintergrund (Technologien): lesbar per Schatten statt Kasten */
.fb-3479 > :is(h1, h2, h3) { text-shadow: 0px 0px 4px black; }
/* Kachel-Texte im Dark Mode lesbar: Namens-Links/Spans blieben auf #444 hängen
   (dunkel auf dunkler Kachel; Nutzer 2026-07-16) */
html[data-theme="dark"] .fb-3479 > * :is(a, a strong, span) { color: #d8d8d8; }
/* Technologie-Kacheln überm Video (fb-3479): zentrierte Flexbox statt Spalten5-Grid */
@media (min-width: 1024px) {
  .fb-3479 { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0 !important; }
}
/* Updateservice-Boxen (fb-4272) */
@media (min-width: 1024px) {
  .fb-4272 { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0 !important; }
}
/* Zähler-Flexbox #Sicherheit (fb-4099): vertikale Live-Margins (Sektion sonst −80px) */
.fb-4099 { margin-top: 20px; margin-bottom: 40px; }
.fb-4099 > * { margin-top: 20px; }
/* Risiko-Umbauten 2026-07-07 (freigegeben): Grid→Flex, exakte Live-Reproduktion; nur ≥1024 */
@media (min-width: 1024px) {
  .content-element-group.fb-3784 {
    display: flex !important; flex-wrap: wrap; gap: 0 !important; padding: 0 !important;
    width: min(1004px, 100%) !important; margin-inline: auto !important;
    justify-content: center; align-items: center;
  }
  .content-element-group.fb-3784 > * { width: calc(33.33% - 20px) !important; margin: 10px !important; box-sizing: border-box; }
  .content-element-group.fb-4104 {
    display: flex !important; flex-wrap: wrap; gap: 0 !important; padding: 0 !important;
    width: min(1200px, 100%) !important; margin-inline: auto !important;
    margin-top: 40px; margin-bottom: 10px;
    justify-content: center; align-items: normal;
  }
  .content-element-group.fb-4104 > * { width: calc(33.33% - 40px) !important; margin: 0 20px 20px !important; box-sizing: border-box; }
  .content-element-group.fb-4089 {
    display: flex !important; flex-wrap: wrap; gap: 0 !important; padding: 0 !important;
    width: min(1024px, 100%) !important; margin-inline: auto !important;
    justify-content: center; align-items: normal;
  }
  .content-element-group.fb-4089 > * { width: calc(50% - 40px) !important; margin: 0 20px !important; box-sizing: border-box; }
  /* /ueber-mich: kurze Listenpunkte einzeilig (ragen unsichtbar ins Box-Padding) */
  .fb-3784 li { white-space: nowrap; }
}
/* fb-3761/3774: Kinder volle Breite (Live: childW leer, Kacheln füllen die Zeile) */
.fb-3761 > *, .fb-3774 > * { width: 100%; }
/* #article-756/-1070 (Contao-Logo + Titel, DE/EN): figure.float_above mb20 — bewusst eng
   gescopt. DE→EN-Sync-Lücke am 2026-07-15 geschlossen (UX-Runde, Niels-Freigabe):
   EN-Pendants hatten die drei Fixes NIE (Bestands-Drift gegen die harte Sync-Regel). */
#article-756 .content-text .image_container.float_above,
#article-1070 .content-text .image_container.float_above { margin-bottom: 20px; }
/* Über-mich (DE 815 / EN 1002) ist durchgehend zentriert — die eigenständigen
   Element-Überschriften folgen dem (Nutzer 2026-07-16). ID-Spezifität, kein !important nötig. */
#article-815 :is(h1, h2, h3, h4), #article-1002 :is(h1, h2, h3, h4) { text-align: center; }
/* #article-975/-998 (Startseite DE/EN): Listen-Endabstand kappen */
#article-975 .content-text :is(ul, p):last-child,
#article-998 .content-text :is(ul, p):last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  #article-975, #article-998 { padding-bottom: 0; }
}
/* /ueber-mich + /about-me mobil: Desktop-Paddings der Profil-Spalten kappen (122px-Lücken) */
@media (max-width: 1023px) {
  #article-815 .fb-3784 > :is(.content-text, .content-image),
  #article-1002 .fb-3784 > :is(.content-text, .content-image) {
    padding-top: 8px; padding-bottom: 8px;
    margin-top: 12px; margin-bottom: 12px;
  }
}
/* Mobil: große Desktop-Paddings der fb-Container reduzieren (Kacheln sonst ~62vw) */
@media (max-width: 600px) {
  [class^="fb-"], [class*=" fb-"] { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Preis-/Updateservice-/Technologie-Boxen (Artikel-direkte fb-Gruppen) */
@media (min-width: 1024px) {
  .mod_article > .fb-3479 { padding: 0; }
  .mod_article > .fb-3479 > * { width: calc(33.33% - 20px); margin: 10px; padding: 30px; background: var(--c-surface); }
  .mod_article > .fb-4272 { padding: 0 60px; }
  .mod_article > .fb-4272 > * { width: calc(33.33% - 40px); margin: 20px; padding: 30px 20px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 2px; }
}
@media (min-width: 1251px) and (max-width: 1550px) {
  .mod_article > .fb-3479 > * { width: calc(25% - 20px); }
}
@media (min-width: 1551px) {
  .mod_article > .fb-3479 > * { width: calc(20% - 40px); margin: 20px; padding: 30px 20px; background: rgb(255 255 255 / .9); }
}
/* Dark: Kacheln auf ALLEN Breiten dunkel-transluzent — die Weiss-Literal-Regel ab 1551px
   liess sonst hellen Dark-Text auf weisser Kachel stehen (Nutzer 2026-07-16, unlesbar) */
html[data-theme="dark"] .mod_article > .fb-3479 > * { background: rgb(28 28 28 / .92); }

/* (Stufe 08: die 4 defensiv transferierten ce_teaser-Alternierungs-Regeln entfernt —
   komplette ce_teaser_*-Familie ist belegt tot: 0 DOM-Treffer auf 48 Seiten, kein rsce-Template mehr) */

/* Artikel-BG-Parallax (view-timeline; Fallback via --scrolled_since_element in layout.css).
   REIHENFOLGE der drei Regeln = Bestand (ältere hs_parallax-Variante wird von der
   neueren hs-bg-parallax-Longhand überstimmt; Keyframes+view-timeline-QUELLEN seit
   Stufe 10 in der Effekte-Sektion am Datei-Ende) */
@supports (animation-timeline: view()) {
  .mod_article > .bg.parallax .inside {
    animation: hs_parallax linear both;
    animation-timeline: --hs-bg;
  }
  @media (prefers-reduced-motion: reduce) {
    .mod_article > .bg.parallax .inside { animation: none; }
  }
  .mod_article > .bg.parallax .inside {
    animation-name: hs-bg-parallax;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --hs-bg-parallax;
  }
}

/* Dark: Artikel-Flächen (alles dunkel, odd minimal heller, gray-Variante) */
html[data-theme="dark"] :is(.mod_article, .mod_article.hs-bg-white, .mod_article.hs-bg-gray, .mod_article:nth-child(even)) { background: #161616; }
html[data-theme="dark"] .mod_article:nth-child(odd) { background: #1b1b1b; }
html[data-theme="dark"] :is(.mod_article.hs-bg-gray, .ce_text.hs-bg-gray, .hs-bg-gray) { background: #1b1b1b; }
html[data-theme="dark"] .mod_article { border-color: var(--c-border); }

/* ════════════════════════════ FOOTER ════════════════════════════
   Grüner Verlauf; Dark = Flächen-Grün via lokalem Var-Redefine abgedunkelt
   (Technik aus PROJECT-MAP §3), Logos behalten bewusst weißen Grund. */

#footer {
  clear: both;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  background: linear-gradient(0deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
}
html[data-theme="dark"] #footer { --c-brand: #6b950f; --c-brand-dark: #547b00; }

/* — Hauptbereich — */
#footer .hs-footer-main {
  margin: auto;
  width: 1330px;
  max-width: 100%;
  overflow: visible;
  padding: 50px 20px 30px;
  z-index: 1;
  line-height: 1.6;
}
@media (max-width: 1023px) {
  #footer .hs-footer-main { padding: 50px 2.5% 30px; }
}

/* Überschriften + fette-kursiv-Auszeichnungen als Spaltentitel */
#footer .hs-footer-main :is(h1, h2, h3, .content-text strong em, .content-text em strong) {
  color: #fff;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
  display: block;
  font-style: normal;
  line-height: 1.6;
}
#footer .hs-footer-main :is(p, a, span) { color: #fff; }
#footer .hs-footer-main a:hover { color: #fff; }
#footer .hs-footer-main strong { font-weight: 600; }
#footer .hs-footer-main svg { fill: #fff; margin-bottom: -2px; }
#footer .hs-footer-main hr { border-top: 0; border-bottom: 1px solid var(--c-border); }
#footer .hs-footer-main nav a { display: block; }
/* Nav-Zustand „aktuelle Seite" im Footer */
#footer :is(strong.active, a.active, li.active > a) { color: #fff; }

/* Linklisten mit weißem Chevron */
#footer .hs-footer-main ul { margin: 12px 0; overflow: hidden; }
#footer .hs-footer-main ul:first-child { margin-top: 0; }
#footer .hs-footer-main ul li {
  padding: 4.5px 0 4.5px 27px;
  text-align: left;
  list-style: none;
  position: relative;
  line-height: 2;
  color: #fff;
}
#footer .hs-footer-main ul li a { line-height: 2; }
#footer .hs-footer-main ul li::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 17px;
  top: 9px;
  margin: 3px -24px 0;
  background: url("/files/layout/img/icons/chevron-right_white.svg") no-repeat;
  background-size: 8px;
  transition: var(--tr);
}
#footer .hs-footer-main ul li:hover::before { margin-left: -15px; }
@media (max-width: 1023px) {
  #footer .hs-footer-main ul li a { line-height: 4; }
  #footer .hs-footer-main ul li::before { top: 25px; }
  #footer ul.level_1 > li > :is(a, strong) { line-height: 2.2; }
  #footer ul.level_1 > li::before { top: 13px; }
}

/* Sprachwechsler unter den Social-Icons */
#footer .hs-footer-main .mod_changelanguage { margin-top: 14px; }
#footer .hs-footer-main .mod_changelanguage ul { list-style: none; margin: 0; padding: 0; }

/* Kreis-Buttons (Social-Icons) */
@media (min-width: 1024px) {
  #footer .content-element-group:has(> .ce_text_circle_button) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 !important; /* gegen Grid-Framework-gap (lädt in Autoren-Order danach) */
  }
  #footer .ce_text_circle_button { width: 40px; margin: 0 5px; }
}
@media (max-width: 1023px) {
  #footer div:has(> .ce_text_circle_button) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: nowrap;
  }
  #footer .ce_text_circle_button { width: auto; display: flow-root; margin: 0 !important; }
  #footer .ce_text_circle_button p { margin: 0; }
}

/* inviewport-Einfahrt der Footer-Elemente: nur Fade, kein Versatz (Perf-Fix 2026-07-13) */
#footer .ivp {
  transform: none !important;
  transition-delay: 0s !important;
  transition-duration: .4s !important;
}

/* Footer-Block ce_5153 (fb-3853): mobil untereinander */
@media (max-width: 1023px) {
  #footer .fb-3853 { flex-direction: column; }
  #footer .fb-3853 > div {
    flex-direction: column;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-inline: 5%;
    margin-left: 0;
  }
  #footer .fb-3853 :is(.rte, ul.level_1, .text) { text-align: left; }
}

/* — Partner-Logos: weiße Kachel bleibt AUCH im Dark (Logos brauchen hellen Grund) — */
@media (min-width: 1024px) {
  #footer .hs-logos {
    display: flex !important; /* gegen Grid-Framework-display der Element-Gruppe */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 !important;
    margin: 60px 0 30px;
  }
  #footer .hs-logos > * { width: auto; margin: 0; padding: 0; box-sizing: border-box; }
}
@media (max-width: 1023px) {
  #footer .hs-logos { gap: 16px !important; }
  #footer .hs-logos .ce_image { margin: 0; }
}
#footer .hs-logos { border-radius: 12px; }
#footer .hs-logos .ce_image {
  display: block;
  /* Logos fahren gemächlicher ein als der Rest (inviewport-Bundle-API) */
  --fade_duration: 2.5s;
  --move_duration: 2.5s;
}
#footer .hs-logos .ce_image a { display: block; font-size: 0; transition: transform 0.25s ease-in-out; }
#footer .hs-logos .ce_image a:hover { transform: translateZ(0) rotate(8deg); }
#footer .hs-logos .ce_image figure { margin: 0; line-height: 0; }
#footer .hs-logos .ce_image img {
  margin: auto;
  background: rgb(255 255 255 / .95); /* bewusst literal: weiße Kachel auch im Dark */
  padding: 3px;
  border-radius: 5px;
  height: 54px;
  width: auto;
}
/* (.gls-Sonderpadding 3px/6px war im Bestand TOT — von der späteren Sammel-Regel
   per Reihenfolge überschrieben. Nicht übernommen; Verify 2026-07-14 belegte +6px GLS-Breite.) */
/* Greenpeace-Logo ohne Kachel (Klasse + Positions-Fallback) */
#footer .hs-logos :is(.hs-greenpeace-energy, .ce_image:nth-child(3)) img {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* — Rückruf-Formular im Footer (weiße Halbtransparenz auf Grün, bewusst literal) — */
@media (max-width: 1023px) {
  #footer .hs-footer-main .widget { margin: 20px 0; }
}
#footer .hs-footer-main .widget label { color: #fff; padding: 9px 6px; height: auto; }
#footer .hs-footer-main .widget svg { transition: all 0.25s ease-in-out; }
#footer .hs-footer-main .widget.active label {
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 0;
  padding-bottom: 0;
}
#footer .hs-footer-main :is(.widget.active, .widget:hover) :is(label, .mandatory) { color: var(--c-text); }
#footer .hs-footer-main :is(.widget.active, .widget:hover) :is(label, .mandatory) svg { fill: #444; }
#footer .hs-footer-main .widget.active input { background-color: rgba(255, 255, 255, 0.8); }
#footer .ce_form .widget.widget-text input:is(:hover, :focus) { background: rgba(255, 255, 255, 0.8); }
#footer .hs-footer-main button.submit {
  background: rgba(221, 221, 221, 0.95);
  border: 1px solid var(--c-border);
  line-height: 1;
  border-radius: 2px;
  width: 100%;
  margin-top: 3px;
  font-size: 100%;
  text-align: left;
  padding: 9px 6px;
  height: auto;
}
#footer .hs-footer-main button.submit:hover { background: var(--c-surface); color: #fff; }
#footer .hs-footer-main button.submit:hover svg { fill: #fff; }
#footer .hs-footer-main button.submit svg { fill: var(--c-brand); transition: all 0.25s ease-in-out; }

/* Dark: Formular-Flächen im Footer transluzent-hell, Labels grünstichig hell */
html[data-theme="dark"] #footer :is(.inside, [class*="fb-"], [class*="fb-"] > *, .ce_form, .ce_form .widget, .customnav) {
  background: transparent;
}
html[data-theme="dark"] #footer :is(input, textarea) {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
html[data-theme="dark"] #footer form .widget label { background: transparent; color: #eefae6; }

/* — Copyright-Streifen — */
#footer .hs-footer-bottom {
  color: #fff;
  padding: 40px 0 35px;
  font-size: 12px;
  background-color: var(--c-brand-dark);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
#footer .hs-footer-bottom a { color: rgba(68, 68, 68, 0.8) !important; font-size: 10px; transition: var(--tr); }
#footer .hs-footer-bottom a:hover { color: #fff; }

/* — Gras-Kante über dem Footer —
   border:0 !important: übersteuert Artikel-Trennlinien (Autoren-Order, load-bearing) */
.mod_article:last-child {
  border: 0 !important;
  padding-bottom: 150px;
}
.mod_article:last-child::after {
  pointer-events: none;
  content: "";
  background-image: url("/files/layout/img/grass.png");
  background-repeat: repeat-x;
  background-size: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 8;
}
/* Dark: Footer-Grün ist abgedunkelt → Gras-Basis im selben Maß mitziehen (sonst Naht) */
html[data-theme="dark"] .mod_article:last-child::after { filter: brightness(0.86); }

/* ════════════════════════ FORMULARE — Feinschicht (heimseiten-stämmig, spät) ════════════════════════ */
/* Einheitlicher Feld-Radius; !important übersteuert Bundle-CSS + ältere Radius-Werte (Bestand) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
input[type="search"], input[type="password"], input[type="date"], input[type="time"],
input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"],
input:not([type]), textarea, select,
.ce_form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
form .widget input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
form .widget textarea, form .widget select { border-radius: var(--border_radius, 3px) !important; }
/* Textareas wachsen mit dem Inhalt */
textarea { field-sizing: content; min-height: 108px; max-height: 60vh; height: auto !important; }
/* Kontaktformular (Form 2): E-Mail + Telefon nebeneinander */
form[data-ajax-form="2"] .formbody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
form[data-ajax-form="2"] .formbody > * { grid-column: 1 / -1; margin-bottom: 0; }
form[data-ajax-form="2"] .formbody .widget.hs-col { grid-column: span 1; }
form[data-ajax-form="2"] .formbody input[type="hidden"] { display: none; }
@media (max-width: 640px) {
  form[data-ajax-form="2"] .formbody { grid-template-columns: 1fr; }
  form[data-ajax-form="2"] .formbody .widget.hs-col { grid-column: 1 / -1; }
}
/* Inline-Bestätigung nach Formular-Absenden (Stufe 13 aus heimseiten) — RENDERT ERST NACH
   SUBMIT (tl_form.confirmation der Formulare 2/3/21/22; livetext-„tot" = Artefakt!
   Nächtlicher Formular-Canary ist der Live-Prüfstein). Self-contained, Marken-Grün. */
.form-confirmation {
  background: #eef5e2;
  border: 1px solid #cfe3b0;
  border-left: 4px solid var(--c-brand);
  border-radius: 8px;
  padding: 22px 26px;
  margin: 16px 0;
}
.form-confirmation h2 { margin-top: 0; margin-bottom: 8px; color: #5a7a12; }
.form-confirmation p { margin: 0; }
/* Fehlertext (live-design-Herkunft; Validierungs-ZUSTAND — livetext-„tot" = Artefakt!).
   UX-Runde 2026-07-15: von `red` auf var(--c-error) vereinheitlicht (Niels-Freigabe #c0392b;
   Dark-Flip in tokens) */
.error { color: var(--c-error); font-weight: 600; }
/* Dark: Felder + schwebende Labels */
html[data-theme="dark"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select) { background: #232323; color: #e0e0e0; border-color: #3a3a3a; }
/* UX-Runde 2026-07-15 (Niels, Korrektur v2): kein dunkler Label-Kasten; weißer Text
   (erst #000 gewünscht, dann auf #fff geändert) */
html[data-theme="dark"] form .widget label { background: transparent; color: #fff; }
html[data-theme="dark"] form .widget.active label { background: #161616; color: #9bcc3a; }
html[data-theme="dark"] label { color: var(--c-text); }
/* Altcha-Feldlabel aus (Stufe 12 aus heimseiten transferiert — Altcha steckt in 7 Formularen,
   auch auf Seiten OHNE funnel.css [SEPA, Popups]; derzeit ohne Konsument: kein gerendertes
   Widget hat ein Label — defensiv behalten, Contao-Template kann es wieder rendern) */
.widget-altcha > label { display: none !important; }
/* Dark für .funnel-feld-DIV + Matomo-Opt-out (Datenschutz-Seiten laden KEIN funnel.css →
   gehört hierher; Selektor unverändert, Stufe 12) */
html[data-theme="dark"] :is(.funnel-feld, .ds-matomo-optout) { background: #232323; border-color: #3a3a3a; }
html[data-theme="dark"] .ds-matomo-optout, html[data-theme="dark"] .ds-matomo-optout span { color: var(--c-text); }

/* ════════════════════════ SOCIAL-KREIS-BUTTONS (ce_text_circle_button) ════════════════════════ */
.ce_text_circle_button { font-size: 0; }
.ce_text_circle_button a::before { background: transparent; }
.ce_text_circle_button a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--tr);
  transform: rotate(0.001deg);
  position: relative;
}
.ce_text_circle_button a:hover { transform: rotate(45deg); }
.ce_text_circle_button svg { fill: #fff; }
.ce_text_circle_button.hs-xing a { background: #006567; }
.ce_text_circle_button.hs-linkedin a { background: #0073b1; }
.ce_text_circle_button.hs-facebook a { background: #2d88ff; }
.ce_text_circle_button.hs-github a { background: #161b22; }
.ce_text_circle_button.hs-github a svg { height: 27px; margin-bottom: 0 !important; }
/* Marken-Icons als ::before (Inline-SVG ging bei Migration verloren — Map §3) */
.ce_text_circle_button:is(.hs-linkedin, .hs-xing, .hs-facebook, .hs-github) a::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background: center center / contain no-repeat;
}
.ce_text_circle_button.hs-linkedin a::before { background-image: url("/files/layout/img/social/linkedin.svg"); }
.ce_text_circle_button.hs-xing a::before { background-image: url("/files/layout/img/social/xing.svg"); }
.ce_text_circle_button.hs-facebook a::before { background-image: url("/files/layout/img/social/facebook.svg"); }
.ce_text_circle_button.hs-github a::before { background-image: url("/files/layout/img/social/github.svg"); }

/* ════════════════════════ DEKO: Rotierende Kreise (Über-mich) ════════════════════════ */
.hs-large-circles { text-align: center; margin: 90px auto 0; padding: 120px 0 100px !important; }
@media (max-width: 1023px) {
  .hs-large-circles { transform: scale(0.5); height: 225px; top: -17.5px; padding: 0 !important; }
}
.hs-large-circles > .inside {
  display: inline-block;
  padding: 0;
  width: auto;
  position: relative;
  animation: 20s linear infinite spin;
  transform-origin: center center;
}
.hs-large-circles > .inside .hs-circle {
  position: relative;
  border-top: 0.1em solid rgba(255, 255, 255, 0.1);
  height: 12.5em;
  width: 12.5em;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.5) 0 1em 2em;
}
.hs-large-circles > .inside .hs-circle.hs-circle-one { background: rgba(0, 0, 0, 0.65); margin-left: 90px; margin-top: -45px; }
.hs-large-circles > .inside .hs-circle.hs-circle-two { background: rgba(255, 255, 255, 0.85); margin-left: 0; margin-top: -60px; }
.hs-large-circles > .inside .hs-circle.hs-circle-two .inside .text { color: var(--c-text); }
.hs-large-circles > .inside .hs-circle.hs-circle-three { background: rgba(124, 171, 22, 0.85); margin-left: 160px; margin-top: -200px; }
.hs-large-circles > .inside .hs-circle .inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-variant: small-caps;
  font-weight: 500;
  font-size: 18px;
}
.hs-large-circles > .inside .hs-circle .inside .text { text-align: center; animation: 20s linear infinite rew; transform-origin: center center; }
@media (max-width: 1023px) {
  .hs-large-circles > .inside .hs-circle .inside .text { font-size: 25px; }
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes rew { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }

/* ════════════════════════ CONTAO-NUTZER-LOGOLISTE ════════════════════════ */
ul.hs-contao-nutzer { display: flex; flex-wrap: wrap; text-align: center; justify-content: center; align-items: center; }
ul.hs-contao-nutzer li { width: 25%; }
@media (max-width: 1023px) {
  ul.hs-contao-nutzer li { width: 50%; }
}
ul.hs-contao-nutzer li svg { height: 140px; width: 90px; }

/* Icon-Text-Kacheln ce_4009: mobil kompaktere Abstände */
@media (max-width: 1023px) {
  .fb-4009 > .content-text:not(.hs-icon-green) { padding-top: 8px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 12px; }
}

/* ════════════════════════ SCROLL-RANKE (plant-scroll) ════════════════════════
   Zarte Ranke links, wächst mit dem Scroll-Fortschritt. Inline-SVG als direktes
   body-Kind (Twig-Layout); scroll()-Timeline, Fallback = paused Animation an --scroll
   (theme.js). Weißer Halo-Pfad in BEIDEN Modi aus (CSS-stroke schlägt Inline-Attribut). */
.hs-plant-scroll {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 46px;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
  opacity: .6;
}
.hs-plant-scroll path {
  stroke-dashoffset: 1089;
  animation: plant-grow 1s linear;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll, 0) * -1s);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}
@supports (animation-timeline: scroll()) {
  .hs-plant-scroll path {
    animation-duration: auto;
    animation-delay: 0s;
    animation-play-state: running;
    animation-timeline: scroll();
  }
}
@keyframes plant-grow {
  to { stroke-dashoffset: 0; } /* voll gezeichnet bei Scroll-Ende (Triebspitze unten) */
}
.hs-plant-scroll .hs-plant-halo { stroke: transparent; }
@media (max-width: 1360px) {
  .hs-plant-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-plant-scroll path { animation: none !important; stroke-dashoffset: 0; }
}

/* ════════════════════════ DARK-MODE-TOGGLE (schwebend) ════════════════════════ */
#hs-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--c-brand);
  background: var(--c-surface);
  color: var(--c-brand);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
#hs-theme-toggle:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
}
#hs-theme-toggle:active { transform: scale(0.96); }
html[data-theme="dark"] #hs-theme-toggle { background: #232323; border-color: var(--c-brand); color: var(--c-brand-bright); }
/* Dark-Hover braucht eigene Regel — sonst überstimmt die Dark-Basis (höhere Spezifität) den Hover */
html[data-theme="dark"] #hs-theme-toggle:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .5);
}

/* ════════════════════════ ESELSOHREN-KARTEN (.hs-corners) ════════════════════════ */
.hs-corners {
  overflow: visible;
  padding: 50px 60px !important; /* gegen Artikel-/cc-Padding (Autoren-Order, load-bearing) */
  background: var(--c-surface);
  height: auto;
  margin: 50px auto;
  max-width: 100%;
  width: 1024px;
  position: relative;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
}
.hs-corners::before,
.hs-corners::after {
  background: var(--c-surface-2);
  content: "";
  height: 50px;
  position: absolute;
  top: -25px;
  width: 100px;
  box-shadow: 0 5px 10px -7px rgba(0, 0, 0, 0.5);
}
.hs-corners::after { left: -50px; transform: rotate(-45deg); }
.hs-corners::before { right: -50px; transform: rotate(45deg); }

/* ════════════════════════ TEASER-KARTEN + KACHEL-GRIDS (heimseiten-stämmig, spät) ════════════════════════
   Markup: .hs-teaser-grid = content-element-group (Klassen: hs-teaser-grid Spalten3 RasterabstandM
   content-element-group ivp) mit .content-hyperlink-Kindern (h2/h3 + <figure ohne Klasse> > a > picture).
   Desktop: Karte selbst transparent, „Kasten" = ::before (inset 30px, Surface+Border);
   Mobil (≤1023): ::before aus, Kasten direkt am Element. Dark = reiner Token-Flip, KEINE Overrides.
   Reihenfolge = Herkunfts-Reihenfolge heimseiten.css (load-bearing: gap-0/-20-Duell, Basis→Mobil-Duell). */

/* — Grid-Gerüst (Frühblock heimseiten) — */
@media (max-width: 1023px) {
  .hs-teaser-grid .content-hyperlink { align-items: center; }
  .hs-teaser-grid .content-hyperlink figure { align-self: stretch; }
}
.hs-teaser-grid .content-hyperlink { text-align: center; }
.hs-teaser-grid .content-hyperlink figure, .hs-teaser-grid .content-hyperlink img { margin: 0; display: block; }
.mod_article > .hs-teaser-grid { width: 100%; }
/* !important: Element trägt RasterabstandM → Framework-gap mit (0,2,0) schlägt sonst (0,1,0);
   mobile Gegenregel (gap:20px !important) steht WEITER UNTEN im Mobilblock — Reihenfolge load-bearing */
.hs-teaser-grid { gap: 0 !important; }
@media (min-width: 1024px) {
  /* display:flex !important = Bestand: übersteuert Framework-display:grid unabhängig von Spezifität */
  .hs-teaser-grid.Spalten3 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hs-teaser-grid.Spalten3 > * { width: calc(100% / 3); }
}

/* — Teaser-Karte Desktop — */
.hs-teaser-grid .content-hyperlink {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 0;
  background: transparent; /* Karte selbst transparent — Light UND Dark (PROJECT-MAP) */
  overflow: visible;
  padding: 30px 30px 50px;
  transition: transform .25s ease-in-out;
}
/* „Kasten" als eingerückte Fläche hinter der Karte */
.hs-teaser-grid .content-hyperlink::before {
  content: "";
  position: absolute;
  inset: 30px;
  z-index: 0;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--border_radius, 3px);
}
.mod_article.hs-bg-white .hs-teaser-grid .content-hyperlink::before { background: var(--c-surface-2); }
.hs-teaser-grid .content-hyperlink:hover { transform: translateZ(0) scale(1.02); }
.hs-teaser-grid .content-hyperlink > figure { order: 1; margin: 0; }
.hs-teaser-grid .content-hyperlink figure a {
  margin: 0;
  display: block;
  position: static;
  border-radius: var(--border_radius, 3px) var(--border_radius, 3px) 0 0;
  overflow: hidden;
}
/* Ganze Karte klickbar: Overlay über der position:relative-Karte */
.hs-teaser-grid .content-hyperlink figure a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Link-Unterstreich-Animation (a::before aus base.css) auf Kastenbreite einkürzen */
.hs-teaser-grid .content-hyperlink figure a::before {
  left: calc(30px + var(--border_radius, 3px));
  right: calc(30px + var(--border_radius, 3px));
  width: auto;
  bottom: 30px;
}
/* JS-GEKOPPELT (theme.js Z. 185): .hs-hoverfix wird NACH der ivp-Einblendung gesetzt,
   damit der Hover-Scale nicht Dauer+Delay des inviewport-Bundles erbt. Statisch nie im DOM
   (livetext npages=0) — NICHT tot! Bundle lädt vor allen Layout-Dateien → gewinnt hier per Ordnung. */
.hs-teaser-grid .content-hyperlink.hs-hoverfix { transition: transform .25s ease-in-out; }
.hs-teaser-grid .content-hyperlink img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.hs-teaser-grid .content-hyperlink > h2,
.hs-teaser-grid .content-hyperlink > h3 {
  order: 2;
  margin: 30px 0 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color_1, var(--c-brand));
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* — Kacheln (.hs-kacheln) — */
.hs-kacheln {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-block: 20px;
}
.hs-kacheln > * {
  flex: 1 1 0;
  min-width: min(280px, 100%);
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  padding: 30px;
  background: var(--c-surface-2);
  box-sizing: border-box;
}
/* Redaktions-Toggle (PROJECT-MAP §3); aktuell auf keiner Seite gray+hs-kacheln kombiniert (npages=0) */
.mod_article.hs-bg-gray .hs-kacheln > * { background: var(--c-surface); }
.hs-kacheln .content-text :is(p, ul):last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .hs-kacheln { flex-direction: column; }
  .hs-kacheln > * { min-width: 0; }
}

/* — Karten (.hs-cards) — */
.hs-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.hs-cards > * {
  width: calc(33.33% - 14px);
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-surface);
  padding: 25px 20px;
}
.mod_article.hs-bg-white .hs-cards > * { background: var(--c-surface-2); }
.hs-cards .rte > p:first-child, .hs-cards p:first-child { margin-top: 0; }
/* Schritt-Variante (nummerierte Kreise) — Autoren-Variante, derzeit auf keiner Seite (npages=0) */
.hs-cards--steps { counter-reset: hs-step; }
.hs-cards--steps > * { counter-increment: hs-step; text-align: center; }
.hs-cards--steps > *::before {
  content: counter(hs-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color_1, var(--c-brand));
  color: #fff; /* bewusst literal: weiße Ziffer auf Brand-Grün in beiden Modi */
  font-weight: 600;
}
/* --primary_color kommt noch aus live-design:root (= var(--c-brand)); Fallback trägt nach Ablösung */
.hs-cards i.svg { display: block; width: 60px; margin: 0 auto 15px; color: var(--primary_color, var(--c-brand)); }
.hs-cards i.svg svg { display: block; width: 100%; height: auto; fill: currentColor; }
.hs-cards i.svg + br { display: none; }
.hs-cards p > strong:first-child { display: block; text-align: center; }
.hs-cards p > strong:first-child + br { display: none; }
/* ivp-Staffelung (Bundle-API); 4–6 = Headroom, derzeit max. 3 Karten je Seite */
.hs-cards > :nth-child(2) { --ivp_animation_delay: .2s; }
.hs-cards > :nth-child(3) { --ivp_animation_delay: .4s; }
.hs-cards > :nth-child(4) { --ivp_animation_delay: .6s; }
.hs-cards > :nth-child(5) { --ivp_animation_delay: .8s; }
.hs-cards > :nth-child(6) { --ivp_animation_delay: 1s; }
.hs-cards + * { margin-top: 30px; }
@media (max-width: 1023px) {
  .hs-cards > * { width: 100%; max-width: 420px; }
}

/* — ivp-Staffelung Teaser-Grid — */
.hs-teaser-grid > :nth-child(2) { --ivp_animation_delay: .2s; }
.hs-teaser-grid > :nth-child(3) { --ivp_animation_delay: .4s; }
.hs-teaser-grid > :nth-child(4) { --ivp_animation_delay: .6s; }
.hs-teaser-grid > :nth-child(5) { --ivp_animation_delay: .8s; }
.hs-teaser-grid > :nth-child(6) { --ivp_animation_delay: 1s; }

/* — Teaser mobil ≤1023: 2-Spalten-Grid, Kasten direkt am Element —
   MUSS nach der Desktop-Basis stehen (gleiche Spezifität: padding/border/background/gap-Duelle) */
@media (max-width: 1023px) {
  /* !important ×2: gegen Framework-grid-template (961–1023px) und Framework-Mobilblock
     (1fr + gap:20px, ≤960px) sowie die eigene gap-0-!important-Regel oben (Reihenfolge!) */
  .hs-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  .mod_article > .hs-teaser-grid { width: auto; }
  /* !important: gegen später ladende Generator-Schichten (cc-margins) + Framework-Kindbreiten */
  .hs-teaser-grid > .content-hyperlink { margin: 0 !important; width: auto !important; }
  .hs-teaser-grid .content-hyperlink {
    padding: 0 0 20px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: var(--border_radius, 3px);
  }
  .mod_article.hs-bg-white .hs-teaser-grid .content-hyperlink { background: var(--c-surface-2); }
  .hs-teaser-grid .content-hyperlink::before { content: none; }
  .hs-teaser-grid .content-hyperlink figure a::before { content: none; }
  .hs-teaser-grid .content-hyperlink > h2,
  .hs-teaser-grid .content-hyperlink > h3 { margin: 30px 0 10px; }
  .hs-teaser-grid .content-hyperlink figure,
  .hs-teaser-grid .content-hyperlink picture { width: 100%; }
  .hs-teaser-grid .content-hyperlink figure img { width: 100%; height: auto; }
}

/* — Spalten3-Teaser-Grid zentriert auf 1120px (stand im Bestand NACH dem Mobilblock) —
   !important = Bestand: sichert gegen Breiten-/Margin-Schichten (Framework, Breite*-Klassen, Generatoren) */
.mod_article .hs-teaser-grid.Spalten3 {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* — DARK: bewusst KEINE Overrides. Karten-/Kachel-Flächen hängen komplett an
   --c-surface/--c-surface-2/--c-border (Token-Flip in tokens.css); Karte im Home-Grid
   bleibt in beiden Modi transparent (PROJECT-MAP). — */

/* ════════════════════════ TESTIMONIALS / KUNDENSTIMMEN / CUBE / NEWSLIST ════════════════════════
   Newslist wird sitewide NUR für Kundenstimmen genutzt (news_full_kundenstimmen.html5:
   .layout_full > .title[h3.name+span.url] + .stars_and_date[.stars+p.info>time] + ce_text).
   Karten = .mod_newslist > div.layout_full (Contao rendert die Items als direkte div-Kinder,
   nav.pagination ist letztes Kind). .mod_eventlist-Selektorteile bleiben unverändert mit
   (Selektor-Treue; Klasse sitewide unbenutzt → P5/P6-Kandidat).
   Swiper-Bundle-CSS UNANTASTBAR — alle Overrides hier rein spezifitätsbasiert gegen
   Bundle, kein !important nötig. Herkunft: live-design (mittig+spät) + heimseiten (spät). */

/* — Newslist/Eventlist-Basis (live-design, mittig) — */
.mod_newslist:not(.flexbox_news)>div,.mod_eventlist>div {
  padding: 50px 0; /* verliert gewollt gegen .layout_full-!important unten */
  border-top: 1px solid #fff; /* Light unsichtbar (weiß auf Karte/Seite); Dark-Fix am Sektionsende */
  border-bottom: 1px solid var(--c-border);
  transition: all 0.5s ease-in-out;
}
.mod_newslist:not(.flexbox_news)>div:first-child,.mod_eventlist>div:first-child {
  padding-top: 0;
  border-top: none;
}
/* :last-child aktuell ohne Treffer (nav.pagination ist letztes Kind) — DEFENSIV behalten:
   fällt die Pagination (< 2 Seiten Reviews), würde sonst die letzte Karte eine Kante bekommen. */
.mod_newslist:not(.flexbox_news)>div:last-child,.mod_eventlist>div:last-child {
  border-bottom: none;
}
.mod_newslist:not(.flexbox_news)>div p.info,.mod_newslist:not(.flexbox_news)>div p.time,.mod_eventlist>div p.info,.mod_eventlist>div p.time {
  text-transform: uppercase;
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0.075em;
  font-size: 15px;
  position: relative;
}
@media (max-width:1023px) {
  .mod_newslist:not(.flexbox_news)>div p.info,.mod_newslist:not(.flexbox_news)>div p.time,.mod_eventlist>div p.info,.mod_eventlist>div p.time {
    display: block;
    letter-spacing: 0;
  }
}

/* — Testimonial-Karten (live-design, spät) — */
.mod_newslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.mod_newslist nav.pagination {
  width: 100%;
}
.mod_newslist .layout_full {
  overflow: visible;
  /* !important NÖTIG komponentenintern: die Basis-Regel oben (.mod_newslist:not(.flexbox_news)>div,
     Spezifität 0,2,1) schlägt (0,2,0) und würde sonst padding:50px 0 erzwingen — Bestand. */
  padding: 50px 60px !important;
  background: var(--c-surface);
  height: auto;
  margin: 50px auto;
  max-width: 100%;
  width: calc(50% - 130px);
  position: relative;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
}
@media (max-width:1023px) {
  .mod_newslist .layout_full {
    padding: 20px 10px !important; /* !important: s. o. (Basis-Regel 0,2,1); Bestand zusammengeführt */
    margin: 30px auto;
    width: 100%;
  }
}
.mod_newslist .layout_full:nth-child(even) {
  margin-left: 70px;
  margin-right: 60px;
}
.mod_newslist .layout_full:nth-child(odd) {
  margin-right: 70px;
  margin-left: 60px;
}
@media (max-width:1023px) {
  .mod_newslist .layout_full:nth-child(even),.mod_newslist .layout_full:nth-child(odd) {
    margin-right: 20px;
    margin-left: 20px;
  }
}
.mod_newslist .layout_full .title {
  display: flex;
  justify-content: space-between;
  color: var(--c-brand);
}
@media (max-width:1023px) {
  .mod_newslist .layout_full .title {
    display: block;
  }
}
.mod_newslist .layout_full .title .name,.mod_newslist .layout_full .title .url {
  font-size: 15px;
}
.mod_newslist .layout_full .title .name {
  display: block;
  text-align: left;
  padding-right: 10px;
}
.mod_newslist .layout_full .title .url {
  display: block;
  text-align: right;
}
/* Reviewername ist ein h3 — heimseiten-Feinschicht neutralisiert die base-h3-Typo
   (disjunkte Properties zu den .title-Regeln oben, gewinnt gegen base.css-h3 per Spezifität) */
.mod_newslist .layout_full .title .name {
  margin: 0;
  font-weight: 400;
  line-height: inherit;
}
.mod_newslist .layout_full .stars_and_date {
  display: flex;
  justify-content: space-between;
  color: #f0ca4d; /* Sterne-Gold, bewusst modus-unabhängig (schlägt Dark-Text-Layer per Spezifität) */
  margin-bottom: 10px;
}
.mod_newslist .layout_full .stars_and_date p.info {
  text-transform: none;
  font-size: var(--font_size); /* bis zur Ablösung aus live-design-:root (16px); tokens.css hält identisch 16px */
  letter-spacing: 0;
}
.mod_newslist .layout_full .content-text {
  text-align: justify;
}
@media (max-width:1023px) {
  .mod_newslist .layout_full .content-text {
    text-align: left;
  }
}
/* Eselsohren */
.mod_newslist .layout_full:after,.mod_newslist .layout_full:before {
  background: var(--c-surface-2);
  content: "";
  height: 50px;
  position: absolute;
  top: -25px;
  width: 100px;
  box-shadow: 0 5px 10px -7px rgba(0, 0, 0, 0.5);
}
.mod_newslist .layout_full:after {
  left: -50px;
  transform: rotate(-45deg);
}
.mod_newslist .layout_full:before {
  right: -50px;
  transform: rotate(45deg);
}
.mod_newslist .layout_full picture {
  float: left;
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom: 1px;
  border-radius: 5px;
  overflow: hidden;
}
.mod_newslist time,.mod_newslist .url {
  font-size: 15px; /* wirkt effektiv auf <time> im p.info (überschreibt geerbte 16px) */
}

/* — Würfel (heimseiten, spät) — Markup: .hs-cube-container.Spalten4.RasterabstandL > .hs-cube > .content-image/.content-text — */
.mod_article:has(.hs-cube-container) {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 60px;
}
.hs-cube-container {
  /* !important (display/gap/width) NÖTIG: kämpft gegen das ungelayerte Import-Grid-Framework
     (unantastbar): .Spalten2–6{display:grid;gap:…} bzw. .SpaltenN.RasterabstandL{gap:…} —
     würden .hs-cube-container per Reihenfolge/Spezifität schlagen. */
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 50px !important;
  width: min(1110px, 100%) !important;
  max-width: 100%;
  margin-inline: auto;
  padding: 25px 0;
}
.hs-cube {
  position: relative;
  flex: 0 0 228px;
  width: 228px;
  height: 220px;
  max-width: 100%;
  --cube-depth: 114px;
  perspective: 684px;
}
.hs-cube > :first-child, .hs-cube > :last-child {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: transform .8s ease-in-out;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 22px;
  box-sizing: border-box;
  background: var(--c-surface);
  backface-visibility: hidden;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.hs-cube > :first-child {
  transform: translateZ(calc(-1 * var(--cube-depth))) rotateY(0deg) translateZ(var(--cube-depth));
}
.hs-cube > :last-child {
  transform: translateZ(calc(-1 * var(--cube-depth))) rotateY(90deg) translateZ(var(--cube-depth));
}
.hs-cube:hover > :first-child, .hs-cube:focus-within > :first-child {
  transform: translateZ(calc(-1 * var(--cube-depth))) rotateY(-90deg) translateZ(var(--cube-depth));
}
.hs-cube:hover > :last-child, .hs-cube:focus-within > :last-child {
  transform: translateZ(calc(-1 * var(--cube-depth))) rotateY(0deg) translateZ(var(--cube-depth));
}
.hs-cube > :first-child img {
  max-width: 84px;
  max-height: 84px;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
  filter: invert(0.6) sepia(0.45) saturate(31.98) hue-rotate(42deg) brightness(0.99) contrast(0.83);
}
.hs-cube > :first-child figcaption {
  font-weight: 600;
  color: var(--c-text-strong);
  font-size: 15px;
  text-align: center;
}
@media (max-width:1023px) {
  .hs-cube-container {
    --wuerfel-gap: 24px;
    --wuerfel-breite: min(170px, calc(50vw - var(--wuerfel-gap)));
    gap: var(--wuerfel-gap) !important;   /* !important: s. Framework-Begründung oben */
    width: 100% !important;               /* dito */
    padding-inline: calc(var(--wuerfel-gap) / 2);
    box-sizing: border-box;
  }
  .hs-cube-container > * {
    width: var(--wuerfel-breite) !important; /* dito (Framework-Zellbreiten) */
  }
  .hs-cube {
    flex-basis: auto;
    height: auto;
    aspect-ratio: 1;
    font-size: 13px;
    --cube-depth: calc(var(--wuerfel-breite) / 2);
    perspective: calc(var(--wuerfel-breite) * 3);
  }
  .hs-cube > :first-child img {
    max-width: 56px;
    max-height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* coverage-„tot" ist Media-Artefakt (Headless emuliert reduced-motion nicht) — MUSS bleiben */
  .hs-cube > :first-child, .hs-cube > :last-child {
    transition: none;
  }
}

/* — Kunden-Slider (heimseiten, spät) — Startseite, .mod_article.hs-kundenmeinungen — */
.hs-kundenmeinungen :is(.ce_sliderStart, .content-custom-swiper) {
  position: relative;
}
.hs-kundenmeinungen .content-custom-swiper .content-text {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  padding: 50px 70px 70px 70px;
  border-radius: 10px;
}
@media (max-width: 1023px) {
  .hs-kundenmeinungen .content-custom-swiper .content-text {
    padding: 50px 30px 70px 30px;
    min-height: 470px;
  }
}
.hs-kundenmeinungen .content-custom-swiper .content-text strong {
  color: var(--c-brand);
  font-size: 24px;
  font-weight: 300;
}
.hs-kundenmeinungen .content-custom-swiper .content-text img {
  border-radius: 50%;
  margin-bottom: 20px;
  filter: grayscale(1);
}
/* Swiper-Buttons: Overrides gegen Bundle rein per Spezifität — Bundle bleibt unangetastet */
.hs-kundenmeinungen .content-custom-swiper :is(.swiper-button-prev, .swiper-button-next) {
  width: 120px;
  height: 120px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: transparent center / 30px no-repeat;
  border: 0;
  cursor: pointer;
  transform-origin: top center;
  transition: transform .25s ease-in-out;
}
.hs-kundenmeinungen .content-custom-swiper :is(.swiper-button-prev, .swiper-button-next)::after {
  content: none; /* Bundle-Pfeilglyphe aus */
}
.hs-kundenmeinungen .content-custom-swiper .swiper-button-prev {
  left: 0;
  background-image: url('/files/layout/img/icons/arrow_left_green.svg');
}
.hs-kundenmeinungen .content-custom-swiper .swiper-button-next {
  right: 0;
  background-image: url('/files/layout/img/icons/arrow_right_green.svg');
}
.hs-kundenmeinungen .content-custom-swiper :is(.swiper-button-prev, .swiper-button-next):hover {
  transform: scale(1.2) translateY(-50%);
}
@media (max-width: 1023px) {
  .hs-kundenmeinungen .content-custom-swiper :is(.swiper-button-prev, .swiper-button-next) {
    top: 116px;
    transform: none;
  }
  .hs-kundenmeinungen .content-custom-swiper :is(.swiper-button-prev, .swiper-button-next):hover {
    transform: scale(1.2);
  }
}
.hs-kundenmeinungen .content-custom-swiper .swiper-pagination {
  bottom: 43px;
}
.hs-kundenmeinungen .content-custom-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  padding: 0;
  box-sizing: border-box;
  background: rgba(221, 221, 221, 0.5);
  border: 1px solid rgba(153, 153, 153, 0.5);
  border-radius: 50%;
  opacity: 1;
  transition: background .25s ease-in-out;
}
.hs-kundenmeinungen .content-custom-swiper .swiper-pagination-bullet:hover,
.hs-kundenmeinungen .content-custom-swiper .swiper-pagination-bullet-active {
  background: rgba(153, 153, 153, 0.5);
}
.hs-kundenmeinungen .content-custom-swiper .swiper-progress {
  border-radius: 0 0 10px 10px;
}

/* — DARK (Sektionsende; alle drei spezifitäts-dominant über ihre Light-Pendants) — */
/* Würfel + Kunden-Slider weiße Flächen dunkel (Literal #232323 = Dark-Wert von --c-surface, Bestand) */
html[data-theme="dark"] :is(.hs-cube, .hs-cube-container) :is(.content-image, .content-text, figure) {
  background: #232323;
}
html[data-theme="dark"] .hs-kundenmeinungen :is(.content-text, .hs-center, .swiper-slide, figure) {
  background: #232323;
}
/* Karten-border-top war weiß (Light unsichtbar, Dark helle Kante) → subtiles --c-border (Bestand-Fix) */
html[data-theme="dark"] .mod_newslist:not(.flexbox_news) > div,
html[data-theme="dark"] .mod_eventlist > div {
  border-top-color: var(--c-border);
}

/* ════════════════════════ FAQ-AKKORDEON (handorgel; heimseiten-stämmig, spät) ════════════════════════
   Contao-Core-CE „accordion" (10 CEs / 10 Seiten): Bundle-CSS /assets/handorgel/css/handorgel.min.css
   lädt FRÜH (TL_CSS, ungelayert) und ist UNANTASTBAR. Duell-Lage verifiziert:
   – einziges echtes Reihenfolge-Duell: .content-accordion (0,1,0) vs. Bundle „border-bottom:1px solid #eee"
     (0,1,0) → diese Datei lädt später als das Bundle, Ausgang wie Bestand (Theme-border gewinnt).
   – alle übrigen Regeln schlagen das Bundle per Spezifität (≥ 0,2,0), reihenfolge-unabhängig.
   – BEWUSST KEIN Override: .handorgel__content-Fläche bleibt in Light Bundle-#f6f6f6,
     __inner behält Bundle-Padding 20px 24px (0-Pixel-Gebot — nichts „nachziehen").
   – .handorgel-Klasse setzt erst das JS auf den Wrapper (statisches Markup: div.content-accordion.ivp;
     erstes Panel data-open). FAQPage-JSON-LD baut FaqSchemaListener.php aus dem DOM (kein CSS-Bezug). */
.content-accordion { border: 1px solid var(--c-border); border-radius: 2px; background: var(--c-surface); }
.content-accordion .handorgel__header { margin: 0; }
.content-accordion .handorgel__header + .handorgel__content,
.content-accordion .handorgel__header:not(:first-child) { border-top: 1px solid var(--c-border); }
.content-accordion .handorgel__header__button {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  width: 100%; padding: 14px 20px; background: var(--c-surface); border: 0; cursor: pointer;
  font: inherit; font-weight: 500; text-align: left;
  color: rgb(85 85 85); /* Wert-Treue: Literal beibehalten, NICHT auf var(--c-text) ziehen */
  transition: color .25s ease-in-out;
}
.content-accordion .handorgel__header__button::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  background: url('/files/layout/plugins/fontawesome-pro/svgs/light/chevron-down.svg') center / 14px no-repeat;
  transition: transform .25s ease-in-out;
}
/* --color_1: heute aus settings.css (#7cab16) bzw. tokens.css (var(--c-brand), lädt später) —
   Fallback-Kette EXAKT beibehalten, überlebt die settings-Ablösung */
.content-accordion .handorgel__header__button:hover { color: var(--color_1, var(--c-brand)); }
.content-accordion .handorgel__header--open .handorgel__header__button { color: var(--color_1, var(--c-brand)); }
.content-accordion .handorgel__header--open .handorgel__header__button::after { transform: rotate(180deg); }
.content-accordion .handorgel__content__inner .content-text { padding: 2px 20px 14px; }
/* handorgel vergibt --opened (Opacity-Fade) NUR per transitionend — beim initialen data-open
   feuert keine Transition → Inhalt der vorgeöffneten Frage blieb unsichtbar (Befund /preise
   2026-07-09). Fix: Inhalt immer deckend, nur die Höhen-Animation behalten. */
.content-accordion .handorgel__content__inner { opacity: 1 !important; } /* !important: gegen Bundle-Inline-Fade nötig (Bestand) */
/* Letzter geöffneter Inhalt: Luft zur Kasten-Unterkante („klebt am Rand", User 2026-07-09).
   Core-transition `height .2s` MUSS im Shorthand mit aufgeführt bleiben, sonst stirbt die
   Höhen-Animation. --open bleibt beim Zuklappen bis transitionend → fährt weich mit raus.
   (Zustandsregel: greift erst bei Klick aufs LETZTE Panel — livetext npages=0 ist KEIN Tot-Beleg!) */
.content-accordion .handorgel__content:last-child { transition: height .2s, margin-bottom .2s; }
.content-accordion .handorgel__content--open:last-child { margin-bottom: 14px; }
/* Kachel-Invertierung (User-Regel 2026-07-09): auf WEISSEN Artikeln graue Akkordeon-Kachel */
.mod_article.hs-bg-white .content-accordion { background: var(--c-surface-2); }
.mod_article.hs-bg-white .content-accordion .handorgel__header__button { background: transparent; }
.content-accordion + .hs-cta { margin-top: 30px; }
/* Neu eingefügte Content-Sektionen: gefloatete Vorgänger clearen (2026-07-13).
   ⚠ Gruppen-Regel: hs-keyword-tools + hs-related-links reisen mit (remove-rules-Teilmatch-Schutz);
   die Solo-Regel darunter hat IDENTISCHEN Selektortext wie der Gruppenteil → muss mit umziehen. */
.mod_article .hs-keyword-tools, .mod_article .hs-faq-updateservice, .mod_article .hs-related-links { clear: both; }
.mod_article .hs-keyword-tools { margin-top: 1.5em; }
/* — Dark (ans Sektions-Ende): Flächen-Basis ist teils Bundle-LITERAL (#fff/#f6f6f6), daher
   Override; ohne !important (Spezifität genügt). ⚠ REIHENFOLGE load-bearing: (0,2,1)-TIE mit
   der :hover-Regel oben — Dark NACH Hover ⇒ im Dark-Mode gewinnt #d0d0d0 über Hover-Grün
   (= Bestand!); das --open-Grün überlebt per Spezifität (0,3,0). — */
html[data-theme="dark"] :is(.handorgel__header__button, .handorgel__content) { background: #232323; color: #d0d0d0; }
html[data-theme="dark"] .handorgel, html[data-theme="dark"] .handorgel__header { border-color: #3a3a3a; }
/* UX-Runde 2026-07-15: Akkordeon-Chevron (schwarzes SVG-Bild) im Dark sichtbar machen */
html[data-theme="dark"] .content-accordion .handorgel__header__button::after { filter: invert(1); }

/* ═══════════════ REFERENZEN / PORTFOLIO-GALERIE / FILTER (Stufe 09) ═══════════════
   Seiten: /webdesign-referenzen + /en/web-design-portfolio (68 Referenz-Artikel
   .mod_article.hs-referenzen[.kat-*]) + Case-Study colognecamper (DE/EN).
   Filter-UI+Mechanik = Inline-HTML-Element in der DB (tl_content 5454 DE / 5575 EN):
   dort liegen Light-Basis .hs-ref-filter/.hs-ref-filter-btn und .hs-kat-hidden{display:none}
   INLINE (lädt im <body>, nach allen Stylesheets) sowie das <script> (toggelt
   .is-active auf Buttons, .hs-kat-hidden auf .mod_article.hs-referenzen/.hs-ref-grouphead;
   liest kat-* aus den Artikel-cssIDs). Hier NUR der Stylesheet-Anteil. */

/* — Referenz-Artikel-Basis (Herkunft: live-design mitte) —
   .hs-referenzen > * muss das frühe .mod_article > * (base.css, 20px-Seitenpadding)
   per REIHENFOLGE schlagen (gleiche Spezifität) → gehört hierher (spät), Stufe-05-Lehre. */
.hs-referenzen { padding-left: 20px; padding-right: 20px; }
.hs-referenzen > * { padding: 60px 0; }
/* padding-right:50% ist auf ≥1024 vom spezifischeren min(50%,615px) (unten) überstimmt,
   auf <1024 von der media-Regel — bleibt als Default für Galerien ohne slide_second_image. */
.hs-referenzen .content-gallery { padding-right: 50%; }
@media (max-width: 1023px) {
  .hs-referenzen .content-gallery { padding-right: 0; margin-bottom: 20px; }
}
.hs-referenzen .content-text {
  width: calc(50% - 30px);
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
@media (max-width: 1023px) {
  .hs-referenzen .content-text { position: relative; width: 100%; }
}
.hs-referenzen .content-text a { font-size: 25px; color: var(--c-brand); font-weight: 200; }
@media (max-width: 1023px) {
  .hs-referenzen .content-text a { line-height: 1.3; margin-bottom: 10px; display: inline-block; }
}
.hs-referenzen .content-text a strong,
.hs-referenzen .content-text strong a { font-size: 16px; color: var(--c-text); font-weight: 400; }
/* h3-Reset des Referenz-Titels (SEO-Markup) — schlägt base-Headings per Spezifität (0,3,0) */
.hs-referenzen .content-text .hs-ref-title {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
@media (max-width: 1023px) {
  .hs-referenzen .content-gallery li { margin-bottom: 14px; }
  .hs-referenzen .content-gallery li:last-child { margin-bottom: 0; }
}

/* — Rahmenlos + 0.5px-Kanten-Overlay (Herkunft: heimseiten, 2026-07-13) —
   !important: Light-Rahmen bewusst entfernt; schirmt img gegen jede Border-Regel
   (historisch gegen live-designs 1px-Border — die entfällt als stiller Verlierer). */
.mod_article.hs-referenzen .content-gallery li img { border: 0 !important; }
.mod_article.hs-referenzen .content-gallery li figure { position: relative; }
.mod_article.hs-referenzen .content-gallery li figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0.5px #ddd; /* gilt effektiv auch im Dark (gewinnt (0,3,3)-Duell) */
  pointer-events: none;
}

/* — Hover-Zweitbild „slide_second_image" (Herkunft: heimseiten; P5-Mapping: hs-ref-slide) — */
@media (min-width: 1024px) {
  .mod_article > .content-gallery.hs-ref-slide { width: 100%; }
  .content-gallery.hs-ref-slide { overflow: hidden; }
  .content-gallery.hs-ref-slide > ul {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: visible; /* schlägt base' .content-gallery > ul overflow:hidden per Spezifität */
  }
  .content-gallery.hs-ref-slide > ul > li { list-style: none; }
  .content-gallery.hs-ref-slide > ul > li:first-child {
    position: relative;
    z-index: 2;
    padding-right: 30px;
    box-sizing: border-box;
  }
  .content-gallery.hs-ref-slide > ul > li:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0;
    padding-left: 30px;
    box-sizing: border-box;
    transition: left .8s ease-in-out, opacity .8s ease-in-out;
  }
  .content-gallery.hs-ref-slide:hover > ul > li:nth-child(2) { left: 100%; opacity: 1; }
  .content-gallery.hs-ref-slide { transition: z-index 0s linear .8s; }
  .content-gallery.hs-ref-slide:hover { z-index: 3; transition-delay: 0s; }
  .content-gallery.hs-ref-slide { pointer-events: none; }
  .content-gallery.hs-ref-slide > ul { pointer-events: auto; }
  /* gewinnt per Spezifität (0,4,0) über .hs-referenzen .content-gallery{padding-right:50%} */
  .mod_article.hs-referenzen .content-gallery.hs-ref-slide { padding-right: min(50%, 615px); }
  /* !important aus Bestand 1:1 (fixiert Text-Spalte gegen Basis-right/width) */
  .mod_article.hs-referenzen .content-gallery.hs-ref-slide + .content-text {
    left: calc(50% + 30px) !important;
    width: min(calc(50% - 50px), 585px) !important;
    right: auto !important;
    margin: 0 !important;
  }
}
@media (max-width: 1023px) {
  /* !important aus Bestand: gegen cc-margins/article-cc (laden NACH components.css) */
  #wrapper .content-gallery.hs-ref-slide {
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 12px;
  }
}

/* — Case-Study-Galerien (Herkunft: heimseiten; Seiten: case-study-colognecamper DE/EN;
     Galerie 1 = .hs-screenshot-rahmen.content-gallery--cols-3, Galerie 2 = .hs-screenshot-galerie
     [--cols-4 hat KEINE eigenen Regeln, Grid kommt aus .hs-screenshot-galerie > ul]) — */
@media (min-width: 1024px) {
  .content-gallery--cols-3 > ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .content-gallery--cols-3 li { margin: 0; }
  .content-gallery--cols-3 img { width: 100%; height: auto; }
  .hs-screenshot-galerie > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .hs-screenshot-galerie li { margin: 0; }
  .hs-screenshot-galerie img { width: 100%; height: auto; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .hs-screenshot-galerie > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .hs-screenshot-galerie li { margin: 0; }
  .hs-screenshot-galerie img { width: 100%; height: auto; }
}
.hs-screenshot-galerie img, .hs-screenshot-rahmen img { border: 0.5px solid var(--c-border); box-sizing: border-box; }

/* — Dark (Sektions-Ende) — Light-Basis der Buttons liegt INLINE im DB-Element;
   die generische Dark-Regel (0,2,1) schlägt sie per Spezifität, .is-active (0,3,1)
   holt die Grün-Füllung zurück (#557d00 = Dark-Brand, Kontrast 4,9).
   ⚠ NICHT duplizieren: utilities.css hat bereits den :is()-Dark-Var-Redefine
   (--c-brand:#557d00) inkl. .hs-ref-filter-btn.is-active (Stufe 06). */
html[data-theme="dark"] .hs-ref-filter-btn { background: #232323; border-color: #4a6b12; color: #cfcfcf; }
html[data-theme="dark"] .hs-ref-filter-btn.is-active { background: #557d00; border-color: #557d00; color: #fff; }

/* ════════════════════════ KLEINKRAM: PAGINATION / SITEMAP / MEDIA-MOBIL /
   BEWERTUNGSLINKS / HEADLINE_HOME / SWIPER-BULLETS (Stufe 09) ════════════════════════
   Herkunft: live-design (mittig/spät) + heimseiten (spät). Kein Dark-Override im
   Bestand für diese Komponenten (geprüft: alte Dark-Blöcke fassen keinen dieser
   Selektoren an; der generische Dark-Text-Layer oben greift weiter). */

/* — Pagination (Contao-Core-Markup nav.pagination > p + ul; sitewide nur die
     Kundenstimmen-Newslist DE+EN. Die Newslist-Breitenregel .mod_newslist
     nav.pagination{width:100%} steht bereits in der Testimonials-Sektion (Stufe 08) —
     hier NUR die allgemeine Optik, Properties disjunkt. — */
.pagination {
  padding-top: 30px;
  padding-bottom: 0 !important; /* Bestand; historischer Gegenspieler nicht mehr auffindbar — 1:1 behalten, P5-Prüfkandidat */
  color: #999999; /* Bestand-Literal — NICHT auf --c-muted (#767676) mappen! */
  text-align: center;
  clear: both;
}
.pagination > p { display: none; } /* „Seite X von Y" ausgeblendet (Bestand) */
.pagination ul { margin-bottom: 0; }
.pagination ul li { display: inline-block; margin-right: 5px; }
/* li.first/.last aktuell ohne DOM-Treffer (nur 2 Review-Seiten → Contao rendert keine
   Sprunglinks) — DEFENSIV behalten (Stufe-08-Muster): bei mehr Seiten kämen first/last
   als eigene Zeilen (display:block = Bestands-Look). */
.pagination ul li.first, .pagination ul li.last { display: block; }

/* — Sitemap-Seiten (mod_sitemap, /sitemap DE+EN): nummerierte, eingerückte Ebenen.
     list-style:decimal schlägt base-`ul{list-style-type:none}` per Spezifität (0,1,1 > 0,0,1). — */
.mod_sitemap ul { margin-left: 20px; list-style: decimal; line-height: 2; }
.mod_sitemap .level_1 > li > a { font-weight: 600; }
.mod_sitemap .level_2 { margin-left: 40px; }
.mod_sitemap .level_3 { margin-left: 80px; }

/* — headline_home (Startseiten-Kopf, index DE+EN) — */
.hs-headline-home h1, .hs-headline-home h2 { margin-bottom: 1px !important; } /* Bestand-!important (1:1; Spezifität würde heute reichen — P5-Prüfkandidat) */
@media (max-width: 1023px) {
  .hs-headline-home p, .hs-headline-home h2 { font-size: 13px !important; font-weight: 400 !important; } /* Bestand-!important gegen Typo-Basis */
}

/* — Bewertungslinks (Badge-Links, Kundenstimmen DE+EN).
     ⚠ REIHENFOLGE load-bearing: die .fb-3798-Regeln (heimseiten-stämmig) MÜSSEN nach
     `.hs-bewertungslinks .text` stehen — (0,2,0)-TIE auf margin-right, die spätere Regel
     (10px) gewinnt über die 20px aus dem Shorthand (= Bestand: heimseiten lud nach
     live-design). — */
.hs-bewertungslinks figure {
  display: inline-block;
  /* !importants NÖTIG: gegen die figure.image_container.float_*-Margins der
     Typo-Feinschicht oben (0,2,0 > 0,1,1) und gegen die <390px-float:none-Mobilregel
     unten (1,3,1, ohne !important) — exakt der Bestands-Ausgang. */
  margin: 10px !important;
  float: left !important;
}
.hs-bewertungslinks .text { display: inline-block; margin: 30px 20px; }
/* Bewertungslinks-Flexbox 3798 (heimseiten): Spalten-Layout kommt aus flexbox-boxes.css
   (Generator fb-3798, lädt weiterhin NACH dieser Datei); hier nur die Live-min-width
   (Generator erfasst width, nicht min-width → mobil stapeln die Boxen automatisch)
   + Zentrierung Icon/Text als Paar (User 2026-07-09 „nicht mittig"). */
.fb-3798 > * { min-width: 350px; display: flex; justify-content: center; align-items: center; }
/* Außen-Margins der Flex-Items angleichen (figure 10 links vs. Text 20 rechts = 5px
   Linksversatz der zentrierten Gruppe); der 30px-Gap Icon↔Text bleibt (10+20).
   Facebook-Box nutzt float_right_text (Live-Markup), gerendert identisch. */
.fb-3798 > * :is(.float_left_text, .float_right_text) { margin-right: 10px; }

/* — Text-Mindestbreite neben Umfluss-Bildern (User-Regel 2026-07-11): <390px Bild als
     eigener Block, Text in voller Breite darunter; green_icon-Karten ausgenommen.
     Aktuell ohne DOM-Treffer (livetext n=0 — alle heutigen float-Figuren sitzen in
     green_icon-Karten) → bewusste User-Regel, DEFENSIV 1:1 behalten. — */
@media (max-width: 389.98px) {
  #wrapper .media:not(.hs-icon-green) figure:is(.float_left, .float_right) {
    float: none;
    margin: 0 0 12px;
  }
}

/* — Swiper-Pagination-Bullets: target-size-A11y (heimseiten). Wirkt heute nur auf dem
     Kunden-Slider der Startseite (Sektion oben), greift aber generisch für JEDEN Swiper
     — auch für die kommende Hero/Slider-Stufe (dort NICHT erneut transferieren!).
     Tap-Fläche ≥24px, sichtbarer Punkt = ::before. !importants NÖTIG gegen das später
     geladene, ungelayerte swiper-bundle.min.css; sie übersteuern zugleich
     width/height/margin/background der .kundenmeinungen-Bullet-Regeln oben
     (Bestand: deren :hover-/-active-background ist stiller Verlierer — sichtbarer
     Aktiv-Zustand kommt aus den ::before-Regeln hier). — */
.swiper-pagination .swiper-pagination-bullet {
  width: 24px !important;
  height: 24px !important;
  margin: 0 2px !important;
  background: transparent !important;
  border: 0 !important; /* nur die vergrößerte Tap-Fläche; sichtbarer Punkt = ::before */
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swiper-pagination .swiper-pagination-bullet::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  background: rgba(221, 221, 221, 0.5);
  border: 1px solid rgba(153, 153, 153, 0.5);
  transition: background 0.2s ease;
}
.swiper-pagination .swiper-pagination-bullet-active::before { background: rgba(153, 153, 153, 0.5); }

/* — Countup-Zähler (plenta; Stufe 13 aus heimseiten) — wie Live .counter_wrapper — */
.content-plenta-countup { text-align: center; padding: 20px 30px 30px; }
.content-plenta-countup .countup-value { display: block; font-size: 65px; line-height: 1.2; color: var(--color_1, var(--c-brand)); }
/* --font_color ist TRIPEL → var() invalid-at-computed-value → ERBT (Bestand; s. tokens.css) */
.content-plenta-countup .countup-suffix { display: block; font-size: 23px; color: var(--font_color, #555); }
@media (max-width: 1023px) {
  .content-plenta-countup .countup-value { font-size: 46px; }
  .content-plenta-countup .countup-suffix { font-size: 18px; }
}

/* — Spaltenliste („Umgesetzte Funktionen", Case-Study; Stufe 13) — beide li-Blöcke
   in Bestands-Reihenfolge (Basis + Aufzählungspunkt-Nachrüstung) — */
.hs-spaltenliste ul { columns: 2; column-gap: 48px; }
.hs-spaltenliste li { break-inside: avoid; }
@media (max-width: 767px) { .hs-spaltenliste ul { columns: 1; } }
.hs-spaltenliste li { position: relative; padding-left: 20px; }
.hs-spaltenliste li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand);
}

/* — Lightbox-Caption (glightbox; Stufe 13) — RUNTIME (Lightbox offen; livetext-„tot" =
   Artefakt, Probe-belegt). !importants = Bestand gegen Bundle-CSS. — */
.glightbox-clean .gslide-description.description-bottom,
.glightbox-clean .gslide-description { background: #eef5e2 !important; border-top: 1px solid var(--c-border); }
.glightbox-clean .gdesc-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc { margin: 0 !important; text-align: center; }

/* — hs-timeline: vertikaler Prozess (Stufe 13; Nummern-Kreise wie hs-cards--steps,
   Verbindungslinie; ::before-Kreis ist Pseudo-Element → livetext-„tot" = Artefakt) — */
.hs-timeline { counter-reset: hs-step; width: min(700px, 100%); margin: 30px auto 0; }
.hs-timeline > * { counter-increment: hs-step; position: relative;
  margin: 0; padding: 5px 0 32px 60px; box-sizing: border-box; }
.hs-timeline > *::before { content: counter(hs-step);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color_1, var(--c-brand)); color: #fff; font-weight: 600; }
.hs-timeline > *:not(:last-child)::after { content: "";
  position: absolute; left: 17.5px; top: 44px; bottom: 8px;
  width: 1px; background: #ddd; }
.hs-timeline > *:last-child { padding-bottom: 0; }
.hs-timeline p { margin: 0; }
.hs-timeline > :nth-child(2) { --ivp_animation_delay: .2s; }
.hs-timeline > :nth-child(3) { --ivp_animation_delay: .4s; }
.hs-timeline > :nth-child(4) { --ivp_animation_delay: .6s; }
.hs-timeline > :nth-child(5) { --ivp_animation_delay: .8s; }

/* — DARK: keine Bestands-Overrides für diese Kleinkram-Komponenten (geprüft) — */

/* ════════════════════════ HERO-/STARTSEITEN-SLIDER + KENBURNS (Stufe 10; heimseiten-stämmig, spät) ════════════════════════
   Native Contao-Swiper-CEs mit heimseiten/contao-custom-swiper-bundle (customTpl CustomSwiper.html.twig).
   6 Hero-Seiten: index/en (.hs-under-header.hs-full-height.hs-ken-burns, 4 Slides) · seo-koeln/en + webdesign-koeln/en
   (.hs-under-header.hs-ken-burns, 1 Slide .hs-slide-in-only). Kundenmeinungen-Swiper (Stufe 08) hat KEINE dieser
   Scoping-Klassen — Selektoren hier greifen dort bewusst nicht.
   KOPPLUNG: KenBurns/under_header/full_height = DB-cssID (tl_content); --sliderSpeed/--sliderDelay = Inline-Style
   auf .content-custom-swiper-inner (customTpl); body.hs-preload wird von theme.js nach First Paint entfernt.
   Bundle-Schichten (unantastbar, laden früh): swiper-bundle.css + vendor customswiper.css (.swiper-progress-Optik).
   .ce_sliderStart-Selektorteile: Klasse existiert nicht mehr im DOM — Selektoren bleiben bis P5 unverändert. */

/* — Vollhöhen-Hero (nur index/en): Full-Bleed-Artikel — */
/* ⚠ REIHENFOLGE load-bearing: width/max-width:100vw hier VERLIEREN das 0,3,0-Duell gegen die
   spätere :has-Regel (width/max-width:100%) — nur margin/padding wirken effektiv (Probe: ml/mr −7,5px). */
.mod_article :is(.ce_sliderStart, .content-custom-swiper).hs-full-height,
.ce_sliderStart.hs-full-height {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-full-height img {
  width: 100%;
  height: calc(100svh - 130px);
  min-height: 440px;
  object-fit: cover;
  display: block;
}
@media (max-width: 1023px) {
  :is(.ce_sliderStart, .content-custom-swiper).hs-full-height img {
    height: 62svh;
    min-height: 320px;
  }
}
.mod_article:has(:is(.ce_sliderStart, .content-custom-swiper).hs-full-height) {
  padding-block: 0;
}
/* gewinnt per Reihenfolge (0,3,0-Tie) width/max-width gegen die 100vw-Regel oben — Bestand */
.mod_article:has(:is(.ce_sliderStart, .content-custom-swiper).hs-full-height) > * {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-full-height .content-text.media {
  position: relative;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-full-height .content-text.media figure {
  margin: 0;
}

/* — Swiper-Basis + KenBurns-Zoom — */
.content-custom-swiper {
  overflow: hidden; /* greift auch am Kundenmeinungen-Swiper (Bestand; dort konfliktfrei) */
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide img {
  width: 100%;
  object-fit: cover;
}
.content-custom-swiper.hs-ken-burns .swiper-wrapper > * img {
  scale: 1.05;
  transition: scale calc((var(--sliderDelay, 4000) + var(--sliderSpeed, 1500)) * 0.001s) ease-in-out;
  transform-origin: top left;
  backface-visibility: hidden;
  will-change: transform;
}
/* !important nötig: übersteuert .hs-preload *{transition:none !important} —
   der KenBurns-Zoom der ersten Folie soll schon WÄHREND der Preload-Sperre anlaufen.
   Gewinnt per Spezifität, coverage-„tot" = Zustand ist transient (theme.js). */
body.hs-preload .content-custom-swiper.hs-ken-burns .swiper-wrapper > * img {
  transition: scale calc((var(--sliderDelay, 4000) + var(--sliderSpeed, 1500)) * 0.001s) ease-in-out !important;
}
.content-custom-swiper.hs-ken-burns .swiper-wrapper > :nth-child(4n + 1) img {
  transform-origin: bottom left;
}
.content-custom-swiper.hs-ken-burns .swiper-wrapper > :nth-child(4n + 2) img {
  transform-origin: top right;
}
.content-custom-swiper.hs-ken-burns .swiper-wrapper > :nth-child(4n + 3) img {
  transform-origin: top left;
}
.content-custom-swiper.hs-ken-burns .swiper-wrapper > :nth-child(4n + 4) img {
  transform-origin: bottom right;
}
/* ⚠ REIHENFOLGE load-bearing: 0,3,1-Tie mit der scale:1.05-Regel oben — active/prev müssen SPÄTER stehen */
.content-custom-swiper.hs-ken-burns .swiper-slide-active img {
  scale: 1;
}
/* Zustandsklassen nur während des Übergangs (coverage-„tot" = Snapshot-Artefakt) — MUSS bleiben */
.content-custom-swiper.hs-ken-burns :is(.swiper-slide-prev, .swiper-slide-duplicate-prev) img {
  scale: 1;
}

/* — Hero-Pfeile (Overrides gegen swiper-bundle rein per Spezifität; SVG-Icon des Core-Templates aus) — */
.content-custom-swiper :is(.swiper-button-prev, .swiper-button-next) .swiper-navigation-icon {
  display: none;
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) :is(.swiper-button-prev, .swiper-button-next) {
  width: 40px;
  height: 40px;
  padding: 20px;
  top: 50%;
  margin-top: -20px;
  background: transparent center / contain no-repeat;
  border: 0;
  cursor: pointer;
  transition: var(--tr);
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-button-prev {
  left: 0;
  background-image: url('/files/layout/img/icons/arrow_left.svg');
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-button-next {
  right: 0;
  background-image: url('/files/layout/img/icons/arrow_right.svg');
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) :is(.swiper-button-prev, .swiper-button-next):hover {
  transform: scale(1.2);
  background-color: rgba(0, 0, 0, 0.6);
}

/* — Caption-Animation (Mehrfolgen-Hero; Basiszustand unsichtbar, aktive Folie animiert) — */
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .float_above_text p {
  opacity: 0;
  left: 100%;
}
/* No-JS-Fallback (coverage-„tot" = Headless hat scripting) — MUSS bleiben */
@media (scripting: none) {
  .content-custom-swiper:is(.hs-full-height, .hs-under-header) .float_above_text p {
    opacity: 1;
    left: 0;
  }
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide-active .float_above_text {
  z-index: 9;
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide-active .float_above_text p {
  animation: slide_in_and_out calc((var(--sliderSpeed, 1500) + var(--sliderDelay, 4000)) / 1000 * 1s) ease-in-out forwards;
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide-active .float_above_text p:nth-child(2) {
  animation-delay: 0.5s;
  animation-name: slide_in_and_out_second;
}
/* 0,5,1 — übersteuert am Ein-Folien-Hero den animation-name (Probe: effektiv hs_slide_in) */
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide-active .hs-slide-in-only .float_above_text p {
  animation-name: hs_slide_in;
}
.content-custom-swiper:is(.hs-full-height, .hs-under-header) .swiper-slide-active .hs-slide-in-only .float_above_text p:nth-child(2) {
  animation-name: hs_slide_in_second;
}
@keyframes hs_slide_in {
  30% { opacity: 1; left: 0; }
  100% { opacity: 1; left: 0; }
}
@keyframes hs_slide_in_second {
  30% { opacity: 1; left: -15px; }
  100% { opacity: 1; left: -15px; }
}
@keyframes slide_in_and_out {
  30% { opacity: 1; left: 0; }
  70% { opacity: 1; left: 0; }
  100% { opacity: 0; left: -100%; }
}
@keyframes slide_in_and_out_second {
  30% { opacity: 1; left: -15px; }
  70% { opacity: 1; left: -15px; }
  100% { opacity: 0; left: -100%; }
}
/* slide_in/_second: Herkunft live-design (dort bleiben sie bis zum Final-Sweep — Remover kann
   @-Regeln nicht entfernen; identische Werte, SPÄTESTE Definition gewinnt = diese hier).
   Genutzt von der under_header-slide_in_only-Regel unten (greift v. a. transient VOR Swiper-Init,
   danach übersteuert hs_slide_in). Die @media-Fragmente im live-design-Original INNERHALB der
   Keyframes sind invalid und werden vom Browser verworfen (CSSOM-belegt) — hier bewusst weggelassen. */
@keyframes slide_in {
  30% { opacity: 1; left: 0; }
  100% { opacity: 1; left: 0; }
}
@keyframes slide_in_second {
  30% { opacity: 1; left: -15px; }
  100% { opacity: 1; left: -15px; }
}
/* reduced-motion (coverage-„tot" = Headless-Artefakt, Stufe-08-Lehre) — MUSS bleiben.
   !important wie Bestand: neutralisiert die shorthand-Animation der active-Regel oben. */
@media (prefers-reduced-motion: reduce) {
  .content-custom-swiper.hs-ken-burns .swiper-wrapper > * img {
    transition: none;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .content-custom-swiper:is(.hs-full-height, .hs-under-header) .float_above_text p {
    opacity: 1;
    left: 0;
    animation: none !important;
  }
}

/* — under_header-Hero: Caption absolut über dem Bild (grüne Skew-Plakette) — */
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .content-text.media--above {
  position: relative;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .content-text.media--above > .image_container.float_above {
  margin: 0;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .float_above_text {
  position: absolute;
  left: 10%;
  bottom: 15%;
  top: auto;
  z-index: 2;
  margin: 0;
  width: max-content;
  max-width: 80%;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .float_above_text .inside > .rte p,
.ce_sliderStart.hs-under-header .float_above_text .inside > p {
  position: relative;
  display: table;
  background: transparent;
  color: #fff;
  padding: 10px 20px;
  margin: 0 0 10px;
  font-size: clamp(1.1rem, 2.35vw, 1.875rem);
  font-weight: 100;
  line-height: 1.8;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .float_above_text p:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(124, 171, 22, 0.8);
  transform: skewX(-10deg);
  border-radius: 3px;
}
/* Inhalts-defensiv (leere Redakteurs-Absätze → keine leere grüne Plakette); coverage-„tot" = Content-Zustand */
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .float_above_text p:empty,
.ce_sliderStart.hs-under-header .float_above_text p:has(br:only-child) {
  display: none;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only img {
  transform-origin: top left;
  animation: hs_hero_zoom_out 5.5s ease-in-out forwards;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes hs_hero_zoom_out {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only .float_above_text p {
  opacity: 0;
  left: 100%;
  animation: slide_in 5.5s ease-in-out forwards;
}
:is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only .float_above_text p:nth-child(2) {
  animation-delay: 0.5s;
  animation-name: slide_in_second;
}
@media (prefers-reduced-motion: reduce) {
  :is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only img {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only .float_above_text p {
    animation: none;
    opacity: 1;
    left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ce_sliderStart, .content-custom-swiper).hs-under-header .hs-slide-in-only .float_above_text p:nth-child(2) {
    left: -15px;
  }
}

/* — Fortschrittsbalken (Optik = vendor customswiper.css, unantastbar): bei Ein-Folien-Hero aus —
   ⚠ stand AUCH im Effekte-Quellmaterial — nur HIER transferiert (Koordination Stufe 10) */
.content-custom-swiper:has(.swiper-wrapper > .swiper-slide:only-child) .swiper-progress {
  display: none;
}

/* — DARK (Sektionsende): Hero-Flächen gedimmt — trifft Swiper-Heroes UND statische
   full_width.under_header-Hero-Artikel (20 Seiten). Achtung: filter erzeugt Containing Block (Bestand). — */
html[data-theme="dark"] :is(.ce_sliderStart, .mod_article.hs-full-width.hs-under-header) {
  filter: brightness(0.88);
}

/* ════════════════ EFFEKTE: EINBLENDE-HELFER / SCROLL-PROGRESS / SLOGAN /
   HEADER-SCHRUMPF / PARALLAX-TIMELINES (Stufe 10) ════════════════
   Quellen: live-design [270, 388/389, 506/507, 707, 722–725] + heimseiten-Scroll-Effekt-
   Blöcke. wivp/iivp/ivp_active/above_viewport setzt das inviewport-Bundle zur LAUFZEIT. */

/* ivp-Basis (live-design; Bundle-CSS setzt .ivp{overflow:visible} wertgleich —
   Mehrwert ist .ivp .flex-images; lebende Duell-Partner: keine, nur tote
   .ivp.ken_burns/.ivp.reveal{overflow:hidden} — sterben in dieser Stufe) */
.ivp, .ivp .flex-images { overflow: visible; }
@media screen and (prefers-reduced-motion: reduce) {
  .ivp { transition: none; } /* coverage-„tot" = Headless-Artefakt (Stufe-08-Lehre) */
}

/* fadein_left/right — LIVE (je 2× webdesign-koeln + en_web-design-cologne; DB-cssID 4+4).
   .wivp = Laufzeit-Klasse. up/bottom/fadeinup-Varianten sind tot (0 DOM, 0 DB) und fallen
   samt heimseiten-transform-Overrides weg — die betrafen NIE left/right.
   (Mobilfix #wrapper .ivp.hs-fadein-left/right{…!important} seit Stufe 05 in der
   Mobil-Feinschicht weiter oben — NICHT doppeln.) */
.ivp.hs-fadein-left { opacity: 0; left: 100px; position: relative; }
.ivp.hs-fadein-left.wivp { opacity: 1; left: 0px; transition: opacity 1.5s ease-in-out, left 1.5s ease-in-out; }
.ivp.hs-fadein-right { opacity: 0; right: 100px; position: relative; }
.ivp.hs-fadein-right.wivp { opacity: 1; right: 0px; transition: opacity 1.5s ease-in-out, right 1.5s ease-in-out; }

/* hs-flash (Ersatz für wow.js-„flash"; live auf seo-koeln_seo-texte DE+EN) */
.ivp.hs-flash.iivp { animation: hs_flash 2.5s ease both; }
@keyframes hs_flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ivp.hs-flash.iivp { animation: none; } }

/* hs-wachsen (Zahlen/Überschriften wachsen auf; live auf index DE+EN) */
.hs-wachsen.ivp { opacity: 0; transition: opacity .5s ease var(--ivp_animation_delay, 0s); }
.hs-wachsen.ivp.iivp { opacity: 1; }
.hs-wachsen.ivp::before,
.hs-wachsen.ivp p > strong:first-child {
  transform: scale(.25);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) var(--ivp_animation_delay, 0s);
}
.hs-wachsen.ivp p > strong:first-child { display: inline-block; transform-origin: left center; }
.hs-wachsen.ivp.iivp::before,
.hs-wachsen.ivp.iivp p > strong:first-child { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hs-wachsen.ivp, .hs-wachsen.ivp::before, .hs-wachsen.ivp p > strong:first-child {
    opacity: 1; transform: none; transition: none;
  }
}

/* einblendenVonUnten: MOBIL-Feinschicht (theme-seitige Regeln zu Bundle-Klassen; Bundle-CSS
   selbst UNANTASTBAR). Gewinnt gegen die früh geladene Bundle-Regel (Spezifität identisch
   0,3,0) per Reihenfolge — verifiziert: computed translateY(40px) mobil, 2026-07-15. */
@media (max-width: 1023px) {
  .einblendenVonUnten.ivp:not(.above_viewport) { transform: translateY(40px); }
  .einblendenVonUnten.ivp.iivp {
    /* !important = Bestand: sichert .4s/0s flächig gegen die verzögert*-/Dauer*-Staffel-
       regeln des Bundles und Inline---ivp_animation_delay, unabhängig von Ladeposition */
    transition-duration: .4s, .4s !important;
    transition-delay: 0s, 0s !important;
  }
}

/* ── SCROLL-PROGRESS (grüner 3px-Balken; Markup: <div class="progress"> im Twig, plus ein
   deckungsgleiches Zweit-Div aus dem Header-Slot — Bestand). Modern scroll()-Timeline,
   Fallback paused-Animation an --scroll (theme.js setzt --scroll nur ohne Timeline-Support). */
.hs-progress {
  width: 0;
  height: 3px;
  background-color: var(--c-brand);
  position: fixed;
  top: 0;
  left: 0;
  animation: progress 1s linear;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes progress {
  to { background-color: var(--c-brand); width: 100%; }
}
@supports (animation-timeline: scroll()) {
  .hs-progress {
    animation-duration: auto;
    animation-delay: 0s;
    animation-play-state: running;
    animation-timeline: scroll();
  }
}
/* ≥1361px übernimmt die Scroll-Ranke → Balken aus. WIEDERHERSTELLUNG: Regel stand in
   plant-scroll.css und ging bei Stufe 02 verloren (Regression belegt 2026-07-15:
   display:block/width>0 bei 1440px nach Scroll). Komplementär zur Ranken-Regel
   @media (max-width:1360px){.hs-plant-scroll{display:none}} in der Ranken-Sektion. */
@media (min-width: 1361px) {
  .hs-progress { display: none; }
}

/* ── HEADER-SLOGAN („simple is beautiful"; content-image.hs-slogan, alle 48 Seiten).
   Anker #header>.inside{position:relative} ist heimseiten-stämmig und MUSS spät bleiben:
   er überstimmt live-designs mobiles #header>.inside{…position:absolute} (stiller
   Verlierer — nicht wiederbeleben!). Doppeltes bottom = Bestand: das calc gewinnt die
   Kaskade, ist im modernen Pfad (kein --scroll) invalid-at-computed-value; die
   scroll()-Animation übersteuert bottom ohnehin (fill-mode both). */
#header > .inside { position: relative; }
#header > .inside .hs-slogan {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: 170px;
  bottom: calc(var(--scroll) * 1000px);
  margin-bottom: 62px;
}
@media (max-width: 1023px) {
  #header > .inside .hs-slogan { left: 180px; bottom: 8px; width: 106px; }
}
#header > .inside .hs-slogan img { width: 100%; height: auto; display: block; }
@supports (animation-timeline: scroll()) {
  #header > .inside .hs-slogan {
    animation-name: hs-slogan-steigen;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
  }
  @keyframes hs-slogan-steigen {
    from { bottom: 0; }
    to { bottom: 1000px; }
  }
}

/* ── HEADER-SCHRUMPF — NUR der Effekt (Höhe 130→83px als scroll()-Timeline; live-Formel
   height = 130 − y/3 ⇒ 47px·3 = animation-range 141px; JS-Fallback in theme.js). Die
   #header-BASIS (position:fixed, height:var(--header_height), min-height:83px, Optik)
   bleibt bis Stufe 11 in live-design — der Effekt animiert ausschließlich height und ist
   sauber separierbar. #header.scrolled war tot (kein Skript setzt die Klasse). */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) {
    #header {
      animation-name: hs-header-schrumpf;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll();
      animation-range: 0px 141px;
    }
  }
}
@keyframes hs-header-schrumpf {
  from { height: var(--header_height, 130px); }
  to { height: 83px; }
}

/* ── ARTIKEL-BG-PARALLAX: Timeline-QUELLEN + Keyframes — Rest-Transfer der in Stufe 05
   begonnenen Migration (die animation-Longhands stehen bereits in der Layout-Feinschicht
   weiter oben — NICHT doppeln).
   REIHENFOLGE load-bearing (= Bestand): view-timeline-name --hs-bg VOR der view-timeline-
   Shorthand --hs-bg-parallax (Shorthand gewinnt das Property-Duell; --hs-bg + hs_parallax
   bleiben stille Verlierer — mitführen, nicht wiederbeleben). Danach die drei first-child-
   Regeln in Bestands-Reihenfolge: view()-none → scroll()-hs-title-parallax (reaktiviert,
   gleiche Spezifität, später) → reduce-none (final). */
@supports (animation-timeline: view()) {
  .mod_article:has(> .bg.parallax) { view-timeline-name: --hs-bg; }
  @keyframes hs_parallax {
    from { transform: translateY(-7%); }
    to   { transform: translateY(7%); }
  }
}
@supports (animation-timeline: view()) {
  .mod_article:has(> .bg.parallax) { view-timeline: --hs-bg-parallax block; }
  @keyframes hs-bg-parallax {
    from { transform: translateY(0); }
    /* Verschiebung auf knapp unter den .inside-Puffer (inline margin-top:-10% = 10% der
       Artikelbreite) gedeckelt, sonst blitzt oben der Artikelhintergrund durch
       (Bestandsfehler, Nutzer 2026-07-16: "Video hat oben eine kleine Luecke") */
    to { transform: translateY(min(8.5vw, calc((100vh + 100%) / 6))); }
  }
  #main > .inside > .mod_article:first-child > .bg.parallax .inside { animation: none; }
}
@supports (animation-timeline: scroll()) {
  #main > .inside > .mod_article:first-child > .bg.parallax .inside {
    animation-name: hs-title-parallax;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
  @keyframes hs-title-parallax {
    from { transform: translateY(0); }   /* oben bündig, keine Lücke */
    to   { transform: translateY(56px); } /* < 74px Overflow */
  }
}
@media (prefers-reduced-motion: reduce) {
  #main > .inside > .mod_article:first-child > .bg.parallax .inside { animation: none; }
}

/* ═══════════════════ NAVIGATION / HEADER (Stufe 11) ═══════════════════
   Ladeordnung load-bearing: Core-navigation.css (Bundle, lädt VOR allem) und
   imports/mod_navigation_accessible.css (UNANTASTBAR, lädt vor dieser Datei)
   sind ID-frei — ALLE Regeln hier tragen #header und gewinnen/verlieren ihre
   Duelle per SPEZIFITÄT, nie per Reihenfolge (Matrix-Beleg Stufe 11: 0 Gleich-
   Spezifitäts-Kollisionen). Interne Reihenfolge = Bestand (live-design-Herkunft
   vor heimseiten-Herkunft; das strong-color-Duell ist reihenfolge-entschieden!).
   Der Slogan-Anker #header>.inside{position:relative} und der Schrumpf-Effekt
   liegen in der Stufe-10-Sektion weiter oben — NICHT doppeln.
   KEIN backdrop-filter am #header (bewusst entfernt 2026-07-12, Weiß-Regel ist
   der Ersatz) — falls je reaktiviert: Header wird Containing Block fürs
   position:fixed-Overlay .navigation-main (liegt IM #header) → 100dvh-Falle. */

/* ── #header-BASIS (live-design; enthält bereits die „Weiß-Regel" — die
   gleichlautende heimseiten-Regel war ein wertidentisches Duplikat und
   entfällt). z-index stand im Bestand doppelt (2× 9) — einmal genügt. */
#header {
  position: fixed;
  top: 0;
  z-index: 9;
  height: var(--header_height);
  min-height: 83px;
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--c-border);
  max-width: 100%;
  width: 100%;
  margin: auto;
  overflow: visible;
  padding: 0 40px;
}
@media (max-width: 1023px) {
  /* OHNE background:var(--c-surface) aus dem Bestand: das war stiller Verlierer
     gegen die spätere Weiß-Regel (gleiche Spezifität 1,0,0, heimseiten nach
     live-design) — Probe-belegt: mobil computed rgba(255,255,255,.95) Light /
     rgba(18,18,18,.95) Dark. NICHT wiederbeleben. */
  #header {
    position: fixed;
    height: auto;
    padding: 0;
    min-height: var(--header_height_mobile);
  }
}

/* ── #header > .inside (Breite/Padding; position:relative = Slogan-Anker in
   Stufe-10-Sektion). Das mobile position:absolute des Bestands war stiller
   Verlierer gegen den Anker (gleiche Spezifität, Anker später) — entfällt,
   Probe-belegt: mobil computed position:relative. Das unsichtbare
   .inside::after (opacity:0, absolute, kein Toggle-Konsument) entfällt. */
#header > .inside {
  margin: auto;
  width: 1240px;
  max-width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  #header > .inside {
    padding: 0px 2.5%;
    margin: 0;
    width: 100%;
  }
}

/* ── LOGO (live-design-Kette zuerst, heimseiten-Feinschicht danach = Bestands-
   reihenfolge; alle Kreuz-Duelle spezifitäts-entschieden: die ld-Kette (1,2,x)
   schlägt die hs-Regeln (1,1,x) auf display:block am a und height:100% am img —
   Probe-belegt: figure a display:block, img height 80px/bottom -1px).
   font-family konsumiert weiter var(--primary_font_family) aus dem live-design-
   :root (lebt bis Final-Sweep). */
#header > .inside .hs-logo {
  font-family: var(--primary_font_family);
  position: absolute;
  display: inline-block;
  margin-bottom: 0;
  overflow: visible;
  height: 100%;
}
#header > .inside .hs-logo figure { height: 100%; }
#header > .inside .hs-logo figure a { height: 100%; display: block; }
#header > .inside .hs-logo figure a picture { display: flex; height: 100%; align-items: center; }
#header > .inside .hs-logo figure a picture img {
  bottom: -1px;
  position: relative;
  height: 100%;
  max-height: 80px;
  width: auto;
  object-fit: contain;
  object-position: left;
  padding: 5px 0;
}
/* heimseiten-Feinschicht: liefert effektiv figure{display:flex;align-items:center;
   margin:0}; die a/img-Anteile sind spezifitäts-Verlierer gegen die ld-Kette —
   1:1 mitgeführt (Selektoren unverändert, P5-Regel). */
#header .hs-logo { height: 100%; }
#header .hs-logo figure, #header .hs-logo figure a, #header .hs-logo picture {
  height: 100%; display: flex; align-items: center; margin: 0;
}
#header .hs-logo img { max-height: 80px; width: auto; height: auto; object-fit: contain; object-position: left; }

/* ── LOGOTEXT („Webdesign aus Köln") */
#header > .inside .hs-logotext-wrapper {
  position: relative;
  left: 4px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  z-index: -1;
}
@media (max-width: 1023px) {
  #header > .inside .hs-logotext-wrapper { left: 2px; }
}
#header > .inside .hs-logotext-inside { height: 80px; display: flex; align-items: flex-end; padding: 5px 0; }
@media (max-width: 1023px) {
  #header > .inside .hs-logotext-inside { height: 47px; }
}
#header > .inside .hs-logotext {
  font-size: 17.3px;
  color: var(--c-brand);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.3px;
}
@media (max-width: 1023px) {
  #header > .inside .hs-logotext { font-size: 9.4px; }
}
/* EN-Logotext länger → kleiner ((1,3,1) > ld (1,2,1)) */
@media (min-width: 1024px) {
  html[lang="en"] #header > .inside .hs-logotext { font-size: 13.3px; }
}

/* ── DESKTOP-NAV: live-design-Basis (C4-Ära, wirkt aufs C5-Markup weiter).
   Die {max-1600 and max-1150}-font-size-Regel entfällt (wertidentisch 16px zur
   Basis); das dreifach-geschachtelte display:none@1023 entfällt (verliert das
   !important-Duell gegen die Mobil-Sichtbarkeits-Regel unten — Probe-belegt:
   mobil display:block). */
#header > .inside .mod_navigation {
  position: absolute;
  left: auto;
  right: 0px;
  bottom: 9px;
  transform: none;
  font-size: 16px;
  z-index: 9;
  overflow: visible;
  white-space: nowrap;
}
#header > .inside .mod_navigation ul { z-index: 999; }
#header > .inside .mod_navigation ul li { float: left; }
#header > .inside .mod_navigation ul li > a, #header > .inside .mod_navigation ul li > strong {
  display: block;
  margin: 0 20px;
}
/* ⚠ REIHENFOLGE load-bearing: diese Regel VOR der folgenden — beide (1,2,3)
   auf strong/color; Bestand: muted verliert gegen text. */
#header > .inside .mod_navigation ul li a span, #header > .inside .mod_navigation ul li strong, #header > .inside .mod_navigation ul li > a {
  display: block;
  padding: 0px;
  color: var(--c-muted);
  font-weight: 400;
  transition: color 0.25s ease-in-out;
}
#header > .inside .mod_navigation ul li a:hover, #header > .inside .mod_navigation ul li a.trail span, #header > .inside .mod_navigation ul li strong {
  text-decoration: none;
  position: relative;
  color: var(--c-text);
}
#header > .inside .mod_navigation ul li.submenu > a > span, #header > .inside .mod_navigation ul li.submenu > a > strong, #header > .inside .mod_navigation ul li.submenu > strong {
  padding-right: 16px;
}
#header > .inside .mod_navigation ul li.submenu > a > span:after, #header > .inside .mod_navigation ul li.submenu > a > strong:after, #header > .inside .mod_navigation ul li.submenu > strong:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  top: 0.5em;
  margin-left: 5px;
  background-size: 11px;
  background-repeat: no-repeat;
  background-image: url("/files/layout/plugins/fontawesome-pro/svgs/light/chevron-down.svg");
}
/* Dropdown-Container (level_4-Gruppenteile toter Ballast, aber Selektoren
   UNVERÄNDERT bis P5). Liefert das effektive visibility/opacity/transition-
   Regime — schlägt Import-Translate/-Transition per ID-Spezifität. */
#header > .inside .mod_navigation ul li .level_2, #header > .inside .mod_navigation ul li .level_3, #header > .inside .mod_navigation ul li .level_4 {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  border-top: 2px solid var(--c-brand);
  font-size: 15px;
  min-width: 150px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  margin: -1px 0 0 0px;
  padding: 0;
  border-radius: 1px;
  overflow: hidden;
  text-align: left;
  overflow: visible;
  transition: all 0.25s ease-in-out;
}
#header > .inside .mod_navigation ul li .level_2 li, #header > .inside .mod_navigation ul li .level_3 li, #header > .inside .mod_navigation ul li .level_4 li {
  display: block;
  float: none;
  margin: 0;
  border-bottom: 1px solid var(--c-border-nav);
}
#header > .inside .mod_navigation ul li .level_2 li a, #header > .inside .mod_navigation ul li .level_3 li a, #header > .inside .mod_navigation ul li .level_4 li a {
  margin: 0;
}
#header > .inside .mod_navigation ul li .level_2 li a:before, #header > .inside .mod_navigation ul li .level_3 li a:before, #header > .inside .mod_navigation ul li .level_4 li a:before {
  display: none;
}
#header > .inside .mod_navigation ul li .level_2 li a span, #header > .inside .mod_navigation ul li .level_2 li strong, #header > .inside .mod_navigation ul li .level_3 li a span, #header > .inside .mod_navigation ul li .level_3 li strong, #header > .inside .mod_navigation ul li .level_4 li a span, #header > .inside .mod_navigation ul li .level_4 li strong {
  text-transform: none;
  margin: 0;
  padding: 10px 25px 10px 20px;
  margin: 0;
  line-height: 30px;
  border: none;
  font-weight: 300;
}
#header > .inside .mod_navigation ul li .level_2 li a:hover span, #header > .inside .mod_navigation ul li .level_2 li strong, #header > .inside .mod_navigation ul li .level_3 li a:hover span, #header > .inside .mod_navigation ul li .level_3 li strong, #header > .inside .mod_navigation ul li .level_4 li a:hover span, #header > .inside .mod_navigation ul li .level_4 li strong {
  background: var(--c-brand);
  color: #fff;
}
#header > .inside .mod_navigation ul li .level_2 li a, #header > .inside .mod_navigation ul li .level_3 li a, #header > .inside .mod_navigation ul li .level_4 li a {
  padding: 0;
}
#header > .inside .mod_navigation ul li .level_2 li.submenu > a > span:after, #header > .inside .mod_navigation ul li .level_2 li.submenu > a > strong:after, #header > .inside .mod_navigation ul li .level_2 li.submenu > strong:after, #header > .inside .mod_navigation ul li .level_3 li.submenu > a > span:after, #header > .inside .mod_navigation ul li .level_3 li.submenu > a > strong:after, #header > .inside .mod_navigation ul li .level_3 li.submenu > strong:after, #header > .inside .mod_navigation ul li .level_4 li.submenu > a > span:after, #header > .inside .mod_navigation ul li .level_4 li.submenu > a > strong:after, #header > .inside .mod_navigation ul li .level_4 li.submenu > strong:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 21px;
  top: 18px;
  right: 0;
  margin-right: 5px;
  background-size: 7px;
  background-repeat: no-repeat;
  background-image: url("/files/layout/plugins/fontawesome-pro/svgs/light/chevron-right.svg");
}
#header > .inside .mod_navigation ul li .level_2 li .level_3, #header > .inside .mod_navigation ul li .level_2 li .level_4, #header > .inside .mod_navigation ul li .level_3 li .level_3, #header > .inside .mod_navigation ul li .level_3 li .level_4, #header > .inside .mod_navigation ul li .level_4 li .level_3, #header > .inside .mod_navigation ul li .level_4 li .level_4 {
  margin-left: 100%;
  margin-top: -50px;
  border-top: 0;
  border-left: 1px solid var(--c-border);
}
@media (max-width: 1440px) {
  #header > .inside .mod_navigation ul li .level_2 li .level_3, #header > .inside .mod_navigation ul li .level_2 li .level_4, #header > .inside .mod_navigation ul li .level_3 li .level_3, #header > .inside .mod_navigation ul li .level_3 li .level_4, #header > .inside .mod_navigation ul li .level_4 li .level_3, #header > .inside .mod_navigation ul li .level_4 li .level_4 {
    margin-right: 100%;
    margin-left: 0;
    right: 0;
  }
}
#header > .inside .mod_navigation ul li:hover .level_2, #header > .inside .mod_navigation ul .level_2 li:hover .level_3, #header > .inside .mod_navigation ul .level_3 li:hover .level_4 {
  visibility: visible;
  opacity: 1;
}
/* Aktiv-/Trail-Unterstrich (live-design, @min-769): setzt KEIN content — der
   ::before-Kasten entsteht nur, wo die base.css-Link-Regeln content liefern.
   Desktop ≥1024 killt die heimseiten-content:none-Regel unten alles (Probe:
   content none an strong.active + a.trail) → wirkt real nur im Tablet-Fenster
   769–1023 auf a.trail im Burger-Menü. 1:1-Bestand. */
@media (min-width: 769px) {
  #header .mod_navigation ul li strong:before, #header .mod_navigation ul li a.trail:before {
    background-color: var(--c-brand);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
    webkit-transform: scaleX(0);
    width: 100%;
    transform: scaleX(1);
    visibility: visible;
    webkit-transform: scaleX(1);
  }
}

/* ── DESKTOP-FEINSCHICHT (heimseiten-stämmig; Original-Kommentare gekürzt —
   Messwerte/Begründungen im Stufen-Backup stufen/11-nav/). */
/* Submenü-Toggle-Buttons sr-only, sichtbar bei Tastatur-Fokus */
body.nav-is-desktop #header .mod_navigation .btn-toggle-submenu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); border: 0;
}
body.nav-is-desktop #header .mod_navigation .btn-toggle-submenu:focus-visible {
  position: static; width: auto; height: auto; clip-path: none; overflow: visible;
}
/* Abstände wie Live: a-Margins statt Core-flex/gap */
body.nav-is-desktop #header .mod_navigation ul.level_1 { display: block; gap: 0; }
body.nav-is-desktop #header .mod_navigation ul.level_1 > li { padding: 0; }
body.nav-is-desktop #header .mod_navigation ul.level_1 > li:last-child > :is(a, strong) { margin-right: 0; }
body.nav-is-desktop #header .mod_navigation ul.level_1 > li.submenu > a { padding-right: 16px; }
/* Keine Core-Unterstreichung (::before) in der Desktop-Nav */
body.nav-is-desktop #header .mod_navigation ul.level_1 :is(a, strong)::before { content: none; }
/* Dropdown-Items: Werte direkt aufs a/strong (C5 rendert keine spans);
   padding-!important gegen die ld-Regel `.level_2 li a{padding:0}` (1,4,3) */
body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) > li > :is(a, strong) {
  padding: 10px 25px 10px 20px !important;
  line-height: 30px; font-size: 15px; display: block;
  transition: background .25s ease-in-out, color .25s ease-in-out;
}
body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) > li > a:hover {
  background: var(--c-brand); color: #fff;
}
/* Trail-Elternpunkt im Dropdown grün (Probe-belegt contao-agentur: #7cab16;
   livetext-np=0 ist ein :not(:hover)-Artefakt — NICHT tot!) */
body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) > li.trail > a:not(:hover) {
  color: var(--c-brand);
}
body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) > li > strong {
  background: var(--c-brand); color: #fff;
}
/* keine Core-Dreieck-Spitze überm Dropdown */
body.nav-is-desktop .navigation-main .level_2::before { content: none; }
body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) > li.submenu { padding-right: 0 !important; }
body.nav-is-desktop #header .mod_navigation ul.level_1 > li { position: relative; }
/* transform:none!important neutralisiert das Core-JS-Inline-translateX */
body.nav-is-desktop #header .mod_navigation .navigation-main ul.level_2 { left: 0; right: auto; transform: none !important; }
body.nav-is-desktop #header .mod_navigation ul.level_2 > li { position: relative; }
body.nav-is-desktop #header .mod_navigation .navigation-main ul.level_3 { right: 100%; left: auto; top: 0; margin-top: 0 !important; }
@media (min-width: 1441px) {
  body.nav-is-desktop #header .mod_navigation .navigation-main ul.level_3 {
    left: 100%; right: auto; margin-left: 0 !important; margin-right: 0 !important;
  }
}
/* Chevrons aufs C5-Markup gemappt + Hover-Brücke */
body.nav-is-desktop #header .mod_navigation li.submenu > :is(a, strong) { position: relative; }
body.nav-is-desktop #header .mod_navigation .level_1 > li.submenu > :is(a, strong)::after {
  content: ""; position: absolute; width: 11px; height: 11px; top: 0.5em; margin-left: 5px;
  background: url('/files/layout/plugins/fontawesome-pro/svgs/light/chevron-down.svg') center / 11px no-repeat;
  transition: transform .25s ease-in-out;
}
body.nav-is-desktop #header .mod_navigation .level_1 > li.submenu:hover > :is(a, strong)::after,
body.nav-is-desktop #header .mod_navigation .level_1 > li.submenu.nav-expanded > :is(a, strong)::after,
body.nav-is-desktop #header .mod_navigation .level_1 > li.submenu:focus-within > :is(a, strong)::after {
  transform: rotate(180deg);
}
body.nav-is-desktop #header .mod_navigation :is(.level_2, .level_3) li.submenu > :is(a, strong)::after {
  content: ""; position: absolute; width: 11px; height: 21px; top: 18px; right: 0; margin-right: 5px;
  background: url('/files/layout/plugins/fontawesome-pro/svgs/light/chevron-right.svg') center / 7px no-repeat;
}
body.nav-is-desktop #header .mod_navigation .level_1 > li > .ul-wrapper > .level_2 { margin-top: 4px; }
/* unsichtbare Hover-Brücke über der 4px-Lücke */
body.nav-is-desktop #header .mod_navigation .level_1 > li > .ul-wrapper > .level_2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px;
}

/* ── MOBILE (heimseiten-stämmig) */
@media (max-width: 1023px) {
  #header > .inside .mod_navigation,
  #header .mod_navigation { display: block !important; }
}
@media (max-width: 1023px) {
  /* Logo im offenen Menü über dem Overlay — NUR z-index (position:relative
     wäre Regression: Header wüchse +46px, Burger hüpft) */
  body.nav-is-mobile.navigation-open #header .hs-logo { z-index: 10; }
  /* Burger mittig im 51px-Header — bewusst OHNE transform (Containing-Block-
     Falle für das fixed Overlay, s. Original-Kommentar) */
  body.nav-is-mobile #header .mod_navigation {
    top: calc((var(--header_height_mobile, 51px) - 44px) / 2); bottom: auto;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main :is(ul li > a, ul li > strong) {
    margin: 0 !important; padding: 12px 10px !important; display: inline-block !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_2 {
    position: static !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_2 {
    box-shadow: none !important; border-top: 0 !important; background: transparent !important; min-width: 0 !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main li.nav-expanded > .ul-wrapper > ul.level_2 {
    visibility: visible !important; opacity: 1 !important; filter: blur(0) !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_2 > li {
    position: relative !important; height: auto !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_2 .ul-wrapper {
    position: static !important; display: block !important;
    height: auto !important; overflow: visible !important;
    background: transparent !important; box-shadow: none !important;
    grid-template-rows: none !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_3 {
    display: none !important;
    position: static !important; left: auto !important; top: auto !important;
    transform: none !important; width: 100% !important; min-width: 0 !important;
    background: transparent !important; box-shadow: none !important;
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    opacity: 1 !important; visibility: visible !important; filter: none !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main li.nav-expanded > .ul-wrapper > ul.level_3 {
    display: block !important;
  }
  body.nav-is-mobile #header .mod_navigation .navigation-main ul.level_3 :is(a, strong) {
    padding-left: 30px !important;
  }
}
/* Overlay beginnt unter der 51px-Kopfzeile */
body.nav-is-mobile .navigation-main { margin-top: 51px; }
/* keine Untermenü-Chevrons im Overlay */
body.nav-is-mobile #header .mod_navigation li.submenu > :is(a, strong)::after { content: none; }
/* Ausblenden schneller als Blur (überstimmt Import-Transition per Reihenfolge —
   Selektor-identisch (0,5,2), lädt hier wie im Bestand NACH dem Import) */
body.nav-is-mobile .navigation-main .level_1 .ul-wrapper ul {
  transition:
      filter calc(var(--submenu-height-animation-duration) * .5s) ease-out,
      visibility calc(var(--submenu-height-animation-duration) * .5s) ease-out,
      opacity calc(var(--submenu-height-animation-duration) * .3s) ease-out;
}
/* aktiver level_2-Punkt weiß (gegen Core-!important-Grün) */
#header .mod_navigation ul.level_2 strong.active,
#header .mod_navigation ul.level_2 li.active > a { color: #fff !important; }

/* ── DARK (Element-Overrides 1:1 — KEIN --nav-*-Var-Flip einführen [Stufe-01-
   Diff-Beleg 3729px]; der EINE bestehende Flip --nav-mobile-active-background
   ist Bestand und bleibt 1:1. Mobile-Link-Farbe kommt seit der UX-Runde
   aus dem --nav-mobile-color-Dark-Flip in tokens [#d8d8d8].) */
html[data-theme="dark"] #header { background: rgba(18,18,18,.95); }
html[data-theme="dark"] #header .mod_navigation :is(a, strong, span) { color: #d8d8d8; }
html[data-theme="dark"] .mod_navigation :is(a:hover, .active > a, .active > strong, .trail > a) { color: #9bcc3a; }
html[data-theme="dark"] body.nav-is-mobile .navigation-main { background: var(--c-surface); }
html[data-theme="dark"] body.nav-is-desktop #header .mod_navigation .navigation-main :is(ul.level_2, ul.level_3) { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .navigation-main :is(a, strong, span, li, ul) { color: var(--c-text); }
/* !important = Bestand (versteckte #ddd-Border hoher Spezifität) */
html[data-theme="dark"] .navigation-main :is(li, ul, a) { border-color: var(--c-border) !important; }
html[data-theme="dark"] .navigation-main :is(li.active > a, li.active > strong, a:hover) { color: var(--c-brand); }
/* aktiver Mobile-Menüpunkt dunkler (bestehender Einzel-Var-Flip, Bestand) */
html[data-theme="dark"] { --nav-mobile-active-background: #2e2e2e; }
/* Hover-/Aktiv-Grünflächen abdunkeln via lokalem --c-brand-Redefine */
html[data-theme="dark"] #header .mod_navigation ul li :is(a:hover, strong, a.trail) { --c-brand: #557d00; }
/* UX-Runde 2026-07-15 (Niels-Befund): Submenü-Chevrons sind schwarze SVG-Hintergrundbilder →
   im Dark unsichtbar (war auch im Bestand so). invert dreht sie auf Weiß; deckt level_1
   (chevron-down) UND Dropdown-Ebenen (chevron-right) ab. */
html[data-theme="dark"] #header .mod_navigation li.submenu > :is(a, strong)::after { filter: invert(1); }