/* Vasengenerator (Michael, 27.10.2026) – Farben wie die übrige Seite (Sand/Braun/Rot), Vorschau auf warmem Verlauf */
.vg-kopf p { max-width: 640px; margin-left: auto; margin-right: auto; }
.vg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.vg-buehne-box {
  position: sticky; top: 76px; border-radius: 26px; overflow: hidden; min-height: 420px;
  background: radial-gradient(120% 90% at 50% 20%, #fff7e6 0%, #f1dfc0 55%, #e3c9a4 100%);
  border: 1px solid #e0c79f; box-shadow: var(--shadow-media, 0 12px 26px rgba(60, 35, 15, .16));
}
.vg-buehne { display: block; width: 100%; height: min(64vh, 600px); min-height: 420px; cursor: grab; touch-action: pan-y; outline-offset: -4px; }
.vg-buehne:active { cursor: grabbing; }
.vg-ohne { margin: 18px; padding: 14px 16px; border-radius: 14px; background: #fbeed9; border: 1px solid #e6cfa6; color: #4a2f10; font-size: 15px; }
.vg-tipp { position: absolute; top: 12px; left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; color: #7a6246; pointer-events: none; }
.vg-maße { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 14px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 600; color: #3c2a1c; background: rgba(253, 246, 232, .88); backdrop-filter: blur(4px); }

.vg-regeln { display: flex; flex-direction: column; gap: 16px; }
.vg-karte { padding: 18px 20px 16px; border-radius: 20px; background: #fbf3e4; border: 1px solid #e6cfa6; box-shadow: 0 4px 14px rgba(60, 35, 15, .06); }
.vg-karte h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 22px; letter-spacing: .5px; color: var(--ink, #3c2a1c); display: flex; align-items: center; gap: 10px; }
.vg-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red, #7b1a12); color: #fdf1dc; font-size: 15px; }

.vg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-chip { min-height: 44px; padding: 0 16px; border: 1.5px solid #2b2620; border-radius: 999px; background: #fbf3e4; color: #2b2620; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s, background .15s; }
.vg-chip:hover { background: #e3c9a4; transform: translateY(-1px); }
.vg-chip-zufall { background: #2b2620; color: #fff; }
.vg-chip-zufall:hover { background: var(--red, #7b1a12); }

.vg-regler { margin-bottom: 14px; }
.vg-regler:last-child { margin-bottom: 0; }
.vg-regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vg-regler-kopf label { font-weight: 700; color: var(--ink, #3c2a1c); }
.vg-regler-kopf output { font-weight: 700; color: var(--red, #7b1a12); font-variant-numeric: tabular-nums; }
.vg-hilfe { margin: 2px 0 0; font-size: 13.5px; color: #6b5a47; }
.vg-warn { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #fbeed9; border: 1px solid #e6cfa6; font-size: 14px; color: #4a2f10; }

.vg input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 4px 0 0; background: transparent; cursor: pointer; --fuell: 50%; }
.vg input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--red, #7b1a12) var(--fuell), #e0c79f var(--fuell)); }
.vg input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: #e0c79f; }
.vg input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--red, #7b1a12); }
.vg input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fdf6e8; border: 3px solid var(--red, #7b1a12); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.vg input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fdf6e8; border: 3px solid var(--red, #7b1a12); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.vg input[type="range"]:focus-visible { outline: 2px solid var(--red, #7b1a12); outline-offset: 2px; border-radius: 8px; }

.vg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vg-wahl-farbe { grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
.vg-opt { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 12px; border: 2px solid #e0c79f; border-radius: 16px; background: #fffaf0; color: var(--ink, #3c2a1c); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.vg-opt b { font-size: 16px; }
.vg-opt span { font-size: 12.5px; color: #6b5a47; line-height: 1.25; }
.vg-opt:hover { border-color: #c9a67c; transform: translateY(-1px); }
.vg-opt[aria-pressed="true"] { border-color: var(--red, #7b1a12); background: #fff; box-shadow: 0 0 0 3px rgba(123, 26, 18, .12); }

.vg-farbzeile { margin-top: 12px; }
.vg-farbzeile[hidden] { display: none; }
.vg-farbkopf { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.vg-farbkopf span { color: #6b5a47; font-weight: 600; }
.vg-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-farbe { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid rgba(60, 35, 15, .25); background: var(--c); cursor: pointer; transition: transform .12s; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .12); }
.vg-farbe:hover { transform: scale(1.12); }
.vg-farbe[aria-pressed="true"] { border-color: var(--red, #7b1a12); box-shadow: 0 0 0 3px #fdf6e8, 0 0 0 5px var(--red, #7b1a12); }
.vg-farbe:focus-visible { outline: 2px solid var(--red, #7b1a12); outline-offset: 3px; }

.vg-preis-karte { background: #f1dfc0; border-color: #e0c79f; }
.vg-preis { display: flex; justify-content: space-between; align-items: baseline; }
.vg-preis span { font-weight: 700; color: var(--ink, #3c2a1c); }
.vg-preis b { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--red, #7b1a12); }
.vg-preiszeile { margin: 2px 0 12px; font-size: 14px; color: #5c5348; }
.vg-anfragen { display: block; width: 100%; text-align: center; padding: 15px 18px; font-size: 18px; box-sizing: border-box; }
.vg-link { display: block; margin: 10px auto 0; padding: 8px; border: 0; background: none; color: var(--ink, #3c2a1c); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.vg-info { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; color: #5c5348; }
.vg-info li { margin-bottom: 4px; }
.vg-edit { margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; border: 1px dashed #a1795a; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 14px; }
.vg-edit small { color: #6b5a47; }

.vg-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(42, 26, 16, .96); color: #fdf1dc; }
.vg-leiste-preis { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.vg-leiste .btn { margin: 0; }

@media (max-width: 880px) {
  .vg { grid-template-columns: 1fr; gap: 16px; }
  .vg-buehne-box { position: sticky; top: 56px; z-index: 5; min-height: 0; border-radius: 20px; }
  .vg-buehne { height: 40vh; min-height: 260px; }
  .vg-tipp { display: none; }
  .vg-maße { font-size: 12.5px; padding: 6px 10px; bottom: 8px; }
  .vg-leiste:not([hidden]) { display: flex; }
  .vg-seite { padding-bottom: 80px; }
  .vg-wahl-farbe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .vg-karte { padding: 16px 14px 14px; }
  .vg-farbe { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .vg * { transition: none !important; } }

/* Hinweis-Karte in der Rubrik Vasen (galerie.php) */
.vg-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 22px; margin: 0 auto 26px; max-width: 980px; padding: 18px 22px; border-radius: 22px; color: #fdf1dc; background: linear-gradient(120deg, #2a1a10 0%, #4a2a18 60%, #7b1a12 130%); box-shadow: 0 10px 24px rgba(60, 35, 15, .22); }
.vg-banner b { display: block; font-family: var(--font-display); font-size: 26px; letter-spacing: .4px; line-height: 1.15; }
.vg-banner span { display: block; margin-top: 3px; font-size: 15px; color: #f0dfc4; }
.vg-banner .btn { margin: 0; white-space: nowrap; background: #fdf6e8; color: #2a1a10; }
.vg-banner .btn:hover { background: #e3c9a4; color: #2a1a10; }

/* Mehrfarbig = schimmerndes Regenbogen-Filament (Michael, 27.10.2026) */
.vg-farbe.vg-regenbogen { background: conic-gradient(from 20deg, #ff5d5d, #ffb13d, #f4e04a, #5fd16a, #3fb6e8, #7b6cf0, #d86be0, #ff5d5d); }

/* Bestellformular direkt im Generator (Michael, 04.11.2026) – wie beim Weihnachtskugel-Generator */
.vg-formular { display: grid; gap: 12px; }
.vg-formular p { margin: 0; }
.vg-feld { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--ink, #3c2a1c); }
.vg-feld input, .vg-feld textarea { font: inherit; font-weight: 400; font-size: 17px; padding: 10px 12px; border: 1.5px solid var(--tan-input, #d6bd9a); border-radius: 12px; background: #fff; color: var(--ink, #3c2a1c); width: 100%; box-sizing: border-box; }
.vg-feld input[type="number"] { max-width: 120px; }
.vg-feld input:focus, .vg-feld textarea:focus { outline: none; border-color: var(--red, #7b1a12); box-shadow: 0 0 0 3px rgba(123, 26, 18, .12); }
.vg-haken { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink, #3c2a1c); cursor: pointer; line-height: 1.45; }
.vg-haken input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--red, #7b1a12); }
.vg-summe { font-weight: 700; color: var(--red, #7b1a12); }
.vg-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vg-meldung { padding: 12px 14px; border-radius: 12px; background: #eef6ec; color: #2d5a27; font-weight: 600; }
.vg-meldung.ist-fehler { background: #fdecea; color: #8e1f1f; }
.vg-formular .btn[disabled] { opacity: .5; cursor: not-allowed; }
.vg-formular p a { text-decoration: underline; text-underline-offset: 2px; }
.vg-bestellen { scroll-margin-top: 90px; }