:root {
  /* Frisches Grün-Weiß für die Oberfläche.
     (Die 5 Farbwelten der Buch-Illustrationen sind davon unabhängig.) */
  --creme: #F4FAF3;        /* Seitenhintergrund: sehr helles Grün-Weiß */
  --creme-2: #E7F3E6;      /* zarte Sektionsfläche */
  --karton: #FFFFFF;
  --text: #26332A;         /* dunkles Grün-Anthrazit */
  --text-weich: #5E6E62;
  --terra: #4FA05B;        /* Primärfarbe (Grün) */
  --terra-dunkel: #3C8248; /* Primär, dunkel */
  --gruen: #6FBB6A;        /* Sekundär, helleres Grün */
  --gruen-dunkel: #4E9A54;
  --gold: #57B08A;         /* frischer Akzent (Teal-Grün) für Badges/Schritte */
  --rand: #D6E7D1;         /* grünstichiger Rahmen */
  --schatten: 0 6px 24px rgba(50, 110, 70, .12);
  --radius: 18px;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text); background: var(--creme); line-height: 1.55;
}
a { color: var(--terra-dunkel); }
img { max-width: 100%; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.wrap-schmal { max-width: 680px; margin: 0 auto; padding: 0 20px; }

header.topbar {
  background: var(--creme); border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--terra-dunkel); text-decoration: none; }
.logo span { color: var(--gruen-dunkel); }
.topbar nav a { margin-left: 18px; text-decoration: none; color: var(--text-weich); font-weight: 600; }
.topbar nav a:hover { color: var(--terra-dunkel); }

.hero { text-align: center; padding: 54px 0 30px; }
.hero h1 { font-size: 2.4rem; margin: 0 0 12px; color: var(--terra-dunkel); }
.hero p { font-size: 1.15rem; color: var(--text-weich); max-width: 640px; margin: 0 auto 24px; }

.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  background: var(--terra); color: #fff; font-weight: 700; font-size: 1rem;
  padding: 13px 26px; border-radius: 999px; box-shadow: var(--schatten);
  transition: transform .08s ease, background .15s ease;
}
.btn:hover { background: var(--terra-dunkel); transform: translateY(-1px); }
.btn.gruen { background: var(--gruen); }
.btn.gruen:hover { background: var(--gruen-dunkel); }
.btn.hell { background: #fff; color: var(--terra-dunkel); border: 2px solid var(--rand); box-shadow: none; }
.btn.gross { font-size: 1.15rem; padding: 16px 34px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--karton); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 26px; margin: 18px 0;
}

.schritte { display: flex; gap: 8px; justify-content: center; margin: 26px 0; flex-wrap: wrap; }
.schritte .s {
  font-size: .85rem; font-weight: 700; color: var(--text-weich);
  background: var(--creme-2); border-radius: 999px; padding: 6px 14px;
}
.schritte .s.aktiv { background: var(--gold); color: #ffffff; }

h2 { color: var(--terra-dunkel); }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--rand); border-radius: 12px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--terra); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.hinweis { color: var(--text-weich); font-size: .92rem; }

/* Baukasten */
.baukasten { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.avatar-buehne {
  background: var(--creme-2); border-radius: var(--radius); border: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: center; padding: 16px; position: sticky; top: 84px;
}
.avatar-buehne img { height: 340px; }
.figuren-liste { list-style: none; padding: 0; margin: 0; }
.figuren-liste li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: 12px; margin-bottom: 8px; background: #fff;
}
.figuren-liste li img { height: 54px; }
.figuren-liste .meta { flex: 1; }
.figuren-liste .meta b { display: block; }
.pill { font-size: .8rem; color: var(--text-weich); }

@media (max-width: 780px) {
  .baukasten { grid-template-columns: 1fr; }
  .avatar-buehne { position: static; }
  .row, .row-3 { grid-template-columns: 1fr; }
}

/* Themenwelt / Farbwelt Auswahl */
.grid-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.karte-auswahl { cursor: pointer; }
.karte-auswahl input { display: none; }
.karte-auswahl .inner {
  border: 2px solid var(--rand); border-radius: var(--radius); padding: 14px; background: #fff;
  transition: border-color .12s ease, transform .08s ease;
}
.karte-auswahl input:checked + .inner { border-color: var(--terra); transform: translateY(-2px); box-shadow: var(--schatten); }
.farbpunkte { display: flex; gap: 5px; margin-top: 8px; }
.farbpunkte span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

/* Vorschau / Buch */
.buch { max-width: 760px; margin: 0 auto; }
.buchseite { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schatten); margin-bottom: 22px; }
.buchseite .bild { width: 100%; display: block; background: var(--creme-2); }
.buchseite .txt { padding: 18px 22px; font-size: 1.12rem; }
.buchseite .kopf { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 22px; background: var(--creme-2); font-size: .85rem; color: var(--text-weich); }
.aendern-box { padding: 0 22px 18px; }
.aendern-box details summary { cursor: pointer; font-weight: 600; color: var(--terra-dunkel); }
.aendern-box .zeile { display: flex; gap: 8px; margin-top: 10px; }
.aendern-box input { flex: 1; }

.pakete { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.paket { border: 2px solid var(--rand); border-radius: var(--radius); padding: 20px; background: #fff; text-align: center; }
.paket .preis { font-size: 1.8rem; font-weight: 800; color: var(--terra-dunkel); margin: 8px 0; }
@media (max-width: 620px) { .pakete { grid-template-columns: 1fr; } }

.demo-viewer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-viewer img { border-radius: 12px; border: 1px solid var(--rand); }

.badge { display: inline-block; background: var(--gold); color: #ffffff; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; font-size: .8rem; }
.fehler { background: #fbe4de; border: 1px solid #e6a893; color: #8a3b26; padding: 14px; border-radius: 12px; }
.ok { background: #e4f0d8; border: 1px solid #a9cf86; color: #40632a; padding: 14px; border-radius: 12px; }

footer { margin-top: 60px; padding: 30px 0; border-top: 1px solid var(--rand); color: var(--text-weich); }
footer a { margin-right: 16px; text-decoration: none; }
.center { text-align: center; }
.spinner { display: inline-block; width: 34px; height: 34px; border: 4px solid var(--rand);
  border-top-color: var(--terra); border-radius: 50%; animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* Preis-Ausblick auf der Startseite */
.preisliste { margin: 8px 0 6px; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.preiszeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 16px; }
.preiszeile:nth-child(odd) { background: var(--creme); }
.pl-label { font-weight: 600; }
.pl-note { font-weight: 400; }
.pl-preis { font-weight: 800; color: var(--terra-dunkel); white-space: nowrap; font-size: 1.05rem; }

/* Mini-FAQ */
.faq { border: 1px solid var(--rand); border-radius: 12px; padding: 12px 16px; margin: 10px 0;
  background: #fff; }
.faq > summary { cursor: pointer; font-weight: 700; color: var(--terra-dunkel); list-style: none; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: "＋"; margin-right: 10px; color: var(--terra); font-weight: 800; }
.faq[open] > summary::before { content: "－"; }
.faq p { margin: 10px 0 2px; color: var(--text); }

/* ---------------------------------------------------------- Zauber-Optik (Hero)
   Dezent, additiv – ändert nur den Kopfbereich der Startseite. */
.hero.zauber {
  position: relative; overflow: hidden;
  border-radius: 28px; margin-top: 14px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(111,187,106,.18), rgba(244,250,243,0) 60%),
    radial-gradient(60% 60% at 15% 10%, rgba(87,176,138,.14), rgba(244,250,243,0) 70%),
    radial-gradient(60% 60% at 85% 15%, rgba(79,160,91,.12), rgba(244,250,243,0) 70%);
}
.hero.zauber .hl {
  color: var(--terra-dunkel);
  background: linear-gradient(120deg, var(--gruen) 0%, var(--terra) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; white-space: nowrap; margin-right: .7em;
}
.hero.zauber .hl::after {
  content: "✨"; -webkit-text-fill-color: initial; font-size: .7em;
  position: absolute; top: -.5em; right: -.2em;
}
.zauber-kicker {
  display: inline-block; font-size: .95rem !important; font-weight: 700;
  color: var(--gruen-dunkel) !important; letter-spacing: .3px;
  background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 6px 16px !important; margin: 0 auto 6px !important; box-shadow: var(--schatten);
}
/* schwebende Funken */
.hero.zauber .funke {
  position: absolute; color: var(--gruen); opacity: .55; pointer-events: none;
  animation: schweben 6s ease-in-out infinite; user-select: none;
}
.hero.zauber .funke.f1 { top: 18%;  left: 8%;  font-size: 1.4rem; animation-delay: 0s;   }
.hero.zauber .funke.f2 { top: 62%;  left: 14%; font-size: 1rem;   animation-delay: .8s; color: var(--gold); }
.hero.zauber .funke.f3 { top: 30%;  left: 88%; font-size: 1.6rem; animation-delay: 1.6s; }
.hero.zauber .funke.f4 { top: 70%;  left: 82%; font-size: 1.1rem; animation-delay: 2.4s; color: var(--gold); }
.hero.zauber .funke.f5 { top: 12%;  left: 60%; font-size: .9rem;  animation-delay: 3.2s; }
.hero.zauber .funke.f6 { top: 78%;  left: 46%; font-size: 1rem;   animation-delay: 4s;  color: var(--gold); }
@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(0deg);   opacity: .35; }
  50%      { transform: translateY(-12px) rotate(12deg); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.zauber .funke { animation: none; }
}