/* ============================================================
   Feen- & Zauberer-Theme für kindgerechte Terminumfragen (2. Umfrage-Art).
   Komplett scoped unter .kids-theme — überschreibt nur Marken-Variablen +
   ein paar Akzente, die Grundkomponenten (Karten, Buttons, Badges) bleiben
   dieselben wie im neutralen Business-Design, reskinnen sich darüber von
   selbst. Wird auf jeder Seite mitgeladen, greift aber nirgendwo sonst. */

.kids-theme {
  --brand-50:  #FBF0FF;
  --brand-100: #F3D9FF;
  --brand-200: #E6B8FF;
  --brand-300: #D08AFA;
  --brand-500: #B15CEB;
  --brand-600: #9340CC;
  --brand-700: #6E2E9C;
  --bg: #FBF0FF;
  --ink: #3A1D52;
  --ink-2: #4E2E68;
  --ink-3: #7A5A96;
  --grad-brand: linear-gradient(135deg, #B15CEB, #F49FD1);
  --grad-wash: radial-gradient(1100px 520px at 14% -8%, rgba(177,92,235,.10), transparent 60%),
               radial-gradient(900px 460px at 100% 0%, rgba(244,159,209,.12), transparent 55%);
  --sh-brand: 0 6px 18px rgba(177,92,235,.35);
  font-family: 'Fredoka', 'Instrument Sans', sans-serif;
}

.kids-theme h1,
.kids-theme .public-brand .brand-tag,
.kids-theme .card-title { font-family: 'Fredoka', sans-serif; }

.kids-theme .card { border-radius: 22px; border-color: var(--brand-200); }
.kids-theme .card-accent::before { background: linear-gradient(90deg, #F49FD1, #B15CEB, #8CC8F7); height: 6px; }

.kids-theme .btn-primary,
.kids-theme form button[type="submit"] {
  background: linear-gradient(135deg, #B15CEB, #F49FD1);
  box-shadow: 0 12px 26px -12px rgba(177,92,235,.55);
}
.kids-theme .btn-primary:hover,
.kids-theme form button[type="submit"]:hover { background: var(--ink); }

.kids-theme .vote-choices label { border-radius: 999px; }
.kids-theme .vote-choices .vc-yes:has(input:checked) { background: #E6FBEE; border-color: #2F9E6B; color: #2F9E6B; }
.kids-theme .vote-choices .vc-maybe:has(input:checked) { background: #FFF3DA; border-color: #C7861E; color: #C7861E; }
.kids-theme .vote-choices .vc-no:has(input:checked) { background: #FDE8E8; border-color: #D9534F; color: #C7413C; }

/* Spielerischer Verlaufs-Hintergrund + Funkel-Elemente rundherum, nur auf der
   öffentlichen Abstimmungsseite (dort bekommt .public-shell die Klasse). */
.kids-theme.public-shell {
  background: linear-gradient(180deg, #FBF0FF 0%, #F6E6FF 55%, #F3DCFF 100%);
  position: relative;
  overflow: hidden;
}
.kids-theme .kids-sparkles {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.kids-theme .kids-sparkles span {
  position: absolute; opacity: .85; filter: saturate(1.15) drop-shadow(0 2px 6px rgba(110,46,156,.25));
  display: inline-block; will-change: transform;
  animation-name: kids-twinkle, kids-fly-1;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  animation-duration: 3.2s, 26s;
}
/* Feen + Einhörner kräftiger eingefärbt als der Rest der Deko */
.kids-theme .kids-sparkles .kids-vivid {
  filter: saturate(2) brightness(1.08) drop-shadow(0 3px 8px rgba(110,46,156,.3));
}
.kids-theme .public-wrap { position: relative; z-index: 1; }

@keyframes kids-twinkle {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* Große, durchgehende Flugbahnen quer über den ganzen Bildschirm statt
   kleinem Hin-und-her-Wackeln — links-rechts, rechts-links, beide Diagonalen,
   oben-unten. Start/Ende jeweils außerhalb des Viewports, damit der
   Loop-Sprung unsichtbar bleibt (.kids-sparkles hat overflow:hidden). */
.kids-theme .kids-fly-1 { animation-name: kids-twinkle, kids-fly-1; }
.kids-theme .kids-fly-2 { animation-name: kids-twinkle, kids-fly-2; }
.kids-theme .kids-fly-3 { animation-name: kids-twinkle, kids-fly-3; }
.kids-theme .kids-fly-4 { animation-name: kids-twinkle, kids-fly-4; }
.kids-theme .kids-fly-5 { animation-name: kids-twinkle, kids-fly-5; }
.kids-theme .kids-fly-6 { animation-name: kids-twinkle, kids-fly-6; }
.kids-theme .kids-fly-7 { animation-name: kids-twinkle, kids-fly-7; }
.kids-theme .kids-fly-8 { animation-name: kids-twinkle, kids-fly-8; }
.kids-theme .kids-fly-9 { animation-name: kids-twinkle, kids-fly-9; }
.kids-theme .kids-fly-10 { animation-name: kids-twinkle, kids-fly-10; }

@keyframes kids-fly-1 {
  0%   { transform: translate(-20vw, 6vh) rotate(-8deg) scale(.85); }
  50%  { transform: translate(60vw, -10vh) rotate(5deg) scale(1.25); }
  100% { transform: translate(130vw, 4vh) rotate(-8deg) scale(.85); }
}
@keyframes kids-fly-2 {
  0%   { transform: translate(15vw, -8vh) rotate(7deg) scale(1.2); }
  50%  { transform: translate(-55vw, 14vh) rotate(-6deg) scale(.85); }
  100% { transform: translate(-130vw, -4vh) rotate(7deg) scale(1.2); }
}
@keyframes kids-fly-3 {
  0%   { transform: translate(-18vw, -14vh) rotate(-9deg) scale(.9); }
  50%  { transform: translate(55vw, 45vh) rotate(6deg) scale(1.3); }
  100% { transform: translate(125vw, 100vh) rotate(-9deg) scale(.9); }
}
@keyframes kids-fly-4 {
  0%   { transform: translate(-16vw, 16vh) rotate(8deg) scale(1.25); }
  50%  { transform: translate(50vw, -40vh) rotate(-5deg) scale(.9); }
  100% { transform: translate(120vw, -95vh) rotate(8deg) scale(1.25); }
}
@keyframes kids-fly-5 {
  0%   { transform: translate(8vw, -18vh) rotate(-5deg) scale(.85); }
  50%  { transform: translate(-10vw, 50vh) rotate(6deg) scale(1.2); }
  100% { transform: translate(6vw, 115vh) rotate(-5deg) scale(.85); }
}
@keyframes kids-fly-6 {
  0%   { transform: translate(-20vw, 65vh) rotate(-10deg) scale(1.2); }
  50%  { transform: translate(55vw, -20vh) rotate(8deg) scale(.85); }
  100% { transform: translate(130vw, -75vh) rotate(-10deg) scale(1.2); }
}
@keyframes kids-fly-7 {
  0%   { transform: translate(20vw, -65vh) rotate(10deg) scale(.85); }
  50%  { transform: translate(-50vw, 20vh) rotate(-8deg) scale(1.25); }
  100% { transform: translate(-130vw, 80vh) rotate(10deg) scale(.85); }
}
@keyframes kids-fly-8 {
  0%   { transform: translate(-20vw, 0vh) rotate(-6deg) scale(.85); }
  25%  { transform: translate(15vw, -28vh) rotate(5deg) scale(1.2); }
  50%  { transform: translate(55vw, 18vh) rotate(-5deg) scale(.9); }
  75%  { transform: translate(90vw, -22vh) rotate(5deg) scale(1.25); }
  100% { transform: translate(130vw, 12vh) rotate(-6deg) scale(.85); }
}
@keyframes kids-fly-9 {
  0%   { transform: translate(20vw, 0vh) rotate(6deg) scale(1.2); }
  25%  { transform: translate(-15vw, 28vh) rotate(-5deg) scale(.85); }
  50%  { transform: translate(-55vw, -18vh) rotate(5deg) scale(1.25); }
  75%  { transform: translate(-90vw, 22vh) rotate(-5deg) scale(.9); }
  100% { transform: translate(-130vw, -12vh) rotate(6deg) scale(1.2); }
}
@keyframes kids-fly-10 {
  0%   { transform: translate(-12vw, 95vh) rotate(-8deg) scale(.85); }
  30%  { transform: translate(35vw, -35vh) rotate(6deg) scale(1.25); }
  60%  { transform: translate(78vw, 42vh) rotate(-6deg) scale(.9); }
  100% { transform: translate(125vw, -95vh) rotate(8deg) scale(1.2); }
}

/* Hero-Szene: Schlossbild hinter Titel/Beschreibung, mit Verlauf fürs
   Text-Kontrast unten drüber gelegt. */
.kids-theme .kids-hero {
  position: relative;
  margin: -40px -24px 24px;
  padding: 72px 24px 32px;
  border-radius: 0 0 32px 32px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(180deg, rgba(20,10,35,.05) 0%, rgba(20,10,35,.18) 50%, rgba(20,10,35,.82) 100%),
    url('/images/kids-poll-hero.jpg');
  background-size: cover;
  background-position: center 40%;
  box-shadow: inset 0 0 90px rgba(10,5,25,.35);
}
.kids-theme .kids-hero-content { position: relative; z-index: 1; }
.kids-theme .kids-hero .public-brand .brand-mark { color: #FFFDFB; }
.kids-theme .kids-hero .public-brand .logo-x { color: #F9C9EA; }
.kids-theme .kids-hero .brand-tag {
  background: rgba(255,255,255,.18); color: #FFF6FF; padding: 4px 12px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; letter-spacing: .04em;
}
.kids-theme .kids-hero h1 { color: #FFFDFB; text-shadow: 0 3px 14px rgba(46,26,66,.55); font-size: 2.3em; }
.kids-theme .kids-hero .page-sub { color: #F3E6FF; text-shadow: 0 2px 8px rgba(46,26,66,.5); }

@media (max-width: 640px) {
  .kids-theme .kids-hero { margin: -24px -16px 20px; padding: 40px 16px 22px; min-height: 320px; background-position: center 32%; }
  .kids-theme .kids-hero h1 { font-size: 1.7em; }
}