/* Gutschein-Seite /gutschein + /en/voucher (Karte 1082, 04.10.2026, Martin: „wie die Gutschein-Seite bei den
   Design-Horoskopen“). Automatisch gezogener Auszug aus designhoroskope build/web/rechner.css — alle Regeln mit
   .dh-gs-*, .dh-gm-band/-text/-cta/-button/-handy/-sektion und a.dh-gme-los samt @media (Werkzeug
   build/k1082/css_auszug.py). Ändert sich die DH-Seite, den Auszug neu ziehen statt hier von Hand nachzubauen:
     python3 build/k1082/css_auszug.py gutschein ../designhoroskope/build/web/rechner.css > build/k1082/dh-gutschein-auszug.css
   und den Block unter „Auszug“ ersetzen. Eigene Ergänzungen für astrovitalis stehen ganz unten.
   Geladen nur von /gutschein (build_pages.py::page_gutschein, admin_assets(..., css=...)). */

/* ── Auszug designhoroskope rechner.css (Stand 04.10.2026) ─────────────────────────────────────────── */
.dh-gs.uk-card-body { padding: 28px 24px; }
.dh-gs-schritt { display: flex; gap: 18px; padding: 26px 0; border-top: 1px solid #ece4d8; }
.dh-gs-schritt:first-child { border-top: 0; padding-top: 4px; }
.dh-gs-nr { flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #C98A4B, #9A5F2A);
  color: #fff; font: 700 22px/44px 'Playfair Display', Georgia, serif; text-align: center; box-shadow: 0 2px 6px rgba(154,95,42,.3); }
.dh-gs-inhalt { flex: 1; min-width: 0; }
.dh-form .dh-gs-h, .dh-gs-h { margin: 6px 0 4px; font-size: 22px; font-weight: 700; color: #1A2A6C; font-family: 'Nunito Sans', system-ui, sans-serif; }
.dh-gs-h4 { margin: 24px 0 2px; font-size: 17px; font-weight: 700; color: #1A2A6C; font-family: 'Nunito Sans', system-ui, sans-serif; }
.dh-gs-sub { margin: 0 0 14px; font-size: 14px; color: #5a6275; }
.dh-form label.dh-gs-karte, .dh-gs-karte { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; border: 1.5px solid #e5ddd2;
  border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 400; color: #333; transition: border-color .15s, background .15s; }
.dh-gs-karte:has(input:checked) { border-color: #E8731A; background: #FFF9F3; box-shadow: 0 2px 10px rgba(232,115,26,.12); }
.dh-gs-karte > .uk-radio { flex: none; margin-top: 3px; }
.dh-gs-karte > img { flex: none; }
.dh-gs-karte-text { flex: 1; min-width: 0; }
.dh-gs-karte strong { color: #1A2A6C; font-weight: 700; }
.dh-gs-zeile { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.dh-gs-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 17px; }
.dh-gs-preis { font-size: 22px; font-weight: 800; color: #1A2A6C; white-space: nowrap; }
.dh-gs-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.dh-gs-liste li { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; font-size: 14.5px; line-height: 1.4; }
.dh-gs-liste li img { flex: none; margin-top: 1px; }
.dh-gs-liste-gross li { font-size: 15.5px; margin: 8px 0; }
.dh-gs-gratis { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #FBEFE4; font-size: 14px; line-height: 1.35; }
.dh-gs-gratis strong { color: #D2601A !important; font-size: 15.5px; }
.dh-gs-info { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: #F2F5FB; border: 1px solid #e1e7f3; font-size: 14px; color: #1A2A6C; }
.dh-gs-info img { flex: none; margin-top: 2px; }
.dh-gs-info p { margin: 0 0 8px; }
.dh-gs-info p:last-child { margin: 0; }
.dh-gs-arten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dh-gs-unter { display: block; font-size: 14px; color: #5a6275; }
.dh-gs-x { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #444; }
.dh-gs-aufpreis { color: #8E1B3A; white-space: nowrap; margin-left: 4px; }
.dh-gs-art:has(input[value=moment]:checked) { border-color: #8E1B3A; background: #FDF4F5; box-shadow: 0 2px 10px rgba(142,27,58,.12); }
.dh-gs-moment { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: center; margin-top: 18px; padding: 8px 22px 18px;
  border-radius: 14px; background: linear-gradient(135deg, #FDF4F0, #F9E9E4); }
.dh-gs-moment[hidden] { display: none; }
.dh-gs-moment .dh-gs-h4 { color: #8E1B3A; }
.dh-gs-moment-rechts { text-align: center; }
.dh-gs-spruch { margin: 0 0 12px; font: italic 400 26px/1.25 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.dh-gs-mehr { color: #8E1B3A; font-weight: 700; font-size: 14.5px; }
.dh-gs-zahlung { max-width: 560px; }
.dh-gs-summe { margin: 12px 0 0; font-size: 15px; color: #1A2A6C; }
.dh-gs-go { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center; margin-top: 26px; }
.dh-gs-go .uk-button { min-width: 300px; border-radius: 40px; padding: 6px 36px; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.dh-gs-sicher { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: #5a6275; max-width: 260px; }
@media (max-width: 959px) {
  .dh-gs-zeile, .dh-gs-moment { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .dh-gs.uk-card-body { padding: 18px 14px; }
  .dh-gs-schritt { gap: 10px; padding: 22px 0; }
  .dh-gs-nr { width: 34px; height: 34px; font-size: 18px; line-height: 34px; }
  .dh-form .dh-gs-h, .dh-gs-h { font-size: 19px; }
  .dh-gs-arten { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dh-gs-art { flex-direction: column; align-items: center; text-align: center; padding: 14px 10px; gap: 6px; }
  .dh-gs-art .dh-gs-aufpreis { display: block; margin: 2px 0 0; }
  .dh-gs-go .uk-button { min-width: 0; width: 100%; }
  .dh-gs-sicher { max-width: none; justify-content: center; }
  .dh-gs-spruch { font-size: 22px; }
}
.dh-gm-band { display: flex; gap: 22px; align-items: center; padding: 24px 28px; border-radius: 16px; background: linear-gradient(135deg, #FDF4F0 0%, #F8E6E0 100%);
  border: 1px solid #f0d9d1; box-shadow: 0 4px 18px rgba(142,27,58,.08); }
.dh-gm-band > img { flex: none; }
.dh-gm-text { flex: 1; min-width: 0; }
.dh-gm-text h2 { margin: 0 0 4px; font: 700 24px/1.25 'Nunito Sans', system-ui, sans-serif; color: #D2601A; }
.dh-gm-text p { margin: 0 0 8px; color: #1A2A6C; }
.dh-gm-text ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.dh-gm-text li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 15px; color: #1A2A6C; break-inside: avoid; }
.dh-gm-text li img { flex: none; margin-top: 2px; }
.dh-gm-cta { flex: none; text-align: center; width: 250px; }
.dh-gm-cta p { margin: 0 0 12px; font: italic 400 22px/1.25 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.uk-button.dh-gm-button, a.dh-gm-button { display: inline-block; padding: 10px 30px; border-radius: 40px; background: #8E1B3A; color: #fff !important;
  font-weight: 700; font-size: 17px; text-decoration: none !important; box-shadow: 0 3px 10px rgba(142,27,58,.25); }
a.dh-gm-button:hover { background: #74142f; }
@media (max-width: 959px) {
  .dh-gm-band { flex-wrap: wrap; }
  .dh-gm-cta { width: 100%; }
}
@media (max-width: 639px) {
  .dh-gm-band { padding: 18px 16px; gap: 12px; }
  .dh-gm-band > img { width: 40px; height: 40px; }
  .dh-gm-text h2 { font-size: 20px; }
  .dh-gm-text ul { columns: 1; }
}
.dh-gs-go .uk-button.uk-button-secondary { background:#E8731A; border-color:#E8731A; color:#fff; box-shadow:0 4px 12px rgba(232,115,26,.3); }
.dh-gs-go .uk-button.uk-button-secondary:hover { background:#D2601A; border-color:#D2601A; color:#fff; }
.dh-gs-go .uk-button.uk-button-secondary:disabled { opacity:.7; }
@media (max-width: 639px) {
  .dh-gs-schritt { display: block; position: relative; }
  .dh-gs-nr { position: absolute; top: 22px; left: 0; }
  .dh-gs-schritt:first-child .dh-gs-nr { top: 4px; }
  .dh-form .dh-gs-h, .dh-gs-h { padding-left: 44px; min-height: 34px; display: flex; align-items: center; margin-top: 0; }
  .dh-gs-inhalt > .dh-gs-sub { padding-left: 44px; }
  .dh-gs-kopf { font-size: 16px; }
  .dh-gs-preis { font-size: 20px; }
  .dh-gs-karte { padding: 14px 12px; }
  .dh-gm-band > img { display: none; }
}
.dh-gm-handy { flex: none; display: block; height: 220px; width: auto; }
.dh-gm-text ul { columns: 1; }
.uk-section.dh-gm-sektion { padding-bottom: 0 !important; }
.uk-section.dh-gs-shop { padding-top: 40px !important; }
.dh-gs-zeile.dh-gs-zeile-voll { grid-template-columns: 1fr; }
.dh-gs-schritt.dh-gs-schritt-ohne { padding-top: 0; }
.dh-gs-wert { white-space: nowrap; }
.dh-gs-gratis { width: fit-content; max-width: 620px; }
.dh-gs-moment { grid-template-columns: 120px 3fr 2fr; }
.dh-gs-moment .dh-gm-handy { height: auto; width: 120px; margin: 10px 0 0; }
@media (max-width: 959px) {
  .dh-gs-moment { grid-template-columns: 1fr 110px; grid-template-areas: "liste handy" "rechts rechts"; }
  .dh-gs-moment .dh-gm-handy { grid-area: handy; width: 110px; }
  .dh-gs-moment-liste { grid-area: liste; }
  .dh-gs-moment-rechts { grid-area: rechts; }
}
@media (max-width: 639px) {
  .dh-gm-band { align-items: flex-start; }
  .dh-gm-band > .dh-gm-handy { display: block; height: auto; width: 84px; }
  .dh-gs-wert { display: block; }
  .dh-gs-moment { grid-template-columns: 1fr 86px; gap: 10px; padding: 8px 14px 16px; }
  .dh-gs-moment .dh-gm-handy { width: 86px; margin-top: 24px; }
  .dh-gs-liste-gross li { font-size: 14.5px; }
}
.uk-section.dh-gs-shop.dh-gs-danke { padding-top: 40px !important; padding-bottom: 40px !important; }
.dh-gs-danke .uk-alert { margin-bottom: 0; }
a.dh-gme-los { display: flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; width: 100%; max-width: 560px; padding: 16px 28px;
  border-radius: 50px; background: linear-gradient(180deg, #92203F 0%, var(--dhp-akzent-dunkel, #6E1430) 100%); color: #fff !important; text-decoration: none !important;
  font: 400 28px/1.2 'Playfair Display', Georgia, serif; box-shadow: 0 6px 18px rgba(110,20,48,.25); }
a.dh-gme-los:hover { background: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gs-moment-cta { margin: 32px 0 0; text-align: center; }
.dh-gs-moment-cta a.dh-gme-los { margin: 0 auto; max-width: 680px; }
.dh-gs-moment-cta p { margin: 12px 0 0; color: #1A2A6C; }
@media (max-width: 639px) {
  a.dh-gme-los { font-size: 23px; padding: 14px 20px; }
}
.dh-gsa { margin: 0 0 20px; padding: 18px 24px 20px 26px; min-width: 0; border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; background: var(--dhp-flaeche-hell, #FCF9F5); }
.dh-gsa-t[hidden], .dh-gsa-wahl[hidden], .dh-gsa-muede[hidden] { display: none; }
.dh-gsa-muede { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-h { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 0; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gsa-h + * { clear: both; }
.dh-gsa-icon { flex: none; width: 30px; height: 30px; }
.dh-gsa-t { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-gsa-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--dhp-rand, #EADFD3); border-radius: 10px; background: #fff; cursor: pointer; }
.dh-gsa-opt:has(input:checked) { border-color: var(--dhp-akzent, #8E1B3A); background: #FBF1F1; box-shadow: inset 0 0 0 1px var(--dhp-akzent, #8E1B3A); }
.dh-gsa-opt input, .dh-gsa-stil input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dh-gsa-punkt { flex: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #B9A9A0; border-radius: 50%; background: #fff; }
.dh-gsa-opt input:checked + .dh-gsa-punkt { border-color: var(--dhp-akzent, #8E1B3A); background: radial-gradient(circle, var(--dhp-akzent, #8E1B3A) 0 5px, #fff 6px); }
.dh-gsa-opt input:focus-visible + .dh-gsa-punkt, .dh-gsa-stil input:focus-visible + span { outline: 3px solid rgba(142,27,58,.3); outline-offset: 2px; }
.dh-gsa-opt strong { display: block; font-size: 16.5px; line-height: 1.3; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-opt small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-ton { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.dh-gsa-ton legend { margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 700; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-stile { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-gsa-stil { position: relative; cursor: pointer; }
.dh-gsa-stil span { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--dhp-rand, #EADFD3); border-radius: 999px; background: #fff; font-size: 15px; line-height: 1.2; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-stil:hover span { border-color: var(--dhp-akzent, #8E1B3A); }
.dh-gsa-stil input:checked + span { border-color: var(--dhp-akzent, #8E1B3A); background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gsa-stil-info { margin: 10px 0 0; font-size: 14.5px; line-height: 1.4; font-style: italic; color: var(--dhp-text, #1A2A6C); }
@media (max-width: 959px) {
  .dh-gsa { padding: 14px 14px 16px; }
  .dh-gsa-h { font-size: 18px; gap: 10px; }
  .dh-gsa-icon { width: 26px; height: 26px; }
  .dh-gsa-t { font-size: 15px; margin-bottom: 12px; }
  .dh-gsa-muede { font-size: 15px; }
  .dh-gsa-wahl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dh-gsa-opt { padding: 12px; }
  .dh-gsa-opt strong { font-size: 15.5px; }
  .dh-gsa-opt small { font-size: 13.5px; }
  .dh-gsa-ton legend { font-size: 15px; }
  .dh-gsa-stil span { padding: 7px 13px; font-size: 14px; }
  .dh-gsa-stil-info { font-size: 13.5px; }
}
.dh-gs-banner { border-radius: 12px; background: #F8E9E6; color: #8E1B3A; font-weight: 700; }
.dh-gs-fest { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #8E1B3A; }
.dh-gs-gratis .dh-gs-wert { color: #000; font-weight: 400; font-size: 15.5px; }
.dh-gs-d-mail { font-size: 17px; }
.dh-gs-d-mail strong { color: #8E1B3A; overflow-wrap: anywhere; }
.dh-gs-d-tipp { padding: 10px 14px; border-left: 3px solid #D2601A; background: rgba(255,255,255,.6); border-radius: 4px; }
.dh-gs-d-liste { margin: 0 0 16px; padding-left: 22px; }
.dh-gs-d-liste li { margin: 0 0 6px; line-height: 1.45; }
.dh-gs-d-mom-h { margin: 22px 0 6px; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.dh-gs-d-mom { margin: 0; }
.dh-gm-popup-box .dh-gme-los { margin: 0 auto; max-width: 260px; font-size: 19px; }
.dh-gm-zg-knoepfe .dh-gme-los { width: 100%; max-width: 320px; margin: 0; font-size: 19px; }
.dh-gs-art[hidden] { display: none !important; }
.dh-gs-arten.dh-gs-arten-eins { grid-template-columns: 1fr; }
@keyframes dh-gm-popup { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── astrovitalis-Ergänzungen ─────────────────────────────────────────────────────────────────────── */

/* ── Karte 1083 (04.10.2026): Kopfbereich nach Martins Entwurf ────────────────────────────────────────
   Kopf-Band wie /ueber-uns (.av-hero-band aus custom.less: Text links, Foto randlos rechts, unter 960 px
   Foto vor dem Text). Eigene Zutaten: Kicker „ASTROVITALIS" über Goldlinie (.av-trenner), Icon-Leiste mit
   Trennstrichen, Leittext am Handy so groß wie „Mach aus Deinem Gutschein …" im Band darunter (16 px).
   Das Foto (design/bilder/orig/hero-gutschein-karten.png, 1010 × 640) behält immer sein Seitenverhältnis —
   mit „cover" auf Spaltenhöhe würde links oder rechts eine der drei Gutscheinkarten angeschnitten. */
.av-gs-kicker { max-width: 520px; text-align: center; }
.av-gs-kicker span {
  display: block; margin-bottom: 6px; padding-left: .34em;
  font-size: .8rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #8C6A2E;
}
.av-gs-kicker .av-trenner { max-width: none; }
.av-gs-lead, .av-gs-lead p { font-size: 1.25rem; line-height: 1.55; }
.av-gs-merkmale { display: flex; max-width: 560px; }
.av-gs-merkmale > div {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 2px 7px; text-align: center; font-size: 14.5px; line-height: 1.35; color: #1A2A6C;
  white-space: nowrap;   /* Zeilen wie im Entwurf (<br>), nicht dreizeilig umbrechen */
}
.av-gs-merkmale > div + div { border-left: 1px solid rgba(26, 42, 108, .16); }
.av-gs-merkmale img { flex: none; width: 34px; height: 34px; }
.av-hero-gs .av-hero-photo > .uk-flex { align-items: center; }
@media (min-width: 1200px) {
  /* „Gutscheine verschenken" in einer Zeile wie im Entwurf: Textspalte 45 % statt 40 % */
  .av-hero-gs .av-hero-text { width: 45%; }
  .av-hero-gs .av-hero-photo { width: 55%; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .av-gs-merkmale > div { font-size: 13.5px; padding: 2px 5px; }
}
/* Karte 1197 (13.10.2026) — Martin (WhatsApp Astrovitalis 08:38): „Der Abstand zwischen Menüleiste und Kopfbereich
   ist relativ groß – durch den Astrovitalis-Schriftzug und der Linie oberhalb der Überschrift … Dies betrifft nur die
   Desktop-Version: … ‚Astrovitalis' und die Linie darunter entfernen – und den Kopfbereich nach oben verschieben."
   Ab 960 px (Schreibtisch und Tablet quer) fällt der Kicker weg und die Textspalte beginnt 1,5 rem statt 3,4 rem unter
   der Menüleiste (1440 px: Überschrift 34 statt 106 px unter der Kopfzeile). Am Handy bleibt beides, wie es war. */
@media (min-width: 960px) {
  .av-hero-gs .av-gs-kicker { display: none; }
  .av-hero-gs .av-hero-text { padding-top: 1.5rem; }
}
@media (min-width: 960px) {
  .av-hero-gs .av-hero-photo { padding-top: 0; padding-bottom: 0; }
  .av-hero-gs .av-hero-photo .uk-background-cover {
    aspect-ratio: 1010 / 640;
    /* Auslauf nach Weiß nur vor der ersten Karte (im Bild bis x ≈ 90 von 1010) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 4%, #000 8.5%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 4%, #000 8.5%);
  }
}
@media (max-width: 959px) {
  /* gestapelt: Foto randlos oben, der helle Auslauf links wird abgeschnitten (Bildposition rechts) */
  .av-hero-gs .av-hero-photo { min-height: 0; }
  .av-hero-gs .av-hero-photo .uk-background-cover { aspect-ratio: 1.45; }
}
@media (max-width: 639px) {
  .av-gs-lead, .av-gs-lead p { font-size: 16px; line-height: 1.5; }
  .av-gs-merkmale { flex-wrap: wrap; row-gap: 18px; }
  .av-gs-merkmale > div { flex: 0 0 50%; font-size: 13.5px; gap: 8px; }
  .av-gs-merkmale > div:nth-child(odd) { border-left: 0; }
  .av-gs-merkmale img { width: 30px; height: 30px; }
}