/* ==========================================================================
   Elektriker Altfried Reick, Siegburg – Stylesheet

   Inhalt
     1. Schrift
     2. Farben und Maße (Variablen)
     3. Grundlagen
     4. Hilfsklassen
     5. Knöpfe und Links
     6. Kopfzeile und Navigation
     7. Einstieg der Startseite und Schnellkontakt
     8. Abschnitte, Überschriften, Raster
     9. Leistungsübersicht (Fotokacheln und Leistungsliste)
    10. Bild und Text, Meldungen, Dokumente
    11. Seitenkopf der Unterseiten und Brotkrümel
    12. Fließtext, Seitenleiste, Listen, Aufklapper, Ablauf
    13. Galerie und Großansicht
    14. Stellenangebote, Rechtstexte
    15. Kontakt, Formular, Karte
    16. Aufruf und Seitenfuß
    17. Fehlerseite
    18. Weniger Bewegung, Druck

   Schreibweise: Klassennamen sind deutsch und beschreiben den Inhalt
   (.kachel, .anrufkarte, .ablauf). Gestaltet wird zuerst für das Handy,
   größere Bildschirme kommen über @media (min-width: …) dazu.

   Gestaltung: hell und luftig. Viel Weiß, ein sehr helles kühles Grau für
   ruhige Abschnitte, Tinte für Schrift. Das Signalgelb aus dem Logo ist
   Akzent (Knöpfe, Markierungen, weicher Gelbton für Hinweisflächen), das
   Rot des Blitzpfeils kommt nur im Logo vor. Große Rundungen, keine
   harten Schatten, dunkel ist nur der Seitenfuß.
   ========================================================================== */


/* 1. Schrift ============================================================== */
/* Beide Schriften (OFL-Lizenz) liegen auf dem eigenen Server (kein Abruf bei
   Google). Sora (variabel 400–800) für Überschriften, Figtree (400–700)
   für den Text. */

@font-face {
    font-family: "Sora";
    src: url("/fonts/sora.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/fonts/figtree.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


/* 2. Farben und Maße ====================================================== */

:root {
    --tinte: #16191d;
    --text: #1d2126;
    --text-leise: #5b6169;
    --linie: #e3e6ea;
    --linie-kraeftig: #cfd4da;
    --flaeche: #f4f5f7;          /* ruhige Abschnitte */
    --weiss: #ffffff;
    --gelb: #f6c800;
    --gelb-hover: #ffd633;
    --gelb-weich: #fff6cf;       /* Hinweisflächen */
    --rot: #d7001a;              /* nur Logo und Fehlermeldungen */
    --gruen: #1d7a45;

    --schrift-titel: "Sora", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --schrift-text: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --breite: 76rem;
    --rand: 1rem;                /* seitlicher Abstand auf dem Handy */
    --kopfhoehe: 4.5rem;
    --radius-klein: 12px;
    --radius: 20px;
    --radius-gross: 28px;
    --abstand-abschnitt: clamp(4rem, 2.5rem + 5vw, 7.5rem);
}

@media (min-width: 48rem) {
    :root {
        --rand: 2rem;
        --kopfhoehe: 5rem;
    }
}


/* 3. Grundlagen =========================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--kopfhoehe) + 1.5rem);
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--weiss);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Bei offenem Handy-Menü scrollt die Seite dahinter nicht mit */
body.menue-offen {
    overflow: hidden;
}

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

h1,
h2,
h3 {
    margin: 0 0 0.6em;
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinte);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1.1em;
}

a {
    color: inherit;
    text-decoration-color: rgb(22 25 29 / 30%);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.15s;
}

a:hover {
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
}

address {
    font-style: normal;
}

strong {
    font-weight: 650;
}

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 3px;
    border-radius: 4px;
}


/* 4. Hilfsklassen ========================================================= */

.breite {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.breite-schmal {
    max-width: calc(46rem + 2 * var(--rand));
}

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sprunglink {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    font-weight: 700;
    color: var(--tinte);
    background: var(--gelb);
    border-radius: var(--radius-klein);
}

.sprunglink:focus {
    top: 1rem;
}

.symbol {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* 5. Knöpfe und Links ===================================================== */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 3.1rem;
    padding: 0.75em 1.5em;
    font-family: var(--schrift-titel);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.knopf .symbol {
    width: 1.15em;
    height: 1.15em;
    stroke-width: 2;
}

.knopf-gelb {
    color: var(--tinte);
    background: var(--gelb);
}

.knopf-gelb:hover {
    background: var(--gelb-hover);
}

.knopf-dunkel {
    color: var(--weiss);
    background: var(--tinte);
}

.knopf-dunkel:hover {
    background: #000;
}

.knopf-hell {
    color: var(--tinte);
    background: var(--weiss);
    border-color: var(--linie-kraeftig);
}

.knopf-hell:hover {
    border-color: var(--tinte);
}

.knopf-breit {
    width: 100%;
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hervorgehobener Textlink („Mehr über …“, „Weitere Informationen …“) */
.textlink {
    font-family: var(--schrift-titel);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--tinte);
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

.textlink:hover {
    text-decoration-color: var(--tinte);
}

.linkreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}


/* 6. Kopfzeile und Navigation ============================================= */

.kopf {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(255 255 255 / 94%);
    border-bottom: 1px solid var(--linie);
}

@supports (backdrop-filter: blur(1px)) {
    .kopf {
        background: rgb(255 255 255 / 82%);
        backdrop-filter: saturate(1.4) blur(14px);
    }
}

.kopf-innen {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--kopfhoehe);
}

/* Logo + Schriftzug */
.marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    text-decoration: none;
}

.marke-zeichen {
    width: 2.6rem;
    height: 2.6rem;
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.marke-name {
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tinte);
    white-space: nowrap;
}

.marke-unten {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-leise);
    white-space: nowrap;
}

.kopf-aktionen {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/* Anruf-Knopf: auf dem Handy nur das Symbol, ab Tablet mit Nummer */
.knopf-anruf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.7rem;
    font-family: var(--schrift-titel);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinte);
    text-decoration: none;
    white-space: nowrap;
    background: var(--gelb);
    border-radius: 999px;
    transition: background-color 0.15s;
}

.knopf-anruf:hover {
    background: var(--gelb-hover);
}

.knopf-anruf .symbol {
    stroke-width: 2;
}

.kopf-nummer {
    display: none;
}

@media (min-width: 40rem) {
    .kopf-nummer {
        display: inline;
    }

    .knopf-anruf {
        padding: 0 1.15rem;
    }
}

/* Menü-Knopf (zwei Striche, wird beim Öffnen zum Kreuz) */
.menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--tinte);
    background: none;
    border: 0;
    cursor: pointer;
}

.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.4rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, background-color 0.25s;
}

.menue-knopf-striche {
    position: relative;
}

.menue-knopf-striche::before,
.menue-knopf-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-knopf-striche::before { top: -6px; }
.menue-knopf-striche::after { top: 6px; }

.menue-knopf[aria-expanded="true"] .menue-knopf-striche {
    background: transparent;
}

.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before {
    transform: translateY(6px) rotate(45deg);
}

.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Handy: Menü als Fläche unter der Kopfzeile --- */
.hauptmenue {
    display: none;
}

/* backdrop-filter macht die Kopfzeile zum Bezugsrahmen für fixed-Kinder;
   bei offenem Menü deshalb abschalten, sonst ist das Menü nur so hoch wie die Kopfzeile */
body.menue-offen .kopf {
    background: var(--weiss);
    backdrop-filter: none;
}

.js .hauptmenue.offen {
    position: fixed;
    inset: var(--kopfhoehe) 0 0;
    display: block;
    overflow-y: auto;
    padding: 1rem var(--rand) 2rem;
    background: var(--weiss);
    border-top: 1px solid var(--linie);
}

/* Ohne JavaScript steht das Menü einfach unter der Kopfzeile */
html:not(.js) .hauptmenue {
    display: block;
    width: 100%;
}

html:not(.js) .kopf-innen {
    flex-wrap: wrap;
}

html:not(.js) .menue-knopf {
    display: none;
}

.menue-liste,
.untermenue ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menue-punkt {
    position: relative;
    border-bottom: 1px solid var(--linie);
}

.menue-punkt > a {
    display: block;
    padding: 0.9rem 3rem 0.9rem 0;
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
}

.menue-punkt > a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
}

/* Knopf zum Aufklappen des Untermenüs (nur Handy) */
.untermenue-knopf {
    position: absolute;
    top: 0.45rem;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: var(--flaeche);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.untermenue-knopf span {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    margin: -0.2rem auto 0;
    border-right: 2px solid var(--tinte);
    border-bottom: 2px solid var(--tinte);
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.menue-punkt.offen .untermenue-knopf span {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.untermenue {
    display: none;
    padding-bottom: 0.75rem;
}

.menue-punkt.offen .untermenue,
html:not(.js) .untermenue {
    display: block;
}

.untermenue-titel {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-leise);
}

.untermenue a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.5rem;
    text-decoration: none;
    border-radius: var(--radius-klein);
}

.untermenue a .symbol {
    color: var(--text-leise);
}

.untermenue a:hover {
    background: var(--flaeche);
}

.menue-kontakt {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--gelb-weich);
    border-radius: var(--radius);
}

.menue-kontakt p {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
    font-weight: 600;
}

/* --- Desktop: waagerechtes Menü mit Ausklapp-Fläche --- */
@media (min-width: 68rem) {
    .menue-knopf,
    .untermenue-knopf,
    .menue-kontakt {
        display: none;
    }

    .hauptmenue,
    .js .hauptmenue.offen {
        position: static;
        display: block;
        overflow: visible;
        padding: 0;
        margin-left: auto;
        background: none;
        border: 0;
    }

    .menue-liste {
        display: flex;
        gap: 0.15rem;
    }

    .menue-punkt {
        border: 0;
    }

    .menue-punkt > a {
        padding: 0.5rem 0.9rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text);
        border-radius: 999px;
    }

    .menue-punkt > a:hover {
        background: var(--flaeche);
    }

    .menue-punkt > a[aria-current="page"] {
        text-decoration: none;
        background: var(--flaeche);
    }

    /* Untermenü „Leistungen“: öffnet beim Überfahren oder per Tastatur */
    .untermenue,
    html:not(.js) .untermenue {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: -0.5rem;
        display: grid;
        grid-template-columns: repeat(2, 15.5rem);
        gap: 1.5rem;
        padding: 1.25rem;
        background: var(--weiss);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        box-shadow: 0 24px 48px -24px rgb(22 25 29 / 28%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    }

    /* Unsichtbare Brücke, damit das Untermenü beim Hinüberfahren offen bleibt */
    .untermenue::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 0.8rem;
    }

    .hat-untermenue:hover .untermenue,
    .hat-untermenue:focus-within .untermenue {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .untermenue-titel {
        margin: 0 0 0.4rem 0.5rem;
    }

    .kopf-aktionen {
        margin-left: 0.75rem;
    }
}


/* 7. Einstieg der Startseite und Schnellkontakt ============================ */

.einstieg {
    padding-block: 0;
}

/* Titelfoto: abgerundete Karte in Fotogröße (das Foto hat nur 960 px).
   Handy: flacher Ausschnitt, rechter Rand komplett; Überschrift darunter. */
.einstieg {
    padding-top: 0.75rem;
}

.einstieg-buehne {
    position: relative;
    width: calc(min(var(--breite), 100%) - 2 * var(--rand));
    margin-inline: auto;
}

.einstieg-foto {
    position: relative;
}

.einstieg-buehne img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: right center;
    border-radius: 18px;
}

.einstieg-ueber {
    padding: 1.2rem 0 0;
}

.einstieg h1 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.einstieg-unten {
    padding-top: 0.9rem;
}

.einstieg-unterzeile {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-leise);
}

.einstieg-unterzeile strong {
    color: var(--tinte);
}

.nur-desktop {
    display: none;
}

/* Beide Knöpfe nebeneinander, auch auf schmalen Handys */
.einstieg .knopfreihe {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.einstieg .knopf {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.2rem;
    padding-inline: 0.5em;
    font-size: 0.9rem;
}

@media (min-width: 60rem) {
    .einstieg {
        padding-top: 2.25rem;
    }

    /* Überschrift links, Foto rechts; Überschrift füllt die Fotohöhe oben bis unten */
    .einstieg-buehne {
        display: grid;
        grid-template-columns: 0.9fr 1.3fr;
        gap: 3rem;
        align-items: stretch;
    }

    .einstieg-foto {
        grid-column: 2;
        grid-row: 1;
    }

    .einstieg-buehne img {
        aspect-ratio: auto;
        height: 23.4rem;
        object-position: right center;
        border-radius: var(--radius-gross);
    }

    .einstieg-ueber {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: none;
    }

    .einstieg h1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        font-size: min(2.8rem, 3.2vw);
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

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

    /* Breite, flache Leiste unter dem Foto */
    .einstieg-unten {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
        padding: 2rem var(--rand) 0;
    }

    .einstieg-unterzeile {
        max-width: 42rem;
        margin: 0;
        font-size: 1.05rem;
    }

    .einstieg .knopfreihe {
        flex: none;
    }

    .einstieg .knopf {
        flex: none;
        padding-inline: 1.5em;
        font-size: 1rem;
    }

    .nur-desktop {
        display: inline;
    }

    .nur-handy {
        display: none;
    }
}

/* Schnellkontakt unter dem Foto */
.schnellkontakt {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 2rem 0 0;
    list-style: none;
}

.schnellkontakt li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.schnellkontakt .symbol {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.7rem;
    color: var(--tinte);
    background: var(--gelb-weich);
    border-radius: 50%;
}

.schnellkontakt li > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.schnellkontakt-titel {
    font-size: 0.85rem;
    color: var(--text-leise);
}

.schnellkontakt a {
    font-weight: 600;
    text-decoration: none;
}

.schnellkontakt a:hover {
    text-decoration: underline;
    text-decoration-color: var(--gelb);
}

@media (min-width: 40rem) {
    .schnellkontakt {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68rem) {
    .schnellkontakt {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        padding-top: 2.25rem;
    }
}


/* 8. Abschnitte, Überschriften, Raster ===================================== */

.abschnitt {
    padding-block: var(--abstand-abschnitt);
}

.abschnitt-hell,
.abschnitt-grau {
    background: var(--flaeche);
}

.abschnitt-kopf {
    max-width: 42rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.abschnitt-kopf p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-leise);
}

.abschnitt-kopf-mit-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    max-width: none;
}

.abschnitt-kopf-mit-link h2 {
    margin: 0;
}

.abschnitt-titel {
    margin-bottom: 1.5rem;
}

.zweispaltig {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 56rem) {
    .zweispaltig {
        grid-template-columns: 1.4fr 1fr;
        gap: 5rem;
        align-items: center;
    }
}


/* 9. Leistungsübersicht =================================================== */
/* Kundengruppen als große Fotokacheln, Spezialleistungen als ruhige Liste
   mit kleinem Foto. Beide auf hellgrauem Grund, Flächen weiß. */

.gruppen-titel {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-leise);
}

.kacheln + .gruppen-titel {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.kacheln,
.leistungsliste {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kachel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    background: var(--weiss);
    border-radius: var(--radius);
}

.kachel-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kachel-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.35rem 1.5rem;
}

.kachel-titel {
    font-family: var(--schrift-titel);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tinte);
}

.kachel-unterzeile {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-leise);
}

.kachel:hover .kachel-foto {
    transform: scale(1.03);
}

.kachel:hover .kachel-titel {
    text-decoration: underline;
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

/* Foto im Bildausschnitt halten, wenn es beim Überfahren leicht wächst */
.kachel {
    isolation: isolate;
}

.leistungszeile {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 100%;
    padding: 0.9rem 1.1rem 0.9rem 0.9rem;
    text-decoration: none;
    background: var(--weiss);
    border-radius: var(--radius);
}

.leistungszeile-foto {
    width: 5rem;
    height: 5rem;
    flex: none;
    object-fit: cover;
    border-radius: 14px;
}

.leistungszeile-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.leistungszeile-titel {
    font-family: var(--schrift-titel);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--tinte);
}

.leistungszeile-unterzeile {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-leise);
}

.leistungszeile-pfeil {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.55rem;
    background: var(--flaeche);
    border-radius: 50%;
    stroke-width: 2;
    transition: background-color 0.15s;
}

.leistungszeile:hover .leistungszeile-pfeil {
    background: var(--gelb);
}

.leistungszeile:hover .leistungszeile-titel {
    text-decoration: underline;
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

@media (min-width: 40rem) {
    .kacheln {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .kachel-foto {
        aspect-ratio: 4 / 3;
    }

    .leistungszeile-foto {
        width: 6rem;
        height: 6rem;
    }
}

@media (min-width: 56rem) {
    .leistungsliste {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 68rem) {
    .kacheln {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* 10. Bild und Text, Meldungen, Dokumente ================================= */

/* Foto neben Text; die Originalfotos sind klein, deshalb höchstens in natürlicher Größe */
.bild-text {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

/* Einheitliches Hochformat, damit die unterschiedlich kleinen Fotos ruhig wirken */
.bild-text-foto {
    width: 100%;
    max-width: 18rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-gross);
}

@media (min-width: 52rem) {
    .bild-text {
        grid-template-columns: minmax(0, 20rem) 1fr;
        gap: clamp(3rem, 1rem + 5vw, 6rem);
    }

    .bild-text-umgekehrt {
        grid-template-columns: 1fr minmax(0, 20rem);
    }

    .bild-text-umgekehrt .bild-text-foto {
        order: 2;
        justify-self: end;
    }
}

.fliesstext {
    max-width: 42rem;
}

/* Meldungen der Startseite: drei kurze Beiträge nebeneinander */
.meldungsreihe {
    display: grid;
    gap: 2.75rem;
}

.meldung-kurz img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
}

.meldung-kurz h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.meldung-kurz h3 a {
    text-decoration: none;
}

.meldung-kurz h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--gelb);
    text-decoration-thickness: 2px;
}

.meldung-kurz p {
    margin: 0;
    color: var(--text-leise);
}

@media (min-width: 52rem) {
    .meldungsreihe {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Dokument zum Herunterladen (Freistellungsbescheinigung, AGB) */
.dokumentkarte {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 1.35rem;
    align-items: flex-start;
    padding: 1.5rem;
    text-decoration: none;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    transition: border-color 0.15s;
}

.dokumentkarte:hover {
    border-color: var(--linie-kraeftig);
}

.dokumentkarte img {
    width: 5.5rem;
    flex: none;
    border: 1px solid var(--linie);
    border-radius: 6px;
}

.dokumentkarte-text {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-leise);
}

.dokumentkarte-titel {
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tinte);
}

.dokumentkarte-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    font-family: var(--schrift-titel);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinte);
}

.dokumentkarte-link .symbol {
    width: 2rem;
    height: 2rem;
    padding: 0.45rem;
    background: var(--gelb);
    border-radius: 50%;
    stroke-width: 2;
}

.dokumentkarte-schmal img {
    width: 4rem;
}

.downloads-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 52rem) {
    .downloads-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 11. Seitenkopf der Unterseiten und Brotkrümel ============================ */

.seitenkopf {
    padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.seitenkopf h1 {
    max-width: 22ch;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
}

.seitenkopf-unterzeile {
    max-width: 38rem;
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-leise);
}

.seitenkopf-raster {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.seitenkopf-foto {
    width: 100%;
    aspect-ratio: 960 / 354;
    object-fit: cover;
    border-radius: var(--radius-gross);
}

/* Linke 25 % wegschneiden (dort ist nur leere Hauswand): 720 von 960 px bleiben */
.seitenkopf-foto-beschnitten {
    aspect-ratio: 720 / 354;
    object-position: right center;
}

@media (min-width: 60rem) {
    .seitenkopf-raster {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    /* Bild unter der Überschrift statt daneben (Foto hat nur 960 px) */
    .seitenkopf-bild-unten .seitenkopf-raster {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .seitenkopf-bild-unten .seitenkopf-foto {
        max-width: 960px;
    }

    .seitenkopf-bild-unten .seitenkopf-foto-beschnitten {
        max-width: 720px;
    }
}

.brotkrumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-leise);
}

.brotkrumen a {
    text-decoration: none;
}

.brotkrumen a:hover {
    color: var(--tinte);
    text-decoration: underline;
}


/* 12. Fließtext, Seitenleiste, Listen, Aufklapper, Ablauf ================== */

.artikel-raster {
    display: grid;
    gap: 3.5rem;
}

@media (min-width: 64rem) {
    .artikel-raster {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: clamp(3rem, 1rem + 5vw, 6rem);
        align-items: start;
    }

    .seitenleiste {
        position: sticky;
        top: calc(var(--kopfhoehe) + 2rem);
    }
}

/* Auf Leistungsseiten beginnt der Text direkt unter dem Seitenkopf */
.seitenkopf + .abschnitt {
    padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.fliesstext h2 {
    margin-top: 2.5em;
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
}

.fliesstext > :first-child {
    margin-top: 0;
}

.einleitung {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--tinte);
}

/* Kleines Foto rechts neben dem Text (auf dem Handy darüber) */
.bild-rechts {
    width: auto;
    max-width: min(100%, 18rem);
    margin: 0.4rem 0 1.5rem;
    border-radius: var(--radius);
}

.bild-schmal {
    max-width: min(100%, 14rem);
}

@media (min-width: 40rem) {
    .bild-rechts {
        float: right;
        max-width: 40%;
        margin: 0.4rem 0 1.25rem 2rem;
    }

    .bild-schmal {
        max-width: 30%;
    }
}

.bildreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    clear: both;
    margin-block: 2.5rem;
}

.bildreihe img {
    width: auto;
    max-height: 18rem;
    border-radius: var(--radius);
}

.foto-rahmen {
    border-radius: var(--radius);
}

/* Listen mit Haken */
.hakenliste {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.hakenliste li {
    position: relative;
    margin-bottom: 0.55rem;
    padding-left: 2.1rem;
}

.hakenliste li::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--gelb-weich);
    border-radius: 50%;
}

.hakenliste li::after {
    content: "";
    position: absolute;
    top: 0.47em;
    left: 0.5rem;
    width: 0.32rem;
    height: 0.6rem;
    border-right: 2px solid var(--tinte);
    border-bottom: 2px solid var(--tinte);
    transform: rotate(45deg);
}

@media (min-width: 40rem) {
    .hakenliste-zweispaltig {
        columns: 2;
        column-gap: 2.5rem;
    }

    .hakenliste-zweispaltig li {
        break-inside: avoid;
    }
}

/* Fragen (Wallbox) */
.fragenliste {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.fragenliste li {
    position: relative;
    padding: 0.9rem 1.1rem 0.9rem 3.25rem;
    background: var(--flaeche);
    border-radius: var(--radius-klein);
}

.fragenliste li::before {
    content: "?";
    position: absolute;
    top: 0.95rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-family: var(--schrift-titel);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tinte);
    background: var(--gelb);
    border-radius: 50%;
}

/* Aufklappbare Abschnitte (<details>) */
.aufklapper-liste {
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--linie);
}

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

.aufklapper summary {
    position: relative;
    padding: 1.15rem 3.25rem 1.15rem 0;
    font-family: var(--schrift-titel);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinte);
    list-style: none;
    cursor: pointer;
}

.aufklapper summary::-webkit-details-marker {
    display: none;
}

/* Rundes Plus-Zeichen, wird beim Öffnen zum Minus */
.aufklapper summary::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--flaeche);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s;
}

.aufklapper summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.6rem;
    width: 0.9rem;
    height: 0.9rem;
    background:
        linear-gradient(var(--tinte), var(--tinte)) center / 100% 2px no-repeat,
        linear-gradient(var(--tinte), var(--tinte)) center / 2px 100% no-repeat;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

.aufklapper[open] summary::before {
    background: var(--gelb);
}

.aufklapper[open] summary::after {
    background: linear-gradient(var(--tinte), var(--tinte)) center / 100% 2px no-repeat;
}

.aufklapper summary:hover::before {
    background: var(--gelb-weich);
}

.aufklapper[open] summary:hover::before {
    background: var(--gelb);
}

.aufklapper-inhalt {
    padding-bottom: 1rem;
    color: var(--text);
}

/* Ablauf in Schritten (Baustrom) – echte Reihenfolge, deshalb nummeriert */
.ablauf {
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.ablauf li {
    position: relative;
    padding: 0 0 1.75rem 3.75rem;
    counter-increment: schritt;
}

.ablauf li::before {
    content: counter(schritt);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--schrift-titel);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinte);
    background: var(--gelb);
    border-radius: 50%;
}

.ablauf li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 0.5rem;
    left: calc(1.25rem - 1px);
    width: 2px;
    background: var(--linie);
}

.ablauf h3 {
    margin-bottom: 0.3rem;
    padding-top: 0.4rem;
    font-size: 1.1rem;
}

.ablauf p {
    margin: 0;
}

/* Kästen */
.infokasten {
    clear: both;
    margin-block: 2.5rem;
    padding: 1.75rem;
    background: var(--gelb-weich);
    border-radius: var(--radius);
}

.infokasten h2 {
    margin-top: 0;
    font-size: 1.3rem;
}

.referenzliste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.referenzliste li {
    padding: 0.35rem 0.95rem;
    font-weight: 600;
    background: var(--weiss);
    border-radius: 999px;
}

/* „Unsere Themen“: Schlagwörter der bisherigen Website, bewusst leise */
.themenwolke {
    clear: both;
    margin-top: 3rem;
    padding-top: 1.5rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-leise);
    border-top: 1px solid var(--linie);
}

.themenwolke h2 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

/* Seitenleiste: Anrufkarte und Leistungsliste */
.seitenleiste {
    display: grid;
    gap: 2rem;
}

.anrufkarte {
    display: grid;
    gap: 0.75rem;
    padding: 1.75rem;
    background: var(--gelb-weich);
    border-radius: var(--radius);
}

.anrufkarte h2 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

.anrufkarte-festnetz {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    text-align: center;
}

.themenliste h2 {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--text-leise);
}

.themenliste ul {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.themenliste a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    border-radius: var(--radius-klein);
}

.themenliste a .symbol {
    color: var(--text-leise);
}

.themenliste a:hover {
    background: var(--flaeche);
}

.themenliste a[aria-current="page"] {
    font-weight: 600;
    background: var(--flaeche);
}

.themenliste a[aria-current="page"] .symbol {
    color: var(--tinte);
}

/* Beiträge (Aktuelles) */
.beitrag {
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--linie);
}

.beitrag h2 {
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
}

.beitrag-mit-bild {
    display: grid;
    gap: 1.5rem;
}

.beitrag-mit-bild img {
    width: 9rem;
    border-radius: var(--radius);
}

@media (min-width: 40rem) {
    .beitrag-mit-bild {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 2rem;
    }
}


/* 13. Galerie und Großansicht ============================================= */

.galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    clear: both;
    margin-block: 1.5rem 2.5rem;
}

.galerie a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-klein);
}

.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.galerie a:hover img {
    transform: scale(1.04);
}

@media (min-width: 40rem) {
    .galerie {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.grossansicht {
    max-width: min(92vw, 70rem);
    max-height: 92vh;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.grossansicht::backdrop {
    background: rgb(22 25 29 / 86%);
}

.grossansicht img {
    max-width: 100%;
    max-height: 80vh;
    margin-inline: auto;
    border-radius: var(--radius-klein);
}

.grossansicht-text {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--weiss);
}

.grossansicht-schliessen,
.grossansicht-blaettern {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--tinte);
    background: var(--weiss);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.grossansicht-schliessen {
    top: -1rem;
    right: -1rem;
}

.grossansicht-blaettern {
    top: 40%;
}

.grossansicht-zurueck { left: -1rem; }
.grossansicht-weiter { right: -1rem; }

.grossansicht-blaettern[hidden] {
    display: none;
}


/* 14. Stellenangebote, Rechtstexte ======================================== */

.stellen-raster {
    display: grid;
    gap: 1.5rem;
}

.stelle {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--flaeche);
    border-radius: var(--radius-gross);
}

.stelle h2 {
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.8rem);
}

.stelle h3 {
    margin-top: 1.75rem;
    font-size: 1.05rem;
}

.eckdaten {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.eckdaten div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.eckdaten dt {
    font-weight: 650;
}

.eckdaten dt::after {
    content: ":";
}

.eckdaten dd {
    margin: 0;
}

.bewerbung {
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    background: var(--gelb-weich);
    border-radius: var(--radius-gross);
}

.bewerbung .knopfreihe {
    margin-block: 1.5rem;
}

.bewerbung-adresse {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-leise);
}

@media (min-width: 64rem) {
    .stellen-raster {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .bewerbung {
        grid-column: 1 / -1;
    }
}

.rechtstext {
    font-size: 1rem;
}

.rechtstext h2 {
    margin-top: 2.5rem;
    font-size: 1.3rem;
}

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

.rechtstext li {
    margin-bottom: 0.6rem;
}

.inhaltsverzeichnis {
    margin-bottom: 3rem;
    padding: 1.5rem 1.75rem;
    background: var(--flaeche);
    border-radius: var(--radius);
}

.inhaltsverzeichnis h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.inhaltsverzeichnis ol {
    margin: 0;
    list-style: upper-roman;
}

.inhaltsverzeichnis li {
    margin-bottom: 0.25rem;
}


/* 15. Kontakt, Formular, Karte ============================================ */

.kontakt-raster {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 60rem) {
    .kontakt-raster {
        grid-template-columns: 1.35fr 1fr;
        gap: 4rem;
        align-items: start;
    }
}

.formular-karte {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--weiss);
    border-radius: var(--radius-gross);
}

.feld {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}

.feld label {
    font-size: 0.95rem;
    font-weight: 600;
}

.feld-zusatz {
    font-weight: 400;
    color: var(--text-leise);
}

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.7rem 0.95rem;
    font: inherit;
    color: var(--text);
    background: var(--weiss);
    border: 1.5px solid var(--linie-kraeftig);
    border-radius: var(--radius-klein);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feld textarea {
    resize: vertical;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    border-color: var(--tinte);
    outline: none;
    box-shadow: 0 0 0 4px rgb(246 200 0 / 45%);
}

.feld-reihe {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 36rem) {
    .feld-reihe {
        grid-template-columns: 1fr 1fr;
    }
}

.feld-haken {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem;
    margin-block: 1.5rem;
}

.feld-haken input {
    width: 1.3rem;
    min-height: 1.3rem;
    height: 1.3rem;
    margin-top: 0.2rem;
    accent-color: var(--tinte);
}

.feld-haken label {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-leise);
}

/* Falle für Spam-Programme: aus dem sichtbaren Bereich geschoben */
.feld-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-klein);
}

.meldung p:last-child {
    margin: 0;
}

.meldung-fehler {
    color: #7a0010;
    background: #fdecee;
}

.meldung-info {
    background: var(--gelb-weich);
}

.meldung-info strong {
    display: block;
    margin-bottom: 0.3rem;
}

.meldung-erfolg {
    color: #0f4527;
    background: #e5f4ea;
}

/* Kontaktdaten neben dem Formular */
.kontaktdaten {
    display: grid;
    gap: 1.75rem;
}

.anrufzeile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    color: var(--tinte);
    text-decoration: none;
    background: var(--gelb);
    border-radius: var(--radius);
    transition: background-color 0.15s;
}

.anrufzeile:hover {
    background: var(--gelb-hover);
}

.anrufzeile-symbol {
    width: 2rem;
    height: 2rem;
}

.anrufzeile-titel {
    display: block;
    font-size: 0.92rem;
}

.anrufzeile-nummer {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.kontaktzeile {
    display: flex;
    gap: 1rem;
}

.kontaktzeile-symbol {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.6rem;
    background: var(--weiss);
    border-radius: 50%;
}

.kontaktzeile h2 {
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
}

.kontaktzeile p,
.kontaktzeile address {
    margin-bottom: 0.4rem;
}

/* Karte: Platzhalter mit Foto, wird erst nach Klick geladen */
.einbettung {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 20rem;
    background: var(--tinte);
    border-radius: var(--radius-gross);
}

.einbettung-hintergrund {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.einbettung-knopf {
    position: relative;
    z-index: 1;
}

.einbettung-hinweis {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
    color: var(--weiss);
    background: rgb(22 25 29 / 70%);
}

.einbettung-hinweis a {
    color: var(--weiss);
    text-decoration-color: rgb(255 255 255 / 50%);
}

.einbettung.geladen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 52rem) {
    .einbettung-karte {
        min-height: 28rem;
    }
}


/* 16. Aufruf und Seitenfuß ================================================ */

/* Weiche gelbe Fläche vor dem Seitenfuß */
.aufruf {
    padding-block: 0 var(--abstand-abschnitt);
}

/* Folgt der Aufruf auf einen grauen Abschnitt, braucht er oben Luft */
.abschnitt-hell + .aufruf,
.abschnitt-grau + .aufruf {
    padding-top: var(--abstand-abschnitt);
}

.aufruf-innen {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    background: var(--gelb-weich);
    border-radius: var(--radius-gross);
}

.aufruf h2 {
    margin-bottom: 0.4rem;
}

.aufruf p {
    max-width: 36rem;
    margin: 0;
    color: var(--text-leise);
}

@media (min-width: 60rem) {
    .aufruf-innen {
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}

.fuss {
    color: #b9bfc6;
    background: var(--tinte);
}

.fuss-innen {
    display: grid;
    gap: 2.75rem;
    padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 3rem;
}

.fuss h2 {
    margin-bottom: 0.9rem;
    font-size: 1rem;
    color: var(--weiss);
}

.fuss a {
    color: #e4e7ea;
    text-decoration: none;
}

.fuss a:hover {
    color: var(--gelb);
}

.fuss-logo {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
}

.fuss-firma address {
    margin-bottom: 1rem;
}

.fuss-kontaktliste,
.fuss-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fuss-kontaktliste li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.fuss-kontaktliste .symbol {
    color: var(--gelb);
}

.fuss-links li {
    margin-bottom: 0.45rem;
}

.fuss-ueber p {
    font-size: 0.92rem;
    line-height: 1.7;
}

@media (min-width: 48rem) {
    .fuss-innen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68rem) {
    .fuss-innen {
        grid-template-columns: 1.1fr 1fr 1fr 1.6fr;
        gap: 3rem;
    }
}

.fuss-unten {
    font-size: 0.88rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.fuss-unten-innen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1.25rem;
    /* Platz für den Info-Knopf der Vorschau unten rechts */
    padding-bottom: 4.5rem;
}

.fuss-unten p {
    margin: 0;
}

.fuss-unten nav {
    display: flex;
    gap: 1.25rem;
}

@media (min-width: 48rem) {
    .fuss-unten-innen {
        padding-bottom: 1.25rem;
    }
}


/* 17. Fehlerseite ========================================================= */

.fehlerseite {
    text-align: center;
}

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

.fehlerseite-symbol {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.5rem;
    padding: 1rem;
    color: var(--tinte);
    background: var(--gelb-weich);
    border-radius: 50%;
}


/* Gelber runder Knopf links unten im Titelfoto der Startseite ============== */

.job-knopf {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: grid;
    place-items: center;
    width: 3.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--tinte);
    text-decoration: none;
    text-align: center;
    background: radial-gradient(circle at 30% 25%, var(--gelb-hover), var(--gelb) 70%);
    box-shadow: 0 6px 18px rgb(0 0 0 / 28%), inset 0 0 0 3px rgb(255 255 255 / 55%);
    animation: job-knopf-puls 9s ease-in-out infinite;
}

.job-knopf span {
    font-family: var(--schrift-titel);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    transform: rotate(-9deg);
}

.job-knopf::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gelb);
    opacity: 0;
    animation: job-knopf-ring 9s ease-out infinite;
}

.job-knopf:hover,
.job-knopf:focus-visible {
    background: var(--gelb-hover);
}

/* Meist ruhig; alle paar Sekunden ein ganz sanftes Atmen */
@keyframes job-knopf-puls {
    0%, 70%, 100% { transform: scale(1); }
    85% { transform: scale(1.07) rotate(-3deg); }
}

@keyframes job-knopf-ring {
    0%, 70% { opacity: 0; transform: scale(1); }
    74% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.45); }
}

@media (min-width: 60rem) {
    .job-knopf {
        right: 1.5rem;
        bottom: 1.5rem;
        width: 8rem;
    }

    .job-knopf span {
        font-size: 1.05rem;
    }
}


/* 18. Weniger Bewegung, Druck ============================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .kopf,
    .aufruf,
    .fuss,
    .seitenleiste,
    .einbettung {
        display: none;
    }

    body {
        font-size: 11pt;
    }

    a {
        text-decoration: none;
    }
}

/* „Seit fast 20 Jahren …“ rückt dicht an den Einstieg heran */
.einstieg + .abschnitt {
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* Firmenname in der Überschrift im Rot des Blitzes */
.einstieg-marke {
    color: #c80c22;
}