/* ======================================================================
   Design-System senioren-telefonanschluss.com
   Stand 01.11.2026, gebaut für Divi 5.18.1

   Aufbau
   1. Tokens: alle Werte an einer Stelle. Sie zeigen auf Divi-Variablen, damit
      Änderungen im Variable Manager hier ankommen. Der zweite Wert ist der
      Rückfall, falls Divi die Variable auf einer Seite nicht ausgibt.
   2. Grundlage: Schrift, Abstände, Überschriften innerhalb von .sta
   3. Bausteine: alle mit Präfix .sta-

   Verwendung: Inhalt im Divi-Code-Modul in <div class="sta"> … </div> setzen.
   Muster aller Bausteine: Seite /design-system/ (nur lokale Kopie).
   ====================================================================== */

:root {
  /* Marke */
  --sta-blau: var(--gcid-primary-color, #0084C3);
  --sta-navy: var(--gcid-wy0qp7f8ne, #141D45);
  --sta-orange: var(--gcid-secondary-color, #DE8B00);

  /* Lesbare Varianten: erfüllen WCAG AA auf Weiß und auf --sta-flaeche.
     Orange Text auf Blau hell hat 4,25:1 und ist nur für große Schrift gedacht (Hero-Preis). */
  --sta-blau-text: var(--gcid-sta-blau-text, #0072A8);
  --sta-orange-text: var(--gcid-sta-orange-text, #A86200);

  /* Flächen */
  --sta-flaeche: var(--gcid-sta-flaeche, #F7F9FC);
  --sta-blau-hell: var(--gcid-sta-blau-hell, #E8F4FB);
  --sta-orange-hell: var(--gcid-sta-orange-hell, #FFF6E5);
  --sta-gruen-hell: var(--gcid-sta-gruen-hell, #E7F4EC);
  --sta-weiss: #FFFFFF;

  /* Text und Linien */
  --sta-text: var(--gcid-body-color, #333333);
  --sta-text-leise: var(--gcid-sta-text-leise, #4E5A6B);
  --sta-gruen: var(--gcid-sta-gruen, #17693F);
  --sta-rand: var(--gcid-sta-rand, #D9E1EA);
  --sta-rand-stark: var(--gcid-sta-rand-stark, #7C8AA0);

  /* Schrift */
  --sta-schrift: 'Nunito', Arial, sans-serif;
  --sta-text-fein: 0.9375rem; /* nur Kleingedrucktes: Pflichtzeile im Footer */
  --sta-fuss-leise: #6FBDE8; /* aufgehelltes Banner-Blau, 7,8:1 auf Navy. Das Banner-Blau selbst hat nur 3,9:1. */
  --sta-text-klein: var(--gvid-sta-schrift-klein, 1.0625rem);
  --sta-text-basis: var(--gvid-sta-schrift-basis, clamp(1.1875rem, 1.15rem + 0.15vw, 1.25rem));
  --sta-text-gross: var(--gvid-sta-schrift-gross, clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem));
  --sta-h3: var(--gvid-sta-schrift-h3, clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem));
  --sta-h2: var(--gvid-sta-schrift-h2, clamp(1.625rem, 1.4rem + 1.05vw, 2.25rem));
  --sta-h1: var(--gvid-sta-schrift-h1, clamp(1.875rem, 1.5rem + 1.9vw, 3rem));

  /* Abstände */
  --sta-abstand-xs: var(--gvid-sta-abstand-xs, 0.5rem);
  --sta-abstand-s: var(--gvid-sta-abstand-s, 0.75rem);
  --sta-abstand-m: var(--gvid-sta-abstand-m, 1rem);
  --sta-abstand-l: var(--gvid-sta-abstand-l, 1.5rem);
  --sta-abstand-xl: var(--gvid-sta-abstand-xl, 2rem);
  --sta-abstand-xxl: var(--gvid-sta-abstand-xxl, 3rem);
  --sta-abstand-sektion: var(--gvid-sta-abstand-sektion, clamp(2.75rem, 1.9rem + 3.6vw, 5rem));

  /* Form */
  --sta-radius-s: var(--gvid-sta-radius-s, 8px);
  --sta-radius-m: var(--gvid-sta-radius-m, 12px);
  --sta-radius-l: var(--gvid-sta-radius-l, 16px);
  --sta-knopf-hoehe: var(--gvid-sta-knopf-hoehe, 3.5rem);
  --sta-breite-inhalt: var(--gvid-sta-breite-inhalt, 72rem);
  --sta-breite-text: var(--gvid-sta-breite-text, 42rem);
  --sta-schatten: 0 1px 2px rgba(20, 29, 69, 0.05), 0 10px 26px rgba(20, 29, 69, 0.07);
  --sta-schatten-hoch: 0 2px 4px rgba(20, 29, 69, 0.07), 0 16px 34px rgba(20, 29, 69, 0.12);
}

/* ---------- Grundlage ---------- */
.sta,
.sta-leiste {
  font-family: var(--sta-schrift);
  color: var(--sta-text);
}
.sta {
  font-size: var(--sta-text-basis);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.sta *,
.sta *::before,
.sta *::after { box-sizing: border-box; }

.sta h1, .sta h2, .sta h3, .sta h4 {
  margin: 0 0 var(--sta-abstand-m);
  padding: 0;
  color: var(--sta-navy);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.sta h1 { font-size: var(--sta-h1); line-height: 1.16; }
.sta h2 { font-size: var(--sta-h2); }
.sta h3 { font-size: var(--sta-h3); }
.sta h4 { font-size: var(--sta-text-gross); }
.sta p { margin: 0 0 var(--sta-abstand-m); padding: 0; }
.sta p:last-child { margin-bottom: 0; padding-bottom: 0; }
.sta a { color: var(--sta-blau-text); font-weight: 700; text-underline-offset: 0.16em; }
.sta a:hover { color: var(--sta-navy); }
.sta img { max-width: 100%; height: auto; }
.sta strong { font-weight: 800; }

.sta a:focus-visible,
.sta button:focus-visible,
.sta summary:focus-visible,
.sta-leiste a:focus-visible {
  outline: 3px solid var(--sta-navy);
  outline-offset: 3px;
  border-radius: var(--sta-radius-s);
}

/* ---------- Layout ---------- */
.sta-sektion { padding: var(--sta-abstand-sektion) var(--sta-abstand-m); background: var(--sta-weiss); }
.sta-sektion--flaeche { background: var(--sta-flaeche); }
.sta-sektion--navy { background: var(--sta-navy); color: var(--sta-weiss); }
.sta .sta-sektion--navy h2,
.sta .sta-sektion--navy h3 { color: var(--sta-weiss); }
.sta-inhalt { width: 100%; max-width: var(--sta-breite-inhalt); margin: 0 auto; }
.sta-inhalt--text { max-width: var(--sta-breite-text); }
.sta-kopf { max-width: var(--sta-breite-text); margin: 0 auto var(--sta-abstand-xl); text-align: center; }
.sta-kopf p { color: var(--sta-text-leise); font-size: var(--sta-text-gross); }
.sta-raster { display: grid; gap: var(--sta-abstand-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ---------- Knöpfe ---------- */
.sta a.sta-btn,
.sta button.sta-btn,
.sta-leiste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--sta-knopf-hoehe);
  padding: 0.7rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--sta-radius-m);
  font-family: var(--sta-schrift);
  font-size: var(--sta-text-gross);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sta a.sta-btn svg,
.sta-leiste a svg { flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; fill: currentColor; }
/* Hauptknopf wie auf der Live-Seite: weiße Schrift, weißer Rand, feiner oranger Außenring.
   Entscheidung Silvio 01.11.2026, obwohl Weiß auf Orange unter WCAG AA liegt (2,7:1). */
.sta a.sta-btn--primaer,
.sta button.sta-btn--primaer,
.sta-leiste a.sta-leiste__bestellen {
  background: var(--sta-orange);
  border-color: var(--sta-weiss);
  color: var(--sta-weiss);
  box-shadow: 0 4px 14px rgba(222, 139, 0, 0.4), 0 0 0 1px var(--sta-orange);
}
.sta a.sta-btn--primaer:hover,
.sta button.sta-btn--primaer:hover {
  background: var(--sta-navy);
  border-color: var(--sta-weiss);
  color: var(--sta-weiss);
  box-shadow: 0 8px 20px rgba(20, 29, 69, 0.3), 0 0 0 1px var(--sta-navy);
  transform: translateY(-2px);
}
.sta a.sta-btn--telefon,
.sta-leiste a.sta-leiste__anrufen {
  background: var(--sta-weiss);
  border-color: var(--sta-blau-text);
  color: var(--sta-blau-text);
}
.sta a.sta-btn--telefon:hover {
  background: var(--sta-blau-text);
  border-color: var(--sta-blau-text);
  color: var(--sta-weiss);
}
.sta .sta-sektion--navy a.sta-btn--telefon { border-color: var(--sta-weiss); background: transparent; color: var(--sta-weiss); }
.sta .sta-sektion--navy a.sta-btn--telefon:hover { background: var(--sta-weiss); color: var(--sta-navy); }
.sta-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sta-abstand-s); }
.sta-knoepfe--mitte { justify-content: center; }

/* ---------- Häkchen-Liste ---------- */
.sta ul.sta-liste { margin: 0 0 var(--sta-abstand-m); padding: 0; list-style: none; }
.sta ul.sta-liste li { position: relative; margin: 0 0 var(--sta-abstand-s); padding: 0 0 0 2.1rem; }
.sta ul.sta-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--sta-orange-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A86200' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* ---------- Hero ---------- */
.sta-hero { background: linear-gradient(180deg, var(--sta-blau-hell) 0%, var(--sta-flaeche) 100%); padding: clamp(2rem, 1.2rem + 3.4vw, 4rem) var(--sta-abstand-m); }
.sta-hero__raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sta-abstand-xxl); align-items: center; max-width: var(--sta-breite-inhalt); margin: 0 auto; }
.sta .sta-hero__dachzeile { color: var(--sta-blau-text); font-size: var(--sta-text-klein); font-weight: 800; margin-bottom: var(--sta-abstand-xs); }
.sta .sta-hero__satz { font-size: var(--sta-text-gross); margin-bottom: var(--sta-abstand-l); }
.sta .sta-hero__hinweis { color: var(--sta-text-leise); font-size: var(--sta-text-klein); margin-top: var(--sta-abstand-m); }
.sta-preis { color: var(--sta-orange-text); white-space: nowrap; }
.sta-hero__bild { position: relative; }
.sta-hero__bild img { display: block; width: 100%; }
.sta a.sta-preisschild,
.sta div.sta-preisschild {
  position: absolute;
  right: 0;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--sta-weiss);
  border-radius: var(--sta-radius-m);
  background: var(--sta-orange);
  color: var(--sta-weiss);
  font-size: var(--sta-h3);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  transform: rotate(-2deg);
  box-shadow: var(--sta-schatten-hoch);
}
.sta-preisschild span { font-size: var(--sta-text-klein); font-weight: 800; }

/* ---------- Vertrauenszeile ---------- */
.sta-vertrauen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sta-abstand-s) var(--sta-abstand-xl); max-width: var(--sta-breite-inhalt); margin: 0 auto; padding: var(--sta-abstand-l) var(--sta-abstand-m); color: var(--sta-navy); font-size: var(--sta-text-klein); font-weight: 800; }
.sta-vertrauen span { display: inline-flex; align-items: center; gap: 0.5rem; }
.sta-vertrauen span::before { content: '✓'; color: var(--sta-orange-text); font-weight: 900; }

/* ---------- Karte ---------- */
.sta-karte { padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }

/* ---------- Tarifkarten ---------- */
.sta-tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-l); align-items: stretch; }
.sta-tarif { position: relative; display: flex; flex-direction: column; padding: var(--sta-abstand-xl) var(--sta-abstand-l) var(--sta-abstand-l); border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-tarif--hervor { border-color: var(--sta-blau); box-shadow: var(--sta-schatten-hoch); }
.sta-tarif__marke { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0.2rem 0.95rem; border-radius: 999px; background: var(--sta-navy); color: var(--sta-weiss); font-size: var(--sta-text-klein); font-weight: 800; white-space: nowrap; }
.sta .sta-tarif__name { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-h3); }
.sta .sta-tarif__preis { margin-bottom: var(--sta-abstand-m); color: var(--sta-navy); font-size: var(--sta-h2); font-weight: 900; line-height: 1.1; }
.sta-tarif__preis span { color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }
.sta .sta-tarif ul.sta-liste { flex: 1 1 auto; margin-bottom: var(--sta-abstand-l); }
.sta .sta-tarif a.sta-btn { width: 100%; }

/* ---------- Schritte ---------- */
.sta ol.sta-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-xl); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.sta ol.sta-schritte li { counter-increment: schritt; margin: 0; padding: 0; list-style: none; }
.sta-schritte li::before { content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--sta-abstand-s); border-radius: 50%; background: var(--sta-navy); color: var(--sta-weiss); font-size: var(--sta-h3); font-weight: 900; }
.sta .sta-schritte h3 { margin-bottom: var(--sta-abstand-xs); }

/* ---------- Bewertungen: wörtlich, ohne Datum, ohne Herkunft ---------- */
.sta-bewertungen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-m); }
.sta-bewertung { display: flex; flex-direction: column; margin: 0; padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-bewertung__sterne { margin-bottom: var(--sta-abstand-xs); color: var(--sta-orange-text); font-size: 1.3rem; letter-spacing: 0.08em; line-height: 1; }
.sta-bewertung__titel { margin-bottom: var(--sta-abstand-xs); color: var(--sta-navy); font-weight: 800; line-height: 1.3; }
.sta .sta-bewertung__text { flex: 1 1 auto; margin-bottom: var(--sta-abstand-s); font-size: var(--sta-text-klein); }
.sta-bewertung__name { margin-top: auto; color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 800; }

/* ---------- FAQ: funktioniert ohne JavaScript ---------- */
.sta-faq { max-width: var(--sta-breite-text); margin: 0 auto; }
.sta-faq details { margin-bottom: var(--sta-abstand-s); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-m); background: var(--sta-weiss); }
.sta-faq details[open] { border-color: var(--sta-blau); }
.sta-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sta-abstand-m); min-height: var(--sta-knopf-hoehe); padding: 0.8rem var(--sta-abstand-l); color: var(--sta-navy); font-weight: 800; line-height: 1.3; cursor: pointer; list-style: none; }
.sta-faq summary::-webkit-details-marker { display: none; }
.sta-faq summary::after { content: '+'; flex: 0 0 auto; color: var(--sta-blau-text); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.sta-faq details[open] summary::after { content: '–'; }
.sta-faq__antwort { padding: 0 var(--sta-abstand-l) var(--sta-abstand-l); }

/* ---------- Hotline ---------- */
.sta-hotline { display: flex; align-items: center; gap: var(--sta-abstand-l); padding: var(--sta-abstand-l); border-radius: var(--sta-radius-l); background: var(--sta-blau-hell); }
.sta-hotline__symbol { display: flex; flex: 0 0 3.5rem; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--sta-blau-text); color: var(--sta-weiss); }
.sta-hotline__symbol svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.sta .sta-hotline__titel { margin-bottom: 0.15rem; color: var(--sta-navy); font-size: var(--sta-text-gross); font-weight: 800; }
.sta .sta-hotline__nummer { color: var(--sta-navy); font-size: var(--sta-h3); font-weight: 900; text-decoration: none; white-space: nowrap; }

/* ---------- Infobox und Hinweis ---------- */
.sta-info { padding: var(--sta-abstand-l); border-left: 5px solid var(--sta-blau); border-radius: var(--sta-radius-s); background: var(--sta-blau-hell); }
.sta-info--ersparnis { border-left-color: var(--sta-gruen); background: var(--sta-gruen-hell); }
.sta .sta-info__titel { margin-bottom: var(--sta-abstand-xs); color: var(--sta-navy); font-weight: 800; }
.sta a.sta-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--sta-abstand-m); padding: var(--sta-abstand-m) var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-m); background: var(--sta-weiss); color: var(--sta-navy); text-decoration: none; }
.sta a.sta-hinweis:hover { border-color: var(--sta-blau); box-shadow: var(--sta-schatten); }
.sta-hinweis span { color: var(--sta-blau-text); white-space: nowrap; }

/* ---------- Tabelle ---------- */
.sta-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-m); }
.sta table.sta-tabelle { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: var(--sta-weiss); text-align: left; }
.sta-tabelle th, .sta-tabelle td { padding: 0.85rem var(--sta-abstand-m); border: 0; border-bottom: 1px solid var(--sta-rand); vertical-align: top; }
.sta-tabelle thead th { background: var(--sta-navy); color: var(--sta-weiss); font-weight: 800; }
.sta-tabelle tbody th { color: var(--sta-navy); font-weight: 800; }
.sta-tabelle tbody tr:last-child th, .sta-tabelle tbody tr:last-child td { border-bottom: 0; }

/* ---------- Fußnote ---------- */
.sta .sta-fussnote { color: var(--sta-text-leise); font-size: var(--sta-text-klein); }

/* ---------- Zweispalter ---------- */
.sta-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sta-abstand-xxl); align-items: start; }
.sta .sta-spalten h3:not(:first-child) { margin-top: var(--sta-abstand-xl); }

/* ---------- Siegel ---------- */
.sta-siegelreihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sta-abstand-l); padding: 0 var(--sta-abstand-m) var(--sta-abstand-xl); }
.sta-siegelreihe img { width: auto; height: 7rem; border-radius: var(--sta-radius-s); }
.sta-siegelreihe--frei { padding-top: var(--sta-abstand-xl); }

/* ---------- Einzelne Bewertung im Text ---------- */
.sta-zitat { margin: var(--sta-abstand-l) 0 0; padding: var(--sta-abstand-l); border-left: 5px solid var(--sta-orange); border-radius: var(--sta-radius-s); background: var(--sta-orange-hell); }
.sta-zitat--breit { max-width: var(--sta-breite-text); margin: var(--sta-abstand-xl) auto; }
.sta .sta-zitat blockquote { margin: 0 0 var(--sta-abstand-s); padding: 0; border: 0; font-size: var(--sta-text-klein); font-style: normal; font-weight: 500; }

/* ---------- Tabelle: Zusätze ---------- */
.sta .sta-tabelle { font-size: var(--sta-text-klein); line-height: 1.45; }
.sta .sta-tabelle tbody tr.sta-tabelle__kopf th { background: var(--sta-navy); color: var(--sta-weiss); }
.sta-tabelle__marke { color: var(--sta-blau-text); font-weight: 800; }
.sta-tabelle__notiz { color: var(--sta-text-leise); }
.sta-preis-alt { color: var(--sta-text-leise); text-decoration: line-through; }
.sta-aktion { color: #B3261E; }

/* ---------- Hinweis-Link mit Symbol ---------- */
.sta a.sta-hinweis--symbol { justify-content: flex-start; margin-top: var(--sta-abstand-l); background: var(--sta-blau-hell); border-color: transparent; }
.sta a.sta-hinweis .sta-hinweis__symbol { display: flex; flex: 0 0 3.25rem; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: var(--sta-radius-m); background: var(--sta-blau-text); color: var(--sta-weiss); }
.sta-hinweis__symbol svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sta a.sta-hinweis .sta-hinweis__text { display: flex; flex-direction: column; min-width: 0; color: var(--sta-navy); line-height: 1.35; white-space: normal; }
.sta a.sta-hinweis .sta-hinweis__text span { color: var(--sta-blau-text); font-weight: 800; white-space: normal; }

/* ---------- Gerätekarten ---------- */
.sta-produkte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-m); align-items: stretch; }
.sta-produkt { display: flex; flex-direction: column; padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-produkt__bild { display: flex; align-items: center; justify-content: center; height: 11rem; margin-bottom: var(--sta-abstand-s); }
.sta-produkt__bild img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.sta .sta-produkt__titel { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-gross); }
.sta .sta-produkt__text { flex: 1 1 auto; margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-klein); line-height: 1.45; }
.sta button.sta-textknopf { align-self: flex-start; min-height: 2.75rem; padding: 0.25rem 0; border: 0; background: none; color: var(--sta-blau-text); font-family: var(--sta-schrift); font-size: var(--sta-text-klein); font-weight: 800; text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.sta button.sta-textknopf:hover { color: var(--sta-navy); }
.sta-produkt__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sta-abstand-s); }
.sta a.sta-produkt__mehr { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--sta-text-klein); }
.sta-produkt__fuss { margin-top: var(--sta-abstand-s); padding-top: var(--sta-abstand-s); border-top: 1px solid var(--sta-rand); }
.sta .sta-produkt__preis { margin-bottom: var(--sta-abstand-s); color: var(--sta-navy); font-size: var(--sta-h3); font-weight: 900; line-height: 1.2; }
.sta-produkt__preis span { display: block; color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }
.sta .sta-produkt a.sta-btn { width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; }

/* ---------- Dialog: Geräteinfos ---------- */
.sta-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--sta-radius-l); background: var(--sta-weiss); color: var(--sta-text); box-shadow: var(--sta-schatten-hoch); }
.sta-dialog::backdrop { background: rgba(20, 29, 69, 0.6); }
.sta-dialog__inhalt { position: relative; padding: var(--sta-abstand-xl); }
.sta .sta-dialog h3,
.sta .sta-dialog__titel { padding-right: 3rem; }
.sta .sta-dialog__titel { margin: 0 0 var(--sta-abstand-s); color: var(--sta-navy); font-size: var(--sta-h3); font-weight: 800; line-height: 1.22; letter-spacing: -0.01em; }
.sta .sta-dialog__bild { width: auto; height: auto; }
.sta button.sta-dialog__zu { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--sta-flaeche); color: var(--sta-navy); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.sta button.sta-dialog__zu:hover { background: var(--sta-rand); }
.sta .sta-dialog__bild { float: right; max-height: 9.375rem; margin: 0 0 var(--sta-abstand-m) var(--sta-abstand-m); }
.sta-dialog__inhalt::after { content: ''; display: block; clear: both; }

.sta .sta-fussnote--mitte { max-width: var(--sta-breite-text); margin: 0 auto; text-align: center; }

/* ---------- Seitenkopf für Unterseiten ---------- */
.sta-seitenkopf { padding: var(--sta-abstand-l) var(--sta-abstand-m) var(--sta-abstand-xl); background: linear-gradient(180deg, var(--sta-blau-hell) 0%, var(--sta-flaeche) 100%); }
.sta .sta-seitenkopf h1 { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-h2); line-height: 1.2; }
.sta .sta-seitenkopf p { margin: 0; color: var(--sta-text); font-size: var(--sta-text-gross); }
.sta-brotkrumen { margin-bottom: var(--sta-abstand-s); color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta-brotkrumen span { margin: 0 0.2rem; }

/* ---------- Punkte-Liste ---------- */
.sta ul.sta-punkte { margin: 0 0 var(--sta-abstand-m); padding: 0; list-style: none; }
.sta ul.sta-punkte li { position: relative; margin: 0 0 var(--sta-abstand-xs); padding: 0 0 0 1.5rem; list-style: none; }
.sta ul.sta-punkte li::before { content: ''; position: absolute; left: 0.4rem; top: 0.65em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sta-blau); }
.sta .sta-karte h3 { margin-top: var(--sta-abstand-l); }
.sta .sta-karte--ohne-symbol h3 { margin-top: 0; }
.sta .sta-karte--ohne-symbol p:last-child { margin-bottom: 0; }
.sta-unterstrichen { text-decoration: underline; }

/* ---------- Produktseite: Galerie und Kaufbox ---------- */
.sta-pdp-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sta-abstand-xxl); align-items: start; }
.sta-galerie__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: var(--sta-abstand-xl); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-galerie__bild img { max-height: 100%; object-fit: contain; }
.sta-galerie__vorschau { display: flex; gap: var(--sta-abstand-xs); margin-top: var(--sta-abstand-s); }
.sta button.sta-vorschau { width: 4.75rem; height: 4.75rem; padding: 0.35rem; border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-s); background: var(--sta-weiss); cursor: pointer; }
.sta button.sta-vorschau:hover, .sta button.sta-vorschau.is-active { border-color: var(--sta-blau); }
.sta-vorschau img { width: 100%; height: 100%; object-fit: contain; }
.sta .sta-galerie__vorteile { display: flex; flex-wrap: wrap; gap: var(--sta-abstand-xs) var(--sta-abstand-l); margin: var(--sta-abstand-m) 0 0; color: var(--sta-navy); font-size: var(--sta-text-klein); font-weight: 800; }
.sta .sta-galerie__vorteile li { margin: 0; }
.sta .sta-dachmarke { display: inline-block; margin-bottom: var(--sta-abstand-xs); padding: 0.15rem 0.7rem; border-radius: var(--sta-radius-s); background: var(--sta-blau-hell); color: var(--sta-blau-text); font-size: var(--sta-text-klein); font-weight: 800; }
.sta h2.sta-pdp-titel { margin-bottom: var(--sta-abstand-s); }

.sta-preisbox { margin-top: var(--sta-abstand-m); padding: var(--sta-abstand-l); border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sta-abstand-s); color: var(--sta-navy); font-weight: 800; }
.sta-preiszeile strong { font-size: var(--sta-h3); font-weight: 900; white-space: nowrap; }
.sta-preiszeile--monat { margin-top: var(--sta-abstand-m); padding-top: var(--sta-abstand-s); border-top: 1px dashed var(--sta-rand-stark); }
.sta-preiszeile--monat strong { color: var(--sta-orange-text); font-size: var(--sta-h2); }
.sta .sta-preisnotiz { margin: 0; color: var(--sta-text-leise); font-size: var(--sta-text-klein); text-align: right; }
.sta .sta-preisbox a.sta-btn { width: 100%; margin-top: var(--sta-abstand-m); }
.sta .sta-preisbox__notiz { margin: var(--sta-abstand-xs) 0 0; color: var(--sta-text-leise); font-size: var(--sta-text-klein); line-height: 1.4; text-align: center; }

.sta-tarifwahl { margin: var(--sta-abstand-m) 0 0; padding: 0; border: 0; }
.sta-tarifwahl legend { margin-bottom: var(--sta-abstand-xs); padding: 0; color: var(--sta-navy); font-weight: 800; }
.sta-tarifwahl legend small { color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }
.sta-tarifoption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "wahl name preis" "wahl text preis"; column-gap: var(--sta-abstand-s); align-items: center; margin-bottom: var(--sta-abstand-xs); padding: 0.6rem 0.85rem; border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-m); line-height: 1.3; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; }
.sta-tarifoption:hover { border-color: var(--sta-rand-stark); }
.sta-tarifoption.is-active { border-color: var(--sta-blau); background: var(--sta-blau-hell); }
.sta .sta-tarifoption input { grid-area: wahl; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--sta-blau-text); }
.sta-tarifoption input:focus-visible { outline: 3px solid var(--sta-navy); outline-offset: 2px; }
.sta-tarifoption__name { grid-area: name; color: var(--sta-navy); font-weight: 800; }
.sta-tarifoption__name em { margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: var(--sta-radius-s); background: var(--sta-navy); color: var(--sta-weiss); font-size: var(--sta-text-klein); font-style: normal; font-weight: 800; white-space: nowrap; }
.sta-tarifoption__text { grid-area: text; color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta-tarifoption__preis { grid-area: preis; color: var(--sta-navy); font-weight: 900; white-space: nowrap; }
.sta-tarifoption__preis small { color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }

.sta .sta-hotline--klein { gap: var(--sta-abstand-s); margin-top: var(--sta-abstand-m); padding: var(--sta-abstand-m); font-size: var(--sta-text-klein); line-height: 1.4; }
.sta .sta-hotline--klein .sta-hotline__nummer { font-size: var(--sta-text-gross); }
.sta-hotline--klein span { color: var(--sta-text-leise); }
.sta-kaufbox .sta-zitat { margin-top: var(--sta-abstand-m); }

.sta-bedingungen { max-width: var(--sta-breite-text); margin: var(--sta-abstand-xl) auto 0; }
.sta .sta-pdp-mitte { margin: var(--sta-abstand-m) 0 0; text-align: center; }
.sta .sta-pdp-fussnote { margin-top: var(--sta-abstand-xl); }

/* ---------- Abschluss-Band ---------- */
.sta-abschluss { display: flex; align-items: center; justify-content: space-between; gap: var(--sta-abstand-l); }
.sta .sta-abschluss h2 { margin-bottom: var(--sta-abstand-xs); }
.sta .sta-abschluss p { margin: 0; color: var(--sta-weiss); }
.sta .sta-abschluss a.sta-btn { flex: 0 0 auto; }

/* ---------- Weitere Geräte ---------- */
.sta-querverweise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-m); }
.sta a.sta-querverweis { display: flex; flex-direction: column; align-items: center; padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); color: var(--sta-navy); text-align: center; text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.sta a.sta-querverweis:hover { border-color: var(--sta-blau); box-shadow: var(--sta-schatten-hoch); color: var(--sta-navy); }
.sta-querverweis__bild { display: flex; align-items: center; justify-content: center; height: 8rem; margin-bottom: var(--sta-abstand-s); }
.sta-querverweis__bild img { max-height: 100%; object-fit: contain; }
.sta-querverweis__name { margin-bottom: 0.2rem; font-weight: 800; line-height: 1.3; }
.sta-querverweis__preis { font-size: var(--sta-text-gross); font-weight: 900; }
.sta-querverweis__preis span { color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }

/* ---------- Allgemeine Ergänzungen ---------- */
.sta [hidden] { display: none !important; }
.sta sup { margin-left: 1px; font-size: 0.6em; line-height: 0; vertical-align: super; }
.sta .sta-mitte { text-align: center; }
.sta .sta-mitte p { margin-bottom: var(--sta-abstand-l); }
.sta a.sta-tel-hell { color: var(--sta-weiss); font-weight: 900; }
.sta a.sta-tel-hell:hover { color: #FFD48A; }
.sta a.sta-textlink { display: inline-flex; align-items: center; min-height: var(--sta-knopf-hoehe); padding: 0 0.5rem; color: var(--sta-navy); font-weight: 800; text-decoration-color: var(--sta-blau); text-underline-offset: 0.25em; }
.sta a.sta-btn--rahmen,
.sta button.sta-btn--rahmen { border-color: var(--sta-navy); background: var(--sta-weiss); color: var(--sta-navy); }
.sta a.sta-btn--rahmen:hover,
.sta button.sta-btn--rahmen:hover { background: var(--sta-navy); color: var(--sta-weiss); }
.sta-symbol { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--sta-abstand-s); border-radius: var(--sta-radius-l); background: var(--sta-blau-text); color: var(--sta-weiss); }
.sta-symbol svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sta .sta-info--mitte { max-width: var(--sta-breite-text); margin: var(--sta-abstand-xl) auto 0; }
.sta-ersparnis { padding: 0.75rem; border-radius: var(--sta-radius-m); background: var(--sta-gruen-hell); color: var(--sta-gruen); font-size: var(--sta-text-gross); font-weight: 900; line-height: 1.3; text-align: center; }
.sta-ersparnis small { display: block; font-size: var(--sta-text-klein); font-weight: 700; }

/* ---------- Sparrechner: Seite ---------- */
.sta-hero__raster--gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sta-h1-akzent { color: var(--sta-blau-text); }
.sta-spar-visual { position: relative; }
.sta-spar-visual__bild { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 896; border-radius: var(--sta-radius-l); box-shadow: var(--sta-schatten-hoch); object-fit: cover; }
.sta-rechnung { position: relative; margin: -4rem var(--sta-abstand-l) 0; padding: var(--sta-abstand-m) var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten-hoch); }
.sta .sta-beispiel__marke { margin-bottom: var(--sta-abstand-xs); color: var(--sta-blau-text); font-size: var(--sta-text-klein); font-weight: 800; }
.sta-rechnung__zeile { display: flex; justify-content: space-between; gap: var(--sta-abstand-s); padding: 0.4rem 0; border-bottom: 1px dashed var(--sta-rand-stark); font-size: var(--sta-text-klein); line-height: 1.35; }
.sta-rechnung__zeile span:last-child { white-space: nowrap; }
.sta-rechnung__alt { color: var(--sta-text-leise); font-weight: 800; text-decoration: line-through; }
.sta-rechnung__neu { color: var(--sta-gruen); font-size: var(--sta-text-gross); font-weight: 900; }
.sta-rechnung .sta-ersparnis { margin-top: var(--sta-abstand-s); }
.sta .sta-rechnung__notiz { margin: var(--sta-abstand-xs) 0 0; color: var(--sta-text-leise); font-size: var(--sta-text-klein); line-height: 1.4; }

.sta ul.sta-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-m); max-width: var(--sta-breite-inhalt); margin: 0 auto; padding: var(--sta-abstand-l) var(--sta-abstand-m); list-style: none; text-align: center; }
.sta ul.sta-fakten li { margin: 0; padding: 0; list-style: none; }
.sta-fakten strong { display: block; color: var(--sta-blau-text); font-size: var(--sta-text-gross); font-weight: 900; line-height: 1.3; }
.sta-fakten span { color: var(--sta-text-leise); font-size: var(--sta-text-klein); }

.sta-fallen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-m); }
.sta-falle { padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta .sta-falle h3 { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-gross); }
.sta .sta-falle p { font-size: var(--sta-text-klein); line-height: 1.45; }
.sta-gegenueber { display: flex; align-items: center; gap: var(--sta-abstand-l); max-width: var(--sta-breite-text); margin: var(--sta-abstand-xl) auto 0; padding: var(--sta-abstand-l); border-radius: var(--sta-radius-l); background: var(--sta-navy); color: var(--sta-weiss); }
.sta-gegenueber__preis { flex: 0 0 auto; padding: 0.6rem 0.9rem; border: 2px solid var(--sta-weiss); border-radius: var(--sta-radius-m); background: var(--sta-orange); color: var(--sta-weiss); font-size: var(--sta-h3); font-weight: 900; line-height: 1.1; text-align: center; }
.sta-gegenueber__preis small { display: block; font-size: var(--sta-text-klein); font-weight: 800; }

.sta-skala { max-width: 56rem; margin: 0 auto; }
.sta-skala__balken,
.sta-skala__achse { display: grid; grid-template-columns: minmax(12.5rem, 20fr) 30fr 50fr; }
.sta-skala__balken { overflow: hidden; border-radius: var(--sta-radius-m); box-shadow: var(--sta-schatten); }
.sta-skala__zone { padding: var(--sta-abstand-m) 0.75rem; color: var(--sta-weiss); line-height: 1.35; text-align: center; }
.sta-skala__zone em { display: block; font-size: var(--sta-text-klein); font-style: normal; font-weight: 800; }
.sta-skala__zone strong { display: block; font-size: var(--sta-text-gross); font-weight: 900; }
.sta-skala__zone span { font-size: var(--sta-text-klein); }
.sta-skala__zone--1 { background: var(--sta-blau-text); }
.sta-skala__zone--2 { background: #00557E; }
.sta-skala__zone--3 { background: var(--sta-navy); }
.sta-skala__achse { margin-top: 0.3rem; color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta-skala__achse > span:last-child { display: flex; justify-content: space-between; }
.sta .sta-skala__notiz { margin: var(--sta-abstand-m) 0 0; color: var(--sta-text-leise); font-size: var(--sta-text-klein); text-align: center; }

.sta-beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-m); }
.sta-beispiel { display: flex; flex-direction: column; padding: var(--sta-abstand-l); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta .sta-beispiel h3 { font-size: var(--sta-text-gross); }
.sta-beispiel dl { flex: 1 1 auto; margin: 0 0 var(--sta-abstand-s); font-size: var(--sta-text-klein); line-height: 1.35; }
.sta-beispiel dl div { display: flex; justify-content: space-between; gap: var(--sta-abstand-s); padding: 0.35rem 0; border-bottom: 1px solid var(--sta-rand); }
.sta-beispiel dt { color: var(--sta-text-leise); font-weight: 600; }
.sta-beispiel dd { margin: 0; color: var(--sta-navy); font-weight: 800; text-align: right; }
.sta .sta-beispiel button.sta-btn { width: 100%; margin-top: var(--sta-abstand-s); font-size: var(--sta-text-basis); }

.sta ol.sta-schritte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-l); }
.sta .sta-schritte--vier h3 { font-size: var(--sta-text-gross); }
.sta .sta-schritte--vier p { font-size: var(--sta-text-klein); line-height: 1.45; }

.sta-familie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten-hoch); }
.sta-familie__bild { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
.sta-familie__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--sta-abstand-xl); }

.sta .sta-faq summary h3 { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; }

/* ---------- Sparrechner: Rechner (Markup und Skript aus Sparrechner/sparrechner.html) ---------- */
.sta #sta-rechner { scroll-margin-top: 7rem; color: var(--sta-navy); }
.sta #sta-rechner::before { content: ''; display: block; height: 7rem; margin-top: -7rem; visibility: hidden; pointer-events: none; }
.sta #sr-result { scroll-margin-top: 7rem; }
.sta #sta-rechner .sr-card { padding: var(--sta-abstand-xl); border: 1px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta #sta-rechner .sr-head { margin-bottom: var(--sta-abstand-l); text-align: center; }
.sta #sta-rechner .sr-head h2 { margin-bottom: var(--sta-abstand-xs); }
.sta #sta-rechner .sr-head p { margin: 0; color: var(--sta-text-leise); }
.sta #sta-rechner .sr-step { margin-bottom: var(--sta-abstand-xl); }
.sta #sta-rechner .sr-step-title { display: flex; align-items: baseline; gap: var(--sta-abstand-s); margin-bottom: 0.3rem; font-size: var(--sta-text-gross); font-weight: 800; line-height: 1.3; }
.sta #sta-rechner .sr-num { display: inline-flex; flex: 0 0 2.25rem; align-items: center; justify-content: center; height: 2.25rem; border-radius: 50%; background: var(--sta-navy); color: var(--sta-weiss); font-size: 1.0625rem; font-weight: 900; }
.sta #sta-rechner .sr-hint { margin: 0 0 var(--sta-abstand-s) 3rem; color: var(--sta-text-leise); font-size: var(--sta-text-klein); line-height: 1.45; }
.sta #sta-rechner .sr-money { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sta-abstand-xs); margin-left: 3rem; }
.sta #sta-rechner .sr-money-input { position: relative; }
.sta #sta-rechner .sr-money input { width: 13rem; padding: 0.7rem 2.75rem 0.7rem 1rem; border: 2px solid var(--sta-rand-stark); border-radius: var(--sta-radius-m); color: var(--sta-navy); font-family: var(--sta-schrift); font-size: 1.6rem; font-weight: 800; }
.sta #sta-rechner .sr-money input::placeholder { color: var(--sta-text-leise); font-weight: 600; }
.sta #sta-rechner .sr-money input:focus { outline: 3px solid var(--sta-blau); outline-offset: 1px; border-color: var(--sta-blau); }
.sta #sta-rechner .sr-money-input span { position: absolute; top: 50%; right: 1rem; color: var(--sta-text-leise); font-size: 1.4rem; font-weight: 800; transform: translateY(-50%); }
.sta #sta-rechner .sr-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sta-abstand-xs); margin-left: 3rem; }
.sta #sta-rechner .sr-opt { padding: 0.8rem; border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-m); background: var(--sta-flaeche); color: var(--sta-navy); font-family: var(--sta-schrift); font-size: var(--sta-text-klein); line-height: 1.3; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.sta #sta-rechner .sr-opt strong { display: block; font-size: var(--sta-text-basis); font-weight: 800; }
.sta #sta-rechner .sr-opt small { color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta #sta-rechner .sr-opt:hover { border-color: var(--sta-blau); }
.sta #sta-rechner .sr-opt[aria-pressed="true"] { border-color: var(--sta-blau); background: var(--sta-blau-hell); box-shadow: inset 0 0 0 1px var(--sta-blau); }
.sta #sta-rechner .sr-chip { min-height: 3.25rem; padding: 0.5rem 1rem; font-weight: 800; text-align: center; }
.sta #sta-rechner .sr-fine { margin: var(--sta-abstand-xs) 0 0 3rem; font-size: var(--sta-text-klein); }
.sta #sta-rechner .sr-fine label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sta-abstand-s); }
.sta #sta-rechner .sr-fine input[type="range"] { flex: 1 1 14rem; accent-color: var(--sta-blau-text); }
.sta #sta-rechner .sr-link { min-height: 2.75rem; margin: 0.25rem 0 0 3rem; padding: 0; border: 0; background: none; color: var(--sta-blau-text); font-family: var(--sta-schrift); font-size: var(--sta-text-klein); font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.sta #sta-rechner .sr-opt:focus-visible,
.sta #sta-rechner .sr-link:focus-visible,
.sta #sta-rechner .sr-share-btn:focus-visible { outline: 3px solid var(--sta-navy); outline-offset: 2px; }

.sta #sta-rechner .sr-result { margin-top: var(--sta-abstand-s); padding-top: var(--sta-abstand-l); border-top: 2px dashed var(--sta-rand-stark); }
.sta #sta-rechner .sr-headline { margin-bottom: var(--sta-abstand-l); text-align: center; }
.sta #sta-rechner .sr-big { color: var(--sta-gruen); font-size: var(--sta-h1); font-weight: 900; line-height: 1.15; }
.sta #sta-rechner .sr-big.sr-neutral { color: var(--sta-navy); font-size: var(--sta-h2); }
.sta #sta-rechner .sr-headline p { margin: 0.4rem 0 0; color: var(--sta-text-leise); }
.sta #sta-rechner .sr-tariffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-m); }
.sta #sta-rechner .sr-tariff { position: relative; display: flex; flex-direction: column; padding: var(--sta-abstand-l) var(--sta-abstand-m) var(--sta-abstand-m); border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); }
.sta #sta-rechner .sr-tariff.is-best { border-color: var(--sta-blau); box-shadow: var(--sta-schatten-hoch); }
.sta #sta-rechner .sr-badge { position: absolute; top: 0; left: 50%; padding: 0.15rem 0.85rem; border-radius: 999px; background: var(--sta-navy); color: var(--sta-weiss); font-size: var(--sta-text-klein); font-weight: 800; white-space: nowrap; transform: translate(-50%, -50%); }
.sta #sta-rechner .sr-tariff h3 { margin: 0 0 0.1rem; font-size: var(--sta-text-gross); }
.sta #sta-rechner .sr-sub { margin-bottom: var(--sta-abstand-s); color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta #sta-rechner .sr-row { display: flex; justify-content: space-between; gap: var(--sta-abstand-xs); padding: 0.25rem 0; font-size: var(--sta-text-klein); line-height: 1.35; }
.sta #sta-rechner .sr-row.sr-total { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--sta-rand); font-weight: 900; }
.sta #sta-rechner .sr-save { margin: var(--sta-abstand-s) 0; padding: 0.6rem 0.75rem; border-radius: var(--sta-radius-s); background: var(--sta-gruen-hell); color: var(--sta-gruen); font-weight: 800; line-height: 1.3; text-align: center; }
.sta #sta-rechner .sr-save small { display: block; font-size: var(--sta-text-klein); font-weight: 700; }
.sta #sta-rechner .sr-save.sr-none { background: var(--sta-flaeche); color: var(--sta-text-leise); }
.sta #sta-rechner .sr-tariff a.cta-button { display: flex; align-items: center; justify-content: center; min-height: var(--sta-knopf-hoehe); margin-top: auto; padding: 0.5rem 0.75rem; border: 2px solid var(--sta-weiss); border-radius: var(--sta-radius-m); background: var(--sta-orange); box-shadow: 0 4px 14px rgba(222, 139, 0, 0.4), 0 0 0 1px var(--sta-orange); color: var(--sta-weiss); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; }
.sta #sta-rechner .sr-tariff:not(.is-best) a.cta-button { border-color: var(--sta-navy); background: var(--sta-weiss); box-shadow: none; color: var(--sta-navy); }
.sta #sta-rechner .sr-tariff a.cta-button:hover { border-color: var(--sta-weiss); background: var(--sta-navy); box-shadow: 0 0 0 1px var(--sta-navy); color: var(--sta-weiss); }
.sta #sta-rechner .sr-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sta-abstand-xs) var(--sta-abstand-s); margin-top: var(--sta-abstand-l); font-weight: 800; }
.sta #sta-rechner .sr-share-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.4rem 1.1rem; border: 2px solid var(--sta-rand-stark); border-radius: 999px; background: var(--sta-weiss); color: var(--sta-navy); font-weight: 800; text-decoration: none; }
.sta #sta-rechner .sr-share-btn:hover { border-color: var(--sta-blau); }
.sta #sta-rechner .sr-share-btn svg { flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; }
.sta #sta-rechner ul.sr-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sta-abstand-xs) var(--sta-abstand-l); margin: var(--sta-abstand-m) 0 0; padding: 0; font-size: var(--sta-text-klein); font-weight: 700; list-style: none; }
.sta #sta-rechner ul.sr-trust li { padding: 0; list-style: none; }
.sta #sta-rechner .sr-trust li::before { content: '✓ '; color: var(--sta-gruen); font-weight: 900; }
.sta #sta-rechner .sr-call { margin: var(--sta-abstand-s) 0 0; font-size: var(--sta-text-klein); text-align: center; }
.sta #sta-rechner .sr-note { margin: var(--sta-abstand-s) 0 0; color: var(--sta-text-leise); font-size: var(--sta-text-klein); line-height: 1.45; }

/* ---------- Unterseiten: Helfer ---------- */
.sta-unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sta-nowrap { white-space: nowrap; }
.sta-sup { display: inline-block; margin-left: 1px; font-size: 0.6em; line-height: 0; vertical-align: super; white-space: nowrap; }

/* ---------- Ratgeberseiten: Hero mit H1, H2 und H3 untereinander ---------- */
.sta .sta-hero--ratgeber h2 { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-h3); }
.sta .sta-hero--ratgeber h3 { color: var(--sta-blau-text); font-size: var(--sta-text-gross); }
.sta-preisschild .sta-preisschild__wert { font-size: var(--sta-h3); font-weight: 900; }
.sta-preisschild .sta-sup { font-size: 0.6em; }

/* ---------- Gegenüberstellung zweier Angebote ---------- */
.sta-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sta-abstand-l); }
.sta-vergleich__karte { padding: var(--sta-abstand-l); border: 2px solid var(--sta-rand); border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-vergleich__karte--neu { border-color: var(--sta-gruen); background: var(--sta-gruen-hell); }
.sta .sta-vergleich__karte--neu h4 { color: var(--sta-gruen); }
.sta ul.sta-liste--nein li::before {
  background: #FBE9E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.sta .sta-vergleich__karte ul.sta-liste { margin-bottom: 0; }
.sta ul.sta-liste--gruen li::before {
  background: var(--sta-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317693F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* ---------- FAQ-Seite: Themen, Fragen, Seitenkasten ---------- */
.sta-themen { display: flex; flex-wrap: wrap; gap: var(--sta-abstand-xs); margin-bottom: var(--sta-abstand-xl); }
.sta a.sta-thema { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.35rem 1.1rem; border: 2px solid var(--sta-rand); border-radius: 999px; background: var(--sta-weiss); color: var(--sta-navy); font-size: var(--sta-text-klein); font-weight: 800; line-height: 1.25; text-decoration: none; }
.sta a.sta-thema:hover { border-color: var(--sta-blau); background: var(--sta-blau-hell); }
.sta-faq-raster { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sta-abstand-xxl); align-items: start; }
.sta .sta-faq-raster .sta-faq { max-width: none; margin: 0; }
.sta-faq-gruppe { margin-bottom: var(--sta-abstand-xl); }
.sta-faq-gruppe:last-child { margin-bottom: 0; }
.sta-seitenkasten { position: sticky; top: 7rem; display: grid; gap: var(--sta-abstand-m); }
.sta .sta-seitenkasten__preis { margin-bottom: var(--sta-abstand-s); color: var(--sta-navy); font-weight: 800; }
.sta-seitenkasten__preis strong { color: var(--sta-orange-text); font-size: var(--sta-h2); font-weight: 900; line-height: 1.1; }
.sta-seitenkasten__preis span { color: var(--sta-text-leise); font-size: var(--sta-text-klein); }
.sta .sta-seitenkasten a.sta-btn { width: 100%; }

/* ---------- Querverweise: vierspaltig, mit Text und Linkzeile ---------- */
.sta-querverweise--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sta-querverweis__text { flex: 1 1 auto; margin-bottom: var(--sta-abstand-xs); color: var(--sta-text); font-size: var(--sta-text-klein); font-weight: 500; line-height: 1.4; }
.sta-querverweis__link { margin-top: var(--sta-abstand-xs); color: var(--sta-blau-text); font-size: var(--sta-text-klein); font-weight: 800; text-decoration: underline; text-underline-offset: 0.16em; }

/* ---------- Rechtstexte: Inhalt bleibt wortgleich, nur die Darstellung kommt von hier ---------- */
.sta-rechtstext { max-width: var(--sta-breite-text); overflow-wrap: break-word; }
.sta-inhalt--recht { max-width: 60rem; }
.sta-inhalt--recht .sta-rechtstext { max-width: none; }
.sta-inhalt--recht .sta-spalten + .sta-rechtstext { margin-top: var(--sta-abstand-xxl); }
.sta .sta-rechtstext h1 { margin-top: var(--sta-abstand-l); font-size: var(--sta-h2); line-height: 1.2; }
.sta .sta-rechtstext h1:first-child { margin-top: 0; }
.sta .sta-rechtstext h2 { margin-top: var(--sta-abstand-xxl); font-size: var(--sta-h3); }
.sta .sta-rechtstext h3 { margin-top: var(--sta-abstand-xl); font-size: var(--sta-text-gross); }
.sta .sta-rechtstext h4 { margin-top: var(--sta-abstand-l); margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-basis); }
.sta .sta-rechtstext h2:first-child,
.sta .sta-rechtstext h3:first-child { margin-top: 0; }
.sta .sta-rechtstext ul { margin: 0 0 var(--sta-abstand-m); padding: 0 0 0 1.5rem; list-style: disc; }
.sta .sta-rechtstext li { margin-bottom: var(--sta-abstand-xs); padding: 0; list-style: inherit; }
.sta .sta-rechtstext hr { margin: var(--sta-abstand-l) 0; border: 0; border-top: 1px solid var(--sta-rand); }
.sta .sta-rechtstext img { float: none; display: block; margin: 0; }
.sta-rechtstext a { overflow-wrap: anywhere; }

/* ---------- Seite für Angehörige ---------- */
.sta ul.sta-liste--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sta-abstand-s) var(--sta-abstand-xl); margin: 0; }
.sta ul.sta-liste--zwei li { margin: 0; }
.sta .sta-info__druck { margin-top: var(--sta-abstand-m); font-size: var(--sta-text-klein); }

/* ---------- Bildband: Bilder mit kurzem Text ---------- */
.sta-sektion--blau { background: var(--sta-blau-hell); }
.sta-bildband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sta-abstand-l); }
.sta-bildkarte { overflow: hidden; border-radius: var(--sta-radius-l); background: var(--sta-weiss); box-shadow: var(--sta-schatten); }
.sta-bildkarte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sta-bildkarte__text { padding: var(--sta-abstand-m) var(--sta-abstand-l) var(--sta-abstand-l); }
.sta .sta-bildkarte h3 { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-gross); }
.sta .sta-bildkarte p { font-size: var(--sta-text-klein); line-height: 1.45; }

/* ---------- Bestell-Leiste am unteren Rand, nur Handy und Tablet ---------- */
.sta-leiste,
.sta-kaufleiste { display: none; }

/* ---------- Kopfbereich: Theme-Builder-Layout "STA Header" ----------
   Beim Scrollen läuft die Hotline-Leiste weg, die Hauptzeile bleibt stehen. */
:root { --sta-kopf-leiste: 2.5rem; }
html { scroll-padding-top: 6.5rem; }
.et-l--header { position: sticky; top: calc(var(--sta-kopf-leiste) * -1); z-index: 999; }
.admin-bar .et-l--header { top: calc(32px - var(--sta-kopf-leiste)); }
/* Sprungziele: Divi scrollt per Skript und ignoriert scroll-padding, ohne Kopf-Layout gäbe es sonst keinen Versatz. */
.sta #tarifinfo::before,
.sta #geraete::before,
.sta #sta-beispiele::before { content: ''; display: block; height: 8rem; margin-top: -8rem; visibility: hidden; pointer-events: none; }
/* Leere Sprungmarke: Sie hat keine Höhe und legt sich anders als ::before nicht über Knöpfe darüber. */
.sta-anker { display: block; position: relative; top: -8rem; height: 0; }

.et_pb_section.sta-kopf {
  display: block;
  width: 100%;
  max-width: none;
  /* margin: .sta-kopf (Abschnittskopf) gibt sonst 2rem nach unten mit, das war ein weißer Streifen unter dem Kopf */
  margin: 0;
  padding: 0;
  background: var(--sta-weiss);
  box-shadow: 0 1px 0 var(--sta-rand), 0 6px 18px rgba(20, 29, 69, 0.06);
  font-family: var(--sta-schrift);
}
.et_pb_row.sta-kopf__hotline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: var(--sta-kopf-leiste);
  margin: 0;
  padding: 0 var(--sta-abstand-m);
  background: var(--sta-blau-text);
}
.sta-kopf__hotline .et_pb_column { width: auto; margin: 0; }
.sta-kopf__hotline p { margin: 0; padding: 0; color: var(--sta-weiss); font-size: var(--sta-text-klein); font-weight: 700; line-height: 1.2; }
.et_pb_row.sta-kopf__hotline a { color: var(--sta-weiss) !important; font-weight: 900; text-underline-offset: 0.16em; text-decoration: underline; }

.et_pb_row.sta-kopf__haupt {
  display: flex;
  align-items: center;
  gap: var(--sta-abstand-l);
  width: 100%;
  max-width: var(--sta-breite-inhalt);
  margin: 0 auto;
  padding: 0.6rem var(--sta-abstand-m);
}
.sta-kopf__haupt > .et_pb_column { flex: 0 0 auto; width: auto; margin: 0; }
.sta-kopf__haupt > .sta-kopf__sp-menue { flex: 1 1 auto; }
.sta-kopf__haupt .et_pb_module { margin: 0; }
.sta-kopf__haupt p { margin: 0; padding: 0; }

.sta-kopf a.sta-kopf__marke { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--sta-navy); font-size: 1.1875rem; font-weight: 800; line-height: 1.12; text-decoration: none; }
.sta-kopf a.sta-kopf__marke img { width: 3.25rem; height: 3.25rem; }

.sta-kopf .et_pb_menu.sta-kopf__menue { background: transparent; }
.sta-kopf__menue .et_pb_menu__wrap { justify-content: center; }
.sta-kopf__menue .et-menu > li { padding: 0 0.7rem; }
.sta-kopf__menue .et-menu > li > a {
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
  color: var(--sta-navy);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}
.sta-kopf__menue .et-menu > li > a:hover { border-bottom-color: var(--sta-orange); color: var(--sta-navy); opacity: 1; }

.sta-kopf__sp-knoepfe { display: flex; align-items: center; gap: var(--sta-abstand-xs); }
.sta-kopf .et_pb_button_module_wrapper { margin: 0; }
.sta-kopf a.et_pb_button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.45rem 1.25rem;
  border: 2px solid var(--sta-weiss);
  border-radius: var(--sta-radius-m);
  font-family: var(--sta-schrift);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.sta-kopf a.et_pb_button::after { display: none; }
.sta-kopf a.et_pb_button.sta-kopf__bestellen {
  background: var(--sta-orange);
  color: var(--sta-weiss);
  box-shadow: 0 3px 10px rgba(222, 139, 0, 0.4), 0 0 0 1px var(--sta-orange);
}
.sta-kopf a.et_pb_button.sta-kopf__bestellen:hover { padding: 0.45rem 1.25rem; background: var(--sta-navy); box-shadow: 0 0 0 1px var(--sta-navy); }
.sta-kopf a.et_pb_button.sta-kopf__anrufen { display: none; }
/* Auf dem Checkout führt der Knopf ins Leere: Die Besucher sind schon dort. */
.page-id-7314 .sta-kopf a.et_pb_button.sta-kopf__bestellen { display: none; }

/* Die Formular-Schritte liegen nebeneinander, ohne seitlichen Zuschnitt verschiebt das iPhone sonst die ganze Seite (Fund 01.11.2026).
   clip statt hidden: Es entsteht kein neuer Scroll-Bereich, der feste Kopf bleibt unberührt. Steht bewusst vor dem Checkout-Block, damit es auch ins Live-CSS kommt. */
html body.page-id-7314 ._frm-b1-stp-cntnt-wrpr { overflow-x: clip; }

.sta-kopf a.sta-kopf__marke:focus-visible,
.sta-kopf a.et_pb_button:focus-visible,
.sta-kopf__menue a:focus-visible,
.sta-kopf__hotline a:focus-visible,
.sta-fuss a:focus-visible { outline: 3px solid var(--sta-orange); outline-offset: 2px; }

/* ---------- Fußbereich: Theme-Builder-Layout "STA Footer" ---------- */
.et_pb_section.sta-fuss { padding: var(--sta-abstand-xxl) var(--sta-abstand-m) var(--sta-abstand-l); background: var(--sta-navy); color: var(--sta-weiss); font-family: var(--sta-schrift); font-size: var(--sta-text-klein); line-height: 1.55; }
.sta-fuss .et_pb_row { width: 100%; max-width: var(--sta-breite-inhalt); margin: 0 auto; padding: 0; }
.et_pb_row.sta-fuss__spalten { display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; gap: var(--sta-abstand-xl); }
.et_pb_row.sta-fuss__spalten > .et_pb_column { width: auto; margin: 0; }
.sta-fuss p { margin: 0 0 var(--sta-abstand-s); padding: 0; color: var(--sta-weiss); font-size: var(--sta-text-klein); }
.sta-fuss a { color: var(--sta-weiss); font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; }
.sta-fuss a:hover { color: #FFD48A; }
.sta-fuss p.sta-fuss__marke { display: flex; align-items: center; gap: 0.6rem; font-size: var(--sta-text-gross); font-weight: 800; line-height: 1.15; }
.sta-fuss__marke img { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; padding: 2px; border-radius: 50%; background: var(--sta-weiss); }
.sta-fuss p.sta-fuss__nummer { margin-bottom: 0.1rem; font-size: var(--sta-text-gross); }
.sta-fuss p.sta-fuss__nummer a { font-weight: 900; }
.sta-fuss p.sta-fuss__titel { margin-bottom: var(--sta-abstand-xs); font-size: var(--sta-text-basis); font-weight: 800; }
.sta-fuss ul.sta-fuss__liste { margin: 0 0 var(--sta-abstand-m); padding: 0; list-style: none; }
.sta-fuss ul.sta-fuss__liste li { margin: 0 0 var(--sta-abstand-xs); padding: 0; list-style: none; }
.sta-fuss a.sta-fuss__widerruf { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.4rem 1.1rem; border: 2px solid var(--sta-weiss); border-radius: var(--sta-radius-m); font-weight: 800; text-decoration: none; }
.sta-fuss a.sta-fuss__widerruf:hover { background: var(--sta-weiss); color: var(--sta-navy); }
.sta-fuss__siegel { display: flex; gap: var(--sta-abstand-s); align-items: flex-start; }
.sta-fuss__siegel img { width: auto; height: 9.375rem; border-radius: var(--sta-radius-s); background: var(--sta-weiss); }
.et_pb_row.sta-fuss__pflicht { margin-top: var(--sta-abstand-l); padding-top: var(--sta-abstand-m); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.sta-fuss__pflicht .et_pb_column { width: 100%; margin: 0; }
.sta-fuss__pflicht p:last-child { margin-bottom: 0; }
.et_pb_row.sta-fuss__pflicht p { color: var(--sta-fuss-leise); font-size: var(--sta-text-fein); line-height: 1.5; }
.et_pb_row.sta-fuss__pflicht a { color: var(--sta-fuss-leise); font-weight: 600; }
.et_pb_row.sta-fuss__pflicht a:hover { color: var(--sta-weiss); }

/* Divi begrenzt .et_pb_row:not([class*="et_flex_column"]) auf 1400 px: gleiche Gewichtung wie .et_pb_row.xyz, lädt aber später.
   Darum hier stärkere Selektoren. Die Hauptzeile hat Innenabstand, plus 2 × --sta-abstand-m fluchtet sie mit dem Seiteninhalt. */
.et_pb_section.sta-kopf .et_pb_row.sta-kopf__hotline { max-width: none; }
.et_pb_section.sta-kopf .et_pb_row.sta-kopf__haupt { max-width: calc(var(--sta-breite-inhalt) + 2 * var(--sta-abstand-m)); }
.et_pb_section.sta-fuss .et_pb_row { max-width: var(--sta-breite-inhalt); }

/* Knapp über dem Handy-Menü passen sechs Menüpunkte nicht in eine Zeile. Zur Startseite führt hier das Logo. */
@media (min-width: 981px) and (max-width: 1180px) {
  .et_pb_row.sta-kopf__haupt { gap: var(--sta-abstand-s); }
  .sta-kopf__menue .et-menu > li { padding: 0 0.4rem; }
  .sta-kopf__menue .et-menu > li:first-child { display: none; }
  .sta-kopf__menue .et-menu > li > a { font-size: var(--sta-text-klein); }
  .sta-kopf a.et_pb_button.sta-kopf__bestellen,
  .sta-kopf a.et_pb_button.sta-kopf__bestellen:hover { padding: 0.45rem 0.9rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .sta-hero__raster { grid-template-columns: 1fr; gap: var(--sta-abstand-l); }
  .sta-hero__bild { display: none; }
  /* minmax(0, 1fr): Sonst drückt die breite Tabelle die Spalte und damit die Seite auseinander */
  .sta-spalten { grid-template-columns: minmax(0, 1fr); gap: var(--sta-abstand-xl); }
  .sta-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sta-tarife { grid-template-columns: minmax(0, 1fr); gap: var(--sta-abstand-xl); max-width: 32rem; margin: 0 auto; }
  .sta-pdp-start { grid-template-columns: minmax(0, 1fr); gap: var(--sta-abstand-xl); }
  .sta-galerie__bild { aspect-ratio: auto; height: 20rem; }
  .sta-querverweise { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin: 0 auto; }
  .sta-querverweise--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  /* Bild und Preisschild bleiben wie bisher sichtbar, sie stehen unter dem Text */
  .sta-hero--ratgeber .sta-hero__bild,
  .sta-hero--mit-bild .sta-hero__bild { display: block; width: 100%; max-width: 26rem; margin: 0 auto; }
  .sta-bildband { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin: 0 auto; }
  .sta-faq-raster { grid-template-columns: minmax(0, 1fr); gap: var(--sta-abstand-xl); }
  .sta-seitenkasten { position: static; }
  .sta-vergleich { grid-template-columns: minmax(0, 1fr); }
  .sta ul.sta-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sta-fallen,
  .sta ol.sta-schritte--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sta-beispiele { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin: 0 auto; }
  .sta #sta-rechner .sr-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sta #sta-rechner .sr-tariffs { grid-template-columns: minmax(0, 1fr); gap: var(--sta-abstand-l); }
  .sta #sta-rechner .sr-tariff.is-best { order: -1; }
  .sta-abschluss { flex-direction: column; text-align: center; }
  .sta-kaufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sta-abstand-s);
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sta-rand);
    box-shadow: 0 -6px 20px rgba(20, 29, 69, 0.12);
    font-family: var(--sta-schrift);
    transform: translateY(110%);
    transition: transform 0.28s ease;
  }
  .sta-kaufleiste.is-visible { transform: translateY(0); }
  .sta-kaufleiste strong { display: block; color: var(--sta-navy); font-size: var(--sta-text-klein); font-weight: 800; line-height: 1.2; }
  .sta-kaufleiste span { color: var(--sta-text-leise); font-size: var(--sta-text-klein); font-weight: 700; }
  a.sta-kaufleiste__knopf { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 3.25rem; padding: 0.4rem 1.25rem; border: 2px solid var(--sta-weiss); border-radius: var(--sta-radius-m); background: var(--sta-orange); box-shadow: 0 4px 14px rgba(222, 139, 0, 0.4), 0 0 0 1px var(--sta-orange); color: var(--sta-weiss); font-size: var(--sta-text-basis); font-weight: 800; text-decoration: none; }
  /* Platz, damit die Leiste die Fußzeile nicht verdeckt */
  body:has(.sta-kaufleiste.is-visible) { padding-bottom: 5rem; }
  .sta-bewertungen { display: flex; gap: var(--sta-abstand-m); overflow-x: auto; padding: 0.25rem 0.25rem var(--sta-abstand-s); scroll-snap-type: x mandatory; }
  .sta-bewertung { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; }
  .sta-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: flex; gap: 0.6rem;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sta-rand);
    box-shadow: 0 -6px 20px rgba(20, 29, 69, 0.12);
    transform: translateY(110%);
    transition: transform 0.28s ease;
  }
  .sta-leiste.is-visible { transform: translateY(0); }
  .sta-leiste a { flex: 1 1 56%; padding-left: 0.5rem; padding-right: 0.5rem; font-size: var(--sta-text-basis); }
  .sta-leiste a.sta-leiste__anrufen { flex: 1 1 44%; }

  /* Kopfbereich: Hotline-Leiste weg, Anrufen statt Bestellen, Menü wird zur Schaltfläche */
  :root { --sta-kopf-leiste: 0rem; }
  html { scroll-padding-top: 5rem; }
  .et_pb_row.sta-kopf__hotline { display: none; }
  .et_pb_row.sta-kopf__haupt { gap: var(--sta-abstand-xs); padding: 0.45rem 0.75rem; }
  .sta-kopf__haupt > .sta-kopf__sp-marke { flex: 1 1 auto; }
  .sta-kopf__haupt > .sta-kopf__sp-menue { flex: 0 0 auto; order: 3; }
  .sta-kopf__sp-knoepfe { order: 2; }
  .sta-kopf a.sta-kopf__marke { font-size: 1.0625rem; }
  .sta-kopf a.sta-kopf__marke img { width: 2.75rem; height: 2.75rem; }
  .sta-kopf a.et_pb_button.sta-kopf__bestellen { display: none; }
  .sta-kopf a.et_pb_button.sta-kopf__anrufen {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0.3rem 0.85rem;
    border-color: var(--sta-blau-text);
    background: var(--sta-weiss);
    color: var(--sta-blau-text);
    font-size: 1.0625rem;
  }
  .sta-kopf__menue .mobile_menu_bar::before { color: var(--sta-navy); font-size: 2.5rem; }
  /* Das Handy-Menü hängt am Kopf statt am Symbol, sonst läuft es rechts aus dem Bild */
  .et_pb_row.sta-kopf__haupt { position: relative; }
  .sta-kopf__sp-menue,
  .sta-kopf__menue,
  .sta-kopf__menue .et_pb_menu_inner_container,
  .sta-kopf__menue .et_pb_menu__wrap,
  .sta-kopf__menue .et_pb_menu__menu,
  .sta-kopf__menue .et_mobile_nav_menu,
  .sta-kopf__menue .mobile_nav { position: static; }
  .sta-kopf__menue .et_mobile_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding: 0.25rem 0.75rem 0.75rem;
    border-top: 3px solid var(--sta-blau);
    box-shadow: 0 12px 24px rgba(20, 29, 69, 0.14);
  }
  .sta-kopf__menue .et_mobile_menu li { padding: 0; list-style: none; }
  .sta-kopf__menue .et_mobile_menu a { display: block; padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--sta-rand); color: var(--sta-navy); font-size: var(--sta-text-gross); font-weight: 800; }
  .sta-kopf__menue .et_mobile_menu li:last-child a { border-bottom: 0; }

  /* Fußbereich */
  .et_pb_row.sta-fuss__spalten { grid-template-columns: 1fr 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .sta ol.sta-schritte { grid-template-columns: 1fr; gap: var(--sta-abstand-l); }
  .sta-knoepfe .sta-btn { width: 100%; }
  /* Knöpfe rücken im Hero vor die Aufzählung, damit sie ohne Scrollen sichtbar sind */
  .sta-hero__text { display: flex; flex-direction: column; }
  .sta .sta-hero__text ul.sta-liste { order: 6; margin-top: var(--sta-abstand-l); }
  .sta .sta-hero__hinweis { margin-bottom: 0; }
  .sta-produkte { grid-template-columns: 1fr; }
  .sta ul.sta-liste--zwei { grid-template-columns: minmax(0, 1fr); }
  .sta-querverweise--vier { grid-template-columns: minmax(0, 1fr); }
  .sta-fallen,
  .sta ol.sta-schritte--vier { grid-template-columns: minmax(0, 1fr); }
  .sta-skala__balken { grid-template-columns: minmax(0, 1fr); }
  .sta-skala__achse { display: none; }
  .sta-gegenueber { flex-direction: column; text-align: center; }
  .sta-familie { grid-template-columns: minmax(0, 1fr); }
  .sta-familie__bild { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .sta-familie__text { align-items: stretch; padding: var(--sta-abstand-l) var(--sta-abstand-m); }
  .sta-rechnung { margin-left: var(--sta-abstand-xs); margin-right: var(--sta-abstand-xs); padding: var(--sta-abstand-s) var(--sta-abstand-m); }
  .sta a.sta-textlink { justify-content: center; width: 100%; text-align: center; }
  .sta #sta-rechner .sr-card { padding: var(--sta-abstand-l) var(--sta-abstand-m); }
  .sta #sta-rechner .sr-hint,
  .sta #sta-rechner .sr-money,
  .sta #sta-rechner .sr-options,
  .sta #sta-rechner .sr-fine,
  .sta #sta-rechner .sr-link { margin-left: 0; }
  .sta #sta-rechner .sr-options { grid-template-columns: minmax(0, 1fr); }
  /* Tarifwahl: Beschreibung läuft unter Name und Preis über die volle Breite */
  .sta-tarifoption { grid-template-areas: "wahl name preis" "wahl text text"; }
  .sta-preisbox { padding: var(--sta-abstand-m); }
  /* Am Handy gestapelt: Bezeichnung oben, Wert darunter. Zwei Spalten wären zu eng für 17 px. */
  .sta table.sta-tabelle,
  .sta-tabelle tbody,
  .sta-tabelle tr,
  .sta-tabelle th,
  .sta-tabelle td { display: block; width: 100%; }
  .sta-tabelle thead { display: none; }
  .sta-tabelle tbody th[scope="row"] { padding: 0.7rem var(--sta-abstand-m) 0; border-bottom: 0; }
  .sta-tabelle tbody td { padding: 0.1rem var(--sta-abstand-m) 0.7rem; }
  .sta a.sta-hinweis.sta-hinweis--symbol { flex-direction: row; align-items: center; padding: var(--sta-abstand-s); }
  .sta-siegelreihe img { height: 5.5rem; }
  .sta-dialog__inhalt { padding: var(--sta-abstand-l); }
  .sta .sta-dialog__bild { max-height: 6rem; }
  .sta-vertrauen { flex-direction: column; align-items: flex-start; }
  .sta-hotline { flex-direction: column; align-items: flex-start; }
  .sta a.sta-hinweis { flex-direction: column; align-items: flex-start; }
  .et_pb_row.sta-fuss__spalten { grid-template-columns: 1fr; gap: var(--sta-abstand-l); }
}

@media (prefers-reduced-motion: reduce) {
  .sta *, .sta-leiste { transition: none !important; }
}