/* Lucian Katzbach – Landingpages · Cookie-Consent
   Nicht blockierendes Banner am unteren Rand. Farben und Schriften greifen die
   jeweilige Seitenvariante auf: definiert eine Theme-CSS ihren Token, gewinnt
   er; sonst faellt die Kette auf das Teal der base.css zurueck. */

.cc{
  /* Sketch nutzt --marker-ink statt --marker-deep: das helle Limette traegt
     weisse Schrift nicht (nur 2,8:1). */
  /* Teal-700 statt des helleren Teal-600 der .btn--primary: mit weisser
     Schrift kommt 600 nur auf 4,2:1. */
  --cc-accent: var(--nb-green, var(--sp-indigo, var(--marker-ink, #B84A18)));
  --cc-accent-dark: var(--nb-green-dark, var(--sp-indigo-dark, var(--marker-ink, #7C2F0B)));
  --cc-accent-dark: color-mix(in srgb, var(--cc-accent) 82%, #000);
  --cc-ink:#122740;
  --cc-body:#556A7C;
  --cc-line:#E3EAEF;
  --cc-f-head: var(--f-arch, var(--f-grot, var(--f-note, var(--f-head, system-ui))));
  --cc-f-body: var(--f-arch, var(--f-grot, var(--f-note, var(--f-body, system-ui))));

  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483000;
  display:flex;
  justify-content:center;
  padding:16px;
  /* Kein Backdrop, keine Sperre: die Seite dahinter bleibt bedienbar. */
  pointer-events:none;
  font-family:var(--cc-f-body);
  animation:cc-fade .22s ease both;
}

.cc__box{
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:560px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  background:#fff;
  color:var(--cc-body);
  border:1px solid var(--cc-line);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(7,26,44,.28);
  padding:clamp(18px,3.4vw,26px);
  animation:cc-rise .26s cubic-bezier(.2,.7,.3,1) both;
}

/* ---- Ebene 1: Auswahl ---- */
.cc__view--main{display:flex;flex-direction:column;min-height:0;overflow-y:auto}

.cc__title{
  margin:0 0 8px;
  font-family:var(--cc-f-head);
  font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.45rem);
  line-height:1.25;
  color:var(--cc-ink);
}

.cc__text{margin:0;font-size:.92rem;line-height:1.55}

.cc__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  border:1px solid var(--cc-line);
  border-radius:12px;
}
.cc__list li{padding:10px 13px;font-size:.84rem;line-height:1.45}
.cc__list li + li{border-top:1px solid var(--cc-line)}

.cc__optHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
}
.cc__opt:not(.cc__opt--fix) .cc__optHead{cursor:pointer}
.cc__optName{color:var(--cc-ink);font-size:.88rem;font-weight:700}
.cc__optText{margin:0}

.cc__badge{
  flex:none;
  padding:3px 9px;
  border-radius:999px;
  background:#EEF2F5;
  color:#556A7C;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.02em;
}

/* Schalter: echte Checkbox, optisch versteckt aber fokussierbar –
   so bleiben Tastatur und Screenreader korrekt bedienbar. */
.cc__sw{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
}
.cc__swUi{
  flex:none;
  position:relative;
  width:40px;height:23px;
  border-radius:999px;
  background:#CBD6DE;
  transition:background .16s ease;
}
.cc__swUi::after{
  content:"";
  position:absolute;top:3px;left:3px;
  width:17px;height:17px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(7,26,44,.3);
  transition:transform .16s ease;
}
.cc__sw:checked + .cc__swUi{background:var(--cc-accent)}
.cc__sw:checked + .cc__swUi::after{transform:translateX(17px)}
.cc__sw:focus-visible + .cc__swUi{outline:3px solid var(--cc-accent);outline-offset:2px}

.cc__actions{display:flex;gap:10px;margin-top:16px;flex:none}
.cc__btn{
  flex:1 1 0;
  min-height:50px;
  padding:14px 18px;
  border:2px solid transparent;
  border-radius:12px;
  font-family:var(--cc-f-head);
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.cc__btn:hover{transform:translateY(-1px)}
.cc__btn:focus-visible{outline:3px solid var(--cc-accent);outline-offset:2px}
.cc__btn--primary{background:var(--cc-accent);color:#fff}
.cc__btn--primary:hover{background:var(--cc-accent-dark)}
.cc__btn--ghost{background:#fff;color:var(--cc-ink);border-color:var(--cc-line)}
.cc__btn--ghost:hover{border-color:var(--cc-accent);color:var(--cc-accent-dark)}

.cc__more{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-top:12px;
  flex:none;
}
.cc__more button{
  background:none;
  border:0;
  padding:2px 0;
  font:inherit;
  font-size:.8rem;
  color:var(--cc-accent-dark);
  text-decoration:underline;
  cursor:pointer;
}
.cc__more button:focus-visible{outline:3px solid var(--cc-accent);outline-offset:2px}

/* ---- Ebene 2: Datenschutzerklaerung im Banner ----
   Statt eines Links, der die Seite verlaesst: der Text klappt hier auf und
   scrollt in sich. So laesst er sich vor der Entscheidung lesen. */
.cc__view--legal{display:none}
.cc.is-legal .cc__view--main{display:none}
.cc.is-legal .cc__view--legal:not([hidden]){display:flex;flex-direction:column;min-height:0}
.cc__view[hidden]{display:none}
.cc.is-legal .cc__box{max-width:720px}

.cc__legalhead{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex:none}
.cc__legaltitle{
  margin:0;
  font-family:var(--cc-f-head);
  font-weight:700;
  font-size:1.05rem;
  color:var(--cc-ink);
}
.cc__back{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--cc-line);
  border-radius:9px;
  padding:7px 12px;
  font-family:var(--cc-f-head);
  font-size:.8rem;
  font-weight:600;
  color:var(--cc-ink);
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.cc__back::before{content:"\2190"}
.cc__back:hover{border-color:var(--cc-accent);color:var(--cc-accent-dark)}
.cc__back:focus-visible{outline:3px solid var(--cc-accent);outline-offset:2px}

.cc__legal{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--cc-line);
  border-radius:12px;
  padding:14px 16px;
  font-size:.8rem;
  line-height:1.55;
}
.cc__legal:focus-visible{outline:3px solid var(--cc-accent);outline-offset:2px}
.cc__legal h3{
  margin:1.5em 0 .5em;
  font-family:var(--cc-f-head);
  font-size:.95rem;
  color:var(--cc-ink);
}
.cc__legal h4{
  margin:1.3em 0 .4em;
  font-family:var(--cc-f-head);
  font-size:.86rem;
  color:var(--cc-ink);
}
.cc__legal > :first-child{margin-top:0}
.cc__legal p{margin:0 0 .7em}
.cc__legal ul{margin:0 0 .8em;padding-left:1.2em}
.cc__legal li{margin-bottom:.4em}
.cc__legal b{color:var(--cc-ink)}
.cc__legal a{color:var(--cc-accent-dark);word-break:break-word}

/* Fusszeilen-Link zum erneuten Oeffnen */
.cc-link{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
}

@media (max-width:520px){
  .cc{padding:12px}
  .cc__box{
    padding:20px 18px;
    border-radius:16px;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .cc__list li{padding:9px 12px;font-size:.8rem}
  .cc__btn{min-height:46px;padding:12px 8px;font-size:.85rem}
}

/* Flache Viewports (Landscape-Handy): nur noch das Noetigste an Luft */
@media (max-height:560px){
  .cc__box{padding:16px 18px}
  .cc__title{font-size:1.1rem;margin-bottom:6px}
  .cc__list{margin-top:10px}
  .cc__list li{padding:8px 12px}
  .cc__actions{margin-top:12px}
}

@keyframes cc-fade{from{opacity:0}to{opacity:1}}
@keyframes cc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .cc,.cc__box{animation:none}
  .cc__btn:hover{transform:none}
}