/* Zentraler Content-Container, der Header, Hauptbereich und Footer in
   gleicher Breite ausrichtet. Header-/Footer-Hintergrund läuft full-width,
   nur der Inhalt wird auf max. 1280 px begrenzt und zentriert. So sitzen
   Logo-Kante, Login-Button und Content-Card bündig untereinander. */
.app-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* === Hersteller-Gitter: A–Z Buchstaben-Leiste ========================
   Volle Breite, Buchstaben strecken sich gleichmäßig (flex:1) und brechen
   auf schmalen Viewports um. Aktiver Buchstabe = Primary; Buchstaben ohne
   Treffer (.is-empty) ausgegraut. .ds-letter-hidden blendet gefilterte
   Karten aus (kombiniert mit d-none der Suche → UND-Logik). */
.brand-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1.25rem;
}
.brand-alphabet-btn {
    flex: 1 1 auto;
    min-width: 2rem;
    padding: .35rem .25rem;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: .375rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: #495057;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.brand-alphabet-btn:hover:not(.is-empty) { background: #f1f3f5; }
.brand-alphabet-btn.active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
.brand-alphabet-btn.is-empty {
    opacity: .4;
    cursor: default;
    color: #adb5bd;
}
[data-brand-item].ds-letter-hidden { display: none !important; }

/* Quill-Alignment-Klassen: der Rich-Text-Editor (Quill snow) markiert ausgerichtete
   Absätze über CSS-Klassen statt inline-Style. Im Frontend ist Quill's CSS nicht
   geladen, deshalb müssen wir die Klassen explizit aufnehmen, sonst bleibt alles
   links-bündig. */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* „Rahmen"-Klasse aus dem Editor (Frame-Toggle aus dem +-Menü) — ein einziges
   <div class="ds-content-frame">, das via Quill-Container-Blot mehrere <p>-
   Zeilen umschließt. Bootstrap-card-artiger Look. */
.ds-content-frame {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.ds-content-frame > :last-child { margin-bottom: 0; }
.ds-content-frame > :first-child { margin-top: 0; }

/* Textbereich-Inhalte: gleiches tight-paragraph-Verhalten wie im Quill-Editor.
   Bootstrap setzt sonst margin-bottom: 1rem auf jeden <p>, was Adress-/
   Kontaktblöcke (jede Zeile = ein <p>) mit großen Lücken auseinanderreißt.
   Bewusst gewollte Leerzeilen rendert Quill als <p><br></p> — das <br>
   nimmt weiterhin eine Zeilenhöhe ein und sorgt für die optische Trennung
   zwischen Blöcken (z. B. zwischen „Firmensitz" und „Telefon"). */
.textbereich-module p { margin: 0; padding: 0; }
/* Listen behalten ihre Default-Margins; bei Überschriften reicht ein
   etwas dezenterer Abstand, damit sie sich visuell vom Folge-Text absetzen. */
.textbereich-module h1,
.textbereich-module h2,
.textbereich-module h3,
.textbereich-module h4 { margin-top: 1rem; margin-bottom: .5rem; }
.textbereich-module h1:first-child,
.textbereich-module h2:first-child,
.textbereich-module h3:first-child,
.textbereich-module h4:first-child { margin-top: 0; }
/* Direkt aufeinanderfolgende Überschriften (Titel + Untertitel) dicht halten —
   sonst schiebt das margin-top des zweiten Headings es im Frontend zu weit vom
   ersten weg (im Quill-Editor stehen die Zeilen enger). */
.textbereich-module :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }

.hover-shadow:hover {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    border-color: #0d6efd !important;
}

/* === Kategorie-Slider ============================================
   Horizontaler Scroll-Snap-Track ohne Zusatz-Library. Anzahl sichtbarer
   Karten am Desktop über --slider-cols (vom Modul gesetzt). Mobil/Tablet
   feste Stufen, damit immer ein „Peek" der nächsten Karte sichtbar ist. */
.category-slider-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox: Scrollbar ausblenden */
    -ms-overflow-style: none;
    padding-bottom: .25rem;
}
.category-slider-track::-webkit-scrollbar { display: none; }
.category-slider-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    /* mobil: ~2 Karten sichtbar */
    width: calc((100% - 1rem) / 2);
}
@media (min-width: 768px) {
    /* Tablet: ~3 Karten */
    .category-slider-item { width: calc((100% - 2rem) / 3); }
}
@media (min-width: 992px) {
    /* Desktop: nach Admin-Wahl (var). N Karten → (N-1) Lücken à 1rem. */
    .category-slider-item {
        width: calc((100% - (var(--slider-cols, 5) - 1) * 1rem) / var(--slider-cols, 5));
    }
}

.category-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
}
.category-slider-nav:hover { background: #f1f3f5; }
.category-slider-prev { left: -8px; }
.category-slider-next { right: -8px; }
.category-slider-nav:disabled { opacity: 0; pointer-events: none; }

#searchResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}

#searchResults .dropdown-item {
    white-space: normal;
}

/* Suchergebnisse: kompakte Zeilen, einheitliche Schrift (keine Hervorhebung) */
#searchResults .search-result-item {
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.3;
}

#searchResults .search-result-item .search-sep {
    color: #adb5bd;
    margin: 0 .15rem;
}

/* === Filter-Leiste (filter_bar) ===================================== */
/* Layout angelehnt an die Essays-Filterleiste: Suchfeld mit innenliegendem
   Icon + Such-Button, daneben das Kategorie-Listenfeld. Light-Theme-Variante.
   Optional beim Scrollen oben fixiert (is-sticky). */
.filter-bar-module.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.filter-bar-module .ds-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Such-Gruppe (Feld + Button) nimmt den freien Platz ein */
.filter-bar-module .ds-filter-search-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-bar-module .ds-filter-half { flex: 1 1 0; min-width: 0; }

.filter-bar-module .ds-filter-search {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.filter-bar-module .ds-filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    pointer-events: none;
    font-size: .95rem;
}
.filter-bar-module .ds-filter-search-input { padding-left: 34px; }
.filter-bar-module .ds-filter-search-btn { flex: 0 0 auto; }

/* Kategorie-Listenfeld rechts, feste Mindestbreite (wie die Referenz) */
.filter-bar-module .ds-filter-category {
    flex: 0 0 auto;
    min-width: 200px;
    width: auto;
}

/* Mobil (< 768 px): Suchleiste volle Breite, Listenfeld darunter volle Breite */
@media (max-width: 767.98px) {
    .filter-bar-module .ds-filter-row { flex-wrap: wrap; }
    .filter-bar-module .ds-filter-search-group { flex: 1 1 100%; }
    .filter-bar-module .ds-filter-category { flex: 1 1 100%; min-width: 0; }
}

/* === model_filter_bar: Felder mit optionalen Labels (Spalten) ======== */
/* Jede Spalte = optionaler <small>-Text über dem Feld; Felder unten bündig. */
.filter-bar-module .ds-mfb-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}
.filter-bar-module .ds-mfb-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
}
.filter-bar-module .ds-mfb-col-search { flex: 1 1 0; min-width: 0; }
.filter-bar-module .ds-mfb-sublabel { line-height: 1.2; }
@media (max-width: 767.98px) {
    .filter-bar-module .ds-mfb-row { flex-wrap: wrap; }
    .filter-bar-module .ds-mfb-col { flex: 1 1 100%; }
}

/* === „Modell nicht gefunden"-Box (model_filter_bar) ================== */
/* Jumbotron-artige Call-out-Box, die app.js bei 0 Suchtreffern einblendet. */
.filter-bar-module .model-notfound {
    margin-top: 1rem;
    padding: 2.5rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
}
.filter-bar-module .model-notfound-icon {
    display: block;
    font-size: 3rem;
    line-height: 1;
    color: #0d6efd;
}
.filter-bar-module .model-notfound-text {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* === Footer-Spalten (Frontend) ===================================== */
.footer-module .footer-cols-divider { border-color: rgba(255, 255, 255, .15); opacity: 1; }
.footer-module .footer-col-link:hover { color: #fff !important; }

/* Footer-Spaltentitel: Rich-Text (Quill). KEINE automatische Schriftstärke,
   -größe oder Farbe — alles kommt ausschließlich aus dem Editor. Nur die
   Default-Block-Margins (Quills <p>/Headings) werden geglättet (strukturell). */
.footer-module .footer-col-title p { margin: 0; }
.footer-module .footer-col-title :is(h1, h2, h3, h4, h5, h6) { margin: 0; }

/* === Footer-Spalten: EXAKT gleicher Zeilenabstand überall ============
   Egal ob <p>, <ul>/<ol> oder <li> — jede Zeile im Footer-Spaltenbereich nutzt
   dieselbe line-height und hat keine Block-Margins/Paddings. !important, um
   Bootstrap-Defaults (p-Margin, li-Listendarstellung) sicher zu überschreiben.
   Hinweis: nur p/ul/ol/li werden zurückgesetzt — NICHT die Spalten-<div>s, damit
   die Bootstrap-Gutter (Spaltenabstände) erhalten bleiben. */
.footer-module .footer-cols,
.footer-module .footer-cols * { line-height: 1.5 !important; }
.footer-module .footer-cols p,
.footer-module .footer-cols ul,
.footer-module .footer-cols ol,
.footer-module .footer-cols li {
    margin: 0 !important;
    padding: 0 !important;
}
.footer-module .footer-cols ul,
.footer-module .footer-cols ol { list-style: none !important; }
.footer-module .footer-cols li { display: block !important; }

/* === Footer: Zahlungsarten-Leiste ==================================== */
/* Monochrom, gedämpftes Grau wie der übrige Footer; dünne Trennlinie oben;
   horizontale Reihe, auf Mobile umbrechend (flex-wrap). */
.footer-module .footer-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.1rem 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    /* Eigene Trennlinie ÜBER der Leiste (zwischen Links und Zahlungsarten) —
       analog zur bestehenden HR. Darunter folgt die HR vor dem Copyright. */
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.footer-module .footer-payment {
    display: flex;
    flex-direction: row;       /* Icon links, Text rechts daneben */
    align-items: center;       /* Icon und Text vertikal mittig zueinander */
    gap: .55rem;
    color: #adb5bd;            /* helles, gedämpftes Grau – kein Branding */
}
.footer-module .footer-payment i {
    font-size: 1.8rem;         /* einheitliche Icon-Größe */
    line-height: 1;
    flex: 0 0 auto;
    color: inherit;            /* monochrom: gleiche Grau-Farbe wie das Label */
}
.footer-module .footer-payment-label {
    display: flex;
    flex-direction: column;    /* Beschriftung + optionale Unterzeile gestapelt */
    justify-content: center;
    line-height: 1.15;
    font-size: .95rem;         /* größere, gut sichtbare Beschriftung */
    text-align: left;
}
.footer-module .footer-payment-sub {
    font-size: .72rem;         /* kleine Unterzeile (per Vorkasse / girocard) */
    opacity: .72;
}

/* === Login-Modul: vollflächiges Hintergrundbild + schwebende Card =====
   Das Bild bedeckt die GANZE Section (cover, volle Breite × Höhe). Darüber ein
   durchgehender dunkler Overlay/Verlauf. Die Login-Card schwebt rechts (vertikal
   mittig), die Feature-Punkte unten links. Füllt im Body-Flex-Column den freien
   Platz (flex: 1) → kein weißer Balken. */
.login-fullbg {
    position: relative;
    display: flex;
    align-items: center;          /* Card vertikal mittig */
    justify-content: flex-end;    /* Card rechts */
    flex: 1 0 auto;
    min-height: 480px;
    padding-left: 1.5rem;
    padding-right: clamp(1.5rem, 6vw, 6rem);
    background-color: #131a2a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #e8ecf3;
}
/* Durchgehender dunkler Overlay über das GESAMTE Bild (unter Card/Features) */
.login-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(8,12,22,.9) 0%, rgba(8,12,22,.3) 50%, rgba(8,12,22,.35) 100%),
        rgba(8,12,22,.25);
}
/* Feature-Band: volle Breite am Boden; der innere .app-container zentriert auf
   1280px und gibt das gleiche linke Padding wie der Footer → Feature-Spalte
   fluchtet linksbündig mit dem übrigen Seiteninhalt. */
.login-features {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
}
.login-features .app-container {
    padding-top: 2.75rem;
    padding-bottom: 3rem;
}
.login-features-col {
    display: flex; flex-direction: column; gap: 1.4rem;
    max-width: 460px;
}
.login-feature { display: flex; align-items: flex-start; gap: 1rem; }
.login-feature i { font-size: 1.5rem; line-height: 1; color: #fff; flex: 0 0 auto; margin-top: .15rem; }
.login-feature-title { font-weight: 700; color: #fff; }
.login-feature-sub { font-size: .9rem; color: rgba(255,255,255,.78); }

/* Card-Wrap: schwebendes Panel rechts, über dem Overlay (z-index) */
.login-card-wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: 430px;
}
.login-card {
    width: 100%; max-width: 430px;
    background: #1a2233;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.1rem;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-heading { font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 .35rem; }
.login-sub { color: #97a2b6; margin: 0 0 1.6rem; }

.login-field { position: relative; margin-bottom: 1rem; }
.login-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8b93a7; font-size: 1.05rem; pointer-events: none; }
.login-input {
    width: 100%;
    background: #0e1320;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .6rem;
    color: #fff;
    padding: .7rem .9rem .7rem 2.6rem;
    font-size: .95rem;
}
.login-input.has-toggle { padding-right: 2.6rem; }
.login-input::placeholder { color: #6b7585; }
.login-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 .2rem rgba(59,130,246,.2); }
.login-pass-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #8b93a7; padding: .25rem .45rem; cursor: pointer;
}
.login-pass-toggle:hover { color: #fff; }

.login-alert {
    background: rgba(220,53,69,.15); border: 1px solid rgba(220,53,69,.4);
    color: #f1aab0; border-radius: .5rem; padding: .5rem .75rem; font-size: .85rem; margin-bottom: 1rem;
}

.login-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: .25rem 0 1.25rem; font-size: .9rem;
}
.login-remember { display: inline-flex; align-items: center; gap: .5rem; color: #b9c2d4; margin: 0; cursor: pointer; }
.login-remember input { accent-color: #3b82f6; width: 16px; height: 16px; }
.login-link { color: #3b82f6; text-decoration: none; }
.login-link:hover { color: #60a5fa; text-decoration: underline; }

.login-btn-primary {
    display: block; width: 100%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border: none; border-radius: .6rem; color: #fff; font-weight: 600;
    padding: .8rem 1rem; font-size: 1rem; cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}
.login-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgba(37,99,235,.35); }

.login-divider { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0; color: #6b7585; font-size: .85rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12); }

.login-social {
    display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
    background: #0e1320; border: 1px solid rgba(255,255,255,.14); border-radius: .6rem;
    color: #e8ecf3; text-decoration: none; padding: .7rem 1rem; font-weight: 500; margin-bottom: .75rem;
    transition: background .15s ease, border-color .15s ease;
}
.login-social:hover { background: #141b2b; color: #fff; border-color: rgba(255,255,255,.25); }
.login-social i { font-size: 1.1rem; }

.login-register { text-align: center; color: #97a2b6; margin: 1.4rem 0 0; font-size: .9rem; }

/* Responsive: Spalten untereinander, Bild oben (reduziert), Features ausgeblendet */
@media (max-width: 767.98px) {
    .login-fullbg { justify-content: center; padding-left: 1rem; padding-right: 1rem; }
    .login-features { display: none; }
    .login-card-wrap { max-width: 460px; }
    .login-card { padding: 1.75rem; }
}

/* === Leistungen-Karte: seitlich einfahrender Aktions-Button ===========
   Beim Hover gleitet rechts ein Button über die volle Kartenhöhe herein
   (Slide-in). Die Leiste ÜBERLAPPT den Text — der Inhalt bewegt sich NICHT.
   Damit der Preis dabei nie verdeckt wird, liegt das Preis-Badge per höherem
   z-index immer obenauf; der Plus-/Mülleimer-Button sitzt vertikal mittig in
   der Leiste (NICHT auf Höhe des Preises oben rechts). Blau + Plus = hinzufügen;
   bei ausgewähltem Artikel (.is-selected) Rot + Mülleimer = entfernen.
   Auf Touch-Geräten (kein Hover) ist der Button dauerhaft sichtbar; dort bekommt
   der Inhalt statischen Platz (kein dynamisches Springen → unkritisch). */
.service-card { position: relative; overflow: hidden; --sca-w: 56px; --sca-gap: 12px; }
.service-card-action {
    position: absolute; top: 0; right: 0; height: 100%;
    width: var(--sca-w); border: 0; padding: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem; line-height: 1;
    background: var(--bs-primary, #0d6efd);   /* blau = hinzufügen */
    transform: translateX(100%);              /* eingefahren */
    transition: transform .25s ease, background-color .15s ease;
    cursor: pointer;
}
/* Preis bleibt IMMER sichtbar: liegt über der Leiste (z-index) UND gleitet beim
   Hover um die Leistenbreite nach links aus der Leiste heraus (nur das Badge
   bewegt sich, der übrige Text bleibt stehen und wird überlappt). */
.service-card .card-body { position: relative; }
.service-card .card-body .badge { position: relative; z-index: 2; transition: transform .25s ease; }
/* Die Leiste erscheint NUR, wenn die Leistung angeklickt (= im Warenkorb) ist —
   KEIN Einblenden beim Hover. Im Warenkorb: grün + Warenkorb-Icon, dauerhaft
   offen; der Preis ist entsprechend nach links verschoben und bleibt sichtbar. */
.service-card.is-selected .service-card-action {
    transform: translateX(0);
    background: var(--bs-success, #198754);
}
.service-card.is-selected .card-body .badge {
    transform: translateX(calc(-1 * (var(--sca-w) + var(--sca-gap))));
}
.service-card-action:hover { filter: brightness(.93); }

/* ── Navbar-Suchmaske ─────────────────────────────────────────────────
   Auf Desktop (≥lg) echt mittig über die volle Navbar-Breite positioniert,
   auf Mobil im normalen Fluss (im aufgeklappten Menü). Lupen-Icon liegt
   links im Feld; der Input bekommt entsprechend Innenabstand links. */
/* === Header-Topbar (dünne Leiste über der Navigation) ============== */
.header-topbar { font-size: .8rem; line-height: 1.2; padding: 4px 0; }
.header-topbar-link { color: rgba(255,255,255,.85); text-decoration: none; white-space: nowrap; }
.header-topbar-link:hover { color: #fff; text-decoration: underline; }
.header-topbar-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .header-topbar { font-size: .72rem; padding: 3px 0; }
    .header-topbar-right { gap: .6rem !important; }
}

.navbar-search { position: relative; max-width: 400px; width: 100%; }
@media (min-width: 992px) {
    .navbar-search { position: absolute; left: 50%; transform: translateX(-50%); }
    /* Mit Kategorie-Select davor: der Wrap ist das zentrierte Element,
       die Suche darin läuft wieder statisch mit (nicht mehr absolut). */
    .navbar-search-wrap { position: absolute; left: 50%; transform: translateX(-50%); width: min(600px, 62vw); }
    .navbar-search-wrap .navbar-search { position: relative; left: auto; transform: none; max-width: none; }
}
.navbar-search-icon {
    position: absolute;
    left: .75rem; top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    z-index: 5;
}
.navbar-search input { padding-left: 2.1rem; }

/* === Breadcrumb-Modul =============================================== */
/* Eigener Stacking-Context, damit die Links anklickbar bleiben, falls ein
   nachfolgendes Modul (z. B. Checkout) mit einem .row-Gutter-Negativrand
   (margin-top:-1.5rem bei .g-4) nach oben über den Breadcrumb ragt und sonst
   dessen Klickfläche abfangen würde. */
.breadcrumb-module {
    position: relative;
    z-index: 1;
}

/* === SEO-Text „weiterlesen" (erste N Zeilen, Rest aufklappbar) ===== */
.seo-readmore .seo-readmore-body {
    display: -webkit-box;
    -webkit-line-clamp: var(--rm-lines, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.seo-readmore.is-open .seo-readmore-body {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.seo-readmore-toggle { margin-top: .4rem; text-decoration: none; font-weight: 600; }
.seo-readmore-toggle:hover { text-decoration: underline; }