/* ==========================================================================
   EyeLaser Phase 3 — Knöpfe, Fokus, mobile Leiste (Staging, 01.10.2026)
   --------------------------------------------------------------------------
   Quelle: docs/program/design-evolution.md, docs/program/phase3/umsetzung.md
   Eingebunden über functions.php des Child-Themes (el_phase3_styles), nach
   dem Eltern-Stil und dem Child-Stil. Reine Darstellung: kein Text, kein
   Inhalt, keine Option wird verändert.

   Warum so viele !important und «html body»: Die Farben, die hier ersetzt
   werden, stehen im Zusatz-CSS des Customizers (#wp-custom-css) und in
   WPCode-Stilblöcken, die NACH dieser Datei im Dokument folgen und selbst
   !important tragen. Die Vorsilbe «html body» hebt die Spezifität gerade so
   weit an, dass diese Datei gewinnt — unabhängig von der Reihenfolge.

   Rückbau: in functions.php den Block «el_phase3_styles» entfernen (oder die
   Konstante EL_PHASE3_AUS definieren) — die Datei selbst darf liegen bleiben.

   Gruppen:
     A  freigegeben (Victor): A1 Knöpfe dunkles Cyan / weiss,
        A2 sichtbarer Tastaturfokus, A3 eine statt zwei mobile Leisten
     B  in design-evolution.md empfohlen, rein darstellend, einzeln
        abschaltbar (Block löschen): B1 Links/Überzeilen Cyan 700,
        B2 WhatsApp-Schrift Tinte, B3 Menü-Knopf und Menü-Hover
   ========================================================================== */

/* ---------- Tokens (Teilmenge aus design-evolution.md §3) ---------------- */
:root{
  --el-cyan:#00b4eb;        /* Marke: Logo, Flächen, Dekor — bleibt */
  --el-cyan-700:#007599;    /* Knopf-Fläche, Links, Fokus: 5,24 : 1 auf Weiss */
  --el-cyan-800:#006685;    /* Hover/aktiv: 6,48 : 1 mit Weiss */
  --el-navy:#2b337b;
  --el-ink:#03293b;
  --el-white:#fff;
  --el-wa:#25d366;
  --el-cta-bg:var(--el-cyan-700);
  --el-cta-bg-hover:var(--el-cyan-800);
  --el-cta-text:var(--el-white);
  --el-focus:var(--el-cyan-700);
  --el-focus-dunkel:#7fd9f5; /* Fokus auf Navy 7,06 : 1, auf Tinte 9,50 : 1 */
}

/* ==========================================================================
   A1  Termin- und Primärknöpfe: dunkles Cyan, weisse Schrift (5,24 : 1)
   Vorher: weiss auf #00b4eb = 2,41 : 1 (WCAG 1.4.3 nicht bestanden).
   Betrifft: Hero «Gratis Beratung buchen» (.btn--red, im Customizer auf Cyan
   gesetzt), .btn--blue («TERMIN BUCHEN», «Mehr erfahren», «Bin ich
   geeignet?»), Preisbox .elxp-btn, .elx-btn (Grauer Star u. a.), Knopf
   «Untersuchung buchen» der Grauer-Star-Leiste und «Termin» der mobilen
   Leiste. Der graue Kopfzeilen-Knopf «Kontakt» bleibt grau (nur Hover neu).
   Ausgenommen sind Sekundär-Varianten: .elxp-btn--ghost und .elx-btn mit
   eigenem Inline-Hintergrund (weiss, Navy-Schrift).
   ========================================================================== */
html body .btn.btn--red:not(.button-header-link),
html body .btn.btn--blue,
html body .elxp-btn:not(.elxp-btn--ghost),
html body .elx-btn:not([style*="background"]),
html body .elx-sticky a.b1,
html body #el-leiste a.el-termin{
  background:var(--el-cta-bg) !important;
  border-color:var(--el-cta-bg) !important;
  color:var(--el-cta-text) !important;
}
html body .btn.btn--red:not(.button-header-link):hover,
html body .btn.btn--red:not(.button-header-link):active,
html body .btn.btn--blue:hover,
html body .btn.btn--blue:active,
html body .elxp-btn:not(.elxp-btn--ghost):hover,
html body .elx-btn:not([style*="background"]):hover,
html body .elx-sticky a.b1:hover,
html body #el-leiste a.el-termin:hover{
  background:var(--el-cta-bg-hover) !important;
  border-color:var(--el-cta-bg-hover) !important;
  color:var(--el-cta-text) !important;
}
html body .elxp-btn:not(.elxp-btn--ghost):hover{
  box-shadow:0 8px 20px rgba(0,117,153,.30) !important;
}
/* Auf dunklen Flächen (Preisbox Navy-Verlauf, .elx-cta) trennt ein heller
   Rand den Knopf von der Fläche (#007599 gegen #2b337b allein nur 2,15 : 1). */
html body .elxp-price .elxp-btn:not(.elxp-btn--ghost),
html body .elx-cta .elx-btn:not([style*="background"]){
  box-shadow:0 0 0 2px rgba(255,255,255,.9) !important;
}
/* Sekundärknopf «ghost» (.elxp-btn--ghost) ist für dunkle Flächen gebaut
   (weisse Schrift, weisser Rand). Auf dem Hub steht er zweimal auf hellem
   Grund — «Voruntersuchung buchen» und «Weitere Patientenberichte lesen»
   waren weiss auf #f3f3f3 bzw. Weiss (1,11 bzw. 1,00 : 1), praktisch
   unsichtbar. Auf hellem Grund jetzt Navy-Rahmen und Navy-Schrift (11,28),
   auf dunklen Flächen bleibt er weiss. */
html body .elxp-btn.elxp-btn--ghost{
  background:transparent !important;
  color:var(--el-navy) !important;
  border:1.5px solid var(--el-navy) !important;
}
html body .elxp-btn.elxp-btn--ghost:hover{
  background:var(--el-navy) !important;
  color:var(--el-white) !important;
}
html body :is(.elxp-price,.elx-cta,[style*="background:linear-gradient(135deg,#2b337b"],[style*="background:#2b337b"],[style*="background:#03293b"]) .elxp-btn.elxp-btn--ghost{
  color:var(--el-white) !important;
  border-color:rgba(255,255,255,.85) !important;
}
html body :is(.elxp-price,.elx-cta,[style*="background:linear-gradient(135deg,#2b337b"],[style*="background:#2b337b"],[style*="background:#03293b"]) .elxp-btn.elxp-btn--ghost:hover{
  background:rgba(255,255,255,.12) !important;
}
/* Primärknopf auf diesen dunklen Inline-Flächen ebenfalls mit hellem Rand */
html body :is([style*="background:linear-gradient(135deg,#2b337b"],[style*="background:#2b337b"],[style*="background:#03293b"]) .elxp-btn:not(.elxp-btn--ghost){
  box-shadow:0 0 0 2px rgba(255,255,255,.9) !important;
}
/* Hover-Zustände, die bisher Weiss auf Marken-Cyan zeigten */
html body .button-header .btn--red:hover,
html body .btn.btn--border:hover{
  background-color:var(--el-cta-bg) !important;
  color:var(--el-cta-text) !important;
}

/* ==========================================================================
   A2  Sichtbarer Tastaturfokus (WCAG 2.4.7)
   app.css setzt *{outline:0}. :focus-visible greift nur bei Tastatur-
   bedienung, Mausklicks bleiben ohne Ring.
   ========================================================================== */
html body :is(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:3px solid var(--el-focus) !important;
  outline-offset:2px !important;
}
/* Auf dunklen Flächen heller Ring */
html body :is(.elxp-price,.elx-cta,.elxv-bar .haupt,table thead,[style*="background:linear-gradient(135deg,#2b337b"],[style*="background:#2b337b"],[style*="background:#03293b"]) :is(a,button,[tabindex]):focus-visible{
  outline-color:var(--el-focus-dunkel) !important;
}
/* Fokus nicht unter festen Leisten verstecken (WCAG 2.4.11) */
@media (max-width:768px){
  html{ scroll-padding-bottom:88px; }
}

/* ==========================================================================
   A3  Eine mobile Leiste statt zwei (bis 768 px)
   Bisher lagen auf Behandlungs-/Hubseiten zwei feste Leisten übereinander:
   #el-leiste (Termin · WhatsApp · Anrufen, 61 px) und .elxv-bar
   («Eignung prüfen» · Telefon, 76 px); auf Grauer Star .elx-sticky.
   Neu bleibt nur #el-leiste fest. Die zweite Leiste wird NICHT entfernt,
   sondern als normale Knopfzeile an ihrer Stelle im Inhalt gezeigt —
   «Eignung prüfen» bleibt so erreichbar. Zwischen 769 und 900 px ist
   .elxv-bar weiterhin die einzige feste Leiste (unverändert).
   ========================================================================== */
@media (max-width:768px){
  html body .elxv-bar,
  html body .elx-sticky{
    position:static !important;
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    margin:18px 0 6px;
    padding:0 !important;
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:auto !important;
  }
  html body .elxv-bar a,
  html body .elx-sticky a{
    flex:1 1 200px;
    min-height:48px;
  }
}

/* ==========================================================================
   B1  Links und Überzeilen in Cyan 700 (empfohlen, design-evolution §3)
   Vorher Schrift #00b4eb auf Weiss = 2,41 : 1; Überzeilen #0b90bd = 3,66.
   Nachher #007599 = 5,24 : 1, Hover #006685 = 6,48 : 1.
   Absichtlich OHNE !important und mit denselben Selektoren wie app.css:
   Diese Datei steht nach app.css und ersetzt damit genau die Theme-Regeln;
   Bausteine mit eigener Linkfarbe (Karten, Pillen, weisse Links auf Navy)
   bleiben, weil ihre Regeln spezifischer sind oder später folgen.
   Dekorative Cyan-Flächen (Punkte, Linien, Rahmen) bleiben Marken-Cyan.
   ========================================================================== */
a:hover{ color:var(--el-cyan-800); }
.wyswig-text a,
.post-content .container-large .left-post .text-post a,
.footer__col5 .right a,
.share .right a,
.doctor_list .boxs .box .position,
.related-article .post-thumb .text time{
  color:var(--el-cyan-700);
}
/* Hero-Überzeile steht auf halbdurchsichtigem Glas über dem Foto: dort eine
   Stufe dunkler (Cyan 800), 5,53 : 1 über hellem Hautton, 4,0 : 1 im
   ungünstigsten Fall über mittelgrauem Foto (vorher 2,05 bzw. 1,48). */
.banner-text .banner-text-content .subtitle--up{
  color:var(--el-cyan-800);
}
.wyswig-text a:hover{ color:var(--el-cyan-800); }
/* Überzeile der elxp-Bausteine steht im WPCode-Block nach dieser Datei */
html body .elxp-eyebrow{ color:var(--el-cyan-700); }

/* ==========================================================================
   B2  WhatsApp in der mobilen Leiste: Tinte statt Weiss auf Grün
   Vorher 1,98 : 1, nachher 7,65 : 1. Grün bleibt erkennbar.
   ========================================================================== */
@media (max-width:768px){
  html body #el-leiste a.el-wa{ color:var(--el-ink) !important; }
}

/* ==========================================================================
   B3  Menü-Knopf (mobil) und Menü-Hover: dunkles Cyan statt Marken-Cyan
   Weisses Symbol/Weisse Schrift auf #00b4eb = 2,41 : 1 → 5,24 : 1.
   ========================================================================== */
html body .header .menu-toggle{ background:var(--el-cyan-700) !important; }
html body .header__navigation .menu>li:hover,
html body .header__navigation .menu>li .submenu .box ul li a:hover,
html body .header__navigation .menu>li .submenu .box.only-list ul a:hover,
html body .header__navigation .button-header .button-header-menu li:hover{
  background-color:var(--el-cyan-700) !important;
}

/* Bewegung reduzieren, wenn das System es verlangt (WCAG 2.3.3) */
@media (prefers-reduced-motion:reduce){
  html body .btn, html body .elxp-btn, html body .elx-btn{ transition:none !important; transform:none !important; }
}