/* ================================================================
   cookie-consent-styles.css  -  Cookie-Banner + Einstellungs-Panel
   ================================================================
   VERSION: 7
   ABLAGEORT: /site/templates/styles/cookie-consent-styles.css
   Global geladen (siehe _main.php).
   ================================================================ */

body.cc-noscroll{overflow:hidden;}

.cc-overlay{position:fixed;inset:0;z-index:500;pointer-events:none;background:rgba(15,17,22,0);transition:background .4s var(--ease);}
.cc-overlay.open{pointer-events:auto;background:rgba(15,17,22,.55);}

/* ---------- Banner (eigenstaendige Box unten rechts, kein
   Vollbild-Abdunkeln) ----------
   War vorher eine volle Breite ueber den unteren Bildschirmrand -
   ist dabei mit dem ebenfalls dunklen Unterfooter und dem
   Reopen-Button verschwommen und kaum aufgefallen. Jetzt eine klar
   abgesetzte, schwebende Box - deutlich sichtbarer. */
.cc-banner{
  position:fixed;right:22px;bottom:80px;z-index:501;
  width:min(400px, calc(100vw - 44px));
  background:var(--navy);color:#fff;border-radius:10px;
  border:1px solid #fff;
  padding:24px 24px 22px;box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:16px;
  transform:translateY(24px) scale(.96);opacity:0;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
/* Gleiche Falle wie bei .cc-panel: display:flex wuerde sonst das
   hidden-Attribut ueberschreiben (wird gesetzt, wenn zwischen
   Banner und Panel gewechselt wird). */
.cc-banner[hidden]{display:none;}
.cc-overlay.open .cc-banner:not([hidden]){transform:translateY(0) scale(1);opacity:1;}
.cc-banner-close{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.cc-banner-close:hover{background:rgba(255,255,255,.22);}
.cc-banner-text{padding-right:26px;}
.cc-banner-text b{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em;}
.cc-banner-text p{font-size:13.5px;line-height:1.6;color:#C6CAD4;margin:6px 0 0;font-weight:300;}
.cc-banner-actions{display:flex;flex-direction:column;gap:8px;}
.cc-banner-actions .btn{padding:11px 18px;font-size:13.5px;white-space:nowrap;width:100%;text-align:center;}

/* ---------- Einstellungs-Panel (zentriertes Overlay) ----------
   Gleicher dunkler Navy-Look wie das Banner, weisser Rahmen - bleibt
   aber als groesseres, zentriertes Format bestehen, da hier deutlich
   mehr Inhalt (Kategorien, Dienste-Liste) reinpasst als in die
   kompakte Banner-Box. */
.cc-panel{
  position:fixed;inset:0;z-index:502;background:rgba(15,17,22,.75);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
/* Ohne diese Regel wuerde display:flex das hidden-Attribut immer
   ueberschreiben - das Panel bliebe als dunkler Vollbild-Layer
   sichtbar stehen, selbst nachdem "geschlossen" wurde (panel.hidden
   = true im JS haette dann keine sichtbare Wirkung). Exakt dieselbe
   Falle wie beim Pizza-Konfigurator. */
.cc-panel[hidden]{display:none;}
.cc-panel-box{
  position:relative;background:var(--navy);border:1px solid #fff;border-radius:10px;
  width:100%;max-width:560px;max-height:85vh;overflow-y:auto;
  padding:34px 30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.cc-panel-box h2{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:22px;color:#fff;margin-bottom:10px;
}
.cc-panel-intro{font-size:14px;color:#C6CAD4;line-height:1.6;margin-bottom:20px;}
.cc-panel-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.cc-panel-close:hover{background:rgba(255,255,255,.22);}

.cc-kategorie-titel{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.05em;color:var(--accent);
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);
}
.cc-service{border-top:1px solid rgba(255,255,255,.15);padding:16px 0;}
.cc-kategorie-titel + .cc-service{border-top:none;padding-top:14px;}
.cc-service:first-of-type{border-top:none;padding-top:0;}
.cc-service-fest{opacity:.75;}
.cc-service-head{display:flex;align-items:center;gap:12px;}
.cc-service-head b{font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;color:#fff;}
.cc-service p{font-size:13.5px;color:#C6CAD4;line-height:1.6;margin:8px 0 0 58px;}

/* ---------- Toggle-Schalter ---------- */
.cc-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto;cursor:pointer;}
.cc-switch input{opacity:0;width:0;height:0;}
.cc-switch-slider{
  position:absolute;inset:0;background:rgba(255,255,255,.2);border-radius:24px;transition:background .25s ease;
}
.cc-switch-slider::before{
  content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .25s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.cc-switch input:checked + .cc-switch-slider{background:var(--accent-deep);}
.cc-switch input:checked + .cc-switch-slider::before{transform:translateX(20px);}
.cc-switch-disabled{cursor:default;opacity:.6;}

.cc-panel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap;}
.cc-panel-actions .btn{padding:11px 20px;font-size:13.5px;}

/* ---------- Google-Maps-Platzhalter, solange keine Zustimmung ---------- */
.cc-maps-platzhalter{
  background:var(--surface-alt);border:1px dashed var(--line);border-radius:4px;
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px;gap:12px;
}
.cc-maps-platzhalter p{font-size:14px;color:var(--text-muted);max-width:320px;margin:0;line-height:1.6;}
.cc-maps-platzhalter .btn{font-size:13.5px;padding:10px 18px;}

/* ---------- Hinweis bei Formularen ohne Cloudflare-Zustimmung ---------- */
.cc-turnstile-hinweis{
  background:var(--surface-alt);border:1px dashed var(--line);border-radius:4px;
  padding:14px 16px;font-size:13.5px;color:var(--text-muted);line-height:1.6;margin-bottom:16px;
}
.cc-turnstile-hinweis a,.cc-turnstile-hinweis button{color:var(--accent-deep);text-decoration:underline;cursor:pointer;}

@media(max-width:760px){
  .cc-banner{right:14px;left:14px;bottom:70px;width:auto;}
  .cc-service p{margin-left:0;margin-top:8px;}
}

/* ---------- Wiederoeffnen-Tab (Spitze unten rechts) ----------
   Bleibt dauerhaft sichtbar, sobald eine Entscheidung getroffen
   wurde. Nur Klick oeffnet das volle Einstellungs-Panel - kein
   Hover-Verhalten mehr. */
.cc-reopen{
  position:fixed;right:22px;bottom:22px;z-index:499;
  width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.cc-reopen:hover{transform:scale(1.08);background:var(--navy-2);}
.cc-reopen svg{width:22px;height:22px;}

/* ---------- Vollflaechige Formular-Abdeckung ----------
   Sitzt in einem Wrapper mit position:relative um das jeweilige
   <form> (siehe data-cc-form-blocker in kontakt.php,
   pauschale-feiern.php, stellenangebote.php). */
.cc-form-overlay{
  position:absolute;inset:0;z-index:50;
  background:rgba(247,244,237,.97);border-radius:4px;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
html.dark .cc-form-overlay{background:rgba(21,23,29,.97);}
.cc-form-overlay-box{text-align:center;max-width:340px;}
.cc-form-overlay-box p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0 0 16px;}
.cc-form-overlay-box .btn{font-size:14px;padding:12px 24px;}

@media(max-width:560px){
  .cc-reopen{right:14px;bottom:14px;width:40px;height:40px;}
  .cc-reopen svg{width:18px;height:18px;}
}