/* Erzeugt von baukasten/werkzeug/cookie-export.mjs. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/sektionen/cookie-banner/sektion.css
   baukasten/sektionen/cookie-fenster/sektion.css
   Dazu lädt layout/header.tpl nb-tokens-v3.css und nb-basis.css. */

/* Knopf-Grund, aus baukasten/kern/formular.css:36-51 und nb-tradein.css (.nb-knopf) */
:where(#consent-manager) .nb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); margin: 0; font-family: inherit; line-height: 1.2; text-decoration: none; -webkit-appearance: none; appearance: none; -webkit-user-select: none; user-select: none; }
:where(#consent-manager) .nb-f-knopf { min-height: 48px; }
:where(#consent-manager) .nb-f-knopf--umriss { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-border-control); }
:where(#consent-manager) .nb-f-knopf--text { min-height: 44px; padding-inline: 0; background: none; border: 0; color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 4px; }
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) { :where(#consent-manager) .nb-f-knopf--text:hover { color: var(--nb-text-link); } }
:where(#consent-manager) .nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* baukasten/sektionen/cookie-banner/sektion.css */
/* Cookie-Banner (Werkstatt cookie, Runde 3, 06.10.2026): ein Fenster in der Mitte mit eigenem Bild, Daniels Wahl. Dazu
   die Knöpfe und Links, die auch das Fenster der zweiten Ebene nutzt (sektionen/cookie-fenster). Werte aus
   .claude/progress/tradein/baukasten/VORGABEN-cookie-token-2026-10-06.md: Fläche Weiß ohne Rand, Radius card, Schatten
   sh-schwebt, Abdunkeln alpha-scrim ohne Weichzeichner, Eintritt motion-fenster 160 ms. Kein Lime, kein Symbol. */

.nb-ck, .nb-ck-f {
  --ck-ebene: 210;      /* über der Schublade am Handy (200), VORGABEN §3, ohne Token */
  --ck-knopf: 48px;     /* Knopf als Pille, komponenten-strecke-konto.md:547 */
  --ck-ziel: 44px;      /* Trefferfläche, komponenten-formular.md:259 */
  --ck-eintritt: 160ms cubic-bezier(0.19, 0.91, 0.38, 1); /* motion-fenster, komponenten-global.md:316 */
  box-sizing: border-box; font-family: var(--nb-font-sans); color: var(--nb-text-body);
}
.nb-ck *, .nb-ck-f * { box-sizing: border-box; }

/* ---------- Fenster in der Mitte ---------- */
.nb-ck__schirm { position: fixed; inset: 0; z-index: calc(210 - 1); background: var(--nb-alpha-scrim); animation: nb-ck-schirm var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
.nb-ck { position: fixed; inset: 0; z-index: var(--ck-ebene); margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 32px); overflow: auto; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); animation: nb-ck-auf var(--ck-eintritt) both; }
.nb-ck__innen { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-l); }
@media (max-width: 479px) { .nb-ck__innen { gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-s); } }

/* Eigenes Bild oben mittig. Ein Motiv ist sichtbar: das erste, der Schalter motiv tauscht (Regeln je Motiv unten) */
.nb-ck__bild { display: block; justify-self: center; width: 128px; height: 128px; }
.nb-ck__bild picture, .nb-ck__bild img { display: block; width: 100%; height: 100%; }
.nb-ck__bild img { object-fit: contain; }
.nb-ck__bild picture:not(:first-child) { display: none; }
@media (max-width: 479px) { .nb-ck__bild { width: 104px; height: 104px; } }

.nb-ck__text { display: grid; gap: var(--nb-space-2xs); }
.nb-v3 .nb-ck__titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--nb-text-heading); }
.nb-ck__text p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-ck__links { display: flex; flex-wrap: wrap; gap: 0 var(--nb-space-m); margin: 0; }
.nb-ck .nb-ck__links, .nb-ck-f .nb-ck__links { font-size: var(--nb-t-body-02); }
.nb-ck__links a { display: inline-flex; align-items: center; min-height: var(--ck-ziel); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ck__links a:active { color: var(--nb-text-link); }
@media (hover: hover) { .nb-ck__links a:hover { color: var(--nb-text-link); } }
.nb-ck__links a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* ---------- Knöpfe ---------- */
/* Zwei gleich große Pillen übereinander über die Breite, oben „Alle annehmen“ Night gefüllt, darunter „Alle ablehnen“ weiß mit Rand
   (Daniel 06.10.2026, wie Back Market). Darunter „Einstellungen“ als kleinerer Textknopf, mittig */
.nb-ck__knoepfe { display: grid; gap: var(--nb-space-2xs); justify-items: center; }
.nb-ck__paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-xs); width: 100%; }
.nb-ck .nb-f-knopf, .nb-ck-f .nb-f-knopf { min-height: var(--ck-knopf); padding-inline: var(--nb-space-s); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); white-space: nowrap; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (min-width: 480px) { .nb-ck .nb-f-knopf:not(.nb-f-knopf--text), .nb-ck-f .nb-f-knopf:not(.nb-f-knopf--text) { padding-inline: var(--nb-space-m); } }
.nb-ck-knopf--breit { width: 100%; }
/* Gefüllt in Night. Hover und Druck auf surface-dark-raised, für „gedrückt“ gibt es auf Night keinen eigenen Token */
:is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt { background: var(--nb-surface-dark); border: 1px solid var(--nb-surface-dark); color: var(--nb-text-on-dark); }
:is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt:active { background: var(--nb-surface-dark-raised); border-color: var(--nb-surface-dark-raised); }
@media (hover: hover) { :is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt:hover { background: var(--nb-surface-dark-raised); border-color: var(--nb-surface-dark-raised); } }
/* Weiß mit Rand border-control (4,20:1). Der Hover aus formular.css (#FBFBFD) ist am Bild nicht zu sehen, hier eine Stufe
   Grau, Druck eine weitere. Im Werte-Dokument ohne Wert (VORGABEN §4) */
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss { background: var(--nb-surface-page); }
@media (hover: hover) { :is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss:hover { background: var(--nb-surface-component); border-color: var(--nb-ink-500); } }
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss:active { background: var(--nb-ink-200); border-color: var(--nb-ink-500); }
/* Der dritte Weg, kleiner */
.nb-ck .nb-f-knopf--text, .nb-ck-f .nb-f-knopf--text { min-height: var(--ck-ziel); padding-inline: var(--nb-space-xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); }
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--text:active { color: var(--nb-action-primary-active); }

@keyframes nb-ck-auf { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nb-ck-schirm { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nb-ck, .nb-ck__schirm, .nb-ck-f, .nb-ck-f__schirm { animation: none; } }

/* Niedrige Bildschirme (320 mal 568, Handy quer). Die Knöpfe kleben unten im Fenster und der Text rollt darüber, unter
   620 px Höhe fällt das Bild weg. „Alle ablehnen“ lag bei 568 px unter der Fensterkante (zustands-pruefer 06.10.2026),
   ein Ablehnen erst nach Scrollen reicht nicht (RECHT-cookie Abschnitt 2, DSK Rn. 136) */
.nb-ck__innen { --ck-polster: var(--nb-space-l); }
@media (max-width: 479px) { .nb-ck__innen { --ck-polster: var(--nb-space-m); } }
@media (max-height: 700px) {
  .nb-ck__knoepfe { position: sticky; bottom: 0; margin-bottom: calc(-1 * var(--ck-polster)); padding-block: var(--nb-space-xs) var(--ck-polster); background: var(--nb-surface-page); }
}
@media (max-height: 620px) { .nb-ck__bild { display: none; } }

/* baukasten/sektionen/cookie-fenster/sektion.css */
/* Cookie-Einstellungen, zweite Ebene (Werkstatt cookie, 06.10.2026). Knöpfe, Links und die Maße --ck-* stehen in
   sektionen/cookie-banner/sektion.css. Aufbau wie das S-Fenster (komponenten-global.md §9): Kopf und Fuß stehen, der
   Inhalt rollt innen. Werte aus VORGABEN-cookie-token-2026-10-06.md §5 und §6. */

.nb-ck-f__schirm { position: fixed; inset: 0; z-index: calc(210 - 1); background: var(--nb-alpha-scrim); animation: nb-ck-schirm var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
.nb-ck-f { position: fixed; inset: 0; z-index: var(--ck-ebene); display: flex; flex-direction: column; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: min(640px, calc(100vh - 64px)); overflow: hidden; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); animation: nb-ck-auf var(--ck-eintritt) both; }
.nb-ck-f__kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-xs) var(--nb-space-l); }
.nb-v3 .nb-ck-f__titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--nb-text-heading); }
.nb-ck-f__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ck-f__zu:active { background: var(--nb-ink-300); }
@media (hover: hover) { .nb-ck-f__zu:hover { background: var(--nb-ink-300); } }
.nb-ck-f__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-ck-f__zu svg { width: 20px; height: 20px; }
.nb-ck-f__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--nb-space-s); padding: 0 var(--nb-space-l) var(--nb-space-s); }
.nb-ck-f .nb-ck-f__inhalt:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
.nb-ck-f__satz { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

/* Umkehr (G29): im weißen Fenster ist die Liste eine graue Fläche ohne Schatten und Rand, Zeilen mit Haarlinie */
.nb-ck-f__liste { display: grid; margin: 0; padding: 0 var(--nb-space-s); list-style: none; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-ck-kat { display: grid; gap: var(--nb-space-3xs); padding-block: var(--nb-space-s); }
.nb-ck-kat + .nb-ck-kat { border-block-start: 1px solid var(--nb-border-hairline); }
.nb-ck-kat__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: var(--ck-ziel); }
.nb-v3 .nb-ck-kat__titel { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-ck-kat__immer { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
.nb-ck-kat__text { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-ck-kat__auf { justify-self: start; display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: var(--ck-ziel); padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ck-kat__auf:active { color: var(--nb-text-link); }
@media (hover: hover) { .nb-ck-kat__auf:hover { color: var(--nb-text-link); } }
.nb-ck-kat__auf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-ck-kat__auf svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-ck-kat__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Auf Grau ist das innere Element weiß (G29). Wort oben, Wert darunter, enge Zeilen (G26) */
.nb-ck-kat__liste { display: grid; gap: var(--nb-space-2xs); margin: var(--nb-space-2xs) 0 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); }
.nb-ck-kat__liste div { display: grid; gap: 0; }
.nb-ck-kat__liste dt { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ck-kat__liste dd { margin: 0; font-size: var(--nb-t-body-01); color: var(--nb-text-body); }

/* Paar Nein und Ja: zwei kleine Pillen auf weißem Träger, gewählt Night gefüllt. Lage und Füllung sind zwei Merkmale */
.nb-ck-paar { flex: none; display: inline-grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-3xs); padding: var(--nb-space-3xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); }
.nb-ck-paar__knopf { min-width: 56px; min-height: var(--ck-ziel); padding: 0 var(--nb-space-xs); border: 0; border-radius: var(--nb-radius-pill); background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) { .nb-ck-paar__knopf:hover { background: var(--nb-surface-component); } }
.nb-ck-paar__knopf:active { background: var(--nb-ink-200); }
.nb-ck-paar__knopf[aria-pressed="true"]:is(:active) { background: var(--nb-surface-dark-raised); }
@media (hover: hover) { .nb-ck-paar__knopf[aria-pressed="true"]:is(:hover) { background: var(--nb-surface-dark-raised); } }
.nb-ck-paar__knopf[aria-pressed="true"] { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-ck-paar__knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

.nb-ck-f__fuss { flex: none; display: grid; gap: var(--nb-space-xs); padding: var(--nb-space-s) var(--nb-space-l) var(--nb-space-m); border-block-start: 1px solid var(--nb-border-hairline); }
/* Zwei Zeilen in jeder Breite: oben die zwei gleichen Umrisse, darunter „Auswahl speichern“ gefüllt über die Breite. Drei Knöpfe
   in einer Zeile brauchen 474 px, im Fenster sind 456 frei, sie liefen ineinander (Daniel 06.10.2026) */
.nb-ck-f__fuss .nb-ck-f__speichern { width: 100%; }
@media (max-width: 479px) {
  .nb-ck-f__kopf, .nb-ck-f__inhalt, .nb-ck-f__fuss { padding-inline: var(--nb-space-s); }
}
@media (prefers-reduced-motion: reduce) { .nb-ck-kat__auf svg, .nb-ck-paar__knopf { transition: none; } }

/* Nachtrag zustands-pruefer 06.10.2026. Luft über dem ersten Element, sonst schneidet die Rollkante den Fokusring ab.
   Handy quer: das ganze Fenster rollt, die innere Rollfläche war nur 37 px hoch. Reduzierte Bewegung steht hier am
   Ende, die Regel im Banner-CSS wurde von der Definition oben überschrieben */
.nb-ck-f__inhalt { padding-block-start: var(--nb-space-2xs); scroll-padding-block: var(--nb-space-xs); }
@media (max-height: 480px) {
  .nb-ck-f { display: block; max-height: calc(100vh - 16px); overflow-y: auto; }
  .nb-ck-f__inhalt { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .nb-ck-f, .nb-ck-f__schirm { animation: none; } }

/* ---------- Naht zu JTL (NOVA js/consent.js) ---------- */
/* Die Hülle trägt nichts, Banner und Fenster liegen fest am Bildschirm. Bis consent.js gelaufen ist, steht nichts
   (d-none aus nb-basis.css), ohne JS bleibt es dabei. Eine Überlagerung verschiebt nichts */
#consent-manager [hidden] { display: none !important; }
#consent-manager .consent-hidden { display: none; }
/* Kein Symbol, nichts Schrumpfendes (Daniel 06.10.2026). NOVA nimmt dem Knopf nach 100 ms d-none weg, er bleibt zu */
#consent-settings-btn { display: none !important; }
/* Nach der Wahl setzt consent.js erst fading (200 ms), dann mini. Mit mini steht nichts mehr */
#consent-manager.mini > #consent-banner { display: none; }
#consent-manager.fading > #consent-banner { opacity: 0; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Steht das Fenster der zweiten Ebene, ruht der Banner darunter (js/nb-cookie.js setzt die Klasse) */
#consent-manager.nb-ck-zweite > #consent-banner { display: none; }
/* Beim Erscheinen bekommt das Fenster selbst den Fokus (kein Knopf, damit keine Antwort vorgewählt wirkt). Die
   Fokus-Formel aus nb-tokens-v3.css (.nb-v3 [tabindex="-1"]:focus-visible) nähme ihm sonst den Schatten */
#consent-manager .nb-ck:is(:focus, :focus-visible) { outline: none; box-shadow: var(--nb-sh-schwebt); }

/* #consent-settings ist bei JTL Schirm und Rahmen in einem: ein Klick genau darauf schließt. active öffnet, show folgt
   10 ms später, beim Schließen fällt erst show, 200 ms danach active */
.consent-modal:not(.active) { display: none; }
#consent-settings, #consent-confirm { z-index: 211; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
#consent-settings:not(.show), #consent-confirm:not(.show) { opacity: 0; }
/* Der Wertträger je Dienst bleibt unsichtbar, die Wahl ist das Paar Nein und Ja */
#consent-settings .consent-input { display: none; }
.nb-ck-kat__details[hidden] { display: none; }
.nb-ck-kat__liste a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* #consent-confirm („einmal oder immer“ vor einem eingebetteten Dienst) bleibt Markup und Wortlaut von NOVA. Heute
   bettet der Shop nichts ein, das Fenster erscheint nicht. Es bekommt nur die Hülle, damit es nicht roh steht */
#consent-confirm { position: fixed; inset: 0; background: var(--nb-alpha-scrim); font-family: var(--nb-font-sans); color: var(--nb-text-body); }
#consent-confirm .consent-modal-content { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 64px); overflow: auto; display: grid; gap: var(--nb-space-s); padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); }
#consent-confirm .consent-modal-icon, #consent-confirm .consent-icon { display: none; }
#consent-confirm .consent-modal-close { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; }
#consent-confirm .consent-modal-close svg { width: 16px; height: 16px; }
#consent-confirm .consent-display-1, #consent-confirm .consent-display-2 { display: block; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
#consent-confirm p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; }
#consent-confirm .consent-btn-helper { display: grid; gap: var(--nb-space-xs); }
#consent-confirm .consent-btn { width: 100%; min-height: 48px; padding: 0 var(--nb-space-m); border: 1px solid var(--nb-border-control); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font: inherit; font-weight: var(--nb-weight-semibold); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #consent-settings, #consent-confirm, #consent-manager.fading > #consent-banner { transition: none; } }