/* =========================================================================
   Bronner – dünner Layer über dem Agrion-Template.
   Das Layout bleibt bewusst 1:1 wie die Vorlage (index2). Hier stehen nur
   Farben und ein paar Kleinigkeiten, die es in der Vorlage nicht gibt.
   assets/css/agrion.css niemals direkt ändern – sonst ist jedes Template-
   Update ein Problem.
   ========================================================================= */

:root {
    /* Farben aus dem Original-Logo des Kunden (Bronner_Lohnunternehmen_Logo.svg).
       Vorher waren sie aus dem JPG Logo_hell.jpg gepickt und lagen um ein
       Haar daneben: #4d8f37 statt #4e8f36. */
    --bronner-green: #4e8f36;
    --bronner-green-dark: #2f7d2a;
    --bronner-yellow: #ffd400;   /* Verlauf der Kugel: #ffed00 -> #ffcc00 */
    --bronner-grey: #878787;     /* Grund des Originals, traegt „Lohnunternehmen" */

    /* Template-Variablen auf die Bronner-Palette umbiegen */
    --agrion-base: #4e8f36;
    --agrion-base-rgb: 78, 143, 54;
    --agrion-primary: #ffd400;
    --agrion-primary-rgb: 255, 212, 0;
    --agrion-black: #16330b;
    --agrion-black-rgb: 22, 51, 11;
}

/* -------------------------------------------------------------------------
   Leistungen: Übersicht und Detailseiten.
   Diesen Seitentyp gibt es in der Vorlage nicht, deshalb hier eigene Regeln –
   sie nutzen aber die Farben und Radien des Templates.
   ---------------------------------------------------------------------- */

.leistungen-uebersicht__intro {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.leistungen-uebersicht .services-two__single {
    margin-bottom: 30px;
}

.leistung-detail {
    padding: 110px 0 90px;
}

.leistung-detail__img {
    position: relative;
    border-radius: var(--agrion-bdr-radius);
    overflow: hidden;
}

.leistung-detail__img img,
.leistung-detail__img video {
    width: 100%;
    height: auto;
    display: block;
}

.leistung-detail__img-icon {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    font-size: 34px;
    color: var(--agrion-black);
    background-color: var(--bronner-yellow);
}

.leistung-detail__lead {
    font-size: 20px;
    font-weight: 700;
    color: var(--agrion-black);
    margin-bottom: 18px;
}

.leistung-detail__text {
    margin-bottom: 34px;
}

.leistung-detail__fakten-titel {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--agrion-black);
}

.leistung-detail__fakten {
    margin-bottom: 38px;
}

.leistung-detail__btns,
.leistungen-hinweis__btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.leistung-detail__btn-zweit,
.leistungen-hinweis__btn-zweit {
    font-weight: 700;
    color: var(--agrion-black);
    border-bottom: 2px solid var(--bronner-yellow);
    transition: color 400ms ease;
}

.leistung-detail__btn-zweit:hover,
.leistungen-hinweis__btn-zweit:hover {
    color: var(--bronner-green);
}

/* Der beige Block der Vorlage ist auf feste 566 px Höhe gesetzt, das Ährenbild
   auf 400 px ab 167 px. Das passt zur Startseite, endet in diesem Abschnitt aber
   mitten im Inhalt und erzeugt eine harte Kante quer durch die Kacheln.
   Deshalb: Hintergrund über den ganzen Abschnitt, Ähren oben und unten
   ausblenden statt abschneiden. */
.leistung-weitere {
    padding-bottom: 100px;
}

.services-two:before {
    height: 100%;
}

.services-two__bg {
    top: 0;
    bottom: 0;
    height: auto;
    opacity: 0.38;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
}

.leistung-weitere__btn {
    margin-top: 20px;
}

/* Abstand zwischen den Kachelreihen über den Bootstrap-Zeilenabstand.
   Vorher stand er als margin-bottom an der Kachel – der lief ins Leere, weil
   die Kachel height:100% hat und die Spalte dadurch nicht mitwächst. Ergebnis
   waren zwei Reihen ohne jeden Abstand. */
.leistung-weitere .row {
    --bs-gutter-y: 30px;
}

/* Kompakte Kachel für „Weitere Leistungen" */
.leistung-kachel {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    margin-bottom: 0;
    padding: 24px 26px;
    border-radius: var(--agrion-bdr-radius);
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(22, 51, 11, 0.07);
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.leistung-kachel:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 50px rgba(22, 51, 11, 0.13);
}

.leistung-kachel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 26px;
    color: var(--agrion-white);
    background-color: var(--bronner-green);
}

.leistung-kachel__text {
    display: block;
}

.leistung-kachel__titel {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--agrion-black);
}

.leistung-kachel__teaser {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--agrion-gray);
}

.leistungen-hinweis {
    padding-bottom: 110px;
}

.leistungen-hinweis__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding: 46px 50px;
    border-radius: var(--agrion-bdr-radius);
    background-color: var(--agrion-extra);
}

.leistungen-hinweis__text h3 {
    margin-bottom: 8px;
    color: var(--agrion-black);
}

.leistungen-hinweis__text p {
    margin: 0;
}

@media (max-width: 767px) {
    .leistung-detail {
        padding: 70px 0 50px;
    }

    .leistung-detail__content {
        margin-top: 40px;
    }

    .leistungen-hinweis__inner {
        padding: 32px 26px;
    }
}

/* -------------------------------------------------------------------------
   Hero-Slider: Abdunklung zurücknehmen.

   Die Vorlage legt eine flache Fläche mit rgba(10, 25, 5, .70) über das Foto.
   Das war bei den Demo-Platzhaltern egal, schluckt aber die echten Bronner-Fotos.
   Stattdessen ein Verlauf: dunkel nur links, wo die Überschrift steht, nach
   rechts fast frei. Die Schrift bleibt weiß auf dunklem Grund, das Bild sichtbar.
   ---------------------------------------------------------------------- */

.main-slider-two .image-layer-two:before {
    background-color: transparent;
    background-image: linear-gradient(100deg,
            rgba(10, 25, 5, 0.72) 0%,
            rgba(10, 25, 5, 0.55) 38%,
            rgba(10, 25, 5, 0.28) 70%,
            rgba(10, 25, 5, 0.14) 100%);
}

/* Auf schmalen Schirmen steht die Schrift über der ganzen Breite –
   dort braucht es wieder eine gleichmäßigere Abdunklung. */
@media (max-width: 767px) {
    .main-slider-two .image-layer-two:before {
        background-image: linear-gradient(180deg,
                rgba(10, 25, 5, 0.50) 0%,
                rgba(10, 25, 5, 0.62) 100%);
    }
}

/* -------------------------------------------------------------------------
   Leistungs-Icons als SVG.

   Sie ersetzen die Icon-Font-Zeichen der Vorlage. Größe kommt weiterhin über
   die font-size des Elternelements, Farbe über currentColor – dadurch sind
   keine Anpassungen an den Template-Regeln nötig.
   ---------------------------------------------------------------------- */

.leistung-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.leistung-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* -------------------------------------------------------------------------
   Seitenkopf höher.

   Der Kopfbereich der Vorlage liegt absolut über dem Seitenkopf. Mit den
   Original-Abständen (134px oben) rutscht die Breadcrumb hinter die weiße
   Menüleiste. Deshalb hier mehr Luft.
   ---------------------------------------------------------------------- */

.page-header {
    padding: 232px 0 130px;
}

@media (max-width: 991px) {
    .page-header {
        padding: 190px 0 100px;
    }
}

@media (max-width: 575px) {
    .page-header {
        padding: 150px 0 80px;
    }
}

/* -------------------------------------------------------------------------
   Ablauf-Dreisatz (Unternehmen)
   ---------------------------------------------------------------------- */

.ablauf {
    padding: 0 0 110px;
}

.ablauf__schritt {
    position: relative;
    height: 100%;
    margin-bottom: 30px;
    padding: 40px 34px 34px;
    border-radius: var(--agrion-bdr-radius);
    background-color: var(--agrion-extra);
}

.ablauf__nummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    color: var(--agrion-white);
    background-color: var(--bronner-green);
}

.ablauf__titel {
    margin-bottom: 12px;
    font-size: 22px;
    color: var(--agrion-black);
}

.ablauf__text {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Kontaktseite
   ---------------------------------------------------------------------- */

.kontakt {
    padding: 110px 0 90px;
}

.kontakt__intro {
    margin-bottom: 34px;
}

.kontakt__liste li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.kontakt__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--agrion-black);
    background-color: var(--bronner-yellow);
}

.kontakt__wert {
    display: block;
    line-height: 1.7;
    color: var(--agrion-gray);
}

.kontakt__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bronner-green);
}

.kontakt__wert a {
    font-weight: 700;
    color: var(--agrion-black);
    transition: color 400ms ease;
}

.kontakt__wert a:hover {
    color: var(--bronner-green);
}

.kontakt__formular {
    padding: 46px 44px;
    border-radius: var(--agrion-bdr-radius);
    background-color: var(--agrion-extra);
}

.kontakt__formular-titel {
    margin-bottom: 26px;
    font-size: 26px;
    color: var(--agrion-black);
}

.kontakt__feld {
    display: block;
    margin-bottom: 22px;
}

.kontakt__feld-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--agrion-black);
}

.kontakt__feld input,
.kontakt__feld select,
.kontakt__feld textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e0d9;
    border-radius: 8px;
    font-family: var(--agrion-font);
    font-size: 16px;
    color: var(--agrion-black);
    background-color: #ffffff;
    outline: none;
    transition: border-color 300ms ease;
}

.kontakt__feld input:focus,
.kontakt__feld select:focus,
.kontakt__feld textarea:focus {
    border-color: var(--bronner-green);
}

.kontakt__feld [aria-invalid="true"] {
    border-color: #c0392b;
}

.kontakt__fehler {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #c0392b;
}

.kontakt__pflicht {
    margin-bottom: 24px;
    font-size: 14px;
}

.kontakt__hinweis {
    padding: 16px 20px;
    margin-bottom: 26px;
    border-radius: 8px;
    font-weight: 700;
}

.kontakt__hinweis--ok {
    color: #1f5c12;
    background-color: #e4f2dc;
}

.kontakt__hinweis--fehler {
    color: #8c2b20;
    background-color: #f7e2df;
}

.kontakt__hinweis a {
    color: inherit;
    text-decoration: underline;
}

/* Honigtopf: fuer Menschen unsichtbar, aber nicht display:none – sonst
   ueberspringen Bots das Feld, sie parsen das Markup.

   Das Verstecken gehoert genau hierher, in die CSS-Datei, und nicht ins
   Markup: Bots lesen kein CSS und sehen deshalb ein ganz normales Feld.
   Am 2026-10-01 auf der ganzen Flotte (espressini, rusch, verlegeservice,
   bodon, pxr, medgate) auf dieselbe Technik gebracht – alles !important,
   damit keine Regel aus dem Agrion-Template dazwischenkommt und das Feld
   doch sichtbar macht. opacity und pointer-events sind der Schutz davor,
   dass jemand versehentlich hineintippt oder -klickt. */
.kontakt__honigtopf {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   Anfahrt: Karte erst nach Klick (Zwei-Klick-Loesung)
   ---------------------------------------------------------------------- */

.anfahrt {
    padding-bottom: 110px;
}

.anfahrt__karte {
    position: relative;
    overflow: hidden;
    border-radius: var(--agrion-bdr-radius);
    background-color: var(--agrion-extra);
}

.anfahrt__karte iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
}

.anfahrt__platzhalter {
    padding: 60px 30px;
    text-align: center;
}

.anfahrt__adresse {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--agrion-black);
}

.anfahrt__hinweis {
    max-width: 560px;
    margin: 0 auto 24px;
    font-size: 15px;
}

.anfahrt__alternativ {
    margin: 20px 0 0;
    font-size: 15px;
}

.anfahrt__alternativ a {
    color: var(--bronner-green);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .kontakt {
        padding: 70px 0 50px;
    }

    .kontakt__formular {
        margin-top: 44px;
        padding: 34px 26px;
    }
}

/* -------------------------------------------------------------------------
   Impressum und Datenschutz – reine Lesetexte
   ---------------------------------------------------------------------- */

.rechtstext {
    padding: 100px 0;
}

.rechtstext__inner {
    max-width: 820px;
    margin: 0 auto;
}

/* Rechtstexte laufen in der Fließtextschrift, nicht in der Schreibschrift der
   Vorlage – die ist bei Paragrafen und Aktenzeichen kaum zu entziffern. */
.rechtstext h2,
.rechtstext h3 {
    font-family: var(--agrion-font);
    letter-spacing: 0;
    font-weight: 700;
}

.rechtstext h2 {
    margin: 46px 0 16px;
    font-size: 24px;
    color: var(--agrion-black);
}

.rechtstext h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    margin: 32px 0 10px;
    font-size: 19px;
    color: var(--agrion-black);
}

.rechtstext p {
    margin-bottom: 16px;
}

.rechtstext ul {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}

.rechtstext li {
    margin-bottom: 7px;
}

.rechtstext a {
    color: var(--bronner-green);
    text-decoration: underline;
    word-break: break-word;
}

.rechtstext em {
    display: block;
    padding: 14px 18px;
    border-left: 3px solid var(--bronner-yellow);
    background-color: var(--agrion-extra);
    font-style: normal;
    font-size: 15px;
}

@media (max-width: 767px) {
    .rechtstext {
        padding: 60px 0;
    }
}

/* Die Vorlage setzt bei .thm-btn keinen Rand – auf <button> greift dann aber die
   Browser-Vorgabe und man sieht einen dunklen Rahmen. Nur bei <a> fällt das nicht auf. */
button.thm-btn,
.thm-btn {
    border: 0;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   „Einblicke in unsere Arbeit“: ganze Kachel klickbar.

   Ein Bootstrap-.stretched-link am Titel würde hier nicht reichen – er richtet
   sich am nächsten positionierten Vorfahren aus, und das ist .project-two__content
   (absolut). Damit wäre nur die dunkle Textleiste klickbar. Deshalb eine eigene
   Fläche als direktes Kind von .project-two__single (position: relative).
   ---------------------------------------------------------------------- */

.project-two__flaeche {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--agrion-bdr-radius);
}

/* Titel einzeilig statt mitten im Wort umgebrochen („Bewäs / sern").
   Kasten und Abstände bleiben wie in der Vorlage – nur die Schriftgröße geht
   so weit herunter, dass das längste Wort in eine Zeile passt. */
.project-two__title {
    font-size: 22px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Unter 1200 px wird die Kachel schmaler, der Freiraum von 230 px rechts bleibt
   aber gleich – dort reicht der Platz sonst für kein einziges Wort. */
@media (max-width: 1199px) {
    .project-two__content {
        right: 90px;
    }

    .project-two__title {
        font-size: 19px;
    }
}

/* Dasselbe für die Leistungs-Kacheln auf Startseite und Übersichtsseite.
   Dort waren vorher nur der Titel und „Mehr dazu" klickbar, das Bild nicht.
   z-index muss über der Titel- und der Hover-Box liegen, die beide absolut
   im selben Stapelkontext sitzen. */
.services-two__flaeche {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--agrion-bdr-radius);
}

/* Weil die Fläche über Titel und Pfeil liegt, greift deren eigenes :hover nicht
   mehr. Die Zustände werden daher von der Kachel aus gesetzt – sieht ohnehin
   besser aus, weil die ganze Kachel reagiert. */
.project-two__single:hover .project-two__title a {
    color: var(--agrion-primary);
}

.project-two__single:hover .project-two__arrow a {
    color: var(--agrion-base);
    background-color: var(--agrion-white);
}

/* -------------------------------------------------------------------------
   Suchergebnisse
   ---------------------------------------------------------------------- */

.suchseite {
    padding: 90px 0 110px;
}

.suchseite__inner {
    max-width: 820px;
    margin: 0 auto;
}

.suchseite__form {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
}

.suchseite__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 20px;
    border: 1px solid #e2e0d9;
    border-radius: 8px;
    font-family: var(--agrion-font);
    font-size: 17px;
    color: var(--agrion-black);
    outline: none;
    transition: border-color 300ms ease;
}

.suchseite__form input:focus {
    border-color: var(--bronner-green);
}

.suchseite__form .thm-btn {
    flex: 0 0 auto;
}

.suchseite__anzahl {
    margin-bottom: 26px;
    color: var(--agrion-black);
}

.suchseite__hinweis {
    margin-bottom: 14px;
}

.suchseite__hinweis a {
    color: var(--bronner-green);
    text-decoration: underline;
}

.suchseite__liste {
    counter-reset: none;
}

.suchtreffer {
    padding: 24px 0;
    border-bottom: 1px solid #eceae4;
}

.suchtreffer:first-child {
    border-top: 1px solid #eceae4;
}

.suchtreffer__link {
    display: block;
    margin-bottom: 6px;
}

.suchtreffer__art {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bronner-green);
}

.suchtreffer__titel {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: var(--agrion-black);
    transition: color 300ms ease;
}

.suchtreffer__link:hover .suchtreffer__titel {
    color: var(--bronner-green);
}

.suchtreffer__teaser {
    margin-bottom: 4px;
    font-weight: 700;
}

.suchtreffer__auszug {
    margin: 0;
    font-size: 15px;
}

.suchtreffer mark {
    padding: 1px 3px;
    border-radius: 3px;
    color: var(--agrion-black);
    background-color: var(--bronner-yellow);
}

/* -------------------------------------------------------------------------
   Overlay „Angebot anfragen"
   ---------------------------------------------------------------------- */

.angebot {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.angebot[hidden] {
    display: none;
}

.angebot__hintergrund {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 25, 5, 0.72);
    cursor: pointer;
}

.angebot__fenster {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: auto;
    padding: 44px 46px 40px;
    border-radius: var(--agrion-bdr-radius);
    background-color: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    animation: angebot-auf 260ms ease;
}

@keyframes angebot-auf {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.angebot__schliessen {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 16px;
    color: var(--agrion-black);
    background-color: var(--agrion-extra);
    cursor: pointer;
    transition: background-color 300ms ease, color 300ms ease;
}

.angebot__schliessen:hover {
    color: #ffffff;
    background-color: var(--bronner-green);
}

.angebot__titel {
    margin-bottom: 8px;
    font-family: var(--agrion-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--agrion-black);
}

.angebot__vorspann {
    margin-bottom: 26px;
}

.angebot__vorspann a {
    font-weight: 700;
    color: var(--bronner-green);
}

.angebot__meldung {
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 8px;
    font-weight: 700;
}

.angebot__meldung--ok {
    color: #1f5c12;
    background-color: #e4f2dc;
}

.angebot__meldung--fehler {
    color: #8c2b20;
    background-color: #f7e2df;
}

.angebot [aria-invalid="true"] {
    border-color: #c0392b;
}

@media (max-width: 575px) {
    .angebot {
        padding: 0;
    }

    .angebot__fenster {
        min-height: 100%;
        border-radius: 0;
        /* unten kein Abstand: die Aktionsleiste schließt bündig ab */
        padding: 54px 22px 0;
    }

    /* Sechs Felder auf einem 390er-Schirm sind viel Scrollerei –
       das Textfeld deshalb auf etwa drei Zeilen kürzen. */
    .angebot textarea {
        height: 104px;
        min-height: 104px;
    }

    .angebot__vorspann {
        margin-bottom: 20px;
    }

    .angebot .kontakt__feld {
        margin-bottom: 16px;
    }

    /* Senden-Knopf bleibt beim Scrollen unten stehen */
    .angebot__aktion {
        position: sticky;
        bottom: 0;
        margin: 0 -22px;
        padding: 14px 22px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background-color: #ffffff;
        box-shadow: 0 -10px 24px rgba(22, 51, 11, 0.12);
    }

    .angebot__aktion .kontakt__pflicht {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .angebot__aktion .thm-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

/* Rechtliches-Links in der Fußleiste – gibt es in der Vorlage nicht,
   dort steht an der Stelle eine zweite Reihe Social-Icons. */
.site-footer__legal {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-footer__legal a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 400ms ease;
}

.site-footer__legal a:hover {
    color: var(--bronner-yellow);
}

@media (max-width: 767px) {
    .site-footer__bottom-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* Betriebsbild – breiter Bildstreifen auf der Unternehmen-Seite.
   In der Vorlage gibt es dafür nichts Passendes: „feature-two" benutzt ein Bild
   dieser Proportion nur als Hintergrund unter vier Kacheln (so auf der Startseite
   mit band-baumarbeiten.jpg). Hier soll das Bild für sich stehen, deshalb ein
   eigener, sehr kleiner Abschnitt.
   Die Höhe wächst mit der Fensterbreite, bleibt aber unter der Originalhöhe des
   Bildes (448 px), damit nichts hochskaliert wird. */
.betriebsbild {
    margin: 0;
    padding: 0;
}

.betriebsbild__bild {
    display: block;
    width: 100%;
    height: clamp(200px, 25vw, 448px);
    object-fit: cover;
    object-position: center;
}

/* Mobiles Menü – Kontaktzeilen unter der Navigation.
   Die ausgeklappte Leiste ist 300 px breit; nach Innenabstand, Symbolkreis und
   dessen Abstand bleiben für den Text 231 px. Die E-Mail-Adresse braucht bei
   14 px aber 236 px und bricht deshalb am Bindestrich um – im Menü stand
   „info@lohnunternehmen-" in der ersten und „bronner.de" in der zweiten Zeile.
   Eine Stufe kleiner und ein etwas schmalerer Abstand zum Symbol geben 14 px
   Luft, die Adresse steht dann in einer Zeile. Bewusst kein `nowrap`: sollte
   die Adresse einmal länger werden, soll sie umbrechen statt herauszuragen.
   Im Browser gemessen am 2026-09-16. */
.mobile-nav__contact li {
    font-size: 13px;
}

.mobile-nav__contact li > i {
    margin-right: 8px;
    /* Der Kreis darf im Flexkasten nicht schmaler gedrückt werden. */
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Kopfzeile: Logo mit Schriftzug (2026-10-12)
   ------------------------------------------------------------------------- */

/* Im Kopf steht das hochformatige Original mit Schriftzug (467.72 x 793.7),
   ohne den grauen Hintergrund.

   Gesetzt ist es so, dass die Schale des „b" GENAU dort sitzt, wo vorher die
   runde Bildmarke sass. Rechnung dazu:
     - vorher: logo-bronner.svg, 122px breit, left:-78px, bottom:-75px.
       In dieser Datei liegt der Kreis exakt mittig, also bei 61|61 im Bild.
       Die dunkle Leiste ist 45px hoch, das Bild endete 75px darunter.
       -> Kreismittelpunkt bei -17 | 59 ab der oberen linken Ecke der Leiste,
          Radius 59.3px.
     - jetzt: logo-bronner-text.svg, 122px breit, Faktor 122/467.72 = 0.2608.
       Der Kreis liegt dort bei 280.52|393.39 der viewBox, im Bild also bei
       115.2|161.5. Radius 144.4 x 0.4105 = 59.3px – genau der alte.
       -> damit er wieder auf -17|59 landet: left = -17-73.2 = -90px,
          top = 59-161.5 = -102px.

   Der Wert links ist am 2026-10-12 von Philipp auf -101px festgelegt: das Logo
   rueckt damit naeher an die Inhaltskante (die laege bei -78px). Dabei endet
   der Kreis bei 520px und stiess an „Startseite" bei 521px – deshalb bekommen
   Navigation und Kontaktzeile 100px Einzug statt der 75px der Vorlage, das sind
   25px Luft. Der Sticky-Balken beginnt 78px weiter links, dort also 178px. (Siehe unten: links steht -78px, damit
          das Logo den inneren Rahmen einhaelt.)

   Weil das Bild damit 102px ueber die Leiste hinausragt, braucht der ganze
   Kopf mehr Luft nach oben: die Vorlage setzt top:35px, das wuerde das Logo
   oben abschneiden. 80px lassen 36px Rand zum Seitenanfang.

   !important, weil die Regeln der Vorlage teils in Media Queries stehen. */
.main-header-two {
    top: 108px !important;
}

.main-header-two__logo {
    left: -101px !important;
    top: -103px !important;
    bottom: auto !important;
    z-index: 3;
}

.main-header-two__logo img {
    width: 192px;
    height: auto;
}

/* Unter 992px blendet die Vorlage die dunkle Kontaktleiste aus
   (agrion-responsive.css: main-header-two__top-left/right auf display:none).
   Der Kopf besteht dort praktisch nur aus der weissen Navileiste – die volle
   Logogroesse passt dazu nicht – das Logo haengt
   sonst zur Haelfte links aus dem Bild. Kleiner und weniger weit heraus,
   der Kreis bleibt dabei an der Kante der Leiste. */
@media (max-width: 991px) {
    .main-header-two {
        top: 75px !important;
    }

    .main-header-two__logo {
        left: -92px !important;
        top: -70px !important;
    }

    .main-header-two__logo img {
        width: 120px;
    }
}

/* Der Kopf sitzt wegen des ueberhaengenden Logos 95px tiefer als in der
   Vorlage (35 -> 130px). Das Logo reicht damit bis 354px hinunter, die
   Hero-Ueberschrift der Vorlage beginnt aber schon bei 314px – der Schriftzug
   lag auf dem ersten Wort. Deshalb hier derselbe Versatz nach unten.
   Unter 768px gilt oben top:70px, dort reicht weniger. */
.main-slider-two .container {
    padding-top: 400px;
}

@media (max-width: 991px) {
    .main-slider-two .container {
        padding-top: 250px;
    }
}

/* Beim Scrollen faehrt ab 130px der Sticky-Balken mit der Menueleiste ein
   (agrion.js, .stricked-menu). Die Vorlage gibt ihm z-index 991, der Kopf
   liegt aber auf 999 – das hochformatige Logo ragt so weit herunter, dass es
   ueber dem eingefahrenen Balken stehenblieb. Mit der runden Bildmarke fiel
   das nicht auf, die war kurz genug.

   1000 reicht: darueber liegen nur der mobile Menueueberzug (999991) und die
   Suche (99999), die sollen den Balken weiterhin verdecken. */
.stricky-header {
    z-index: 1000 !important;
}

/* Im Sticky-Balken begann die Menueleiste 153px weiter links als in der
   normalen Kopfzeile – beim Einfahren sprang „Startseite" sichtbar nach links.

   Die Vorlage rueckt die normale Leiste um `margin-left: 78px` plus
   `padding-left: 75px` ein (zusammen 153px, der Platz fuer den
   ueberhaengenden Anhaenger) und nullt im Sticky-Balken beides:
   `.stricky-header .main-menu-two__wrapper-inner { padding-left: 0;
   margin-left: 0 }`. Gemessen bei 1920px: Startseite normal bei 521px,
   im Balken bei 368px.

   Die 153px sind feste Werte, kein Prozentsatz – deshalb gilt derselbe
   Ausgleich auf jeder Breite. Unter 992px ist die Menueleiste ohnehin durch
   den Menueknopf ersetzt, der rechts sitzt; dort bleibt es wie gehabt. */

/* Der innere Rahmen muss eingehalten werden.
 Die Vorlage schiebt BEIDE Leisten mit `margin-left: 78px` nach rechts
   (agrion.css 1613 und 1737), damit der ueberhaengende Anhaenger mit
   `left:-78px` genau auf der Containerkante sitzt. Gemessen bei 1920px:
   Inhaltsbreite 368–1538, beide Leisten 446–1538.

   Unser Logo ist mit 192px breiter als die 122px der Vorlage. Mit left:-132px
   ragte es bis 314px und damit 54px ueber die linke Inhaltskante hinaus,
   waehrend Hero-Text und Ueberschrift bei 368px beginnen. Deshalb `left: -78px`
   wie in der Vorlage – die Logokante liegt damit exakt auf 368px.

   Folge: der Kreis wandert 54px nach rechts, seine rechte Kante liegt bei
   542px. Damit er nicht in „Startseite" und nicht in die Kontaktzeile laeuft,
   bekommen beide Leisten 125px Einzug statt der 75px der Vorlage – das sind
   96px bis zur Kreiskante plus 29px Luft. */
/* Im Sticky-Balken begann die Menueleiste 153px weiter links als in der
   normalen Kopfzeile – beim Einfahren sprang „Startseite" nach links.
   Die Vorlage rueckt die normale Leiste um margin-left:78 plus padding-left:75
   ein und nullt im Sticky beides. Gemessen bei 1920px: Startseite normal 521,
   im Balken 368. Mit dem auf 100 erhoehten Einzug sind es 78+100 = 178px.
   Die Werte sind fest, also derselbe Ausgleich auf jeder
   Breite. Unter 992px ist die Menueleiste durch den Menueknopf ersetzt. */
@media (min-width: 992px) {
    .stricky-header .main-menu-two__wrapper-inner {
        padding-left: 178px;
    }
}

/* Navigation und Kontaktzeile weg vom Kreis (siehe oben, left: -101px). */
@media (min-width: 992px) {
    .main-header-two__top-inner,
    .main-header-two .main-menu-two__wrapper-inner {
        padding-left: 100px !important;
    }
}

/* Hinweis zu class="ignore" an den beiden Betreff-Selects (kontakt.php und
   inc/angebot-overlay.php):

   agrion.js ruft am Ende `$('select:not(.ignore)').niceSelect()` auf. Das
   Plugin liegt zwar unter assets/vendors/nice-select/, wird aber von keiner
   Seite eingebunden – die Vorlage hat es in ihrer index2-Variante nicht dabei.
   Ergebnis war ein JavaScript-Fehler auf jeder Seite:
   „$(...).niceSelect is not a function" (agrion.js:1025). Der Fehler brach die
   restliche Initialisierung dieses Blocks ab.

   `.ignore` ist die Ausnahme, die agrion.js selbst vorsieht. Bewusst so statt
   das Plugin nachzuladen: es ersetzt das native Auswahlfeld durch ein eigenes
   Widget, und das Overlay setzt den Betreff per Skript (data-leistung) – das
   Widget wuerde den Wert dann nicht mitbekommen und etwas Falsches anzeigen.
   Ausserdem spart es eine weitere JS- und CSS-Datei fuer ein einziges Feld. */

/* Unter 992px die weisse Navileiste naeher an das Logo.

   Die Vorlage gibt ihr `margin-left: 78px` (agrion.css 1737), damit der
   122px breite runde Anhaenger danebenpasst. Mit dem hochformatigen Logo lag
   die Leiste dadurch zu weit rechts, das Logo stand daneben statt darauf.
   40px: der Kreis liegt auf der linken Kante der Leiste, der Schriftzug
   bleibt links davon frei. Bei 20 oder 0 wandert die Leiste unter den
   Schriftzug, auf dem Handy wird er dann angeschnitten. */
@media (max-width: 991px) {
    .main-menu-two__wrapper-inner {
        margin-left: 40px !important;
    }
}

/* Alle Hero-Slides gleich hoch.

   Die Slide-Hoehe richtet sich in der Vorlage nach dem Inhalt. „Raeumen &
   Streuen" bricht zweizeilig, die drei anderen Ueberschriften sind einzeilig –
   gemessen bei 1600px: Slide 3 war 932px hoch, die anderen 814px. Der Rahmen
   nimmt die Hoehe des hoechsten Slides an, also blieb auf den drei kurzen unten
   ein Streifen, den die Bildebene (.image-layer-two, inset 0 des Slides) nicht
   fuellte.

   Ueber die Ueberschrift laesst sich das nicht sauber ausgleichen: das Und-Zeichen
   ist ein eigener span mit anderer Schriftgroesse, zwei reservierte Zeilen lassen
   18px Rest. Deshalb strukturell: der swiper-wrapper ist ein Flex-Container, die
   Slides strecken sich auf die Hoehe des hoechsten. Das gilt auf jeder Breite und
   bleibt richtig, wenn sich Texte aendern. */
.main-slider-two .swiper-wrapper {
    align-items: stretch;
}

.main-slider-two .swiper-slide {
    height: auto;
}