/* ============================================================================
   Hand-CSS-Layer – Luczky-Bau. Lädt NACH theme.css (siehe base.html.twig).
   Reines, Node-frei editierbares CSS: alles, was Seiteninhalte brauchen und
   kein Tailwind-Utility ist. Der Build überschreibt diese Datei NIE – bei
   Änderungen selbst nach public/assets/themes/luczkybau/ kopieren.

   Seiteninhalte nutzen NUR die lb-*-Haken unten (am Bereich-Block, Feld
   „CSS-Klassen") – keine Tailwind-Utilities: der Build scannt Templates, nicht
   die Datenbank. Übersicht der Haken: README.md.

   Werte aus der Altseite (tn-template.css / tn-coretemplate.css).
   ========================================================================== */

:root {
    --lb-orange: #f59c00;
    --lb-red: #e30613;
    --lb-grey: #575656;
    --lb-line: #d5d5d5;
    --lb-gap: clamp(2.5rem, 5vw, 4rem);
}

body {
    color: var(--lb-grey);
    line-height: 1.75;
}

/* v4-Preflight setzt Buttons auf cursor:default – v3-Verhalten beibehalten. */
button,
[role="button"],
summary {
    cursor: pointer;
}

/* ---- Kopfleiste ------------------------------------------------------------ */

.lb-nav__link {
    color: var(--lb-grey);
}

.lb-nav__link:hover,
.lb-nav__link:focus-visible {
    color: var(--lb-red);
}

/* Aktiver Punkt wie auf der Altseite: rot und fett. */
.lb-nav__link.nav-active {
    color: var(--lb-red);
    font-weight: 700;
}

.lb-nav__sub .lb-nav__link {
    text-transform: none;
}

.lb-nav__icon {
    color: var(--lb-grey);
    transition: color .2s;
}

.lb-nav__icon:hover {
    color: var(--lb-orange);
}

.lb-nav__link:focus-visible,
.lb-nav__icon:focus-visible,
.lb-logo:focus-visible,
.lb-social a:focus-visible {
    outline: 2px solid var(--lb-orange);
    outline-offset: 3px;
}

/* Logo mit orangem Balken bis zum linken Fensterrand (Altseite: #nav::before, 200 × 49 px). Der Balken hängt am
   Link und skaliert mit dem Logo: Kopf = Jubiläums-Signatur (Balken verschwindet hinter dem grauen „45"-Kasten),
   Fuß = Wortmarke (Balken setzt deren orange Fläche nach links fort). z-index:-1 bleibt im Stapelkontext des
   Kopfes bzw. Fußes – über deren weißem Grund, unter dem Logo. Body hat overflow-x:hidden. */
.lb-logo {
    position: relative;
    display: block;
}

.lb-logo::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -100vw;
    right: 85%;
    top: 12%;
    height: 33%;
    background: var(--lb-orange);
}

.lb-logo--footer::before {
    right: 99%;
    top: 25%;
    height: 43.5%;
}

.lb-footer {
    position: relative;
    isolation: isolate;
    border-top: 1px solid var(--lb-line);
}

/* Instagram / Facebook */
.lb-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .875rem;
}

.lb-social a {
    display: inline-flex;
    transition: opacity .2s;
}

.lb-social a:hover {
    opacity: .75;
}

.lb-social svg {
    width: 1.75rem;
    height: 1.75rem;
}

@media (max-width: 639px) {
    .lb-social--head {
        display: none;
    }
}

/* Fuß-Links in einer Zeile, Punkt als Trenner (Altseite: „Kontakt . Datenschutz . Impressum"). */
.lb-footer__links li+li::before {
    content: ".";
    margin-right: .25rem;
}

.lb-footer a {
    color: inherit;
    text-decoration: none;
}

.lb-footer a:hover {
    color: var(--lb-orange);
}

/* ---- Bühne: Kopfbild vor den Breadcrumbs ------------------------------------ */
/* <main> ist eine Spalte. Die Breadcrumbs stehen im DOM vorn (base.html.twig); beginnt der Inhalt mit einem
   Kopfbild (Banner-Slider oder Hero-Block), rückt es optisch davor – Reihenfolge der Altseite: Bild, Pfad, Titel.
   Weil Flex-Ränder nicht zusammenfallen, gibt es Abstände nur nach OBEN (plus Polster am Ende von <main>). */
#content.lb-stage {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--lb-gap);
}

/* width:100% – sonst schrumpft ein Bereich mit `mx-auto` in der Flex-Spalte auf seine Inhaltsbreite
   (die Auto-Ränder schlucken den Platz); max-width und mx-auto zentrieren ihn weiter wie gewohnt. */
#content.lb-stage>* {
    order: 2;
    width: 100%;
    min-width: 0;
}

#content.lb-stage>.lb-crumbs {
    order: 1;
}

#content.lb-stage>.banner-slider:first-of-type,
#content.lb-stage>.nb-hero:first-of-type {
    order: 0;
}

/* Abstände zwischen Bereichen: nur oben. :where() hält die Regel bei (1,0,1) – jede Bereichs-Klasse
   (`#content .lb-…`, 1,1,0) überschreibt sie ohne !important. */
#content>section:where([class*="max-w-"]) {
    margin-block: var(--lb-gap) 0;
}

/* Erster Bereich unter dem Pfad: dicht an den Breadcrumbs (Altseite: Pfad, dann gleich der Titel). */
#content>.lb-crumbs~section:where([class*="max-w-"]):first-of-type {
    margin-top: 1.25rem;
}

/* Endet die Seite mit einem randlosen Band, schließt es bündig an den Fuß an. */
#content.lb-stage:has(> :is(.lb-band, .lb-tiles, .lb-videos):last-child) {
    padding-bottom: 0;
}

/* ---- Breadcrumbs ------------------------------------------------------------ */

.lb-crumbs {
    padding-top: 1.75rem;
    font-size: .75rem;
}

.lb-crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.lb-crumbs li+li::before {
    content: "//";
    margin-right: .25rem;
}

.lb-crumbs a {
    color: inherit;
    text-decoration: none;
}

.lb-crumbs a:hover {
    color: var(--lb-orange);
}

/* ---- Knöpfe ---------------------------------------------------------------- */

.lb-btn,
#content .nb-cta,
#content .nb-hero__cta--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .25rem;
    background: var(--lb-orange);
    color: #fff;
    padding: .7rem 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s;
}

.lb-btn:hover,
#content .nb-cta:hover,
#content .nb-hero__cta--primary:hover {
    background: var(--lb-red);
    color: #fff;
}

.lb-btn--ghost,
#content .nb-hero__cta--secondary {
    border-radius: .25rem;
    background: transparent;
    color: var(--lb-orange);
    box-shadow: inset 0 0 0 2px currentColor;
    padding: .7rem 1.5rem;
    font-weight: 500;
}

.lb-btn--ghost:hover {
    background: transparent;
    color: var(--lb-red);
}

/* ---- Inhalt: Typografie ----------------------------------------------------- */

#content .prose {
    --tw-prose-body: var(--lb-grey);
    --tw-prose-headings: var(--lb-grey);
    --tw-prose-links: var(--lb-orange);
    --tw-prose-bold: var(--lb-grey);
    --tw-prose-bullets: var(--lb-grey);
    --tw-prose-counters: var(--lb-grey);
    --tw-prose-quotes: var(--lb-grey);
    color: var(--lb-grey);
    font-size: inherit;
    line-height: inherit;
}

#content .prose :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.35;
    margin-top: 0;
}

/* Seitentitel: versal, fett, darunter ein oranger Strich (Altseite: section.breadcrumbs h1::after, 200 × 3 px). */
#content .prose h1 {
    position: relative;
    font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 1.75rem;
    margin-bottom: 2.75rem;
}

#content .prose h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    max-width: 50%;
    height: 3px;
    background: var(--lb-orange);
}

/* Zwischenüberschrift in Orange (Altseite: h2 {color:#f59c00}). */
#content .prose h2 {
    color: var(--lb-orange);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    margin-bottom: .75em;
}

#content .prose h3 {
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.75rem);
    margin-bottom: .6em;
}

#content .prose h4 {
    font-size: 1.25rem;
    margin-bottom: .6em;
}

#content .prose a {
    color: var(--lb-orange);
    text-underline-offset: .2em;
}

#content .prose a:hover {
    color: var(--lb-red);
}

#content .prose strong {
    font-weight: 700;
}

/* Zitate der Geschäftsführung: kursiv, ohne Anführungs-Deko des Prose-Plugins. */
#content .prose blockquote {
    border-left: 3px solid var(--lb-orange);
    font-weight: 400;
    font-style: italic;
    padding-left: 1.25rem;
}

#content .prose blockquote p::before,
#content .prose blockquote p::after {
    content: none;
}

/* Bilder eckig wie auf der Altseite (der Bild-Block setzt standardmäßig rounded-2xl). */
#content figure img {
    border-radius: 0;
}

/* ---- Kopfbild (Modul BannerSlider) ------------------------------------------- */
/* Nur Gestaltung – Markup und Verhalten liefert das Modul. Startseite fast bildschirmfüllend (Altseite:
   100vh − Kopf), Unterseiten ~38 % der Breite. Overlay wie die Schrift-Bilder der Altseite: Titel als oranges,
   Text als graues Schriftband unten links – hier als echter Text (lesbar, übersetzbar, für Suchmaschinen). */

#content .banner-slider {
    --banner-height: clamp(16rem, 38vw, 34rem);
    background: var(--lb-grey);
}

.site-home #content .banner-slider {
    --banner-height: max(26rem, calc(100svh - 11rem));
}

#content .banner-slide__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: none;
}

#content .banner-slide__overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding: 2rem 1rem clamp(2rem, 5vw, 3.5rem);
    background: none;
    text-align: left;
}

@media (min-width: 640px) {
    #content .banner-slide__overlay-inner {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #content .banner-slide__overlay-inner {
        padding-inline: 2rem;
    }
}

#content .banner-slide__title,
#content .banner-slide__text {
    margin: 0;
    padding: .2em .6em;
    color: #fff;
    font-size: clamp(1.25rem, .9rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    font-style: normal;
}

#content .banner-slide__title {
    background: rgb(245 156 0 / .82);
}

#content .banner-slide__text {
    background: rgb(87 86 86 / .82);
}

#content .banner-slide__cta {
    margin-top: .75rem;
    border-radius: .25rem;
    background: var(--lb-orange);
    color: #fff;
    padding: .7rem 1.5rem;
    font-weight: 500;
    text-decoration: none;
}

#content .banner-slide__cta:hover {
    background: var(--lb-red);
}

/* ---- Abschnitte (Haken am Bereich-Block) ------------------------------------- */

/* lb-band: randloses graues Band mit weißer, zentrierter Schrift (Startseite „Für Ihre Zukunft …").
   Fläche per border-image (der Outset zählt nicht zur Scrollbreite); der Inhalt behält die Bereichsbreite. */
#content .lb-band {
    border-image-source: linear-gradient(var(--lb-grey) 0 0);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    color: #fff;
    text-align: center;
}

#content section.lb-band,
#content .lb-band+section.lb-band {
    margin-top: 0;
}

#content .lb-band .prose {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-bold: #fff;
    --tw-prose-links: #fff;
    color: #fff;
}

#content .lb-band .prose :is(h1, h2, h3) {
    color: #fff;
    text-transform: uppercase;
}

#content .lb-band .prose :is(h1, h2) {
    position: relative;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 600;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

#content .lb-band .prose :is(h1, h2)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 160px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--lb-orange);
}

#content .lb-band .prose p {
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    font-weight: 500;
    line-height: 1.6;
}

#content .lb-band .prose a {
    color: #fff;
}

/* lb-tiles: zwei randlose Bilder nebeneinander ohne Abstand (Startseite), leichter Zoom bei Hover. */
#content .lb-tiles {
    max-width: none;
    padding-inline: 0;
    margin-top: 0;
}

#content .lb-tiles .grid,
#content .lb-videos .grid {
    gap: 0;
}

#content .lb-tiles .nb-col {
    overflow: hidden;
}

#content .lb-tiles figure {
    margin: 0;
}

#content .lb-tiles img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s ease;
}

#content .lb-tiles .nb-col:hover img {
    transform: scale(1.05);
}

/* lb-videos: Videos randlos nebeneinander auf Schwarz (Startseite). */
#content .lb-videos {
    max-width: none;
    padding-inline: 0;
    margin-top: 0;
    background: #000;
}

#content .lb-videos video {
    border-radius: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
}

#content .lb-videos figure {
    margin: 0;
}

/* lb-split: Text und Bild nebeneinander, vertikal mittig (Leistungen, Unternehmen). */
#content .lb-split .grid {
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3rem);
}

#content .lb-split img {
    width: 100%;
    height: auto;
}

/* lb-gallery: Bildraster gleich hoch (4:3), Lupe bei Hover wie auf der Altseite (portfolio-box). */
#content .lb-gallery .grid {
    gap: 1.5rem;
}

#content .lb-gallery figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

#content .lb-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#content .lb-gallery a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 1.75rem no-repeat;
    opacity: .6;
    transition: background-color .2s, background-size .2s, opacity .2s;
}

#content .lb-gallery a:hover::after,
#content .lb-gallery a:focus-visible::after {
    background-color: rgb(0 0 0 / .3);
    background-size: 2.5rem;
    opacity: 1;
}

/* lb-hoch: Bildraster im Hochformat (3:4) statt quer – zusammen mit lb-gallery (Leistungen). */
#content .lb-gallery.lb-hoch img {
    aspect-ratio: 3 / 4;
}

/* lb-gallery im grauen Band (Startseite „Außergewöhnliches Projekt"): Bilder ohne Rand, Lupe bleibt. */
#content .lb-band.lb-gallery {
    padding-top: 0;
}

/* Hochformat-Fotoreihe (Team: drei Bilder randlos breit, kleiner Abstand). */
#content .lb-portraits {
    max-width: none;
    padding-inline: clamp(0rem, 1vw, .75rem);
}

#content .lb-portraits .grid {
    gap: clamp(.5rem, 1.5vw, 1.25rem);
}

#content .lb-portraits figure {
    margin: 0;
}

#content .lb-portraits img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* lb-logos: Logos von Vereinen und Veranstaltungen (Engagement) – gleich hohe Flächen, Logo eingepasst. */
#content .lb-logos .grid {
    align-items: center;
    gap: 2rem;
}

#content .lb-logos figure {
    margin: 0;
}

#content .lb-logos img {
    width: 100%;
    height: 9rem;
    object-fit: contain;
}

/* lb-address: Anschrift neben dem Kontaktformular. */
#content .lb-address .prose p {
    margin-block: 0 1rem;
}

#content .lb-address .grid {
    column-gap: clamp(2rem, 5vw, 4rem);
}

/* lb-cols3: Einleitung in drei Spalten (Jobs, Theme-Bereich jobs_intro). */
.lb-cols3 {
    display: grid;
    gap: 1.5rem 2.5rem;
}

@media (min-width: 768px) {
    .lb-cols3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lb-cols3>p {
    margin: 0;
}

/* lb-timeline: Zeitleiste (Historie) nach dem Muster der simm-Chronik – je Eintrag ein Bereich: Bild links,
   Jahr (erster Absatz) und Text rechts. Linie und Punkt zeichnet das Theme; aufeinanderfolgende Einträge
   schließen ohne Lücke an, damit die Linie durchläuft. */
#content section.lb-timeline {
    position: relative;
    padding-left: 3.5rem;
    padding-bottom: 1.5rem;
}

#content section.lb-timeline+section.lb-timeline {
    margin-top: 0;
}

#content section.lb-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.25rem;
    width: 2px;
    background: rgb(245 156 0 / .35);
}

#content section.lb-timeline::after {
    content: "";
    position: absolute;
    top: 2.25rem;
    left: 1.25rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background: var(--lb-orange);
    box-shadow: 0 0 0 4px #fff;
    transform: translateX(calc(-50% + 1px));
}

#content .lb-timeline>.grid {
    background: #fff;
    border: 1px solid var(--lb-line);
    padding: 1.25rem;
    gap: 1rem;
    align-items: center;
    transition: box-shadow .3s ease;
}

#content .lb-timeline>.grid:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .06);
}

@media (min-width: 768px) {
    #content section.lb-timeline {
        padding-left: 5rem;
    }

    #content section.lb-timeline::before,
    #content section.lb-timeline::after {
        left: 1.5rem;
    }

    #content .lb-timeline>.grid {
        padding: 1.5rem;
        gap: 1.75rem;
    }

    #content .lb-timeline>.grid:has(> .nb-col:nth-child(2)) {
        grid-template-columns: 15rem 1fr;
    }
}

#content .lb-timeline figure {
    margin: 0;
}

#content .lb-timeline figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Jahr = erster Absatz der zweiten Spalte (strukturell, der Editor verwirft Klassen an Absätzen). */
#content .lb-timeline .prose:has(+ .prose > p)>p:only-child:first-child {
    font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--lb-orange);
    margin: 0 0 .75rem;
}

#content .lb-timeline .prose p {
    margin: 0;
}

/* ---- Modulseiten: Listen, Karten, Beiträge ---------------------------------- */

/* Zurück-Link über dem Seitentitel (Stelle, Beitrag, Kategorie). */
#content .lb-back {
    display: inline-block;
    margin-bottom: .75rem;
    color: var(--lb-orange);
    font-size: .875rem;
    text-decoration: none;
}

#content .lb-back:hover {
    color: var(--lb-red);
}

/* Liste wie auf der Altseite (Jobs): Pfeil, oranger fetter Titel; die ganze Zeile ist der Link. */
#content .lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--lb-line);
}

#content .lb-list__item {
    position: relative;
    padding: 1.25rem 0 1.25rem 2rem;
    border-bottom: 1px solid var(--lb-line);
}

#content .lb-list__item::before {
    content: "›";
    position: absolute;
    left: .5rem;
    top: 1.05rem;
    color: var(--lb-orange);
    font-size: 1.5rem;
    line-height: 1;
}

#content .lb-list__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

#content .lb-list__title a {
    color: var(--lb-orange);
    text-decoration: none;
}

#content .lb-list__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

#content .lb-list__item:hover .lb-list__title a {
    color: var(--lb-red);
}

#content .lb-list__item:focus-within {
    outline: 2px solid var(--lb-orange);
    outline-offset: 2px;
}

#content .lb-list__text {
    margin: .25rem 0 0;
}

#content .lb-list__meta {
    margin: .25rem 0 0;
    font-size: .875rem;
    opacity: .8;
}

/* Galerie-Kacheln (Projekte ab zwei Galerien). */
#content .lb-cards {
    list-style: none;
    margin: 0;
    padding: 0;
}

#content .lb-card {
    position: relative;
}

#content .lb-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#content .lb-card__title {
    margin: .75rem 0 0;
    font-size: 1.25rem;
    font-weight: 600;
}

#content .lb-card__title a {
    color: var(--lb-orange);
    text-decoration: none;
}

#content .lb-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Aktuelles: Beitragsliste mit Bild links, Datum, Titel, Anriss; die ganze Karte ist der Link. */
#content .lb-posts {
    display: grid;
    gap: 2rem;
}

#content .lb-post {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--lb-line);
}

@media (min-width: 768px) {
    #content .lb-post:has(> .lb-post__media) {
        grid-template-columns: 18rem 1fr;
        align-items: start;
    }
}

#content .lb-post__media {
    margin: 0;
    overflow: hidden;
}

#content .lb-post__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}

#content .lb-post:hover .lb-post__media img {
    transform: scale(1.04);
}

#content .lb-post__title {
    margin: .25rem 0 .5rem;
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
}

#content .lb-post__title a {
    color: var(--lb-orange);
    text-decoration: none;
}

#content .lb-post__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

#content .lb-post:hover .lb-post__title a {
    color: var(--lb-red);
}

#content .lb-post:focus-within {
    outline: 2px solid var(--lb-orange);
    outline-offset: 4px;
}

#content .lb-post__text {
    margin: 0;
}

#content .lb-post__more {
    margin: .75rem 0 0;
    color: var(--lb-orange);
    font-weight: 500;
}

/* Downloads-Akkordeon (Modul) in Markenfarben – nur Farben, Aufbau liefert das Modul. */
#content .downloads-accordion__trigger {
    color: var(--lb-grey);
}

#content .downloads-list__badge {
    background: var(--lb-orange);
    color: #fff;
}

#content .downloads-list__link:hover .downloads-list__label {
    color: var(--lb-orange);
}

/* ---- PopUp (Modul Popup) in Markenform – nur Tokens, Aufbau liefert das Modul ---- */

.np-popup {
    --np-popup-fg: var(--lb-grey);
    --np-popup-accent: var(--lb-orange);
    --np-popup-radius: .25rem;
    --np-popup-backdrop: rgb(40 40 40 / .6);
}

/* ---- Kontaktformular (Modul Contact) in Markenform ---------------------------- */

#content form input:not([type="checkbox"], [type="radio"], [type="file"]),
#content form textarea,
#content form select {
    border-color: var(--lb-line);
    border-radius: .25rem;
}

#content form input:focus,
#content form textarea:focus,
#content form select:focus {
    border-color: var(--lb-orange);
    box-shadow: 0 0 0 3px rgb(245 156 0 / .2);
    outline: none;
}

#content form button[type="submit"] {
    border-radius: .25rem;
    background: var(--lb-orange);
    color: #fff;
}

#content form button[type="submit"]:hover {
    background: var(--lb-red);
}

/* Geführtes Formular (Ausbildung): Weiter wie der Absende-Knopf, Zurück als Umriss. */
#content .cf-btn-primary {
    border-radius: .25rem;
    background: var(--lb-orange);
    color: #fff;
}

#content .cf-btn-primary:hover {
    background: var(--lb-red);
}

#content .cf-btn-secondary {
    border-radius: .25rem;
    border-color: var(--lb-line);
    color: var(--lb-grey);
}

/* Schrittleiste: aktueller Schritt in Markenfarbe. */
#content .cf-progress [aria-current],
#content .cf-progress .is-current {
    color: var(--lb-orange);
}

/* Listen im Fließtext ohne Absatz-Abstand je Punkt (der Editor legt Listenpunkte als <li><p> ab). */
#content .prose li>p {
    margin-block: .25em;
}

/* Seitentitel allein im Bereich: der Strich ist der Abschluss, der nächste Bereich bringt seinen Abstand mit. */
#content .prose h1:last-child {
    margin-bottom: 0;
}