/* =========================================================
   STYLE.CSS – das komplette Design der GVXL-Webseite
   ========================================================= */

/* ---------- 1. FARBEN & SCHRIFTEN (hier zentral ändern!) ----------
   Farbregel für die ganze Webseite:
   • Schwarz  = alle Überschriften und Fließtexte
   • Blau     = Links, Menü, Preise, Zahlen, Jahreszahlen, Häkchen und
                einzelne hervorgehobene Leitsätze
   • Orange   = Hauptknöpfe (Handlungsaufforderungen) und Hinweis-Rahmen
   • Weiß     = Texte auf blauem Hintergrund (Seitenkopf, Fußbereich)
   ------------------------------------------------------------------ */
:root {
    --farbe-haupt:   #1f4e79;   /* Hauptfarbe */
    --farbe-haupt-hell: #2e75b6;   /* etwas hellere Variante für Verläufe */
    --farbe-akzent:  #f29f05;   /* Akzent für Buttons, z. B. "Testen" */
    --farbe-text:    #222222;
    --farbe-grau:    #6b7280;   /* für Nebentexte wie Datumsangaben */
    --farbe-hintergrund-grau:    #f4f6f8;   /* heller Hintergrund */
    --farbe-weiss:   #ffffff;

    --schriftart: "Segoe UI", Arial, sans-serif;
    --max-inhaltsbreite: 1100px;       /* maximale Inhaltsbreite */
    --ecken-rundung: 10px;             /* Rundung der Ecken */
    --logo-hoehe: 115px;         /* Größe des Logos – hier einfach ändern */
}

/* ---------- 2. GRUNDEINSTELLUNGEN ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--schriftart);
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--farbe-haupt); }

h1, h2, h3, h4 { line-height: 1.2; margin-bottom: 0.6em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
p  { margin-bottom: 1em; }

.abstand-oben { margin-top: 2em; }   /* Abstand nach oben */

/* Zentrierter Inhaltsbereich */
.inhaltsbereich {
    max-width: var(--max-inhaltsbreite);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 3. KOPFBEREICH: Logo zentral (scrollt mit weg) ---------- */
.kopfbereich {
    background: var(--farbe-weiss);
    /* Der Kopf bleibt oben hängen, aber um die Höhe der Logo-Zeile
       nach oben verschoben – so verschwindet nur das Logo,
       das Menüband bleibt sichtbar. (30px = Abstand über + unter dem Logo) */
    position: sticky;
    top: calc(-1 * (var(--logo-hoehe) + 30px));
    z-index: 10;
}
.kopfbereich-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--logo-hoehe) + 30px);
}
.logo {
    height: var(--logo-hoehe);
    width: auto;
    max-width: 100%;          /* auf sehr schmalen Handys nie breiter als der Bildschirm */
    object-fit: contain;      /* … und dabei nicht verzerrt */
}

/* ---------- 4. MENÜBAND (bleibt beim Scrollen oben stehen) ---------- */
.menue {
    border-top: 1px solid #e5e7eb;
    background: var(--farbe-weiss);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 10;
}
.menue-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.menue a {
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--farbe-text);
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.menue a:hover { background: var(--farbe-hintergrund-grau); color: var(--farbe-haupt); }
.menue a.aktiv { color: var(--farbe-haupt); box-shadow: inset 0 -3px 0 var(--farbe-haupt); }

/* Menü-Knopf "☰ Menü" – nur auf schmalen Bildschirmen sichtbar */
.menue-button {
    display: none;
    width: 100%;
    padding: 12px 20px;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--farbe-haupt);
}

/* Firmenname links im Menüband – wird erst sichtbar, wenn das große Logo
   weggescrollt ist (das Skript setzt dann die Klasse "logo-weg" am Menüband) */
.menue a.menue-firmenname {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;                            /* nicht wie ein Menüpunkt aussehen */
    border: none;
    box-shadow: none;
    background: none;
    color: var(--farbe-haupt);
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    opacity: 0;                            /* zunächst unsichtbar … */
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.menue-firmenname img { height: 30px; width: auto; }
.menue.logo-weg a.menue-firmenname { opacity: 1; visibility: visible; }   /* … erscheint beim Scrollen */

/* Mittelgroße Bildschirme: Platz links für den Firmennamen freihalten,
   damit er die Menüpunkte nicht überdeckt */
@media (max-width: 1450px) and (min-width: 901px) {
    .menue-links { max-width: none; padding-left: 250px; }
}
/* Noch schmaler: nur das Symbol zeigen */
@media (max-width: 1200px) and (min-width: 901px) {
    .menue-firmenname span { display: none; }
    .menue-links { padding-left: 64px; padding-right: 10px; }
    .menue a { padding: 8px 10px; }
}

/* ---------- 5. EINSTIEGSBEREICH (Startseite) ---------- */
.startbereich {
    background: linear-gradient(135deg, var(--farbe-haupt), var(--farbe-haupt-hell));
    color: var(--farbe-weiss);
    padding: 100px 0;
    text-align: center;
}
.startbereich p { font-size: 1.2rem; max-width: 680px; margin: 0 auto 2em; opacity: 0.95; }
.startbereich-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Seitenkopf der Unterseiten (kleiner als auf der Startseite) */
.seitenkopf {
    background: linear-gradient(135deg, var(--farbe-haupt), var(--farbe-haupt-hell));
    color: var(--farbe-weiss);
    padding: 50px 0;
}
.seitenkopf p { margin: 0; opacity: 0.9; }

/* ---------- 6. BUTTONS ---------- */
.button {
    display: inline-block;
    background: var(--farbe-akzent);
    color: var(--farbe-weiss);
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--farbe-akzent);
    transition: transform 0.2s;
}
.button:hover { transform: translateY(-2px); }
.button-umrandet-weiss { background: transparent; border-color: var(--farbe-weiss); }

/* ---------- 7. ABSCHNITTE & KACHELN ---------- */
.abschnitt { padding: 70px 0; }
.abschnitt-grau { background: var(--farbe-hintergrund-grau); }
.abschnitt h2 { margin-bottom: 1em; }
.zentriert { text-align: center; }
/* .text-lesebreite { max-width: 760px; }          angenehme Zeilenlänge für Fließtext */
.text-klein { color: var(--farbe-grau); font-size: 0.9rem; }

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}
/* Variante: Kacheln untereinander (z. B. Seite "Schulungen") */
.kacheln-untereinander { grid-template-columns: 1fr; }
/* Variante: immer drei Kacheln pro Reihe (z. B. Sonderakte) */
.kacheln-drei-pro-reihe { grid-template-columns: repeat(3, 1fr); }

.kachel {
    background: var(--farbe-weiss);
    padding: 28px;
    border-radius: var(--ecken-rundung);
    border-top: 4px solid var(--farbe-haupt);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Einfache Listen (z. B. Downloads) */
.liste-mit-linien { list-style: none; }
.liste-mit-linien li { padding: 12px 0; border-bottom: 1px solid #e5e7eb; }

/* Schritte (Seite "Testen") */
.schritte { list-style: none; counter-reset: schritt; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.schritte li { counter-increment: schritt; position: relative; padding-left: 60px; }
.schritte li::before {
    content: counter(schritt);
    position: absolute; left: 0; top: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--farbe-haupt); color: var(--farbe-weiss);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
}

/* Tabelle (Seite "Schulungen") */
.tabelle { width: 100%; border-collapse: collapse; background: var(--farbe-weiss);
           border-radius: var(--ecken-rundung); overflow: hidden; }
.tabelle th, .tabelle td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.tabelle th { background: var(--farbe-haupt); color: var(--farbe-weiss); font-weight: 600; }

/* Zahlen & Fakten (Seite "Über uns") */
.zahlen-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 24px; text-align: center; }
.zahlen-reihe strong { display: block; font-size: 2.6rem; color: var(--farbe-haupt); }

/* Infobox mit wichtigem Hinweis (z. B. "Wer kann GVXL testen?") */
.hinweisbox {
    background: var(--farbe-weiss);
    border-left: 5px solid var(--farbe-akzent);
    border-radius: var(--ecken-rundung);
    padding: 26px 30px;
    margin-bottom: 30px;
    max-width: 800px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.ohne-abstand-unten { margin-bottom: 0; }

/* Schmale Leiste "Bereits Kunde?" (Seite "Testen") */
.leiste-hellblau { background: #e8eef5; }
.leiste-inhalt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.button-klein { padding: 10px 20px; font-size: 0.95rem; }

/* Formular-Bereich (Seiten "Testen" und "Anfrage"):
   Hinweis-Kachel und Formular sind gleich breit, damit die Kanten bündig sind */
.formular-bereich > .kachel { margin-bottom: 24px; padding: 32px 36px; }  /* gleicher Innenabstand wie das Formular */
.formular-bereich .formular { max-width: none; border-top: 4px solid var(--farbe-haupt); }

/* ---------- PREISE ---------- */
/* Einstieg: Text links, Hauptpreis-Karte rechts */
.preis-einstieg {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}
/* Mehrere Preiskarten nebeneinander */
.preiskarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.preiskarte {
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    border-top: 4px solid var(--farbe-haupt);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.preiskarte h3 { margin-bottom: 0.2em; }
.preiskarte > p { margin-bottom: 0.8em; }
.preiskarte .button { margin-top: auto; }            /* Knöpfe unten bündig */

/* Sonderpreis-Karten: Titel, Beschreibung, Preis, Hinweis und Knopf stehen
   über alle Karten hinweg auf gleicher Höhe ("Subgrid").
   Jede Karte hat dafür genau 5 Bausteine – in genau dieser Reihenfolge:
   h3 · p · .preis · p.text-klein · .button */
.preiskarten .preiskarte {
    display: grid;
    grid-row: span 5;                 /* jede Karte belegt 5 gemeinsame Zeilen */
    grid-template-rows: subgrid;      /* ... und übernimmt deren Höhen */
    row-gap: 0;
    align-items: start;
}
.preiskarten .preiskarte .preis { align-self: end; }             /* Preise unten bündig in ihrer Zeile */
.preiskarten .preiskarte .button {
    align-self: end;                  /* Knöpfe unten bündig */
    justify-self: stretch;            /* alle Knöpfe gleich breit */
    text-align: center;
    margin-top: 16px;
    padding-left: 12px;               /* weniger Rand links/rechts, damit der Text in eine Zeile passt */
    padding-right: 12px;
}

/* Hervorgehobene Hauptpreis-Karte */
.preiskarte-hervorgehoben {
    border-top: none;
    border: 2px solid var(--farbe-haupt);
    box-shadow: 0 10px 30px rgba(31, 78, 121, 0.15);
}
.preiskarte-etikett {
    background: var(--farbe-haupt);
    color: var(--farbe-weiss);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
/* Der große Preis */
.preis {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--farbe-haupt);
    line-height: 1.1;
    margin: 8px 0 4px;
}
.preis small { font-size: 1rem; font-weight: 400; color: var(--farbe-grau); }

/* Liste mit Häkchen */
.haekchen-liste { list-style: none; margin: 10px 0 22px; }
.haekchen-liste li { padding: 5px 0 5px 28px; position: relative; }
.haekchen-liste li::before {
    content: "✓";
    position: absolute; left: 0;
    color: var(--farbe-haupt);
    font-weight: 700;
}

/* Preistabellen: Preisspalte rechtsbündig und fett */
.preistabelle td:last-child,
.preistabelle th:last-child { text-align: right; white-space: nowrap; width: 1%; }
.preistabelle td:last-child { font-weight: 600; color: var(--farbe-haupt); }
.preistabelle .text-klein { display: block; }

/* ---------- ZWEI BILDER NEBENEINANDER MIT UNTERSCHRIFT (z. B. Schulungen) ---------- */
.bilder-nebeneinander {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;                             /* gleicher Abstand wie bei den Kacheln */
    margin-bottom: 28px;
}
.bilder-nebeneinander figure {
    margin: 0;
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 12px;                         /* Bild sitzt mit Rahmen in der Box */
}
.bilder-nebeneinander img {
    width: 100%;
    aspect-ratio: 16 / 9;                  /* beide Bilder gleich hoch */
    object-fit: contain;                   /* Bild wird nicht abgeschnitten */
    border-radius: 6px;
}
.bilder-nebeneinander figcaption {
    padding: 10px 4px 2px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}
.haekchen-liste-gross li { padding-top: 7px; padding-bottom: 7px; }

/* ---------- STARTSEITE ---------- */
/* Kleine Zeile über der großen Überschrift */
.startbereich-etikett {
    display: inline-block;
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgba(255,255,255,0.15);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 18px !important;
}
/* Vertrauenspunkte unter den Knöpfen */
.startbereich-vorteile {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 34px;
    font-size: 0.95rem;
    opacity: 0.95;
}
.startbereich-vorteile li::before { content: "✓ "; font-weight: 700; color: var(--farbe-akzent); }

/* Lange Wörter in Überschriften dürfen auf schmalen Bildschirmen umbrechen */
h1, h2 { overflow-wrap: break-word; text-wrap: balance; }   /* Zeilen gleichmäßig verteilen, keine Einzelwörter */

/* Einleitungstext mittig */
.einleitung { text-align: center; }
.einleitung h2 { margin-bottom: 0.8em; }
.einleitung p { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Blocksatz für Fließtexte auf der Startseite (mit Silbentrennung gegen große Lücken) */
.einleitung p:not(.einleitung-kernsatz),
.vorteil-kachel p {
    text-align: justify;
    hyphens: auto;
}
.einleitung-kernsatz {
    text-wrap: balance;               /* keine einzelnen Wörter in der letzten Zeile */
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--farbe-haupt);
    margin: 1.4em 0 0;
}

/* Vorteils-Kacheln mit Symbol */
.vorteil-kachel { text-align: center; }
.vorteil-kachel .symbol-kreis { margin-bottom: 16px; }

/* Dunkelblaue Zahlenleiste */
.zahlenleiste {
    background: var(--farbe-haupt);
    color: var(--farbe-weiss);
    padding: 50px 0 24px;
}
.zahlenleiste .zahlen-reihe strong { color: var(--farbe-weiss); }
.zahlenleiste .zahlen-reihe span { opacity: 0.85; }
.zahlenleiste-fussnote {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 26px auto 0;
}
.zahlenleiste-fussnote a { color: var(--farbe-weiss); }

/* Schnellzugriff für Bestandskunden */
.schnellzugriff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.schnellzugriff-kachel {
    display: block;
    position: relative;
    background: var(--farbe-hintergrund-grau);
    border-radius: var(--ecken-rundung);
    padding: 22px 44px 22px 22px;
    text-decoration: none;
    color: var(--farbe-text);
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
}
.schnellzugriff-kachel:hover { border-color: var(--farbe-haupt); transform: translateY(-2px); }
.schnellzugriff-kachel strong { display: block; font-size: 1.05rem; }
.schnellzugriff-kachel span { font-size: 0.92rem; color: var(--farbe-grau); }
.schnellzugriff-kachel::after {                    /* Pfeil rechts */
    content: "→";
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--farbe-haupt);
}

/* ---------- PRODUKTE / SUPPORT ---------- */
/* Sprungmarken-Leiste unter dem Seitenkopf */
.sprungmarken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.sprungmarken a { font-weight: 600; text-decoration: none; }
.sprungmarken a:hover { text-decoration: underline; }

/* Häkchen-Liste in zwei Spalten */
.haekchen-liste-zweispaltig { columns: 2; column-gap: 48px; }
.haekchen-liste-zweispaltig li { break-inside: avoid; }

/* Mehrere Knöpfe nebeneinander */
.button-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.button-reihe-mittig { justify-content: center; }

/* Kleines Etikett, z. B. "kostenlos" */
.etikett-gruen {
    display: inline-block;
    vertical-align: middle;
    background: #e3f2e6;
    color: #22703a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 6px;
}
/* Tastatur-Taste, z. B. F1 */
kbd {
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    background: var(--farbe-hintergrund-grau);
    border: 1px solid #c3ccd6;
    border-bottom-width: 3px;
    border-radius: 5px;
    padding: 1px 7px;
}

/* Fernwartungs-Leiste */
.fernwartung-leiste {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--farbe-hintergrund-grau);
    border-radius: var(--ecken-rundung);
    padding: 24px 28px;
    margin-top: 28px;
}
.fernwartung-text { flex: 1; min-width: 240px; }
.fernwartung-leiste h3 { margin-bottom: 0.2em; }
.fernwartung-leiste p { margin: 0; }

/* Infobox über die volle Breite: Text, Liste und Knopf nebeneinander */
.hinweisbox-breit {
    max-width: none;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;   /* Text | Liste | Knopf */
    align-items: center;
    gap: 20px 40px;
}
.hinweisbox-breit-text p { margin: 0; }
.hinweisbox-breit .haekchen-liste { margin: 0; }

/* Infobox in Blau statt Orange */
.hinweisbox-blau { border-left-color: var(--farbe-haupt); max-width: none; }

/* ---------- ÜBER UNS ---------- */
/* Zwei Spalten: Text links, Zeitleiste rechts */
.zweispaltig {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Zeitleiste mit Jahreszahlen */
.zeitleiste {
    list-style: none;
    border-left: 3px solid #d6e0ea;       /* senkrechte Linie */
    margin-left: 10px;
    padding-left: 0;
}
.zeitleiste li {
    position: relative;
    padding: 0 0 22px 30px;
}
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li::before {                  /* runder Punkt auf der Linie */
    content: "";
    position: absolute;
    left: -10px; top: 4px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--farbe-weiss);
    border: 4px solid var(--farbe-haupt);
}
.zeitleiste-jahr {
    display: block;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--farbe-haupt);
}
.zeitleiste p { margin: 2px 0 0; }

/* Hervorgehobener Leitsatz */
.leitsatz {
    margin: 40px auto 0;
    max-width: 800px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--farbe-haupt);
}
.leitsatz::before {                       /* kurze orange Linie über dem Leitsatz */
    content: "";
    display: block;
    width: 60px; height: 4px;
    margin: 0 auto 18px;
    border-radius: 2px;
    background: var(--farbe-akzent);
}

/* Ausbildungs-Bereich mit IHK-Siegel */
.ausbildung-bereich {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Text ganz links, Siegel ganz rechts */
    gap: 40px;
    flex-wrap: wrap;
}
.ausbildung-siegel {
    width: 180px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.ausbildung-bereich h2 { margin-bottom: 0.4em; }

/* ---------- RECHTSTEXTE (Datenschutz, Impressum) ---------- */
.rechtstext { max-width: 860px; }                  /* angenehme Zeilenlänge, mittig */
.rechtstext h2 {
    font-size: 1.35rem;
    margin-top: 2.2em;
    padding-top: 0.2em;
    scroll-margin-top: 70px;                        /* nicht unter dem Menüband verstecken */
}
.rechtstext h2.erste-ueberschrift { margin-top: 0; }             /* erste Überschrift ohne Abstand oben */
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.6em; margin-bottom: 0.4em; }
.rechtstext ul { margin: 0 0 1em 1.4em; }
.rechtstext li { margin-bottom: 0.4em; }
.adresse-kasten {
    font-style: normal;
    background: var(--farbe-hintergrund-grau);
    border-left: 4px solid var(--farbe-haupt);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 1em;
}
/* Inhaltsverzeichnis */
.inhaltsverzeichnis {
    background: var(--farbe-hintergrund-grau);
    border-radius: var(--ecken-rundung);
    padding: 22px 26px;
}
.inhaltsverzeichnis ol { margin: 10px 0 0 1.3em; }
.inhaltsverzeichnis li { padding: 3px 0; }

/* ---------- FORMULARE (z. B. Seite "Testen") ---------- */
.formular {
    background: var(--farbe-weiss);
    padding: 36px;
    border-radius: var(--ecken-rundung);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    max-width: 800px;
}
.formular-ueberschrift {
    font-size: 1.35rem;
    margin-bottom: 1.2em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid #e5e7eb;         /* feine Linie unter der Überschrift */
}
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.formular-zeile-plz { grid-template-columns: 140px 1fr; }   /* PLZ schmal, Ort breit */

.formular-feld { margin-bottom: 20px; }
.formular-feld label { display: block; font-weight: 600; margin-bottom: 6px; }

.formular-feld input,
.formular-feld select,
.formular-feld textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    border: 1px solid #c3ccd6;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.formular-feld textarea { resize: vertical; }

/* Feld, in das gerade geschrieben wird */
.formular-feld input:focus,
.formular-feld select:focus,
.formular-feld textarea:focus {
    outline: none;
    border-color: var(--farbe-haupt);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.15);
}

/* Häkchen Datenschutz */
.formular-feld-haekchen { display: flex; gap: 10px; align-items: flex-start; }
.formular-feld-haekchen input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; }
.formular-feld-haekchen label { font-weight: 400; margin: 0; }

.formular-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.formular button { cursor: pointer; font: inherit; font-weight: 600; }
.button-grau { background: transparent; color: var(--farbe-grau); border-color: #c3ccd6; }

/* Abschnitte, zu denen gesprungen wird, nicht unter dem Menüband verstecken */
section[id], .kachel[id] { scroll-margin-top: 80px; }

/* ---------- KONTAKTSEITE ---------- */
.kontakt-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.kontakt-kachel {
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 32px 28px;
    text-align: center;
}
.kontakt-kachel h2 { font-size: 1.3rem; margin-bottom: 0.6em; }
.kontakt-gross { font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.kontakt-gross:hover { text-decoration: underline; }
.kontakt-zeiten { color: var(--farbe-grau); margin-bottom: 0; }
.kontakt-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* Runder Kreis mit Symbol */
.symbol-kreis {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e8eef5;
    color: var(--farbe-haupt);          /* Farbe des Symbols */
    display: flex; align-items: center; justify-content: center;
}
.symbol-kreis svg {
    width: 34px; height: 34px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.symbol-kreis-klein { width: 60px; height: 60px; margin: 0; flex-shrink: 0; }
.symbol-kreis-klein svg { width: 28px; height: 28px; }

/* Heller Zweit-Knopf */
.button-umrandet { background: transparent; color: var(--farbe-haupt); border-color: var(--farbe-haupt); }
button.button { cursor: pointer; font: inherit; font-weight: 600; }

/* ---------- ZWEI AUSWAHL-BOXEN NEBENEINANDER (z. B. Downloads: Kunde / Noch kein Kunde) ---------- */
.auswahl-boxen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.auswahl-box {
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    border-top: 4px solid var(--farbe-haupt);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.auswahl-box form { width: 100%; }
.auswahl-box .formular-feld input {         /* gleiches Aussehen wie in den anderen Formularen */
    width: 100%; padding: 12px 14px; font: inherit;
    border: 1px solid #c3ccd6; border-radius: 6px;
}
.auswahl-box .formular-feld input:focus {
    outline: none; border-color: var(--farbe-haupt);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.15);
}
.auswahl-box > .button { margin-top: auto; }   /* Knopf unten bündig */

/* ---------- POPUP-FENSTER (z. B. "Nachricht übersenden") ---------- */
.fenster {
    width: min(720px, calc(100% - 32px));   /* max. 720px breit, auf dem Handy fast volle Breite */
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--ecken-rundung);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    color: var(--farbe-text);
}
.fenster::backdrop { background: rgba(15, 30, 50, 0.6); }   /* abgedunkelter Hintergrund */
.fenster-titelleiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--farbe-haupt);
    color: var(--farbe-weiss);
    padding: 18px 28px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.fenster-titelleiste h2 { margin: 0; font-size: 1.4rem; }
.fenster-titelleiste { cursor: grab; user-select: none; touch-action: none; }   /* Hand-Symbol: Fenster lässt sich verschieben */
.fenster-titelleiste.wird-gezogen { cursor: grabbing; }
.fenster-schliessen {
    background: none;
    border: none;
    color: var(--farbe-weiss);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
}
.fenster-schliessen:hover { background: rgba(255,255,255,0.15); }
.formular-im-fenster { box-shadow: none; border-radius: 0; max-width: none; padding: 28px; }

/* Support-Leiste */
.abschnitt-kompakt { padding: 40px 0; }
.support-leiste { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.support-leiste-text { flex: 1; min-width: 240px; }
.support-leiste h2 { font-size: 1.3rem; margin-bottom: 0.3em; }
.support-leiste p { margin: 0; }

/* ---------- 8. FUSSBEREICH ---------- */
.fussbereich { background: #16324f; color: #d6dee8; padding-top: 50px; }
.fussbereich a { color: #d6dee8; }
.fussbereich a:hover { color: var(--farbe-weiss); }
.fussbereich h4 { color: var(--farbe-weiss); }
.fussbereich-spalten {
    display: grid;
    grid-template-columns: repeat(4, auto);   /* jede Spalte so breit wie ihr Inhalt */
    justify-content: space-between;           /* gleiche Abstände dazwischen, bündig links und rechts */
    gap: 30px;
}
.fussbereich-unterzeile {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 0.9rem;
}
.fussbereich-unterzeile p { margin: 0; }

/* ---------- 9. HANDY-ANSICHT (unter 900px Breite) ---------- */
@media (max-width: 900px) {
    :root { --logo-hoehe: 80px; }                      /* Logo auf dem Handy – hier einfach ändern */
    .menue-button { display: block; }
    .menue-links { display: none; flex-direction: column; gap: 0; padding: 0; }
    .menue.offen .menue-links { display: flex; }
    .menue a { border-radius: 0; padding: 14px 20px; border-bottom: 1px solid #eee; }
    .menue a.aktiv { box-shadow: inset 4px 0 0 var(--farbe-haupt); }
    .menue a.menue-firmenname { left: auto; right: 20px; top: 26px; font-size: 1rem; gap: 8px; }  /* Firmenname rechts neben "☰ Menü" */
    .menue-firmenname img { height: 24px; }
    .startbereich { padding: 70px 0; }
    .tabelle { display: block; overflow-x: auto; }   /* Tabelle seitlich wischbar */
    .formular { padding: 22px; }
    .formular-zeile { grid-template-columns: 1fr; gap: 0; }        /* Felder untereinander */
    .formular-zeile-plz { grid-template-columns: 110px 1fr; gap: 14px; }
    .preis-einstieg { grid-template-columns: 1fr; gap: 24px; }    /* Preiskarte unter den Text */
    .zweispaltig { grid-template-columns: 1fr; gap: 30px; }       /* rechte Spalte unter den Text */
    .haekchen-liste-zweispaltig { columns: 1; }                               /* Liste einspaltig */
    .kacheln-drei-pro-reihe { grid-template-columns: 1fr; }                  /* Kacheln untereinander */
    .hinweisbox-breit { grid-template-columns: 1fr; }               /* Text, Liste, Knopf untereinander */
    .zahlenleiste .zahlen-reihe { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }  /* Zahlen 2 × 2 */
    .zahlenleiste .zahlen-reihe strong { font-size: 2rem; }
    .fussbereich-spalten { grid-template-columns: repeat(2, auto); justify-content: start; gap: 30px 60px; }  /* Fuß 2 × 2 */
    .hinweisbox-breit .button { justify-self: start; }
    .leitsatz { font-size: 1.15rem; }
    .ausbildung-bereich { gap: 24px; }
    .preistabelle { display: table; }                            /* Preistabelle nicht wischen, sondern umbrechen */
    .preistabelle td, .preistabelle th { padding: 12px 10px; }
}

/* ---------- SEHR SCHMALE HANDYS ---------- */
@media (max-width: 520px) {
    .fussbereich-spalten { grid-template-columns: 1fr; }   /* Fuß-Spalten untereinander */
}

/* ---------- ERFOLG-/FEHLER-SEITE (erfolg.html, fehler.html) ---------- */
.ergebnis-bereich { padding: 80px 0; }
.ergebnis-kasten {
    max-width: 680px;
    margin: 0 auto;
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    border-top: 5px solid;                    /* Farbe kommt von ergebnis-erfolg / ergebnis-fehler */
    padding: 48px 40px 40px;
    text-align: center;
}
.ergebnis-kasten h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.ergebnis-kernsatz { font-size: 1.15rem; font-weight: 600; }
.ergebnis-kasten .button-reihe { margin-top: 30px; }

/* Großer runder Kreis mit Symbol */
.ergebnis-symbol {
    width: 88px; height: 88px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ergebnis-symbol svg {
    width: 46px; height: 46px;
    fill: none; stroke: currentColor;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Erfolg = Grün */
.ergebnis-erfolg { border-top-color: #22703a; }
.ergebnis-erfolg .ergebnis-symbol { background: #e3f2e6; color: #22703a; }

/* Fehler = Rot */
.ergebnis-fehler { border-top-color: #c62828; }
.ergebnis-fehler .ergebnis-symbol { background: #fdecea; color: #c62828; }

/* Kasten mit Telefon/E-Mail auf der Fehler-Seite */
.ergebnis-kontakt {
    background: var(--farbe-hintergrund-grau);
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 24px;
}
.ergebnis-kontakt p { margin: 0 0 4px; }

/* ---------- BILDERGALERIE (bildergalerie.html) ---------- */
/* Einleitungstext */
.galerie-einleitung p { text-align: justify; hyphens: auto; }
.galerie-einleitung .button-reihe { margin-top: 26px; }

/* Themen-Leiste: läuft beim Scrollen direkt unter dem Menüband mit */
.galerie-leiste {
    position: sticky;
    top: 59px;                                /* Höhe des Menübands (wird per Skript genau angepasst) */
    z-index: 9;
    background: #e8eef5;
    border-bottom: 1px solid #d6e0ea;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.galerie-leiste-inhalt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.galerie-menue-button {
    font: inherit;
    font-weight: 600;
    background: var(--farbe-haupt);
    color: var(--farbe-weiss);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;                      /* Text nie umbrechen */
    flex-shrink: 0;
}
.galerie-menue-button:hover { background: var(--farbe-haupt-hell); }
.galerie-aktuell { flex: 1; min-width: 0; color: var(--farbe-grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* zu lange Namen enden mit … */
.galerie-aktuell strong { color: var(--farbe-text); }

/* Aufgeklappte Themenliste */
.galerie-themenliste {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 20px;
    width: min(620px, calc(100% - 40px));
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    padding: 10px;
    grid-template-columns: 1fr 1fr;           /* zwei Spalten */
    gap: 2px 10px;
}
.galerie-themenliste.offen { display: grid; }
.galerie-themenliste a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--farbe-text);
}
.galerie-themenliste a:hover { background: var(--farbe-hintergrund-grau); color: var(--farbe-haupt); }
.galerie-themenliste a.aktiv { background: #e8eef5; color: var(--farbe-haupt); font-weight: 600; }

/* Ein Thema = ein weißer Kasten mit Überschrift, Text und Bildern */
.galerie-thema { padding: 20px 0; scroll-margin-top: 130px; }   /* Platz für Menüband + Themen-Leiste */
.galerie-thema:first-of-type { padding-top: 50px; }
.galerie-thema-kasten {
    background: var(--farbe-weiss);
    border-radius: var(--ecken-rundung);
    border-top: 4px solid var(--farbe-haupt);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 30px 34px 22px;
}
.galerie-thema-kasten h2 { margin-bottom: 0.5em; }
.galerie-thema-kasten > p { max-width: 900px; }

/* Bilder eines Themas: jedes Bild über die ganze Breite, mehrere untereinander */
.galerie-bilder {
    display: grid;
    gap: 24px;
    margin-top: 20px;
}
.galerie-bilder:empty { display: none; }
.galerie-bild { margin: 0; }
.galerie-bild img {
    width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: zoom-in;                          /* Lupe: Bild lässt sich vergrößern */
    transition: box-shadow 0.2s;
}
.galerie-bild img:hover,
.galerie-bild img:focus-visible { box-shadow: 0 6px 20px rgba(0,0,0,0.15); outline: none; }
.galerie-bild figcaption {
    font-size: 0.9rem;
    color: var(--farbe-grau);
    text-align: center;
    margin-top: 8px;
}

/* Link "Zur Themenübersicht" unten rechts */
.nach-oben {
    display: block;
    text-align: right;
    margin-top: 16px;
    font-size: 0.9rem;
    text-decoration: none;
}
.nach-oben:hover { text-decoration: underline; }

.galerie-abschluss { padding-top: 50px; }

/* ---------- GROSSE BILDANSICHT (öffnet sich beim Klick auf ein Galerie-Bild) ---------- */
.bild-gross {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    margin: 0; padding: 0;
    border: none;
    background: transparent;
}
.bild-gross::backdrop { background: rgba(10, 20, 35, 0.92); }
.bild-gross figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 70px;
}
.bild-gross img {
    width: min(1100px, 100%);                 /* kleine Bilder werden auf lesbare Größe gezogen */
    height: auto;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 6px;
    background: var(--farbe-weiss);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.bild-gross figcaption { color: var(--farbe-weiss); margin-top: 14px; text-align: center; }
.bild-gross-zaehler { opacity: 0.7; margin-left: 8px; }

/* Runde Buttons: Schließen, zurück, weiter */
.bild-gross button {
    position: fixed;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: var(--farbe-weiss);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.bild-gross button:hover { background: rgba(255,255,255,0.3); }
.bild-gross-schliessen { top: 16px; right: 16px; }
.bild-gross-zurueck   { left: 12px;  top: 50%; transform: translateY(-50%); }
.bild-gross-weiter    { right: 12px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .galerie-thema-kasten { padding: 22px 20px 16px; }
    .galerie-themenliste { grid-template-columns: 1fr; left: 10px; width: calc(100% - 20px); }   /* Liste einspaltig */
    .bild-gross figure { padding: 70px 10px; }
    .bild-gross-zurueck, .bild-gross-weiter { top: auto; bottom: 16px; transform: none; }
}