/* Cookie-Banner: nur Tokens aus dem Theme (alpner.css). Beide Hauptknöpfe (Ablehnen, Akzeptieren) sind identisch gestaltet. */
.alp-cc{position:fixed;z-index:120;inset-inline:0;inset-block-end:16px;margin-inline:auto;inline-size:min(780px,calc(100% - 2 * var(--gutter,20px)));
  display:grid;grid-template-columns:1fr;grid-template-areas:"kopf" "text" "knoepfe";gap:var(--s-3,12px);
  padding:var(--s-5,24px) var(--s-6,32px);background:var(--bg,#fff);color:var(--text,#3f4358);border:1px solid var(--line-2,#d9dce8);
  border-radius:var(--r-lg,22px);box-shadow:var(--shadow-md);font-family:var(--f,inherit)}
.alp-cc[hidden]{display:none}
.alp-cc-kopf{grid-area:kopf;display:flex;align-items:center;gap:var(--s-3,12px)}
.alp-cc-icon{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r-sm,12px);background:var(--blue-soft,#eaf0fb);color:var(--blue,#234c9d)}
.alp-cc-titel{margin:0;max-inline-size:none;font-size:var(--step-1,1.0625rem);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink,#16163a);text-wrap:balance}
.alp-cc-titel:focus-visible{outline:3px solid var(--focus,#234c9d);outline-offset:3px;border-radius:var(--r-xs,8px)}
.alp-cc-text{grid-area:text;margin:0;max-inline-size:none;font-size:var(--step-sm,.875rem);line-height:1.6;color:var(--text,#3f4358)}
.alp-cc-text a,.alp-cc-recht a{color:var(--blue,#234c9d);font-weight:650;text-decoration:underline;text-underline-offset:.22em;display:inline-block;padding-block:12px;margin-block:-12px}
/* Wunsch Nutzer 29.10.2026: oben Titel, dann Text, darunter eine Knopfreihe «OK», «Einstellungen», «Datenschutz» */
.alp-cc-knoepfe{grid-area:knoepfe;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2,8px) var(--s-3,12px);margin-block-start:var(--s-1,4px)}
.alp-cc-knoepfe .alp-cc-btn{min-inline-size:140px}
.alp-cc-btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:48px;padding:0 24px;border-radius:var(--r-pill,999px);
  border:1.5px solid var(--navy,#0d0d3f);background:var(--navy,#0d0d3f);color:#fff;font:650 var(--step-body,1rem)/1.2 var(--f,inherit);text-align:center;cursor:pointer;
  transition:background-color var(--t-fast,.15s) var(--ease,ease),border-color var(--t-fast,.15s) var(--ease,ease),transform var(--t,.25s) var(--ease,ease)}
.alp-cc-btn:hover{background:var(--navy-2,#1b1b5a);border-color:var(--navy-2,#1b1b5a)}
.alp-cc-link{min-block-size:44px;padding:0 12px;border:0;background:none;color:var(--ink,#16163a);font:600 var(--step-sm,.875rem)/1.2 var(--f,inherit);text-decoration:underline;text-underline-offset:.22em;cursor:pointer;border-radius:var(--r-pill,999px)}
.alp-cc-link:hover{color:var(--blue,#234c9d)}
.alp-cc-knoepfe .alp-cc-link{display:inline-flex;align-items:center;justify-content:center}
.alp-cc :is(button,a):focus-visible,.alp-cc-modal :is(button,a,input):focus-visible{outline:3px solid var(--focus,#234c9d);outline-offset:3px}
.alp-cc-btn:focus-visible{outline-color:var(--focus,#234c9d)}

/* Einstellungsdialog */
.alp-cc-modal{inline-size:min(520px,calc(100% - 2 * var(--gutter,20px)));max-block-size:calc(100dvh - 2 * var(--gutter,20px));padding:0;margin:auto;border:0;border-radius:var(--r-lg,22px);
  background:var(--bg,#fff);color:var(--text,#3f4358);box-shadow:var(--shadow-md);font-family:var(--f,inherit);overflow:hidden}
.alp-cc-modal[open]{display:flex;flex-direction:column}
.alp-cc-modal::backdrop{background:rgb(13 13 63/.55);backdrop-filter:blur(3px)}
.alp-cc-m-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4,16px);padding:var(--s-4,16px) var(--s-5,24px);border-block-end:1px solid var(--line,#e4e6ef)}
.alp-cc-m-titel{margin:0;max-inline-size:none;font-size:var(--step-h3,1.25rem);font-weight:700;color:var(--ink,#16163a);letter-spacing:-.015em}
.alp-cc-zu{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r-sm,12px);border:1px solid var(--line-2,#d9dce8);background:var(--bg-2,#f5f6fa);color:var(--ink,#16163a);cursor:pointer;transition:background-color var(--t-fast,.15s) var(--ease,ease)}
.alp-cc-zu:hover{background:var(--line,#e4e6ef)}
.alp-cc-m-inhalt{padding:var(--s-5,24px);overflow-y:auto;display:grid;gap:var(--s-3,12px)}
.alp-cc-m-intro{margin:0 0 var(--s-2,8px);font-size:var(--step-sm,.875rem);line-height:1.6;max-inline-size:none}
.alp-cc-kat{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4,16px);padding:var(--s-4,16px);border:1px solid var(--line-2,#d9dce8);border-radius:var(--r-md,16px);min-block-size:44px}
.alp-cc-kat-wahl{cursor:pointer;transition:border-color var(--t-fast,.15s) var(--ease,ease),background-color var(--t-fast,.15s) var(--ease,ease)}
.alp-cc-kat-wahl:hover{border-color:var(--blue,#234c9d);background:var(--blue-soft,#eaf0fb)}
.alp-cc-kat-text{display:grid;gap:4px;min-inline-size:0;font-size:var(--step-sm,.875rem);line-height:1.5;color:var(--text,#3f4358)}
.alp-cc-kat-text strong{font-size:var(--step-body,1rem);font-weight:650;color:var(--ink,#16163a)}
.alp-cc-fest{flex:none;font-size:var(--step-xs,.8125rem);font-weight:650;color:var(--ink,#16163a);background:var(--bg-2,#f5f6fa);border-radius:var(--r-pill,999px);padding:6px 12px;white-space:nowrap}
.alp-cc-schalter{flex:none;position:relative;display:block;inline-size:52px;block-size:32px}
.alp-cc-schalter input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.alp-cc-schiene{position:absolute;inset:0;border-radius:var(--r-pill,999px);background:var(--line-strong,#80859c);transition:background-color var(--t,.25s) var(--ease,ease);pointer-events:none}
.alp-cc-schiene::before{content:"";position:absolute;inset-block-start:4px;inset-inline-start:4px;inline-size:24px;block-size:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(13 13 63/.3);transition:transform var(--t,.25s) var(--ease-out,ease)}
.alp-cc-schalter input:checked+.alp-cc-schiene{background:var(--blue,#234c9d)}
.alp-cc-schalter input:checked+.alp-cc-schiene::before{transform:translateX(20px)}
.alp-cc-schalter input:focus-visible+.alp-cc-schiene{outline:3px solid var(--focus,#234c9d);outline-offset:3px}
.alp-cc-recht{margin:0;text-align:center;font-size:var(--step-sm,.875rem)}
.alp-cc-m-fuss{display:grid;padding:var(--s-4,16px) var(--s-5,24px) var(--s-5,24px);border-block-start:1px solid var(--line,#e4e6ef);background:var(--bg-2,#f5f6fa)}

@media (max-width:759.98px){
  .alp-cc{inset-block-end:0;inline-size:100%;grid-template-columns:1fr;grid-template-areas:"kopf" "text" "knoepfe";gap:var(--s-2,8px);
    border-radius:var(--r-lg,22px) var(--r-lg,22px) 0 0;border-inline:0;border-block-end:0;padding:var(--s-4,16px) var(--gutter,20px);padding-block-end:calc(var(--s-4,16px) + env(safe-area-inset-bottom))}
  .alp-cc-text{max-inline-size:none}
  /* Handy (Wunsch Nutzer 29.10.2026): eine Zeile unten – links «Datenschutz» und «Einstellungen», rechts «OK» */
  .alp-cc-text{font-size:.9375rem;line-height:1.5}
  .alp-cc-knoepfe{display:flex;align-items:center;gap:2px;margin-block-start:var(--s-2,8px);min-inline-size:0}
  .alp-cc-knoepfe .alp-cc-ds{order:1;margin-inline-start:-8px}
  .alp-cc-knoepfe .alp-cc-link[data-alp-cc]{order:2}
  .alp-cc-knoepfe .alp-cc-btn{order:3;margin-inline-start:auto;min-inline-size:112px;padding-inline:20px}
  .alp-cc-link{display:inline-flex;align-items:center;padding:0 8px}
  /* Banner sitzt unten und deckt die Handy-Leiste: Leiste ausblenden, solange das Banner offen ist */
  body:has(.alp-cc:not([hidden])) .mbar{display:none}
  body:has(.alp-cc:not([hidden])) .rechner-mini{display:none}
  .alp-cc-m-inhalt{padding:var(--s-4,16px)}
  .alp-cc-m-kopf{padding-inline:var(--s-4,16px)}
  .alp-cc-m-fuss{padding-inline:var(--s-4,16px)}
}
@media (prefers-reduced-motion:no-preference){
  .alp-cc:not([hidden]){animation:alp-cc-ein var(--t-slow,.4s) var(--ease-out,ease) both}
  .alp-cc-modal[open]{animation:alp-cc-ein var(--t,.25s) var(--ease-out,ease) both}
  .alp-cc-modal[open]::backdrop{animation:alp-cc-aus-blenden var(--t,.25s) ease both}
  @media (hover:hover){.alp-cc-btn:hover{transform:translateY(-1px)}}
  @keyframes alp-cc-ein{from{opacity:0;translate:0 20px}}
  @keyframes alp-cc-aus-blenden{from{opacity:0}}
}
@media (forced-colors:active){.alp-cc-schiene{border:2px solid ButtonText}}
@media print{.alp-cc,.alp-cc-modal{display:none}}
