/* ============================================================
   cc-id.com — Creator-Anmeldungen · Auswahlseite
   Neutrale Hülle, die beide Marken trägt: die Panels bringen
   die Farbe, die verbindende UI hält sich bewusst zurück.
   ============================================================ */

:root {
  --ink:      #141318;
  --ink-soft: #24222C;
  --paper:    #FFFFFF;

  --tfeld:      #D00014;
  --tfeld-dark: #A00010;
  --sb:         #28235A;
  --sb-dark:    #1B1740;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--ink); color: var(--paper);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
}
body { min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }

/* ---------- Kopf ---------- */
.masthead { text-align: center; padding: 34px 22px 26px; }
.masthead__eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .26em;
  color: rgba(255,255,255,.45); margin: 0 0 12px;
}
.masthead__title {
  font-size: clamp(26px, 4.4vw, 42px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; margin: 0 0 10px;
}
.masthead__sub {
  font-size: clamp(14px, 1.8vw, 16px); font-weight: 400; line-height: 1.5;
  color: rgba(255,255,255,.6); margin: 0 auto; max-width: 46ch;
}

/* ---------- Auswahl ---------- */
.picker { flex: 1; display: flex; gap: 14px; padding: 0 14px 14px; min-height: 0; }

.panel {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 56px 30px; border-radius: 26px; overflow: hidden;
  text-align: center; isolation: isolate;
  transition: flex-grow .45s cubic-bezier(.2,.7,.3,1), transform .25s ease, box-shadow .25s ease;
}
.panel--tfeld { background: var(--tfeld); }
.panel--sb    { background: var(--sb); }

/* Radialer Schimmer, damit die Flächen nicht tot wirken */
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 62%);
}

.panel:hover, .panel:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.panel:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
@media (min-width: 861px) {
  .picker:hover .panel        { flex-grow: .82; }
  .picker .panel:hover        { flex-grow: 1.36; }
}

/* Logos — Breiten einzeln, damit beide optisch gleich schwer wirken:
   TFELD ist ein flacher Schriftzug (5:1), Superbloom ein kompakter Sticker (1,7:1). */
.logo-tfeld { width: min(340px, 78%); }
.logo-sb    { width: min(220px, 52%); }

/* TFELD: einfarbiges SVG, per Maske eingefärbt (data-URI wegen Safari) */
.logo-tfeld {
  aspect-ratio: 1262.899 / 251.286;
  background-color: var(--paper);
  -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iYSIgZGF0YS1uYW1lPSJMYXllciAzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDUuNTIzbW0iIGhlaWdodD0iODguNjQ4bW0iIHZpZXdCb3g9IjAgMCAxMjYyLjg5OSAyNTEuMjg2Ij4KICA8ZyBpZD0iYiIgZGF0YS1uYW1lPSJMYXllciAxIj4KICAgIDxnPgogICAgICA8cG9seWdvbiBwb2ludHM9IjY0LjQ4NiAwIDAgMCAwIDU2LjY3NSAwIDg4LjEzNiA0My42MjMgODguMTM2IDUxLjA3IDU2LjY3NSA3MS44NzMgNTYuNjc1IDcxLjg3MyAxOTQuNjExIDU1LjY5NSAxOTQuNjExIDU1LjY5NSAyNTEuMjg2IDcxLjg3MyAyNTEuMjg2IDE2Ni40OTMgMjUxLjI4NiAxODIuNjczIDI1MS4yODYgMTgyLjY3MyAxOTQuNjExIDE2Ni40OTMgMTk0LjYxMSAxNjYuNDkzIDU2LjY3NSAxODcuMjk4IDU2LjY3NSAxOTQuNzQ1IDg4LjEzNiAyMzguMzY4IDg4LjEzNiAyMzguMzY4IDU2LjY3NSAyMzguMzY4IDAgMTczLjg4MSAwIDY0LjQ4NiAwIiBmaWxsPSIjMDMwMDAwIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjY1LjE5IDAgMjY1LjE5IDU2LjY3NSAyODEuMzY5IDU2LjY3NSAyODEuMzY5IDE5NC42MTEgMjY1LjE5IDE5NC42MTEgMjY1LjE5IDI1MS4yODYgMzkyLjE2OCAyNTEuMjg2IDM5Mi4xNjggMTk0LjYxMSAzNzUuOTg4IDE5NC42MTEgMzc1Ljk4OCAxNDkuMDY5IDQyMC4yMjggMTQ5LjA2OSA0MjAuMjI4IDEwMy4xMTMgMzc1Ljk4OCAxMDMuMTEzIDM3NS45ODggNTYuNjc1IDQyNy45MTMgNTYuNjc1IDQzMy40MjIgNzcuMDA5IDQ3OS44MjcgNzcuMDA5IDQ3OS44MjcgNTYuNjc1IDQ3OS44MjcgMCA0MTIuNTU5IDAgMjY1LjE5IDAiIGZpbGw9IiMwMzAwMDAiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI1MDYuMzcgMCA1MDYuMzcgNTYuNjc1IDUyMi41NDkgNTYuNjc1IDUyMi41NDkgMTk0LjYxMSA1MDYuMzcgMTk0LjYxMSA1MDYuMzcgMjUxLjI4NiA2NTMuNzM4IDI1MS4yODYgNzIxLjAwNyAyNTEuMjg2IDcyMS4wMDcgMTk0LjYxMSA3MjEuMDA3IDE3NC4yNzcgNjc0LjYwMiAxNzQuMjc3IDY2OS4wOTMgMTk0LjYxMSA2MTcuMTY5IDE5NC42MTEgNjE3LjE2OSAxNDkuMDY5IDY2MS40MDggMTQ5LjA2OSA2NjEuNDA4IDEwMy4xMTMgNjE3LjE2OSAxMDMuMTEzIDYxNy4xNjkgNTYuNjc1IDY2OS4wOTMgNTYuNjc1IDY3NC42MDIgNzcuMDA5IDcyMS4wMDcgNzcuMDA5IDcyMS4wMDcgNTYuNjc1IDcyMS4wMDcgMCA2NTMuNzM4IDAgNTA2LjM3IDAiIGZpbGw9IiMwMzAwMDAiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI5MTIuNDgxIDE5NC42MTEgODYwLjU1NSAxOTQuNjExIDg2MC41NTUgNTYuNjc1IDg3Ni43MzUgNTYuNjc1IDg3Ni43MzUgMCA3NDkuNzU3IDAgNzQ5Ljc1NyA1Ni42NzUgNzY1LjkzNiA1Ni42NzUgNzY1LjkzNiAxOTQuNjExIDc0OS43NTcgMTk0LjYxMSA3NDkuNzU3IDI1MS4yODYgODk3LjEyNiAyNTEuMjg2IDk2NC4zOTQgMjUxLjI4NiA5NjQuMzk0IDE5NC42MTEgOTY0LjM5NCAxNzQuMjc3IDkxNy45OSAxNzQuMjc3IDkxMi40ODEgMTk0LjYxMSIgZmlsbD0iIzAzMDAwMCIvPgogICAgICA8cGF0aCBkPSJNMTIwNy40MTkuMDA1aC0yMTYuMzk3djU2LjY3NmgxNi4xODl2MTM3LjkyN2gtMTYuMTg5djU2LjY3NmgyMTYuMzk3bDU1LjQ4LTU1LjQ4VjU1LjQ4NUwxMjA3LjQxOS4wMDVaTTExNjguMjgyLDgwLjc4NHY4OS43MjJsLTI0LjEwMywyNC4xMDNoLTQyLjM1VjU2LjY4MWg0Mi4zNWwyNC4xMDMsMjQuMTAzWiIgZmlsbD0iIzAzMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+") center / contain no-repeat;
          mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iYSIgZGF0YS1uYW1lPSJMYXllciAzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDUuNTIzbW0iIGhlaWdodD0iODguNjQ4bW0iIHZpZXdCb3g9IjAgMCAxMjYyLjg5OSAyNTEuMjg2Ij4KICA8ZyBpZD0iYiIgZGF0YS1uYW1lPSJMYXllciAxIj4KICAgIDxnPgogICAgICA8cG9seWdvbiBwb2ludHM9IjY0LjQ4NiAwIDAgMCAwIDU2LjY3NSAwIDg4LjEzNiA0My42MjMgODguMTM2IDUxLjA3IDU2LjY3NSA3MS44NzMgNTYuNjc1IDcxLjg3MyAxOTQuNjExIDU1LjY5NSAxOTQuNjExIDU1LjY5NSAyNTEuMjg2IDcxLjg3MyAyNTEuMjg2IDE2Ni40OTMgMjUxLjI4NiAxODIuNjczIDI1MS4yODYgMTgyLjY3MyAxOTQuNjExIDE2Ni40OTMgMTk0LjYxMSAxNjYuNDkzIDU2LjY3NSAxODcuMjk4IDU2LjY3NSAxOTQuNzQ1IDg4LjEzNiAyMzguMzY4IDg4LjEzNiAyMzguMzY4IDU2LjY3NSAyMzguMzY4IDAgMTczLjg4MSAwIDY0LjQ4NiAwIiBmaWxsPSIjMDMwMDAwIi8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMjY1LjE5IDAgMjY1LjE5IDU2LjY3NSAyODEuMzY5IDU2LjY3NSAyODEuMzY5IDE5NC42MTEgMjY1LjE5IDE5NC42MTEgMjY1LjE5IDI1MS4yODYgMzkyLjE2OCAyNTEuMjg2IDM5Mi4xNjggMTk0LjYxMSAzNzUuOTg4IDE5NC42MTEgMzc1Ljk4OCAxNDkuMDY5IDQyMC4yMjggMTQ5LjA2OSA0MjAuMjI4IDEwMy4xMTMgMzc1Ljk4OCAxMDMuMTEzIDM3NS45ODggNTYuNjc1IDQyNy45MTMgNTYuNjc1IDQzMy40MjIgNzcuMDA5IDQ3OS44MjcgNzcuMDA5IDQ3OS44MjcgNTYuNjc1IDQ3OS44MjcgMCA0MTIuNTU5IDAgMjY1LjE5IDAiIGZpbGw9IiMwMzAwMDAiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI1MDYuMzcgMCA1MDYuMzcgNTYuNjc1IDUyMi41NDkgNTYuNjc1IDUyMi41NDkgMTk0LjYxMSA1MDYuMzcgMTk0LjYxMSA1MDYuMzcgMjUxLjI4NiA2NTMuNzM4IDI1MS4yODYgNzIxLjAwNyAyNTEuMjg2IDcyMS4wMDcgMTk0LjYxMSA3MjEuMDA3IDE3NC4yNzcgNjc0LjYwMiAxNzQuMjc3IDY2OS4wOTMgMTk0LjYxMSA2MTcuMTY5IDE5NC42MTEgNjE3LjE2OSAxNDkuMDY5IDY2MS40MDggMTQ5LjA2OSA2NjEuNDA4IDEwMy4xMTMgNjE3LjE2OSAxMDMuMTEzIDYxNy4xNjkgNTYuNjc1IDY2OS4wOTMgNTYuNjc1IDY3NC42MDIgNzcuMDA5IDcyMS4wMDcgNzcuMDA5IDcyMS4wMDcgNTYuNjc1IDcyMS4wMDcgMCA2NTMuNzM4IDAgNTA2LjM3IDAiIGZpbGw9IiMwMzAwMDAiLz4KICAgICAgPHBvbHlnb24gcG9pbnRzPSI5MTIuNDgxIDE5NC42MTEgODYwLjU1NSAxOTQuNjExIDg2MC41NTUgNTYuNjc1IDg3Ni43MzUgNTYuNjc1IDg3Ni43MzUgMCA3NDkuNzU3IDAgNzQ5Ljc1NyA1Ni42NzUgNzY1LjkzNiA1Ni42NzUgNzY1LjkzNiAxOTQuNjExIDc0OS43NTcgMTk0LjYxMSA3NDkuNzU3IDI1MS4yODYgODk3LjEyNiAyNTEuMjg2IDk2NC4zOTQgMjUxLjI4NiA5NjQuMzk0IDE5NC42MTEgOTY0LjM5NCAxNzQuMjc3IDkxNy45OSAxNzQuMjc3IDkxMi40ODEgMTk0LjYxMSIgZmlsbD0iIzAzMDAwMCIvPgogICAgICA8cGF0aCBkPSJNMTIwNy40MTkuMDA1aC0yMTYuMzk3djU2LjY3NmgxNi4xODl2MTM3LjkyN2gtMTYuMTg5djU2LjY3NmgyMTYuMzk3bDU1LjQ4LTU1LjQ4VjU1LjQ4NUwxMjA3LjQxOS4wMDVaTTExNjguMjgyLDgwLjc4NHY4OS43MjJsLTI0LjEwMywyNC4xMDNoLTQyLjM1VjU2LjY4MWg0Mi4zNWwyNC4xMDMsMjQuMTAzWiIgZmlsbD0iIzAzMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+") center / contain no-repeat;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.32));
}
/* Superbloom: zweifarbiger Sticker, bleibt wie er ist */
.logo-sb { display: block; height: auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.28)); }

.panel__meta {
  font-size: clamp(12px, 1.5vw, 14px); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; line-height: 1.7; color: rgba(255,255,255,.92); margin: 0;
}
.panel__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper); border-radius: 999px; padding: 15px 30px;
  transition: gap .2s ease, background .2s ease;
}
.panel--tfeld .panel__cta { color: var(--tfeld-dark); }
.panel--sb    .panel__cta { color: var(--sb); }
.panel:hover .panel__cta { gap: 16px; }

/* ---------- Fuß ---------- */
.site-foot {
  text-align: center; padding: 20px 22px 30px;
  font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.4);
}
.site-foot a { text-decoration: underline; }
.site-foot a:hover { color: var(--paper); }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .picker { flex-direction: column; }
  .panel  { padding: 44px 24px; gap: 18px; }
  .logo-tfeld { width: min(290px, 74%); }
  .logo-sb    { width: min(190px, 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel__cta { transition: none; }
}