/* ==========================================================================
   Computerservice Bollert – style.css
   Helles, ruhiges, seniorenfreundliches Design.
   Reines CSS, keine externen Schriften, keine Frameworks.
   ========================================================================== */

:root {
  /* Farben */
  --color-bg: #ffffff;
  --color-bg-alt: #f2f6fa;
  --color-bg-hero: #eaf2f8;
  /* Markenfarben aus dem Logo: Dunkelblau #183a67, Blau #4085c6 */
  --color-primary: #2f6cae;        /* etwas dunkler fuer gut lesbare Links/Texte */
  --color-primary-dark: #183a67;   /* Logo-Dunkelblau: Überschriften, Fuß */
  --color-accent: #4085c6;         /* Logo-Blau: Buttons, Häkchen, Akzente (früher Grün) */
  --color-accent-dark: #2f6cae;    /* Hover */
  --color-text: #1a1a1a;
  --color-text-light: #40484f;
  --color-border: #d7e2ec;
  --color-white: #ffffff;

  /* Typografie */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-base: 19px;
  --line-height-base: 1.65;

  /* Layout */
  --max-width: 1100px;
  --radius: 10px;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2.5rem;
  --spacing-5: 4rem;

  /* Eine Stellschraube für alle Hero-Abstände auf schmalen Bildschirmen.
     Kleinerer Wert = alles rückt weiter zusammen. */
  --hero-gap-mobile: 1.5rem;
}

/* ---- Reset / Grundlagen ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
}

a:hover,
a:focus {
  color: var(--color-primary-dark);
}

h1,
h2,
h3 {
  line-height: 1.3;
  color: var(--color-primary-dark);
}

h1 {
  font-size: 2.1rem;
  margin: 0 0 var(--spacing-2);
}

h2 {
  font-size: 1.6rem;
  margin: 0 0 var(--spacing-2);
}

h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--spacing-1);
}

p {
  margin: 0 0 var(--spacing-2);
}

ul,
ol {
  padding-left: 1.4rem;
}

li {
  margin-bottom: var(--spacing-1);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-3);
}

/* Sichtbarer Fokus für Tastaturnutzung und Barrierefreiheit */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip-Link für Barrierefreiheit */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  line-height: 1.2;
}

.brand-logo {
  flex-shrink: 0;
}

/* Neues horizontales Logo (Test) */
.brand-logo-full {
  display: block;
  height: 48px;
  width: auto;
}

@media (max-width: 600px) {
  .brand-logo-full {
    height: 40px;
  }
}

.brand-text {
  display: flex;
  flex-direction: column;
  /* "Bollert" mittig unter "Computerservice" */
  align-items: center;
}

.brand-name {
  /* Deutlich kleiner, damit der Schriftzug zur Logohöhe passt */
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}

.brand-slogan {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* Burger-Button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle .bar {
  width: 24px;
  height: 3px;
  background-color: var(--color-primary-dark);
  border-radius: 2px;
}

.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92em;
  white-space: nowrap;
  padding: 0.4rem 0.2rem;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
}

/* Mobile Navigation (Burger-Menü, solange nicht alle Punkte in eine Zeile passen) */
@media (max-width: 1080px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-2);
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav a {
    display: block;
    padding: 0.9rem 0.2rem;
  }

  .header-inner {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.btn-whatsapp {
  background-color: var(--color-primary-dark);
  color: #ffffff;
  border-color: var(--color-primary-dark);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: #12294a;
  color: #ffffff;
  border-color: #12294a;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background-color: var(--color-bg-hero);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.hero p.lead {
  font-size: 1.2rem;
  color: var(--color-text-light);
  max-width: 42ch;
}

/* Ergänzender Fließtext im Hero (z. B. ueber-mich) */
.hero p.hero-body {
  color: var(--color-text-light);
  max-width: 46ch;
}


/* Hero mit Bild neben dem Text */
.hero-flex {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.hero-flex .hero-text {
  flex: 1 1 420px;
}

/* Der letzte Absatz im Hero bringt sonst noch einen eigenen Abstand mit,
   der sich zum Spalten- bzw. Abschnittsabstand addiert. */
.hero-text > *:last-child {
  margin-bottom: 0;
}

.hero-flex .hero-image-wrap {
  flex: 1 1 380px;
}

/* Rechte Hero-Spalte: Buttons und Vertrauens-Badges statt Bild */
.hero-side {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
}

.hero-side .btn-group {
  flex-direction: column;
  align-items: stretch;
}

.hero-side .btn {
  justify-content: center;
  text-align: center;
}

.hero-side .hero-trust {
  margin-top: 0;
  text-align: center;
}

.hero-hours {
  margin: 0.5rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 1.05rem;
}

.hero-hours .icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

.hero-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* Überschrift und Einleitung mittig.
   .hero-centered        = auf jeder Bildschirmbreite (Seiten ohne Bild daneben)
   .hero-centered-mobile = nur wenn umgebrochen wurde, also unter 860px
                           (Start, Senioren, Über mich, Fernwartung – dort steht
                           am großen Bildschirm etwas neben dem Text) */
.hero-centered,
.hero-centered .hero-text {
  text-align: center;
}

.hero-centered p.lead,
.hero-centered p.hero-body {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .hero-centered-mobile,
  .hero-centered-mobile .hero-text {
    text-align: center;
  }

  .hero-centered-mobile p.lead,
  .hero-centered-mobile p.hero-body {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-centered-mobile .btn-group {
    justify-content: center;
  }
}

/* Eckdaten unter den Kontakt-Schaltflächen: Zeilen mit Symbol,
   als Block mittig, Text darin aber linksbündig untereinander */
.contact-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-3);
  font-size: 1.05rem;
}

.contact-facts li {
  display: flex;
  /* flex-start, damit das Symbol bei umbrechenden Zeilen oben bleibt */
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--spacing-1);
}

.contact-facts .icon {
  color: var(--color-primary);
  margin-top: 0.15rem;
}

/* Die E-Mail-Adresse ist lang – auf schmalen Geräten etwas kleiner setzen */
@media (max-width: 460px) {
  .contact-facts {
    font-size: 0.94rem;
  }
}

/* Auf dem Handy stehen die Schaltflächen untereinander und gleich breit –
   ruhiger als drei verschieden breite Knöpfe und leichter zu treffen */
@media (max-width: 560px) {
  .hero-centered .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.hero-flex .contact-box {
  flex: 2 1 480px;
}

.hero-flex .hero-text:has(> h1:only-child) {
  flex: 0 1 240px;
}

@media (max-width: 860px) {
  .hero-flex {
    flex-direction: column;
    /* Untereinander braucht es deutlich weniger Luft als nebeneinander */
    gap: var(--hero-gap-mobile);
  }

  /* Wichtig: Sobald die Spalten untereinander stehen, bezieht sich der dritte
     Wert von "flex" (420px, 380px, 300px, 480px, 240px) nicht mehr auf die
     Breite, sondern auf die HÖHE. Ohne diese Rücksetzung bekommt jeder Block
     diese Höhe zugewiesen, auch wenn der Text viel kürzer ist – das erzeugt
     die großen leeren Flächen. */
  .hero-flex > .hero-text,
  .hero-flex > .hero-image-wrap,
  .hero-flex > .hero-side,
  .hero-flex > .contact-box {
    flex: 0 1 auto;
    width: 100%;
  }

  /* Bewusst eine eigene Regel: Browser ohne :has() verwerfen sonst den
     kompletten Block darüber gleich mit. */
  .hero-flex > .hero-text:has(> h1:only-child) {
    flex: 0 1 auto;
  }

  .hero-flex .hero-image-wrap {
    order: -1;
  }

  /* Hero und folgender Abschnitt rücken auf schmalen Bildschirmen zusammen */
  .hero {
    padding: var(--spacing-3) 0 var(--hero-gap-mobile);
  }

  .hero + section {
    padding-top: var(--hero-gap-mobile);
  }
}

/* ==========================================================================
   Bilder in Abschnitten
   ========================================================================== */

.content-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.image-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.image-with-text > * {
  flex: 1 1 320px;
}

.image-with-text.reverse {
  flex-direction: row-reverse;
}

@media (max-width: 700px) {
  .image-with-text.reverse {
    flex-direction: column;
  }

  /* Gleicher Grund wie beim Hero: in Spaltenrichtung wären die 320px eine Höhe */
  .image-with-text.reverse > * {
    flex: 0 1 auto;
    width: 100%;
  }
}

.portrait-image {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Sections & Cards
   ========================================================================== */

section {
  /* Kompaktere Abschnitte – weniger Scrollweg zwischen den Farbwechseln */
  padding: var(--spacing-4) 0;
}

section.alt {
  background-color: var(--color-bg-alt);
}

.section-intro {
  max-width: 65ch;
  margin-bottom: var(--spacing-3);
  color: var(--color-text-light);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-3);
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-3);
}

section.alt .card {
  background-color: var(--color-white);
}

/* Badges heben sich auf getöntem Abschnitt ab (sonst gleiche Farbe wie Hintergrund) */
section.alt .badge,
.price-note .badge {
  background-color: var(--color-white);
}

/* ==========================================================================
   Tabellen (Preise)
   ========================================================================== */

.price-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  /* feste Spaltenaufteilung, damit Privat- und Gewerbetabelle identisch aussehen */
  table-layout: fixed;
}

.price-table th:last-child,
.price-table td:last-child {
  width: 32%;
}

/* kleine Zusatzzeile in einer Preiszeile (z. B. Taktung/Mindestabrechnung) */
.price-table .cell-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-light);
}

.price-table caption {
  text-align: left;
  font-weight: 700;
  font-size: 1.15rem;
  padding: var(--spacing-2);
  color: var(--color-primary-dark);
}

.price-table caption .icon,
.price-note h3 .icon {
  color: var(--color-primary);
  margin-right: 0.5rem;
}

.price-note h3 {
  display: flex;
  align-items: center;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.price-table th {
  background-color: var(--color-bg-alt);
}

/* Kategorie-Zwischenzeilen in der gemeinsamen Preistabelle –
   dasselbe Hellblau wie sonst auf der Seite (bg-alt), dunkelblaue Schrift */
.price-table .price-group th {
  background-color: var(--color-bg-alt);
  color: var(--color-primary-dark);
  font-size: 1.02rem;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--color-border);
}

.price-table tr:last-child td {
  border-bottom: none;
}

.price-note {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-3);
  margin-top: var(--spacing-3);
}

/* ==========================================================================
   Kontakt-Kasten
   ========================================================================== */

.contact-box {
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--spacing-3);
}

.contact-box a.btn {
  margin-top: var(--spacing-1);
}

.contact-line {
  font-size: 1.15rem;
  margin-bottom: var(--spacing-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary-dark);
  color: #eef4fa;
  padding: var(--spacing-4) 0;
  margin-top: var(--spacing-4);
}

.site-footer a {
  color: #cfe4f7;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: var(--spacing-3) var(--spacing-4);
  font-size: 0.97rem;
}

/* Textspalten nehmen ihre natürliche Breite; nur die Marken-Spalte wird begrenzt,
   damit die Tagline auf zwei Zeilen bleibt */
.footer-grid > div {
  flex: 0 0 auto;
}

.footer-grid > div:first-child {
  flex: 0 1 300px;
}

/* Etwas mehr Luft vor der Rechtliches-Spalte */
.footer-grid > div:nth-child(3) {
  margin-left: var(--spacing-3);
}

/* Kontakt-/Rechtliches-Links immer einzeilig */
.footer-grid li a {
  white-space: nowrap;
}

/* weiße Logo-Variante rechts, mittig zu den Spalten – einen Tick höher */
.footer-logo {
  align-self: center;
  transform: translateY(-10px);
  margin-left: var(--spacing-4);
}

.footer-logo img {
  width: 180px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .footer-grid {
    /* Jeder Block bekommt eine eigene Zeile. Vorher rutschten die schmalen
       Blöcke (Rechtliches, Logo) nebeneinander und wirkten dadurch versetzt. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Die 300px sind eine Desktop-Spaltenbreite. Gestapelt macht sie den
     Markenblock breiter als seinen Text – er sitzt dann sichtbar links. */
  .footer-grid > div:first-child {
    flex: 0 1 auto;
  }

  /* Zusatz-Abstände (Desktop) zurücksetzen, damit die gestapelten
     Spalten mittig bleiben */
  .footer-grid > div:nth-child(3),
  .footer-logo {
    margin-left: 0;
  }

  /* Feinjustierung für die Desktop-Anordnung – gestapelt nicht sinnvoll */
  .footer-logo {
    transform: none;
  }

  .footer-grid ul {
    display: inline-block;
    text-align: left;
  }
}

.footer-grid h3 {
  color: #ffffff;
  font-size: 1.05rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 0.4rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-2);
  font-size: 0.95rem;
  color: #cfe4f7;
  text-align: center;
}

/* ==========================================================================
   Icons
   (Icons werden direkt als Inline-SVG in die Seite eingebettet, nicht per
   <img> oder CSS-Maske eingebunden. So funktionieren sie zuverlässig in
   jedem Browser, auch beim lokalen Öffnen der Datei per Doppelklick, und
   nehmen über stroke="currentColor" automatisch die Textfarbe des jeweiligen
   Elements an – ganz ohne externe Icon-Fonts.)
   ========================================================================== */

.icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  /* Sitzt optisch auf der Textgrundlinie – "middle" hing je nach Kontext zu hoch */
  vertical-align: -0.2em;
}

/* Icon in einem farbigen Kreis, z. B. über Kartentiteln */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg-hero);
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
  flex-shrink: 0;
}

.icon-circle .icon {
  width: 32px;
  height: 32px;
}

.card h3 {
  display: flex;
  /* flex-start statt center: Bei zweizeiligen Titeln bleibt das Icon
     auf Höhe der ersten Zeile – so sitzen alle Karten-Icons gleich hoch */
  align-items: flex-start;
  gap: 0.6rem;
}

.card h3 .icon {
  color: var(--color-primary);
  /* 28px-Icon mittig zur ersten Titelzeile (26px) ausrichten */
  margin-top: -1px;
}

/* Icon direkt vor einer Überschrift (h1/h2), z. B. "<h2><span class="icon ..."></span> Titel</h2>" */
h1 .icon,
h2 .icon {
  margin-right: 0.5rem;
  color: var(--color-primary);
}

/* Schritte (z. B. Ablauf Fernwartung) */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}

.step .icon-circle {
  margin-bottom: 0;
}

.step h3 {
  margin-bottom: 0.2rem;
}

/* Liste mit Häkchen-Icons */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--spacing-2);
}

.check-list .icon {
  color: var(--color-accent);
  margin-top: 0.2rem;
}

/* Zweispaltige Häkchen-Liste (z. B. Typische Anliegen auf senioren.html) */
.check-list-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--spacing-4);
}

@media (max-width: 700px) {
  .check-list-2col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* Kontakt-Zeilen mit Icon */
.contact-line-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.contact-line-icon .icon {
  color: var(--color-primary);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.justify-center {
  justify-content: center;
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.badge {
  display: inline-block;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0 0.4rem 0.4rem 0;
}

/* Einsatzgebiet: Bezirk mit seinen Ortsteilen darunter */
.district-grid {
  list-style: none;
  padding: 0;
  /* Abstand nach unten, damit ein folgender Absatz nicht am Raster klebt */
  margin: 0 0 var(--spacing-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-2) var(--spacing-3);
}

/* Steht das Raster am Ende eines Kastens, bläht der Abstand ihn nur auf */
.district-grid:last-child {
  margin-bottom: 0;
}

.district-grid > li {
  margin-bottom: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: 0.8rem;
}

.district-name {
  display: block;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.district-parts {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-light);
}

/* Vertrauens-Badges unter den Hero-Buttons */
.hero-trust {
  margin-top: var(--spacing-3);
  margin-bottom: 0;
}

.hero-trust .badge {
  background-color: var(--color-white);
}

/* ==========================================================================
   FAQ (Aufklapp-Elemente)
   ========================================================================== */

.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--spacing-2);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  padding: var(--spacing-2) var(--spacing-3);
}

.faq-item summary:hover {
  color: var(--color-primary);
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.faq-answer {
  padding: var(--spacing-2) var(--spacing-3);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

/* Kontaktformular: Name / E-Mail / Telefon nebeneinander,
   Nachricht, Einwilligung und Button über die volle Breite */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
}

.form-grid.contact-box {
  background-color: var(--color-bg-hero);
}

.form-grid > .form-field:nth-of-type(4),
.form-grid > .form-consent,
.form-grid > p {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 70ch;
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.form-consent input {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.3rem;
  flex-shrink: 0;
}

button.btn {
  font-family: inherit;
  font-size: 1.05rem;
  border: 2px solid transparent;
}

/* Artikel (Ratgeber) */
.article-content {
  max-width: 72ch;
}

.article-meta {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-1);
}

/* Nur für Screenreader / Honeypot */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Schriftgröße-Umschalter (A / A+ / A++)
   html-Schriftgröße skaliert die rem-basierten Überschriften mit,
   body-Schriftgröße den Fließtext.
   ========================================================================== */

html[data-textsize="gross"] {
  font-size: 17.5px;
}

html[data-textsize="gross"] body {
  font-size: 21px;
}

html[data-textsize="sehr-gross"] {
  font-size: 19px;
}

html[data-textsize="sehr-gross"] body {
  font-size: 23px;
}

.text-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--spacing-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
}

.text-size-label {
  font-weight: 600;
  color: var(--color-text-light);
}

.text-size-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.text-size-btn:hover {
  border-color: var(--color-primary);
}

.text-size-btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   Druckansicht: Navigation, Buttons und Footer ausblenden,
   Inhalte sparsam und gut lesbar in Schwarz drucken.
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .skip-link,
  .btn,
  .btn-group,
  .text-size-control,
  form {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .hero,
  section.alt {
    background: none;
    border: none;
  }

  section {
    padding: 0.8rem 0;
  }

  h1, h2, h3 {
    color: #000;
  }

  a {
    color: #000;
  }

  .card,
  .faq-item,
  .contact-box,
  .price-note {
    border-color: #999;
    break-inside: avoid;
  }

  .hero-image,
  .content-image {
    max-width: 60%;
  }
}