/* =====================================================================
   assets/dark-fix.css — Lesbarkeit in beiden Modi

   Gemessen wurde der Kontrast jedes Textes gegen seinen tatsächlichen
   Hintergrund. Alles unter 4.5:1 gilt als schwer lesbar (Richtwert der
   Web-Zugänglichkeitsrichtlinien WCAG AA). Behoben werden hier genau
   die Stellen, die durchgefallen sind - nichts weiter.

   Einbinden im <head> jeder Seite, NACH dem eigenen <style>-Block:
       <link rel="stylesheet" href="assets/dark-fix.css">
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. SLIDER-TEXTE   (schwerster Fall: Kontrast 1.03:1)

   Im Slider-Editor lässt sich einzelnen Wörtern eine feste Farbe geben.
   Der Titel der Startseite steht auf #031029 - fast schwarz. Auf dem
   hellen Verlauf ist das richtig, im Dunkelmodus verschwindet der Text
   praktisch im Hintergrund.

   Lösung: Im Dunkelmodus erben alle Auszeichnungen innerhalb von Titel
   und Untertext die helle Textfarbe des Sliders. Die Farbwahl bleibt für
   den hellen Modus unangetastet.
   --------------------------------------------------------------------- */
html.site-dark .cms-slide-title,
html.site-dark .cms-slide-title *,
html.site-dark .cms-slide-text,
html.site-dark .cms-slide-text * {
    color: #f8fafc !important;
}

/* Ausnahme: Links im Slider dürfen sich farblich abheben */
html.site-dark .cms-slide-title a,
html.site-dark .cms-slide-text a {
    color: #93c5fd !important;
}


/* ---------------------------------------------------------------------
   2. "WEBSEITE BESUCHEN"   (Kontrast 3.16:1)

   Die Referenzkarten setzen den Link fest auf #2563eb. Auf weissem Grund
   gut, auf dem dunklen Kartenhintergrund zu dunkel.
   --------------------------------------------------------------------- */
html.site-dark .content-text a span,
html.site-dark .content-text a {
    color: #60a5fa !important;
}


/* ---------------------------------------------------------------------
   3. HERVORHEBUNGEN IM FLIESSTEXT   (Kontrast 4.44:1 - grenzwertig)

   Die Sätze im Abschnitt "Kennen Sie das?" beginnen mit einem farbigen
   <strong>. Ein helleres Blau bringt es klar über die Schwelle.
   --------------------------------------------------------------------- */
html.site-dark .content-text strong[style*="#3b82f6"],
html.site-dark .content-text strong[style*="3b82f6"] {
    color: #7dabf8 !important;
}

/* Und derselbe Fall im HELLEN Modus: #3b82f6 auf dem hellgrauen Kasten
   #f8fafc ergibt nur 3.52:1. Ein Ton dunkler bringt 5.17:1 - optisch
   praktisch derselbe Blauton, aber klar lesbar. */
.content-text strong[style*="#3b82f6"],
.content-text strong[style*="3b82f6"] {
    color: #2563eb !important;
}


/* ---------------------------------------------------------------------
   4. FOOTER-SPALTENÜBERSCHRIFTEN   (Kontrast 3.93:1 im HELLEN Modus)

   Die kleinen gesperrten Überschriften ("Website", "Kontakt") stehen auf
   #64748b. Auf dem sehr dunklen Footer-Grund ist das zu schwach - das
   betrifft beide Modi, nicht nur den dunklen.
   --------------------------------------------------------------------- */
.site-footer .footer-col h3 {
    color: #94a3b8 !important;
}


/* ---------------------------------------------------------------------
   5. FOOTER-BUTTON "PROJEKT ANFRAGEN"   (Kontrast 1.41:1 im Dunkelmodus)

   Der Knopf hat weisse Schrift auf blauem Grund. Die Regel
   "html.site-dark .footer-col a { color:#9aa1ad !important }" trifft
   ihn mit - dadurch wird die Schrift grau auf Blau und praktisch
   unlesbar. Hier gezielt zurückgenommen.

   Zusätzlich das Blau etwas aufgehellt: Weiss auf #3b82f6 liegt bei
   3.68:1, auf #2563eb bei 5.17:1.
   --------------------------------------------------------------------- */
.site-footer .footer-col a[style*="border-radius:999px"],
.site-footer .footer-col a[style*="border-radius: 999px"],
html.site-dark .site-footer .footer-col a[style*="border-radius:999px"],
html.site-dark .site-footer .footer-col a[style*="border-radius: 999px"] {
    color: #ffffff !important;
    background: #2563eb !important;
}


/* ---------------------------------------------------------------------
   6. KLEINE ÜBERSCHRIFTEN IN KARTEN

   h4 wird im Dunkelmodus pauschal auf #9aa1ad gesetzt - dieselbe Farbe
   wie der Fliesstext darunter. Dadurch hebt sich der Kartentitel nicht
   mehr ab. Etwas heller macht die Gliederung wieder sichtbar.
   --------------------------------------------------------------------- */
html.site-dark .content-block h4,
html.site-dark .content-text h4 {
    color: #e2e8f0 !important;
}


/* ---------------------------------------------------------------------
   7. KATEGORIE-ZEILEN ÜBER DEN KARTENTITELN

   "REISEBÜRO", "HANDWERK", "INDUSTRIE" stehen auf #2563eb.
   --------------------------------------------------------------------- */
html.site-dark .content-text p[style*="letter-spacing"] {
    color: #60a5fa !important;
}


/* ---------------------------------------------------------------------
   8. PREISKARTEN im Dunkelmodus

   Die Karten haben einen weissen Grund fest im Stil. Der pauschale
   Dunkelmodus-Umbau erwischt sie, die Innentexte bleiben aber dunkel.
   --------------------------------------------------------------------- */
/* Zuerst die Karte selbst. Ohne diese Regel bleibt sie weiss, waehrend
   die Ueberschrift hell wird - dann steht heller Text auf weissem Grund
   und ist unlesbar. Genau dieser Fall trat auf der Preisseite auf. */
html.site-dark .pricing-card {
    background-color: #1b2029 !important;
    border-color: #2a2f38 !important;
}
/* Das hervorgehobene Paket ist schon dunkel - dort nur den Rand angleichen,
   sonst verschwindet der Unterschied zu den uebrigen Karten. */
html.site-dark .pricing-card.featured,
html.site-dark .pricing-card[style*="#0f172a"],
html.site-dark .pricing-card[style*="#111827"] {
    background-color: #0b0f17 !important;
    border-color: #2563eb !important;
}

html.site-dark .pricing-card-title { color: #9aa1ad !important; }
html.site-dark .pricing-card-price { color: #f2f3f5 !important; }
html.site-dark .pricing-card-features li {
    color: #cbd5e1 !important;
    border-bottom-color: #2a2f38 !important;
}
html.site-dark .pricing-card .cms-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
}




/* =====================================================================
   10. ABSCHNITT „KENNEN SIE DAS?" IM STIL DES DUNKLEN BANDES

   Vorbild ist das Band mit den sechs Kacheln weiter unten. Derselbe
   Aufbau wird hier auf die Zitate angewandt.

   WICHTIG: Die Regeln hängen NICHT an festen Blocknummern, sondern
   erkennen die Zitate am Inhalt - ein Kasten mit hellem Grund, dessen
   Text mit einer blauen Hervorhebung beginnt. Dadurch reihen sich neue
   Zitate von selbst ein, ohne dass hier etwas nachgetragen werden muss.

   Absätze OHNE solche Hervorhebung (Einleitung und Schlusssatz) bleiben
   frei stehender Text - sie sind keine Zitate.
   ===================================================================== */

/* Kurzschreibweise für "ist ein Zitatkasten" */
/* --- Das Band selbst --------------------------------------------- */
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"]) {
    background: #0f172a !important;
    padding: 3.6rem 0 4rem !important;
    position: relative;
}
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(760px 380px at 26% 12%, rgba(37,99,235,.20), transparent 68%);
    pointer-events: none;
}
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"]) > .content-row {
    position: relative;
    z-index: 1;
    align-items: stretch;
}

/* --- Überschrift und freie Absätze -------------------------------- */
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"]) h2 {
    color: #ffffff !important;
    border: none !important;
    padding-bottom: 0 !important;
    text-align: center;
    margin: 0 0 .7rem !important;
    font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
    letter-spacing: -.02em;
}

/* Einleitung und Schlusssatz: kein Kasten, kein Anführungszeichen.
   Erkannt daran, dass KEINE blaue Hervorhebung im Absatz steht. */
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"])
  .content-col:not(:has(strong[style*="3b82f6"])) .content-block {
    background: none !important;
    border: none !important;
    padding: .2rem 0 1.6rem !important;
    box-shadow: none !important;
}
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"])
  .content-col:not(:has(strong[style*="3b82f6"])) .content-text p {
    color: #94a3b8 !important;
    text-align: center;
    margin: 0 auto !important;
}
section.content-section-band:has(.content-block[style*="#f8fafc"] .content-text p strong[style*="3b82f6"])
  .content-col:not(:has(strong[style*="3b82f6"])) .content-text p::before {
    content: none !important;
}

/* --- Die Zitat-Kacheln -------------------------------------------- */
.content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) > .content-block {
    background: linear-gradient(160deg, rgba(37,99,235,.16), rgba(15,23,42,.15)) !important;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px !important;
    padding: 1.4rem 1.5rem !important;
    height: 100%;
    transition: border-color .2s, transform .2s;
}
.content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) > .content-block:hover {
    border-color: rgba(59,130,246,.5);
    transform: translateY(-3px);
}

/* Anführungszeichen nur bei echten Zitaten */
.content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) .content-text p::before {
    content: "\201C";
    display: block;
    font-size: 2.2rem;
    line-height: .8;
    color: rgba(96,165,250,.45);
    margin-bottom: .45rem;
    font-family: Georgia, serif;
}
.content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) .content-text p {
    color: #cbd5e1 !important;
    font-size: .93rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
.content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) .content-text strong {
    color: #ffffff !important;
    display: block;
    margin-bottom: .3rem;
    font-size: .98rem;
}

/* --- Raster: drei nebeneinander ----------------------------------- */
@media (min-width: 1000px) {
    .content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}
@media (min-width: 700px) and (max-width: 999px) {
    .content-col:has(> .content-block[style*="#f8fafc"] > .content-text > p > strong[style*="3b82f6"]) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* =====================================================================
   11. HÄUFIGE FRAGEN KOMPAKTER

   Sieben Kästen über die volle Breite untereinander wirken gestreckt:
   ein Satz Frage, dann ein Meter Leere bis zur nächsten. Zweispaltig
   gesetzt und enger gefasst, mit klarem Plus-Zeichen als Hinweis zum
   Aufklappen.

   Auf dem Handy bleibt es einspaltig - nebeneinander wäre dort nicht
   lesbar.
   ===================================================================== */

/* --- Zwei Spalten auf dem Rechner --------------------------------- */
@media (min-width: 900px) {
    .content-col:has(> .content-block > details.faq-item),
    .content-col:has(> details.faq-item) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* --- Die Kästen selbst -------------------------------------------- */
details.faq-item {
    border: 1px solid #e6e9ef !important;
    border-radius: 12px !important;
    margin-bottom: .7rem !important;
    padding: 0 !important;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
    height: auto;
}
details.faq-item:hover {
    border-color: #bfdbfe !important;
}
details.faq-item[open] {
    border-color: #bfdbfe !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}

/* --- Die Frage ----------------------------------------------------- */
details.faq-item > summary {
    padding: .95rem 1.15rem !important;
    font-size: .96rem !important;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    line-height: 1.4;
}
details.faq-item > summary::-webkit-details-marker { display: none; }

/* Das vorhandene Pluszeichen VOR der Frage abschalten - die Seite bringt
   eine eigene Regel ".faq-item summary::before { content: '+ ' }" mit.
   Ohne dieses Ausschalten stünde das Zeichen doppelt da: links das alte,
   rechts das neue. */
details.faq-item > summary::before {
    content: none !important;
    display: none !important;
}

/* Fragen links ausrichten. Der umgebende Block ist zentriert gesetzt,
   dadurch standen die Fragen mittig - bei unterschiedlich langen Zeilen
   wirkt das unruhig. */
details.faq-item,
details.faq-item > summary,
details.faq-item .faq-content,
details.faq-item .faq-content p {
    text-align: left !important;
}

/* Eigenes Zeichen rechts statt des Standardpfeils links - dadurch
   beginnt die Frage bündig und die Liste wirkt ruhiger. */
details.faq-item > summary::after {
    content: "+";
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .18s, background .18s;
}
details.faq-item[open] > summary::after {
    content: "\2212";           /* echtes Minuszeichen */
    background: #2563eb;
    color: #ffffff;
}

/* --- Die Antwort ---------------------------------------------------- */
details.faq-item .faq-content {
    padding: 0 1.15rem 1.1rem !important;
}
details.faq-item .faq-content p {
    font-size: .9rem !important;
    line-height: 1.62 !important;
    color: #64748b !important;
}

/* --- Dunkelmodus ---------------------------------------------------- */
html.site-dark details.faq-item {
    background: #1b2029 !important;
    border-color: #2a2f38 !important;
}
html.site-dark details.faq-item > summary { color: #e2e8f0; }
html.site-dark details.faq-item > summary::after { background: rgba(37,99,235,.22); color: #93c5fd; }
html.site-dark details.faq-item[open] > summary::after { background: #2563eb; color: #fff; }
html.site-dark details.faq-item .faq-content p { color: #9aa1ad !important; }


/* =====================================================================
   12. KLEINE SCHILDER ("KOSTENLOS UND UNVERBINDLICH")

   Diese Schilder haben ihre Farben fest im HTML: weisser Grund, blaue
   Schrift, hellblauer Rand. Im Dunkelmodus wird der Grund vom pauschalen
   Umbau abgedunkelt, Schrift und Rand bleiben aber hell - dann steht
   heller Text in einem hellen Rahmen auf dunklem Grund und ist kaum zu
   lesen.

   Fuer das Schild IM SLIDER gab es bereits eine Regel; fuer die Schilder
   im Inhalt fehlte sie. Erkannt werden sie an der Kombination aus runder
   Form, weissem Grund und blauer Schrift.
   ===================================================================== */
html.site-dark p[style*="border-radius:999px"][style*="color:#2563eb"],
html.site-dark span[style*="border-radius:999px"][style*="color:#2563eb"] {
    background: rgba(37, 99, 235, .14) !important;
    border-color: rgba(96, 165, 250, .35) !important;
    color: #93c5fd !important;
}


/* =====================================================================
   13. FETT AUSGEZEICHNETE ZWISCHENTITEL IM DUNKELMODUS

   Kleine Überschriften wie "Erreichbarkeit" auf der Kontaktseite haben
   ihre Farbe fest im HTML (#0f172a). Im Dunkelmodus steht dieses
   Dunkelblau dann auf dunklem Grund und ist praktisch unsichtbar.
   ===================================================================== */
html.site-dark .ko-label,
html.site-dark strong[style*="color:#0f172a"],
html.site-dark strong[style*="color: #0f172a"] {
    color: #e2e8f0 !important;
}

/* =====================================================================
   14. DUNKLER AUFTRITT — überarbeitet

   Der bisherige Dunkelmodus war ein aufgehellter Nachtmodus: Grau auf
   Grau, wenig Tiefe. Eine Agenturseite verträgt mehr Kontrast.

   Was sich ändert:
     - Tieferer Grund (fast schwarz) statt Blaugrau. Dadurch treten
       Karten und Bilder deutlich hervor.
     - Karten mit feinem Rand und leichtem Schein statt flächigem Grau.
     - Der blaue Akzent wird heller, damit er auf dunklem Grund trägt.
       Dunkles Blau auf dunklem Grund ist der häufigste Fehler.
   ===================================================================== */

html.site-dark body,
html.site-dark {
    background: #0a0d12 !important;
    color: #e8ecf2 !important;
}

/* Abschnitte abwechselnd minimal heller - das erzeugt Tiefe, ohne dass
   man Kästen sieht. */
html.site-dark .content-section:nth-of-type(even) {
    background: #0e1219 !important;
}

/* Kopfleiste: leicht durchscheinend mit Unschärfe. Beim Scrollen
   entsteht so der Eindruck von Glas statt eines Balkens. */
html.site-dark header {
    background: rgba(10, 13, 18, .82) !important;
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

/* Karten: Rand statt Fläche, dazu ein kaum sichtbarer Verlauf. */
html.site-dark .content-block,
html.site-dark .pricing-card,
html.site-dark .stimme,
html.site-dark .af-karte,
html.site-dark .contact-form-box {
    background: linear-gradient(180deg, #151a22 0%, #121620 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

/* Akzentfarbe aufhellen. #2563eb ist auf hellem Grund richtig, auf
   dunklem zu dunkel - es "verschwindet" im Hintergrund. */
html.site-dark a:not(.cms-slide-btn):not(.header-action-btn) { color: #7ab0ff; }

/* ---------------------------------------------------------------------
   ABER: Knoepfe behalten weisse Schrift.

   Die Regel darueber faerbt jeden Verweis hellblau - auch solche, die
   auf blauem Grund stehen. Ergebnis war Hellblau auf Blau: lesbar nur
   mit Muehe. Betroffen sind alle Verweise, die wie ein Knopf aussehen,
   egal ob die Farbe aus einer Klasse oder aus dem style-Attribut kommt.
   --------------------------------------------------------------------- */
html.site-dark a.bg-blue-600,
html.site-dark a.bg-blue-700,
html.site-dark a[class*="bg-blue-"],
html.site-dark a[class*="text-white"],
html.site-dark a[style*="background:#2563eb"],
html.site-dark a[style*="background: #2563eb"],
html.site-dark a[style*="background:#3b82f6"],
html.site-dark a[style*="background: #3b82f6"],
html.site-dark a[style*="background-color:#2563eb"],
html.site-dark a[style*="background-color: #2563eb"],
html.site-dark .cms-slide-btn,
html.site-dark .header-action-btn,
html.site-dark .footer-btn-primary,
html.site-dark a.btn,
html.site-dark a.master-button,
html.site-dark .au-btn-solid,
html.site-dark a.au-btn-solid,
html.site-dark .cms-btn,
html.site-dark .footer-btn,
/* Auffangregel: jeder Verweis, dessen Klasse auf einen Knopf hindeutet.
   Die Seiten mischen mehrere Namensschemata (btn, cms-btn, au-btn),
   deshalb hier breit gefasst statt jedes Mal einzeln nachziehen. */
html.site-dark a[class*="-btn-solid"],
html.site-dark a[class*="btn-primary"] {
    color: #ffffff !important;
}

/* Umrissknoepfe mit eigener Klasse: heller Text statt Blau, sonst
   verschwimmt die Schrift mit dem Rand. */
html.site-dark .au-btn-ghost,
html.site-dark a.au-btn-ghost,
html.site-dark a[class*="-btn-ghost"],
html.site-dark a[class*="btn-outline"] {
    color: #e8ecf2 !important;
    border-color: rgba(255, 255, 255, .35) !important;
}

/* Umrissknoepfe (durchsichtiger Grund, heller Rand) bleiben hell,
   aber nicht blau - sonst verschwimmen sie mit dem Rand. */
html.site-dark a[style*="background:transparent"],
html.site-dark a[style*="background: transparent"],
html.site-dark .cms-btn-zweit {
    color: #f1f5f9 !important;
}

html.site-dark .header-action-btn,
html.site-dark .cms-slide-btn,
html.site-dark .pricing-card .cms-btn,
html.site-dark button[type=submit] {
    background: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, .8);
}

/* Trennlinien und Ränder gleichmässig zurücknehmen */
html.site-dark hr,
html.site-dark .footer-grid,
html.site-dark .content-row { border-color: rgba(255, 255, 255, .08) !important; }

/* Bilder auf dunklem Grund wirken oft zu grell */
html.site-dark img:not(.logo-img):not(.stimme-bild) {
    filter: brightness(.92) contrast(1.02);
}

/* ---------------------------------------------------------------------
   Fusszeile

   Die bisherigen Regeln setzten dort fast alles auf dasselbe Hellgrau -
   Titel, Links und Fliesstext hatten alle rund 16:1 Kontrast. Lesbar
   schon, aber ohne Hierarchie: Das Auge findet keinen Halt.

   Jetzt gestaffelt: Titel hell, Links mittel, Fliesstext gedaempft.
   Der Grund ist dunkler als der Inhalt darueber, das schliesst die
   Seite optisch ab.
   --------------------------------------------------------------------- */
html.site-dark .site-footer,
html.site-dark footer {
    background: #06080c !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    color: #8b95a5 !important;
}

/* Spaltentitel: klein, hell, aber nicht weiss */
html.site-dark .site-footer .footer-col h3 {
    color: #cbd5e1 !important;
    border-bottom-color: rgba(255, 255, 255, .07) !important;
}

/* Links gedaempft, erst beim Ueberfahren hell - so wirkt die Liste ruhig */
html.site-dark .site-footer .footer-col a,
html.site-dark .site-footer .footer-legal-links a {
    color: #8b95a5 !important;
    transition: color .15s;
}
html.site-dark .site-footer .footer-col a:hover,
html.site-dark .site-footer .footer-legal-links a:hover {
    color: #ffffff !important;
}

/* Fliesstext am dunkelsten - er soll nicht mit den Links konkurrieren */
html.site-dark .site-footer .footer-col p,
html.site-dark .site-footer .footer-col li,
html.site-dark .site-footer .footer-copyright {
    color: #78828f !important;
}

/* Die Marke im Footer bleibt hell - sie ist der Ankerpunkt */
html.site-dark .site-footer .footer-col h3:first-child,
html.site-dark .site-footer .footer-col p strong,
html.site-dark .site-footer a[href^="tel:"] {
    color: #f1f5f9 !important;
}

/* Trennlinie unten zurueckhaltender */
html.site-dark .site-footer .footer-bottom {
    border-top-color: rgba(255, 255, 255, .06) !important;
}

/* Der Knopf im Footer soll auf dem dunklen Grund tragen */
html.site-dark .site-footer a[style*="background:#3b82f6"],
html.site-dark .site-footer a[style*="background: #3b82f6"] {
    background: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px -10px rgba(59, 130, 246, .9);
}


/* =====================================================================
   15. LOGO IM DUNKELMODUS

   Ist im Adminbereich nur EIN Logo hinterlegt, gilt es in beiden Modi -
   und ein dunkler Schriftzug verschwindet dann auf dunklem Grund.

   Diese Regel greift genau dann: Sie faellt weg, sobald zwei Logos
   hinterlegt sind, denn dann tragen die Bilder die Klassen logo-hell
   und logo-dunkel und werden davon ausgenommen.

   invert dreht hell und dunkel um, hue-rotate dreht die Farbe zurueck -
   ohne den zweiten Teil waere das Blau orange (siehe Vergleich).
   ===================================================================== */
html.site-dark .logo-img:not(.logo-hell):not(.logo-dunkel),
html.site-dark .logo-container img:not(.logo-hell):not(.logo-dunkel) {
    filter: invert(1) hue-rotate(180deg) saturate(1.35) brightness(1.15);
}

/* Der Schriftzug als Text (wenn gar kein Logo hinterlegt ist) */
html.site-dark .logo-text { color: #f1f5f9 !important; }


/* =====================================================================
   16. FEST GESETZTE FARBEN AUS DEM SEITENEDITOR

   Im Editor gesetzte Farben landen als style-Attribut direkt am
   Element. Solche Angaben gewinnen gegen normale Regeln - im
   Dunkelmodus bleiben sie deshalb dunkel und verschwinden.

   Betroffen sind vor allem:
     - Der Slider-Titel: sein Text steckt in <span style="color:#031029">
     - Kennzeichen-Pillen mit weissem Grund und blauer Schrift
   ===================================================================== */

/* Slider-Titel: die Spans darin mitfaerben, nicht nur die Ueberschrift */
html.site-dark .cms-slide-title,
html.site-dark .cms-slide-title span,
html.site-dark .cms-slide-title span span {
    color: #f8fafc !important;
}

html.site-dark .cms-slide-text,
html.site-dark .cms-slide-text span {
    color: #b6c2d4 !important;
}

/* Pillen mit weissem Grund: dunkler Grund, heller Text. Ohne das steht
   weisse Schrift auf weissem Grund - der Kasten wirkt leer. */
html.site-dark p[style*="background:#ffffff"],
html.site-dark p[style*="background: #ffffff"],
html.site-dark span[style*="background:#ffffff"],
html.site-dark div[style*="background:#ffffff"][style*="border-radius:999px"] {
    background: rgba(37, 99, 235, .16) !important;
    border-color: rgba(96, 165, 250, .35) !important;
    color: #93c5fd !important;
}

/* Zitatkarten deutlicher vom Grund abheben - vorher lagen sie fast
   unsichtbar auf der Flaeche. */
html.site-dark .content-block[style*="background-color: #f8fafc"],
html.site-dark .content-block[style*="background-color:#f8fafc"] {
    background: #171d27 !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 14px;
}


/* =====================================================================
   17. KONTRAST — SYSTEMATISCH DURCHGEGANGEN

   Alle zwölf Seiten wurden hell und dunkel vermessen. 58 Stellen lagen
   unter dem Richtwert von 4,5:1 (grosse Schrift 3:1) - es waren aber
   nur SECHS wiederkehrende Muster. Die werden hier zentral behoben,
   nicht Seite für Seite.
   ===================================================================== */

/* --- 1. Blau der Knöpfe --------------------------------------------
   #3b82f6 mit weisser Schrift ergibt 3,68:1 - zu wenig fuer normalen
   Text. #2563eb bringt 5,17:1 und sieht praktisch gleich aus. */
html.site-dark .header-action-btn,
html.site-dark .cms-slide-btn,
html.site-dark .cms-btn-solid,
html.site-dark .au-btn-solid,
html.site-dark button[type=submit],
html.site-dark .pricing-card .cms-btn,
html.site-dark a[class*="btn-solid"] {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* --- 2. Blaue Verweise auf Weiss (heller Modus) ---------------------
   #3b82f6 auf Weiss sind 3,68:1. Ein dunkleres Blau loest das, ohne
   dass sich der Eindruck aendert. */
.breadcrumb a,
.breadcrumbs a,
nav[aria-label*="rot"] a,
a.breadcrumb-link {
    color: #1d4ed8;
}

html.site-dark .breadcrumb a,
html.site-dark .breadcrumbs a,
html.site-dark a.breadcrumb-link {
    color: #93c5fd !important;
}

/* --- 3. Kennzeichen-Pillen ("KUNDENSTIMMEN", "AUTOMATISIERUNG") ----
   Hellblau auf kraeftigem Blau ergibt 2,87:1. Der Grund wird
   zurueckgenommen, die Schrift bleibt hell. */
html.site-dark .au-eyebrow,
html.site-dark p[style*="letter-spacing:.09em"],
html.site-dark p[style*="letter-spacing: .09em"],
html.site-dark span[class*="eyebrow"] {
    background: rgba(37, 99, 235, .18) !important;
    color: #bfdbfe !important;
    border-color: rgba(147, 197, 253, .3) !important;
}

/* --- 4. Kleingedrucktes auf Karten ---------------------------------
   #64748b auf #1b2029 sind 3,43:1 - betrifft Firmenzeilen unter
   Kundenstimmen, Einheiten wie "/ Monat", Beschriftungen. */
html.site-dark .stimme-namen span,
html.site-dark .content-block span[style*="color:#64748b"],
html.site-dark .content-block span[style*="color: #64748b"],
html.site-dark span[style*="color:#64748b"],
html.site-dark span[style*="color: #64748b"],
html.site-dark .pricing-card-period,
html.site-dark small {
    color: #9aa8bd !important;
}

/* --- 5. Aktuelle Seite in der Brotkrume ----------------------------
   #6b7280 auf sehr dunklem Grund sind 4,02:1. */
html.site-dark li,
html.site-dark .breadcrumb li,
html.site-dark .breadcrumb-current {
    color: #a9b4c4 !important;
}

/* --- 6. Verweise im Fliesstext (E-Mail, Datenschutz) ---------------
   Dunkles Blau auf dunklem Grund ist der haeufigste Fehler ueberhaupt. */
/* ACHTUNG beim Teilstring: "color:#2563eb" trifft auch
   "background-color:#2563eb" - dadurch bekamen Knoepfe hellblaue statt
   weisser Schrift. Deshalb Knopfklassen ausdruecklich ausnehmen. */
html.site-dark a[href^="mailto:"]:not([class*="btn"]),
html.site-dark a[style*="color:#2563eb"]:not([class*="btn"]):not([style*="background"]),
html.site-dark a[style*="color: #2563eb"]:not([class*="btn"]):not([style*="background"]),
html.site-dark a[style*="color:#64748b"]:not([class*="btn"]),
html.site-dark a[style*="color: #64748b"]:not([class*="btn"]) {
    color: #93c5fd !important;
}

/* Heller Modus: dieselben Stellen andersherum pruefen */
p[style*="color:#94a3b8"],
p[style*="color: #94a3b8"] {
    color: #64748b;
}

strong[style*="color:#64748b"],
strong[style*="color: #64748b"] {
    color: #475569;
}


/* --- Nachtrag aus der zweiten Messung -------------------------------- */

/* Kennzeichen-Pille der Automatisierungsseite: Sie bringt ihre eigene
   Dunkelmodus-Regel mit (hellblau auf blau = 2,87:1). Weiss statt
   hellblau bringt 5,17:1 bei gleichem Aussehen. */
html.site-dark .au-eyebrow {
    background: rgba(37, 99, 235, .22) !important;
    color: #ffffff !important;
    border-color: rgba(147, 197, 253, .35) !important;
}

/* Fusszeile der Posteingang-Darstellung */
html.site-dark .au-inbox-foot,
html.site-dark .au-inbox-foot span,
html.site-dark .au-t,
html.site-dark li small,
html.site-dark .content-block small {
    color: #9aa8bd !important;
}

/* Menüpunkte im hellen Modus: #3b82f6 auf Weiss sind 3,68:1.
   Betroffen ist der aktive Punkt in der Kopfleiste. */
.nav-links .menu-item > a.active,
.nav-links .menu-item > a[class*="aktiv"],
.nav-links .menu-item > a[style*="color:#2563eb"],
.nav-links .menu-item > a[style*="color: #3b82f6"] {
    /* ohne !important verliert die Regel gegen das Seiten-CSS */
    color: #1d4ed8 !important;
}

.nav-links .menu-item > a:not(.active):not([class*="aktiv"]) {
    color: #334155;
}

html.site-dark .nav-links .menu-item > a {
    color: #cbd5e1 !important;
}
html.site-dark .nav-links .menu-item > a.active {
    color: #93c5fd !important;
}


/* --- Brotkrume ------------------------------------------------------
   Ihre Verweise tragen die Farbe im style-Attribut (#3b82f6). Auf Weiss
   sind das 3,68:1 - unter dem Richtwert fuer normalen Text. Ueber den
   umgebenden nav-Bereich ansprechen, denn eine Klasse gibt es nicht. */
nav[aria-label="Breadcrumb"] a,
nav[aria-label="breadcrumb"] a,
nav[aria-label*="readcrumb"] a[style*="color: #3b82f6"],
nav[aria-label*="readcrumb"] a[style*="color:#3b82f6"] {
    color: #1d4ed8 !important;
}

html.site-dark nav[aria-label*="readcrumb"] a {
    color: #93c5fd !important;
}

html.site-dark nav[aria-label*="readcrumb"] {
    color: #9aa8bd !important;
}


/* --- Letzte vier Stellen aus der Durchsicht ------------------------- */

/* "EMPFOHLEN" und aehnliche Marken auf dem hervorgehobenen Preispaket:
   #60a5fa auf #2563eb sind 2,03:1 - die Marke verschwindet fast. */
html.site-dark p[style*="color:#60a5fa"],
html.site-dark p[style*="color: #60a5fa"],
html.site-dark span[style*="color:#60a5fa"],
html.site-dark .pricing-card-dunkel p[style*="letter-spacing"],
html.site-dark [class*="badge"] {
    color: #ffffff !important;
}

/* Kleingedrucktes auf hellem Grund: #64748b auf #eff6ff sind 4,37:1,
   #94a3b8 auf Weiss nur 2,56:1. Beides eine Stufe dunkler. */
strong[style*="color:#64748b"],
strong[style*="color: #64748b"],
p[style*="color:#64748b"],
p[style*="color: #64748b"] {
    color: #475569;
}

p[style*="color:#94a3b8"],
p[style*="color: #94a3b8"],
span[style*="color:#94a3b8"],
span[style*="color: #94a3b8"] {
    color: #5b6675;
}


/* --- Abschluss der Durchsicht --------------------------------------
   WICHTIG: Regeln fuer den hellen Modus mit html:not(.site-dark)
   einleiten. Ohne das gelten sie auch im Dunkelmodus und machen die
   Schrift dort zu dunkel - genau das ist mir beim ersten Anlauf
   passiert (dunkelgrau auf dunkelgrau, 1,58:1).
   ------------------------------------------------------------------ */

/* ===== HELLER MODUS ===== */

html:not(.site-dark) p[style*="letter-spacing:.09em"][style*="color:#2563eb"] {
    color: #1d4ed8;
}

html:not(.site-dark) p[style*="color:#94a3b8"],
html:not(.site-dark) p[style*="color: #94a3b8"] {
    color: #64748b !important;
}

html:not(.site-dark) .pricing-card strong,
html:not(.site-dark) [style*="background:#eff6ff"] strong,
html:not(.site-dark) [style*="background-color:#eff6ff"] strong {
    color: #334155;
}

html:not(.site-dark) [style*="background:#eff6ff"] span[style*="color:#64748b"],
html:not(.site-dark) [style*="background-color:#eff6ff"] span[style*="color:#64748b"],
html:not(.site-dark) .pricing-card span[style*="color:#64748b"] {
    color: #475569 !important;
}

/* ===== DUNKLER MODUS ===== */

/* Kennzeichen auf blauem Grund: weiss statt hellblau */
html.site-dark p[style*="letter-spacing:.09em"][style*="color:#2563eb"],
html.site-dark .pricing-card-dunkel p[style*="letter-spacing"],
html.site-dark [style*="font-weight:800"][style*="color:#2563eb"] {
    color: #ffffff !important;
}

/* Alles, was im hellen Modus gedaempftes Grau ist, wird hier hell */
html.site-dark p[style*="color:#94a3b8"],
html.site-dark p[style*="color: #94a3b8"],
html.site-dark p[style*="color:#64748b"],
html.site-dark p[style*="color: #64748b"],
html.site-dark .pricing-card strong,
html.site-dark .pricing-card span[style*="color:#64748b"],
html.site-dark [style*="background:#eff6ff"] strong,
html.site-dark [style*="background-color:#eff6ff"] strong,
html.site-dark [style*="background:#eff6ff"] span,
html.site-dark [style*="background-color:#eff6ff"] span {
    color: #cbd5e1 !important;
}


/* --- Nachtrag: drei Farbwerte, die noch fehlten --------------------- */

/* #60a5fa auf blauem Grund ("INDIVIDUELLE ENTWICKLUNG") = 2,03:1 */
html.site-dark p[style*="color:#60a5fa"],
html.site-dark span[style*="color:#60a5fa"],
html.site-dark [style*="color: #60a5fa"] {
    color: #ffffff !important;
}

/* Hinweiszeilen mit #94a3b8 und #64748b auf dunklem Grund.
   Die Farbe steht mit doppelten Anfuehrungszeichen im Attribut, deshalb
   greifen die frueheren Regeln mit einfachen nicht. */
html.site-dark [style*='color:#94a3b8'],
html.site-dark [style*="color:#94a3b8"],
html.site-dark [style*='color:#64748b'],
html.site-dark [style*="color:#64748b"] {
    color: #9fb0c6 !important;
}

/* Fettgedrucktes in hellblauen Kaesten (heller Modus) */
html:not(.site-dark) [style*="#eff6ff"] strong,
html:not(.site-dark) [style*="#eff6ff"] span {
    color: #3f4d61 !important;
}


/* =====================================================================
   18. GRAUE SCHRIFT IN DUNKLEN ABSCHNITTEN

   Manche Abschnitte sind in BEIDEN Modi dunkel - etwa die Bänder mit
   background-color:#0f172a. Steht dort Text in #64748b, sind das
   3,75:1: zu wenig, und zwar auch im hellen Modus. Das faellt nur
   nicht auf, weil der Rest der Seite hell ist.

   Die Regeln brauchen zusaetzliche Gewichtung (html body ...), weil die
   Seiten eigene <style>-Bloecke mitbringen, die spaeter im Dokument
   stehen und sonst gewinnen.
   ===================================================================== */

html body [style*="background-color: #0f172a"] p,
html body [style*="background-color:#0f172a"] p,
html body [style*="background: #0f172a"] p,
html body [style*="background:#0f172a"] p,
html body [style*="background-color: #0f172a"] span,
html body [style*="background-color:#0f172a"] li,
html body .content-section-band[style*="0f172a"] p {
    color: #b3c0d1 !important;
}

/* Kennzeichen in kraeftigem Blau: weisse Schrift, in beiden Modi */
/* Hoehere Gewichtung noetig: Die Preisseite bringt eine eigene Regel
   mit (.pricing-card-dunkel p), die spaeter im Dokument steht. */
html.site-dark body .pricing-card-dunkel p[style*="color:#60a5fa"],
html.site-dark body .pricing-card-dunkel p[style*="letter-spacing"],
html.site-dark body .pricing-card p[style*="color:#60a5fa"],
html body p[style*="color:#60a5fa"],
html body span[style*="color:#60a5fa"] {
    color: #ffffff !important;
}

/* Die Pille der Automatisierungsseite - NUR im Dunkelmodus weiss.
   Ohne diese Einschraenkung stand sie im hellen Modus weiss auf weiss. */
html.site-dark body .au-eyebrow {
    color: #ffffff !important;
}


/* Letzte Stelle: Die Preisseite bringt eine Regel mit zwei Klassen mit,
   die schwerer wiegt als meine. Zwei Attributvergleiche in einem
   Auswaehler bringen die noetige Gewichtung, ohne mit !important-Ketten
   zu arbeiten. */
html.site-dark body p[style*="color:#60a5fa"][style*="font-weight:800"],
html.site-dark body p[style*="color:#60a5fa"][style*="letter-spacing"],
html.site-dark body span[style*="color:#60a5fa"][style*="font-weight"] {
    color: #ffffff !important;
}


/* =====================================================================
   19. POSTEINGANG-DARSTELLUNG (Automatisierungsseite)

   Die Kopfzeile setzt "au-inbox-bar b" fest auf #0f172a. Im
   Dunkelmodus bekommt der Balken zwar einen dunklen Grund, die
   Schrift bleibt aber dunkel - die Adresse neben "Posteingang" ist
   dann unlesbar.

   Meine Kontrollmessung hatte das nicht gefunden, weil sie nur
   Elemente mit Text ab drei Zeichen prueft und dieser Teil in einem
   b-Element ohne eigenen Textknoten sass.
   ===================================================================== */
html.site-dark .au-inbox-bar,
html.site-dark .au-inbox-bar b,
html.site-dark .au-inbox-bar span,
html.site-dark .au-inbox-bar strong {
    color: #cbd5e1 !important;
}

/* Die drei Punkte links (Fensterknoepfe) etwas zurueckhaltender */
html.site-dark .au-inbox-bar i,
html.site-dark .au-inbox-bar .au-dot {
    opacity: .75;
}

/* Absender- und Betreffzeile darunter */
html.site-dark .au-mail b,
html.site-dark .au-mail strong,
html.site-dark .au-mail-from,
html.site-dark .au-mail-subject {
    color: #e8ecf2 !important;
}