/* ═══════════════════════════════════════════════════════════════
   HELLES DESIGN — Saleh Gebäudeservice (September 2026)
   ---------------------------------------------------------------
   Überlagert nur Farben und Helligkeit der bisher dunklen Bereiche.
   Struktur, Texte, Bilder und Vorher-Nachher-Slider bleiben unverändert.

   Alle Regeln beginnen mit "html body", damit sie auch die <style>-Blöcke
   schlagen, die direkt in den Seiten stehen (die kommen im Dokument später
   und würden sonst bei gleicher Spezifität gewinnen). !important nur dort,
   wo die Seite selbst Inline-Styles (style="...") oder !important setzt.

   Rückgängig machen: die <link>-Zeile zu hell.css entfernen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --h-flaeche:#f4f8fc;     /* helle Grundfläche mit leichtem Blaustich */
  --h-flaeche-2:#eaf3fa;   /* etwas kräftiger, für Balken/Panels */
  --h-linie:#dbe6ef;       /* dezente Trennlinien */
  --h-text:#1f2d3d;        /* Fließtext dunkel (Kontrast auf Weiß ca. 13:1) */
  --h-text-2:#46535f;      /* Nebentext (Kontrast auf Weiß ca. 7,8:1) */
  --h-akzent:#0a6ea3;      /* Markenblau (Kontrast auf Weiß ca. 5,5:1) */
}

/* ── Globale Kontrastkorrekturen (gemessen, vorher unter WCAG AA) ─
   Grautext #6b7280 auf Hellgrau lag bei 4,41:1 -> jetzt ca. 6:1. */
:root{--gray:#56606d}
/* Dunkle Schrift auf Markenblau (~3,3:1) -> weiß (~5,5:1) */
html body .btn-primary,
html body .btn-submit{color:#fff}
/* WhatsApp: weiße Schrift auf Hellgrün lag bei 1,98:1 -> dunkles Grün auf Hellgrün */
html body a.btn[href*="wa.me"]{color:#05361c!important}
/* Hinweise/"(optional)" im Formular: 3,0:1 -> ca. 5,4:1 */
html body .af-form label em,html body .af-hint{color:#5f6b78}
/* Grüne Plakette "Wöchentlich/Monatlich": 2,3:1 -> ca. 5,5:1 */
html body .badge-langfristig{color:#047857}
html body .badge-einmalig{color:#075985}
/* Reinigung: Bewerber-Hinweis im blauen Abschlussbereich (3,1:1 -> ca. 5:1) */
html body .cta p[style*="rgba(255,255,255,.62)"]{color:rgba(255,255,255,.95)!important}
html body .cta p strong[style*="rgba(255,255,255,.82)"]{color:#fff!important}
html body .ablauf-tag--accent{color:#075985}
/* Über uns, Zeitleiste "Heute": dunkle Schrift auf Blau (3,3:1) -> weiß */
html body div[style*="background:var(--accent)"] > span[style*="color:var(--dark)"]{color:#fff!important}
/* Weißer Text auf Blau im Abschlussbereich: 80 % -> 95 % Deckkraft */
html body .cta p{color:rgba(255,255,255,.95)}

/* ── Menü: "Über uns" nicht mehr zweizeilig ───────────────────── */
html body .nav-links a{white-space:nowrap}

/* ── Obere Infoleiste ─────────────────────────────────────────── */
html body .topbar{background:#fff;border-bottom:1px solid var(--h-linie)}
html body .topbar a,html body .topbar span{color:var(--h-text-2)}
html body .topbar a:hover{color:var(--h-akzent)}
html body .topbar i{color:var(--h-akzent)}

/* ── Startseite: Einstiegsbereich ─────────────────────────────── */
html body .hero-split{background:var(--h-flaeche)}
html body .hero-split::after{
  background-image:
    linear-gradient(180deg,rgba(244,248,252,.80) 0%,rgba(244,248,252,.82) 22%,
      rgba(244,248,252,.88) 38%,rgba(244,248,252,.96) 47%,
      rgba(244,248,252,1) 53%,rgba(244,248,252,1) 100%),
    url('../img/hero-flur.webp');
}
@media(max-width:768px){
  html body .hero-split::after{
    background-image:
      linear-gradient(180deg,rgba(244,248,252,0) 0%,rgba(244,248,252,.05) 130px,
        rgba(244,248,252,.10) 210px,rgba(244,248,252,.45) 300px,
        rgba(244,248,252,.85) 350px,rgba(244,248,252,.98) 400px,
        rgba(244,248,252,1) 440px,rgba(244,248,252,1) 100%),
      url('../img/hero-flur-mobil.webp');
    background-position:center top,center 132px;
    background-size:cover,100% auto;
    background-repeat:no-repeat,no-repeat;
  }
}
html body .hero-split::before{background:radial-gradient(circle,rgba(10,110,163,.10),transparent 70%)}
html body .hs-eyebrow{background:#fff;border-color:var(--h-linie);color:var(--h-akzent);box-shadow:0 2px 10px rgba(10,22,40,.05)}
html body .hs-eyebrow i{color:var(--h-akzent)}
html body .hs-intro h1{color:var(--dark)}
html body .hs-intro h1 em{color:var(--h-akzent)}
html body .hs-intro>p{color:var(--h-text-2)}
html body .hs-trust span{background:#fff;border-color:var(--h-linie);color:var(--h-text)}
html body .hs-trust i{color:var(--h-akzent)}
html body .hs-rating{background:#fff;border-color:var(--h-linie);color:var(--h-text);box-shadow:0 2px 10px rgba(10,22,40,.05)}
html body .hero-split .btn-outline-light{border-color:rgba(10,22,40,.25);color:var(--dark);background:#fff}
html body .hero-split .btn-outline-light:hover{border-color:var(--h-akzent);color:var(--h-akzent)}
html body .hs-about{color:var(--h-text-2);border-top-color:var(--h-linie)}
html body .hs-about strong{color:var(--dark)}
/* Namenskonflikt behoben: style.css enthält noch .hs-card-Regeln eines alten,
   entfernten Karussells (Hochformat 3:4, Fotos auf 55 % abgedunkelt, dunkler
   Verlauf über der unteren Hälfte). Die griffen auch auf die beiden Karten im
   Einstiegsbereich -> 260 px leere, dunkle Fläche und graue Fotos. */
html body .hero-split .hs-card{aspect-ratio:auto;min-width:0;cursor:pointer}
html body .hero-split .hs-card::after{content:none}
html body .hero-split .hs-card img,
html body .hero-split .hs-card:hover img{filter:none}
html body .hs-card{background:#fff;border-color:var(--h-linie);box-shadow:0 10px 34px rgba(10,22,40,.07)}
html body .hs-card:hover{border-color:rgba(10,110,163,.45);box-shadow:0 22px 50px rgba(10,22,40,.12)}
html body .hs-card-img::after{background:linear-gradient(180deg,transparent 60%,rgba(10,22,40,.28) 100%)}
html body .hs-card-body h2{color:var(--dark)}
html body .hs-card-body>p{color:var(--h-text-2)}
html body .hs-tags span{background:var(--h-flaeche);border-color:var(--h-linie);color:var(--h-text)}
html body .hs-link{color:var(--h-akzent)}

/* ── Vertrauensbalken ─────────────────────────────────────────── */
html body .trust-bar{background:var(--h-flaeche-2);border-top:1px solid var(--h-linie);border-bottom:1px solid var(--h-linie)}
html body .trust-item{color:var(--h-text)}
html body .trust-item i{color:var(--h-akzent)}

/* ── Unterseiten: Einstieg mit Foto ───────────────────────────── */
html body .page-hero--photo{background:var(--h-flaeche)}
html body .page-hero--photo .page-hero-overlay{
  background:linear-gradient(180deg,rgba(244,248,252,.84) 0%,rgba(244,248,252,.80) 45%,rgba(244,248,252,.94) 100%);
}
html body .page-hero--photo .page-hero-blob{background:radial-gradient(circle,rgba(10,110,163,.10),transparent 65%)}
html body .page-hero--photo h1{color:var(--dark);text-shadow:none}
html body .page-hero--photo h1 em{color:var(--h-akzent)}
html body .page-hero--photo p{color:var(--h-text-2);text-shadow:none}
html body .page-hero--photo .breadcrumb{color:var(--h-text-2)!important}
html body .page-hero--photo .breadcrumb a{color:var(--h-akzent)!important}
html body .page-hero--photo .breadcrumb span{color:var(--h-text-2)}
html body .page-hero--photo .page-hero-badge{background:#fff;border-color:var(--h-linie);color:var(--h-text)}
html body .page-hero--photo .page-hero-tag{color:var(--h-akzent);border-color:var(--h-linie);background:#fff}

/* Aktions-Paar "Jetzt anrufen | Angebot anfragen" im Einstieg der Unterseiten */
html body .hcta{background:#fff;border-color:var(--h-linie);box-shadow:0 12px 34px rgba(10,22,40,.10);backdrop-filter:none}
html body .hcta-btn{color:var(--dark)}
html body .hcta-call:hover{background:var(--h-flaeche)}
html body .hcta-call i{color:#15803d}
html body .hcta-call .hcta-txt strong{color:var(--dark)}
html body .hcta-call .hcta-txt small{color:var(--h-text-2)}
html body .hcta-teiler{background:var(--h-linie)}
html body .hcta-form{background:var(--h-akzent)}
html body .hcta-form:hover{background:#085a86}
html body .hcta-form i,
html body .hcta-form .hcta-txt strong{color:#fff}
html body .hcta-form .hcta-txt small{color:rgba(255,255,255,.92)}
/* Google-Bewertung im Einstieg der Unterseiten */
html body .hrating{background:#fff;border-color:var(--h-linie);color:var(--h-text);backdrop-filter:none;box-shadow:0 2px 10px rgba(10,22,40,.05)}
html body .hrating:hover{background:var(--h-flaeche)}
html body .hrating-num{color:var(--dark)}

/* ── Anfrageformular auf den Leistungsseiten: linke Spalte ────── */
html body .af-intro{background:var(--h-flaeche-2);color:var(--h-text)}
html body .af-usp li{color:var(--h-text)}
html body .af-usp strong{color:var(--dark)}
html body .af-usp i{color:#15803d}
html body .af-phone{border-color:#c9dcea;color:var(--dark);background:#fff}
html body .af-phone:hover{background:#f7fbfe;border-color:var(--h-akzent)}
html body .af-phone i{color:var(--h-akzent)}
html body .af-phone span{color:var(--h-text-2)}
html body .af-phone strong{color:var(--dark)}

/* ── Laufband (Reinigung, Kontakt) — bisher dunkle Schrift auf Blau ── */
html body .marquee{background:var(--h-flaeche-2)!important;border-top:1px solid var(--h-linie);border-bottom:1px solid var(--h-linie)}
html body .marquee .marquee-track{color:var(--dark)!important}

/* ── Abschlussbild Startseite: Markenblau statt fast Schwarz ───── */
html body .cta-image-bg{filter:brightness(.55) saturate(.9)}
html body .cta-image-overlay{background:linear-gradient(180deg,rgba(10,110,163,.55) 0%,rgba(8,70,110,.80) 100%)}
html body .cta-image-content p{color:rgba(255,255,255,.92)}

/* ── Fußzeile ─────────────────────────────────────────────────── */
html body .footer{background:#eef3f8;border-top:1px solid var(--h-linie)}
html body .footer-grid{border-bottom-color:var(--h-linie)}
html body .footer-brand p{color:var(--h-text-2)}
html body .footer-brand span{color:var(--dark)!important}
html body .footer h4{color:var(--dark)}
html body .footer ul a{color:var(--h-text-2)}
html body .footer ul a:hover{color:var(--h-akzent)}
html body .footer ul li{color:var(--h-text-2)!important}
html body .footer ul li strong{color:var(--dark)!important}
html body .footer ul li[style*="border-top"]{border-top-color:var(--h-linie)!important}
html body .footer ul li i[style*="rgba(255"]{color:var(--h-text-2)!important}
html body .footer-bottom{color:var(--h-text-2)}

/* ── Landingpages ─────────────────────────────────────────────── */
html body .lp-hero{background:var(--h-flaeche)}
html body .lp-hero::after{background:radial-gradient(circle at 78% 25%,rgba(10,110,163,.08),transparent 55%)}
html body .lp-hero::before{
  background-image:
    linear-gradient(175deg,rgba(244,248,252,.90) 0%,rgba(244,248,252,.88) 55%,rgba(234,243,250,.96) 100%),
    url('../img/hero-entruempelung.webp');
}
html body .lp-hero h1{color:var(--dark)}
html body .lp-hero h1 em{color:var(--h-akzent)}
html body .lp-hero .label{color:var(--h-akzent)!important}
html body .lp-sub{color:var(--h-text-2)}
html body .lp-usp li{color:var(--h-text)}
html body .lp-usp i{color:var(--h-akzent)}
html body .lp-hours{color:var(--h-text-2)}
html body .lp-form-card{border:1px solid var(--h-linie);box-shadow:0 20px 60px rgba(10,22,40,.10)}
html body .lp-final{background:linear-gradient(160deg,#0a6ea3 0%,#085a86 100%)}
html body .lp-final p{color:rgba(255,255,255,.92)}

/* Hero-Link zum Preisrechner (Startseite) */
/* Auffälliger als ein normaler Link, aber bewusst ruhiger als der blaue Hauptknopf "Kostenloses Angebot" */
html body .hero-split .hs-calc-link,html body .pr-teaser-btn{display:inline-flex;align-items:center;gap:12px;margin:16px 0 4px;padding:10px 18px 10px 10px;border-radius:16px;background:#fff;border:2px solid #0a6ea3;color:#0a1628;text-decoration:none;text-align:left;box-shadow:0 8px 24px rgba(10,110,163,.18);transition:transform .15s,box-shadow .2s,background .2s}
html body .hero-split .hs-calc-link:hover,html body .pr-teaser-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,110,163,.26);background:#f4f9fd}
html body .hs-calc-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#0a6ea3;color:#fff;font-size:1.15rem}
html body .hs-calc-txt{display:flex;flex-direction:column;line-height:1.25}
html body .hs-calc-txt strong{font-size:1rem;font-weight:800;color:#0a1628}
html body .hs-calc-txt small{font-size:.8rem;font-weight:500;color:#46535f;margin-top:2px}
html body .hs-calc-pfeil{margin-left:6px;color:#0a6ea3;font-size:.95rem}
@media(max-width:768px){
  /* Handy: Hero-Kinder werden per flex-order sortiert (index.php) – Link direkt unter den Einleitungstext */
  html body .hero-split .hs-intro > .hs-calc-link{order:3;margin:12px 0 0}
}
/* Schwebender Anrufen-Knopf: war dunkle Schrift auf Blau (Kontrast ~3:1) – jetzt weiß */
.sticky-cta-phone,.sticky-cta-phone:hover{color:#fff}
/* Kennzahlen-Beschriftung (baureinigung.php) war auf dem Handy nur 10,4 px */
@media(max-width:640px){
  html body .number-label{font-size:.72rem}
}
/* Handy: Navigationsleiste gleitet beim Runterscrollen weg, beim Hochscrollen sofort zurück.
   Anrufen/Anfragen bleiben über die schwebenden Knöpfe unten erreichbar. */
@media(max-width:768px){
  html body .nav{transition:transform .32s ease,background .3s,box-shadow .3s}
  html body .nav.nav--weg{transform:translateY(calc(-100% - 24px))}
}
/* Vertrauensleiste: Am Handy zeigte style.css nur nackte Symbole (Texte ausgeblendet) – unverständlich.
   Jetzt 2 Spalten mit Text. Am PC etwas enger, damit alle 7 Punkte in eine Zeile passen. */
@media(max-width:968px){
  html body .trust-bar{padding:18px 0}
  html body .trust-bar-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:0 20px;max-width:520px}
  html body .trust-item{white-space:normal;font-size:.82rem;line-height:1.3;gap:8px}
  html body .trust-item span{display:inline}
  html body .trust-item i{font-size:1rem;width:18px;text-align:center;flex-shrink:0}
  html body .trust-item:last-child{grid-column:1 / -1;justify-content:center}
}
@media(min-width:969px){
  html body .trust-bar-inner{gap:14px 26px;max-width:1320px}
  html body .trust-item{font-size:.8rem}
}