/*
 * site.css: Design der Seite www.baselight-vertrieb.de.
 * Teil 1 sind die Design-Tokens (Pfade der Schriften gelten relativ
 * zu /assets/), Teil 2 die Regeln je Baustein. Kein Build, kein Framework.
 *
 * Design-Tokens baselight-vertrieb.de.
 *
 * Die Anmerkung hinter einem Wert nennt seine Herkunft im Stil der früheren WordPress-Seite (Elementor,
 * Theme smartic) als Kürzel und Selektor; die ID im Selektor ist die Abschnitts-id aus content/*.yml.
 * Diese Stildateien liegen nicht im Repo, maßgeblich ist der Wert hier.
 *
 * Kürzel der Herkunft:
 *   kit      = globale Werte von Elementor
 *   theme    = Theme smartic
 *   header   = Kopf
 *   footer   = Fuß
 *   start    = Startseite (BOS und Bau nutzen dieselben Abschnitts-IDs)
 *   downl    = Downloads
 *   gemessen = im Browser abgelesener Wert
 */

/* Schriften: Red Hat Display liegt lokal (SIL OFL 1.1, siehe fonts/OFL.txt).
   Originaldateien von fonts.gstatic.com/s/redhatdisplay/v21, variable Schrift wght 300 bis 900. */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/RedHatDisplay-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/RedHatDisplay-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/RedHatDisplay-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/RedHatDisplay-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik (Copyright 2015 The Rubik Project Authors, SIL Open Font License 1.1, Lizenztext in fonts/OFL-Rubik.txt).
   Variable Schrift für die Gewichte 400 bis 700 (Grundschrift des Themes: Tabellen, mobiles Menü, FAQ-Titel, Footer-Labels).
   Liegt lokal im Repo, es gibt keinen Abruf bei Google. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Rubik-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===== Farben: Markenfarben ===== */
  --color-primary: #DD0000;            /* kit .elementor-kit-5 --e-global-color-primary; theme-inline body{--primary}; Knöpfe, Icon-Box-Icons, Download-Überschriften */
  --color-primary-hover: #C80000;      /* theme-inline <style id=smartic-style-inline-css> --primary_hover; auf den 5 Seiten nicht sichtbar gemessen */
  --color-secondary: #FF3333;          /* kit --e-global-color-secondary; auf den 5 Seiten nicht verwendet (gemessen) */
  --color-text: #666666;               /* kit --e-global-color-text; theme body{color:var(--text)}; Fließtext */
  --color-accent: #000000;             /* kit --e-global-color-accent; Überschriften, Menü, Outline-Knopf */
  --color-button-hover: #FFCC00;       /* kit .elementor-kit-5 .elementor-button:hover{background-color} */
  --color-button-hover-text: #000000;  /* kit .elementor-kit-5 .elementor-button:hover{color} */
  --color-white: #FFFFFF;

  /* ===== Farben: Flächen ===== */
  --color-bg-page: #F3F8FC;            /* start/BOS/Bau body.elementor-page-<id>{background-color}; auf allen Seiten */
  --color-bg-hero: #E6ECF2;            /* start .elementor-element-9449e21{background-color} (Abschnitt unter dem Slider) */
  --color-bg-footer: #333239;          /* footer .elementor-element-83f242a{background-color} */
  --color-bg-card: #FFFFFF;            /* footer .elementor-element-56a6e31 > .elementor-column-wrap (Kontaktkarte) */
  --color-bg-downloads: #F2F2F2;       /* downl .elementor-element-6886b45{background-color} */
  --color-slider-bullet: #D4DCE3;      /* Slider Revolution, inline style der rs-layer (Aufzählungsquadrate) */

  /* ===== Farben: Text-Nebenfarben ===== */
  --color-text-muted: #999999;         /* footer .elementor-element-7cc1395{color} (Adresse); entspricht theme --light */
  --color-on-dark: #FFFFFF;            /* footer .elementor-element-0516238 / -2d6cfb1 (Labels, Footer-Menü) */

  /* ===== Farben: Linien ===== */
  --color-border: #E6E6E6;             /* theme :root --border; Tabellenrahmen .entry-content table td */
  --color-border-toggle: #D5D8DC;      /* Elementor-Standard .elementor-toggle .elementor-tab-title{border-bottom} (FAQ) */
  --color-border-divider-light: #E5E5E5; /* downl Trennlinie */
  --color-border-on-dark: rgba(255, 255, 255, 0.1);  /* gemessen: Footer-Trennlinie .elementor-divider-separator */
  --color-border-social: rgba(255, 255, 255, 0.2);   /* footer .elementor-element-45b826b .elementor-social-icon{border-color:#FFFFFF33} */

  /* ===== Farben: Formular (WPForms-Standard, nicht Marke) ===== */
  --color-form-button: #066AAB;        /* inline wpforms-modern-full-inline-css --wpforms-button-background-color */
  --color-form-label: rgba(0, 0, 0, 0.85);    /* --wpforms-label-color */
  --color-form-field-text: rgba(0, 0, 0, 0.7);/* --wpforms-field-text-color */
  --color-form-field-border: rgba(0, 0, 0, 0.25); /* --wpforms-field-border-color */
  --color-form-error: #D63637;         /* --wpforms-label-error-color (Pflichtfeld-Stern) */

  /* ===== Schriften ===== */
  --font-primary: "Red Hat Display", sans-serif;   /* kit --e-global-typography-{primary,secondary,text,accent}-font-family */
  --font-theme: "Rubik", "Red Hat Display", sans-serif; /* Grundschrift des Themes (body, button, input, textarea); Rubik als freie Schrift */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;              /* Tabellenköpfe (Rubik), Download-Icon-Box-Titel */
  --weight-bold: 700;

  /* ===== Schriftgrößen und Zeilenhöhen (Desktop ab 1025 px) ===== */
  --text-body-size: 16px;              /* theme body{font-size:16px} */
  --text-body-lh: 24px;                /* theme body{line-height:1.5}, gemessen 24px */

  --h1-size: 41.8868px;                /* theme h1{font-size:2.617924em}; nur Impressum, gemessen */
  --h1-lh: 1.214;                      /* theme h1{line-height:1.214} */
  --h1-ls: -1px;                       /* theme h1{letter-spacing:-1px} */

  --h2-size: 50px;                     /* start .elementor-element-61eeabd .elementor-heading-title; footer -0287611 */
  --h2-lh: 60px;
  --h2-faq-size: 52px;                 /* start .elementor-element-ff5cdc4 .elementor-heading-title */
  --h2-faq-lh: 1;                      /* Elementor .elementor-heading-title{line-height:1} */
  --h2-pagetitle-size: 60px;           /* gemessen: Downloads und Impressum (Seitentitel als h2) */
  --h2-pagetitle-lh: 60px;

  --h3-size: 33px;                     /* start .elementor-element-1d4b73d .elementor-heading-title */
  --h3-lh: 36px;
  --h3-iconbox-size: 24px;             /* start .elementor-element-6a05b92 .elementor-icon-box-title (alle Breiten gleich) */
  --h3-iconbox-lh: 30px;
  --h3-iconbox-weight: 500;
  --h3-theme-size: 1.618em;            /* theme h3{font-size:1.618em}, in Textblöcken gemessen 25.888px */

  --h4-size: 1.41575em;                /* theme h4; auf den 5 Seiten nicht verwendet */
  --h5-size: 1em;                      /* theme h5; nicht verwendet */
  --h6-size: 0.875em;                  /* theme h6; nicht verwendet */

  --text-button-size: 14px;            /* kit .elementor-button{font-size:14px} */
  --text-button-lh: 1.5em;             /* kit line-height:1.5em, gemessen 21px */
  --text-button-weight: 700;

  --text-menu-size: 16px;              /* theme .main-navigation ul.menu li.menu-item > a{font-size} */
  --text-menu-lh: 24px;                /* gemessen */
  --text-menu-weight: 700;             /* header .elementor-element-1a9a31f .main-navigation ... a{font-weight:700} */

  --text-footer-label-size: 16px;      /* footer .elementor-element-0516238 (Rubik 500, uppercase) */
  --text-footer-link-size: 14px;       /* footer .elementor-element-2d6cfb1 .elementor-icon-list-text */
  --text-footer-link-lh: 30px;
  --text-footer-ls: 2px;               /* footer letter-spacing:2px (Labels und Menü) */

  --text-slider-title-size: 75px;      /* Slider Revolution data-text s:75,75,75,56 (Ebenen 1240/1024/778/480) */
  --text-slider-title-lh: 70px;        /* l:70,70,70,64 */
  --text-slider-sub-size: 47px;        /* s:47 l:50 */
  --text-slider-sub-lh: 50px;
  --text-slider-bullet-size: 25px;     /* s:25 l:32, weight 500 */
  --text-slider-bullet-lh: 32px;

  /* ===== Layout ===== */
  --container: 1290px;                 /* kit .elementor-section-boxed > .elementor-container{max-width:1290px}; theme --container */
  --container-narrow: 1000px;          /* start .elementor-element-bbb445d > .elementor-container{max-width:1000px} */
  --container-gutter: 10px;            /* Elementor Spalten-Innenabstand (default gap), gemessen 1290 → 1270 */
  --section-pad-x: 30px;               /* start .elementor-element-4899100{padding:0 30px}; header -3be13a9 */
  --header-height: 108px;              /* header .elementor-element-3be13a9 > .elementor-container{min-height} */

  --space-section: 100px;              /* start .elementor-element-4899100{margin-bottom:100px} */
  --space-section-lg: 150px;           /* start .elementor-element-663e284{margin-bottom:150px} (alle Breiten) */
  --space-section-sm: 50px;            /* start .elementor-element-f1d80cc{margin-bottom:50px} (alle Breiten) */
  --space-hero-bottom: 50px;           /* start .elementor-element-9449e21{padding-bottom} */
  --space-footer-top: 300px;           /* footer .elementor-element-83f242a{padding-top:300px}, Kontaktkarte ragt mit margin-bottom:-260px hinein */
  --space-footer-bottom: 45px;

  /* ===== Radien ===== */
  --radius-button: 4px;                /* kit .elementor-button{border-radius:4px} */
  --radius-form: 3px;                  /* --wpforms-field-border-radius, --wpforms-button-border-radius */
  --radius-card: 50px;                 /* footer .elementor-element-56a6e31 (Kontaktkarte, rundum) */
  --radius-media-corner: 50px;         /* start .elementor-element-4f96f00 (nur eine Ecke, z. B. 50px 0 0 0) */
  --radius-social: 30px;               /* footer .elementor-element-45b826b .elementor-icon */
  --radius-round: 50%;                 /* Swiper-Punkte .swiper-pagination-bullet */

  /* ===== Schatten ===== */
  --shadow-none: none;                 /* gemessen: kein eigener Schatten auf den 5 Seiten (einziger: Google-reCAPTCHA-Badge) */

  /* ===== Knöpfe ===== */
  --button-pad-y: 15px;                /* kit .elementor-button{padding:15px 45px} */
  --button-pad-x: 45px;
  --button-header-pad-y: 12px;         /* header .elementor-element-d4b464a .elementor-button{padding:12px 30px} */
  --button-header-pad-x: 30px;
  --button-outline-border: 1px;        /* start .elementor-element-50bc3f1 .elementor-button{border-width:1px} */
  --button-transition: 0.3s;           /* gemessen transition-duration (Elementor frontend) */
  --button-group-gap: 15px;             /* Neu: Abstand zwischen den Knöpfen unter dem Modelltext, wie --button-pad-y (Skala 10, 15, 30) */

  /* ===== Bausteine ohne Vorlage im WordPress-Stil ===== */
  --lux-image-width: 480px;            /* Sportplatzbild neben dem Lux-Text am PC (Querformat 3 : 2; ein hohes Hochformat ließ den kurzen Text daneben verloren wirken); derselbe Wert steht in templates/bausteine/lux.php (sizes) */
  --media-text-gap: 40px;              /* Mindestabstand zwischen Bild und Text in zweispaltigen Bausteinen (10 bis 30 px wären zu eng) */
  --download-group-size: 36px;         /* Gruppenüberschrift der Downloadliste („Presseberichte“), wie --h2-size mobil */
  --download-group-lh: 40px;
  --download-group-mt: 50px;           /* Abstand über der Gruppe, wie --space-section-sm */
  --hero-image-strip-height: 200px;    /* Bildstreifen des Aufmachers auf dem Handy, nur in der Handy-Regel genutzt */

  /* ===== Breakpoints (nur Doku, in Medienabfragen nicht als Variable nutzbar) ===== */
  --bp-mobile-max: 767px;              /* Elementor mobile, max-width */
  --bp-tablet-max: 1024px;             /* Elementor tablet, max-width; Desktop ab 1025px */
}

/* ===== Tablet (max-width: 1024px), Quelle jeweils dieselbe Regel in der @media-Variante ===== */
@media (max-width: 1024px) {
  :root {
    --container: 1024px;               /* kit @media(max-width:1024px) */
    --h2-size: 42px;                   /* start 61eeabd tablet; footer 0287611 nutzt 36px/40px */
    --h2-lh: 52px;
    --h3-size: 42px;                   /* start 1d4b73d tablet: größer als Desktop (33px), siehe Doku */
    --h3-lh: 52px;
    --h2-pagetitle-size: 60px;         /* gemessen Impressum; Downloads 42px/42px */
    --header-height: 80px;             /* header @media(max-width:1024px) min-height:80px */
    --space-section: 80px;             /* start 4899100 tablet */
    --space-hero-bottom: 80px;         /* start 9449e21 tablet: größer als Desktop */
  }
}

/* ===== Mobil (max-width: 767px) ===== */
@media (max-width: 767px) {
  :root {
    --container: 767px;                /* kit @media(max-width:767px) */
    --h2-size: 36px;                   /* start e8ec6fa mobil; weitere Überschriften 35 bis 39px, siehe Doku */
    --h2-lh: 40px;
    --h2-faq-size: 39px;               /* start ff5cdc4 mobil */
    --h2-pagetitle-size: 47px;         /* gemessen Impressum; Downloads 36px */
    --h2-pagetitle-lh: 47px;
    --h3-size: 26px;                   /* start 1d4b73d mobil */
    --h3-lh: 32px;
    --section-pad-x: 15px;             /* header 3be13a9 mobil 0 15px; Inhaltsabschnitte 4899100 mobil 0px */
    --space-section: 0px;              /* start 4899100 mobil margin-bottom 0; andere Abschnitte 60px */
    --space-section-mobile-alt: 60px;  /* start 209a1fd / bbb445d mobil */
    --space-hero-bottom: 60px;
    --space-footer-top: 60px;          /* footer 83f242a mobil padding:60px 15px 45px */
    --text-slider-title-size: 56px;    /* Slider-Ebene 480 */
    --text-slider-title-lh: 64px;
    --download-group-size: 30px;       /* Gruppenüberschrift der Downloadliste auf dem Handy */
    --download-group-lh: 34px;
    --download-group-mt: 40px;
  }
}


/* ======================================================================
   Teil 2: Regeln je Baustein
   ====================================================================== */
/* Breiten wie Elementor: Desktop ab 1025 px, Tablet 768 bis 1024 px, Handy bis 767 px.
   Abstände der Abschnitte stammen aus dem Stil der früheren WordPress-Seite, die
   Abschnitts-ID im Selektor ist die Elementor-ID aus content/*.yml. */

/* ---------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text);
  background: var(--color-bg-page);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* theme body */
}
img { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; flex: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-accent); font-family: var(--font-primary); font-weight: var(--weight-bold); }
/* Lange Wörter in Überschriften trennt der Browser mit Trennstrich (lang="de"), statt sie über
   den Kasten ragen zu lassen oder ohne Strich zu brechen („Datenschutzerkl / ärung“). Erst ab 12 Zeichen, damit kurze
   Wörter ganz bleiben; overflow-wrap aus body bricht nur, wenn kein Trennpunkt passt.
   Nur unter 1200 px: ab dort brechen die Überschriften um wie vor der Silbentrennung. */
@media (max-width: 1199px) { h1, h2, h3, h4, h5, h6 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
p, ul, ol { margin: 0 0 1em; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-form-button); outline-offset: 2px; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.debug-hinweis { margin: 20px; padding: 15px; border: 2px solid var(--color-primary); color: var(--color-primary); background: var(--color-white); }

/* Sichtbarkeit je Gerät (Elementor „Ausblenden auf …“) */
@media (min-width: 1025px) { .aus-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .aus-tablet { display: none !important; } }
@media (max-width: 767px) { .aus-mobil { display: none !important; } }

/* Fließtext aus Markdown */
.fliesstext > :last-child { margin-bottom: 0; }
.fliesstext a { color: var(--color-primary); }
.fliesstext h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: var(--weight-bold); margin: 0 0 0.5em; }
.fliesstext h2 { font-size: 32px; line-height: 38.85px; font-weight: var(--weight-bold); margin: 1em 0 0.5em; } /* theme h2 fett, gemessen Impressum */
.fliesstext h3 { font-size: var(--h3-theme-size); line-height: 24px; font-weight: var(--weight-bold); margin: 0 0 0.5em; } /* Zeilenhöhe gemessen Impressum */
.fliesstext ul, .fliesstext ol { padding-left: 1.5em; }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: var(--button-pad-y) var(--button-pad-x);
  font-family: var(--font-primary); font-size: var(--text-button-size); line-height: 21px; font-weight: var(--text-button-weight);
  border-radius: var(--radius-button);
  border: 0;
  text-decoration: none; text-align: center;
  transition: background-color var(--button-transition), color var(--button-transition), border-color var(--button-transition);
}
.knopf--primaer, .knopf--kopf, .knopf--download { background: var(--color-primary); color: var(--color-white); }
.knopf--primaer:hover, .knopf--kopf:hover, .knopf--download:hover,
.knopf--primaer:focus-visible, .knopf--kopf:focus-visible, .knopf--download:focus-visible {
  background: var(--color-button-hover); color: var(--color-button-hover-text);
}
.knopf--rahmen { background: transparent; color: var(--color-accent); border: var(--button-outline-border) solid var(--color-accent); } /* nur der Rahmenknopf hat einen Rand (start 50bc3f1) */
.knopf--rahmen:hover, .knopf--rahmen:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } /* nur Schrift und Rand rot, Hintergrund bleibt leer */
.knopf--kopf { padding: var(--button-header-pad-y) var(--button-header-pad-x); }
.knopf--download { padding: 10px 22px; } /* 41 px hoch (10 px 22 px); Tippfläche 44 px wie beim Sendeknopf über durchsichtige Ränder */
.knopf--download { border: solid transparent; border-width: 1px 0 2px; background-clip: padding-box; border-radius: var(--radius-button) / 5px 5px 6px 6px; } /* ganze Pixel: Chrome rundet 1,5 px Rand ab */
.knopf--download:hover, .knopf--download:focus-visible { background-clip: padding-box; } /* die Hover-Regel setzt background neu */

/* ---------------------------------------------------------------- Kopf */
.kopf { position: relative; z-index: 20; padding: 0 var(--section-pad-x); }
.kopf--ueber-aufmacher { position: absolute; top: 0; left: 0; right: 0; }
.kopf__innen {
  position: relative; max-width: var(--container); margin: 0 auto;
  min-height: var(--header-height); display: flex; align-items: center;
}
/* Spalten: header 36dddb2 20 %, ad48c83 50 % mit 10 px Rand, f979249 29,332 % */
.kopf__logo { display: flex; align-items: center; min-height: 44px; flex: 0 0 20%; }
.kopf__logo img { width: 187px; }
/* Mit „Downloads“ hat das Menü sieben Punkte und braucht mehr als 50 %. Es bleibt einzeilig
   und nimmt sich den Platz aus der Knopf-Spalte; Anfang und Abstände der Punkte bleiben gleich. */
.kopf__menue { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
/* Theme smartic: li inline-block (Leerzeichen dazwischen in der Theme-Schrift), ul margin-left -1.1em, a padding 1.7em 1.1em */
.kopf__menue ul { list-style: none; margin: 0 0 0 -17.6px; padding: 0; font-family: var(--font-theme); }
.kopf__menue ul { white-space: nowrap; }
.kopf__menue li { display: inline-block; }
.kopf__menue a {
  display: block; padding: 27.2px 17.6px;
  font-family: var(--font-primary); font-size: var(--text-menu-size); line-height: var(--text-menu-lh); font-weight: var(--text-menu-weight);
  color: var(--color-accent); text-decoration: none; transition: color var(--button-transition);
}
.kopf__menue a:hover, .kopf__menue a:focus-visible { color: var(--color-text); }
/* Sieben Menüpunkte passen bei schmalen PC-Breiten nur mit engerem Abstand (ab 1280 px der volle Abstand). */
@media (min-width: 1025px) and (max-width: 1279px) {
  .kopf__menue ul { margin-left: -10px; }
  .kopf__menue a { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 1025px) and (max-width: 1119px) {
  .kopf__menue ul { margin-left: -7px; }
  .kopf__menue a { padding-left: 7px; padding-right: 7px; font-size: 15px; }
}
.kopf__knopf { flex: 0 0 auto; margin-right: 0.668%; display: flex; justify-content: flex-end; } /* rechts bleibt der Rest der drei Spalten (100 % minus 99,332 %) frei */
.kopf__menueknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--color-accent); font-size: 20px; /* Menüsymbol 20 px */
}
@media (max-width: 1024px) {
  .kopf__knopf { margin-right: 0; }
  .kopf__innen { justify-content: center; }
  .kopf__logo { flex: none; }
  /* Symbol bei x 15 (17,5 × 20 px) und 1,3 px unter der Mitte; die 44 px Tippfläche liegt mittig darum */
  .kopf__menueknopf { position: absolute; left: -13.25px; top: calc(50% + 1.25px); transform: translateY(-50%); }
}
/* Handy-Kopf mit Kontakt-Knopf rechts; Logo kleiner und hinter
   den Menüknopf gerückt, damit Menüknopf, Logo und Knopf in 390 px nebeneinander passen. */
@media (max-width: 767px) {
  .kopf__innen { justify-content: space-between; gap: 8px; }
  .kopf__logo { margin-left: 36px; }
  .kopf__logo img { width: 140px; }
  .kopf__logo { flex: 0 1 auto; min-width: 0; } /* unter 357 px ragte der Kontakt-Knopf über den Rand (320 px: Seite 352 px breit); dort wird das Logo schmaler */
  .kopf__knopf { flex: none; }
  .knopf--kopf { padding: 0 12px; font-size: 14px; white-space: nowrap; }
}

/* Handy-Menü: schwarze Leiste von links, ohne JavaScript über :target */
.menue-mobil {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
  width: 300px; max-width: 85vw; overflow-y: auto;
  padding: 45px 10px 10px; background: #000; color: var(--color-white); /* Innenrand 10 px, Liste ab y 45 */
  transform: translateX(-100%); visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s; /* Menü gleitet in 0,25 s herein */
}
/* Abdunklung hinter dem offenen Menü , Klick schließt */
.menue-mobil__abdunklung {
  position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s;
}
.menue-mobil:target + .menue-mobil__abdunklung, .menue-mobil.ist-offen + .menue-mobil__abdunklung { opacity: 1; visibility: visible; }
html.menue-offen { overflow: hidden; }
@media (min-width: 1025px) { .menue-mobil__abdunklung { display: none; } }
.menue-mobil:target, .menue-mobil.ist-offen { transform: none; visibility: visible; }
.menue-mobil ul { list-style: none; margin: 0; padding: 0; }
/* Je Eintrag 40 px (Link 8 px Innenrand, Zeile 24 px), Linie #0e0e0e über jedem weiteren Eintrag,
   eingerückt wie die Liste. Tippfläche 44 px: der Link ragt je 2 px in die Nachbarn, Text bleibt an seiner Stelle. */
.menue-mobil li + li { border-top: 1px solid #0E0E0E; }
.menue-mobil a {
  display: flex; align-items: center; min-height: 44px; margin: -2px 0; padding: 0 8px;
  font-family: var(--font-theme); font-size: 16px; line-height: 24px; color: var(--color-white); text-decoration: none;
}
/* Schließen: Symbolfläche 46 × 24 px oben rechts (10 px Rand), Symbol 2,3 px unter der Mitte; hier 44 px hoch um dieselbe Mitte */
.menue-mobil .menue-mobil__zu {
  position: absolute; top: 0; right: 10px; width: 46px; height: 44px; margin: 0; padding: 4.6px 0 0;
  justify-content: center; font-size: 16px; /* Schließen-Symbol 16 px */
}
@media (min-width: 1025px) { .menue-mobil { display: none; } }
@media (prefers-reduced-motion: reduce) { .menue-mobil, .menue-mobil__abdunklung { transition: none; } }

/* ---------------------------------------------------------------- Abschnitte allgemein */
.abschnitt {
  --abschnitt-pad: var(--section-pad-x);
  padding-left: max(var(--abschnitt-pad), calc((100% - var(--container)) / 2));
  padding-right: max(var(--abschnitt-pad), calc((100% - var(--container)) / 2));
  margin-bottom: var(--space-section);
}
.titel-abschnitt {
  font-size: var(--h2-size); line-height: var(--h2-lh); text-align: center; margin: 0 0 40px;
}
.titel-abschnitt--faq, .titel-abschnitt--schmal { font-size: var(--h2-faq-size); line-height: var(--h2-faq-lh); }
.titel-seite { font-size: var(--h2-pagetitle-size); line-height: var(--h2-pagetitle-lh); }
@media (max-width: 767px) {
  .abschnitt { --abschnitt-pad: 20px; }
  .titel-abschnitt { margin: 0 0 30px; } /* Vorher 20 px über den Abschnittsrand hinaus, „So weit reicht das Licht“ stand 3 px am Bildschirmrand */
  .titel-abschnitt--schmal { font-size: 37px; line-height: 37px; }
  .modellreihe[data-id="6ad4d3b"] > .titel-abschnitt, .kacheln__titel { font-size: 35px; } /* gemessen 6ad4d3b, 67a0f5f mobil; die übrigen Modellreihen 36px */
}

/* Abstände je Abschnitt aus start/BOS/Bau-CSS (margin je Elementor-ID und Breite). Zwischen zwei
   Abschnitten fallen die Abstände zusammen (Blockfluss). */
@media (min-width: 1025px) { /* Tablet: Modellreihen ohne Abstand oben (start 6ad4d3b, 4899100, 7b90e83, 89d19c4 tablet) */
  .modellreihe[data-id="6ad4d3b"] { margin-top: 135px; }
  .modellreihe[data-id="4899100"], .modellreihe[data-id="7b90e83"] { margin-top: 125px; }
  .modellreihe[data-id="89d19c4"] { margin-top: 150px; }
  .logos, .presse { margin-top: 150px; margin-bottom: 150px; } /* bbb445d, a2baf04 */
}
.vorteile[data-id="f1d80cc"] { margin-top: 75px; margin-bottom: var(--space-section-sm); }
.kacheln[data-id="209a1fd"] { margin-top: 0; }
.faq { margin-top: 0; margin-bottom: var(--space-section-lg); }
.galerie { margin-top: 0; margin-bottom: var(--space-section-lg); }
@media (max-width: 767px) {
  .modellreihe { margin-top: 75px !important; margin-bottom: 0; }
  .kacheln[data-id="209a1fd"] { margin-top: 100px; margin-bottom: var(--space-section-mobile-alt); }
  .logos, .presse { margin-top: 0; margin-bottom: var(--space-section-mobile-alt); }
}

/* ---------------------------------------------------------------- Aufmacher (statt Slider) */
/* Lage der Ebenen (Breiten 1240/1024/480):
   Text links ab y 184/85/85, zwischen Text und Trennlinie --aufmacher-luft, nach der Linie 36 px.
   Die Höhe der Fläche ist die Höhe des Aufmachers plus Abschnitts-Abstand (810+65+50, 883+65+80, 1024+65+60). */
.aufmacher { --aufmacher-luft: 36px; background: var(--color-bg-hero); padding: 146px 30px 0; min-height: 925px; }
/* Das Bild fliegt von rechts ein (translateX 100 %) und ragt dabei über den Rand. Es liegt nicht in
   einer maskierten Ebene; ohne Abschneiden dehnt der Überstand auf dem Handy den Viewport (Seite
   erscheint herausgezoomt). clip statt hidden: kein Scroll-Container, senkrecht bleibt alles sichtbar. */
.aufmacher { overflow-x: clip; }
.aufmacher__innen { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.aufmacher__text { flex: 0 1 460px; padding-top: 38px; color: var(--color-accent); }
.aufmacher__titel { font-size: 68px; line-height: 63px; font-weight: var(--weight-bold); margin: 0; width: 442.8px; } /* 492 px, auf 90 % verkleinert */
.aufmacher__untertitel { font-size: var(--text-slider-sub-size); line-height: var(--text-slider-sub-lh); font-weight: var(--weight-bold); margin: 0 0 var(--aufmacher-luft); }
.aufmacher__untertitel--mit-claim { margin-bottom: 14px; }
.aufmacher__claim { font-size: var(--text-slider-bullet-size); line-height: var(--text-slider-bullet-lh); font-weight: var(--weight-medium); margin: 0 0 var(--aufmacher-luft); } /* Claim als Unterzeile: Größe der Stichpunkte, Abstand zu den Stichpunkten wie der Untertitel */
.aufmacher__punkte { list-style: none; margin: 0; padding: 0; font-size: var(--text-slider-bullet-size); line-height: var(--text-slider-bullet-lh); font-weight: var(--weight-medium); }
.aufmacher__punkte li { position: relative; padding: 36px 0 var(--aufmacher-luft); border-bottom: 1px solid transparent; }
.aufmacher__punkte li:first-child { border-top: 1px solid transparent; }
.aufmacher__punkte li:last-child { border-bottom: 0; padding-bottom: 0; }
.aufmacher__punkt { display: block; }
/* Trennlinien als eigene Ebene, liegen genau auf dem Rahmen */
.aufmacher__punkte li::after, .aufmacher__punkte li:first-child::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-slider-bullet);
}
.aufmacher__punkte li:first-child::before { top: -1px; bottom: auto; }
.aufmacher__punkte li:last-child::after { content: none; }
.aufmacher__bild { flex: 0 0 432px; }
.aufmacher__bild img { width: 432px; }
@media (max-width: 1024px) {
  .aufmacher { --aufmacher-luft: 26px; padding: 85px 30px 0; min-height: 1028px; }
  .aufmacher__innen { max-width: 724px; padding: 0 20px; justify-content: flex-start; gap: 0; }
  .aufmacher__text { flex: 0 0 252px; min-width: 0; padding-top: 0; }
  .aufmacher__titel { font-size: 48px; line-height: 45px; width: 315px; } /* ragt über die Spalte */
  .aufmacher__untertitel { width: 315px; } /* so breit wie der Titel: „Lichtmasten“ (273 px) passt sonst nicht in die 252-px-Spalte und brach als „Lichtmaste-n“ um */
  .aufmacher__bild { flex: 0 0 307px; margin-left: 210px; } /* Bild bei x 632, ragt über die Zeile hinaus */
  .aufmacher__bild img { width: 307px; }
}
/* Auf dem Handy stehen Text und Bild
   untereinander, der Aufmacher ist etwa 70 % der Bildschirmhöhe. Das Bild ist ein Querstreifen über die
   volle Breite zwischen Überschrift und Stichpunkten (die schmale Spalte wäre zu klein); der
   Text bekommt die volle Breite. Dafür löst display: contents den Textblock auf, und order reiht das Bild ein.
   Unten 20 statt 30 px Luft, damit der Aufmacher unter 75 % bleibt. */
@media (max-width: 767px) {
  .aufmacher { --aufmacher-luft: 10px; padding: 85px 15px 8px; min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; }
  .aufmacher__innen { flex: 1 0 auto; width: 100%; max-width: none; padding: 0; flex-direction: column; align-items: stretch; text-align: left; gap: 0; }
  .aufmacher__text { display: contents; }
  .aufmacher__titel { order: 1; font-size: 34px; line-height: 40px; font-weight: var(--weight-medium); width: auto; white-space: nowrap; }
  .aufmacher__untertitel { order: 2; font-size: 26px; line-height: 30px; font-weight: var(--weight-regular); width: auto; }
  .aufmacher__untertitel--mit-claim { margin-bottom: 2px; }
  .aufmacher__claim { order: 2; font-size: 18px; line-height: 24px; font-weight: var(--weight-regular); margin-bottom: 4px; } /* knapper Rand, damit der Aufmacher mit der Claim-Zeile unter 75 % des Handy-Bildschirms bleibt */
  .aufmacher__bild { order: 3; flex: 0 0 auto; min-height: var(--hero-image-strip-height); aspect-ratio: 37 / 20; margin: 0 0 var(--aufmacher-luft); position: relative; }
  .aufmacher__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ausschnitt-mobil, 50% 8%); } /* Ausschnitt aus bild_ausschnitt_mobil (das Gerät soll zu sehen sein), ohne Angabe Helm und Gesicht oben; der Streifen ist mindestens so hoch wie das Token und höchstens 1,85 : 1 flach, damit das Gerät auf breiten Handys nicht angeschnitten wird */
  .aufmacher__punkte { order: 4; font-size: 16px; line-height: 22px; font-weight: var(--weight-regular); }
  .aufmacher__punkte li { padding-top: 10px; }
}

/* ---------------------------------------------------------------- Modellreihe
   Aufbau: Abschnitt (full width, 30 px Rand) > Überschrift > innerer Abschnitt (75 px Rand)
   > Bildspalte (Anteil je Abschnitt, 10 px Innenrand) und Textspalte (rechts 120 px frei, Tablet
   links 30 px, Handy oben 30 px). Werte je Elementor-ID aus start/BOS/Bau-CSS, Breite des Text-
   Widgets in % der Spalte (width-initial), Tabelle wie Theme smartic (Rahmen rechts 70 px frei ab
   1024 px, sonst 30 px; feste Höhe .scrollbar-external). */
.modellreihe {
  --mr-h2-mb: 45px; --mr-bild-anteil: 45%; --mr-bild-mt: 0px; --mr-text-ml: 0px; --mr-text-breite: 96.762%;
  --mr-text-mt: 0px; --technik-hoehe: 348px; --technik-mb: 0px;
  padding-left: 30px; padding-right: 30px;
}
.modellreihe > .titel-abschnitt { margin: 0 0 var(--mr-h2-mb); }
.modellreihe__spalten { display: flex; align-items: flex-start; padding: 0 75px; }
.modellreihe__bild { flex: 0 0 var(--mr-bild-anteil); min-width: 0; padding: 10px; margin-top: var(--mr-bild-mt); }
.modellreihe__bild img { width: 100%; }
.modellreihe__text { flex: 1 1 0; min-width: 0; margin-left: var(--mr-text-ml); padding: 0 120px 0 0; color: var(--color-accent); }
.modellreihe__text > .fliesstext { width: var(--mr-text-breite); margin: var(--mr-text-mt) 0 25px; }
/* Am Rechner stünden Bild und Text sonst nur 10 px auseinander (Innenrand der Bildspalte); die
   Bildspalte hält zur Textseite --media-text-gap, das Bild wird dafür schmaler, Text, Tabelle und Knöpfe bleiben gleich
   breit. Ist der Text kürzer als das Bild (600MX BAHN), steht er senkrecht mittig daneben statt oben am Rand. */
@media (min-width: 1025px) {
  .modellreihe__bild { padding-right: var(--media-text-gap); }
  .modellreihe__spalten--bild-rechts .modellreihe__bild { padding-right: 10px; padding-left: var(--media-text-gap); }
}
@media (min-width: 768px) { .modellreihe__text { align-self: center; } }
.modellreihe .fliesstext h3 { line-height: 38.832px; font-weight: var(--weight-bold); }
/* Die MX-Tabelle hat mit „Fläche über 5 Lux“ eine 8. Zeile; der Rahmen wächst mit, statt einen Rollbalken zu zeigen. */
.modellreihe[data-id="89d19c4"] { --technik-hoehe: 382px; }
.technik__rahmen { min-height: var(--technik-hoehe); margin-bottom: var(--technik-mb); padding-right: 30px; overflow: auto; }
.technik { width: 100%; border-collapse: collapse; margin: 0 0 22.652px; font-family: var(--font-theme); }
.technik th, .technik td { padding: 10px 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.technik tr:last-child th, .technik tr:last-child td { border-bottom: 0; }
.technik th { font-size: 16px; line-height: 24px; font-weight: var(--weight-semibold); color: var(--color-accent); white-space: nowrap; }
.technik td { font-size: 14px; line-height: 21px; color: var(--color-text); }
.technik__wert { display: block; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: var(--button-group-gap); } /* Jetzt: am Rechner nebeneinander, gleich hoch (stretch), 15 px Abstand; reicht die Spalte nicht, bricht der zweite Knopf um statt über den Rand zu ragen */
@media (min-width: 1200px) { .modellreihe__text > .knoepfe { margin-right: -120px; } } /* die Knopfreihe darf den rechten Freiraum der Textspalte (120 px) nutzen; so passen beide Knöpfe ab 1200 px in jeder Modellreihe nebeneinander (gemessen: 219 + 15 + 257 px, schmalste Spalte 6ad4d3b 495 px bei 1200) */
@media (max-width: 1199px) { .knoepfe { display: grid; grid-template-columns: max-content; grid-auto-rows: 1fr; } } /* schmaler (kleiner Laptop, Tablet, Handy) untereinander, beide so breit wie der breitere, linke Kante bündig: nebeneinander passten sie dort nicht in jede Spalte, umgebrochen wären sie ungleich breit */
@media (max-width: 1024px) { .knoepfe > .knopf { padding-left: 20px; padding-right: 20px; } } /* d3f5e27, 50bc3f1, ff12344 … tablet 15px 20px */
@media (min-width: 1024px) { .technik__rahmen { padding-right: 70px; } }
@media (max-width: 1023px) { .technik th { font-size: 14px; line-height: 21px; white-space: normal; padding-right: 10px; } } /* Tablet: schmale Textspalte, das Merkmal wird kleiner und darf umbrechen, statt den Rahmen seitlich oder senkrecht rollen zu lassen */
/* Je Abschnitt (Abschnitts-IDs aus content/*.yml) */
.modellreihe[data-id="6ad4d3b"] { --mr-h2-mb: 83px; --mr-bild-anteil: 50%; }
.modellreihe[data-id="6ad4d3b"] .modellreihe__bild img { width: calc(100% - 50px); } /* f354728 margin-right 50 px */
@media (min-width: 1025px) { .modellreihe[data-id="6ad4d3b"] .modellreihe__bild img { width: calc(100% - 20px); } } /* 50 px Abstand, davon 30 px schon im Abstand zum Text (--media-text-gap statt 10 px): Bild gleich groß und an derselben Stelle */
.modellreihe[data-id="4899100"] { --mr-bild-mt: -40px; --mr-text-breite: 100%; } /* 7bb01b6 margin-top -40 px; 42fa2b5 120,44 % auf die Spalte begrenzt */
.modellreihe[data-id="4899100"] .modellreihe__bild img { width: 76.212%; margin-left: auto; } /* 94e1d49, Spalte rechtsbündig */
.modellreihe[data-id="7b90e83"] { --technik-mb: 20px; }
/* BOS und Bau: 4899100 ohne Versatz und Bildbreite, Text 96,762 %, Tabelle 20 px Abstand (Post 26350, 26444) */
.seite-bos-landing .modellreihe[data-id="4899100"], .seite-bau-landing .modellreihe[data-id="4899100"] { --mr-bild-mt: 0px; --technik-mb: 20px; }
.seite-bos-landing .modellreihe[data-id="4899100"] .modellreihe__bild img, .seite-bau-landing .modellreihe[data-id="4899100"] .modellreihe__bild img { width: 100%; margin-left: 0; }
@media (min-width: 768px) {
  .seite-bos-landing .modellreihe[data-id="4899100"], .seite-bau-landing .modellreihe[data-id="4899100"] { --mr-text-breite: 96.762%; }
}
.modellreihe[data-id="89d19c4"] { --mr-bild-anteil: 42%; --mr-text-ml: 47px; --mr-text-mt: 35px; --technik-mb: 20px; }
.modellreihe[data-id="89d19c4"] .modellreihe__bild img { width: calc((100% - 40px) * 0.75); margin-left: calc(40px + (100% - 40px) * 0.125); } /* 7ea6ab5: 40 px links, Bild 75 %, mittig */
@media (max-width: 1024px) {
  .modellreihe__text { padding: 0 0 0 30px; }
}
@media (max-width: 767px) {
  .modellreihe { padding-left: 0; padding-right: 0; }
  .modellreihe__spalten, .modellreihe__spalten--bild-rechts { flex-direction: column; align-items: stretch; padding: 0 20px; }
  .modellreihe__bild, .modellreihe__text { flex: none; width: auto; }
  .modellreihe__text { padding: 30px 0 0; display: flex; flex-direction: column; align-items: center; }
  .modellreihe__text > .fliesstext, .modellreihe__text > .technik__rahmen { align-self: center; }
  .modellreihe__text > .technik__rahmen { width: 100%; padding-right: 0; }
  /* Versätze vom Rechner (Textspalte 47 px eingerückt, Bilder rechtsbündig oder 40 px eingerückt)
     schoben Bild, Text, Tabelle und Knöpfe auf dem Handy aus der Mitte; hier steht alles mittig. */
  .modellreihe[data-id] { --mr-text-ml: 0px; }
  .modellreihe > .titel-abschnitt { padding-left: 20px; padding-right: 20px; } /* der Abschnitt hat am Handy keinen Rand, die Überschrift stand 4 px am Bildschirmrand */
  .modellreihe[data-id] .modellreihe__bild img { display: block; margin-left: auto; margin-right: auto; }
  .modellreihe[data-id="6ad4d3b"] .modellreihe__bild img { width: 100%; }
  .modellreihe .fliesstext h3 { text-align: center; }
  .knoepfe { display: grid; grid-template-columns: max-content; justify-content: center; margin-bottom: 25px; } /* Handy: eine Spalte, beide Knöpfe so breit wie der breitere, mittig; 50bc3f1, 16d115a, dd68348 mobil: 25 px unter den Knöpfen */
  .modellreihe[data-id="6ad4d3b"] { --mr-h2-mb: 75px; }
  .modellreihe[data-id="6ad4d3b"] .knoepfe { margin-top: 25px; } /* d3f5e27 mobil */
  .modellreihe[data-id="4899100"], .modellreihe[data-id="7b90e83"] { --mr-text-breite: 100%; --technik-hoehe: 555px; }
  .modellreihe[data-id="89d19c4"] { --technik-hoehe: 630px; padding-left: 15px; padding-right: 15px; } /* mit der 8. Zeile „Fläche über 5 Lux“ 630 px, ohne Rollbalken */
  .modellreihe[data-id="89d19c4"] .modellreihe__spalten { padding: 0; }
}
/* Handy-Tabelle wie Theme smartic bis 500 px: Merkmal als Zeile über dem Wert */
@media (max-width: 500px) {
  .technik, .technik tbody, .technik tr { display: block; }
  .technik th, .technik td { display: block; }
  .technik th { padding: 0; margin: 10px 0; border-bottom: 0; white-space: normal; }
  .technik td { padding: 0 0 10px; }
}

/* ---------------------------------------------------------------- Modellpaar (Sondermodelle nebeneinander)
   Zwei Modellreihen als Karten unter einer gemeinsamen Überschrift: Bild oben, darunter Titel, Text, Tabelle und Knöpfe.
   Ab 768 px nebeneinander, darunter untereinander. Die Karten nutzen die Bausteinvorlage der Modellreihe; die Regeln je
   Elementor-ID (Bildbreite, Versatz, Abstand) heben die Selektoren mit [data-id] hier wieder auf. */
.modellpaar { margin-top: 125px; margin-bottom: var(--space-section); padding: 0 30px; }
.modellpaar__titel { margin: 0 0 45px; }
.modellpaar__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; max-width: 1200px; margin: 0 auto; }
.modellpaar .modellreihe[data-id] { margin: 0 !important; padding: 0; min-width: 0; --mr-text-breite: 100%; --mr-text-mt: 0px; --mr-bild-mt: 0px; --mr-text-ml: 0px; --technik-hoehe: 0px; }
.modellpaar__kartentitel { font-size: 28px; line-height: 34px; margin: 0 0 25px; }
.modellpaar .modellreihe[data-id] .modellreihe__spalten { flex-direction: column; align-items: stretch; padding: 0; }
.modellpaar .modellreihe[data-id] .modellreihe__bild { flex: none; width: auto; padding: 0; margin: 0 0 25px; }
.modellpaar .modellreihe[data-id] .modellreihe__bild img { width: auto; max-width: 100%; max-height: 460px; margin: 0 auto; display: block; }
.modellpaar .modellreihe[data-id] .modellreihe__text { flex: none; align-self: stretch; padding: 0; margin: 0; }
.modellpaar .modellreihe[data-id] .modellreihe__text > .knoepfe { margin-right: 0; }
.modellpaar .modellreihe[data-id] .technik__rahmen { padding-right: 0; min-height: 0; }
@media (max-width: 1024px) { .modellpaar .modellreihe[data-id] .modellreihe__text { padding: 0; } }
@media (max-width: 767px) {
  .modellpaar { margin-top: 75px; margin-bottom: var(--space-section-mobile-alt); padding: 0 20px; }
  .modellpaar__karten { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .modellpaar .modellreihe[data-id] .modellreihe__spalten { padding: 0; }
  .modellpaar .modellreihe[data-id] .modellreihe__text { display: block; }
  .modellpaar__titel, .modellpaar__kartentitel { padding-left: 0; padding-right: 0; }
}

/* ---------------------------------------------------------------- Modellvergleich
   Alle Modelle nebeneinander am Anfang des Modell-Bereichs (Anker „modelle“),
   Schrift und Linien wie die technische Tabelle der Modellreihe. Der Rahmen wischt auf schmalen Bildschirmen
   waagerecht (die Seite nicht), die erste Spalte bleibt stehen und deckt mit dem Seitenhintergrund ab. */
.model-comparison__frame { max-width: var(--container); margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.model-comparison__frame:focus-visible { outline-offset: 4px; }
.model-comparison__table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-theme); }
.model-comparison__table th, .model-comparison__table td { padding: 12px 15px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: baseline; }
.model-comparison__table thead th { font-size: 18px; line-height: 24px; font-weight: var(--weight-bold); color: var(--color-accent); white-space: nowrap; border-bottom-color: var(--color-accent); }
.model-comparison__table thead td { border-bottom-color: var(--color-accent); }
.model-comparison__table tbody td { font-size: 14px; line-height: 21px; color: var(--color-text); min-width: 7.5em; }
.model-comparison__table tr:last-child th, .model-comparison__table tr:last-child td { border-bottom: 0; }
.model-comparison__table th[scope="row"], .model-comparison__table thead td { position: sticky; left: 0; z-index: 1; background: var(--color-bg-page); padding-left: 0; font-size: 16px; line-height: 24px; font-weight: var(--weight-semibold); color: var(--color-accent); white-space: nowrap; }
.model-comparison__empty { color: var(--color-text-muted); }
@media (max-width: 767px) {
  .model-comparison__table th, .model-comparison__table td { padding: 10px 12px; }
  .model-comparison__table th[scope="row"], .model-comparison__table thead td { padding-left: 0; box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.25); }
}

/* ---------------------------------------------------------------- Vorteile
   start f1d80cc: Abschnitt 15 px Rand, Container 1290 px, vier Spalten zu 25 % (auch Tablet) mit
   15 px Rand je Seite; Icon-Box: Symbol 50 px (Zeile 56 px), Abstand --icon-box-icon-margin 30 px
   (Handy 10 px), Widget unten 90 px (Handy 40 px). */
.abschnitt.vorteile {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center;
  padding-left: max(15px, calc((100% - var(--container)) / 2)); padding-right: max(15px, calc((100% - var(--container)) / 2));
}
.vorteile__eintrag { padding: 0 15px 90px; }
.vorteile__symbol { display: flex; justify-content: center; align-items: flex-start; height: 56px; font-size: 50px; color: var(--color-primary); margin-bottom: 30px; }
.vorteile__titel { font-size: var(--h3-iconbox-size); line-height: var(--h3-iconbox-lh); font-weight: var(--h3-iconbox-weight); margin-bottom: 5px; }
.vorteile__text { margin: 0; }
@media (max-width: 767px) {
  .abschnitt.vorteile { grid-template-columns: minmax(0, 1fr); }
  .vorteile__eintrag { padding-bottom: 40px; }
  .vorteile__symbol { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- Einsatzgebiete
   Kacheln nebeneinander im schmalen Container wie die Referenzen
   (id bbb445d), weiße Karte wie die Kontaktkarte, eckig (die runde Ecke gehört nur den Kacheln), Titel wie
   die Vorteile, Knopf unten, damit alle Knöpfe einer Reihe auf einer Höhe liegen.
   Jede sichtbare Kachel bekommt eine eigene Spalte (Militär ist als Entwurf versteckt). Ohne Animation. */
.abschnitt.einsatzgebiete { margin-top: var(--space-section); }
.einsatzgebiete__raster {
  max-width: var(--container-narrow); margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--section-pad-x);
}
.einsatzgebiet {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg-card);
}
.einsatzgebiet__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--ausschnitt, 50% 50%); } /* Die Lampe ganz im Bild; die Fotos sind Hochformat mit dem Mast über die ganze Höhe, 4:3 zeigte nur die Hälfte */
@media (max-width: 767px) { .einsatzgebiet__bild img { object-position: var(--ausschnitt-mobil, var(--ausschnitt, 50% 50%)); } }
.einsatzgebiet__text { padding: var(--section-pad-x) var(--section-pad-x) 0; text-align: center; }
.einsatzgebiet__titel { font-size: var(--h3-iconbox-size); line-height: var(--h3-iconbox-lh); margin-bottom: 5px; }
.einsatzgebiet__text p { margin: 0; }
.einsatzgebiet__knopf { margin-top: auto; padding: var(--section-pad-x); text-align: center; }
@media (max-width: 767px) {
  .abschnitt.einsatzgebiete { margin-top: var(--space-section-mobile-alt); margin-bottom: var(--space-section-mobile-alt); }
  .einsatzgebiete__raster { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Lux
   Überschrift wie jeder Abschnitt, Bild und Text im schmalen Container
   wie die Einsatzgebiete (Bild eckig wie die anderen Bilder, die runde Ecke gehört nur den Kacheln), darunter die Grafik in voller
   Containerbreite (1290 px bei 1440); auf dem Handy die Handy-Fassung
   randlos über 390 px. Ohne Animation. */
.lux__einleitung {
  max-width: var(--container-narrow); margin: 0 auto var(--section-pad-x);
  display: grid; grid-template-columns: var(--lux-image-width) minmax(0, 1fr); gap: var(--media-text-gap); align-items: center;
}
/* Ein Hochformat (320 × 427 px) neben zwei kurzen Absätzen wirkte verloren, deshalb Querformat 3 : 2, halbe
   Breite, Text senkrecht mittig daneben. Ausschnitt so, dass die Lampe (46 bis 71 % der Höhe) ganz zu sehen ist. */
.lux__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 67%; }
@media (min-width: 768px) and (max-width: 1024px) { .lux__einleitung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Tablet: halbe-halbe, 480 px Bild ließen dem Text zu wenig Platz */
.lux__text p { margin: 0 0 15px; }
.lux__text p:last-child { margin-bottom: 0; }
.lux__grafik svg { display: block; width: 100%; height: auto; }
.lux__grafik--mobil { display: none; }
@media (max-width: 767px) {
  .lux__einleitung { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* untereinander: 16 px Abstand (15 px Lücke plus Unterlänge eines eingebetteten Bildes) */
  .lux__bild img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 60%; } /* Quadratisch wie die Kacheln, 4:3 zeigte nur 56 % des Hochformats */
  .lux__grafik--desktop { display: none; }
  .lux__grafik--mobil { display: block; margin: 0 -20px; }
}

/* ---------------------------------------------------------------- Kacheln
   start/BOS/Bau 209a1fd: Abschnitt 30 px Rand (Handy 15 px), je Zeile ein innerer Abschnitt mit
   min-height 880 px (Tablet 500 px), Spalten 50/50, Textspalte 60 px 30 px Innenrand, Inhalt
   senkrecht mittig, Rand je Textspalte (ids 7b8bfb4, 8f033b5, f86b14c, e37a86d, bdee2c5).
   Überschrift width-initial (500, 691 oder 724 px), danach Abstandhalter 25 px, Text 470 px. */
.abschnitt.kacheln { padding-left: 30px; padding-right: 30px; }
/* Der Titel ist mindestens so breit wie sein Inhalt (min-content) und ragt bei Breiten um
   844 px über den Rand (354 bis 881 px). Abgeschnitten wird am Abschnitt,
   sonst dehnt der Überstand im Handy-Querformat den Viewport. */
.abschnitt.kacheln { overflow-x: clip; }
.kacheln__titel { margin: 65px 0 83px; } /* BOS/Bau 67a0f5f margin:65px 0 83px, Handy 0 0 75px */
.kachel { --kachel-titel: 500px; --kachel-rahmen: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 880px; }
.kachel--bild-rechts .kachel__bild { order: 2; }
.kachel__bild { position: relative; overflow: hidden; container-type: inline-size; }
/* Das Bild füllt die Zelle, ohne die Zeilenhöhe zu bestimmen (die gibt min-height vor). Damit die Lampe ganz
   im Bild bleibt: höchstens 1 : 0,6 hoch, sonst schnitte eine hohe, schmale Zelle (Tablet, langer Text daneben) die Lampe
   seitlich ab; dann steht das Bild senkrecht mittig in der Zelle. */
.kachel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: calc(100cqw / (var(--format, 3 / 5))); margin: auto 0; border-radius: inherit; object-fit: cover; object-position: var(--ausschnitt, 50% 50%); }
/* Auf breiten Bildschirmen wird die Zelle breiter als hoch und schnitte Hochformat-Fotos oben und unten
   ab; die Zeile wächst mit, so bleibt die Zelle höchstens 0,8 : 1 (bis 1440 px gilt weiter 880 px). */
@media (min-width: 1025px) { .kachel { min-height: max(880px, calc((100vw - 60px) / 2 / 0.8)); } }
/* Gegen ein angeschnittenes Gesicht am Bildrand (Zubehör): bild_format (--format, Breite zu Höhe) begrenzt
   die Bildzelle eines fast quadratischen Fotos, damit Lampe und Gesicht zugleich ins Bild passen; am Rechner ist die
   Zeile dann genau so hoch (nicht 880 px), auf dem Tablet steht das Bild senkrecht mittig in der höheren Zeile. */
@media (min-width: 1025px) { .kachel--format { min-height: calc((100vw - 60px) / 2 / (var(--format))); } }
.kachel__text {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 60px var(--media-text-gap); border: solid var(--color-border); border-width: var(--kachel-rahmen); text-align: center;
}
/* Ohne Begrenzung schrumpft die Überschrift im Flex-Umbruch höchstens bis zum längsten Wort (min-width:auto) und ragt
   dann mittig über die Spalte (BOS 768 bis 1199 px, „Einsatzstellenbeleuchtung“). Unter 1200 px
   bleibt die Überschrift in der Spalte (min-width 0), lange Wörter trennt die Silbentrennung (Überschriften allgemein). */
.kachel__titel { width: min(var(--kachel-titel), 100%); min-width: min-content; margin-bottom: 25px; }
@media (max-width: 1199px) { .kachel__titel { min-width: 0; } } /* unter 1200 px bleibt sie in der Spalte, die Silbentrennung trennt lange Wörter */
.kachel__text > .fliesstext { width: 470px; max-width: 100%; }
.kachel__text > .fliesstext > :last-child { margin-bottom: 1em; } /* der Abstand des letzten Absatzes zählt mit */
.kachel__titel--h2 { font-size: 50px; line-height: 60px; }
.kachel__titel--h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
.kachel[data-id="b1a9a7c"] { --kachel-rahmen: 1px 1px 0 0; }
.seite-bos-landing .kachel[data-id="b1a9a7c"], .seite-bau-landing .kachel[data-id="b1a9a7c"] { --kachel-titel: 724px; }
/* Abstand Bild zu Text: „Einsatzstellenbeleuchtung“ ist bei 50 px 614 px breit (12,3 em) und ragte am Rechner
   unter 1600 px über die Textspalte bis ins Bild (1280 px: überdeckt); die Schrift wird so klein, dass das Wort in die Spalte
   passt (Spalte 50vw minus 112 px), höchstens 50 px. Ab 1200 px trennt keine Überschrift. */
@media (min-width: 1025px) { .seite-bos-landing .kachel[data-id="b1a9a7c"] .kachel__titel--h2 { font-size: min(50px, calc((50vw - 112px) / 12.5)); line-height: 1.2; } }
.kachel[data-id="254cac8"] { --kachel-rahmen: 1px 1px 0 0; }
.kachel[data-id="40f4fee"] { --kachel-rahmen: 0 0 0 1px; }
.kachel[data-id="0eb97eb"] { --kachel-titel: 691px; --kachel-rahmen: 0 1px 0 0; }
.kachel[data-id="a2efbb6"] { --kachel-titel: 691px; --kachel-rahmen: 0 0 1px 1px; }
.kachel:first-child .kachel__bild { border-top-left-radius: var(--radius-media-corner); }
.kachel:first-child .kachel__text { border-top-right-radius: var(--radius-media-corner); }
.kachel:last-child .kachel__text { border-bottom-left-radius: var(--radius-media-corner); }
.kachel:last-child .kachel__bild { border-bottom-right-radius: var(--radius-media-corner); }
@media (max-width: 1024px) { .kachel { min-height: 500px; } .kachel__titel--h2 { font-size: 42px; line-height: 52px; } }
@media (max-width: 767px) {
  .abschnitt.kacheln { padding-left: 15px; padding-right: 15px; }
  .kachel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .kachel--bild-rechts .kachel__bild { order: 0; }
  .kachel__bild { height: auto; }
  /* Quadratisch statt 350 bzw. 200 px flach, die Fotos sind Hochformat und das Gerät war abgeschnitten;
     bild_format_mobil (--format-mobil) gibt je Bild ein anderes Format vor, damit die Lampe ganz ins Bild passt */
  .kachel__bild img { position: static; display: block; height: auto; max-height: none; aspect-ratio: var(--format-mobil, var(--kachel-format-mobil, 1 / 1)); object-position: var(--ausschnitt-mobil, var(--ausschnitt, 50% 50%)); }
  .kacheln__titel { margin: 0 0 75px; }
  .kachel__titel { overflow-wrap: anywhere; }
  .kachel__text { padding-left: 30px; padding-right: 30px; } /* Handy: Bild steht über dem Text, der Abstand zur Bildspalte (--media-text-gap) entfällt; Innenrand 30 px */
  .kachel__text, .kachel[data-id] .kachel__text { border-width: 0 1px; }
  .kachel:last-child .kachel__text { border-bottom-width: 1px; }
  .kachel__titel--h2 { font-size: 36px; line-height: 42px; }
  /* Handy: nur erstes Bild oben links und letztes Bild unten rechts rund, Textkarten eckig */
  .kachel:first-child .kachel__text { border-top-right-radius: 0; }
  .kachel:last-child .kachel__text { border-bottom-left-radius: 0; }
}
/* Der Einstieg von BOS und Bau wäre auf dem Handy rund 3900 px
   (BOS) hoch. Kürzer durch flachere Bilder, weniger Innenrand und kleinere Überschriften; Texte bleiben. */
@media (max-width: 767px) {
  .seite-bos-landing .kacheln[data-id="209a1fd"],
  .seite-bau-landing .kacheln[data-id="209a1fd"] { margin-top: 30px; }
  .seite-bos-landing .kacheln[data-id="209a1fd"] .kacheln__titel,
  .seite-bau-landing .kacheln[data-id="209a1fd"] .kacheln__titel { margin-bottom: 30px; font-size: 28px; line-height: 34px; }
  .seite-bos-landing .kacheln[data-id="209a1fd"],
  .seite-bau-landing .kacheln[data-id="209a1fd"] { --kachel-format-mobil: 5 / 4; } /* 200 px flach schnitt bei den Hochformat-Fotos das Gerät ab; 5:4 statt quadratisch, damit die erste Modellreihe früh kommt; Bilder, deren Lampe in 5:4 nicht passt, setzen bild_format_mobil */
  .seite-bos-landing .kacheln[data-id="209a1fd"] .kachel__text,
  .seite-bau-landing .kacheln[data-id="209a1fd"] .kachel__text { padding: 15px 20px; } /* 15 statt 30 px oben und unten: Ausgleich für die höheren Bilder, in denen die Lampe ganz zu sehen ist */
  .seite-bos-landing .kacheln[data-id="209a1fd"] .kachel__titel,
  .seite-bau-landing .kacheln[data-id="209a1fd"] .kachel__titel { margin-bottom: 15px; hyphens: auto; }
  .seite-bos-landing .kacheln[data-id="209a1fd"] .kachel__titel--h2,
  .seite-bau-landing .kacheln[data-id="209a1fd"] .kachel__titel--h2 { font-size: 28px; line-height: 34px; }
}

/* ---------------------------------------------------------------- FAQ
   start 663e284: Abschnitt nicht gestreckt (liegt im Seiten-Container 1290 px, Rand 30/30/15 px),
   Spalte mit 10 px Innenrand (column-gap-default), Überschrift ff5cdc4 unten 75 px (BOS/Bau 40 px),
   Toggle-Titel 15 px Innenrand, 48 px hoch. */
.abschnitt.faq {
  --faq-h2-mb: 75px;
  padding: 10px calc(max(var(--section-pad-x), (100% - var(--container)) / 2) + 10px);
}
.seite-bos-landing .faq, .seite-bau-landing .faq { --faq-h2-mb: 40px; }
.faq > .titel-abschnitt { margin: 0 0 var(--faq-h2-mb); }
.faq__einleitung { text-align: center; margin-bottom: 40px; } /* BOS/Bau 79c3c67 margin-bottom:40px */
/* Titel-div in der Theme-Schrift, Fragetext als Link in Red Hat Display; die gemischten
   Schriften geben der Zeile 17 px (zweizeilig 35 px), daher beide Schriften. */
.faq__frage summary {
  display: block; padding: 15px;
  border-bottom: 1px solid var(--color-border-toggle);
  font-family: var(--font-theme); font-size: 16px; line-height: 16px; font-weight: var(--weight-bold); color: var(--color-primary);
  cursor: pointer; list-style: none;
}
.faq__fragetext { font-family: var(--font-primary); }
.faq__frage summary::-webkit-details-marker { display: none; }
.faq__pfeil { display: flex; float: left; width: 1em; height: 16px; align-items: center; } /* float:left, Text fließt darunter weiter; Pfeil links im Feld */
.faq__frage[open] .faq__pfeil--zu, .faq__frage:not([open]) .faq__pfeil--auf { display: none; }
/* Offen: Titel und Pfeil schwarz, Linie wandert unter die Antwort */
.faq__frage[open] summary { color: var(--color-accent); border-bottom: 0; }
.faq__antwort { padding: 15px; border-bottom: 1px solid var(--color-border-toggle); }
.faq__antwort > :last-child { margin-bottom: 16px; } /* der letzte Absatz der Antwort behält seinen Abstand (95 statt 79 px) */
@media (max-width: 767px) { .faq__frage summary { padding: 12px; min-height: 44px; } .faq__antwort { padding: 12px 10px; } } /* Elementor toggle mobil: Titel 12 px, Antwort 12/10 px Innenrand; einzeilige Fragen mindestens 44 px Tippfläche */

/* ---------------------------------------------------------------- Logos (Laufband als Leiste)
   start bbb445d: gestreckter Abschnitt, Container 1000 px, Rand 30 px (Handy 15 px); Überschrift
   fc8bb22 unten 75 px; je Band (ids 8b084ac, cb8ef1d) außen 75 px oben und 90 px unten (Handy je 30 px),
   sechs Logos je Zeile mit 14 px Abstand (Handy eines), darunter 20,5 px (Spaltenabstand 14 px
   plus Rest der Zeile). Die Spalte ist ein Flex-Container: Abstände fallen nicht zusammen. */
.abschnitt.logos, .abschnitt.presse {
  display: flex; flex-direction: column;
  padding-left: max(var(--section-pad-x), calc((100% - 1000px) / 2)); padding-right: max(var(--section-pad-x), calc((100% - 1000px) / 2));
}
.logos > .titel-abschnitt, .presse > .titel-abschnitt { margin: 0 0 75px; }
/* Unterzeile unter der Logo-Überschrift; der Abstand zum Band bleibt 75 px wie ohne sie */
.logos > .titel-abschnitt:has(+ .logos__subtitle) { margin-bottom: 20px; }
.logos__subtitle { margin: 0 0 75px; text-align: center; font-size: 20px; line-height: 1.4; }
.logos__band {
  display: flex; gap: 14px; width: 100%; margin: 75px 0 90px; padding: 0 0 20.5px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.logos__band::-webkit-scrollbar { display: none; }
.logos__logo { flex: 0 0 calc((100% + 14px) / 6 - 14px); scroll-snap-align: start; }
/* Weniger Logos als Platz (BOS: vier von sechs): die Gruppe liegt in der Mitte des Containers.
   Automatische Ränder statt justify-content: center, damit eine überlaufende Leiste nicht links abgeschnitten wird. */
.logos__logo:first-child { margin-left: auto; }
.logos__logo:last-child { margin-right: auto; }
.logos__logo a { display: block; }
.logos__logo img { width: 100%; height: auto; transition: all 0.3s ease; }
.logos__logo a:hover img { opacity: 0.2; } /* live .elementor-brand-image a:hover img{opacity:0.2} */
/* Logos je Ansicht: 6, unter 1024 px Fensterbreite 3 (items_tablet),
   unter 768 px 1 (items_mobile). Slick schaltet bei 1024 statt wie Elementor bei 1025, daher hier 1023 px.
   Einzeln steht das Logo höchstens 400 px breit (Bildbreite) mittig, gemessen bei 600 und 767 px. */
@media (max-width: 1023px) {
  .logos__logo { flex-basis: calc((100% + 14px) / 3 - 14px); }
}
@media (max-width: 584px) { .logos__logo { flex-basis: calc((100% + 14px) / 2 - 14px); } } /* am Handy zwei Logos je Reihe, ab 585 px drei */
@media (max-width: 767px) {
  .logos__band { margin: 30px 0; }
  .logos__logo img { display: block; max-width: 400px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- Presse
   start a2baf04 wie Logos (1000 px); Überschrift c7f81f4 unten 75 px; je Bericht (smartic-testimonials,
   nach dem Skript): Quelle, darunter der Text mit dem Knopf (margin-top 16 px) im selben Block,
   dieser unten 25 px Innenrand, danach 30 px bis zum nächsten Bericht. */
.presse__bericht { margin: 0 0 30px; text-align: center; }
.presse__quelle { margin: 0; font-family: var(--font-theme); } /* Theme-Schrift Rubik */
.presse__text { font-size: 28px; line-height: 36px; font-weight: var(--weight-medium); color: var(--color-accent); padding-bottom: 25px; } /* gemessen .testimonial-content .content */
.presse__knopf { margin-top: 16px; }
@media (max-width: 1024px) { .presse__text { font-size: 36px; line-height: 42px; } }
@media (max-width: 767px) { .presse__text { font-size: 24px; line-height: 34px; } }

/* ---------------------------------------------------------------- Galerie (Leiste statt Karussell)
   start c6ec9d6: nicht gestreckt wie FAQ (Spalte 10 px Innenrand), Überschrift 57c9751 unten 75 px. */
.abschnitt.galerie { padding: 10px calc(max(var(--section-pad-x), (100% - var(--container)) / 2) + 10px); }
.galerie > .titel-abschnitt { margin: 0 0 75px; }
.galerie__rahmen { position: relative; }
.galerie__leiste {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galerie__leiste::-webkit-scrollbar { display: none; }
.galerie__bild { flex: 0 0 100%; scroll-snap-align: start; }
.galerie__bild img { width: 100%; aspect-ratio: 1270 / 714; object-fit: cover; object-position: var(--ausschnitt, 50% 50%); }
.galerie__pfeil {
  position: absolute; top: calc((100% - 30px) / 2); transform: translateY(-50%); /* mittig auf dem Bild, ohne die 30 px Punktezeile darunter */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  color: hsla(0, 0%, 93.3%, 0.9); font-size: 25px; cursor: pointer; /* Fläche 44 px fürs Tippen */
}
/* Punkte unter der Galerie ( 6 px, schwarz, inaktiv 0.2, Abstand 12 px, Zeile 30 px) */
.galerie__punkte { display: flex; justify-content: center; height: 30px; }
.galerie__punkte[hidden] { display: none; }
.galerie__punkt {
  width: 24px; height: 44px; margin: -7px -3px 0; padding: 0; border: 0; background: transparent; cursor: pointer; /* 24 px Trefferfläche (WCAG 2.5.8), Abstand der Punkte bleibt 18 px */
  display: flex; align-items: center; justify-content: center;
}
.galerie__punkt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #000; opacity: 0.2; transition: opacity 0.3s ease; }
.galerie__punkt[aria-current="true"]::before { opacity: 1; }
.galerie__pfeil--zurueck { left: 0.5px; } /* das Zeichen (25 px) sitzt 10 px vom Rand; die 44-px-Fläche ist 9,5 px breiter als das Zeichen */
.galerie__pfeil--vor { right: 0.5px; }

/* ---------------------------------------------------------------- Bild mit Text (Downloads oben) */
/* 122f41d: boxed 1290 px, 30 px Rand (Handy 15 px), oben 100 px (Handy 30 px); Textspalte rechts 170 px frei
   (Tablet 30 px, Handy 0), Oberzeile 58761ea unten 15 px Innenrand; Bildspalte Handy oben 50 px (id 74653b5). */
.bild-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-top: 100px; margin-bottom: 0; } /* Oberzeile und Überschrift senkrecht mittig neben dem Bild statt oben am Rand */
.bild-text { overflow-x: clip; } /* Einflug links/rechts (100 px Weg) darf den Handy-Viewport nicht dehnen, siehe .aufmacher */
.abschnitt.bild-text { --abschnitt-pad: 30px; }
.bild-text--bild-links .bild-text__bild { order: -1; }
.bild-text__text { padding-right: 170px; }
.bild-text__oberzeile { color: var(--color-primary); padding-bottom: 15px; }
.bild-text__oberzeile, .bild-text__oberzeile p { font-size: 18px; line-height: 19px; } /* gemessen Downloads */
.bild-text .titel-seite { font-size: 60px; line-height: 60px; }
.bild-text__bild img { width: 100%; }
@media (max-width: 1024px) { .bild-text .titel-seite { font-size: 42px; line-height: 42px; } .bild-text__text { padding-right: 30px; } }
@media (max-width: 767px) {
  .bild-text { grid-template-columns: minmax(0, 1fr); text-align: center; margin-top: 30px; }
  .abschnitt.bild-text { --abschnitt-pad: 15px; }
  .bild-text__text { padding-right: 0; }
  .bild-text__bild { padding-top: 50px; }
  .bild-text .titel-seite { font-size: 36px; line-height: 36px; }
}

/* ---------------------------------------------------------------- Downloads */
.downloads {
  padding-left: max(var(--section-pad-x), calc((100% - var(--container)) / 2));
  padding-right: max(var(--section-pad-x), calc((100% - var(--container)) / 2));
}
/* Je Zeile zwei Spalten 50/50, je 10 px Innenrand, senkrecht mittig;
   die Liste beginnt 73 px unter dem Bild-Text-Abschnitt. Handy: Spalten untereinander, Knopf mittig.
   Eine Liste (Baustein downloadliste) mit Stand je Datei und Gruppenüberschrift. */
.downloads__zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.downloads__zeile > * { margin: 10px; }
.downloads__zeile > .downloads__knopf { margin: 9px 10px 8px; } /* gleicht den durchsichtigen Rand des Knopfs aus (1 px oben, 2 px unten) */
.bild-text + .downloads { margin-top: 73px; }
.downloads:last-of-type { margin-bottom: 100px; }
.downloads__titel { font-size: 32px; line-height: 32px; font-weight: var(--weight-regular); color: var(--color-primary); }
/* Knopf auf der Höhe des Titels, der Stand steht darunter. */
.downloadliste .downloads__zeile { align-items: start; }
.downloadliste__stand { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--color-text); }
.downloadliste__gruppe { margin: var(--download-group-mt) 10px 10px; font-size: var(--download-group-size); line-height: var(--download-group-lh); color: var(--color-accent); }
@media (max-width: 767px) {
  .downloads__zeile { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .downloads__titel, .downloadliste__stand { text-align: left; } /* linksbündig, nur der Knopf mittig */
  .downloadliste__gruppe { margin-top: var(--download-group-mt); font-size: var(--download-group-size); line-height: var(--download-group-lh); }
}

/* ---------------------------------------------------------------- 404-Seite (Stil Theme smartic .error404) */
.fehler404 {
  width: min(var(--container), calc(100% - 60px)); margin: 67.7728px auto 36.6509px; padding: 25px 0 60px; /* .site-content margin, .col-full: 30 px Rand, 25 px oben, 60 px unten */
  text-align: center; font-family: var(--font-theme); font-size: 16px; line-height: 24px;
}
.fehler404__bild { margin-bottom: 70px; }
.fehler404__bild img { display: inline-block; max-width: 100%; height: auto; }
.fehler404__titel { margin-bottom: 15px; font-family: var(--font-theme); font-size: 40px; line-height: 48.56px; color: #000; }
.fehler404__text { padding-left: 15px; margin-bottom: 40px; font-size: 18px; color: var(--color-text); }
.fehler404__text a { color: var(--color-accent); text-decoration: none; }
.fehler404__text a:hover, .fehler404__text a:focus-visible { color: var(--color-primary); }
.fehler404__suche { position: relative; max-width: 410px; margin: 0 auto; }
.fehler404__feld {
  display: inline-block; width: 100%; height: 51px; box-sizing: border-box; margin: 0; padding: 14px 60px 14px 21px;
  border: 1px solid var(--color-border); border-radius: 4px; background: #F7F8FA; /* theme .error404 .widget_search .search-field */
  font-family: var(--font-theme); font-size: 14px; line-height: 14px; color: var(--color-text); -webkit-appearance: none; appearance: none;
}
.fehler404__feld::placeholder { color: var(--color-text); opacity: 1; }
.fehler404__feld:focus { border-color: var(--color-primary); outline: 2px solid var(--color-form-button); outline-offset: 2px; }
/* Statt nur der Randfarbe (1 px) ein Ring wie im Rest der Seite, damit der Fokus auf Tastatur und Handy zu sehen ist. */
.fehler404__suche svg { position: absolute; top: 50%; right: 7px; transform: translate(-50%, -50%); font-size: 18px; color: var(--color-accent); pointer-events: none; }
.fehler404__senden { position: absolute; top: 0; right: 0; z-index: 3; width: 60px; height: 100%; padding: 0; border: 0; background: transparent; font-size: 0; line-height: 0; cursor: pointer; }
@media (max-width: 767px) {
  .fehler404 { width: calc(100% - 30px); margin: 22.652px auto; }
  .fehler404__bild { margin-bottom: 30px; }
  .fehler404__titel { margin-bottom: 0; font-size: 30px; line-height: 36.42px; }
  .fehler404__text { font-size: 16px; }
}

/* ---------------------------------------------------------------- Text (Impressum, Datenschutz) */
.trenner { border: 0; border-top: 1px solid var(--color-border-divider-light); margin: 0; }
.text-abschnitt { border-top: 1px solid var(--color-border); padding-top: 90px; margin-bottom: 0; text-align: center; } /* 7f12294, e89e8dc margin-bottom:0 (Handy 50px) */
.text-abschnitt .titel-seite { text-align: center; margin-bottom: 10px; } /* 7474464d, 3baa992 margin-bottom:10px */
.text-abschnitt__inhalt { margin: 85px auto 80px; } /* 20b16682 margin-top 75px + 10px des Titels; die Abstände fallen hier nicht zusammen */
.text-abschnitt[data-id="bau-text"] .text-abschnitt__inhalt { max-width: 800px; } /* Bau-Seite: Text der Kacheln unter den Bildern, schmale Spalte statt voller Breite zum besseren Lesen */
/* Datenschutz-Text (Theme): Überschriften unten 0,5408em, h3 oben 1em; Listen 3em
   eingerückt, ohne Innenrand und ohne Aufzählungszeichen */
.text-abschnitt__inhalt h1 { margin-bottom: 0.5408em; }
.text-abschnitt__inhalt h2 { margin: 1em 0 0.5408em; }
.text-abschnitt__inhalt h3 { margin: 1em 0 0.5408em; }
.text-abschnitt__inhalt ul, .text-abschnitt__inhalt ol { margin-left: 3em; padding-left: 0; list-style: none; }
/* Links im Impressum: schwarz, ohne Unterstrich, Hover dunkelrot */
.text-abschnitt__inhalt a { color: var(--color-accent); text-decoration: none; }
.text-abschnitt__inhalt a:hover, .text-abschnitt__inhalt a:focus-visible { color: var(--color-primary-hover); }
/* Verantwortlicher: „Vertretungsberechtigte Personen:“, „E-Mail-Adresse:“ und „Impressum:“
   stehen ohne eigenen Absatz direkt vor dem Absatz mit dem Wert, also ohne Abstand dazwischen. Angehängt am
   einzigen Absatz mit mailto-Link (tw@): drei davor, einer davor, einer danach. */
.text-abschnitt__inhalt p:has(+ p + p + p > a[href^="mailto:"]),
.text-abschnitt__inhalt p:has(+ p > a[href^="mailto:"]),
.text-abschnitt__inhalt p:has(> a[href^="mailto:"]) + p { margin-bottom: 0; }
/* Kategorie (leere Archivseite im Stil Theme smartic): Inhalt 67,77 px unter dem Kopf (Handy 22,65 px),
   Überschrift .page-title links in der Theme-Schrift, ohne Seitenleiste (370 px frei) */
.text-abschnitt--archiv { border-top: 0; padding-top: 67.7728px; text-align: left; }
.titel-archiv { margin: 0 0 22.652px; font-family: var(--font-theme); font-size: 41.8868px; line-height: 50.8506px; letter-spacing: -1px; font-weight: var(--weight-bold); color: #000; }
@media (min-width: 768px) { .titel-archiv { max-width: calc(100% - 370px); } }
@media (max-width: 767px) {
  .text-abschnitt { padding-top: 50px; margin-bottom: 50px; }
  .text-abschnitt--archiv { padding-top: 22.652px; }
  .abschnitt.text-abschnitt { --abschnitt-pad: 15px; } /* 7f12294, e89e8dc mobil padding:50px 15px 0 */
  /* 20b16682, 9cb34cd mobil margin:0; der Abstand des letzten Absatzes bleibt im Block (flow-root) */
  .text-abschnitt__inhalt { margin: 0 auto; display: flow-root; }
  .text-abschnitt__inhalt > :last-child { margin-bottom: 16px; } /* Theme p, ul margin-bottom:16px */
}

/* ---------------------------------------------------------------- Kontakt (ragt in den Fuß) */
.kontakt { position: relative; z-index: 1; padding: 0 30px; margin-top: 0; margin-bottom: -260px; } /* a0a6b80 margin-top:0, Abstand gibt der Abschnitt davor */
.kontakt__karte {
  max-width: var(--container); margin: 0 auto; padding: 75px 30px 51px; /* footer 56a6e31 widget-wrap padding:75px 30px 51px */
  display: grid; grid-template-columns: repeat(2, minmax(0, 550px)); justify-content: center; /* a8615eb, 53e9ef1 max-width:1100px */
  background: var(--color-bg-card); border-radius: var(--radius-card);
}
.kontakt__karte > * { min-width: 0; }
.titel-kontakt { font-size: var(--h2-size); line-height: var(--h2-lh); text-align: left; margin-bottom: 20px; } /* 0287611, c59a9ab margin-bottom:20px */
.kontakt__person { margin: 30px 0 15px; font-size: 20px; line-height: 24px; color: var(--color-accent); } /* Abstandhalter d5c8756 30px, 018d0d3 margin-bottom:15px */
.kontakt__person h3 { font-size: 32.36px; line-height: 24px; font-weight: var(--weight-bold); margin-bottom: 20px; }
.kontaktformular__intro { margin: 24px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-form-label); } /* Satz über dem Formular, Schrift wie die Feldbeschriftung */
.kontaktformular { margin: 24px 0; }      /* Abstand 24 px oben und unten */
.kontaktformular__feld { padding: 15px 0; } /* 15 px je Feld oben und unten */
.kontaktformular label { display: block; margin-bottom: 15px; font-size: 16px; line-height: 19px; font-weight: var(--weight-bold); color: var(--color-form-label); }
.kontaktformular__pflicht { color: var(--color-form-error); font-weight: var(--weight-regular); } /* Sternchen nicht fett */
.kontaktformular input, .kontaktformular textarea {
  display: block; width: 100%; height: 43px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--color-form-field-text);
  border: 1px solid var(--color-form-field-border); border-radius: var(--radius-form); background: var(--color-white);
}
.kontaktformular input, .kontaktformular textarea { transition: border 0.15s, box-shadow 0.15s; }
.kontaktformular textarea { height: 120px; padding: 14px; line-height: 1.3; resize: vertical; } /* Innenrand 14 px, Zeile 20,8 px */
/* Fokus: blauer Rand mit 1 px Ring und leichtem Schatten statt Outline */
.kontaktformular input:focus, .kontaktformular textarea:focus {
  border-color: var(--color-form-button); outline: none;
  box-shadow: 0 0 0 1px var(--color-form-button), 0 1px 2px rgba(0, 0, 0, 0.15);
}
.kontaktformular [aria-invalid="true"] { border-color: var(--color-form-error); }
.kontaktformular [aria-invalid="true"]:focus { border-color: var(--color-form-error); box-shadow: 0 0 0 1px var(--color-form-error); }
/* Fehlerhinweis: rot, 14/17 px, Warndreieck davor; site.js setzt ihn beim Verlassen eines Felds */
.kontaktformular__fehler { display: block; margin: 15px 0 0; padding: 0 0 0 5px; font-family: var(--font-primary); font-size: 14px; line-height: 17px; font-weight: var(--weight-regular); color: var(--color-form-error); }
.kontaktformular__fehler::before {
  content: ""; position: relative; top: 1.5px; left: -5px; display: inline-block; width: 16px; height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2217%22%20height%3D%2215%22%20viewBox%3D%220%200%2017%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.0264%2012.3086L9.46387%200.90625C8.97168%200.0585938%207.68652%200.03125%207.19434%200.90625L0.631836%2012.3086C0.139648%2013.1562%200.768555%2014.25%201.78027%2014.25H14.8779C15.8896%2014.25%2016.5186%2013.1836%2016.0264%2012.3086ZM8.34277%209.92969C9.02637%209.92969%209.60059%2010.5039%209.60059%2011.1875C9.60059%2011.8984%209.02637%2012.4453%208.34277%2012.4453C7.63184%2012.4453%207.08496%2011.8984%207.08496%2011.1875C7.08496%2010.5039%207.63184%209.92969%208.34277%209.92969ZM7.13965%205.41797C7.1123%205.22656%207.27637%205.0625%207.46777%205.0625H9.19043C9.38184%205.0625%209.5459%205.22656%209.51855%205.41797L9.32715%209.13672C9.2998%209.32812%209.16309%209.4375%208.99902%209.4375H7.65918C7.49512%209.4375%207.3584%209.32812%207.33105%209.13672L7.13965%205.41797Z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2217%22%20height%3D%2215%22%20viewBox%3D%220%200%2017%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.0264%2012.3086L9.46387%200.90625C8.97168%200.0585938%207.68652%200.03125%207.19434%200.90625L0.631836%2012.3086C0.139648%2013.1562%200.768555%2014.25%201.78027%2014.25H14.8779C15.8896%2014.25%2016.5186%2013.1836%2016.0264%2012.3086ZM8.34277%209.92969C9.02637%209.92969%209.60059%2010.5039%209.60059%2011.1875C9.60059%2011.8984%209.02637%2012.4453%208.34277%2012.4453C7.63184%2012.4453%207.08496%2011.8984%207.08496%2011.1875C7.08496%2010.5039%207.63184%209.92969%208.34277%209.92969ZM7.13965%205.41797C7.1123%205.22656%207.27637%205.0625%207.46777%205.0625H9.19043C9.38184%205.0625%209.5459%205.22656%209.51855%205.41797L9.32715%209.13672C9.2998%209.32812%209.16309%209.4375%208.99902%209.4375H7.65918C7.49512%209.4375%207.3584%209.32812%207.33105%209.13672L7.13965%205.41797Z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* Hinweis nach dem Absenden (Erfolg wie die WPForms-Bestätigung: hellgrün, dunkler Text) */
.kontaktformular__hinweis { margin: 0 0 20px; padding: 12px 15px; border: 1px solid; border-radius: var(--radius-form); font-size: 16px; line-height: 1.5; color: #1d2327; }
.kontaktformular__hinweis--erfolg { background: #e0ffc7; border-color: #b4d39b; }
.kontaktformular__hinweis--fehler { background: #fcf0f1; border-color: var(--color-form-error); }
.kontaktformular__knopf:disabled { opacity: 0.7; cursor: wait; }
.kontaktformular__knopf {
  /* 41 px hoch (margin-top 10 px). Tippfläche 44 px: oben 1 px, unten 2 px durchsichtiger Rand (ganze
     Pixel, Chrome rundet 1,5 px ab), der Hintergrund endet davor (background-clip); die Abstände gleichen ihn aus. */
  margin: 9px 0 -2px; min-height: 44px; padding: 0 15px;
  border: solid transparent; border-width: 1px 0 2px; background-clip: padding-box; border-radius: var(--radius-form) / 4px 4px 5px 5px;
  background-color: var(--color-form-button); color: var(--color-white); text-rendering: optimizeLegibility;
  font-family: var(--font-primary); font-size: 17px; line-height: 17px; font-weight: var(--weight-medium); cursor: pointer;
}
@media (max-width: 1024px) {
  .kontakt__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* 6b33f12, 76edabe je 50 %, ohne Spaltenabstand */
  .titel-kontakt { font-size: 36px; line-height: 40px; } /* footer 0287611 tablet, gemessen */
}
@media (max-width: 767px) {
  .kontakt { padding: 0; margin-bottom: 0; }
  .kontakt__karte { grid-template-columns: 1fr; padding: 60px 15px; border-radius: 0; } /* 56a6e31 mobil padding:60px 15px */
  .titel-kontakt { font-size: 36px; line-height: 40px; }
}

/* ---------------------------------------------------------------- Fuß */
.fuss { background: var(--color-bg-footer); padding: var(--space-footer-top) 30px var(--space-footer-bottom); color: var(--color-text-muted); }
.fuss__innen { max-width: var(--container); margin: 0 auto; }
/* Logo 7182ca2 (margin-bottom 35px) und Trenner 602fa88 (15px Innenrand, Linie, 45px Abstand) */
.fuss__logo { display: flex; justify-content: center; padding-bottom: 50px; border-bottom: 1px solid var(--color-border-on-dark); }
.fuss__logo img { width: 337px; }
/* Spalten b5b9123 (je 33,33 %, ohne Abstand, margin-bottom 45px), dann Trenner 0fb7b22 (15px, Linie, 15px + 35px) */
.fuss__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 60px 0; border-bottom: 1px solid var(--color-border-on-dark); }
.fuss__spalte--social { padding-left: 80px; } /* f81ba77 widget-wrap padding-left:80px, ab Tablet 0 */
.fuss__label { font-family: var(--font-theme); font-size: var(--text-footer-label-size); line-height: 24px; font-weight: var(--weight-medium); color: var(--color-on-dark); text-transform: uppercase; letter-spacing: var(--text-footer-ls); margin-bottom: 20px; } /* 0516238, f1e4466 margin-bottom:20px */
.fuss__anschrift { color: var(--color-text-muted); }
.fuss__anschrift > :last-child { margin-bottom: 16px; } /* 7cc1395: p behält margin-bottom 16px */
/* Fußmenü 2d6cfb1: Zeilen 30px mit 8px Abstand. Tipp-Ziele brauchen 44px; die 7px darüber und darunter
   ragen in den Abstand, damit die Schrift an ihrer Stelle bleibt. */
.fuss__links { list-style: none; margin: -7px 0; padding: 0; }
.fuss__links a {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  font-size: var(--text-footer-link-size); line-height: var(--text-footer-link-lh); font-weight: var(--weight-medium);
  color: var(--color-on-dark); text-transform: uppercase; letter-spacing: var(--text-footer-ls); text-decoration: none;
}
.fuss__links a:hover, .fuss__links a:focus-visible { color: var(--color-primary); } /* Hover rot */
.fuss__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fuss__social a {
  display: inline-flex; text-decoration: none; align-items: center; justify-content: center; width: 45px; height: 45px;
  border: 2px solid var(--color-border-social); border-radius: var(--radius-social); color: var(--color-on-dark); font-size: 15px; /* Symbol 15 px */
}
.fuss__social a { transition: all 0.3s ease; }
.fuss__social a:hover, .fuss__social a:focus-visible { background: var(--color-primary); border-color: var(--color-primary); opacity: 1; } /* volle Deckkraft */
.fuss__copyright { margin: 50px 0 0; text-align: center; color: var(--color-text); }
@media (max-width: 767px) {
  .fuss { padding-left: 15px; padding-right: 15px; }
  .fuss__logo img { width: 100%; max-width: 337px; }
  .fuss__spalten { grid-template-columns: 1fr; text-align: center; }
  .fuss__links { margin: 33px 0; }  /* 0e5435f mobil margin:40px 0, abzüglich der 7px Tipp-Zugabe */
  .fuss__links a { justify-content: center; }
  .fuss__social { gap: 20px; } /* Handy: 20 px zwischen den Symbolen */
}

@media (max-width: 1024px) {
  .fuss { margin-bottom: 70px; } /* theme [data-elementor-type='footer'] margin-bottom 70px bis 1024 px: heller Streifen unter dem Fuß */
  .fuss__spalte--social { padding-left: 0; }
  .fuss__social { justify-content: center; } /* 45b826b e-grid-align-tablet-center */
}

/* ---------------------------------------------------------------- Nach oben */
.nach-oben {
  position: fixed; right: 30px; bottom: 30px; z-index: 999;
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-size: 16px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); text-decoration: none;
  transform: scale(0); transition: all 0.35s ease;
}
.nach-oben.ist-aktiv { transform: scale(1); }
@media (max-width: 768px) { .nach-oben { opacity: 0 !important; pointer-events: none; } }

/* ---------------------------------------------------------------- Bewegung
   Aufmacher: Ebenen blenden nacheinander ein (Maske, Weg 100 %; Start
   und Dauer je Ebene in ms), Kurve power4.inOut. Der Weg läuft innerhalb der eigenen
   Fläche (clip-path wandert mit).
   Einflug: von unten, links oder rechts (100 px Weg, Deckkraft 0 auf 1),
   animated-fast 0.75 s, Kurve ease. Erst beim ersten Sichtbarwerden (site.js setzt
   .ist-eingeflogen); ausgeblendet wird erst, wenn site.js .einflug-bereit setzt, ohne Skript bleibt alles sichtbar. */
:root { --kurve-aufmacher: cubic-bezier(0.77, 0, 0.175, 1); }
@keyframes aufmacher-von-unten {
  from { opacity: 0; transform: translateY(100%); clip-path: inset(-1em -1em 100% -1em); }
  to { opacity: 1; transform: none; clip-path: inset(-1em); } /* -1em: Ober- und Unterlängen nach dem Einblenden nicht abschneiden */
}
@keyframes aufmacher-von-links {
  from { opacity: 0; transform: translateX(-100%); clip-path: inset(0 0 0 100%); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes aufmacher-von-rechts {
  from { opacity: 0; transform: translateX(100%); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes einflug-hoch { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes einflug-links { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: none; } }
@keyframes einflug-rechts { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .aufmacher__titel { animation: aufmacher-von-unten 1.2s var(--kurve-aufmacher) 0.28s both; }
  .aufmacher__untertitel, .aufmacher__punkt { animation: aufmacher-von-unten 1.2s var(--kurve-aufmacher) 0.63s both; }
  .aufmacher__punkte li::after, .aufmacher__punkte li:first-child::before { animation: aufmacher-von-links 1s var(--kurve-aufmacher) 1.13s both; }
  .aufmacher__bild { animation: aufmacher-von-rechts 1.5s var(--kurve-aufmacher) 0.29s both; }

  .einflug-bereit [data-einflug] { visibility: hidden; }
  .einflug-bereit [data-einflug].ist-eingeflogen { visibility: visible; animation: 0.75s ease both; }
  .einflug-bereit [data-einflug="hoch"].ist-eingeflogen { animation-name: einflug-hoch; }
  .einflug-bereit [data-einflug="links"].ist-eingeflogen { animation-name: einflug-links; }
  .einflug-bereit [data-einflug="rechts"].ist-eingeflogen { animation-name: einflug-rechts; }
}
@media (prefers-reduced-motion: reduce) {
  .nach-oben, .galerie__punkt::before, .logos__logo img, .fuss__social a { transition: none; }
}

/* Rückfall für Browser ohne `overflow: clip` (iOS vor 16): dort ist `overflow-x: clip` ungültig und fällt weg,
   der Einflug von der Seite dehnte den Viewport. Moderne Browser lesen diesen Block nicht, nichts ändert sich. */
@supports not (overflow: clip) {
  .aufmacher { overflow-x: hidden; }
  .abschnitt.kacheln { overflow-x: hidden; }
  .bild-text { overflow-x: hidden; }
}

/* ---------------------------------------------------------------- Entwurf und Platzhalter
   Band „Entwurf“ über dem Kopf einer Seite mit seite.entwurf: true,
   und der Baustein „platzhalter“ für Text, den nur Thomas liefern kann. Gelb wie der Hover der Knöpfe, schwarze Schrift,
   gestrichelter Rahmen: auf den ersten Blick kein fertiger Inhalt. Nie live (tools/pruefen.php --livegang). */
.entwurf-band {
  padding: 8px var(--section-pad-x); text-align: center; font-weight: 700;
  background: var(--color-button-hover); color: var(--color-button-hover-text);
}
.abschnitt.platzhalter { margin: 0 auto var(--space-section-sm); padding: 0 var(--section-pad-x); max-width: var(--container-narrow); }
.platzhalter__rahmen { padding: var(--section-pad-x); border: 3px dashed var(--color-accent); background: var(--color-bg-card); }
.platzhalter__marke {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px; font-weight: 700;
  background: var(--color-button-hover); color: var(--color-button-hover-text);
}
.platzhalter__titel { margin-bottom: 10px; }
/* Am Handy zieht .titel-abschnitt die Überschrift 20 px in den Abschnittsrand, im Rahmen ragte sie damit über die Strichlinie */
@media (max-width: 767px) { .platzhalter .platzhalter__titel { margin-left: 0; margin-right: 0; } }
.platzhalter__hinweis { margin: 0; color: var(--color-accent); font-style: italic; }
.platzhalter__entwurf {
  margin-top: var(--section-pad-x); padding: 10px var(--section-pad-x);
  border-left: 6px solid var(--color-button-hover); background: var(--color-bg-hero);
}
/* Bild-Platzhalter (Entwurf): an der Stelle eines Bildes ohne geklärte Rechte, im Format der Kachelbilder (4:3) */
.bild-platzhalter {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 200px;
  aspect-ratio: 4 / 3; padding: var(--section-pad-x); text-align: center;
  border: 3px dashed var(--color-accent); background: var(--color-bg-hero);
}
.bild-platzhalter .platzhalter__marke { margin: 0; }
.einsatzgebiet__bild .bild-platzhalter { aspect-ratio: 4 / 5; } /* gleich hoch wie die Fotos der Einsatzgebiete (4:5) */