/* Eigener Cookie-Banner fuer elektro-aydin.de (ersetzt Usercentrics) */
:root{
  --eac-red:#DF2614;
  --eac-red-dark:#C21F0F;
  --eac-ink:#0C0C0C;
  --eac-text:#4A4A4A;
  --eac-muted:#7A7A7A;
  --eac-line:#ECECEC;
  --eac-soft:#F4F4F4;
  --eac-soft-hover:#EAEAEA;
}

.eac-banner, .eac-banner *, .eac-fab, .eac-map-ph, .eac-map-ph *{box-sizing:border-box}

/* ---------- Banner ---------- */
.eac-banner{
  position:fixed; left:24px; bottom:24px; z-index:100000;
  width:min(420px, calc(100vw - 48px));
  max-height:calc(100vh - 48px); overflow:auto;
  padding:26px 26px 22px;
  background:#fff; color:var(--eac-text);
  border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 24px rgba(0,0,0,.08), 0 32px 64px rgba(0,0,0,.12);
  font-family:"Nunito Sans", Arial, sans-serif; font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  animation:eac-in .4s cubic-bezier(.16,1,.3,1);
}
.eac-banner[hidden]{display:none}
@keyframes eac-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.eac-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.eac-logo{width:38px; height:38px; flex:0 0 38px; border-radius:10px; object-fit:contain}
.eac-title{
  margin:0; font-family:"Inter Tight", "Inter", Arial, sans-serif;
  font-size:18px; font-weight:700; line-height:1.2; color:var(--eac-ink); letter-spacing:-.01em;
}
.eac-sub{margin:2px 0 0; font-size:12.5px; line-height:1.3; color:var(--eac-muted)}

.eac-text{margin:0 0 20px}

.eac-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.eac-btn{
  cursor:pointer; min-height:44px; padding:11px 16px; border:0; border-radius:10px;
  font-family:"Nunito Sans", Arial, sans-serif; font-size:14.5px; font-weight:700; line-height:1.2;
  transition:background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.eac-btn-light{background:var(--eac-soft); color:var(--eac-ink)}
.eac-btn-light:hover{background:var(--eac-soft-hover)}
.eac-btn-red{background:var(--eac-red); color:#fff; box-shadow:0 1px 2px rgba(223,38,20,.25)}
.eac-btn-red:hover{background:var(--eac-red-dark)}

.eac-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap}
.eac-link{
  cursor:pointer; background:none; border:0; padding:2px 0;
  font-family:"Nunito Sans", Arial, sans-serif; font-size:13.5px; font-weight:700; color:var(--eac-ink);
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:underline; text-decoration-color:rgba(12,12,12,.25); text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.eac-link svg{width:15px; height:15px}
.eac-link:hover{color:var(--eac-red); text-decoration-color:currentColor}
.eac-links{font-size:12.5px; color:var(--eac-muted)}
.eac-links a{color:var(--eac-muted); text-decoration:none}
.eac-links a:hover{color:var(--eac-red); text-decoration:underline; text-underline-offset:3px}

.eac-btn:focus-visible, .eac-link:focus-visible, .eac-fab:focus-visible, .eac-links a:focus-visible,
.eac-switch input:focus-visible + span{outline:2px solid var(--eac-red); outline-offset:2px}

/* ---------- Einstellungen ---------- */
.eac-cats{margin:0 0 20px; border-top:1px solid var(--eac-line)}
.eac-cat{padding:14px 0; border-bottom:1px solid var(--eac-line)}
.eac-cat-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.eac-cat-name{font-weight:700; color:var(--eac-ink); font-size:14.5px}
.eac-cat-desc{margin:4px 0 0; padding-right:62px; font-size:13px; line-height:1.5; color:var(--eac-muted)}
.eac-always{font-size:12.5px; font-weight:700; color:var(--eac-muted); white-space:nowrap}

.eac-switch{position:relative; display:inline-block; width:40px; height:24px; flex:0 0 40px; cursor:pointer}
.eac-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1}
.eac-switch span{position:absolute; inset:0; border-radius:24px; background:#D6D6D6; transition:background-color .2s ease}
.eac-switch span::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.eac-switch input:checked + span{background:var(--eac-red)}
.eac-switch input:checked + span::after{transform:translateX(16px)}

.eac-view[hidden]{display:none}

/* ---------- Cookie-Symbol unten links (Stil wie die Kontakt-Buttons rechts) ---------- */
.eac-fab{
  position:fixed; left:14px; bottom:14px; z-index:9999;
  width:54px; height:54px; border-radius:16px; border:1px solid rgba(0,0,0,.10);
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:#000; box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.eac-fab svg{width:24px; height:24px}
.eac-fab[hidden]{display:none}
.eac-fab:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(248,219,19,.35)}
.eac-fab:active{transform:translateY(0) scale(.98)}

/* ---------- Platzhalter fuer Google Maps ---------- */
.eac-map-wrap{position:relative}
.eac-map-ph{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:28px; border-radius:inherit;
  background:var(--eac-soft); color:var(--eac-text);
  font-family:"Nunito Sans", Arial, sans-serif;
}
.eac-map-ph-inner{max-width:380px}
.eac-map-ph svg{width:34px; height:34px; margin:0 auto 12px; display:block; color:var(--eac-red)}
.eac-map-ph strong{
  display:block; margin-bottom:6px;
  font-family:"Inter Tight", Arial, sans-serif; font-size:18px; font-weight:700; color:var(--eac-ink);
}
.eac-map-ph p{margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--eac-muted)}
.eac-map-ph p a{color:var(--eac-ink); text-underline-offset:3px}
.eac-map-ph .eac-btn{min-width:170px}

/* ---------- Handy ---------- */
@media (max-width:600px){
  .eac-banner{left:12px; right:12px; bottom:12px; width:auto; padding:22px 20px 18px; border-radius:14px}
}
@media (max-width:420px){
  .eac-fab{width:50px; height:50px; border-radius:14px}
}
@media (max-width:340px){
  .eac-btns{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .eac-banner{animation:none}
  .eac-btn, .eac-fab, .eac-switch span, .eac-switch span::after{transition:none}
}

/* ---------- Schutz gegen die globalen Button-Stile von Elementor/Theme ----------
   (.elementor-kit-51 button / button:hover faerben sonst alle Buttons gelb) */
html body .eac-banner button, html body .eac-map-ph button{
  -webkit-appearance:none; appearance:none; margin:0; height:auto; width:auto;
  white-space:normal; text-align:center; text-transform:none; letter-spacing:0; user-select:none;
}
html body .eac-banner button.eac-btn, html body .eac-map-ph button.eac-btn{
  min-height:44px; padding:11px 16px; border:0; border-radius:10px;
  font-family:"Nunito Sans", Arial, sans-serif; font-size:14.5px; font-weight:700; line-height:1.2;
}
html body .eac-banner button.eac-btn-light,
html body .eac-banner button.eac-btn-light:focus{background:var(--eac-soft); color:var(--eac-ink); border:0}
html body .eac-banner button.eac-btn-light:hover{background:var(--eac-soft-hover); color:var(--eac-ink); border:0}
html body .eac-banner button.eac-btn-red, html body .eac-map-ph button.eac-btn-red,
html body .eac-banner button.eac-btn-red:focus, html body .eac-map-ph button.eac-btn-red:focus{
  background:var(--eac-red); color:#fff; border:0;
}
html body .eac-banner button.eac-btn-red:hover, html body .eac-map-ph button.eac-btn-red:hover{
  background:var(--eac-red-dark); color:#fff; border:0;
}
html body .eac-banner button.eac-link,
html body .eac-banner button.eac-link:focus{
  background:none; border:0; border-radius:0; padding:2px 0; color:var(--eac-ink);
  font-family:"Nunito Sans", Arial, sans-serif; font-size:13.5px; font-weight:700; line-height:1.4;
  text-decoration:underline; text-decoration-color:rgba(12,12,12,.25);
}
html body .eac-banner button.eac-link:hover{background:none; border:0; color:var(--eac-red); text-decoration-color:currentColor}
html body button.eac-fab, html body button.eac-fab:focus, html body button.eac-fab:hover{
  -webkit-appearance:none; appearance:none; margin:0; width:54px; height:54px;
  background:#000; border:1px solid rgba(0,0,0,.10); border-radius:16px; padding:0; color:inherit;
}
@media (max-width:420px){ html body button.eac-fab{width:50px; height:50px; border-radius:14px} }
