/* ==========================================================================
   LAN1 – DSL-Landingpage (internet.lan1.de)
   Statisches CSS, kein Build. Mobile first.
   Aufbau und Optik nach https://www.lan1.de/wlan/ (gemessene Werte: docs/BRIEF-wlan-look.md, Tabelle 1).
   Breakpoints: <= 767 mobil · 768–1024 Tablet · >= 1025 Desktop
   ========================================================================== */

/* ---------- Fonts (self-hosted, keine externen Requests) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-900-normal.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */
:root {
  --c-text: #28343c;          /* Standard-Textfarbe (wie lan1.de), Footer-Fläche */
  --c-cyan: #04bbee;          /* Akzent: Intro-/FAQ-H2, Button-Hover, Nav aktiv */
  --c-blau: #006eb7;          /* Branchen-H2/Icons, Formular-Sektion, Links, Fokus */
  --c-teaser: #0092d2;        /* Teaser-Leiste */
  --c-teaser-dunkel: #0084c7; /* Teaser-Spalten 1 und 3 */
  --c-caret: #33a8db;         /* Caret in der Teaser-Leiste */
  --c-hellblau: #00b6ed;      /* Ziffern-Kreise der Schrittliste (Wunsch Katharina 09.11.2026) */
  --c-schwarz: #000;          /* Primär-Button, Rahmen im Tab-Kasten-Look */
  --c-dunkel: #142933;        /* nur noch bewusst: Skip-Link, Vorschau-Balken */
  --c-rot: #c50e3e;           /* LAN1-Rot: Störer (Hero und Bundle-Preis), Hero-CTA, Button-Hover */
  --c-hell: #f2f2f4;          /* Hinweisflächen im Formular und die beiden grauen Sektionen */
  /* Grautoene der beiden grossen Flaechen „Welche Bandbreite brauchen Sie?“ und
     „Managed Service inklusive“ (Wunsch Katharina 09.11.2026). Die Flaeche selbst ist
     --c-hell: dasselbe Grau wie auf lan1.de/wlan/infrastruktur im Abschnitt „Power in ganzer
     Bandbreite“ (dort Elementor-Globalfarbe b091b8e = #f2f2f4). Vorher trug die eine Flaeche
     eine blaue Toenung (5 % Blau auf Weiss = #f2f8fb), die andere helles Cyan (#e6f8fd).
     Die beiden Werte hier liegen so weit darunter, dass der Abstand derselbe bleibt wie zuvor:
     Ergebnisflaeche 1,15:1 zur Flaeche, Linien 1,20:1. Die frueheren #e3e8ec und #dfe3e6 waren
     leicht blau getoent und auf dem neutralen Grau zu schwach. */
  --c-grau-flaeche: #e3e3e5;
  --c-grau-linie: #dedee0;
  --c-weiss: #fff;
  --c-linie: #dfe3e6;         /* feine Trennlinien */
  --c-rahmen: #7d8a91;        /* Formular-Rahmen (Kontrast >= 3:1 auf Weiß) */
  --c-text-leise: #45565e;    /* Sekundärtext auf Weiß (Kontrast >= 7:1) */

  --font: "Montserrat", "Segoe UI", Arial, sans-serif;
  --container: 1080px;        /* Textbreite wie Live */
  --container-wide: 1280px;   /* Foto-Blöcke */
  --gutter: 20px;
  --section-y: 56px;
  --radius: 4px;
  --radius-btn: 7px;
  --shadow-card: 0 0 10px rgba(0, 0, 0, 0.5);
  --h2-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); /* 30,4 → 41,6px */
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-y: 64px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text);
  background: var(--c-weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 900;
  line-height: 1.3;
}

p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--c-blau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-text);
}

strong {
  font-weight: 700;
}

main:focus {
  outline: none;
}

/* Fokus: Blau auf Weiß, Weiß auf Blau/Cyan/Foto, Cyan auf dem dunklen Footer */
:focus-visible {
  outline: 3px solid var(--c-blau);
  outline-offset: 2px;
}

.hero :focus-visible,
.section--blue :focus-visible,
.section--grau .bundle :focus-visible {
  outline-color: var(--c-weiss);
}

.section--blue .form-card :focus-visible,
.section--blue .entry__option :focus-visible,
.section--blue .form-noscript :focus-visible {
  outline-color: var(--c-blau);
}

.site-footer :focus-visible {
  outline-color: var(--c-cyan);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--c-dunkel);
  color: var(--c-weiss);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: var(--c-weiss);
  outline-color: var(--c-cyan);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons (wie lan1.de: schwarz, 11,2px/900, Radius 7px, Hover Cyan) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background: var(--c-schwarz);
  color: var(--c-weiss);
}

.btn--primary:hover {
  background: var(--c-rot);
  color: var(--c-weiss);
}

.btn--outline-dark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-text);
  color: var(--c-text);
}

/* Rot wie alle Buttons; der Rahmen zieht mit, sonst bliebe aussen eine dunkle Kante stehen */
.btn--outline-dark:hover {
  background: var(--c-rot);
  box-shadow: inset 0 0 0 2px var(--c-rot);
  color: var(--c-weiss);
}

.btn--lg {
  min-height: 52px;
  padding: 17px 34px;
  font-size: 0.8125rem;
}

.btn:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* ---------- Überschriften / Sektionen ---------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-blau); /* Cyan-Kleintext auf Weiß wäre zu kontrastarm */
}

.section {
  padding-block: var(--section-y);
}

.section--white {
  background: var(--c-weiss);
}

.section-head {
  max-width: var(--container);
  margin: 0 auto 32px;
  text-align: center;
}

.section-title {
  font-size: var(--h2-size);
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
}

.section-title,
.photo-block__title,
.audience__title {
  text-wrap: balance;
}

.section-sub {
  max-width: 860px;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (min-width: 1025px) {
  .section-head {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   Header (Klon lan1.de) – statisch, 86px; Burger ohne Rahmen
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--c-weiss);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  padding-inline: 20px;
}

.site-header__logo {
  display: inline-flex;
  margin-right: auto;
}

.site-header__logo img {
  width: 166px; /* mobil wie Live (166 × 64) */
  height: auto;
}

/* Hauptnavigation (nur Desktop) – 15px/600, Cyan-Unterstrich mit Slide */
.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
}

.main-nav__link {
  position: relative;
  display: block;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--c-text);
  transition: color 0.3s ease;
}

.main-nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 10px;
  height: 3px;
  background: var(--c-cyan);
  opacity: 0;
  transition: left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link.is-active {
  color: var(--c-cyan);
}

.main-nav__link:hover::after,
.main-nav__link:focus-visible::after,
.main-nav__link.is-active::after {
  left: 0;
  width: 100%;
  opacity: 1;
}

/* Burger: 45 × 45, ohne Rahmen */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
}

.burger:hover {
  color: var(--c-cyan);
}

.burger__box {
  position: relative;
  display: block;
  width: 28px;
  height: 20px;
}

.burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.burger__bar:nth-child(1) {
  top: 0;
}

.burger__bar:nth-child(2) {
  top: 8.5px;
}

.burger__bar:nth-child(3) {
  top: 17px;
}

.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  top: 8.5px;
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  top: 8.5px;
  transform: rotate(-45deg);
}

/* Header aus dem Bild: Burger fixiert oben rechts (48 × 48, weiß, 1px Rahmen) – JS setzt body.is-scrolled */
.is-scrolled .burger {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 300;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid var(--c-text);
  background: var(--c-weiss);
}

@media (prefers-reduced-motion: no-preference) {
  .is-scrolled .burger {
    animation: burger-in 0.2s ease-out;
  }
}

@keyframes burger-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dropdown: Cyan-Fläche, weiße Schrift (wie .elementor-nav-menu--dropdown) */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 299;
  background: var(--c-cyan);
  box-shadow: 0 14px 28px rgba(20, 41, 51, 0.2);
}

.is-scrolled .dropdown {
  position: fixed;
  top: 68px;
  left: 12px;
  right: 12px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.dropdown__list {
  list-style: none;
  padding: 0;
}

.dropdown__list li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.dropdown a {
  display: block;
  padding: 14px var(--gutter);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--c-weiss);
}

.dropdown a:hover,
.dropdown a:focus-visible,
.dropdown a.is-active {
  background: rgba(20, 41, 51, 0.54);
  color: var(--c-weiss);
}

.dropdown a:focus-visible {
  outline: 3px solid var(--c-text);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  .dropdown:not([hidden]) {
    animation: dropdown-in 0.2s ease-out;
  }
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .site-header__inner {
    min-height: 86px;
    padding-inline: 40px;
  }

  .site-header__logo img {
    width: 120px;
  }
}

@media (min-width: 1025px) {
  .site-header__inner {
    padding-inline: 58px 67px;
  }

  .main-nav {
    display: block;
    margin-right: clamp(24px, 8vw, 110px);
  }

  .is-scrolled .burger {
    top: 13px;
    right: 58px;
  }

  .dropdown {
    left: auto;
    right: 58px;
    top: calc(100% - 10px);
    width: 260px;
    border: 1px solid var(--c-weiss);
  }

  .is-scrolled .dropdown {
    top: 69px;
    left: auto;
    right: 58px;
  }

  .dropdown a {
    padding: 12px 24px;
  }

  .dropdown__item--mobile {
    display: none;
  }
}

/* ==========================================================================
   Hero – Foto full-bleed (630px Desktop), halbtransparente Box rechts
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* Foto beschneiden; Badge und Box liegen vollständig innerhalb */
  display: flex;
  flex-direction: column; /* mobil: Box und Fußnote untereinander über dem unteren Bildteil, Gesicht und Access Point bleiben frei */
  justify-content: flex-end;
  min-height: 600px;
  background: var(--c-text);
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: -1;
}

.hero__media img {
  object-fit: cover;
  /* Bildausschnitt fuer das Motiv „Standort-Check am Empfangstresen“ (1983 x 793, 2,5:1),
     bestimmt am 09.11.2026 aus gerenderten Vergleichen bei 520 bis 2560px.

     Senkrecht (30 %): Erst ab rund 1575px Fensterbreite wird ueberhaupt senkrecht beschnitten –
     darunter ist das Bild flacher als die Hero-Flaeche und sitzt voll drin. Bei 1920px fehlen 18 %
     der Hoehe. Mit 50 % war die Zeigehand ab 2560px abgeschnitten, mit 8 % fehlte unten der Tresen.
     30 % haelt beides: Fingerspitze oben, Tresen mit Kartenterminal unten.

     Waagerecht (80 % mobil, 50 % ab 1025px): Bei 390px sind nur 26 % der Bildbreite zu sehen. Mit
     mittigem Ausschnitt stand dort nur der Arm im Bild, beide Gesichter lagen ausserhalb. 80 %
     holt Techniker und Betreiberin in den schmalen Streifen ueber der Textbox. Ab 1025px ist genug
     Breite da, dort gilt wieder die Bildmitte – mit 80 % wuerde die ruhige Flaeche links fehlen,
     auf der die Textbox steht. */
  object-position: 80% 30%;
}

.hero__inner {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 72px 20px 20px;
}

.hero__box {
  position: relative;
  width: 100%;
  max-width: 680px;
  padding: 26px 24px 28px;
  /* Dunkel getoent statt hell (Katharina 05.11.2026): Die Fussnote steht jetzt in der Box
     und ist der kleinste Text der Seite - auf heller Toenung kam weisse Schrift nur auf
     2,7:1 statt der geforderten 4,5:1. Dunkel ergibt rund 13:1. Backlog T2. */
  background: rgba(0, 0, 0, 0.45);
  color: var(--c-weiss);
}

.hero__title {
  font-size: var(--h2-size);
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--c-weiss);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.hero__line {
  display: block;
}

.hero__lead {
  max-width: 30em;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-weiss);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero__box .btn {
  margin-top: 22px;
}

/* Call-to-Action im Hero: LAN1-Rot, Hover in Marken-Cyan (Katharina 09.11.2026; vorher blau mit
   rotem Hover, davor schwarz). Weiss auf Rot ergibt 6,0:1.
   Beim Hover wechselt die Schrift auf --c-text: Weiss auf --c-cyan haette nur 2,3:1 und faellt
   damit unter die geforderten 4,5:1 (gleiche Rechnung wie bei den Schrittziffern weiter unten).
   Dunkel auf Cyan ergibt 5,7:1.
   Die Hover-Regel muss hier wiederholt werden: .hero__box .btn--primary und .btn--primary:hover
   haben dieselbe Spezifitaet (0,2,0) - ohne sie wuerde die spaeter stehende Regel gewinnen
   und der Button im Hero rot bleiben. */
.hero__box .btn--primary {
  background: var(--c-rot);
}

.hero__box .btn--primary:hover {
  background: var(--c-cyan);
  color: var(--c-text);
}

/* Restlaufzeit-Punkt direkt unter dem Call-to-Action */
.hero__point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 30em;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-weiss);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.hero__point .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* Störer-Badge – einzige Stelle mit Rot, an der oberen rechten Ecke der Box.
   Ist "aktion" in site.config.json false, setzt scripts/apply-config.mjs hidden. */
.badge {
  position: absolute;
  top: -50px;
  right: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: var(--c-rot);
  color: var(--c-weiss);
  padding-top: 16px; /* Platz fuer das zweizeilige Etikett ueber „BIS ZU“ */
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3);
  transform: rotate(8deg); /* nach rechts geneigt, gleiche Richtung wie der Bundle-Stoerer */
}

.badge__small {
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge__big {
  margin-block: 3px;
  font-size: 2.325rem;
  font-weight: 900;
  white-space: nowrap;
}

/* „Anschluss Aktion“-Etikett auf dem Störer: weiße Fläche, roter Text, dreht mit dem Badge mit.
   Zweizeilig wie am Bundle-Störer (Katharina 06.11.2026) – ein span je Zeile, damit der Umbruch
   nicht von der Breite abhaengt. Schrift kleiner als vorher (1,03 → 0,9rem): Zwei Zeilen in der
   alten Groesse haetten das Etikett ueber den Kreis hinaus und in das „BIS ZU“ darunter geschoben. */
.badge__tag {
  position: absolute;
  top: -18px;
  left: 50%;
  padding: 5px 15px 4px;
  border-radius: 15px;
  background: var(--c-weiss);
  color: var(--c-rot);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}

.badge__tag span {
  display: block;
  white-space: nowrap;
}

/* Fußnote am unteren Rand des Heros: weiß 12px auf dunklem Verlauf (lesbar auf jedem Bildausschnitt).
   Mobil im Fluss unter der Box (wächst mit der Textlänge), ab Tablet absolut am unteren Rand. */
/* Steht seit 05.11.2026 in der Hero-Box, nicht mehr als Balken ueber die volle Hero-Breite. */
.hero__footnote {
  margin-top: 30px;
  color: var(--c-weiss);
  font-size: 12px;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
    min-height: 630px;
  }

  .hero__inner {
    /* Linke Kante der Box buendig mit der "1" im LAN1-Logo.
       Die "1" beginnt bei 90,63 % der Logobreite (Polygon x=476,6 in viewBox 82,0..517,4
       von public/img/logo.svg). Logo hier 120px breit -> 108,75px Versatz,
       dazu der Innenabstand des Headers (.site-header__inner, hier 40px). */
    justify-content: flex-start;
    padding: 64px 40px 80px calc(40px + 108.75px);
  }

  .hero__box {
    padding: 32px;
  }

  .badge {
    /* -8px statt -54px: Der groessere Stoerer soll nicht am oberen Hero-Rand kleben.
       Der rote Kreis ragt nur noch 8px ueber die Box, das "Aktion"-Etikett darueber
       rund 28px - damit bleiben etwa 36px Luft bis zur Hero-Oberkante. */
    top: -8px;
    right: -22px;
    width: 162px;
    height: 162px;
  }

  .badge__big {
    font-size: 2.7rem;
  }

  .badge__small {
    font-size: 1.125rem;
  }

}

@media (min-width: 1025px) {
  .hero__inner {
    /* wie oben; der Header hat hier 58px Innenabstand */
    padding: 64px 72px 72px calc(58px + 108.75px);
  }

  /* Ab hier die Bildmitte statt des rechten Ausschnitts (siehe .hero__media img) */
  .hero__media img {
    object-position: 50% 30%;
  }

  .badge {
    right: -36px;
  }

}

/* ---------- Hero-Box und Aktions-Störer gegen das Foto ausgerichtet (Katharina 09.11.2026) ----------
   Ausgangslage: Die Zeigehand des Technikers liegt im Foto bei 52 % der Bildbreite und wandert
   deshalb mit dem Fenster nach rechts (gemessen: linke Kante bei rund 0,52 x Fensterbreite,
   also 761px bei 1440 und 1007px bei 1920). Textbox und Störer stehen dagegen fest. Mit 816px
   Boxbreite lag der rote Kreis von 1550 bis 1950px auf der Hand, und die Boxkante lief quer
   durch den Arm. Deshalb (Variante A, von Katharina am Mockup ausgewählt):

   Ab 1240px ist die Box 590px breit. Ihre rechte Kante liegt dann bei 757px – weit genug links,
   dass Hand, Finger und beide Personen an jeder Breite frei auf dem Foto stehen. Darunter
   bleibt es bei 680px: Dort ist die Hand ohnehin hinter der Box (bei 1025px liegt sie bei 551px,
   die Box müsste unter 400px schmal sein), und schmaler Text brächte nur mehr Umbrüche.
   Die 816px von heute Vormittag entfallen damit.

   Der Störer sitzt dadurch fast überall wieder an der Boxecke (right: -36px). Nur zwischen
   1240 und 1519px trifft die Ecke genau die Hand – dort rückt er 105px in die Box hinein.
   Die krummen Grenzen 1240 und 1520 sind gemessen, nicht gegriffen: Bei 1280 bzw. 1500 beruehrte
   der Kreis die Fingerspitze noch um 9 bzw. 2 Pixel.
   Weiter als 115px darf er nicht, sonst stösst er an „GEMANAGT.“.
   Nachgemessen bei 1025, 1100, 1200, 1279, 1280, 1366, 1440, 1499, 1500, 1536, 1920 und 2560px. */
@media (min-width: 1240px) {
  .hero__box {
    max-width: 590px;
  }
}

@media (min-width: 1240px) and (max-width: 1519px) {
  .badge {
    right: 105px;
  }
}

/* ==========================================================================
   Zurück nach oben – LAN1-Ring mit Pfeil, fest unten rechts
   ========================================================================== */
/* Weiße Scheibe als Träger, damit der Knopf über jedem Untergrund steht – Foto, Cyan,
   Blau oder Weiß. Der Ring allein würde auf der blauen Formular-Sektion verschwinden.
   z-index 290 liegt unter dem fixierten Burger (300) und über dem Inhalt.
   Sichtbar ab .is-scrolled (setzt main.js, sobald der Header aus dem Bild ist): Ganz oben
   zeigt der Pfeil sonst dorthin, wo der Besucher schon steht. */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 290;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-weiss);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  color: var(--c-blau);
  visibility: hidden;
  opacity: 0;
}

.is-scrolled .to-top {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .to-top {
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
}

/* Hover wie bei allen Buttons der Seite: Rot */
.to-top:hover {
  background: var(--c-rot);
  color: var(--c-weiss);
}

.to-top .ring-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  color: inherit;
}

.to-top .ring-icon__ring {
  stroke-width: 3;
}

.to-top .ring-icon__glyph {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .to-top {
    right: 24px;
    bottom: 24px;
    width: 64px;
    height: 64px;
  }

  .to-top .ring-icon {
    width: 50px;
    height: 50px;
  }

  .to-top .ring-icon__glyph {
    width: 23px;
    height: 23px;
  }
}

/* ==========================================================================
   Teaser-Leiste – vier Anker-Spalten (#0092d2, Spalten 1 und 3 #0084c7)
   ========================================================================== */
.teaser {
  background: var(--c-teaser);
}

.teaser__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaser__list > li:nth-child(odd) .teaser__link {
  background: var(--c-teaser-dunkel);
}

.teaser__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 110px;
  padding: 14px 16px 12px;
  color: var(--c-weiss);
  text-align: center;
  text-decoration: none;
}

.teaser__link:hover {
  color: var(--c-weiss);
}

.teaser__link:focus-visible {
  outline: 3px solid var(--c-weiss);
  outline-offset: -6px;
}

.teaser__title {
  font-size: clamp(1.05rem, 0.6rem + 0.9vw, 1.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.teaser__text {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.4;
}

.teaser__caret {
  flex: none;
  width: 44px;
  height: 24px;
  margin-top: auto;
  padding-top: 8px;
  box-sizing: content-box;
  fill: var(--c-caret);
  transition: transform 0.2s ease;
}

.teaser__link:hover .teaser__caret {
  transform: translateY(3px);
}

@media (min-width: 768px) and (max-width: 999px) {
  .teaser__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2 × 2: Schachbrett statt dunkler linker Spalte */
  .teaser__list > li:nth-child(3) .teaser__link {
    background: transparent;
  }

  .teaser__list > li:nth-child(4) .teaser__link {
    background: var(--c-teaser-dunkel);
  }
}

@media (min-width: 1000px) {
  .teaser__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .teaser__link {
    min-height: 118px;
    padding-inline: 10px;
  }
}

/* ==========================================================================
   Intro – H2 Cyan zentriert, Absatz, schwarzer Button, Trust-Zeile
   ========================================================================== */
.intro {
  padding-block: 56px 32px;
  text-align: center;
}

.intro .section-title {
  color: var(--c-cyan);
}

.intro__text {
  max-width: var(--container);
  margin: 20px auto 0;
  line-height: 1.7;
}

.intro__action {
  margin-top: 30px;
}

@media (min-width: 1025px) {
  .intro {
    padding-top: 78px;
  }
}

/* ==========================================================================
   Preis-Schieberegler (#bandbreite) – eine Karte im Tab-Kasten-Look, eine Hauptaktion.
   Daten aus public/data/preise.json. Ohne JavaScript: Tabelle (scripts/apply-config.mjs).
   Kleinster funktionaler Text 12px (Skala), Hinweise 13px.
   ========================================================================== */
/* Breiten-Wrapper des Reglers. Gleiche Werte wie .photo-block__inner, damit die Karte exakt so breit
   ist wie die Fotos der Foto-Karten darunter („So funktioniert der Wechsel“). Der Regler liegt dafür
   in public/index.html ausserhalb von .container – der ist mit --container (1080px) schmaler. */
/* Die hellblaue Fläche liegt über die ganze Fensterbreite (Katharina 09.11.2026), der
   Inhalt darin bleibt auf Fotobreite. Deshalb ein eigenes Band statt eines
   100vw-Tricks: 100vw ist bei sichtbarer Scrollleiste breiter als der Inhaltsbereich
   und erzeugt waagerechtes Scrollen. Der Abstand nach oben sitzt am Band, nicht mehr
   an der Karte, sonst stünde die Fläche 40 px zu hoch. */
.tarif-band {
  margin-top: 40px;
  padding-block: 28px;
  /* Reglerspur und Tabellenlinien eine Spur dunkler als global: --c-linie (#dfe3e6) ist
     leicht blau und auf dem neutralen Grau zu schwach. */
  --c-linie: var(--c-grau-linie);
  background: var(--c-hell);
}

.tarif__breit {
  width: 100%;
  max-width: calc(var(--container-wide) + 20px);
  margin-inline: auto;
  padding-inline: 10px;
}

.tarif {
  --thumb: 44px; /* Griff = Touch-Ziel (Apple HIG 44pt) */
  margin: 0 auto;
  padding: 24px 18px 22px;
  text-align: left;
}

.tarif__eyebrow {
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-blau);
}

.tarif__title {
  margin-top: 6px;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-schwarz);
  text-wrap: balance;
}

.tarif__lead {
  margin-top: 10px;
  line-height: 1.6;
  color: var(--c-text-leise);
}

/* „ab-Preis“ nicht am Bindestrich umbrechen */
.tarif__wort {
  white-space: nowrap;
}

/* Platzhalter-Hinweis: ruhig, aber nicht zu übersehen (Cyan-Tönung wie die gewählte Formular-Option) */
.tarif__muster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 12px;
  border: 1px solid var(--c-blau);
  border-radius: 16px; /* einzeilig Pille, zweizeilig (mobil) ruhige Karte */
  background: rgba(4, 187, 238, 0.1);
  color: var(--c-blau);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}

.tarif__muster::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blau);
}

/* ---------- Umschalter DSL / Glasfaser: Segment-Schalter aus echten Radio-Buttons ----------
   Tab führt in die Gruppe, Pfeiltasten wechseln die Technik. Jedes Segment ist mindestens 44px hoch (Apple HIG). */
.tarif__technik {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.tarif__schalter {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-rahmen);
  border-radius: var(--radius-btn);
  background: var(--c-weiss);
}

.tarif__option {
  position: relative;
  display: flex;
}

/* Radio unsichtbar, aber fokussierbar und über die ganze Segmentfläche klickbar */
.tarif__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tarif__option span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: calc(var(--radius-btn) - 3px);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--c-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tarif__option:hover span {
  background: var(--c-hell);
}

.tarif__option input:checked + span {
  background: var(--c-blau);
  color: var(--c-weiss);
}

.tarif__option input:focus-visible + span {
  outline: 3px solid var(--c-blau);
  outline-offset: 2px;
}

/* ---------- Anzeige: graue Fläche mit Bandbreite, Preis und Bundle-Störer ----------
   Mobil (Katharina 06.11.2026): zwei Spalten statt drei Zeilen. Links untereinander Bandbreite
   und Preis, beide linksbündig und als Gruppe senkrecht mittig; rechts der Störer, ebenfalls
   mittig. Vorher stand der Störer in einer eigenen dritten Zeile – die Fläche war dadurch
   rund 314px hoch und wirkte leer. */
.tarif__anzeige {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  margin-top: 18px;
  /* Unten 36px statt 22px (Katharina 09.11.2026): Die Fläche hat jetzt drei Zeilen (Label,
     Bandbreite, Preis) und soll nach unten Luft haben, statt unter „inkl. Managed Service“
     hart abzuschneiden. */
  padding: 22px 16px 36px;
  background: var(--c-grau-flaeche);
}

/* Preis-Label über der Bandbreite – benennt den Betrag darunter als den Preis ohne den
   Bundle-Rabatt des roten Störers. Maße wie .tarif__eyebrow, nur in Grau statt Blau,
   damit es als Beschriftung und nicht als Inhalt gelesen wird. */
.tarif__label {
  grid-area: 1 / 1 / 2 / 2;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Auf Telefonen bleiben neben dem Störer rund 160–190px – die Zeile bricht dort um.
     balance teilt sie in „PREIS OHNE“ / „BUNDLE-RABATT“ statt in eine lange und eine kurze. */
  text-wrap: balance;
  color: var(--c-text-leise); /* 6,2:1 auf #e3e8ec */
}

.tarif__auswahl {
  grid-area: 2 / 1;
}

.tarif__preisblock {
  grid-area: 3 / 1;
}

/* Mobil kleiner und mitwachsend (siehe .tarif__stoerer): Neben dem Störer bleibt in der grauen
   Fläche nur begrenzt Platz, und „ab 49,95 €/Monat*“ soll in einer Zeile stehen.
   Ab Tablet gilt die ursprüngliche Staffelung (1,6 bis 2,1rem). */
.tarif__stufe {
  font-size: clamp(1.3rem, 0.9rem + 2.2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-schwarz);
}

/* „Download 100 / Upload 40 Mbit/s“ */
.tarif__detail {
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text-leise);
}

.tarif__preis {
  line-height: 1.15;
  color: var(--c-schwarz);
}

/* Mobil 14px statt 16px: Neben dem Störer bleiben in der grauen Fläche rund 186px, und
   „ab 49,95 €/Monat*“ passte mit 16px nicht in eine Zeile – „ab“ stand allein darüber.
   Der Betrag selbst bleibt unverändert groß. Ab Tablet wieder 16px. */
.tarif__ab,
.tarif__einheit {
  font-size: 0.875rem;
  font-weight: 700;
}

.tarif__betrag {
  font-size: clamp(1.3rem, 0.9rem + 2.2vw, 1.6rem);
  font-weight: 900;
  white-space: nowrap;
}

.tarif__zusatz {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-line; /* main.js trennt die Zusätze mit Zeilenumbruch */
  color: var(--c-text-leise);
}

.tarif__zusatz:empty {
  display: none;
}

/* ---------- Bundle-Störer am Preis: roter Kreis wie der Aktions-Störer im Hero ----------
   Mobil rechts neben Bandbreite und Preis, senkrecht mittig in der grauen Fläche – und dort
   mitwachsend statt fest. Grund: Der Preis daneben muss in eine Zeile passen. Mit festen 118px
   brach „ab 49,95 €/Monat*“ auf 390px-Geräten nach „ab“ um, mit 104px auf 360px-Geräten.
   26vw mit Unter- und Obergrenze lässt dem Preis auf jeder Breite genug Platz (an 360 und 390px
   mit Geräte-Emulation nachgemessen).
   Ab Tablet sitzt er in voller Größe (165px) absolut in der oberen rechten Ecke. */
.tarif__stoerer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: 1 / 2 / 4 / 3; /* rechte Spalte, über alle drei Textzeilen – dadurch senkrecht mittig */
  justify-self: end;
  /* Untergrenze 100px: Darunter passen „IM BUNDLE“ und das Etikett nicht mehr in den Kreis
     und ragen seitlich heraus (bei 320px nachgesehen). */
  width: clamp(100px, 26vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-rot);
  color: var(--c-weiss);
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transform: rotate(8deg); /* nach rechts geneigt (Hero-Störer: nach links) */
}

/* Das hidden-Attribut würde sonst von display:flex überstimmt (main.js blendet den Störer
   aus, solange kein Preis feststeht – „Preis auf Anfrage“). */
.tarif__stoerer[hidden] {
  display: none;
}

/* „Anschluss“: weißes Etikett am oberen Rand, dreht mit – wie .badge__tag im Hero.
   Es benennt, worauf sich der Betrag bezieht; das Komplettpaket bleibt ohne Preis. */
.tarif__stoerer-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 3px 9px 2px;
  border-radius: 11px;
  background: var(--c-weiss);
  color: var(--c-rot);
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}

/* „Anschluss“ und „Aktion“ untereinander (Katharina 06.11.2026): ein span je Zeile,
   damit der Umbruch nicht von der Breite des Etiketts abhaengt. */
.tarif__stoerer-tag span {
  display: block;
  white-space: nowrap;
}

.tarif__stoerer-klein {
  font-size: 0.6875rem;
  font-weight: 700;
}

.tarif__stoerer-text {
  margin-top: 2px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.tarif__stoerer-betrag {
  margin-block: 2px;
  font-size: 1.0625rem;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- Regler: Spur 8px, Füllung im LAN1-Verlauf bis zur Griffmitte, Griff 44px ---------- */
.tarif__range {
  --p: 0; /* 0 … 1, setzt main.js (CSSOM, kein style-Attribut im HTML) */
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 18px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tarif__range:focus-visible {
  outline-offset: 4px;
}

.tarif__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--c-cyan), var(--c-blau)) no-repeat 0 0 / calc(var(--thumb) / 2 + var(--p) * (100% - var(--thumb))) 100%,
    var(--c-linie);
}

.tarif__range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--c-linie);
}

.tarif__range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-blau));
}

/* Griff: weißer Kern, blauer Ring, heller Hof – der Hof zeigt die volle Touch-Fläche */
.tarif__range::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((8px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--c-weiss) 0 50%, var(--c-blau) 51% 65%, rgba(4, 187, 238, 0.22) 66% 100%);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}

.tarif__range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--c-weiss) 0 50%, var(--c-blau) 51% 65%, rgba(4, 187, 238, 0.22) 66% 100%);
}

.tarif__range:hover::-webkit-slider-thumb,
.tarif__range:active::-webkit-slider-thumb {
  background: radial-gradient(circle closest-side, var(--c-weiss) 0 50%, var(--c-blau) 51% 65%, rgba(4, 187, 238, 0.4) 66% 100%);
}

.tarif__range:hover::-moz-range-thumb,
.tarif__range:active::-moz-range-thumb {
  background: radial-gradient(circle closest-side, var(--c-weiss) 0 50%, var(--c-blau) 51% 65%, rgba(4, 187, 238, 0.4) 66% 100%);
}

/* Skala: Striche exakt unter den Griffpositionen (Breite 0, space-between, Rand = halbe Griffbreite) */
.tarif__skala {
  display: flex;
  justify-content: space-between;
  margin: 2px calc(var(--thumb) / 2) 0;
  padding: 0;
  list-style: none;
}

.tarif__tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 0;
  cursor: pointer;
}

.tarif__tick::before {
  content: "";
  width: 2px;
  height: 8px;
  margin-bottom: 6px;
  background: var(--c-rahmen);
}

.tarif__tick-wert {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--c-text-leise);
}

.tarif__tick.is-active::before {
  background: var(--c-blau);
}

.tarif__tick.is-active .tarif__tick-wert {
  font-weight: 900;
  color: var(--c-schwarz);
}

/* ---------- Aktion: eine Hauptaktion ---------- */
.tarif__aktion {
  display: grid;
  margin-top: 22px;
}

.tarif__cta {
  width: 100%;
}

/* Zeile „anfrage“ aus preise.json – unter dem Regler bzw. den Tabellen */
.tarif__anfrage {
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
}

.tarif__fussnote {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-leise);
}

.tarif__anfrage + .tarif__fussnote {
  margin-top: 6px;
}

/* ---------- Ohne JavaScript: je Technik eine schlichte Tabelle (ab 768px nebeneinander) ---------- */
.tarif__tabellen {
  display: grid;
  gap: 8px 32px;
}

.tarif__tabelle {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.tarif__caption {
  padding-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--c-text-leise);
}

.tarif__caption-technik {
  display: block;
  margin-bottom: 2px;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-schwarz);
}

.tarif__tabelle th,
.tarif__tabelle td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--c-linie);
  text-align: left;
  vertical-align: top;
}

.tarif__tabelle thead th {
  border-bottom-color: var(--c-schwarz);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-blau);
}

.tarif__tabelle tbody th {
  font-weight: 700;
}

.tarif__tabelle td,
.tarif__tabelle thead th:nth-child(n + 2) {
  text-align: right;
  white-space: nowrap;
}

/* Bundle-Spalte der Ohne-JavaScript-Tabelle: derselbe Betrag wie im Störer, in LAN1-Rot */
.tarif__tabelle-bundle {
  color: var(--c-rot);
}

.tarif__tabelle td {
  font-weight: 700;
}

.tarif__tabelle-detail {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-leise);
}

/* Mobil: nur jede zweite Skalen-Beschriftung (gewählte Stufe steht groß darüber) */
@media (max-width: 639px) {
  .tarif__tick:nth-child(even) .tarif__tick-wert {
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .tarif-band {
    padding-block: 44px;
  }

  .tarif {
    padding: 32px 36px 28px;
  }

  /* Segment-Schalter in fester Breite links, nicht über die ganze Karte */
  .tarif__schalter {
    width: min(100%, 340px);
  }

  .tarif__tabellen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Einspaltige Karte (768–1199px): Bandbreite links, Preis rechts in einer Zeile.
     Rechts 150px für den Störer freihalten, damit kein Text darunter läuft. */
  .tarif__anzeige {
    position: relative; /* Bezug für den Störer in der oberen rechten Ecke */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; /* Bandbreite und Preis auf einer Grundlinie */
    gap: 16px 28px;
    /* Oben 34px statt 18px Abstand zum Technik-Schalter: Der Störer ragt mit seinem
       „Anschluss“-Etikett über die obere Kante. */
    margin-top: 34px;
    /* Rechts 150px freihalten: Der Kreis ragt 40px ueber die rechte Kante hinaus und
       braucht innen entsprechend weniger Platz. Oben/unten 38px, damit er nicht unter
       die graue Flaeche auf den Regler ragt. */
    padding: 38px 150px 52px 24px;
  }

  /* Label über die ganze Fläche, Bandbreite und Preis stehen darunter nebeneinander */
  .tarif__label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tarif__preisblock {
    text-align: right;
  }

  /* Mobile Platzierung aufheben – ab hier stehen Bandbreite und Preis nebeneinander */
  .tarif__auswahl,
  .tarif__preisblock {
    grid-area: auto;
  }

  /* Störer wieder in voller Größe samt Schrift */
  .tarif__stoerer {
    width: 165px;
    height: 165px;
  }

  .tarif__stoerer-tag {
    padding: 5px 14px 4px;
    border-radius: 14px;
    font-size: 0.8125rem;
  }

  .tarif__stoerer-klein {
    font-size: 1rem;
  }

  .tarif__stoerer-betrag {
    margin-block: 3px;
    font-size: 1.625rem;
  }

  .tarif__ab,
  .tarif__einheit {
    font-size: 1rem;
  }

  .tarif__stufe,
  .tarif__betrag {
    font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.1rem);
  }

  /* Die graue Fläche endet 24px vor der Kachelkante, damit der Störer mit seinen 40px
     Überstand nicht über die hellblaue Fläche hinausragt: Kreisrand = Kachelkante minus 20px.
     (Katharina 06.11.2026) */
  .tarif__ergebnis {
    margin-right: 24px;
  }

  /* Obere rechte Ecke der grauen Fläche, leicht darüber hinaus – wie der Störer im Hero.
     Absolut, damit er die Zeilenhöhe nicht aufzieht und der Kasten kompakt bleibt. */
  .tarif__stoerer {
    position: absolute;
    /* Platzierung aus dem Raster lösen (09.11.2026): Ein absolut gesetztes Raster-Kind mit fester
       Zeile und Spalte bezieht top/right auf seine Rasterzelle, nicht auf die graue Fläche. Mit
       der mobilen Angabe grid-area: 1 / 2 / 4 / 3 war das von 768 bis 1199px die rechte Spalte,
       also der Preisblock – der Kreis saß 110px zu weit links und lag auf „ab 49,95 €/Monat*“.
       Mit grid-area: auto ist der Bezug wieder die Fläche selbst, wie ab 1200px. */
    grid-area: auto;
    /* So weit nach rechts, dass die obere rechte Ecke der grauen Flaeche im Kreis verschwindet:
       Die Ecke liegt dann 77px vom Kreismittelpunkt entfernt, der Radius betraegt 82,5px. */
    top: -18px;
    right: -40px;
    justify-self: auto;
    margin-top: 0;
  }

  /* Der Button wächst mit dem Stufennamen, ohne dass etwas anderes springt */
  .tarif__aktion {
    justify-items: start;
  }

  .tarif__cta {
    width: auto;
  }
}

/* ==========================================================================
   Zwei Spalten ab 1200px: links die Bedienung, rechts das Ergebnis
   Die Karte ist so breit wie die Fotos darunter (1280px). Einspaltig standen Bandbreite und
   Preis an den gegenüberliegenden Enden der grauen Leiste, rund 1100px auseinander. Jetzt trägt
   die linke Spalte Technik-Schalter, Regler und Button, die rechte die graue Fläche mit beiden
   Preisen untereinander; die rechte Spalte läuft über alle drei Zeilen der linken.
   Erst ab 1200px: Darunter bliebe der linken Spalte zu wenig (Regler-Beschriftungen überlappen,
   der Button bricht mehrzeilig um). Bis dahin die einspaltige Karte von oben.
   ========================================================================== */
@media (min-width: 1200px) {
  .tarif__regler {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    grid-template-areas:
      "technik   ergebnis"
      "steuerung ergebnis"
      "aktion    ergebnis";
    align-items: start;
    column-gap: 48px;
    padding-top: 26px; /* Luft für das „Anschluss“-Etikett, das über die graue Fläche ragt */
  }

  .tarif__technik {
    grid-area: technik;
    margin-top: 0;
  }

  .tarif__steuerung {
    grid-area: steuerung;
  }

  .tarif__aktion {
    grid-area: aktion;
  }

  .tarif__ergebnis {
    grid-area: ergebnis;
  }

  /* In der schmalen rechten Spalte stehen Bandbreite und Preis untereinander, nicht nebeneinander */
  .tarif__anzeige {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 0;
    padding: 24px 150px 38px 24px;
  }

  .tarif__preisblock {
    text-align: left;
  }
}

/* ==========================================================================
   Netzpartner-Leiste – Chips mit Rahmen #28343c, Badges später statt Chips
   ========================================================================== */
.partners {
  /* Oben 56px statt 16px (Katharina 06.11.2026): Zwischen dem Button darueber und
     „Unsere Netzpartner“ klebte sonst alles aneinander. Unten bleiben 24px – zusammen mit
     dem margin-top von .tarif ergibt das die 64px Abstand zur hellblauen Kachel, die bleiben sollen. */
  padding-block: 56px 24px;
  background: var(--c-weiss);
}

.partners__eyebrow {
  margin-bottom: 10px; /* etwas Luft zwischen Zeile und Logos */
  text-align: center;
}

/* ---------- Logoband (Katharina 06.11.2026) ----------
   Vier Partnerlogos und zwei Wortmarken laufen langsam durch, getrennt durch einen Punkt.
   Umgesetzt als echter Scroll-Container, nicht als transform-Animation: Dadurch funktionieren
   Wischen, Trackpad und die Pfeiltasten von selbst, und die beiden Knoepfe muessen nur
   scrollBy() aufrufen. main.js schiebt scrollLeft Bild fuer Bild weiter und springt am Ende
   einer Kopie zurueck - der Sprung ist unsichtbar, weil die Spur mehrfach geklont ist. */
.logoband {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: 10px;
}

.logoband__bahn {
  /* flex, damit die von main.js angehaengten Kopien der Spur nebeneinander statt
     untereinander stehen – sonst waere das Band so hoch wie die Zahl der Kopien */
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox: die Leiste wuerde unter dem Band flackern */
}

.logoband__bahn::-webkit-scrollbar {
  display: none;
}

.logoband__bahn:focus-visible {
  outline: 3px solid var(--c-blau);
  outline-offset: 2px;
}

.logoband__spur {
  display: flex;
  flex: none;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logoband__item {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 80px;
}

/* Trennpunkt als generierter Inhalt: Er gehoert zur Gestaltung, nicht zum Inhalt, und
   taucht so weder im Vorlesetext noch beim Kopieren der Seite auf. */
.logoband__item::after {
  padding-inline: 28px;
  color: var(--c-rahmen);
  font-size: 1.125rem;
  line-height: 1;
  content: "•";
}

/* Die zwei Kategorien ohne Logo: als Wortmarke gesetzt, nicht als Chip mit Rahmen.
   Ein Rahmen liesse sie wie Schaltflaechen aussehen, ein Platzhalterbild wie ein fehlendes Logo. */
.logoband__item--wort {
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-leise);
}

/* Logos auf gleiche OPTISCHE Hoehe, nicht auf gleiche Bildhoehe: Alle vier Dateien sind
   500 x 300 gross, der sichtbare Inhalt darin aber unterschiedlich hoch (Telekom 171px,
   Vodafone 117px, M-net 185px, wilhelm.tel 121px). Gleiche Bildhoehe liesse die beiden
   Wortmarken-Logos winzig wirken. Die Hoehen unten sind so gewaehlt, dass der sichtbare Inhalt
  im gerenderten Band 43 bis 48px hoch ist - nachgemessen, nicht geschaetzt.
  Am 06.11.2026 um 25 % vergroessert (vorher 34 bis 38px). */
/* <picture> fuer WebP mit PNG-Rueckfall. Als Flex-Kind wird das Element ohnehin
   blockifiziert; display: block steht trotzdem da, damit der negative Rand des
   Telekom-Logos (siehe unten) verlaesslich an der Breite des Kastens zieht. */
.logoband__bild {
  display: block;
}

/* max-width: none hebt die globale Regel img { max-width: 100% } auf. Im <picture>
   bezieht sich die 100 % auf den Kasten des <picture>, und der ist beim Telekom-Logo
   durch dessen negativen Rand 32px schmaler als das Bild. Mit der globalen Regel
   wuerde das Logo auf diese Breite gequetscht – bei fester Hoehe also verzerrt. */
.logoband__logo {
  display: block;
  width: auto;
  max-width: none;
}

.logoband__logo--telekom {
  height: 80px;
  /* Diese Datei hat rundum mehr transparenten Rand als die anderen (70px statt 14px links).
     Ohne Ausgleich stuenden die Trennpunkte neben Telekom sichtbar weiter weg. */
  margin-inline: -16px;
}

.logoband__logo--vodafone {
  height: 110px;
}

.logoband__logo--mnet {
  height: 75px;
}

.logoband__logo--wilhelmtel {
  height: 105px;
}

/* Fuenf weitere Netzpartner (Katharina 10.11.2026, Logos freigegeben).
   Die Hoehe gilt fuer die ganze 500x300-Bilddatei, nicht fuer das Logo darin -
   wie viel davon sichtbar ist, haengt vom transparenten Rand der jeweiligen
   Datei ab. Die Werte sind so gewaehlt, dass alle Logos optisch gleich schwer
   wirken: bei den Schriftzuegen ueber die sichtbare Hoehe (Bestand: 43 bis
   46px), bei den beiden gestapelten Logos ueber die Flaeche, weil sie sonst
   bei gleicher Hoehe deutlich kleiner wirken wuerden.
   Keine Hoehe ueber 110px, sonst waechst die Zeile (.logoband__item). */
.logoband__logo--versatel {
  height: 100px;
}

.logoband__logo--ewe {
  height: 75px;
}

/* Gestapelt: Balken ueber dem Schriftzug. */
.logoband__logo--netcologne {
  height: 90px;
}

.logoband__logo--colt {
  height: 70px;
}

/* Gestapelt: Kreiszeichen ueber dem Schriftzug. */
.logoband__logo--globalconnect {
  height: 100px;
}

/* Schiebe-Knoepfe: ohne JavaScript versteckt (sie koennten dann nichts bewirken),
   main.js blendet sie ein. */
.logoband__nav {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;  /* Touch-Ziel */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.logoband__nav[hidden] {
  display: none;
}

.logoband__nav:hover {
  background: var(--c-rot);
  color: var(--c-weiss);
}

.logoband__nav:focus-visible {
  outline: 3px solid var(--c-blau);
  outline-offset: 2px;
}

.logoband__nav .icon {
  width: 22px;
  height: 22px;
}

.logoband__nav--prev .icon {
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  .logoband {
    gap: 8px;
    padding-inline: var(--gutter);
  }

  .logoband__item {
    min-height: 110px;
  }

  .logoband__item::after {
    padding-inline: 40px;
  }

  .logoband__item--wort {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Foto-Karten – Foto 1280 × 630, weiße Karte 563px mit Schatten überlappt
   Modifier gehören zum Foto (Ausschnitt + Versatz), nicht zur Position auf der Seite:
   a = Schreibtisch (Karte rechts, 70px im Foto), b = Headset (Karte links, ragt über die Oberkante),
   c = Technikschrank (Karte rechts, ragt über die Oberkante).
   Reihenfolge seit Weekly 04.11.2026: c (#so-gehts) → b (#preis) → a (#geschwindigkeit)
   ========================================================================== */
.photo-block {
  padding-top: 40px;
}

/* erster Foto-Block direkt unter der Partner-Leiste */
.photo-block--c {
  padding-top: 48px;
}

.photo-block__inner {
  max-width: calc(var(--container-wide) + 20px);
  margin-inline: auto;
  padding-inline: 10px;
}

.photo-block__media {
  display: block;
  height: 240px;
}

.photo-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-block--a .photo-block__media img {
  object-position: 40% 35%;
}

.photo-block--b .photo-block__media img {
  object-position: 60% 30%;
}

.photo-block--c .photo-block__media img {
  object-position: 30% 40%;
}

.photo-block__card {
  position: relative;
  padding: 36px 26px 32px;
  background: var(--c-weiss);
  box-shadow: var(--shadow-card);
}

.photo-block__eyebrow {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-text);
}

.photo-block__title {
  margin-top: 20px;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--c-text);
}

.photo-block__card p {
  line-height: 1.7;
}

.photo-block__title + p,
.photo-block__title + .mini-steps {
  margin-top: 20px;
}

.photo-block__card p + p {
  margin-top: 14px;
}

.photo-block__card .photo-block__action {
  margin-top: 30px;
  text-align: right;
}

/* Fußnote zur Ersparnis in der Preis-Karte (Text aus scripts/apply-config.mjs, data-cfg="fussnote") */
.photo-block__card .photo-block__footnote {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-text-leise);
}

/* Kompakte Schrittliste in Karte C (So funktioniert der Wechsel) */
.mini-steps {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.mini-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 12px;
}

/* Zahl in einem hellblauen Kreis. Der Kreis sitzt mittig auf der Zeile der
   Schritt-Ueberschrift: deren Zeilenbox ist 1.5rem hoch, der Kreis 32px --
   die halbe Differenz als negativer Abstand oben bringt beide Mitten zur Deckung.
   Farbe seit 09.11.2026 --c-hellblau (#00b6ed, Wunsch Katharina), vorher --c-teaser
   (#0092d2). Weisse Ziffern erreichen darauf nur 2,36:1 statt der 3:1, die 19px bei
   800 als grosse Schrift braeuchten -- bewusst in Kauf genommen und in der README
   unter „Bekannte Punkte“ vermerkt. Dunkle Ziffern (--c-text) kaemen auf 5,41:1. */
.mini-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 32px;
  height: 32px;
  margin-top: calc((1.5rem - 32px) / 2);
  border-radius: 50%;
  background: var(--c-hellblau);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-weiss);
}

.mini-steps__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.mini-steps p {
  line-height: 1.6;
}

@media (min-width: 768px) {
  .photo-block {
    padding-top: 48px;
  }

  .photo-block__inner {
    display: grid;
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .photo-block__media,
  .photo-block__card {
    grid-row: 1;
    align-self: start;
  }

  .photo-block__media {
    height: var(--media-h);
    margin-top: var(--media-offset, 0px);
  }

  .photo-block__card {
    z-index: 1;
    margin-top: var(--card-offset, 0px);
  }
}

/* Tablet: zwei Spalten, Karte überlappt das kleinere Foto um eine schmale Mittelspalte */
@media (min-width: 768px) and (max-width: 1024px) {
  .photo-block {
    --media-h: 440px;
  }

  .photo-block__inner {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  }

  .photo-block__media {
    grid-column: 1 / 3;
  }

  .photo-block__card {
    grid-column: 2 / 4;
    padding: 36px 32px;
  }

  .photo-block--left .photo-block__media {
    grid-column: 2 / 4;
  }

  .photo-block--left .photo-block__card {
    grid-column: 1 / 3;
  }

  .photo-block--a {
    --media-offset: 64px;
  }

  .photo-block--b {
    --media-offset: 96px;
  }

  .photo-block--c {
    --media-offset: 64px;
  }

  .photo-block--a .photo-block__media img {
    object-position: 42% 30%;
  }

  .photo-block--b .photo-block__media img {
    object-position: 62% 30%;
  }

  .photo-block--c .photo-block__media img {
    object-position: 22% 40%;
  }
}

/* Desktop wie Live: Foto 1280 × 630, Karte 563px, 47px vom rechten bzw. 38px vom linken Fotorand */
@media (min-width: 1025px) {
  .photo-block {
    --media-h: 630px;
  }

  .photo-block__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .photo-block__media,
  .photo-block__card {
    grid-column: 1;
  }

  .photo-block__card {
    width: 563px;
    max-width: calc(100% - 77px);
    margin-right: 47px;
    justify-self: end;
    padding: 48px;
  }

  .photo-block--left .photo-block__card {
    justify-self: start;
    margin-right: 0;
    margin-left: 38px;
  }

  .photo-block--a {
    --media-offset: 87px;
    padding-top: 64px;
  }

  .photo-block--b {
    --media-offset: 135px;
    /* Hoeheres Foto als die anderen beiden Kacheln (630px): Der Text dieser Karte ist
       laenger, die Karte ragte sonst unten unter das Foto. Mit 700px endet das Foto
       wieder unter der Karte - wie bei "Wechsel" und "Geschwindigkeit". */
    --media-h: 700px;
  }

  .photo-block--c {
    --media-offset: 87px;
    padding-top: 68px;
  }

  .photo-block--a .photo-block__media img,
  .photo-block--b .photo-block__media img,
  .photo-block--c .photo-block__media img {
    object-position: 50% 30%;
  }
}

/* ==========================================================================
   Managed Service – Cyan-Sektion, Leistungen im Tab-Kasten-Look
   ========================================================================== */
/* Helle Flaeche statt Vollton-Cyan (Entscheidung Katharina 09.11.2026, Variante A).
   Der Vollton trug diese Sektion nicht: H2, Unterzeile, zwei Gruppen mit je drei
   Leistungen und die Bundle-Kachel sind deutlich mehr Inhalt als die kurzen
   Akzent-Baender auf lan1.de, und weisser Fliesstext auf #04bbee sind nur 2,25:1.
   Seit dem 09.11.2026 ist die Flaeche hellgrau (--c-hell, das Grau von
   lan1.de/wlan/infrastruktur) statt hellcyan, gemeinsam mit dem Band „Welche Bandbreite
   brauchen Sie?“. Die Schrift bleibt dunkel: Fliesstext 11,4:1, Titel und Gruppenzeilen
   in --c-blau 4,8:1. Die Sektion bleibt als eigene
   Flaeche im Seitenrhythmus sichtbar, die blaue Bundle-Kachel ist der einzige
   kraeftige Block und damit der Abschluss der Sektion. */
.section--grau {
  margin-top: 64px;
  background: var(--c-hell);
  color: var(--c-text);
}

.section--grau .section-title {
  color: var(--c-blau);
}

.section--grau .section-sub {
  color: var(--c-text);
}

/* Leistungsraster und Bundle-Kachel auf Fotobreite (1280px) stellen, damit sie
   buendig unter den Foto-Bloecken stehen. Werte exakt wie .photo-block__inner.
   Die Ueberschrift bleibt ueber .section-head auf Textbreite (1080px) zentriert. */
.section--grau .container {
  max-width: calc(var(--container-wide) + 20px);
  padding-inline: 10px;
}

@media (min-width: 768px) {
  .section--grau .container {
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    padding-inline: var(--gutter);
  }
}

/* Zwei Gruppen (immer inklusive / optional dazu) mit je drei Leistungen, zentriert
   auf der hellen Flaeche. Der Unterschied zwischen inklusive und optional steckt im
   Icon: gefuellte blaue Scheibe gegen duennen blauen Umriss. Damit ist er auf einen
   Blick sichtbar, und die beiden Beschriftungen koennen zu einer ruhigen Trennzeile
   werden, statt wie Ueberschriften zu konkurrieren.
   Die Scheibe ersetzt hier bewusst den Ring mit Luecke aus „Fuer Ihre Branche“:
   Zwei benachbarte Sektionen mit zusammen zwoelf gleichen Ringen sahen monoton aus. */
/* Luft vor und unter der Trennzeile „Optional dazu“: Die Beschriftung braucht Abstand
   zum Fließtext der Gruppe darüber, sonst klebt sie daran (Katharina 09.11.2026). */
.services-group + .services-group {
  margin-top: 60px;
}

.services-group__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-blau);
}

.services-group__title::before,
.services-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 110, 183, 0.25);
}

.services {
  display: grid;
  gap: 36px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  text-align: center;
}

.service__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
}

.service__glyph {
  width: 28px;
  height: 28px;
}

.services-group--inklusive .service__icon {
  background: var(--c-blau);
  color: var(--c-weiss);
}

/* Umriss statt Flaeche – 2px, damit die Linie auf der hellen Toenung traegt */
.services-group--optional .service__icon {
  box-shadow: inset 0 0 0 2px var(--c-blau);
  color: var(--c-blau);
}

.service__title {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-blau);
}

.service p {
  max-width: 330px;
  margin: 10px auto 0;
  line-height: 1.45;
}

/* Bundle-Kachel „Rundum-sorglos-Paket“ – der Abschluss der Cyan-Sektion.
   Früher eine weiße Platte mit schwarzem 1px-Rahmen: Das war ein harter Bruch zu den
   sechs Leistungskarten direkt darüber (--c-blau mit feinem weißem Rahmen) und zum Cyan.
   Jetzt dieselbe Kartensprache wie die Leistungen, nur größer – die Kachel liest sich als
   Zusammenfassung derselben Reihe statt als Fremdkörper (Katharina 09.11.2026).
   Rechts steht das Router-Foto (weißes Gerät, transparenter Hintergrund), das genau auf
   dem Blau wirkt und auf Weiß verschwunden wäre. Kontrast Weiß auf --c-blau 5,4:1. */
/* Breite 1000px (Wunsch Katharina 10.11.2026). Hergeleitet, nicht geschaetzt:
   Der Knopf „Jetzt Angebot anfordern“ soll auf dem Desktop einzeilig stehen.
   Ausgemessen an der echten Schriftdatei (Montserrat 900, 13px aus .btn--lg,
   0.5px Laufweite, Versalien): 220px Text + 2x34px Polsterung = 289px. Mit den
   2x40px Polsterung von .bundle__aside braucht die rechte Spalte mindestens
   369px, sie steht deshalb fest auf 380px (Media-Query ab 1025px).
   Die Gesamtbreite folgt aus der linken Spalte: Deren Textbreite bleibt bei
   538px, damit nichts zusaetzlich umbricht und die Kachel ihre Hoehe von 411px
   behaelt. 538 + 2x40 + 380 + 2 Rahmen = 1000px.
   Vorher 920px (Breite von .entry): Da hatte die rechte Spalte nur 227px, der
   Knopf brach um. Schmaler geht es nicht – bei 920px mit fester rechter Spalte
   blieben der linken nur 458px, der Text braeuchte mehr Zeilen und die Kachel
   waere 465 statt 411px hoch. Die Kachel ist damit 80px breiter als .entry und
   fluchtet nicht mehr mit den beiden Einstiegs-Kaesten. */
/* Abstand nach oben (Wunsch Katharina 10.11.2026): 40px lagen zu dicht an der
   Leistungs-Liste darueber, deren Zeilenabstand allein schon 36px betraegt (ab
   1025px 44px) – die Kachel wirkte wie deren letzte Zeile. 72px setzen sie
   sichtbar ab, ohne eine eigene Sektion daraus zu machen. */
.bundle {
  display: grid;
  max-width: 1000px;
  margin-top: 72px;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: var(--c-blau);
  color: var(--c-weiss);
}

.bundle__main {
  padding: 28px 22px;
}

/* LAN1-Rot auf der blauen Kachel (Wunsch Katharina 09.11.2026). Rote Schrift direkt
   auf --c-blau wären 1,12:1 und damit unlesbar – die Luminanz beider Farben ist fast
   gleich. Deshalb rote Versalien auf einem weißen Schildchen: 6,0:1, und das Rot bleibt
   die Signalfarbe, die es im Hero-Störer schon ist. */
/* Schriftbild der Foto-Karten uebernommen (Wunsch Katharina 09.11.2026): oben die grosse
   Versalzeile wie .photo-block__eyebrow, darunter der Titel in leichter Schrift und
   gemischter Schreibweise wie .photo-block__title. Die Schrift bleibt weiss, deshalb
   entfaellt das weisse Chip mit roter Schrift – Weiss auf Weiss waere unlesbar.
   Weiss auf --c-blau ergibt 5,4:1. */
.bundle__eyebrow {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-weiss);
}

.bundle__title {
  margin-top: 20px;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--c-weiss);
}

.bundle__lead {
  max-width: 34em;
  margin-top: 12px;
  line-height: 1.7; /* wie .photo-block__card p */
}

.bundle__list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.bundle__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7; /* wie .photo-block__card p */
}

.bundle__list .icon {
  width: 22px;
  height: 22px;
  margin-top: -1px;
  color: var(--c-weiss);
}

/* Rechte Spalte: Router-Foto und darunter die Hauptaktion. Ohne Trennlinie und ohne
   eigene Fläche – die Kachel ist eine durchgehende blaue Fläche (Katharina 09.11.2026).
   Die Zeile „Preis im Angebot“ ist entfallen, der Button sagt es. */
.bundle__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 22px 28px;
}

/* Freigestelltes weißes Gerät, deshalb ohne Rahmen und ohne Fläche direkt auf dem Blau. */
.bundle__media {
  display: block;
  width: 100%;
  max-width: 280px;
}

.bundle__media img {
  width: 100%;
}

.bundle__aside .btn {
  margin-top: 24px;
}

@media (min-width: 768px) {
  /* Direkt auf drei Spalten: zwei Spalten wuerden in jeder Dreier-Gruppe
     eine halbleere zweite Zeile erzeugen. */
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
  }

  .services-group + .services-group {
    margin-top: 72px;
  }

  .bundle__main {
    padding: 36px 40px;
  }

  .bundle__aside {
    padding: 28px 40px 36px;
  }
}

@media (min-width: 1025px) {
  .section--grau {
    margin-top: 120px;
  }

  .services {
    gap: 44px 32px;
  }

  /* Leistungen und Preis nebeneinander erst ab Desktop – darunter bleibt der Button einzeilig.
     Die rechte Spalte steht fest auf 380px statt auf einem Anteil: Sie muss den Knopf
     „Jetzt Angebot anfordern“ einzeilig tragen (289px plus 2x40px Polsterung, Rechnung
     bei .bundle). Als Bruchteil haengt ihre Breite an der Gesamtbreite und faellt bei
     jeder Aenderung wieder darunter. Die linke Spalte nimmt den Rest. */
  .bundle {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .bundle__aside {
    padding: 36px 40px;
  }

  /* 300px = die 380px der Spalte minus deren Polsterung, also die volle verfuegbare
     Breite. Vorher 320px, wovon bei der schmaleren Spalte nur 227px ankamen – das
     Geraet wirkte zu klein. Bei 300px ist die rechte Spalte 396px hoch und bleibt
     damit unter den 411px der linken, die Kachelhoehe aendert sich also nicht. */
  .bundle__media {
    max-width: 300px;
  }
}

/* ==========================================================================
   Für Ihre Branche – Icon im blauen Ring mit Lücke, 3 × 2
   ========================================================================== */
.audiences {
  display: grid;
  gap: 36px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience {
  text-align: center;
}

.ring-icon {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  color: var(--c-blau);
}

.ring-icon__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}

.ring-icon__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

/* Alle sechs Titel sind gleich aufgebaut (Vorgabe Katharina 09.11.2026):
   Zeile 1 „Branche &“, Zeile 2 „Branche“. Dafuer steht hinter jedem „&“ ein <br>.
   Vor dem „&“ steht ein geschuetztes Leerzeichen: Reicht die Spalte fuer Zeile 1 nicht
   (bei 640 bis 767px die schmalste Zweispalten-Ansicht), bricht sie sonst vor dem „&“ um
   und das Zeichen steht allein auf einer Zeile. Mit &nbsp; bleibt es am ersten Begriff.
   Die Umbrueche gelten erst ab 640px, sobald das Raster mehrspaltig ist. In der
   einspaltigen Handy-Ansicht ist die Spalte breit genug fuer eine Zeile – dort waere der
   Umbruch die Unruhe, die er in den Spalten behebt.
   Nach jedem <br> steht ein Leerzeichen im Quelltext, damit der Titel auch ohne Umbruch
   getrennt bleibt – wichtig fuer Vorlesen und fuer Textauszug durch KI-Crawler. */
.audience__title br {
  display: none;
}

.audience__title {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Farbgebung wie auf lan1.de/wlan im Abschnitt „Auf einen Blick“ (Vorgabe Katharina
   09.11.2026). Gemessen am gerenderten Original, nicht aus dem CSS geschlossen: H2 #006eb7,
   die sechs Titel #006eb7, Icon-Umriss #086eb6, Fliesstext #28343c. #006eb7 ist exakt
   unser --c-blau, #086eb6 praktisch derselbe Ton – deshalb alles in --c-blau (5,4:1 auf
   Weiss) und der Fliesstext in --c-text (13,5:1).
   Zwei verworfene Zwischenstaende: Hellblau in allen drei Elementen (nur 2,25:1) und
   dunkle Ueberschriften. Letzteres beruhte auf einem Fehlschluss von mir – im Elementor-CSS
   der Vorlage steht fuer die Ueberschriften keine Farbe, blau kommt dort aus einer anderen
   Datei. Wer die Farben erneut pruefen will: Abschnitt lokal mit den Original-Stylesheets
   rendern und die Pixel messen, das Elementor-CSS allein reicht nicht. */
#zielgruppen .section-title,
.audience__title {
  color: var(--c-blau);
}

.audience p {
  max-width: 330px;
  margin: 10px auto 0;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience__title br {
    display: inline;
  }
}

@media (min-width: 1025px) {
  .audiences {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
  }
}

/* ==========================================================================
   Formular – blaue Sektion (#006eb7) mit weißem Ring-Wasserzeichen
   ========================================================================== */
.section--blue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-blau);
  color: var(--c-weiss);
}

.section--blue::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110px;
  left: 50%;
  width: 512px;
  height: 540px;
  transform: translateX(-50%);
  background: url("../img/ring-weiss.png") center / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.section--blue .section-title,
.section--blue .section-sub {
  color: var(--c-weiss);
}

.form-card {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding: 28px 18px 26px;
  background: var(--c-weiss);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
}

/* Eingeklappte Formular-Panels unter den Einstiegskarten (JS öffnet eins, das andere schließt sich) */
.form-card--panel {
  margin-top: 24px;
}

.form-card__title {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-schwarz);
}

/* Fokus wird per JS gesetzt (Orientierung für Screenreader), kein sichtbarer Rahmen nötig */
.form-card__title:focus {
  outline: none;
}

.form-card__intro {
  margin-bottom: 24px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-text-leise);
}

/* Ohne JavaScript bleiben die Panels zu – Hinweis mit Telefon/E-Mail direkt unter den Karten */
.form-noscript {
  max-width: 920px;
  margin: 24px auto 0;
  padding: 16px;
  border-left: 4px solid var(--c-cyan);
  background: var(--c-hell);
  color: var(--c-text);
}

/* ---------- Zwei Einstiege: gleich hohe weiße Karten, Buttons auf einer Linie ---------- */
.entry {
  display: grid;
  gap: 24px;
  max-width: 920px;
  margin-inline: auto;
}

.entry__option {
  display: flex;
  flex-direction: column;
  padding: 28px 18px 26px;
  background: var(--c-weiss);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}

.entry__option.is-active {
  box-shadow: var(--shadow-card), inset 0 0 0 3px var(--c-cyan);
}

.entry__title {
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-schwarz);
}

.entry__text {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* margin-top: auto schiebt den Button an den unteren Kartenrand -> beide Buttons auf gleicher Höhe */
.entry__action {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

/* Innenabstand etwas kleiner als .btn--lg, damit beide Texte in 280px passen -> beide Buttons gleich breit */
.entry__btn {
  width: 100%;
  padding-inline: 24px;
}

.entry__btn[aria-expanded="true"] {
  background: var(--c-cyan);
  color: var(--c-weiss);
}

.form-group {
  min-width: 0;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}

.form-group__legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-blau);
}

.form-grid {
  display: grid;
  gap: 16px 20px;
}

.field {
  min-width: 0;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.req {
  color: var(--c-blau);
  font-weight: 700;
}

.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--c-rahmen);
  border-radius: var(--radius);
  background-color: var(--c-weiss);
  color: var(--c-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder {
  color: #6b7a81;
  opacity: 1;
}

.input:hover {
  border-color: var(--c-text);
}

.input:focus {
  outline: 2px solid var(--c-blau);
  outline-offset: 1px;
  border-color: var(--c-blau);
}

select.input {
  padding-right: 42px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328343c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

.input[aria-invalid="true"] {
  border-color: var(--c-blau);
  box-shadow: inset 4px 0 0 var(--c-blau);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}

.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-blau);
  color: var(--c-weiss);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}

.field__error:empty {
  display: none;
}

.choices {
  display: grid;
  gap: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--c-rahmen);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover {
  border-color: var(--c-text);
}

/* Komplettpaket (Bundle) über die volle Breite unter den übrigen Themen */
.choice--wide {
  grid-column: 1 / -1;
}

.choice:has(input:checked) {
  border-color: var(--c-blau);
  background: rgba(4, 187, 238, 0.1);
}

/* Komplettpaket und Einzelthemen schließen sich aus (Katharina 11.11.2026).
   Das jeweils gesperrte Kästchen ist wirklich disabled, nicht nur grau: so ist es
   auch per Tastatur nicht erreichbar und wird als "deaktiviert" vorgelesen. */
.choice:has(input:disabled) {
  background: var(--c-hell);
  border-color: var(--c-linie);
  color: var(--c-text-leise);
  cursor: not-allowed;
}

.choice:has(input:disabled):hover {
  border-color: var(--c-linie);
}

.choice:has(input:disabled) input {
  cursor: not-allowed;
}

/* 24 × 24: Mindestgröße für Touch-Ziele (WCAG 2.5.8) */
.choice input,
.consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--c-blau);
  cursor: pointer;
}

.form-group--choices.is-invalid .choice {
  border-color: var(--c-blau);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.consent input {
  margin-top: -1px;
}

.consent label {
  cursor: pointer;
}

.field__error--consent {
  margin-left: 36px;
}

/* Honeypot – visuell versteckt, nicht per display:none (manche Bots prüfen das) */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-wrap {
  min-height: 65px;
  margin-top: 24px;
}

.form-feedback {
  margin-top: 20px;
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-left: 4px solid var(--c-blau);
  border-radius: var(--radius);
  background: var(--c-hell);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-error .icon {
  margin-top: 1px;
  color: var(--c-blau);
}

.form-error a {
  font-weight: 700;
  white-space: nowrap;
}

.form-submit {
  margin-top: 24px;
}

.form-submit .btn {
  width: 100%;
  padding-inline: 16px;
}

.form-hint {
  margin-top: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-leise);
}

.form-success {
  padding: 24px 0 8px;
  text-align: center;
}

.form-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: var(--c-blau);
}

.form-success__title {
  margin-bottom: 12px;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
}

.form-success__title:focus {
  outline: none;
}

.form-success p {
  max-width: 34em;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* Direktkontakt unter der Formular-Karte */
.direct-contact {
  max-width: 920px;
  margin: 32px auto 0;
  text-align: center;
  line-height: 1.8;
  color: var(--c-weiss);
}

.direct-contact__lead {
  display: block;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.direct-contact a {
  display: inline-block;
  padding-block: 4px;
  color: var(--c-weiss);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.direct-contact a:hover {
  color: var(--c-weiss);
  text-decoration-thickness: 2px;
}

.direct-contact__item {
  display: block;
}

.direct-contact__sep {
  display: none;
  margin-inline: 6px;
}

@media (min-width: 768px) {
  .direct-contact__item {
    display: inline;
    white-space: nowrap;
  }

  .direct-contact__sep {
    display: inline;
  }
}

@media (min-width: 640px) {
  .form-card,
  .entry__option {
    padding: 48px;
  }

  .form-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .field {
    grid-column: span 6;
  }

  .field--half {
    grid-column: span 3;
  }

  .field--zip {
    grid-column: span 2;
  }

  .field--city {
    grid-column: span 4;
  }

  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-submit .btn {
    width: auto;
    padding-inline: 34px;
  }
}

@media (min-width: 900px) {
  .choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Einstiegskarten ab Tablet nebeneinander; Grid-Stretch macht beide gleich hoch */
@media (min-width: 768px) {
  .entry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .entry__btn {
    width: auto;
    min-width: min(280px, 100%);
  }
}

/* Schmales Tablet: weniger Karten-Padding, damit die Buttons einzeilig und gleich breit bleiben */
@media (min-width: 768px) and (max-width: 899px) {
  .entry__option {
    padding: 36px 28px;
  }
}

/* ==========================================================================
   FAQ – H2 Cyan zentriert, Trennlinien, Chevron
   ========================================================================== */
#faq .section-title {
  color: var(--c-cyan);
}

.faq {
  max-width: 880px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--c-linie);
}

.faq__item:first-child {
  border-top: 1px solid var(--c-linie);
}

.faq__q {
  position: relative;
  display: block;
  padding: 20px 48px 20px 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-text);
  list-style: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::marker {
  content: "";
}

/* Chevron rechts */
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--c-text);
  border-bottom: 2.5px solid var(--c-text);
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin-top 0.2s ease;
}

.faq__item[open] > .faq__q::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.faq__q:hover {
  color: var(--c-blau);
}

.faq__a {
  padding: 0 48px 22px 0;
  line-height: 1.7;
  color: var(--c-text-leise);
}

.faq-more {
  margin-top: 28px;
  text-align: center;
  font-size: 0.9375rem;
}

@media (min-width: 1025px) {
  .faq__q {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   Footer (Klon lan1.de) – #28343c, Überschriften Cyan 16px/900
   ========================================================================== */
.site-footer {
  padding-top: 40px;
  background: var(--c-text);
  color: var(--c-weiss);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  padding-bottom: 28px;
}

.site-footer__col > p + p {
  margin-top: 20px;
}

.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.site-footer__logo {
  width: 120px;
}

.site-footer__heading {
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.site-footer__col > p + .site-footer__heading {
  margin-top: 32px;
}

.site-footer a {
  color: var(--c-weiss);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-cyan);
  text-decoration: underline;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.site-footer__linkedin {
  width: 40px;
  height: 40px;
  color: var(--c-weiss);
}

.site-footer__social a:hover .site-footer__linkedin {
  color: var(--c-cyan);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  font-size: 0.8rem; /* 12,8px */
}

.site-footer__legal li + li::before {
  content: "|";
  margin-inline: 2px;
  color: var(--c-cyan);
}

.site-footer__legal a {
  display: inline-block;
  padding: 10px 4px;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.site-footer__legal li:first-child a {
  padding-left: 0;
}

.site-footer__legal a:hover {
  color: var(--c-weiss);
}

.site-footer__copy {
  padding-block: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 639px) {
  /* wie Live-Site: zweite „Standorte“-Überschrift mobil ausblenden */
  .site-footer__heading--repeat {
    display: none;
  }

  .site-footer__col:has(.site-footer__heading--repeat) {
    margin-top: -12px;
  }
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  /* zweite Überschrift wie Live unsichtbar, hält aber die Zeilen bündig */
  .site-footer__heading--repeat {
    visibility: hidden;
  }

  .site-footer__col--brand {
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  .site-footer {
    padding-top: 26px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .site-footer__col--brand {
    align-items: flex-end;
    justify-content: center;
    padding-right: 34px;
  }
}

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