@import url('./css_components.css?v=20261008-4');
/* Cosmic Cine TV — Creme / Petrol / Kupfer.
 * Opt-in only: loading this file alone changes nothing.
 * Shared theme tokens are ready for a future light/dark switch; component
 * Shared cc-ui components are opt-in; legacy Beginnen selectors remain aliases.
 */
[data-cc-theme="creme"] {
  --cc-creme-bg: #f6efe4;
  --cc-creme-paper: #fffcf6;
  --cc-creme-ink: #123e43;
  --cc-creme-muted: #52625d;
  --cc-creme-turquoise: #187c80;
  --cc-creme-copper: #c77b48;
  --cc-creme-warm-text: #85583f;
  --cc-creme-sand: #b39a7a;
  --cc-creme-line: #d9cdbb;
  --cc-creme-cta-start: #dc8d4d;
  --cc-creme-cta-end: #f4bd78;
  --cc-creme-panel-glow: #34787c;
  --cc-ui-register-field: var(--cc-creme-paper);
  --cc-ui-register-ink: var(--cc-creme-ink);
  --cc-ui-register-border: #afc3c7;
  --cc-ui-register-tab: #123e4308;
  --cc-ui-register-active: var(--cc-creme-ink);
  --cc-ui-register-active-text: var(--cc-creme-paper);
  --cc-ui-register-check: var(--cc-creme-copper);
}
#cc-einfach[data-cc-theme="creme"] {
  position: relative;
  isolation: isolate;
  padding-top: 17px;
  background:
    radial-gradient(ellipse 900px 600px at 0% 0%,#fffefa 0%,#fffefa99 28%,transparent 66%),
    radial-gradient(ellipse 1100px 700px at 100% 0%,#d89a5a66 0%,#eacda23b 38%,transparent 72%),
    radial-gradient(ellipse 1000px 600px at 86% 620px,#fffefa 0%,transparent 58%),
    var(--cc-creme-bg);
  color: var(--cc-creme-ink);
  color-scheme: light;
}
/* Shared Creme logo-bar surface; Beginnen keeps its existing pseudo-element layout. */
#cc-einfach[data-cc-theme="creme"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 54px;
  pointer-events: none;
}
#cc-einfach[data-cc-theme="creme"]::before,
[data-cc-theme="creme"] .cc-ui-masthead,
[data-cc-theme="creme"].cc-ui-masthead {
  background:
    radial-gradient(ellipse 850px 180px at 78% 0%, #20505455, transparent 78%),
    linear-gradient(105deg, #060d0f 0%, #0c2023 42%, #14363a 76%, #10282c 100%);
  border-bottom: 1px solid #f4ddbc24;
  box-shadow: 0 3px 5px #07141638, 0 9px 13px -5px #15282a70;
}
#cc-einfach[data-cc-theme="creme"] .cc-e-masthead {
  position: relative;
  z-index: 1;
  margin-bottom: 49px;
}
[data-cc-theme="creme"] .cc-ui-masthead,
[data-cc-theme="creme"].cc-ui-masthead { position: relative; z-index: 1; }
#cc-einfach[data-cc-theme="creme"] .cc-e-masthead img,
[data-cc-theme="creme"] .cc-ui-masthead img,
[data-cc-theme="creme"].cc-ui-masthead img { filter: brightness(1.5); }
@media(max-width:699px) {
  #cc-einfach[data-cc-theme="creme"] { padding-top: 16px; }
  #cc-einfach[data-cc-theme="creme"]::before { height: 52px; }
  #cc-einfach[data-cc-theme="creme"] .cc-e-masthead { margin-bottom: 46px; }
}
#cc-einfach[data-cc-theme="creme"] :is(h1,h2,h3),
#cc-einfach[data-cc-theme="creme"] .cc-e-section strong,
#cc-einfach[data-cc-theme="creme"] .cc-e-quote-head strong,
#cc-einfach[data-cc-theme="creme"] .cc-e-quote blockquote p { color: var(--cc-creme-ink); }
#cc-einfach[data-cc-theme="creme"] h1 span,
#cc-einfach[data-cc-theme="creme"] a,
#cc-einfach[data-cc-theme="creme"] .cc-e-film-topic,
#cc-einfach[data-cc-theme="creme"] .cc-e-film-link,
#cc-einfach[data-cc-theme="creme"] .cc-e-benefits li::before,
#cc-einfach[data-cc-theme="creme"] summary::marker,
#cc-einfach[data-cc-theme="creme"] li::marker { color: var(--cc-creme-turquoise); }
#cc-einfach[data-cc-theme="creme"] .cc-e-kicker,
#cc-einfach[data-cc-theme="creme"] .cc-e-picks-note { color: var(--cc-creme-warm-text); }
#cc-einfach[data-cc-theme="creme"] .cc-e-intro,
#cc-einfach[data-cc-theme="creme"] .cc-e-note,
#cc-einfach[data-cc-theme="creme"] .cc-e-section p,
#cc-einfach[data-cc-theme="creme"] .cc-e-section li,
#cc-einfach[data-cc-theme="creme"] .cc-e-film-copy>p:not(.cc-e-film-topic),
#cc-einfach[data-cc-theme="creme"] .cc-e-quote-head small { color: var(--cc-creme-muted); }
/* Shared Petrol offer surface; Beginnen selector remains as a compatibility alias. */
#cc-einfach[data-cc-theme="creme"] .cc-e-offer,
[data-cc-theme="creme"] .cc-ui-offer,
[data-cc-theme="creme"].cc-ui-offer {
  --cc-ui-text: var(--cc-creme-paper);
  --cc-ui-muted: #dce9e4;
  --cc-ui-accent: #95e6de;
  --cc-ui-line: #b7d5cd66;
  --cc-ui-focus: var(--cc-creme-paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(132deg,#ffffff18 0%,#ffffff05 35%,transparent 55%),
    radial-gradient(ellipse at 90% 0%,var(--cc-creme-panel-glow),transparent 72%),
    linear-gradient(155deg,var(--cc-creme-ink),#092c32);
  border-color: #b7d5cd66;
  box-shadow: inset 0 1px 0 #f4ecdc6b,inset 1px 0 0 #d3f4ee24,inset 0 -1px 0 #092c3280,0 18px 32px #123e4329,0 4px 9px #123e4314;
}
#cc-einfach[data-cc-theme="creme"] .cc-e-offer::before,
[data-cc-theme="creme"] .cc-ui-offer::before,
[data-cc-theme="creme"].cc-ui-offer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 145%; height: 80%; left: -26%; top: -54%;
  border-radius: 50%;
  background: linear-gradient(180deg,#ffffff1a,#ffffff05);
  transform: rotate(-13deg);
  border-bottom: 1px solid #ffffff18;
}
#cc-einfach[data-cc-theme="creme"] .cc-e-offer h2,
#cc-einfach[data-cc-theme="creme"] .cc-e-offer .cc-e-note { color: var(--cc-creme-paper); }
#cc-einfach[data-cc-theme="creme"] a.cc-e-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg,var(--cc-creme-cta-start),var(--cc-creme-cta-end));
  border-color: #ffe6b9aa;
  color: #201a15;
  box-shadow: inset 0 1px 0 #fff5dcbf,inset 0 -1px 0 #90451940,0 8px 18px #041c2338,0 0 18px #e2a36b18;
  text-shadow: 0 1px 0 #fff0d52e;
}
#cc-einfach[data-cc-theme="creme"] a.cc-e-button::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(170deg,#ffffff38 0%,#ffffff0a 43%,transparent 44%);
  border-radius: inherit;
}
#cc-einfach[data-cc-theme="creme"] a.cc-e-button:hover { background: linear-gradient(110deg,#e99d5e,#ffd398); border-color: #fff0ce; }
#cc-einfach[data-cc-theme="creme"] .cc-e-closing a.cc-e-button {
  background: linear-gradient(110deg,var(--cc-creme-ink),#28676b);
  color: var(--cc-creme-paper);
  border-color: #467d7e;
  box-shadow: inset 0 1px 0 #ffffff40,inset 0 -1px 0 #092c3266,0 6px 14px #123e4326;
  text-shadow: none;
}
#cc-einfach[data-cc-theme="creme"] .cc-e-closing a.cc-e-button:hover {
  background: linear-gradient(110deg,#194c51,#31797c);
  border-color: #52898a;
}
#cc-einfach[data-cc-theme="creme"] .cc-e-film { background: var(--cc-creme-paper); border-color: var(--cc-creme-line); }
#cc-einfach[data-cc-theme="creme"] .cc-e-film-cover img { background: #ede5d7; }
#cc-einfach[data-cc-theme="creme"] .cc-e-section,
#cc-einfach[data-cc-theme="creme"] details { border-color: var(--cc-creme-line); }
#cc-einfach[data-cc-theme="creme"] .cc-e-steps li::before { background: #e0eae1; color: var(--cc-creme-turquoise); }
#cc-einfach[data-cc-theme="creme"] .cc-e-quote { background: linear-gradient(145deg,#f0e7d8,transparent 48%),var(--cc-creme-paper); border-color: var(--cc-creme-line); }
#cc-einfach[data-cc-theme="creme"] .cc-e-portrait { box-shadow: 0 12px 30px #65482720; }
#cc-einfach[data-cc-theme="creme"] :is(a,button,summary):focus-visible { outline-color: var(--cc-creme-turquoise); }
#cc-einfach[data-cc-theme="creme"] .cc-e-offer a:focus-visible { outline-color: var(--cc-creme-paper); }
@media(prefers-reduced-transparency:reduce) {
  #cc-einfach[data-cc-theme="creme"] .cc-e-offer { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Dialogs live outside the landing root and opt in separately. */
:is(#cc-beginnen-dialog,#cc-e-trailer-dialog)[data-cc-theme="creme"] {
  background: radial-gradient(ellipse at 100% 0%,#eacda266,transparent 65%),var(--cc-creme-bg);
  border-color: var(--cc-creme-line);
  color: var(--cc-creme-ink);
  color-scheme: light;
  box-shadow: inset 0 1px 0 #fffefa,0 24px 70px #092c3240;
}
:is(#cc-beginnen-dialog,#cc-e-trailer-dialog)[data-cc-theme="creme"]::backdrop {
  background: #102e356b;
  backdrop-filter: blur(8px);
}
:is(#cc-beginnen-dialog,#cc-e-trailer-dialog)[data-cc-theme="creme"] :is(.cc-b-dialog-close,.cc-e-trailer-close) {
  background: linear-gradient(145deg,#34787c,var(--cc-creme-ink));
  border: 1px solid #52898a;
  color: var(--cc-creme-paper);
  box-shadow: inset 0 1px 0 #ffffff40,0 3px 8px #123e4320;
}
:is(#cc-beginnen-dialog,#cc-e-trailer-dialog)[data-cc-theme="creme"] :is(.cc-b-dialog-close,.cc-e-trailer-close):hover {
  background: var(--cc-creme-ink);
}
:is(#cc-beginnen-dialog,#cc-e-trailer-dialog)[data-cc-theme="creme"] :is(.cc-b-dialog-close,.cc-e-trailer-close):focus-visible {
  outline-color: var(--cc-creme-turquoise);
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen {
  background: transparent;
  color: var(--cc-creme-ink);
  color-scheme: light;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen :is(.cc-b-lead,.cc-b-small,.cc-b-progress) { color: var(--cc-creme-muted); }
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen :is(a,.cc-b-link,.cc-b-progress [aria-current="step"]) { color: var(--cc-creme-turquoise); }
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen label { color: var(--cc-creme-ink); }
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-card {
  background: linear-gradient(135deg,#ffffffb3,transparent 65%),var(--cc-creme-paper);
  border-color: var(--cc-creme-line);
  box-shadow: inset 0 1px 0 #ffffff,0 12px 28px #65482714;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen :is(.cc-b-tabs button,.cc-b-password button) {
  background: #ede6da;
  color: var(--cc-creme-ink);
  border-color: #b7aa94;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-tabs button[aria-pressed="true"] {
  background: var(--cc-creme-ink);
  color: var(--cc-creme-paper);
  border-color: var(--cc-creme-ink);
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen :is(input:not([type="checkbox"]):not([type="hidden"]),select) {
  background: #fffefa;
  color: var(--cc-creme-ink);
  border-color: #899c94;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen input[type="checkbox"] { accent-color: var(--cc-creme-turquoise); }
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-primary {
  background: linear-gradient(170deg,#ffffff38,transparent 44%),linear-gradient(110deg,var(--cc-creme-cta-start),var(--cc-creme-cta-end));
  color: #201a15;
  box-shadow: inset 0 1px 0 #fff5dcbf,inset 0 -1px 0 #90451940,0 6px 14px #123e4324;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-primary:hover {
  background: linear-gradient(110deg,#e99d5e,#ffd398);
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-message {
  background: #f4e5cf;
  border-color: var(--cc-creme-copper);
  color: #754522;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen :focus-visible { outline-color: var(--cc-creme-turquoise); }
/* Echo the landing offer when the existing flow reaches the payment step. */
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-card:has([data-b-payment]:not([hidden])) {
  background: linear-gradient(132deg,#ffffff18,transparent 55%),radial-gradient(ellipse at 90% 0%,var(--cc-creme-panel-glow),transparent 72%),linear-gradient(155deg,var(--cc-creme-ink),#092c32);
  color: var(--cc-creme-paper);
  border-color: #b7d5cd66;
  box-shadow: inset 0 1px 0 #f4ecdc6b,0 12px 28px #123e4329;
}
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen [data-b-payment] .cc-b-small { color: #dce9e4; }
#cc-beginnen-dialog[data-cc-theme="creme"] #cc-beginnen .cc-b-card:has([data-b-payment]:not([hidden])) :focus-visible { outline-color: var(--cc-creme-paper); }

/* Shared opt-in components; existing Beginnen selectors above are unchanged. */
[data-cc-theme="creme"] {
  --cc-ui-color-scheme: light;
  --cc-ui-bg: var(--cc-creme-bg);
  --cc-ui-text: var(--cc-creme-ink);
  --cc-ui-muted: var(--cc-creme-muted);
  --cc-ui-accent: var(--cc-creme-turquoise);
  --cc-ui-line: var(--cc-creme-line);
  --cc-ui-focus: var(--cc-creme-turquoise);
  --cc-ui-glass-background: linear-gradient(135deg,#ffffffb3,transparent 65%),var(--cc-creme-paper);
  --cc-ui-glass-backdrop: blur(18px);
  --cc-ui-glass-border: var(--cc-creme-line);
  --cc-ui-glass-shadow: inset 0 1px 0 #ffffff,0 12px 28px #65482714;
  --cc-ui-cta-background: linear-gradient(110deg,var(--cc-creme-cta-start),var(--cc-creme-cta-end));
  --cc-ui-cta-border: #ffe6b9aa;
  --cc-ui-cta-text: #201a15;
  --cc-ui-cta-shadow: inset 0 1px 0 #fff5dcbf,inset 0 -1px 0 #90451940,0 8px 18px #041c2338;
}