/* =========================================================================
   ADA ELEKTRO — DESIGN SYSTEM (Token-Layer)
   -------------------------------------------------------------------------
   Zweck: EIN gemeinsames Token-Fundament für die gesamte Website.
   Die Unterseiten behalten ihre eigene Akzentfarbe (Elektro blau,
   Smart Home grün, PV gelb, Wallbox KEBA-grün ...), teilen sich aber
   ab hier dieselben Radien, Schatten, Abstände, Typo-Stufen und
   Container-Breiten. Das ist der Unterschied zwischen "mehrere Templates
   nebeneinander" und "eine durchgestaltete Website".

   Ladereihenfolge: wird als ALLERLETZTES Stylesheet geladen
   (nach ada-unify.css), damit die Token-Zuweisungen sauber greifen.
   Reine Token-Datei: setzt bewusst fast keine eigenen Layout-Regeln,
   damit nichts am bestehenden Aufbau zerbricht.
   ========================================================================= */

:root{
  /* ---------- Flächen & Text (helles Basis-System) ---------- */
  --ada-bg:#f4f8fa;
  --ada-bg-2:#eaf1f6;
  --ada-surface:#ffffff;
  --ada-surface-2:#f7fbfc;
  --ada-ink:#0b1f2a;
  --ada-body:#4a6273;
  /* #7e95a6 (Bestand) erreichte nur 3,1:1 auf Weiss und fiel damit unter
     die WCAG-AA-Grenze von 4,5:1. #5c7183 liegt bei 5,07:1 (Weiss) bzw.
     4,74:1 (auf #f4f8fa) und bleibt in derselben Blaugrau-Familie. */
  --ada-dim:#5c7183;
  --ada-border:#dde8ee;
  --ada-border-strong:#c7d9e4;

  /* ---------- Dunkle Flächen (Hero, Footer, Display/Steuerzentrale) ---------- */
  --ada-dark:#0b1f2a;
  --ada-dark-2:#16323f;
  --ada-on-dark:#eaf6ff;
  --ada-on-dark-dim:#93a4b8;

  /* ---------- Marke & Status ---------- */
  --ada-primary:#0e7490;
  --ada-primary-dim:#0b5c73;
  --ada-primary-ink:#ffffff;
  --ada-good:#0f9d58;
  --ada-warn:#d97706;
  --ada-danger:#dc2626;

  /* ---------- Service-Akzente (eine Farbe je Leistungsbereich) ---------- */
  --ada-acc-elektro:#1250e0;
  --ada-acc-smarthome:#009b3e;
  --ada-acc-pv:#c89700;
  --ada-acc-wallbox:#7a9b08;
  --ada-acc-blitz:#b87333;
  --ada-acc-service:#0e7490;

  /* ---------- Radien ---------- */
  --ada-r-xs:8px;
  --ada-r-sm:12px;
  --ada-r-md:16px;
  --ada-r-lg:20px;
  --ada-r-xl:28px;
  --ada-r-pill:999px;

  /* ---------- Schatten (weich, technisch, nicht "bunt") ---------- */
  --ada-shadow-sm:0 1px 2px rgba(11,31,42,.04), 0 4px 12px -6px rgba(11,31,42,.10);
  --ada-shadow:0 1px 2px rgba(11,31,42,.04), 0 8px 24px -12px rgba(11,31,42,.12);
  --ada-shadow-lg:0 2px 4px rgba(11,31,42,.05), 0 24px 48px -20px rgba(11,31,42,.22);
  --ada-shadow-focus:0 0 0 3px rgba(14,116,144,.35);

  /* ---------- Abstände (8px-Raster) ---------- */
  --ada-s-1:4px;  --ada-s-2:8px;   --ada-s-3:12px; --ada-s-4:16px;
  --ada-s-5:24px; --ada-s-6:32px;  --ada-s-7:40px; --ada-s-8:48px;
  --ada-s-9:64px; --ada-s-10:80px; --ada-s-11:96px; --ada-s-12:128px;
  /* Vertikaler Sektionsabstand: skaliert mobil -> desktop */
  --ada-section-y:clamp(44px, 6vw, 96px);

  /* ---------- Typografie ---------- */
  --ada-font:Manrope, Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ada-font-display:Manrope, Inter, "Segoe UI", system-ui, sans-serif;
  --ada-font-mono:"JetBrainsMono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid Type Scale — mobile first, ohne zu kleine Schriften */
  --ada-t-xs:clamp(.76rem, .74rem + .1vw, .82rem);
  --ada-t-sm:clamp(.86rem, .84rem + .1vw, .93rem);
  --ada-t-base:clamp(1rem, .97rem + .15vw, 1.06rem);
  --ada-t-lg:clamp(1.1rem, 1.05rem + .25vw, 1.25rem);
  --ada-t-xl:clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  --ada-t-2xl:clamp(1.6rem, 1.4rem + .9vw, 2.2rem);
  --ada-t-3xl:clamp(2rem, 1.6rem + 1.7vw, 3rem);
  --ada-t-4xl:clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

  --ada-lh-tight:1.12;
  --ada-lh-snug:1.3;
  --ada-lh:1.6;
  --ada-track-tight:-.02em;
  --ada-track-wide:.08em;

  /* ---------- Container & Lesebreite ---------- */
  --ada-container:1200px;
  --ada-container-narrow:960px;
  --ada-container-text:720px;
  --ada-gutter:clamp(16px, 4vw, 32px);
  --ada-measure:68ch;

  /* ---------- Bewegung ---------- */
  --ada-dur-fast:.15s;
  --ada-dur:.25s;
  --ada-dur-slow:.4s;
  --ada-ease:cubic-bezier(.4, 0, .2, 1);
  --ada-ease-out:cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================================
   HARMONISIERUNG DER BESTEHENDEN SEITEN-TOKEN
   Die Unterseiten definieren eigene Token (--ep-*, --sm-*, --pv-*, --wb-*,
   --bs-*, --svc-*). Ab hier beziehen sie Radien, Schatten und Neutraltöne
   aus dem gemeinsamen System — die Akzentfarbe je Bereich bleibt erhalten.
   ========================================================================= */

/* Einheitlicher Radius statt 18px / 22px / 24px nebeneinander.
   WICHTIG: die --es-* Token werden in ada-es-skin.css auf .adav7 gesetzt.
   Custom Properties erben vom NAECHSTEN Vorfahren - eine Neudefinition auf
   :root wuerde daher nie ankommen. Deshalb hier ebenfalls auf .adav7. */
.adav7{ --es-radius:var(--ada-r-lg); }
.adav7-elpage{ --ep-radius:var(--ada-r-lg); }
.adav7-smpage{ --sm-radius:var(--ada-r-lg); }
.adav7-pvpage{ --pv-radius:var(--ada-r-lg); }
.adav7-wbpage{ --wb-radius:var(--ada-r-lg); }
.adav7-bspage{ --bs-radius:var(--ada-r-lg); }
.adav7-svcpage{ --svc-radius:var(--ada-r-lg); }

/* Einheitliche Schattenfamilie */
.adav7{
  --es-shadow:var(--ada-shadow);
  --es-shadow-lg:var(--ada-shadow-lg);
  --es-shadow-soft:var(--ada-shadow-sm);
  --es-shadow-hover:var(--ada-shadow-lg);
  /* Gedaempfter Text site-weit auf den barrierefreien Wert (WCAG AA) */
  --es-dim:var(--ada-dim);
  --u-dim:var(--ada-dim);
  --es-ink:var(--ada-ink);
  --es-body:var(--ada-body);
  --es-border:var(--ada-border);
  --es-card:var(--ada-surface);
  --es-bg:var(--ada-bg);
}

/* Einheitliche Neutraltöne (Akzentfarben bleiben bewusst unangetastet) */
.adav7-elpage, .adav7-smpage, .adav7-pvpage, .adav7-wbpage,
.adav7-bspage, .adav7-svcpage{
  --ep-text:var(--ada-ink);      --ep-text-muted:var(--ada-body);   --ep-text-dim:var(--ada-dim);
  --sm-text:var(--ada-ink);      --sm-text-muted:var(--ada-body);   --sm-text-dim:var(--ada-dim);
  --pv-text:var(--ada-ink);      --pv-text-muted:var(--ada-body);   --pv-text-dim:var(--ada-dim);
  --wb-text:var(--ada-ink);      --wb-text-muted:var(--ada-body);   --wb-text-dim:var(--ada-dim);
  --bs-text:var(--ada-ink);
  --svc-text:var(--ada-ink);
}

/* Ausnahme bleibt Ausnahme: die Smart-Home-"Steuerzentrale" ist bewusst ein
   dunkles Display und behält ihre eigenen Token aus ada-es-skin.css. */

/* =========================================================================
   BARRIEREFREIHEIT / BEWEGUNG
   ========================================================================= */

/* Sichtbarer Fokus-Ring auf allem, was bedienbar ist (Tastaturbedienung) */
.adav7 a:focus-visible,
.adav7 button:focus-visible,
.adav7 input:focus-visible,
.adav7 select:focus-visible,
.adav7 textarea:focus-visible,
.adav7 summary:focus-visible,
.adav7 [tabindex]:focus-visible{
  outline:2px solid var(--ada-primary);
  outline-offset:2px;
  border-radius:var(--ada-r-xs);
}

@media (prefers-reduced-motion: reduce){
  :root{ --ada-dur-fast:.01ms; --ada-dur:.01ms; --ada-dur-slow:.01ms; }
}

/* =========================================================================
   KORREKTUREN — aus dem lokalen Breakpoint-Test (360/390/768/1024/1440)
   ========================================================================= */

/* ---- 1) Hero-Bild sauber skalieren ------------------------------------
   Bisher ohne background-size: das Motiv wurde in Originalgröße angesetzt
   und je nach Viewport anders angeschnitten. Jetzt formatfüllend und rechts
   ausgerichtet, damit die Textspalte links frei bleibt. */
.adav7 .adav7-hero{
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* ---- 2) Schnellkontakt darf keinen Inhalt verdecken --------------------
   Vorher: fixe Pillen-Spalte unten links, die auf jeder Auflösung über den
   Karten lag. Jetzt: Desktop kompakte Kreise, die beim Hover zur beschrifteten
   Pille aufklappen — mobil eine echte Sticky-Leiste mit Platz darunter. */

@media (min-width:1101px){
  .adaes-fab{gap:10px}
  .adaes-fab-btn{
    width:52px; height:52px; padding:0 0 0 13px;
    border-radius:var(--ada-r-pill);
    justify-content:flex-start;
    max-width:52px;
    overflow:hidden;
    transition:max-width var(--ada-dur) var(--ada-ease-out),
               transform var(--ada-dur-fast) var(--ada-ease),
               filter var(--ada-dur-fast) var(--ada-ease);
  }
  .adaes-fab-btn i{
    display:inline-block;
    padding-right:18px;
    opacity:0;
    white-space:nowrap;
    transition:opacity var(--ada-dur) var(--ada-ease);
  }
  .adaes-fab-btn:hover,
  .adaes-fab-btn:focus-visible,
  .adaes-fab-item.open .adaes-fab-btn{ max-width:220px; }
  .adaes-fab-btn:hover i,
  .adaes-fab-btn:focus-visible i,
  .adaes-fab-item.open .adaes-fab-btn i{ opacity:1; }
}

@media (max-width:1100px){
  /* Ein runder Auslöser unten rechts statt einer durchgehenden Leiste:
     beim Scrollen bleibt der Inhalt frei, der Kontakt ist trotzdem
     jederzeit mit einem Tippen erreichbar. */
  .adaes-fab{
    left:auto;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    z-index:1600;
  }
  /* Kontaktwege sind eingeklappt, bis der Auslöser getippt wird */
  .adaes-fab > .adaes-fab-item,
  .adaes-fab > .adaes-fab-btn{
    opacity:0;
    transform:translateY(12px) scale(.92);
    pointer-events:none;
    transition:opacity var(--ada-dur) var(--ada-ease),
               transform var(--ada-dur) var(--ada-ease-out);
  }
  .adaes-fab.is-open > .adaes-fab-item,
  .adaes-fab.is-open > .adaes-fab-btn{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .adaes-fab-btn{
    height:46px;
    padding:0 18px 0 14px;
    border-radius:var(--ada-r-pill);
    width:auto;
    justify-content:flex-start;
    box-shadow:0 10px 26px -10px rgba(11,31,42,.5);
  }
  .adaes-fab-btn i{ display:inline-block; font-size:.84rem; white-space:nowrap; }
  .adaes-fab-pop{
    left:auto;
    right:0;
    bottom:calc(100% + 10px);
    min-width:248px;
  }

  /* Der Auslöser selbst */
  .adaes-fab-trigger{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, var(--ada-primary), var(--ada-primary-dim));
    color:#fff;
    cursor:pointer;
    box-shadow:0 14px 30px -10px rgba(11,31,42,.55);
    transition:transform var(--ada-dur-fast) var(--ada-ease), box-shadow var(--ada-dur-fast) var(--ada-ease);
    -webkit-tap-highlight-color:transparent;
  }
  .adaes-fab-trigger:active{ transform:scale(.94); }
  .adaes-fab-trigger svg{ width:25px; height:25px; }
  .adaes-fab-trigger-ic{ grid-area:1/1; display:grid; place-items:center; transition:opacity var(--ada-dur-fast) var(--ada-ease), transform var(--ada-dur) var(--ada-ease); }
  .adaes-fab-trigger-close{ opacity:0; transform:rotate(-90deg); }
  .adaes-fab.is-open .adaes-fab-trigger-open{ opacity:0; transform:rotate(90deg); }
  .adaes-fab.is-open .adaes-fab-trigger-close{ opacity:1; transform:none; }

  /* Kein Dauer-Abstand mehr nötig - es liegt nichts mehr fix über dem Inhalt */
  .adav7{ padding-bottom:0; }
  .adav7-totop{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)); right:18px; }

}

/* ---- 3) Hero-Lesbarkeit auf schmalen Screens ---------------------------
   Die Überlagerung war horizontal angelegt (dunkel links, hell rechts) —
   sinnvoll für die Desktop-Textspalte, aber auf dem Smartphone läuft der
   Text über den hellen Bildteil und verliert den Kontrast. Unter 900px
   daher eine vertikale, durchgehend tragfähige Abdunklung. */
@media (max-width:900px){
  .adav7 .adav7-hero{
    background-image:
      linear-gradient(180deg, rgba(7,22,31,.92) 0%, rgba(7,22,31,.80) 55%, rgba(7,22,31,.88) 100%),
      var(--hero-image, linear-gradient(135deg,#123c4c,#0b1f2a 75%));
    min-height:auto;
    padding:44px 20px 40px;
  }
}

/* ---- 4) Hero-Textspalte begrenzen --------------------------------------
   Der Fliesstext lief bis in den hellen Bildbereich und verlor dort den
   Kontrast. Eine feste Lesebreite hält ihn in der abgedunkelten Zone und
   verbessert gleichzeitig die Zeilenlänge (Lesbarkeit). */
@media (min-width:901px){
  .adav7 .adav7-hero-inner{ max-width:min(680px, 62%); }
  .adav7 .adav7-hero h1{ text-wrap:balance; }
  .adav7 .adav7-hero p{ max-width:58ch; }
}

/* =========================================================================
   TYPOGRAFIE-SKALA ANWENDEN
   Die Basis-Regel war h1: clamp(2.6rem, 10vw, 5.8rem) — bis 93 px. Bei 768 px
   Viewport ergibt 10vw bereits 77 px, was Überschriften auf drei Zeilen
   umbrechen lässt und eher nach Baukasten als nach Premium aussieht.
   Ruhige, gestufte Größen wirken hochwertiger und bleiben auf jedem Gerät
   lesbar. Werte kommen aus der Token-Skala oben.
   ========================================================================= */
.adav7 h1{
  font-size:var(--ada-t-4xl);
  line-height:var(--ada-lh-tight);
  letter-spacing:var(--ada-track-tight);
  text-wrap:balance;
}
.adav7 h2{
  font-size:var(--ada-t-3xl);
  line-height:var(--ada-lh-snug);
  letter-spacing:var(--ada-track-tight);
  text-wrap:balance;
}
.adav7 h3{ font-size:var(--ada-t-2xl); line-height:var(--ada-lh-snug); }
.adav7 h4{ font-size:var(--ada-t-xl);  line-height:var(--ada-lh-snug); }

/* Fliesstext: angenehme Zeilenlänge statt sehr breiter Textblöcke */
.adav7 .adav7-section-head p,
.adav7 .ep-hero-sub,
.adav7 .sm-section-head p,
.adav7 .pv-section-head p,
.adav7 .wb-section-head p{ max-width:var(--ada-measure); }

/* Hero-Überschriften der Unterseiten auf dieselbe Stufe bringen.
   Bestand: 72–96 px mit 6,6–8vw Skalierung je Seite. Die neueste Seite
   (Elektrobefund) liegt bereits bei 3,6rem — an dieser ruhigeren Optik
   richten sich jetzt alle Unterseiten aus. */
.adav7 .ep-hero h1,
.adav7 .sm-hero h1,
.adav7 .pv-hero h1,
.adav7 .wb-hero h1,
.adav7 .bs-hero h1,
.adav7 .svc-hero h1,
.adav7 .at-hero-copy h1{
  font-size:var(--ada-t-4xl);
  line-height:var(--ada-lh-tight);
  letter-spacing:var(--ada-track-tight);
  text-wrap:balance;
}

/* =========================================================================
   RESPONSIVE-KORREKTUREN aus dem automatischen Breakpoint-Test
   ========================================================================= */

/* ---- Grid-Blowout durch lange deutsche Komposita --------------------
   Grid-Spalten mit "1fr" schrumpfen nicht unter die minimale Inhaltsbreite.
   Ein Wort wie "Netzwerkverkabelung" sprengt dadurch die Spalte und die
   Seite bekommt horizontalen Scroll (gemessen auf /pv-3d-anlagenplanung/
   bei 1024 px). minmax(0,1fr) erlaubt das Schrumpfen, Silbentrennung
   verhindert den Rest. */
.adav7 .adav7-why-grid{ grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){
  .adav7 .adav7-why-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
  .adav7 .adav7-why-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr)); }
}

/* Lange Wörter dürfen umbrechen statt das Layout zu sprengen */
.adav7 h1, .adav7 h2, .adav7 h3, .adav7 h4, .adav7 h5,
.adav7 p, .adav7 li, .adav7 td, .adav7 dd, .adav7 figcaption{
  overflow-wrap:break-word;
  hyphens:auto;
}

/* ---- Sicherung gegen horizontales Scrollen --------------------------
   Einzelne Effekt-Elemente (Ticker, Dekor-Verläufe) ragten minimal über
   den Viewport hinaus und ließen die Seite auf dem Smartphone wackeln.
   "clip" schneidet nur ab und beeinträchtigt - anders als "hidden" -
   position:sticky im Header nicht. */
.adav7{ overflow-x:clip; }

/* =========================================================================
   KONTRAST / WCAG AA  (gemessen, nicht geschätzt)
   -------------------------------------------------------------------------
   Beim automatisierten Kontrast-Audit über alle Seiten sind zwei Muster
   aufgefallen:
   a) Reste des früheren dunklen Designs: helle Schrift (bis rgba(255,255,255,.75))
      steht heute auf hellem Grund - Kontrast 1,07:1, praktisch unlesbar.
   b) Die kräftigen Akzenttöne wurden als Textfarbe verwendet. Als Fläche sind
      sie richtig, als Schrift auf Weiß liegen sie bei 2,2-3,7:1.
   Lösung: für Text die bereits vorhandenen, dunkleren "-accent-dim"-Töne
   verwenden (alle zwischen 4,6:1 und 8,9:1). Die Farbwelt bleibt erhalten.
   ========================================================================= */

/* ---- a) Helle Schrift auf hellem Grund (Alt-Bestand) ---- */
.adav7 :is(.ep-stat, .sm-stat, .pv-stat, .wb-stat, .bs-stat) span{
  color:var(--ada-body)!important;
}
.adav7-elpage .ep-stat b{ color:var(--ep-accent-dim, #0f3fae)!important; }
.adav7-smpage .sm-stat b{ color:var(--sm-accent-dim, #02762f)!important; }
.adav7-pvpage .pv-stat b{ color:var(--pv-accent-dim, #8a6d00)!important; }
.adav7-wbpage .wb-stat b{ color:var(--wb-accent-dim, #5c7500)!important; }
.adav7-bspage .bs-stat b{ color:var(--bs-accent-dim, #8a5622)!important; }

/* ---- b) Akzentfarbe als Textfarbe -> dunklere, lesbare Variante ---- */
.adav7-smpage :is(.sm-kicker, .sm-icon, .sm-plus, .sm-step-num, .sm-series-tag, .sm-model-btn){
  color:var(--sm-accent-dim, #02762f);
}
.adav7-wbpage :is(.wb-kicker, .wb-icon, .wb-plus, .wb-step-num, .wb-series-tag, .wb-model-btn){
  color:var(--wb-accent-dim, #5c7500);
}
.adav7-bspage :is(.bs-kicker, .bs-icon, .bs-plus, .bs-step-num){
  color:var(--bs-accent-dim, #8a5622);
}
.adav7-pvpage :is(.pv-kicker, .pv-icon, .pv-plus, .pv-step-num){
  color:var(--pv-accent-dim, #8a6d00);
}
.adav7-elpage :is(.ep-kicker, .ep-icon, .ep-plus, .ep-step-num){
  color:var(--ep-accent-dim, #0f3fae);
}
.adav7-atpage .at-tag{ color:var(--ada-primary-dim); }

/* Pfeil im Mega-Menü: stand in der jeweiligen Kachelfarbe (bis 2,2:1) */
.adav7 .adaes-mega-arrow{ color:var(--ada-ink); }

/* Glossar-Punkte: gefüllt statt farbiger Schrift - lesbar und auffindbarer */
.adav7 .adax-info-dot{
  background:var(--ada-primary);
  color:#fff;
  border-color:var(--ada-primary);
}

/* Zertifikats-Lupe und Modal-Kicker */
.adav7 .adav7-cert-zoom{ color:var(--ada-ink); }
.adav7 .adav7-modal-kicker{ color:var(--ada-primary-dim); }

/* Footer: gedämpfte Schrift auf dunklem Grund lag bei 4,24:1 */
.adav7 .adav7-footer-v2 :is(span, p, a, small){ color:#a9bece; }

/* Generische Buttons: die Basis-Akzente (--c) stammen aus dem Neon-Design
   (#00eaff, #00ff88, #ffe600) und tragen weisse Schrift nicht. Fuer gefuellte
   Buttons daher der Markenton mit ausreichendem Kontrast. */
.adav7 .adav7-btn:not(.ghost){
  background:var(--ada-primary);
  border-color:var(--ada-primary);
  color:var(--ada-primary-ink);
}
.adav7 .adav7-btn:not(.ghost):hover{
  background:var(--ada-primary-dim);
  border-color:var(--ada-primary-dim);
}

/* ---- c) --c-read für ALLE Akzente vervollständigen ---------------------
   ada-es-skin.css führt bereits "--c-read" ein: die lesbare Variante eines
   Akzenttons für Text ("Gelb/KEBA-Grün/RGB sind auf Weiß zu hell für Text").
   Definiert waren bisher nur Gelb, KEBA, RGB/Pink und Orange - alle übrigen
   fielen auf den Neon-Grundton zurück (--c-read: var(--c)), der als Schrift
   2,2-3,7:1 erreicht. Hier die fehlenden Töne, alle geprüft >= 4,5:1 auf
   Weiß UND auf #f4f8fa. Flächen und Rahmen behalten den kräftigen Ton.  */
.adav7-accent-cyan,
.adav7-accent-blue   { --c-read:#0e7490; }
.adav7-accent-green  { --c-read:#02762f; }
.adav7-accent-violet { --c-read:#5b3fd6; }
.adav7-accent-red    { --c-read:#c41d3a; }
.adav7-accent-copper { --c-read:#8a5622; }
.adav7-accent-petrol { --c-read:#0b5c73; }
/* Sicherheitsnetz: ein Akzent ohne eigenen Lesewert nutzt den Markenton
   statt des Neon-Grundtons. */
.adav7{ --c-read:var(--ada-primary); }
.adav7-accent-yellow { --c-read:#8a6d00; }
.adav7-accent-keba   { --c-read:#5f7d00; }
.adav7-accent-orange { --c-read:#c2410c; }
.adav7-accent-rgb,
.adav7-accent-pink   { --c-read:#a21caf; }

/* ---- d) Restliche Alt-Bestände aus dem dunklen Design ------------------
   Die Unterseiten-Stylesheets stammen aus der dunklen Version. Viele
   Hilfstext-Klassen (-note, -label, -sub, -meta, -caption, -tag) tragen dort
   noch helle Schriftfarben wie rgba(255,255,255,.35). Auf dem heutigen hellen
   Grund ergibt das 1,07:1 - der Text ist faktisch unsichtbar.
   Regel: solche Hilfstexte bekommen die lesbare Grundfarbe. Danach werden die
   bewusst dunklen Bereiche (Hero, Footer, Steuerzentrale, dunkle CTA-Panels)
   wieder ausgenommen, damit dort die helle Schrift erhalten bleibt. */
.adav7 :is(
  [class$="-note"], [class$="-label"], [class$="-sub"], [class$="-meta"],
  [class$="-caption"], [class$="-cap"], [class$="-tag"], [class$="-status"],
  [class$="-hint"], [class$="-legend"]
){
  color:var(--ada-body);
}

/* Ausnahmen: bewusst dunkle Flächen behalten helle Schrift */
.adav7 .adav7-hero :is([class$="-note"],[class$="-label"],[class$="-sub"],[class$="-meta"],[class$="-caption"],[class$="-cap"],[class$="-tag"],[class$="-status"],[class$="-hint"],[class$="-legend"]),
.adav7 .adav7-footer-v2 :is([class$="-note"],[class$="-label"],[class$="-sub"],[class$="-meta"],[class$="-caption"],[class$="-cap"],[class$="-tag"],[class$="-status"],[class$="-hint"],[class$="-legend"]),
.adav7 .sm-control-shell :is([class$="-note"],[class$="-label"],[class$="-sub"],[class$="-meta"],[class$="-caption"],[class$="-cap"],[class$="-tag"],[class$="-status"],[class$="-hint"],[class$="-legend"]),
.adav7 :is(.ep-cta-final,.sm-cta-final,.pv-cta-final,.wb-cta-final,.bs-cta-final,.at-cta-final) :is([class$="-note"],[class$="-label"],[class$="-sub"],[class$="-meta"],[class$="-caption"],[class$="-tag"]){
  color:rgba(255,255,255,.82);
}

/* Einzelne geprüfte Fälle aus dem Audit */
.adav7 .at-doc-logo{ color:var(--ada-ink); }
.adav7-wbpage .wb-model-btn{ color:var(--wb-accent-dim, #5c7500); }
.adav7-wbpage :is(.wb-plus, .adax-info-dot){ color:#4e6400; }
.adav7-atpage :is(.at-pill, .at-value b, .at-bd-row b){ color:#0b7a43; }
.adav7-pvpage :is(.pv-call-status, .pv-cd-call){ color:var(--pv-accent-dim, #8a6d00); }
/* Gefüllte Buttons: Textfarbe erzwingen (einzelne Seiten setzen dunkle Ink-Töne) */
.adav7 .adav7-btn:not(.ghost){ color:var(--ada-primary-ink)!important; }

/* ---- Fußzeile freihalten -----------------------------------------------
   Die fixierten Schnellkontakt-Buttons (links) und der Nach-oben-Button
   (rechts) lagen über der untersten Fußzeile. Etwas Innenabstand hält die
   Zeile frei, ohne die Buttons zu verschieben. */
@media (min-width:1101px){
  .adav7 .adav7-footer-bottom{
    padding-left:82px;
    padding-right:82px;
    row-gap:10px;
  }
}
@media (max-width:1100px){
  .adav7 .adav7-footer-bottom{ padding-bottom:12px; }
}

/* ---- Schnellkontakt in den freien Seitenrand legen ---------------------
   Ab 1101 px stehen die runden Buttons wieder frei neben dem Inhalt. Sobald
   der Inhaltsrahmen (max. 1180 px) genug Rand laesst, wandern sie dorthin -
   sonst bleiben sie am linken Bildschirmrand. So liegen sie nie auf Text. */
@media (min-width:1101px){
  .adaes-fab{ left:max(14px, calc((100vw - 1180px) / 2 - 68px)); }
}

/* Zwischen 1101 und 1339 px ist der Seitenrand schmal - kleinere Buttons,
   damit sie den Kartenrand nicht mehr beruehren. */
@media (min-width:1101px) and (max-width:1339px){
  .adaes-fab-btn{ width:44px; height:44px; max-width:44px; padding:0 0 0 10px; }
  .adaes-fab-ic{ width:21px; height:21px; }
  .adaes-fab-ic svg{ width:20px; height:20px; }
}

/* Der mobile Auslöser ist auf dem Desktop nicht nötig */
@media (min-width:1101px){
  .adaes-fab-trigger{ display:none; }
}

/* ---- e) Letzte gemessene Kontrastfälle (Smart Home, Wallbox, PV) -------
   Werte, Zahlen und Markierungen standen im kräftigen Akzentton direkt auf
   Weiß (2,4-3,7:1). Umgestellt auf die lesbare Variante des jeweiligen Tons;
   Flächen und Rahmen bleiben unverändert kräftig. */

/* Messwerte und Zahlen in den Rechnern */
.adav7-smpage :is(.sm-val, .sm-value, .sm-room-val, .sm-detail-zoom, .sm-ba-info) ,
.adav7-smpage .sm-stat b{ color:var(--sm-accent-dim, #02762f); }
.adav7-pvpage :is(.pv-val, .pv-value, .pv-result b, .pv-donut-center b){ color:var(--pv-accent-dim, #8a6d00); }

/* Gefüllte Hauptbuttons: weiße Schrift braucht den dunkleren Grundton */
.adav7-smpage .sm-btn-primary,
.adav7-smpage .sm-btn:not(.sm-btn-ghost){
  background:var(--sm-accent-dim, #02762f);
  border-color:var(--sm-accent-dim, #02762f);
  color:#fff;
}

/* "VORHER / NACHHER"-Markierungen der Vergleichsregler */
.adav7 :is(.pv-ba-tag, .wb-ba-tag, .ep-ba-tag, .sm-ba-tag, .bs-ba-tag){
  background:rgba(11,31,42,.86)!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* "(Richtwert)" und ähnliche Zusätze standen in fast weißer Schrift */
.adav7 .pv-hint, .adav7 .wb-hint,
.adav7 :is(.pv-calc, .wb-calc, .ep-calc, .at-calc) span[style*="opacity"]{ color:var(--ada-body); }

/* Kategorie-Markierung auf gelbem Grund */
.adav7-pvpage .pv-cat-tag{ color:#231b00; font-weight:800; }

/* Wallbox: Modellwahl und Pluszeichen */
.adav7-wbpage :is(.wb-plus, .wb-model-btn, .adax-info-dot){ color:#4a5e00; }

/* Lightbox-Schließer stand weiß auf weiß */
.adav7 :is(.sm-lightbox-close, .adac-lightbox-close){
  color:var(--ada-ink)!important;
  background:#fff!important;
  border:1px solid var(--ada-border)!important;
}

/* Dunkles Steuerpanel: Beschriftungen etwas heller für 4,5:1 */
.adav7 .sm-control-shell :is(.sm-room-sub, .sm-sub, small, .sm-label){ color:#9fb3c8; }