/* Zug-Konfiguratoren (Geburtstag, Weihnachten) im Stil der Weihnachtswerkstatt (_wichtel.html). */
.zg{--zg-akzent:#B4414A;--zg-akzent-tief:#8E2F37;--zg-akzent-hell:#FBEDEE;--zg-tanne:#2F6E52;--zg-muted:#5E6B6A;--zg-soft:#8A9695;--zg-gold:#C09A52;
  padding-top:28px;padding-bottom:48px;max-width:1180px}
.zg.zg-geburtstag{--zg-akzent:#D04E7E;--zg-akzent-tief:#A23560;--zg-akzent-hell:#FDEEF4}
.zg-zurueck{font-size:.9rem}
.zg-kopf{margin:14px 0 18px}
.zg-eyebrow{display:inline-block;background:var(--zg-akzent-hell);color:var(--zg-akzent-tief);border-radius:var(--r-full,999px);padding:4px 12px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.zg-kopf h1{margin:0 0 6px}
.zg-kopf p{margin:0;color:var(--zg-muted);max-width:720px}
.zg-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.zg-raster>div{min-width:0}
@media(min-width:960px){.zg-raster{grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);gap:32px;align-items:start}.zg-links{position:sticky;top:16px}}
.zg-buehne{position:relative;background:radial-gradient(120% 80% at 50% 30%,#FFFFFF 0%,#F4F9F8 55%,#E9F3F1 100%);border:1px solid var(--line,#E3E8E7);border-radius:22px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:44px 14px 10px;overflow:hidden}
.zg-canvas-wrap{display:flex;justify-content:center;align-items:center;min-height:160px}
#zg-canvas{width:100%;height:auto;max-height:440px;object-fit:contain;cursor:pointer;touch-action:manipulation;opacity:0;transition:opacity .25s}
.zg-bereit #zg-canvas{opacity:1}
.zg-tipp{position:absolute;left:12px;top:12px;font-size:.74rem;color:var(--zg-muted);background:rgba(255,255,255,.85);border-radius:999px;padding:5px 10px;border:1px solid var(--line,#E3E8E7)}
.zg-boden{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.74rem;color:var(--zg-soft);padding-top:6px}
.zg-boden button{white-space:nowrap;border:1px solid var(--line,#E3E8E7);background:#fff;border-radius:999px;font:inherit;font-weight:700;font-size:.78rem;color:var(--zg-muted);padding:7px 12px;cursor:pointer}
.zg-boden button:hover{border-color:var(--mint-deep,#5FB3AA);color:var(--zg-tanne)}
.zg-design{font-size:.74rem;color:var(--zg-soft);text-align:center;margin-top:6px}
.zg-schritt{font-weight:800;font-size:1rem;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.zg-schritt span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--zg-akzent);color:#fff;font-size:.8rem}
.zg-block{background:#fff;border:1px solid var(--line,#E3E8E7);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.04);margin-bottom:14px}
.zg-wagenliste{display:grid;gap:8px}
.zg-wagen{border:1px solid var(--line,#E3E8E7);border-radius:12px;padding:10px 12px;background:#FCFDFD}
.zg-wagen-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.zg-wagen-kopf b{font-size:.92rem}
.zg-zu{padding:8px 12px}.zg-zu .zg-wagen-kopf{margin:0}.zg-zu .zg-wagen-kopf b{font-weight:600;color:var(--zg-muted)}
.zg-wagen-kopf button{border:0;background:none;color:var(--zg-soft);font:inherit;font-size:.8rem;cursor:pointer;padding:4px 6px}
.zg-wagen-kopf button:hover{color:var(--zg-akzent-tief)}
.zg-pillen{display:flex;gap:6px;flex-wrap:wrap}
.zg-pillen+.zg-pillen{margin-top:6px}
.zg-pille{border:1px solid var(--line,#E3E8E7);background:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:.78rem;font-weight:700;color:var(--zg-muted);cursor:pointer}
.zg-pille[aria-pressed="true"]{background:var(--zg-tanne);border-color:var(--zg-tanne);color:#fff}
.zg-ziffern{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.zg-ziffer{width:30px;height:30px;border:1px solid var(--line,#E3E8E7);background:#fff;border-radius:8px;font:inherit;font-weight:800;cursor:pointer;color:var(--zg-muted)}
.zg-ziffer[aria-pressed="true"]{background:var(--zg-akzent);border-color:var(--zg-akzent);color:#fff}
.zg-mehr{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.zg-mehr button{border:1px dashed var(--mint-deep,#5FB3AA);background:#F3FBFA;border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;font-size:.84rem;color:var(--zg-tanne);cursor:pointer}
.zg-mehr button:disabled{opacity:.45;cursor:not-allowed}
.zg-ideen{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.zg-idee{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line,#E3E8E7);background:#fff;border-radius:999px;padding:6px 12px 6px 6px;font:inherit;font-size:.82rem;font-weight:700;color:var(--zg-muted);cursor:pointer}
.zg-idee:hover{border-color:var(--mint-deep,#5FB3AA)}
.zg-mini{display:flex}
.zg-mini i{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;margin-left:-5px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.zg-mini i:first-child{margin-left:0}
.zg-zonen{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px}
@media(min-width:960px){.zg-zonen{flex-wrap:wrap;overflow:visible}}
.zg-zone{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:2px solid var(--line,#E3E8E7);background:#fff;border-radius:12px;padding:8px 11px;font:inherit;font-size:.86rem;font-weight:700;color:var(--ink,#22302F);cursor:pointer}
.zg-zone i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.zg-zone[aria-pressed="true"]{border-color:var(--zg-akzent);background:var(--zg-akzent-hell)}
.zg-farben{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:8px;margin-top:6px}
.zg-farbe{position:relative;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);padding:0}
.zg-farbe[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--zg-akzent)}
.zg-plus{position:absolute;right:-4px;top:-5px;background:var(--zg-gold);color:#fff;font-size:.58rem;font-weight:800;border-radius:6px;padding:1px 3px}
.zg-farbname{margin-top:10px;font-size:.84rem;color:var(--zg-muted);min-height:1.2em}
.zg-farbname b{color:var(--ink,#22302F)}
.zg-kasse{display:grid;gap:10px}
.zg-zeile{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--zg-muted)}
.zg-summe{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line,#E3E8E7);padding-top:10px}
.zg-summe b{font-size:1.5rem;color:var(--ink,#22302F)}
.zg-summe small{color:var(--zg-soft);font-size:.75rem}
.zg-menge{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--zg-muted)}
.zg-menge input{width:64px;padding:8px;border:1px solid var(--line,#E3E8E7);border-radius:8px;font:inherit}
.zg-kaufen{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;border:0;border-radius:999px;padding:14px 22px;background:var(--zg-akzent);color:#fff;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 8px 22px rgba(180,65,74,.22)}
.zg-kaufen:hover{background:var(--zg-akzent-tief)}
.zg-kaufen:disabled{opacity:.6;cursor:not-allowed}
.zg-folgt{background:#FFF8E6;border:1px solid #F3DFA6;border-radius:12px;padding:10px 12px;font-size:.86rem;color:#6B4A0E}
.zg-klein{font-size:.78rem;color:var(--zg-muted);line-height:1.55;margin:0}
.zg-fehler{color:#A3262F;font-size:.86rem;margin:0}
.zg-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#22302F;color:#fff;border-radius:12px;padding:11px 16px;font-size:.86rem;opacity:0;transition:.25s;pointer-events:none;max-width:92vw;z-index:50}
.zg-toast.zg-an{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.zg-toast,#zg-canvas{transition:none}}
.zg-lokwahl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.zg-anreiz{margin-top:12px;font-size:.86rem;color:var(--zg-muted)}
.zg-anreiz p{margin:0}
.zg-anreiz-fast{background:linear-gradient(135deg,#FFF6DA 0%,#FFEFD0 100%);border:1px solid #F0C75E;border-radius:14px;padding:12px 14px;color:#5A3F08;box-shadow:0 6px 18px rgba(240,199,94,.25)}
.zg-anreiz-aktiv{background:#EAF7F1;border:1px solid #BFE3D2;border-radius:14px;padding:10px 14px;color:var(--zg-tanne)}
.zg-anreiz-knopf{margin-top:10px;border:0;border-radius:999px;padding:10px 16px;background:var(--zg-akzent);color:#fff;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 6px 16px rgba(180,65,74,.22)}
.zg-anreiz-knopf:hover{background:var(--zg-akzent-tief)}
@media (prefers-reduced-motion: no-preference){.zg-anreiz-fast{animation:zg-wink 2.4s ease-in-out 1}}
@keyframes zg-wink{0%,100%{transform:none}10%{transform:scale(1.02)}20%{transform:none}}
