/* ==========================================================================
   Countdown – helles, ruhiges Theme über Bootstrap 5.3, mobile first.
   Die Verlaufsfarben (--cd-from/--cd-to/--cd-accent) setzt JS je nach Preset.
   ========================================================================== */

:root {
  --cd-from: #6ee7f9;
  --cd-to: #a78bfa;
  --cd-accent: #6d4aff;

  --cd-ink: #0f172a;
  --cd-muted: #64748b;
  --cd-line: #e6e9f0;
  --cd-bg: #f6f7fb;
  --cd-card: #ffffff;
  --cd-radius: 22px;
  --cd-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .16);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--cd-bg);
  color: var(--cd-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Sehr dezenter Hauch der Akzentfarbe am oberen Rand – hält es hell. */
  background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--cd-from) 22%, transparent), transparent 70%);
  background-repeat: no-repeat;
  transition: background-image .4s ease;
}

/* --- Rahmen ------------------------------------------------------------- */

.cd-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.15rem 1.25rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--cd-ink);
  text-decoration: none;
}
.cd-brand-mark { font-size: 1.15rem; }

.cd-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: .5rem 1.25rem 3rem;
}

.cd-block + .cd-block { margin-top: 2.5rem; }

.cd-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  padding: 1.5rem 1.25rem 2rem;
  color: var(--cd-muted);
  font-size: .8rem;
  text-align: center;
}
.cd-footer a { color: inherit; }

/* --- Editor ------------------------------------------------------------- */

.cd-intro { margin-bottom: 1.75rem; }

.cd-intro-title {
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -.03em;
  margin: 0 0 .6rem;
}

.cd-intro-text {
  margin: 0;
  color: var(--cd-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.cd-form {
  background: var(--cd-card);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  padding: 1.35rem 1.15rem 1.5rem;
}

.cd-field + .cd-field,
.cd-field + button { margin-top: 1.25rem; }
.cd-form > button { margin-top: 1.6rem; }

.cd-form .form-label {
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .4rem;
  float: none;
}
fieldset.cd-field { border: 0; padding: 0; margin: 0; }
fieldset.cd-field > legend.form-label { font-size: .92rem; width: auto; }

.cd-optional {
  font-weight: 400;
  color: var(--cd-muted);
  font-size: .82em;
}

.cd-form .form-control {
  border-radius: 13px;
  border-color: var(--cd-line);
  padding: .7rem .85rem;
  background: #fbfcfe;
}
.cd-form .form-control:focus {
  border-color: var(--cd-accent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-accent) 16%, transparent);
}

.cd-hint {
  margin: .45rem 0 0;
  color: var(--cd-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.cd-quick {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.cd-chip {
  border: 1px solid var(--cd-line);
  background: #fff;
  color: var(--cd-muted);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cd-chip:hover { border-color: var(--cd-accent); color: var(--cd-accent); }

/* Farbwähler */
/* Sechs Kreise sollen auch auf 360 px in eine Zeile passen. */
.cd-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  max-width: 22rem;
}
.cd-swatch {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) inset;
  transition: transform .15s, box-shadow .15s;
}
.cd-swatch:hover { transform: translateY(-2px); }
.cd-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cd-ink);
}
.cd-swatch:focus-visible { outline: 3px solid var(--cd-accent); outline-offset: 3px; }

/* --- Buttons ------------------------------------------------------------ */

.cd-btn-primary {
  --bs-btn-bg: var(--cd-ink);
  background: var(--cd-ink);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 600;
  padding: .78rem 1.15rem;
  transition: transform .12s ease, filter .15s ease;
}
.cd-btn-primary:hover { color: #fff; filter: brightness(1.25); }
.cd-btn-primary:active { transform: translateY(1px); }

.cd-btn-ghost {
  background: #fff;
  color: var(--cd-ink);
  border: 1px solid var(--cd-line);
  border-radius: 14px;
  font-weight: 600;
  padding: .7rem 1.1rem;
}
.cd-btn-ghost:hover { border-color: var(--cd-accent); color: var(--cd-accent); }

/* --- Ergebnis ----------------------------------------------------------- */

.cd-result {
  margin-top: 1.5rem;
  background: var(--cd-card);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  padding: 1.25rem 1.15rem 1.35rem;
}
.cd-result-title {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 .8rem;
}
.cd-linkrow { display: flex; gap: .5rem; }
.cd-linkrow .form-control {
  border-radius: 13px;
  border-color: var(--cd-line);
  font-size: .85rem;
  background: #fbfcfe;
}
.cd-linkrow .btn { flex: 0 0 auto; }

/* --- Countdown-Karte ---------------------------------------------------- */

.cd-preview-flag {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cd-muted);
}

.cd-card {
  background: var(--cd-card);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  overflow: hidden;
}

.cd-hero {
  position: relative;
  isolation: isolate;
  min-height: 9.5rem;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem 1.25rem 1.35rem;
  background-image: linear-gradient(135deg, var(--cd-from), var(--cd-to));
  transition: background-image .4s ease;
}

.cd-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Scrim, damit Text auf beliebigen Bildern lesbar bleibt. */
.cd-hero.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 6, 23, .15) 0%, rgba(2, 6, 23, .72) 100%);
}
.cd-hero.has-image { color: #fff; }
.cd-hero.has-image .cd-hero-sub,
.cd-hero.has-image .cd-hero-date { color: rgba(255, 255, 255, .88); }

.cd-hero-body { position: relative; width: 100%; }

.cd-hero-sub {
  margin: 0 0 .3rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .62);
}

.cd-hero-title {
  margin: 0;
  font-size: clamp(1.6rem, 7.5vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.cd-hero-date {
  margin: .5rem 0 0;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(15, 23, 42, .66);
}

.cd-timer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--cd-line);
  border-top: 1px solid var(--cd-line);
}

.cd-unit {
  background: var(--cd-card);
  padding: 1.1rem .5rem 1rem;
  text-align: center;
}

.cd-num {
  display: block;
  font-size: clamp(2.1rem, 11vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--cd-ink);
}

.cd-lbl {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cd-muted);
}

.cd-timer.is-done .cd-num { color: var(--cd-accent); }

.cd-done {
  margin: 0;
  padding: 1.1rem 1rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cd-accent);
  border-top: 1px solid var(--cd-line);
}

.cd-cardfoot {
  padding: 1.1rem 1.15rem 1.25rem;
  border-top: 1px solid var(--cd-line);
}

/* --- Teilen ------------------------------------------------------------- */

.cd-share {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.cd-cardfoot .cd-share:last-child,
.cd-result .cd-share { margin-bottom: 0; }
.cd-result .cd-share { margin-top: .9rem; }

.cd-sharebtn {
  flex: 1 1 auto;
  min-width: 6.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid var(--cd-line);
  background: #fff;
  color: var(--cd-ink);
  border-radius: 999px;
  padding: .55rem .9rem;
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.cd-sharebtn:hover {
  border-color: var(--cd-accent);
  color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 6%, #fff);
}
.cd-sharebtn.is-done {
  border-color: var(--cd-accent);
  color: var(--cd-accent);
}

.cd-cta {
  margin: 1.75rem 0 0;
  text-align: center;
}

.cd-error {
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  padding: 1.25rem;
  color: var(--cd-muted);
  line-height: 1.55;
}
.cd-error a { color: var(--cd-accent); }

/* --- Ab Tablet ---------------------------------------------------------- */

@media (min-width: 576px) {
  .cd-main { padding-top: 1rem; }
  .cd-timer { grid-template-columns: repeat(4, 1fr); }
  .cd-hero { min-height: 11rem; padding: 2rem 1.75rem 1.6rem; }
  .cd-form,
  .cd-result { padding: 1.75rem 1.6rem; }
  .cd-cardfoot { padding: 1.35rem 1.6rem 1.5rem; }
  .cd-sharebtn { flex: 0 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}