/* Meine Wunschliste – Grundlayout und Designs der geteilten Listen
   Neues Design: Block .design-<name> mit den Variablen anlegen und in DESIGNS (main.py) eintragen. */

/* ---------- Farben je Design ---------- */
:root, .design-schlicht, .design-verwaltung {
  /* Farbwelt „Babyblau und Butter“ (Pastell, 2026-11-01) */
  --grund: #D9E8F7; --karte: #FFFFFF; --text: #22303F; --leise: #4F6176; --linie: #C9DAEC;
  --akzent: #3E78B8; --akzent-text: #FFFFFF; --akzent-hell: #D6E8FA;
  --butter: #FFF0B8; --butter-hell: #FFFBEA; --gold: #D9A21B; --gold-text: #7A5A00; --babyblau: #E6F1FC;
  --schatten: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --buehne: linear-gradient(135deg, #D6E8FA, #E6F1FC 55%, #FFF0B8); --buehne-text: #22303F;
  --muster: radial-gradient(circle at 80% 30%, rgba(217,162,27,.35) 0 3px, transparent 4px);
}
/* Farbige Designs behalten weiße Schrift im Kopf (der helle Standard gilt nur für „Schlicht“) */
.design-geburtstag-maedchen, .design-geburtstag-junge, .design-geburtstag, .design-party, .design-weihnachten,
.design-einschulung { --buehne-text: #FFFFFF; }
.design-geburtstag-maedchen {
  --grund: #FFF4FA; --akzent: #C2255C; --akzent-hell: #FFDEEB; --linie: #F7C6DA;
  --buehne: linear-gradient(135deg, #F783AC, #9C36B5);
  --muster: radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 3px, transparent 4px),
            radial-gradient(circle at 70% 60%, rgba(255,236,153,.8) 0 2px, transparent 3px),
            radial-gradient(circle at 45% 80%, rgba(255,255,255,.4) 0 4px, transparent 5px);
}
.design-geburtstag-junge {
  --grund: #F1F7FF; --akzent: #1864AB; --akzent-hell: #D0EBFF; --linie: #B5D4F4;
  --buehne: linear-gradient(135deg, #1C7ED6, #0B7285);
  --muster: radial-gradient(circle at 15% 25%, #FFE066 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 65% 15%, #FFFFFF 0 1px, transparent 2px),
            radial-gradient(circle at 80% 70%, #FFE066 0 2px, transparent 3px),
            radial-gradient(circle at 35% 75%, #FFFFFF 0 1.5px, transparent 2.5px);
}
.design-geburtstag {
  --grund: #FFF8F0; --akzent: #E8590C; --akzent-hell: #FFE8CC; --linie: #F5D0B0;
  --buehne: linear-gradient(135deg, #FF6B6B, #845EF7);
  --muster: radial-gradient(circle at 20% 30%, rgba(255,255,255,.4) 0 3px, transparent 4px),
            radial-gradient(circle at 70% 60%, rgba(255,230,109,.7) 0 3px, transparent 4px),
            radial-gradient(circle at 45% 80%, rgba(0,245,212,.55) 0 3px, transparent 4px);
}
.design-party {
  --grund: #F4F2FA; --akzent: #7048E8; --akzent-hell: #E5DBFF; --linie: #D0C4F0;
  --buehne: linear-gradient(135deg, #12122B, #3B1F5E);
  --muster: radial-gradient(circle at 20% 30%, #F5C542 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 75% 20%, #20C997 0 2px, transparent 3px),
            radial-gradient(circle at 60% 70%, #FF6FA3 0 2px, transparent 3px),
            radial-gradient(circle at 30% 80%, #4DABF7 0 1.5px, transparent 2.5px);
}
.design-weihnachten {
  --grund: #FBF6F1; --akzent: #B42318; --akzent-hell: #F8DCD8; --linie: #E7C9C3;
  --buehne: linear-gradient(135deg, #1E6B3A, #0F3D22);
  --muster: radial-gradient(circle at 15% 25%, rgba(255,255,255,.7) 0 2px, transparent 3px),
            radial-gradient(circle at 65% 15%, rgba(255,255,255,.55) 0 3px, transparent 4px),
            radial-gradient(circle at 85% 70%, rgba(255,255,255,.6) 0 2px, transparent 3px),
            radial-gradient(circle at 35% 75%, rgba(255,255,255,.45) 0 3px, transparent 4px);
}
.design-hochzeit {
  --grund: #FCFAF6; --akzent: #A67C2E; --akzent-hell: #F3EAD7; --linie: #E6D9BF;
  --buehne: linear-gradient(135deg, #F8F1E4, #E9D9B8); --buehne-text: #4A3A1E;
  --muster: radial-gradient(circle at 50% 50%, rgba(166,124,46,.18) 0 2px, transparent 3px);
}
.design-baby {
  --grund: #F4FBF8; --akzent: #2B8A6E; --akzent-hell: #D3F2E7; --linie: #BFE3D6;
  --buehne: linear-gradient(135deg, #B2F2DD, #FFF3BF); --buehne-text: #1E4B3F;
  --muster: radial-gradient(circle at 30% 40%, rgba(255,255,255,.8) 0 5px, transparent 6px),
            radial-gradient(circle at 75% 65%, rgba(255,255,255,.6) 0 4px, transparent 5px);
}
.design-einschulung {
  --grund: #F3F7FC; --akzent: #2B6CB0; --akzent-hell: #DCE9F7; --linie: #BCD2EA;
  --buehne: linear-gradient(135deg, #F59F00, #E8590C 55%, #2B6CB0 55%);
  --muster: repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.18) 27px 28px);
}
.design-ostern {
  --grund: #F8FBEF; --akzent: #5C940D; --akzent-hell: #E9F5D0; --linie: #D3E6AE;
  --buehne: linear-gradient(135deg, #A9E34B, #FFD43B); --buehne-text: #2B3A0E;
  --muster: radial-gradient(ellipse 6px 8px at 25% 35%, rgba(255,255,255,.75) 98%, transparent),
            radial-gradient(ellipse 5px 7px at 70% 70%, rgba(255,168,168,.8) 98%, transparent);
}

/* ---------- Grundlayout ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.55 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
main { flex: 1; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; font-weight: 750; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6em; }
a { color: var(--akzent); }
.leise { color: var(--leise); }
.klein-text { font-size: .85rem; }
.inhalt { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px; }
.mitte { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.karte {
  background: var(--karte); border: 1px solid rgba(30,39,48,.06); border-radius: 20px;
  padding: 18px; margin: 0 0 14px; box-shadow: var(--schatten);
}
.karte.schmal { max-width: 440px; width: 100%; text-align: center; }
.karte.text { max-width: 680px; }
.gross-symbol { font-size: 3rem; line-height: 1; margin-bottom: .3em; }
.beschreibung { white-space: pre-line; }
.meldung { border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; background: var(--karte); border: 1px solid var(--linie); }
.meldung.gut { background: #D3F0DB; }
.meldung.warn { background: #FFE8C2; }

/* Kopf einer geteilten Liste */
.buehne {
  background: var(--muster), var(--buehne); background-size: 120px 120px, auto;
  color: var(--buehne-text); text-align: center; padding: 36px 16px 32px;
}
.buehne-inhalt { max-width: 760px; margin: 0 auto; }
.buehne .symbol { font-size: 3.2rem; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.buehne h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.buehne .wann { font-size: 1.05rem; font-weight: 600; margin: 0; }

/* Knöpfe */
.knopf, button {
  font: inherit; cursor: pointer; border: 0; border-radius: 12px;
  background: var(--akzent); color: var(--akzent-text); padding: 11px 18px; min-height: 44px;
  font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.knopf:hover, button:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(16,24,40,.12); }
.knopf:active, button:active { transform: translateY(1px); }
.knopf.gross { padding: 14px 24px; font-size: 1.05rem; border-radius: 14px; }
.knopf.zweit, button.zweit { background: var(--karte); color: var(--akzent); border: 1px solid var(--linie); }
.knopf.gefahr, button.gefahr { background: #B42318; color: #fff; }
.knopf.whatsapp { background: #25D366; color: #fff; }
button.klein, .knopf.klein { padding: 6px 12px; min-height: 34px; font-size: .85rem; font-weight: 550; border-radius: 10px; }
.leise-knopf { background: transparent; color: var(--leise); border: 1px solid var(--linie); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.aktionen form { margin: 0; }
form.inline { display: inline; margin: 0; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
input, textarea, select {
  font: inherit; width: 100%; margin-top: 6px; padding: 11px 14px;
  border: 1px solid var(--linie); border-radius: 12px; background: #fff; color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }
input:user-invalid { border-color: #C92A2A; box-shadow: 0 0 0 4px #FFE3E3; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.haken { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; text-align: left; }
.haken input { margin-top: 4px; }
.zeile-zwei { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.zeile-zwei input, .zeile-zwei select { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }

/* Kopf der Verwaltung */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10; padding: 12px max(16px, calc((100% - 760px) / 2 + 16px));
  background: rgba(217,232,247,.88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(30,39,48,.06); }
.marke { text-decoration: none; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.nav a { font-weight: 600; text-decoration: none; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; max-width: 760px; margin: 12px auto 0; padding: 0 16px; }
.reiter a { padding: 6px 12px; border-radius: 999px; text-decoration: none; background: var(--karte);
  border: 1px solid var(--linie); color: var(--text); font-weight: 600; font-size: .9rem; }
.reiter a.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.unter-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 16px; padding: 4px; font-weight: 600; font-size: .92rem;
  background: rgba(30,39,48,.05); border-radius: 14px; width: fit-content; max-width: 100%; }
.unter-nav a { text-decoration: none; color: var(--leise); padding: 7px 12px; border-radius: 10px; }
.unter-nav a.aktiv { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgba(16,24,40,.1); }

/* Labels */
.label { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: #fff; background: var(--lf, #2A8C82); margin: 2px 4px 2px 0; text-decoration: none; }
.label.aus { background: transparent; color: var(--lf, #2A8C82); border: 1px solid var(--lf, #2A8C82); }
.label-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.label-wahl label { margin: 0; font-weight: 500; }
.label-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.label-wahl span { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--lf);
  color: var(--lf); cursor: pointer; font-weight: 600; font-size: .85rem; }
.label-wahl input:checked + span { background: var(--lf); color: #fff; }
.label-wahl input:focus-visible + span { outline: 2px solid var(--text); }
.filter { margin: 0 0 12px; }

/* Wünsche */
.wunsch { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.wunsch.ohne-bild { grid-template-columns: 1fr; }
.wunsch img { width: 84px; height: 84px; object-fit: contain; border-radius: 14px; background: #fff;
  border: 1px solid var(--linie); }
.wunsch-symbol { width: 100%; aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; font-size: 2.4rem;
  background: linear-gradient(135deg, var(--butter-hell), var(--babyblau)); }
.wunsch h3 { margin: 0 0 2px; overflow-wrap: anywhere; }
.wunsch .daten { font-size: .9rem; color: var(--leise); }
.wunsch .notiz { white-space: pre-line; font-size: .92rem; margin-top: 4px; }
.wichtig { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid var(--akzent); background: conic-gradient(var(--akzent) var(--anteil, 50%), #fff 0); }
.status-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.status-chip.gekauft { background: #D3F0DB; color: #1E7A4E; }
.status-chip.reserviert { background: #FFF1C2; color: #8A6100; }
.status-chip.nach-party { background: var(--akzent-hell); color: var(--text); }
.wunsch.vergeben { opacity: .6; }
.neu-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.neu-link input { margin: 0; }
details.besorgen > summary { list-style: none; cursor: pointer; }
details.besorgen > summary::-webkit-details-marker { display: none; }
details.besorgen form { display: grid; gap: 8px; margin-top: 10px; }
.art-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.art-wahl label { flex: 1; min-width: 140px; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px;
  display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 500; }
.box-eigene { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.box-eigene .symbol { font-size: 1.8rem; }
.link-zeile { display: flex; gap: 6px; align-items: center; }
.link-zeile input { margin: 0; font-size: .82rem; font-family: ui-monospace, Menlo, monospace; }

/* Design-Auswahl */
.design-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.design-option { margin: 0; font-weight: 500; }
.design-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.design-option span { display: inline-block; padding: 8px 12px; border-radius: 999px; color: var(--buehne-text, #fff);
  background: var(--muster), var(--buehne); background-size: 60px 60px, auto; border: 3px solid transparent; cursor: pointer; }
.design-option input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }
.design-option input:focus-visible + span { outline: 2px solid var(--text); }

/* Tabellen (Haupt-Konto) */
.tabelle-karte { padding: 0; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { font-size: .78rem; text-transform: uppercase; color: var(--leise); }

/* Startseite */
.start-kopf { text-align: center; }
.schritte { margin: 0; padding-left: 1.2em; }
.schritte li { margin-bottom: 8px; }
.vorteile { list-style: none; padding: 0; margin: 0; }
.vorteile li { margin-bottom: 8px; }

.fuss { text-align: center; padding: 20px 16px 28px; font-size: .85rem; }
.fuss a { color: var(--leise); }

@media (max-width: 560px) {
  .zwei-spalten, .zeile-zwei, .neu-link { grid-template-columns: 1fr; gap: 8px; }
  .wunsch { grid-template-columns: 64px 1fr; }
  .wunsch img { width: 64px; height: 64px; }
}
@media print { .nicht-drucken, .fuss { display: none !important; } body { background: #fff; }
  .karte { box-shadow: none; break-inside: avoid; } .buehne { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Beispiel-Wünsche auf der leeren Liste */
.wunsch.beispiel { opacity: .6; border-style: dashed; }
.beispiel-bild { width: 100%; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, var(--butter-hell), var(--babyblau)); display: grid;
  place-items: center; font-size: 2.4rem; }
.beispiel-chip { background: var(--linie); color: var(--text); }
details.beschreibung { font-size: .92rem; margin-top: 4px; }
details.beschreibung summary { cursor: pointer; color: var(--akzent); }

/* Label-Chips an jedem Wunsch: antippen = zuordnen/entfernen */
.label-schalter { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; align-items: center; }
.label-schalter form { margin: 0; }
.label-schalter button.label { padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; margin: 0;
  border: 1px solid var(--lf, #2A8C82); min-height: 28px; }
.label-schalter button.label.aus { background: transparent; color: var(--lf, #2A8C82); border-style: dashed; }
.label-schalter a.label { margin: 0; padding: 3px 10px; line-height: 20px; }

/* Symbol-Wahl (Gutscheine) und Ideen beim neuen Wunsch */
.symbol-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.symbol-wahl label { margin: 0; }
.symbol-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.symbol-wahl span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.3rem;
  border: 2px solid var(--linie); background: #fff; cursor: pointer; }
.symbol-wahl input:checked + span { border-color: var(--akzent); background: var(--akzent-hell); }
.symbol-wahl input:focus-visible + span { outline: 3px solid var(--akzent); }
.ideen { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.ideen-titel { font-weight: 650; font-size: .92rem; margin-bottom: 8px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 8px; }
.ideen-titel::-webkit-details-marker { display: none; }
.ideen-titel::after { content: "▾"; color: var(--akzent); }
.ideen[open] .ideen-titel::after { content: "▴"; }
.ideen:not([open]) .ideen-titel { margin-bottom: 0; }
.ideen-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.idee { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: .85rem;
  font-weight: 550; text-decoration: none; color: var(--text); background: var(--butter-hell); border: 1px solid #F3E2A0; }
.idee:hover { background: var(--butter); }
.idee.eigene { background: transparent; border-style: dashed; color: var(--leise); }

/* ---------- Startseite ---------- */
.seite-start { background: var(--grund); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--gold-text); margin-bottom: 10px; }
.start-buehne { color: var(--text); padding: 0 16px 56px; overflow: hidden;
  background: radial-gradient(900px 420px at 90% 0%, rgba(255,236,160,.95), transparent 60%),
              radial-gradient(700px 420px at 0% 100%, rgba(184,212,242,.95), transparent 60%),
              linear-gradient(160deg, #C9DFF5 0%, #D9E8F7 55%, #FFF2C2 100%); }
.start-nav { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.start-nav .marke { color: var(--text); }
.start-nav a { color: var(--akzent); font-weight: 650; text-decoration: none; padding: 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,.7); border: 1px solid var(--linie); }
.start-held { max-width: 1080px; margin: 0 auto; padding: 36px 0 28px; }
.start-held h1 { font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; margin: 0 0 18px; }
.start-held .hervor { color: var(--akzent); }
.unterzeile { font-size: clamp(1.05rem, 2.4vw, 1.2rem); max-width: 620px; color: var(--leise); margin-bottom: 24px; }
.held-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf.hell { background: #fff !important; color: var(--akzent); border: 1px solid var(--linie); }
.vorschau-karten { max-width: 1080px; margin: 12px auto 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mini-karte { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 16px; background: #fff; color: var(--text); box-shadow: 0 8px 24px rgba(34,48,63,.08); }
.mini-karte strong { display: block; font-size: .92rem; line-height: 1.25; }
.mini-karte small { color: var(--leise); }
.mini-bild { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--butter-hell), var(--babyblau)); }
.mini-chip { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mini-chip.reserviert { background: #FFF1C2; color: #8A6100; }
.mini-chip.frei { background: var(--akzent-hell); color: #23558C; }
.mini-chip.gekauft { background: #E9ECEF; color: #5B7083; }
.start { max-width: 1080px; margin: 0 auto; padding: 8px 16px 24px; }
.abschnitt { padding: 44px 0 8px; }
.abschnitt > h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); text-align: center; margin-bottom: 22px; }
.raster { display: grid; gap: 14px; }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .raster.drei { grid-template-columns: 1fr; } }
.raster .karte { margin: 0; }
.problem .gross-symbol { font-size: 2.2rem; }
.schritte-karten .nummer { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--akzent); color: #fff; font-weight: 800; margin-bottom: 10px; }
.vorzug-symbol { font-size: 1.6rem; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--butter-hell), var(--babyblau)); margin-bottom: 10px; }
.zeit-statt-zeug .zweispaltig { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center; background: linear-gradient(135deg, var(--butter-hell), #FFFDF5 50%, var(--babyblau)); border-radius: 28px; padding: 28px; }
.zeit-statt-zeug h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.ideen-wolke { display: flex; flex-wrap: wrap; gap: 8px; }
.ideen-wolke span { background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .92rem;
  box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.fragen { max-width: 760px; margin: 0 auto; }
.fragen details { padding: 0; }
.fragen summary { cursor: pointer; padding: 16px 18px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--akzent); font-weight: 800; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 18px 16px; margin: 0; color: var(--leise); }
.schluss { text-align: center; padding-bottom: 32px; }

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

/* Zwei Wege zum neuen Wunsch: Shop-Link und Gutschein – gleich präsent */
.neu-wege { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
.neu-wege .karte { margin: 0; }
.weg-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.weg-kopf h2 { font-size: 1.1rem; margin: 0 0 2px; }
.weg-kopf p { margin: 0; }
.weg-kopf > div { min-width: 0; }
.neu-weg { min-width: 0; overflow: hidden; }
.weg-symbol { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--akzent-hell); }
.gutschein-weg { background: linear-gradient(160deg, var(--butter-hell), #fff 70%); border-color: #F3E2A0; }
.gutschein-weg .weg-symbol { background: var(--butter); }
.gutschein-weg .ideen-liste { margin-bottom: 12px; }
.gutschein-knopf { width: 100%; }
@media (max-width: 760px) {
  .neu-wege { grid-template-columns: minmax(0, 1fr); }
  .gutschein-weg .ideen-liste { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity;
    margin-right: -18px; padding-right: 18px; }
  .gutschein-weg .idee { flex: none; scroll-snap-align: start; }
}

/* Gutschein-Karte: bunt und verspielt (Konfetti, jede Idee eigene Pastellfarbe) */
.gutschein-weg {
  background:
    radial-gradient(circle at 12% 18%, #F9B4C6 0 4px, transparent 5px),
    radial-gradient(circle at 88% 12%, #9FD3F5 0 5px, transparent 6px),
    radial-gradient(circle at 78% 82%, #B9E7C9 0 4px, transparent 5px),
    radial-gradient(circle at 30% 92%, #CDB9F5 0 3px, transparent 4px),
    radial-gradient(circle at 95% 50%, #FFD59E 0 4px, transparent 5px),
    linear-gradient(160deg, #FFF6D6, #FFFBEA 45%, #FDEFF4);
  border: 2px dashed #F3D36B;
}
.gutschein-weg .weg-symbol { background: #FFE38A; transform: rotate(-8deg); font-size: 1.7rem; }
.gutschein-weg .idee { border-width: 0; box-shadow: 0 2px 6px rgba(34,48,63,.08); padding: 7px 13px;
  transition: transform .15s ease, box-shadow .15s ease; }
.gutschein-weg .idee:hover, .gutschein-weg .idee:focus-visible { transform: rotate(-2deg) scale(1.05);
  box-shadow: 0 4px 12px rgba(34,48,63,.14); }
.idee-symbol { font-size: 1.15rem; }
.idee.bunt-0 { background: #FFE9A8; } .idee.bunt-1 { background: #FAD4DE; } .idee.bunt-2 { background: #CDEFD9; }
.idee.bunt-3 { background: #E0D6FA; } .idee.bunt-4 { background: #D3E8FB; } .idee.bunt-5 { background: #FFDCC5; }
.gutschein-knopf { background: linear-gradient(90deg, #F8A5BB, #FBC98C); color: #4A1626; }

/* Gästeseite: „Eigene Liste anlegen“ – oben eine Zeile, unten eine große bunte Karte */
.eigene-zeile { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px;
  text-decoration: none; color: #4A1626; font-size: .95rem;
  background: linear-gradient(90deg, #FDE2EA, #FFF0C8); border: 1px solid #F6CFA0; }
.eigene-zeile .pfeil { margin-left: auto; font-weight: 800; }
.eigene-zeile:hover { filter: brightness(1.03); }
.eigene-werbung { text-align: center; margin-top: 28px; padding: 26px 20px; border: 2px dashed #F3D36B;
  background:
    radial-gradient(circle at 10% 15%, #F9B4C6 0 5px, transparent 6px),
    radial-gradient(circle at 90% 10%, #9FD3F5 0 6px, transparent 7px),
    radial-gradient(circle at 85% 85%, #B9E7C9 0 5px, transparent 6px),
    radial-gradient(circle at 15% 88%, #CDB9F5 0 4px, transparent 5px),
    linear-gradient(160deg, #FFF6D6, #FFFFFF 50%, #FDEFF4); }
.eigene-symbole { font-size: 2.4rem; letter-spacing: 6px; margin-bottom: 6px; }
.eigene-werbung h2 { font-size: 1.5rem; }
.eigene-werbung em { font-style: normal; color: #D14E78; }
.eigene-vorteile { list-style: none; padding: 0; margin: 12px auto 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.eigene-vorteile li { background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .9rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(34,48,63,.08); }
.eigene-knopf { background: linear-gradient(90deg, #F8A5BB, #FBC98C); color: #4A1626; }

.symbol-gruppe { font-size: .8rem; font-weight: 700; color: var(--leise); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }

.herz-knopf { margin: -4px 0 10px; }
.preis.herz { color: #C2255C; }

.symbol-eigen { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.symbol-eigen-feld { margin: 0; font-size: .85rem; }
.symbol-eigen-feld input { width: 120px; font-size: 1.4rem; text-align: center; padding: 6px 10px; margin-top: 4px; }
.symbol-eigen-feld input::placeholder { opacity: .3; }

/* Anleitung */
.inhaltsverzeichnis { display: flex; flex-wrap: wrap; gap: 6px; }
.inhaltsverzeichnis a { padding: 6px 12px; border-radius: 999px; background: var(--akzent-hell); text-decoration: none;
  font-weight: 600; font-size: .88rem; color: #23558C; }
.anleitung section { scroll-margin-top: 80px; }
.anleitung ol, .anleitung ul { padding-left: 1.2em; margin: 0 0 .6em; }
.anleitung li { margin-bottom: 6px; }
.anleitung-wege { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }
.anleitung-wege > div { background: var(--babyblau); border-radius: 14px; padding: 12px 14px; }
.anleitung-wege h3 { margin-bottom: 6px; }
@media (max-width: 600px) { .anleitung-wege { grid-template-columns: minmax(0, 1fr); } }
.anleitung-hinweis { display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; text-decoration: none;
  background: var(--butter-hell); border: 1px solid #F3E2A0; color: var(--text); }

/* ---------- Anlass-Seiten (für Suchmaschinen) ---------- */
.seite-anlass { background: var(--grund); }
.anlass-pfad { font-size: .85rem; margin-bottom: 14px; opacity: .85; }
.anlass-pfad a { color: inherit; font-weight: 650; }
.anlass .karte { margin-bottom: 14px; }
.anlass .ideen-wolke span { border: 1px solid var(--linie); }
.anlass .fragen details { border-top: 1px solid var(--linie); }
.anlass-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.anlass-kacheln { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 1080px; margin: 0 auto; }
.anlass-kacheln a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  text-decoration: none; color: var(--text); background: var(--buehne); }
.anlass-kacheln a strong { color: var(--buehne-text); }
.anlass-kacheln a:hover { transform: translateY(-2px); }