/* ═══════════════════════════════════════════════════════════════
   Einwilligungs-Banner — M4 DIGITAL

   Der Hinweis steht als Leiste am unteren Rand und blockiert die Seite
   bewusst nicht: Es gibt derzeit nichts zu blockieren, und eine
   erzwungene Entscheidung vor dem ersten Blick auf die Seite kostet
   nur Anfragen. Im Markup steht er trotzdem ganz oben — direkt nach
   dem Sprunglink —, damit er mit der Tastatur sofort erreichbar ist.
   ═══════════════════════════════════════════════════════════════ */

.consent-layer{
  position:fixed;inset:auto 0 0 0;z-index:9990;
  display:none;
  padding:clamp(16px,2.4vw,28px);
}
.consent-layer.is-on{display:block}

/* Auftritt: von unten hereinfahren, sobald die Seite steht. */
.consent-layer.is-on .consent-box{
  animation:consent-auf .6s var(--ease) both;
}
@keyframes consent-auf{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .consent-layer.is-on .consent-box{animation:none}
}

.consent-box{
  max-width:var(--wrap);margin-inline:auto;
  background:var(--paper);
  border:1px solid rgba(34,39,43,.12);
  border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(34,39,43,.5);
  padding:clamp(22px,2.6vw,34px);
}

.consent-box h2{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(19px,1.8vw,24px);letter-spacing:-.022em;
  color:var(--ink);margin-bottom:10px;
}
.consent-box p{color:var(--ink-2);font-size:15px;line-height:1.7;max-width:70ch}
.consent-box a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.consent-actions .btn{margin:0}

/* Einstellungen */
.consent-detail{display:none;margin-top:24px;border-top:1px solid rgba(34,39,43,.1);padding-top:20px}
.consent-detail.is-on{display:block}

.consent-opt{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid rgba(34,39,43,.08);
}
.consent-opt:last-child{border-bottom:0}
.consent-opt input{
  appearance:none;-webkit-appearance:none;flex:none;margin-top:3px;
  width:18px;height:18px;border-radius:5px;
  border:1.5px solid rgba(34,39,43,.28);
  display:grid;place-content:center;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.consent-opt input::after{
  content:"";width:9px;height:9px;border-radius:2px;background:var(--paper);
  transform:scale(0);transition:transform .25s var(--ease);
}
.consent-opt input:checked{background:var(--teal-deep);border-color:var(--teal-deep)}
.consent-opt input:checked::after{transform:scale(1)}
.consent-opt input:disabled{opacity:.55;cursor:default}
.consent-opt b{display:block;font-size:15px;color:var(--ink);font-weight:500}
.consent-opt span{display:block;margin-top:4px;font-size:14px;color:var(--ink-2);line-height:1.6}

/* Das Skript blendet die Teile aus, die zur aktuellen Lage nicht passen.
   Ohne diese Regel setzt sich display:inline-flex der Schaltflächen
   gegen das hidden-Attribut durch. */
.consent-layer [hidden]{display:none !important}

@media (max-width:480px){
  .consent-actions{flex-direction:column}
  .consent-actions .btn{width:100%;justify-content:center}
}