/* ===================================================================
   CA Recycling — Gestaltungsschicht über Bootstrap 5.3
   ===================================================================

   Diese Datei wird NACH bootstrap.min.css geladen und ändert Bootstrap
   ausschließlich über dessen eigene Variablen. bootstrap.min.css bleibt
   unangetastet und ist damit ohne Migrationsaufwand austauschbar.

   GESTALTUNGSRICHTUNG: Industriebeschilderung.

   Nicht die Bildsprache eines Softwareprodukts, sondern die einer
   Baustelle: Containerbeschriftung, Waagescheine, Maschinenmarkierung.
   Kondensierte Versalien, harte Kanten, kräftige Trennlinien.

   Das Gelb ist Warnfarbe, keine Zierde. Es markiert ausschließlich
   Handlungen — anrufen, anfragen, schreiben. Blau trägt die Marke und
   die Struktur. Wo beides gleichzeitig auftritt, verliert die Seite
   ihre Ordnung: Der Besucher kann dann nicht mehr sehen, wo er drücken
   soll. Diese Trennung ist die wichtigste Regel dieser Datei.

   Wiedererkennungsmerkmal ist die Warnschraffur (.schraffur): der
   diagonale Streifen von Absperrungen und Muldenkanten, hier als
   reiner CSS-Verlauf. Kostet kein Byte Bildmaterial und ist im
   Gegensatz zu Farbverläufen oder abgerundeten Kacheln inhaltlich
   begründet.

   Kein Dunkelmodus. Die Anmutung ist die eines bedruckten Schildes;
   invertiert ergibt sie keinen Sinn, und ein zweites Farbschema wäre
   Aufwand ohne Gegenwert für eine Seite mit siebzehn Dokumenten.

   =================================================================== */

/* ===================================================================
   1. Schriften
   =================================================================== */

/* Nur die benötigten Schnitte, nur das latin-Subset, lokal.
   font-display: swap zeigt sofort die Systemschrift und tauscht
   nach — ein leerer Überschriftenblock ist schlimmer als ein
   kurzer Schriftwechsel. */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   2. Tokens
   =================================================================== */

:root {
    /* --- Marke ------------------------------------------------------
       Blau und Gelb stammen aus dem Bestand: Sie stehen im alten
       Theme, auf dem Firmenfahrzeug und im Logo. Sie werden nicht
       „modernisiert" — Wiedererkennung ist bei einem Betrieb mit
       beschrifteten Fahrzeugen mehr wert als ein aktuellerer Farbton. */
    --marke-blau:         #2f4da8;
    --marke-blau-dunkel:  #22397c;
    --marke-blau-hell:    #4666c4;
    --marke-gelb:         #fab918;
    --marke-gelb-dunkel:  #d99c00;

    /* --- Grundtöne --------------------------------------------------
       Kein reines Weiß. Der Bestand bringt ein Logo mit Verlauf,
       Schlagschatten und Glanzkante mit; auf #ffffff steht dessen
       weißer Rand als sichtbarer Kasten. Auf einem leicht warmen
       Papierton verschwindet er. */
    --grund:              #f6f5f2;
    --grund-karte:        #ffffff;
    --grund-tief:         #e8eaf0;
    --tinte:              #16181d;
    --tinte-leise:        #5a5f6b;
    --linie:              #d2d6e0;
    --linie-kraeftig:     #16181d;

    /* --- Zustände --------------------------------------------------- */
    --erfolg:             #1f7a4d;
    --fehler:             #b3261e;
    --fehler-grund:       #fdecea;

    /* --- Typografie -------------------------------------------------
       Fließtext auf dem Systemstapel: lädt nichts nach, rendert
       sofort und sieht auf jedem Gerät nach diesem Gerät aus.
       Barlow Condensed nur für Überschriften und Beschriftungen —
       dort, wo die schmale Laufweite gebraucht wird, um Wörter wie
       „Wohnwagenentsorgung" ohne Umbruch unterzubringen. */
    --schrift-text: system-ui, -apple-system, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --schrift-titel: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

    /* Fließende Größen. Der zweite Wert wächst mit dem Ansichtsfenster,
       der dritte deckelt — so bleibt die Zeilenlänge auf großen
       Bildschirmen lesbar, ohne Sprünge an Umbruchpunkten. */
    --gr-mikro:  0.75rem;
    --gr-klein:  0.875rem;
    --gr-text:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --gr-gross:  clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --gr-h4:     clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --gr-h3:     clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --gr-h2:     clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
    --gr-h1:     clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

    /* --- Raster -----------------------------------------------------
       Vielfache von 4 px. Zwei Abstände für Abschnitte: der enge für
       Handys, der weite ab Tablet. */
    --a-1: 0.25rem;
    --a-2: 0.5rem;
    --a-3: 0.75rem;
    --a-4: 1rem;
    --a-5: 1.5rem;
    --a-6: 2rem;
    --a-7: 3rem;
    --a-8: 4rem;
    --abschnitt: clamp(2.5rem, 1.5rem + 4vw, 5rem);

    /* --- Kanten -----------------------------------------------------
       2 px, nicht mehr. Ein Container ist eine Kiste; abgerundete
       Kacheln gehören in eine andere Branche. */
    --kante: 2px;

    /* --- Schatten ---------------------------------------------------
       Zwei Ebenen, beide hart und nach unten versetzt statt weich
       gestreut — das ist der Schatten eines Schildes an der Wand,
       nicht der einer schwebenden Karte. */
    --schatten-1: 0 2px 0 rgba(22, 24, 29, 0.08);
    --schatten-2: 0 4px 0 rgba(22, 24, 29, 0.12);
    --schatten-tief: 0 8px 24px rgba(22, 24, 29, 0.18);

    /* --- Bewegung --------------------------------------------------- */
    --tempo: 140ms;
    --kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ===================================================================
   3. Bootstrap-Variablen überschreiben
   ===================================================================
   Bootstrap liest diese Werte selbst aus. Dadurch übernehmen Karten,
   Formulare, Offcanvas und Navigation die Marke, ohne dass eine
   einzige Bootstrap-Regel überschrieben werden muss.
   =================================================================== */

:root {
    --bs-primary:      var(--marke-blau);
    --bs-primary-rgb:  47, 77, 168;
    --bs-secondary:    var(--tinte-leise);
    --bs-danger:       var(--fehler);
    --bs-success:      var(--erfolg);

    --bs-body-bg:      var(--grund);
    --bs-body-color:   var(--tinte);
    --bs-emphasis-color: var(--tinte);
    --bs-secondary-color: var(--tinte-leise);

    --bs-font-sans-serif: var(--schrift-text);
    --bs-body-font-size:  var(--gr-text);
    --bs-body-line-height: 1.65;

    --bs-border-color:    var(--linie);
    --bs-border-radius:    var(--kante);
    --bs-border-radius-sm: var(--kante);
    --bs-border-radius-lg: var(--kante);
    --bs-border-radius-xl: var(--kante);
    --bs-border-radius-pill: var(--kante);

    --bs-link-color:       var(--marke-blau);
    --bs-link-color-rgb:   47, 77, 168;
    --bs-link-hover-color: var(--marke-blau-dunkel);

    /* Fokusring in Gelb auf dunklem Kern: auf blauen wie auf weißen
       Flächen sichtbar. Ein blauer Fokusring auf blauer Schaltfläche
       ist unsichtbar — der häufigste Zugänglichkeitsfehler in
       Bootstrap-Themes. */
    --bs-focus-ring-width:  3px;
    --bs-focus-ring-color:  rgba(250, 185, 24, 0.85);
    --bs-focus-ring-opacity: 1;
}

/* ===================================================================
   4. Grundlagen
   =================================================================== */

html {
    scroll-behavior: smooth;
    /* Sprungziele landen sonst unter der klebenden Kopfleiste. */
    scroll-padding-top: 5.5rem;
}

body {
    background-color: var(--grund);
    color: var(--tinte);
    font-family: var(--schrift-text);
    font-size: var(--gr-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Überschriften: kondensiert, eng gesetzt, mit leichter negativer
   Laufweite. Barlow Condensed ist auf großen Graden ohne diese
   Korrektur zu luftig für den Ton der Seite. */
h1, h2, h3, h4, h5, h6,
.titel {
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--tinte);
    text-wrap: balance;
}

h1, .h1 { font-size: var(--gr-h1); }
h2, .h2 { font-size: var(--gr-h2); }
h3, .h3 { font-size: var(--gr-h3); font-weight: 600; }
h4, .h4 { font-size: var(--gr-h4); font-weight: 600; }

p { text-wrap: pretty; }

p, ul, ol { margin-bottom: var(--a-4); }

/* Der Bestandstext setzt <strong> sehr großzügig als
   Schlagwortauszeichnung ein — über 160 Mal. Bei vollem Fettschnitt
   flimmert der Absatz. 600 statt 700 hält die Betonung erkennbar,
   ohne dass der Text zerfällt. */
strong, b {
    font-weight: 600;
    color: var(--tinte);
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Bilder nie über ihre eigene Auflösung hinaus vergrößern.
   Siebzehn der zwanzig Bilder sind 650 px breit; auf volle
   Spaltenbreite gezogen werden sie sichtbar weich. */
img {
    max-width: 100%;
    height: auto;
}

/* ===================================================================
   5. Warnschraffur
   ===================================================================
   Das Wiedererkennungsmerkmal. Diagonalstreifen wie an Absperrungen
   und Muldenkanten, als reiner Verlauf ohne Bilddatei.

   Sparsam einsetzen: als Trennlinie zwischen Abschnitten und unter
   der Kopfleiste. Als Fläche verwendet wird sie zum Zebrastreifen.
   =================================================================== */

.schraffur {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--marke-gelb) 0,
        var(--marke-gelb) 12px,
        var(--tinte) 12px,
        var(--tinte) 24px
    );
}

.schraffur-band {
    height: 6px;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--marke-gelb) 0,
        var(--marke-gelb) 12px,
        var(--tinte) 12px,
        var(--tinte) 24px
    );
}

/* ===================================================================
   6. Schaltflächen
   ===================================================================
   Gelb heißt handeln. Blau heißt weiterlesen. Weiß mit Rahmen heißt
   nachrangig. Mehr Stufen gibt es nicht — jede weitere verwässert
   die erste.

   Der harte Versatzschatten und das Wegdrücken beim Klick geben der
   Fläche ein mechanisches Gefühl: gedrückt, nicht angetippt.
   =================================================================== */

.btn {
    --bs-btn-font-family: var(--schrift-titel);
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-border-radius: var(--kante);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: transform var(--tempo) var(--kurve),
                box-shadow var(--tempo) var(--kurve),
                background-color var(--tempo) var(--kurve);
}

.btn:active {
    transform: translateY(2px);
}

/* Handlung */
.btn-handlung {
    --bs-btn-color: var(--tinte);
    --bs-btn-bg: var(--marke-gelb);
    --bs-btn-border-color: var(--tinte);
    --bs-btn-hover-color: var(--tinte);
    --bs-btn-hover-bg: var(--marke-gelb-dunkel);
    --bs-btn-hover-border-color: var(--tinte);
    --bs-btn-active-color: var(--tinte);
    --bs-btn-active-bg: var(--marke-gelb-dunkel);
    --bs-btn-active-border-color: var(--tinte);
    border-width: 2px;
    box-shadow: var(--schatten-2);
}

.btn-handlung:active {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Marke */
.btn-marke {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marke-blau);
    --bs-btn-border-color: var(--marke-blau);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marke-blau-dunkel);
    --bs-btn-hover-border-color: var(--marke-blau-dunkel);
    --bs-btn-active-bg: var(--marke-blau-dunkel);
    border-width: 2px;
}

/* Nachrangig */
.btn-leise {
    --bs-btn-color: var(--tinte);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--linie-kraeftig);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tinte);
    --bs-btn-hover-border-color: var(--tinte);
    border-width: 2px;
}

/* ===================================================================
   7. Beschriftungen
   ===================================================================
   Die kleinen Versalzeilen über Überschriften — im Ton der
   Kennzeichnung an Maschinen und Containern.
   =================================================================== */

.marke-label {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-klein);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marke-blau);
    display: inline-flex;
    align-items: center;
    gap: var(--a-2);
    margin-bottom: var(--a-2);
}

.marke-label::before {
    content: '';
    width: 1.75rem;
    height: 3px;
    background: var(--marke-gelb);
    flex: none;
}

/* ===================================================================
   8. Symbole
   =================================================================== */

/* Die Symbolsammlung selbst wird nie gezeigt — <use> greift trotzdem
   auf die <symbol> darin zu. Über die Klasse ausgeblendet und nicht
   über style="", weil die Content-Security-Policy Inline-Styles
   ablehnt. */
.sprite-quelle {
    display: none;
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.125em;
}

.icon-gross { width: 1.75rem; height: 1.75rem; }
.icon-xl    { width: 2.5rem;  height: 2.5rem; }

/* ===================================================================
   9. Karten
   =================================================================== */

.karte {
    background: var(--grund-karte);
    border: 2px solid var(--linie);
    border-radius: var(--kante);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color var(--tempo) var(--kurve),
                transform var(--tempo) var(--kurve),
                box-shadow var(--tempo) var(--kurve);
}

/* Der Rahmen wechselt auf Schwarz und die Karte hebt sich um zwei
   Pixel — dieselbe mechanische Geste wie bei den Schaltflächen,
   damit die Seite eine Sprache spricht. */
.karte:hover,
.karte:focus-within {
    border-color: var(--linie-kraeftig);
    transform: translateY(-2px);
    box-shadow: var(--schatten-2);
}

.karte-bild {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
    background: var(--grund-tief);
}

.karte-inhalt {
    padding: var(--a-5);
    display: flex;
    flex-direction: column;
    gap: var(--a-2);
    flex: 1;
}

.karte-text {
    color: var(--tinte-leise);
    margin-bottom: 0;
}

/* Ab dem zweiten Absatz kleiner: Die Teaser des Altbestands enden mit
   Orts- und Hinweiszeilen ("Abholtermine jederzeit möglich!"), die den
   ersten Absatz sonst optisch verdrängen. Der Text bleibt vollständig,
   nur seine Gewichtung folgt der Lesereihenfolge. */
.karte-text-klein {
    font-size: var(--gr-klein);
    line-height: 1.5;
}

/* Die ganze Karte klickbar machen, ohne den Text in einen Link zu
   packen: So bleibt der Text markierbar und Screenreader lesen nur
   einen Verweis statt drei. */
.karte-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.karte-rahmen {
    position: relative;
}

/* Die hervorgehobene Leistung einer Ortsseite. Sie steht oben schon als
   eigener Abschnitt; im Gitter bekommt sie nur eine Kante, damit der Blick
   sie wiederfindet. Kein zweites Gelb: Gelb ist auf diesen Seiten die
   Handlungsfarbe, und eine Kachel ist keine Handlung. */
.karte-hervor {
    outline: 3px solid var(--marke-blau);
    outline-offset: -3px;
}

/* ===================================================================
   10. Abschnitte
   =================================================================== */

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

/* Leicht ins Blaue gezogen statt neutral grau. Der Unterschied ist klein
   genug, um nicht als eigene Farbe aufzufallen, und groß genug, dass die
   Marke auch in den ruhigen Abschnitten mitläuft. */
.abschnitt-tief {
    background: var(--grund-tief);
}

.abschnitt-marke {
    background: var(--marke-blau);
    color: #fff;
}

.abschnitt-marke h1,
.abschnitt-marke h2,
.abschnitt-marke h3 {
    color: #fff;
}

.abschnitt-marke .marke-label {
    color: var(--marke-gelb);
}

/* ===================================================================
   11. Formular
   =================================================================== */

.form-label {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-klein);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin-bottom: var(--a-1);
}

.form-control,
.form-select {
    border: 2px solid var(--linie);
    border-radius: var(--kante);
    padding: 0.7rem 0.85rem;
    /* 16 px verhindert, dass iOS beim Hineintippen hineinzoomt.
       Kleiner darf dieses Feld nicht werden. */
    font-size: 1rem;
    background-color: var(--grund-karte);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marke-blau);
    box-shadow: 0 0 0 3px rgba(250, 185, 24, 0.85);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--fehler);
    background-color: var(--fehler-grund);
}

/* Das Honigtopf-Feld. display:none allein reicht nicht — manche
   Ausfüllprogramme überspringen ausgeblendete Felder gezielt.
   Es steht im Fluss, ist aber aus dem Bild geschoben und für
   Screenreader wie für die Tabulatorreihenfolge unsichtbar. */
.honigtopf {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ===================================================================
   12. Kopfleiste
   =================================================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--grund-karte);
    border-bottom: 2px solid var(--linie-kraeftig);
}

/* --- Servicezeile ---------------------------------------------------
   Der schmale blaue Streifen über der Navigation. Er trägt Anschrift und
   Rufnummern und ist zugleich die Stelle, an der die Marke Blau zum
   ersten Mal als Fläche auftritt.

   Vorher kam Blau auf der ganzen Seite nur als Linkfarbe vor — bei einer
   Marke, deren Fahrzeuge blau-gelb beschriftet sind, zu wenig. */

.servicezeile {
    background: var(--marke-blau-dunkel);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-klein);
    letter-spacing: 0.04em;
    padding-block: 0.45rem;
}

.servicezeile a {
    color: #fff;
    text-decoration: none;
}

.servicezeile a:hover {
    color: var(--marke-gelb);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.servicezeile .icon {
    color: var(--marke-gelb);
}

/* --- Navigationslinks ------------------------------------------------
   Kondensierte Versalien wie die Überschriften. Vorher liefen sie im
   Fließtext-Stapel und fielen dadurch aus der Sprache der Seite. */

.kopf .navbar-nav .nav-link {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte);
    position: relative;
    padding-inline: 0.9rem;
}

@media (min-width: 992px) {
    /* Der Balken wächst von der Mitte aus, statt einfach zu erscheinen.
       Auf Berührungsgeräten fällt der Übergang weg, dort gibt es kein
       Hover. */
    .kopf .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.35rem;
        height: 3px;
        background: var(--marke-blau);
        transform: scaleX(0);
        transition: transform var(--tempo) var(--kurve);
    }

    .kopf .navbar-nav .nav-link:hover::after,
    .kopf .navbar-nav .nav-link:focus-visible::after {
        transform: scaleX(1);
    }
}

/* Bootstraps Pfeil hängt an vertical-align: .255em und steht dadurch in
   der kondensierten Versalschrift zu hoch — er sitzt auf Höhe der
   Oberlänge statt auf der Mitte. In ein Flex-Element gesetzt richtet er
   sich an der Zeilenmitte aus. */
.kopf .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.kopf .dropdown-toggle::after {
    margin-left: 0;
    vertical-align: 0;
    border-top-width: 0.35em;
    border-inline-width: 0.3em;
}

.kopf-logo img {
    height: 2.75rem;
    width: auto;
}

@media (min-width: 992px) {
    .kopf-logo img { height: 3.25rem; }
}

/* Die neun Leistungen im Aufklappmenü zweispaltig. Untereinander wäre die
   Liste höher als der sichtbare Bereich mancher Notebooks. Als Klasse und
   nicht als style-Attribut, weil die Content-Security-Policy Inline-Styles
   ablehnt. */
.leistungsmenue {
    --bs-dropdown-min-width: 34rem;
    border: 2px solid var(--linie-kraeftig);
    border-radius: var(--kante);
}

.leistungsmenue .dropdown-item[aria-current="page"],
.navbar-nav .nav-link[aria-current="page"] {
    color: var(--marke-blau);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--marke-gelb);
}

/* ===================================================================
   13. Feste Handlungsleiste auf schmalen Geräten
   ===================================================================
   Anrufen und Anfragen dauerhaft in Reichweite des Daumens. Auf einer
   Seite, deren Besucher oft neben dem Problem stehen, das sie gelöst
   haben wollen, ist das die wichtigste Einzelentscheidung im Layout.
   =================================================================== */

.handlungsleiste {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid var(--linie-kraeftig);
    /* Über der Home-Anzeige von iPhones ohne Taste. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.handlungsleiste a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--a-2);
    /* 3,25rem plus Innenabstand hält die Fläche über 48 px — das
       Mindestmaß für eine sicher treffbare Schaltfläche. */
    min-height: 3.25rem;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
}

@media (min-width: 992px) {
    .handlungsleiste { display: none; }
}

/* Damit die Leiste den Fußbereich nicht überdeckt. */
@media (max-width: 991.98px) {
    body { padding-bottom: 3.5rem; }
}

/* ===================================================================
   13b. Sektionsbausteine
   =================================================================== */

/* --- Brotkrumen --------------------------------------------------- */

/* In derselben blauen Fläche wie der Seitenkopf darunter, damit beide als
   ein Block gelesen werden statt als graues Vorspann-Band. */
.brotkrumen {
    background: var(--marke-blau-dunkel);
    color: rgba(255, 255, 255, 0.72);
    padding-block: var(--a-3);
    font-size: var(--gr-klein);
    font-family: var(--schrift-titel);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.brotkrumen a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.brotkrumen a:hover {
    color: var(--marke-gelb);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.brotkrumen ol {
    /* Auf schmalen Geräten lieber seitwärts scrollen als umbrechen —
       eine zweizeilige Brotkrumenleiste sieht nach Fehler aus. */
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.brotkrumen ol::-webkit-scrollbar { display: none; }

.brotkrumen-pfeil {
    color: var(--marke-gelb);
    display: inline-flex;
}

.brotkrumen [aria-current="page"] {
    color: #fff;
}

/* --- Seitenkopf ---------------------------------------------------
   Geteiltes Layout statt vollflächigem Bild. Der Grund steht in den
   Randbedingungen: Siebzehn der zwanzig Bilder sind 650 px breit und
   werden über die volle Breite gezogen sichtbar weich. */

.seitenkopf {
    position: relative;
    overflow: hidden;
    padding-block: var(--abschnitt);
    background: var(--marke-blau-dunkel);
    color: #fff;
    border-bottom: 2px solid var(--linie-kraeftig);

    /* Zwei Schichten Textur, beide sehr flach gehalten:
       eine feine Diagonalschraffur in der Sprache der Warnstreifen und
       ein Lichtkegel aus der oberen linken Ecke. Zusammen nehmen sie der
       Fläche das Plakative, ohne dass ein Bild geladen werden muss.

       Vorher stand hier ein Verlauf von Weiß nach Papierton — technisch
       richtig, aber so zurückhaltend, dass die Marke im Kopfbereich gar
       nicht vorkam. */
    background-image:
        radial-gradient(120% 90% at 8% -10%,
            rgba(70, 102, 196, 0.55) 0%, rgba(70, 102, 196, 0) 60%),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.045) 0 2px,
            rgba(255, 255, 255, 0) 2px 14px);
}

.seitenkopf h1 {
    color: #fff;
}

/* Ein gelber Balken über der Überschrift — dasselbe Zeichen wie bei
   .marke-label, hier nur größer. Er bindet den blauen Kopf an die
   Warnschraffur darunter. */
.seitenkopf h1::before {
    content: '';
    display: block;
    width: 4.5rem;
    height: 6px;
    margin-bottom: var(--a-4);
    background: var(--marke-gelb);
}

.seitenkopf-unterzeile {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-h4);
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.88);
    margin-top: var(--a-3);
    max-width: 34ch;
}

.seitenkopf .btn-leise {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.65);
    --bs-btn-hover-color: var(--marke-blau-dunkel);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* Großes, sehr blasses Symbol als Bildmarke im Hintergrund. Gibt der
   Fläche einen Bezug zur jeweiligen Leistung, ohne ein Wort hinzuzufügen
   und ohne eine Datei zu laden — das Symbol steckt ohnehin im Sprite.
   aria-hidden, es trägt keine Bedeutung. */
.seitenkopf-marke {
    position: absolute;
    left: -4rem;
    bottom: -5rem;
    width: 20rem;
    height: 20rem;
    /* fill muss hier ausdrücklich stehen. Die Regel fill: currentColor
       hängt an .icon, und diese Klasse trägt sie nicht — ohne die Zeile
       fällt das Symbol auf Schwarz zurück und liegt als voll deckende
       Fläche über dem Bild. */
    fill: currentColor;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* Der Inhalt muss über der Bildmarke liegen. Ohne eigenen Stapelkontext
   entscheidet sonst die Dokumentreihenfolge, und das Symbol steht zwar
   hinter dem Text, aber vor dem Bild in der zweiten Spalte. */
.seitenkopf > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .seitenkopf-marke {
        width: 13rem;
        height: 13rem;
        left: -4.5rem;
        bottom: -4rem;
    }
}

/* Der gelbe Versatzrahmen: dieselbe mechanische Sprache wie bei den
   Schaltflächen, und er hebt ein 650-px-Bild optisch aus der Fläche,
   ohne es vergrößern zu müssen.

   Als box-shadow und nicht als versetztes ::after mit z-index: -1 —
   das läge hinter dem eigenen Hintergrund des Elements und wäre
   unsichtbar. */
.seitenkopf-bild {
    border: 2px solid var(--linie-kraeftig);
    background: var(--grund-karte);
    box-shadow: 12px 12px 0 var(--marke-gelb);
    /* Damit der Schatten am rechten Rand nicht abgeschnitten wird. */
    margin-right: 12px;
}

.seitenkopf-bild img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Bilder in Inhaltsabschnitten ---------------------------------- */

.bildrahmen {
    margin: 0;
    border: 2px solid var(--linie);
    background: var(--grund-karte);
}

.bildrahmen img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Leistungslisten ----------------------------------------------- */

.leistungsliste li {
    padding-bottom: var(--a-2);
    border-bottom: 1px solid var(--linie);
}

.leistungsliste li:last-child {
    border-bottom: 0;
}

/* --- Ablauf ---------------------------------------------------------
   Nummerierter Vorgang mit durchlaufender Linie. Die Zahlen kommen aus
   einem CSS-Zähler statt aus dem Markup — so bleibt die Reihenfolge auch
   dann richtig, wenn jemand einen Schritt einfügt oder streicht. */

.ablauf {
    list-style: none;
    counter-reset: ablauf;
    padding: 0;
    margin: var(--a-5) 0 0;
    position: relative;
}

.ablauf-schritt {
    counter-increment: ablauf;
    position: relative;
    padding-left: 3.5rem;
    padding-bottom: var(--a-5);
}

/* Die Linie zwischen den Ziffern. Beim letzten Schritt endet sie, sonst
   liefe sie ins Leere. */
.ablauf-schritt::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: var(--linie);
}

.ablauf-schritt:last-child {
    padding-bottom: 0;
}

.ablauf-schritt:last-child::before {
    display: none;
}

.ablauf-schritt::after {
    content: counter(ablauf);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: var(--marke-blau);
    color: #fff;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: var(--kante);
}

.ablauf-titel {
    font-size: var(--gr-gross);
    margin-bottom: var(--a-2);
    line-height: 1.25;
}

/* --- Warnkasten ------------------------------------------------------
   Für Aussagen, bei denen Nichtbeachtung gefährlich ist — nicht für
   Marketinghinweise. Wird der Kasten für Beliebiges benutzt, sieht ihn
   beim nächsten Mal niemand mehr an. */

.warnkasten {
    border: 2px solid var(--linie-kraeftig);
    border-left-width: 8px;
    border-left-color: var(--marke-gelb);
    background: var(--grund-karte);
    padding: var(--a-5);
    margin-block: var(--a-5);
}

.warnkasten > :last-child {
    margin-bottom: 0;
}

.warnkasten-titel {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: var(--gr-h4);
    display: flex;
    align-items: center;
    gap: var(--a-2);
    margin-bottom: var(--a-3);
}

.warnkasten-titel .icon {
    color: var(--marke-gelb);
    flex: none;
}

/* Listenzeichen für Aufzählungen, die keine Leistungen sind, sondern
   Gefahrenstellen. Nicht gelb: als kleines Zeichen auf hellem Grund käme
   --marke-gelb-dunkel nur auf rund 2,5:1 und bliebe unter den 3:1, die ein
   bedeutungstragendes Zeichen braucht. Schwarz trägt die Bedeutung genauso
   und ist lesbar. */
.zeichen-hinweis {
    color: var(--tinte);
}

/* Kreuz vor Verbotenem. --fehler ist sonst die Farbe des Formularfehlers;
   hier trägt sie dieselbe Aussage — „so nicht" — und ist mit rund 5,9:1 auf
   dem Kartengrund deutlich genug. */
.zeichen-verbot {
    color: var(--fehler);
}

/* --- Sterne --------------------------------------------------------- */

.sternreihe {
    color: var(--marke-gelb);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sternreihe span {
    color: var(--tinte-leise);
    font-size: var(--gr-klein);
}

/* Bewertungen ohne Kommentar. Sie stehen bewusst mit auf der Seite: Sie
   zählen in die Gesamtzahl, und ohne sie nennte aggregateRating mehr
   Bewertungen, als zu sehen sind. Damit sie neben den Textkarten nicht wie
   ein Fehler wirken, bekommen sie eine ruhigere Fläche und rücken Name und
   Datum an den unteren Rand — die Karte sieht dann bewusst knapp aus statt
   unfertig. */
.karte-nurstern {
    background: var(--grund-tief);
}

.karte-nurstern .karte-inhalt {
    justify-content: space-between;
    min-height: 9rem;
}

.abschnitt-marke .sternreihe span { color: #fff; }

/* --- Kundenversprechen ---------------------------------------------- */

.versprechen {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-h3);
    line-height: 1.25;
    text-wrap: balance;
}

/* --- Handlungsband --------------------------------------------------- */

.handlungsband {
    background: var(--grund-tief);
    border-block: 2px solid var(--linie-kraeftig);
}

/* ===================================================================
   14. Fußbereich
   =================================================================== */

.fuss {
    background: var(--tinte);
    color: #c9ccd4;
    padding-block: var(--a-8) var(--a-5);
}

.fuss h2, .fuss h3 { color: #fff; }

/* Die Hauptkategorie des Unternehmensprofils unter dem Betriebsnamen. */
.fuss-kategorie {
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: var(--gr-klein);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marke-gelb);
    margin-bottom: var(--a-4);
}

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

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

/* Das Einzugsgebiet: 55 Orte. Als Liste wäre das eine Bleiwüste,
   als Fließtext mit Trennzeichen liest es sich wie ein Fahrtgebiet
   und bleibt für Ortssuchen auswertbar. */
.einzugsgebiet {
    font-size: var(--gr-klein);
    line-height: 2;
    color: #9aa0ac;
}

.einzugsgebiet span:not(:last-child)::after {
    content: ' · ';
    color: var(--marke-gelb);
}

/* ===================================================================
   15. Sprungmarke
   =================================================================== */

.sprungmarke {
    position: absolute;
    left: -9999px;
    z-index: 1080;
    padding: var(--a-3) var(--a-5);
    background: var(--marke-gelb);
    color: var(--tinte);
    font-weight: 700;
}

.sprungmarke:focus {
    left: var(--a-4);
    top: var(--a-4);
}

/* ===================================================================
   16. Bewegung zurücknehmen
   ===================================================================
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   keine. Das ist keine Feinheit: Für Menschen mit vestibulären
   Beschwerden lösen Bewegungen Übelkeit aus.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .karte:hover,
    .btn:active {
        transform: none;
    }
}

/* ===================================================================
   17. Druck
   ===================================================================
   Ein Angebot wird ausgedruckt und auf den Küchentisch gelegt. Dann
   müssen Anschrift und Rufnummern lesbar sein und die Navigation weg.
   =================================================================== */

@media print {
    .kopf,
    .handlungsleiste,
    .schraffur-band,
    .btn {
        display: none !important;
    }

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

    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        word-break: break-all;
    }
}