/* Coreflow · Cookie-Einwilligung (js/consent.js, Marcel 30.10.2026)
   Gleiche Familie wie der Exit-Hinweis: Karte surface-2, Haarlinie, dunkler Schatten, kein Overlay, nichts wird abgedunkelt.
   Desktop unten links (der Exit-Hinweis sitzt rechts), mobil als Karte über die ganze Breite unten, mit Abstand wie die Aktionsleiste.
   „Alle akzeptieren“ und „Nur notwendige“ gleich gestaltet und gleich groß. Rot nur im Eyebrow und im eingeschalteten Schalter. */
.cc { position: fixed; left: var(--gutter); bottom: 1.5rem; z-index: 60; display: grid; gap: .55rem; width: min(27rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 3rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.35rem 1.4rem 1rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring-2), var(--shadow-3); opacity: 0; transform: translateY(12px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.cc[hidden] { display: none; }
.cc.is-on { opacity: 1; transform: none; }
.cc__e { font-size: var(--fs-meta); font-weight: 600; color: var(--red-text); }
.cc__h { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.cc__h:focus { outline: none; }
.cc__t { font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* Einstellungen: drei Zeilen mit Haarlinien, Schalter rechts */
.cc__list { margin-top: .35rem; border-top: 1px solid var(--line); }
.cc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.cc-row__h { grid-area: 1 / 1; font-size: .9375rem; font-weight: 600; color: var(--text); }
.cc-row__d { grid-area: 2 / 1 / 3 / 3; font-size: var(--fs-meta); line-height: 1.5; color: var(--text-3); }
.cc-fix, .cc-sw { grid-area: 1 / 2; }
.cc-fix { display: inline-flex; align-items: center; gap: .35rem; flex: none; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cc-fix svg { width: .75rem; height: .75rem; color: var(--text-3); }
.cc-sw { position: relative; flex: none; width: 2.75rem; height: 1.625rem; border-radius: var(--r-pill); background: var(--surface-4); box-shadow: var(--ring-2); transition: background var(--t-fast) var(--ease); }
.cc-sw i { position: absolute; top: .1875rem; left: .1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--text-3); transition: transform var(--t-mid) var(--ease), background var(--t-fast); }
.cc-sw[aria-checked="true"] { background: var(--red); box-shadow: none; }
.cc-sw[aria-checked="true"] i { transform: translateX(1.125rem); background: var(--on-red); }
.cc-sw:hover i { background: var(--text-2); }
.cc-sw[aria-checked="true"]:hover { background: var(--red-hover); }
.cc-sw[aria-checked="true"]:hover i { background: var(--on-red); }

/* Aktionen: zwei gleich breite, gleich gestaltete Knöpfe */
.cc__act { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.cc__act [hidden] { display: none; }
.cc__b { width: 100%; padding-inline: .75rem !important; justify-content: center; white-space: nowrap; }
.cc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin-top: .15rem; font-size: var(--fs-meta); color: var(--text-3); }
.cc__link { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: .25em; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.cc__link:hover { color: var(--text); text-decoration-color: currentColor; }
.cc__link[aria-expanded="true"] { color: var(--text); }

/* Nie zusammen mit der mobilen Aktionsleiste oder dem Exit-Hinweis */
html[data-consent="offen"] .mbar { visibility: hidden; transform: translateY(calc(100% + 1.25rem)); }
html[data-consent="offen"] .exitcard { display: none; }

@media (max-width: 640px) {
  .cc { left: .625rem; right: .625rem; bottom: max(.625rem, env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 1.25rem); padding: 1.15rem 1.15rem .75rem; border-radius: 16px; gap: .45rem; }
  .cc__h { font-size: 1.0625rem; }
  .cc__t { font-size: .84375rem; line-height: 1.5; }
  .cc__act { margin-top: .45rem; }
  .cc.is-more .cc__t { display: none; }  /* mobil: in den Einstellungen nur die Auswahl */
}
@media (max-width: 359px) { .cc__act { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cc { transform: none; } .cc-sw i { transition: none; } }
@media print { .cc { display: none; } }
