/* ============================================================================
   LIND STUDIO — Einwilligungsbanner (Cookies / Statistik)
   Eigenständig: funktioniert auf der Startseite (styles.css) genauso wie auf
   den Rechtsseiten (legal.css). Die Farbwerte sind mit Rückfallwerten
   geschrieben, falls eine Seite die Variablen nicht definiert.
   ========================================================================== */

.cc,.cc-fab{
  --cc-ink:var(--ink,#f5fbff);
  --cc-muted:var(--muted,rgba(232,245,255,.82));
  --cc-muted-2:var(--muted-2,rgba(214,236,252,.64));
  --cc-line:var(--line,rgba(255,255,255,.18));
  --cc-ice:var(--ice,#bdf0ff);
  --cc-deep:var(--deep,#031a36);
  --cc-ease:cubic-bezier(.22,.61,.36,1);
}

/* Handy und Tablet: mittig im Bild, Breite passt sich dem Gerät an.
   Zentriert wird über "translate", damit die Einblend-Animation (transform)
   sich nicht damit in die Quere kommt. */
.cc{
  position:fixed;z-index:1000;
  top:50%;left:50%;translate:-50% -50%;
  width:min(390px,calc(100% - 32px));
  display:flex;flex-direction:column;
  max-height:min(calc(100svh - 32px),620px);
  border-radius:20px;overflow:hidden;
  color:var(--cc-ink);
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  font-size:13.5px;line-height:1.55;
  background:
    linear-gradient(155deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,.08) 100%),
    rgba(5,32,68,.88);
  -webkit-backdrop-filter:blur(26px) saturate(175%);
  backdrop-filter:blur(26px) saturate(175%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 40px 80px -30px rgba(0,14,40,.8),
    0 10px 30px -14px rgba(0,14,40,.6),
    0 0 0 100vmax rgba(0,10,28,.45);
}
@media (min-width:900px){
  .cc{top:auto;left:auto;translate:none;right:20px;bottom:20px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.16),
      0 40px 80px -30px rgba(0,14,40,.8),0 10px 30px -14px rgba(0,14,40,.6)}
}
/* Browser ohne backdrop-filter: dichtere Fläche statt Unschärfe */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cc{background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(4,26,56,.98)}
}

.cc[hidden]{display:none!important}
.cc.is-ein{animation:cc-auf .5s var(--cc-ease) both}
@keyframes cc-auf{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Kopf ---------- */
.cc-body{padding:18px 20px 0;overflow:auto;overscroll-behavior:contain}
.cc-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cc-ice)}
.cc-kicker::before{content:"";width:14px;height:1px;background:currentColor;opacity:.7}
.cc h2{font:700 17px/1.2 var(--display,inherit);letter-spacing:-.025em;margin-bottom:7px}
.cc p{color:var(--cc-muted);margin-bottom:9px}
.cc p:last-child{margin-bottom:0}
.cc a{color:var(--cc-ice);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cc a:hover{color:#fff}
.cc strong{color:var(--cc-ink);font-weight:700}

/* ---------- Schalter je Kategorie ---------- */
.cc-kats{display:flex;flex-direction:column;gap:8px;margin:13px 0 2px}
.cc-kat{padding:13px 14px;border-radius:13px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.1)}
.cc-kat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-kat h3{font:700 14px/1.3 var(--display,inherit);letter-spacing:-.01em}
.cc-kat p{font-size:12.5px;line-height:1.5;color:var(--cc-muted-2);margin:7px 0 0}
.cc-kat .cc-kat-info{margin-top:10px;padding-top:10px;border-top:1px solid var(--cc-line);
  font-size:11.5px;line-height:1.45}

/* Schiebeschalter */
.cc-switch{position:relative;flex:none;width:42px;height:24px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .3s var(--cc-ease),box-shadow .3s var(--cc-ease)}
.cc-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cc-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#dff2ff);box-shadow:0 2px 6px rgba(0,14,40,.45);
  transition:transform .3s var(--cc-ease)}
.cc-switch:has(input:checked){background:linear-gradient(180deg,#8fdcff,#3ea6ef);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.cc-switch:has(input:checked)::after{transform:translateX(18px)}
.cc-switch:has(input:focus-visible){outline:2px solid var(--cc-ice);outline-offset:3px}
.cc-switch:has(input:disabled){cursor:default;background:linear-gradient(180deg,rgba(143,220,255,.5),rgba(62,166,239,.5))}
.cc-switch:has(input:disabled)::after{background:linear-gradient(180deg,#f0f8ff,#cfe6f6)}

/* ---------- Ausklappbarer Teil ----------
   Die Regeln stehen bewusst mit .cc davor: sonst gewinnt das später
   notierte .cc-btn{display:inline-flex} und der Knopf wäre immer sichtbar. */
.cc .cc-mehr{display:none}
.cc.is-offen .cc-mehr{display:block;animation:cc-mehr .35s var(--cc-ease) both}
.cc.is-offen button.cc-mehr{display:flex;width:100%}
.cc.is-offen .cc-kurz{display:none}
@keyframes cc-mehr{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Knöpfe ---------- */
.cc-aktionen{display:flex;flex-direction:column;gap:7px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  margin-top:14px;border-top:1px solid var(--cc-line);background:rgba(2,20,46,.3)}
.cc-reihe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:11px 14px;border-radius:999px;font:700 13.5px/1.15 var(--sans,inherit);letter-spacing:-.005em;
  text-align:center;white-space:normal;
  transition:transform .3s var(--cc-ease),background .3s var(--cc-ease),box-shadow .3s var(--cc-ease)}
.cc-btn:active{transform:scale(.98)}
.cc-btn:focus-visible{outline:2px solid var(--cc-ice);outline-offset:3px}
/* „Ablehnen" und „Akzeptieren" sind bewusst gleich groß und gleich auffällig. */
.cc-btn-haupt{color:var(--cc-deep);
  background:linear-gradient(180deg,#ffffff 0%,#e4f6ff 55%,#c6ecff 100%);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -12px rgba(140,220,255,.8)}
.cc-btn-haupt:hover{box-shadow:inset 0 1px 0 #fff,0 16px 34px -12px rgba(140,220,255,.95)}
.cc-btn-neben{color:var(--cc-ink);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.22)}
.cc-btn-neben:hover{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.12))}
.cc-btn-text{background:none;box-shadow:none;color:var(--cc-muted);font-weight:600;font-size:12.5px;padding:3px 8px;
  text-decoration:underline;text-underline-offset:3px}
.cc-btn-text:hover{color:var(--cc-ink)}
.cc-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;
  font-size:11.5px;color:var(--cc-muted-2)}
.cc-fuss a{color:var(--cc-muted-2);text-decoration:underline;text-underline-offset:3px}
.cc-fuss a:hover{color:var(--cc-ink)}

/* ---------- Dauerhafter Knopf unten rechts ----------
   Gleiche Gestaltung wie die übrigen Glasflächen, eigenständig notiert, damit
   er auch auf den Rechtsseiten (legal.css) richtig aussieht. */
.cc-fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:990;
  display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;
  border:0;cursor:pointer;border-radius:999px;
  font:700 12.5px/1 var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  color:var(--cc-ink);
  background:linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),rgba(5,32,68,.74);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 18px 40px -22px rgba(0,14,40,.75);
  transition:transform .3s var(--cc-ease),box-shadow .3s var(--cc-ease)}
.cc-fab[hidden]{display:none!important}
.cc-fab:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.24),
             0 22px 48px -20px rgba(0,14,40,.85)}
.cc-fab:active{transform:translateY(0) scale(.97)}
.cc-fab:focus-visible{outline:2px solid var(--cc-ice);outline-offset:3px}
.cc-fab-icon{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,#cdefff)}
.cc-fab-icon svg{width:15px;height:15px;display:block;fill:var(--cc-deep)}
.cc-fab-icon .loch{fill:#fff}
.cc-fab-label{max-width:0;overflow:hidden;white-space:nowrap;
  transition:max-width .4s var(--cc-ease)}
.cc-fab:hover .cc-fab-label,.cc-fab:focus-visible .cc-fab-label{max-width:180px}
/* Ohne Mauszeiger gibt es kein Aufklappen — dort steht die Beschriftung immer */
@media (hover:none){.cc-fab-label{max-width:180px}}
/* Handy: nur das Cookie-Symbol als kleiner runder Knopf */
@media (max-width:640px){
  .cc-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    padding:6px;gap:0}
  .cc-fab-label{display:none}
  .cc-fab-icon{width:30px;height:30px}
  .cc-fab-icon svg{width:18px;height:18px}
}

/* ---------- Auslöser in der Fußzeile ---------- */
.cc-oeffner{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;
  text-align:left;transition:color .2s}
.cc-oeffner:hover{color:var(--ink,#f5fbff)}
.cc-oeffner:focus-visible{outline:2px solid var(--ice,#bdf0ff);outline-offset:3px;border-radius:6px}

@media (max-width:640px){
  .cc{border-radius:18px;font-size:13.5px}
  .cc-body{padding:16px 16px 0}
  .cc-aktionen{padding:13px 16px calc(13px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .cc,.cc *{animation:none!important;transition-duration:.01ms!important}
}