/* Einwilligung: Banner unten links und Einstellungsdialog.
   Markup kommt komplett aus js/consent.js. Aussehen wie der Banner auf niclass.de:
   weißer Kasten mit 6 px Rundung, Monospace-Schrift (dort Roboto Mono, hier
   JetBrains Mono aus der Seite), fetter Titel 18 px, Text 14 px, Knöpfe mit 2 px
   Rand und 6 px Rundung, der Hauptknopf gefüllt. Akzentfarbe ist das Braun der
   Seite statt des Orange von niclass.de. */
.consent{position:fixed;left:40px;bottom:40px;z-index:1000;width:min(440px,calc(100vw - 80px));
  background:#fff;color:#212121;border:1px solid #f4f4f4;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.02),0 14px 40px rgba(0,0,0,.12);padding:24px 27px 21px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;line-height:1.7}
.consent[hidden]{display:none}
.consent__titel{margin:0 0 12px;font-size:18px;font-weight:700;line-height:24px;color:#212121}
.consent__text{margin:0 0 16px;font-size:14px;line-height:24px;color:#212121}
.consent__aktionen{display:flex;flex-wrap:wrap;gap:8px}
.consent .cbtn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;padding:20px 30px;border-radius:6px;border:2px solid var(--braun);
  background:transparent;color:var(--braun);font-family:inherit;font-weight:500;font-size:14px;line-height:1.5;cursor:pointer;transition:background .2s,color .2s}
.consent .cbtn:hover{background:#f4f2ec}
.consent .cbtn--primary{flex-basis:100%;background:var(--braun);color:#fff}
.consent .cbtn--primary:hover{background:#3a3129;border-color:#3a3129}

/* ---------- Einstellungen ---------- */
.consent-dialog{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;line-height:1.7;color:#212121}
.consent-dialog[hidden]{display:none}
.consent-dialog__karte{width:min(845px,100%);max-height:min(88vh,760px);background:#fff;color:#212121;border-radius:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden}
.consent-dialog__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid #f4f4f4}
.consent-dialog__titel{margin:0;font-size:18px;font-weight:700;line-height:24px;color:#212121}
.consent-dialog__schliessen{width:36px;height:36px;border:none;background:none;cursor:pointer;border-radius:6px;display:grid;place-items:center;font-size:18px;line-height:1;color:#212121}
.consent-dialog__schliessen:hover{background:#f4f4f4}
.consent-dialog__koerper{padding:22px 24px;overflow-y:auto;flex:1 1 auto}
.consent-dialog__intro{margin:0 0 20px;font-size:14px;line-height:24px}
.consent-gruppe{border-top:1px solid #f4f4f4;padding:22px 0 22px 22px}
.consent-gruppe__kopf{display:flex;align-items:center;gap:16px;width:100%}
.consent-gruppe__schalter{display:flex;align-items:center;gap:8px;flex:1 1 auto;border:none;background:none;padding:0;cursor:pointer;text-align:left;
  font-family:inherit;font-weight:700;font-size:16px;line-height:24px;color:#212121}
.consent-gruppe__pfeil{display:inline-block;margin-left:-22px;width:22px;transition:transform .2s;font-size:14px;color:#212121}
.consent-gruppe.is-offen .consent-gruppe__pfeil{transform:rotate(90deg)}
.consent-gruppe__immer{font-size:14px;font-weight:600;color:#008000;white-space:nowrap}
.consent-gruppe__text{margin:10px 0 0;font-size:14px;line-height:24px}
.consent-gruppe__detail{margin:12px 0 0;padding:14px 16px;background:#f4f4f4;border-radius:6px;font-size:13px;line-height:22px}
.consent-gruppe__detail[hidden]{display:none}
.consent-gruppe__detail dt{font-weight:700;margin-top:10px}
.consent-gruppe__detail dt:first-child{margin-top:0}
.consent-gruppe__detail dd{margin:2px 0 0}
.consent__wege{margin:16px 0 0;font-size:13px;line-height:22px;color:#212121}
.consent__wege a{color:inherit;text-decoration:underline}

/* Umschalter wie auf niclass.de, 44 × 24 px */
.consent-schalter{position:relative;flex:0 0 auto;width:44px;height:24px;cursor:pointer}
.consent-schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.consent-schalter__spur{position:absolute;inset:0;border-radius:999px;background:#d0d5d2;transition:background .2s;pointer-events:none}
.consent-schalter__knopf{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;pointer-events:none}
.consent-schalter input:checked ~ .consent-schalter__spur{background:#1863dc}
.consent-schalter input:checked ~ .consent-schalter__knopf{transform:translateX(20px)}
.consent-schalter input:focus-visible ~ .consent-schalter__spur{outline:2px solid var(--braun);outline-offset:2px}

.consent-dialog__fuss{display:flex;flex-wrap:wrap;gap:8px;padding:22px 24px;border-top:1px solid #f4f4f4}
.consent-dialog .cbtn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;padding:20px 30px;border-radius:6px;border:2px solid var(--braun);
  background:transparent;color:var(--braun);font-family:inherit;font-weight:500;font-size:14px;line-height:1.5;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.consent-dialog .cbtn:hover{background:#f4f2ec}
.consent-dialog .cbtn--primary{background:var(--braun);color:#fff}
.consent-dialog .cbtn--primary:hover{background:#3a3129;border-color:#3a3129}

body.consent-lock{overflow:hidden}

@media(max-width:600px){
  .consent{left:0;right:0;bottom:0;width:auto;border-radius:6px 6px 0 0;padding:20px 24px}
  .consent .cbtn{flex:1 1 100%;padding:14px 24px}
  .consent-dialog{padding:0;align-items:stretch}
  .consent-dialog__karte{width:100%;max-height:none;border-radius:0}
  .consent-dialog__fuss .cbtn{flex:1 1 100%;padding:14px 24px}
}
