/* countdown.css — /tools/countdown (05.10.2026). Baut auf werkzeug.css auf. */
.cd { display: flex; flex-direction: column; gap: 1rem; }
.cd [hidden] { display: none !important; }

/* ═══ Anzeige ═══ */
.cd-anzeige {
  --a1: #5aaee8; --a2: #1a6aaa; --a3: #0f4f86; --tx: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.8rem, 2vw, 1.3rem);
  min-height: clamp(18rem, 44vh, 26rem); padding: clamp(2rem, 5vw, 3.2rem) 1rem;
  border-radius: var(--r3); color: var(--tx); text-align: center;
  background: linear-gradient(150deg, var(--a1), var(--a2) 55%, var(--a3));
  box-shadow: 0 22px 50px rgba(15, 42, 74, 0.18);
  transition: background 0.5s;
}
.cd-anzeige[data-stil="1"] { --a1: #23406b; --a2: #12284a; --a3: #070f20; }
.cd-anzeige[data-stil="2"] { --a1: #ffb86b; --a2: #f0715a; --a3: #b9406f; }
.cd-anzeige[data-stil="3"] { --a1: #5cc6a8; --a2: #1f8f86; --a3: #155e63; }
.cd-anzeige[data-stil="4"] { --a1: #a891f0; --a2: #6e5bd6; --a3: #3f3592; }
.cd-deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cd-deko i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.cd-deko i:nth-child(1) { width: 46%; aspect-ratio: 1; right: -12%; top: -30%; animation: cdSchweb 16s ease-in-out infinite alternate; }
.cd-deko i:nth-child(2) { width: 28%; aspect-ratio: 1; left: -8%; bottom: -24%; background: rgba(255, 255, 255, 0.07); animation: cdSchweb 12s ease-in-out infinite alternate-reverse; }
.cd-deko i:nth-child(3) { inset: 0; border-radius: 0; background: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 40%, #000, transparent 75%); }
@keyframes cdSchweb { to { transform: translate(-6%, 8%) scale(1.08); } }
.cd-titel { margin: 0; font: 800 clamp(1.4rem, 4vw, 2.1rem) 'Sora', sans-serif; letter-spacing: -0.02em; max-width: 32rem; overflow-wrap: anywhere; }
.cd-uhr { display: flex; justify-content: center; gap: clamp(0.4rem, 2vw, 1rem); }
.cd-teil {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  min-width: clamp(4.2rem, 17vw, 7.6rem); padding: clamp(0.7rem, 2vw, 1.1rem) 0.4rem;
  border-radius: 20px; background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cd-teil b { font: 800 clamp(2rem, 8vw, 4rem)/1 'Sora', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; display: inline-block; }
.cd-teil b.neu { animation: cdZiffer 0.42s var(--ease-out); }
@keyframes cdZiffer { from { opacity: 0.2; transform: translateY(-30%); filter: blur(2px); } }
.cd-teil span { font-size: clamp(0.62rem, 1.8vw, 0.78rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.cd-uhr.vorbei { opacity: 0.55; }
.cd-fertig { margin: 0; font: 800 clamp(1.3rem, 4vw, 1.8rem) 'Sora', sans-serif; animation: cdPop 0.6s var(--ease-out); }
@keyframes cdPop { 0% { opacity: 0; transform: scale(0.6); } 60% { transform: scale(1.08); } }
.cd-datum { margin: 0; font-size: 0.92rem; font-weight: 500; opacity: 0.85; }
.cd-voll {
  position: absolute; right: 0.9rem; top: 0.9rem; width: 38px; height: 38px; border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.cd-voll:hover { background: rgba(255, 255, 255, 0.28); }
.cd-voll svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cd-konfetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cd-anzeige:fullscreen { border-radius: 0; gap: 2rem; }
.cd-anzeige:fullscreen .cd-titel { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 60rem; }
.cd-anzeige:fullscreen .cd-teil { min-width: clamp(6rem, 18vw, 14rem); }
.cd-anzeige:fullscreen .cd-teil b { font-size: clamp(3rem, 11vw, 8rem); }

.cd-geteilt { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }

/* ═══ Bearbeiter ═══ */
.cd-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 820px) { .cd-raster { grid-template-columns: 1fr; } }
.cd-editor { display: flex; flex-direction: column; gap: 0.9rem; }
.cd-editor .wz-etikett { margin: 0; }
.cd-zeit { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; }
.cd-schnell { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cd-schnell button {
  padding: 0.38rem 0.75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--card2);
  font: 600 0.8rem 'Inter', sans-serif; color: var(--text2); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s;
}
.cd-schnell button:hover { background: var(--card); color: var(--pri); }
.cd-schnell button:active { transform: scale(0.95); }
.cd-stile { display: flex; gap: 0.55rem; }
.cd-stile button {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--card); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border2); transition: transform 0.18s var(--ease-out), box-shadow 0.18s;
  background: linear-gradient(150deg, #5aaee8, #1a6aaa);
}
.cd-stile [data-s="1"] { background: linear-gradient(150deg, #23406b, #070f20); }
.cd-stile [data-s="2"] { background: linear-gradient(150deg, #ffb86b, #b9406f); }
.cd-stile [data-s="3"] { background: linear-gradient(150deg, #5cc6a8, #155e63); }
.cd-stile [data-s="4"] { background: linear-gradient(150deg, #a891f0, #3f3592); }
.cd-stile button:hover { transform: scale(1.08); }
.cd-stile button.an { box-shadow: 0 0 0 2.5px var(--pri); transform: scale(1.06); }
.cd-aktionen { margin-top: 0.2rem; }

.cd-listekarte .wz-etikett { margin-bottom: 0.6rem; }
.cd-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.cd-eintrag { display: flex; align-items: center; gap: 0.3rem; transition: opacity 0.2s, transform 0.2s; }
.cd-eintrag.geht { opacity: 0; transform: translateX(12px); }
.cd-oeffnen {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; text-align: left;
  padding: 0.6rem 0.75rem; border-radius: 14px; border: 1px solid var(--border); background: var(--card2);
  font: inherit; color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.cd-oeffnen:hover { background: var(--card); border-color: var(--border2); }
.cd-oeffnen i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(150deg, #5aaee8, #1a6aaa); }
.cd-eintrag[data-stil="1"] i { background: linear-gradient(150deg, #23406b, #070f20); }
.cd-eintrag[data-stil="2"] i { background: linear-gradient(150deg, #ffb86b, #b9406f); }
.cd-eintrag[data-stil="3"] i { background: linear-gradient(150deg, #5cc6a8, #155e63); }
.cd-eintrag[data-stil="4"] i { background: linear-gradient(150deg, #a891f0, #3f3592); }
.cd-oeffnen span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-oeffnen b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-oeffnen small { font-size: 0.76rem; color: var(--sub); }
.cd-oeffnen em { font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--pri); white-space: nowrap; }
.cd-weg {
  flex: none; width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s;
}
.cd-weg:hover { color: var(--danger); background: rgba(231, 76, 60, 0.08); }
.cd-weg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .cd-teil { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .cd-deko i, .cd-teil b.neu, .cd-fertig { animation: none; } }