/* =========================
   Elektro Böhm – eb.css
   Theme: Tech Blue Neutral
   ========================= */

/* ---------- Design Tokens ---------- */
:root{
  --header-bg:#0f294d; --header-color:#fff;
  --body-bg:#f4f6f8; --body-color:#1a1a1a;
  --link:#0066cc; --link-hover:#ffb400;
  --btn-bg:#0066cc; --btn-bgh:#004b99; --btn-fg:#fff; --btn-fg-h:#fff;
  --soft-1:#eef3f8; --soft-2:#e9f1fb;
  --radius:12px; --shadow:0 6px 18px rgba(0,0,0,.06);
  --container:1100px; --leading:1.65;

  /* Headerhöhe (für mobilen Fixed-Dropdown) */
  --header-h: 64px;

  /* Footer (Fallbacks) */
  --footer-bg:#0f294d; --footer-color:#ffffff;
  --footer-link:#b3e0ff;
}

/* ---------- Wrapper & Basics ---------- */
.yt { background:var(--body-bg); color:var(--body-color); line-height:var(--leading); }
.yt a { color:var(--link); text-decoration:none; }
.yt a:hover { color:var(--link-hover); text-decoration:underline; }
.yt .container { max-width:var(--container); margin:0 auto; padding:0 16px; }
.yt h1,.yt h2 { line-height:1.2; margin:.2rem 0 .75rem; }
.yt .lead { font-size:1.125rem; opacity:.95; }

/* ---------- Sections ---------- */
.yt-section { padding:2.2rem 0; }
.yt-soft-1 { background:var(--soft-1); border-radius:14px; }
.yt-soft-2 { background:var(--soft-2); border-radius:14px; }

/* ---------- Split (Text/Bild) ---------- */
.yt-split { display:grid; grid-template-columns:1.2fr .9fr; gap:24px; align-items:center; }
.yt-split.rev { grid-template-columns:.9fr 1.2fr; }
@media (max-width: 992px){
  .yt-split, .yt-split.rev { grid-template-columns:1fr; }
}

/* ---------- Bilder & Captions ---------- */
.yt-fig { margin:0; text-align:center; }
.yt-fig img {
  display:block; max-width:100%; height:auto;
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
}
.yt-cap { font-size:.9rem; color:#5f6b7a; margin-top:.35rem; }

/* Bildergrößen */
.yt-hero-img { width:400px; height:auto; max-width:100%; }
.yt-side-img { max-width:320px; }

/* Caption linksbündig & so breit wie das Bild (max 320px) */
.yt-cap.cap-left{
  display:block;
  max-width:320px;     /* entspricht .yt-side-img */
  margin:.35rem 0 0 0; /* nicht zentrieren */
  text-align:left;
}

/* ---------- Karten (Leistungen) ---------- */
.yt-cards { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 992px){ .yt-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .yt-cards { grid-template-columns:1fr; } }
.yt-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.yt-card h3 { margin:.25rem 0 .35rem; font-size:1.05rem; }

/* Kleiner Schatten-Hover für Karten (dezente Interaktion) */
.yt-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); }

/* ---------- Buttons ---------- */
/* Primärbutton: immer weißer Text */
.btn-yt {
  display:inline-block; padding:.6rem 1rem;
  border-radius:10px; border:0;
  background: var(--btn-bg);
  color:#ffffff !important;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-yt:hover { background: var(--btn-bgh); color:#ffffff !important; }
.btn-yt:focus {
  background: var(--btn-bgh);
  color:#ffffff !important;
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
}

/* Outlined Button bleibt kontrastreich */
.btn-yt-outline {
  display:inline-block; padding:.55rem 1rem;
  border-radius:10px; border:1px solid var(--btn-bg);
  color:var(--btn-bg); background:transparent;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-yt-outline:hover { background: var(--btn-bgh); color:#ffffff !important; }

/* ---------- Fokus (A11y) ---------- */
a:focus, button:focus, .btn-yt:focus, .btn-yt-outline:focus {
  outline:2px dashed var(--link);
  outline-offset:3px;
}

/* ---------- Abstände/Utilities ---------- */
.mt-0{margin-top:0!important;} .mt-1{margin-top:.25rem!important;}
.mt-2{margin-top:.5rem!important;} .mt-3{margin-top:1rem!important;}
.mb-0{margin-bottom:0!important;} .mb-1{margin-bottom:.25rem!important;}
mb-2{margin-bottom:.5rem!important;} .mb-3{margin-bottom:1rem!important;}

/* Optionale Textbreite (bei Bedarf aktivieren)
.yt .measure { max-width:70ch; }
*/

/* ---------- Footer (falls genutzt) ---------- */
.yt-footer {
  background:var(--footer-bg); color:var(--footer-color);
  padding:1.5rem 0; border-radius:14px;
}
.yt-footer a { color:#b3e0ff; }
.yt-footer a:hover { color:var(--link-hover); }

/* ---------- Cookiebar (Tech Blue Neutral) ---------- */
.eb-cookiebar #cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:9999}
.eb-cookiebar .cb-wrap{
  max-width:1100px;margin:0 auto 0 auto;padding:.7rem 1rem;
  background:#0f294d;color:#fff; border-radius:12px 12px 0 0;
  display:flex;gap:.75rem;align-items:center;justify-content:space-between;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.eb-cookiebar .cb-text{line-height:1.5}
.eb-cookiebar .cb-link{color:#b3e0ff;text-decoration:underline}
.eb-cookiebar .cb-link:hover{color:#ffb400}
.eb-cookiebar .cb-btn{
  background:#0066cc;color:#fff;border:0;border-radius:10px;
  padding:.45rem .9rem;cursor:pointer;transition:background .15s ease,color .15s ease
}
.eb-cookiebar .cb-btn:hover{background:#004b99;color:#fff}
@media (max-width:680px){
  .eb-cookiebar .cb-wrap{flex-direction:column;align-items:stretch;gap:.6rem}
  .eb-cookiebar .cb-btn{width:100%}
}

/* =========================================================
   Header-Menü: nur Hover-Farbe + animierter Unterstrich (Top-Level)
   ========================================================= */

/* Cassiopeia-Standardlinie am <li> ausschalten */
.container-header .mod-menu > li::after,
.container-header .mod-menu > li:hover::after,
.container-header .mod-menu > li.active::after {
  content: none !important;
  background: transparent !important;
  height: 0 !important;
}

/* Basis-Farbe für Top-Level Links (nimmt Template-Var oder fällt auf Weiß zurück) */
.container-header .mod-menu > li > a {
  position: relative;
  color: var(--headercolor, #fff);
  text-decoration: none;
  padding: .55rem .15rem;
}

/* Unser animierter Unterstrich (aus Mitte heraus) */
.container-header .mod-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .2rem;
  height: 2px;
  background: var(--link-hover, #ffb400);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

/* Hover: Textfarbe & Unterstrich an */
.container-header .mod-menu > li > a:hover { color: var(--link, #0066cc); }
.container-header .mod-menu > li > a:hover::after { transform: scaleX(1); }

/* Active/Current: bleibt markiert */
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active  > a { color: var(--link, #0066cc); }
.container-header .mod-menu > li.current > a::after,
.container-header .mod-menu > li.active  > a::after { transform: scaleX(1); }

/* Tastaturfokus sichtbar (A11y) */
.container-header .mod-menu > li > a:focus {
  outline: 2px dashed var(--link, #0066cc);
  outline-offset: 3px;
}

/* =========================================================
   Untermenü (Dropdown) – kompakt, mobil gut lesbar, nur über Pfeil öffnen
   ========================================================= */

/* Eltern als Positionsanker */
.container-header .mod-menu > li.parent { position: relative; }

/* Basis-Display aktiv lassen (Sichtbarkeit via Opacity/Visibility) */
.container-header .mod-menu > li.parent > ul { display:block !important; }

/* Subpanel Basis (Desktop & Mobile schwebend, Viewport-sicher) */
.container-header .mod-menu > li.parent > .mod-menu__sub{
  position:absolute; top:calc(100% + .5rem); right:0; left:auto;
  /* Viewport-Schutz: ragt nicht über die Seite hinaus */
  width: auto;
  max-width: clamp(240px, 92vw, 340px);
  overflow-x: hidden;               /* horizontales Scrollen verhindern */
  overflow-y: auto;                 /* lange Listen scrollen */
  background:#fff; color:#1a1a1a;
  border:1px solid rgba(0,0,0,.06); border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  padding:.30rem; margin:0; list-style:none;   /* etwas kompakter */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:3000;
}

/* Öffnen am Toggle (Chevron) */
.container-header .mod-menu > li.parent > .mod-menu__toggle-sub:hover ~ .mod-menu__sub,
.container-header .mod-menu > li.parent > .mod-menu__toggle-sub:focus ~ .mod-menu__sub,
.container-header .mod-menu > li.parent > .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Einträge kompakt, saubere Trennung */
.container-header .mod-menu__sub{ padding-left:0; }
.container-header .mod-menu__sub > li{ margin:0; list-style:none; }
/* Abstand zwischen Einträgen verringern */
.container-header .mod-menu__sub > li + li{ margin-top:1px; }

/* Cassiopeia-Linien am <li> aus */
.container-header .mod-menu__sub > li::after,
.container-header .mod-menu__sub > li:hover::after,
.container-header .mod-menu__sub > li.active::after{ content:none !important; }

/* Link-Grundstil – kompakter + jederzeit lesbar */
.container-header .mod-menu__sub > li > a{
  position:relative; display:block;
  padding:.34rem .70rem;           /* kompaktere Zeilenhöhe */
  line-height:1.2; border-radius:6px;
  color:#1a1a1a !important;        /* mobil gleich lesbar */
  text-decoration:none; white-space:nowrap;
  overflow-wrap:anywhere;          /* lange Wörter umbrechen */
  transition:color .18s ease, background .18s ease;
}

/* Unterstrich (Akzent) – an kompakte Zeile angepasst */
.container-header .mod-menu__sub > li > a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:2px;
  background: var(--link-hover, var(--link-hover-color, #ffb400));
  transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}

/* Hover-Farbe */
.container-header .mod-menu__sub > li > a:hover{
  color: var(--link, var(--link-color, #0066cc)) !important;
  background: transparent;
}
.container-header .mod-menu__sub > li > a:hover::after{ transform:scaleX(1); }

/* aktiv/current */
.container-header .mod-menu__sub > li.current > a,
.container-header .mod-menu__sub > li.active  > a{
  color: var(--link, var(--link-color, #0066cc)) !important;
}
.container-header .mod-menu__sub > li.current > a::after,
.container-header .mod-menu__sub > li.active  > a::after{
  transform:scaleX(1);
}

/* ---------- Mobile: Submenü weiterhin schwebend + Viewport-Schutz ---------- */
@media (max-width: 991.98px){
  .container-header .mod-menu > li.parent { position: relative; }

  .container-header .mod-menu > li.parent > .mod-menu__sub{
    position: absolute;
    right: 8px; left: auto; top: calc(100% + .5rem);  /* kleine Innenkante */
    width: min(92vw, 320px);
    max-height: 70vh;
    overflow-y: auto; overflow-x: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    border: 1px solid rgba(0,0,0,.06);
    padding: .30rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 3000;
  }
  .container-header .mod-menu > li.parent > .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub{
    opacity:1; visibility:visible; transform:translateY(0);
  }

  /* Einträge noch ein Tick kompakter am Handy */
  .container-header .mod-menu__sub > li > a{ padding:.32rem .70rem; line-height:1.18; }
}

/* ---------- Sicherheit/Überdeckung ---------- */
/* Verhindert, dass Eltern overflow abschneiden */
.container-header, .container-nav, .navbar{ overflow:visible !important; }

/* Anker für absolute Submenüs (auch wenn Bootstrap .collapse aktiv ist) */
.container-header .navbar,
.grid-child.container-nav { position: relative; z-index: 3000; }

/* Falls Bootstrap-Collapse eingreift: Submenüs trotzdem schwebend */
.navbar .mod-menu__sub { position: absolute !important; right: 0; left: auto; }

/* ===== Footer-Links (Custom Module) – Hover wie im Header ===== */
.container-footer .mod-custom a,
.container-footer .custom a{
  position: relative;
  color: var(--footer-link, #b3e0ff);
  text-decoration: none;
}

.container-footer .mod-custom a::after,
.container-footer .custom a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--link-hover, #ffb400);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.container-footer .mod-custom a:hover,
.container-footer .custom a:hover{
  color: var(--link, #0066cc);
}
.container-footer .mod-custom a:hover::after,
.container-footer .custom a:hover::after{
  transform: scaleX(1);
}

/* Tastaturfokus konsistent */
.container-footer .mod-custom a:focus,
.container-footer .custom a:focus{
  outline: 2px dashed var(--link, #0066cc);
  outline-offset: 3px;
}

/* ---------- Bewegungsreduktion respektieren ---------- */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto !important; }
  .container-header .mod-menu > li > a::after,
  .container-header .mod-menu__sub > li > a::after{ transition: none !important; }
  .container-header .mod-menu > li.parent > .mod-menu__sub{
    transition:none !important;
  }
}
/* === Fix 1: Hover-/Focus-Farben auch im Responsive aktiv === */
@media (max-width: 991.98px){
  /* sichtbare Hover-/Focus-Farbe im Submenü */
  .container-header .mod-menu__sub > li > a:hover,
  .container-header .mod-menu__sub > li > a:focus,
  .container-header .mod-menu__sub > li > a:focus-visible{
    color: var(--link, #0066cc) !important;
    background: #f2f2f2;          /* klarer Kontrast auch bei hellen Themes */
  }
  .container-header .mod-menu__sub > li > a:hover::after,
  .container-header .mod-menu__sub > li > a:focus::after,
  .container-header .mod-menu__sub > li > a:focus-visible::after{
    transform: scaleX(1);
  }
}
/* ---------- Mobile: Submenü rechts bündig, nie nach links raus ---------- */
@media (max-width: 991.98px){
  /* Eltern dürfen statisch sein – Panel hängt am Viewport, nicht am Trigger */
  .container-header .mod-menu > li.parent { position: static; }

  .container-header .mod-menu > li.parent > .mod-menu__sub{
    position: fixed;                 /* an den Viewport binden */
    top: var(--header-h, 64px);
    right: max(env(safe-area-inset-right), 0px); /* iPhone-Notch sicher */
    left: auto !important;           /* KEIN linkes Andocken */
    inset-inline-start: auto;        /* logische Eigenschaft, falls gesetzt */
    inset-inline-end: 0;             /* rechts bündig */

    width: auto !important;
    min-width: 120px;
    max-width: min(300px, 92svw);    /* SCHMAL & innerhalb des Viewports */
    box-sizing: border-box;

    max-height: calc(100svh - var(--header-h, 64px) - 16px);
    overflow-y: auto; 
    overflow-x: hidden;

    padding: .30rem;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    background: #fff;
    z-index: 3000;

    /* Animation nur vertikal – kein translateX, damit nichts nach links ragt */
    transform-origin: top right;
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }

  /* öffnen über den Chevron/Toggle */
  .container-header .mod-menu > li.parent > .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub{
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  /* Links: sicher dunkel, sauberer Umbruch – keine abgeschnittenen Wörter */
  .container-header .mod-menu__sub > li > a,
  .container-header .mod-menu__sub > li > a:link,
  .container-header .mod-menu__sub > li > a:visited{
    color:#000 !important;
    padding:.34rem .70rem; 
    line-height:1.18;
    white-space: normal;           /* statt nowrap */
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
  }

  /* Hover/Focus auch mobil sichtbar */
  .container-header .mod-menu__sub > li > a:hover,
  .container-header .mod-menu__sub > li > a:focus,
  .container-header .mod-menu__sub > li > a:focus-visible{
    color: var(--link, #0066cc) !important;
    background: #f2f2f2;
  }
  .container-header .mod-menu__sub > li > a:hover::after,
  .container-header .mod-menu__sub > li > a:focus::after,
  .container-header .mod-menu__sub > li > a:focus-visible::after{
    transform: scaleX(1);
  }
}