/* Herzstickl Gutschein-Shop (20.10.2026) · ergänzt base.css
   Mobile first, Steingrau und Gold, klare Kanten (keine Verläufe über Bildern), Hauptaktion unten im Daumenbereich.
   Aufbau: Seite · Testband · Kopf · Schritte · Weg · A4-Vorschau · Editor · Karte · Kontakt · Übersicht · Leiste · Blatt · Vergrößern · Danke · Prüfen */

/* ============================================================ Seite */
.gs { flex: 1 0 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) 34px; }
.gs-serif, .gs-a4 [data-font="serif"], .gs-card-amt, .gs-hero h1, .gs-ty-head h1 { font-family: "BodoniModa", "Bodoni 72", Didot, "Bodoni MT", Georgia, "Times New Roman", serif; }
.gs h2 { color: var(--gold-soft); font-size: clamp(1.4rem, 4.6vw, 1.9rem); line-height: 1.2; margin: 0 0 16px; text-wrap: balance; }
.gs h2:focus { outline: none; }
.gs .f-hint { color: var(--muted); }
html.gs-lock { overflow: hidden; }
body.gs-flowing .dock { display: none; }

/* ============================================================ Testband */
.gs-testband {
  position: sticky; top: calc(var(--bar-h) + var(--safe-t)); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter);
  background: repeating-linear-gradient(-45deg, #e8c97a 0 14px, #dcb85f 14px 28px); color: var(--btn-ink, #15120e);
  border-bottom: 2px solid var(--btn-ink, #15120e); font-size: .86rem; line-height: 1.35;
  padding-left: calc(var(--gutter) + 92px);
}
@media (min-width: 900px) { .gs-testband { padding-left: calc(var(--gutter) + 150px); } }
.gs-testband strong { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; background: var(--btn-ink, #15120e); color: #e8c97a; }
.gs-testband span { flex: 1 1 220px; }
.gs-testband a { color: var(--btn-ink, #15120e); font-weight: 700; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }

/* ============================================================ Kopf */
.gs-hero { display: grid; gap: 22px; margin: 0 calc(var(--gutter) * -1); }
.gs-hero-fig { margin: 0; background: var(--olive, #2f2925); border-bottom: 1px solid rgba(205, 169, 81, .5); box-shadow: 0 12px 26px rgba(24, 20, 18, .4); }
.gs-hero-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gs-hero-txt { padding: 0 var(--gutter); text-align: left; }
.gs-hero .crumbs { margin-bottom: 10px; }
.gs-hero h1 { font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: 400; line-height: 1.05; color: #fff; margin: 0 0 12px; letter-spacing: -.005em; text-wrap: balance; }
.gs-lead { color: var(--fg-soft); font-size: 1.02rem; line-height: 1.6; max-width: 56ch; margin: 0 0 16px; }
.gs-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.gs-pills li { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: var(--fg-soft); font-size: .8rem; border-radius: 999px; }
.gs-soon-top { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(205, 169, 81, .45); background: rgba(30, 26, 23, .4); color: var(--gold-soft); font-size: .9rem; line-height: 1.5; border-radius: var(--radius); }
.gs-soon-top svg { flex: none; width: 20px; height: 20px; fill: currentColor; margin-top: 1px; }
.gs-hero-cta { margin: 0; }
.gs-hero-cta .btn-gold svg { transform: rotate(90deg); }
@media (max-width: 559px) { .gs-hero-cta .btn-gold { width: 100%; } }
@media (min-width: 900px) {
  .gs-hero { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 48px; margin: 34px 0 0; }
  .gs-hero-fig { order: 2; border: 1px solid rgba(205, 169, 81, .5); }
  .gs-hero-txt { padding: 0; }
}
.gs-noscript { margin: 24px auto 0; max-width: 760px; }

/* ============================================================ Schritte */
.gs-flow { position: relative; max-width: 1080px; margin: 38px auto 0; text-align: left; scroll-margin-top: calc(var(--bar-h) + 12px); }
.gs-nav { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 24px; padding: 0; counter-reset: gs; }
.gs-nav li { position: relative; }
.gs-nav li + li::before { content: ""; position: absolute; top: 17px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 1px; background: rgba(255, 255, 255, .22); }
.gs-nav-it { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 2px 4px; border: 0; background: none; color: var(--fg-soft); font: 600 .72rem/1.2 var(--font); letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-nav-it b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: var(--bg); font-size: .9rem; color: #fff; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.gs-nav-it[disabled] { cursor: default; color: var(--muted); }
.gs-nav-it[disabled] b { border-style: dashed; color: var(--muted); }
.gs-nav-it.is-done b { border-color: var(--btn-line-bd, #e8c97a); color: var(--btn-line-fg, #f6e7bd); }
.gs-nav-it[aria-current] { color: #fff; }
.gs-nav-it[aria-current] b { background: var(--gold); border-color: var(--gold); color: var(--btn-ink, #15120e); }
@media (min-width: 700px) { .gs-nav-it { font-size: .8rem; } }

/* ============================================================ 1 Weg */
.gs-ways { display: grid; gap: 14px; }
@media (min-width: 760px) { .gs-ways { grid-template-columns: 1fr 1fr; gap: 20px; } }
.gs-way { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .35); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent; transition: border-color .2s ease, transform .25s var(--ease), box-shadow .25s ease; }
.gs-way:hover { border-color: rgba(205, 169, 81, .7); transform: translateY(-3px); box-shadow: 0 22px 46px rgba(0, 0, 0, .34); }
.gs-way:active { transform: scale(.99); }
.gs-way:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 18px 40px rgba(0, 0, 0, .3); }
.gs-way:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.gs-way-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #3f3833; border-bottom: 1px solid rgba(205, 169, 81, .45); }
.gs-way-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-way-a4 { display: grid; place-items: center; background: #6b6158; }
.gs-way-a4 .gs-a4 { width: auto; height: 86%; transform: rotate(-3deg); }
.gs-way-b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.gs-way-b strong { font-size: 1.25rem; color: #fff; line-height: 1.2; }
.gs-way-b > span { color: var(--fg-soft); font-size: .93rem; line-height: 1.55; }
.gs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-tags i { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--btn-line-fg, #f6e7bd); border: 1px solid rgba(232, 201, 122, .55); padding: 3px 8px; }
.gs-way-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; margin-top: 4px; color: var(--btn-line-fg, #f6e7bd); font-weight: 700; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; }
.gs-way-go svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease; }
.gs-way:hover .gs-way-go svg { transform: translateX(4px); }
.gs-check-link { margin: 18px 0 0; text-align: center; font-size: .9rem; }
.gs-check-link a { color: var(--gold-soft); }

/* ============================================================ A4-Vorschau (Maße aus vorlagen/layout.json, Schrift relativ zur Breite) */
.gs-a4 { position: relative; display: block; width: 100%; aspect-ratio: 210 / 297; container-type: inline-size; overflow: hidden; background: var(--paper, #fff); color: var(--ink, #2b2a2e); box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25); -webkit-user-select: none; user-select: none; font-synthesis: none; text-rendering: geometricPrecision;
  /* wie tFPDF im PDF: ohne Unterschneidung und Ligaturen, damit die Zeilenumbrüche gleich sind */
  font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "clig" 0; }
.gs-a4-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* Platzhalter, solange die Vorlagenbilder fehlen: weiße Seite mit feinem Goldrahmen im Druckrand (10 mm) */
.gs-a4.is-ph::before, .gs-a4.is-ph::after { content: ""; position: absolute; pointer-events: none; }
.gs-a4.is-ph::before { inset: 3.367% 4.762%; border: max(1px, .3cqw) solid var(--gold, #b08d3c); }
.gs-a4.is-ph::after { inset: 4.377% 6.19%; border: max(1px, .12cqw) solid var(--gold, #b08d3c); opacity: .55; }
.gs-a4-motif { position: absolute; display: grid; place-items: center; pointer-events: none; }
.gs-a4-motif span { font-family: "BodoniModa", "Bodoni 72", Didot, Georgia, serif; font-style: italic; font-size: calc(26 * 100cqw / 595.28); color: var(--gold, #b08d3c); opacity: .7; }
.gs-a4:not(.is-ph) .gs-a4-motif { display: none; }
.gs-f { position: absolute; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--ink); font-family: "WorkSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: calc(var(--fs, 12) * var(--fit, 1) * 100cqw / 595.28); line-height: 1.15; }
.gs-f .gs-in { display: block; width: 100%; }
.gs-f[data-font="serif"] { font-family: "BodoniModa", "Bodoni 72", Didot, "Bodoni MT", Georgia, "Times New Roman", serif; }
.gs-f[data-c="gold"] { color: var(--gold); }
.gs-f[data-c="muted"] { color: var(--muted); }
.gs-f[data-it] { font-style: italic; }
.gs-f[data-up] { text-transform: uppercase; }
.gs-f.is-ml { align-items: flex-start; white-space: normal; line-height: 1.34; }
.gs-f[data-f="text"] .gs-in { padding-top: calc(var(--fs) * var(--fit, 1) * 100cqw / 595.28 * .08); }
.gs-f.is-ml .gs-v { white-space: pre-line; }
.gs-f.is-off { visibility: hidden; }
/* Beschriftungen wie im PDF: Work Sans halbfett, Versalien, gesperrt, feste Größe in pt */
.gs-f .gs-l { font-family: "WorkSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--label, var(--gold)); }
.gs-f[data-f="to"] .gs-l, .gs-f[data-f="from"] .gs-l { font-size: calc(8 * 100cqw / 595.28); margin-right: 1.524cqw; }
.gs-f.is-line .gs-l { display: inline-block; text-align: right; }
.gs-f[data-f="code"] .gs-l { font-size: calc(7 * 100cqw / 595.28); margin-right: 1.429cqw; }
.gs-f[data-f="valid"] .gs-l { font-size: calc(7 * 100cqw / 595.28); margin-right: 1.143cqw; color: var(--muted); }
.gs-f[data-f="code"] .gs-v { font-weight: 600; letter-spacing: .08em; }
.gs-line { display: none; width: 37.143cqw; height: 0; border-bottom: max(1px, .1cqw) solid var(--gold); vertical-align: baseline; }
.gs-f.is-line .gs-line { display: inline-block; }
.gs-f.is-line .gs-v { display: none; }
.gs-a4.is-edit .gs-f.is-line { outline: 0 !important; cursor: default; }
.gs-f[data-f="studios"] { line-height: 1.45; color: var(--muted); }
.gs-sl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sl b { font-weight: 600; color: var(--ink); }
.gs-sl.is-appt { font-size: calc(6.6 * 100cqw / 595.28); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label, var(--gold)); line-height: 1.9; }
.gs-qr { overflow: visible; display: block; }
.gs-qr svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
.gs-qr-l { position: absolute; left: -20%; right: -20%; top: calc(100% + .5cqw); text-align: center; font-family: "WorkSans", -apple-system, Arial, sans-serif; font-size: calc(5.6 * 100cqw / 595.28); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gs-a4.is-edit .gs-f[role="button"] { cursor: pointer; }
.gs-a4.is-edit .gs-f[data-f="to"], .gs-a4.is-edit .gs-f[data-f="from"], .gs-a4.is-edit .gs-f[data-f="text"] { outline: max(1px, .2cqw) dashed rgba(176, 141, 60, .45); outline-offset: -.6cqw; }
.gs-a4.is-sw.is-edit .gs-f[data-f="to"], .gs-a4.is-sw.is-edit .gs-f[data-f="from"], .gs-a4.is-sw.is-edit .gs-f[data-f="text"] { outline-color: rgba(0, 0, 0, .3); }
@media (hover: hover) { .gs-a4.is-edit .gs-f[role="button"]:hover { outline: max(1px, .25cqw) dashed var(--gold); outline-offset: -.6cqw; } }
.gs-a4.is-mini { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); pointer-events: none; }
.gs-a4.is-mini .gs-f { outline: 0 !important; }

/* ============================================================ 2 Gestalten */
.gs-ed-grid { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .gs-ed-grid { grid-template-columns: minmax(320px, 430px) 1fr; gap: 44px; align-items: start; }
  .gs-pv { position: sticky; top: calc(var(--bar-h) + var(--safe-t) + 16px); }
}
.gs-pv-box { position: relative; max-width: 430px; margin: 0 auto; }
.gs-pv-tools { display: flex; gap: 14px; align-items: center; max-width: 430px; margin: 14px auto 0; }
.gs-pv-tools .gs-pv-note { margin: 0; text-align: left; }
.gs-variant { max-width: 430px; margin: 16px auto 0; }
.gs-zoom-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--btn-line-bd, #e8c97a); border-radius: var(--radius); background: rgba(30, 26, 23, .5); color: var(--btn-line-fg, #f6e7bd); font: 700 .82rem var(--font); letter-spacing: .02em; cursor: pointer; }
.gs-zoom-btn svg { width: 18px; height: 18px; fill: currentColor; }
.gs-pv-note { margin: 12px auto 0; max-width: 430px; color: var(--muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.gs-ctl { display: grid; gap: 22px; min-width: 0; }
.gs-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.gs-fs > legend, .gs-lang-h, .gs-textf > span, .gs-flow .f-field > span:first-child { display: block; padding: 0; margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }
.gs-fs .f-hint { margin-top: 8px; }

/* Motive: am Handy waagrecht wischen */
.gs-tpls { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gs-tpls::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gs-tpls { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 2px 2px 4px; } }
.gs-tpl { position: relative; flex: none; width: 88px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) { .gs-tpl { width: auto; } }
.gs-tpl-img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border: 2px solid transparent; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); transition: border-color .2s ease, transform .2s ease; }
.gs-tpl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-tpl-img.is-ph::before { content: ""; position: absolute; inset: 5% 7%; border: 1px solid #b08d3c; }
.gs-tpl-img i { position: relative; padding: 0 10%; font-family: "BodoniModa", "Bodoni 72", Didot, Georgia, serif; font-size: .78rem; line-height: 1.15; color: #8a6d22; }
.gs-tpl-n { font-size: .74rem; line-height: 1.25; color: var(--fg-soft); }
.gs-tpl:hover .gs-tpl-img { transform: translateY(-2px); }
.gs-tpl:has(input:checked) .gs-tpl-img { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(205, 169, 81, .4), 0 8px 18px rgba(0, 0, 0, .35); }
.gs-tpl:has(input:checked) .gs-tpl-n { color: var(--btn-line-fg, #f6e7bd); font-weight: 700; }
.gs-tpl:has(input:focus-visible) .gs-tpl-img { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Betrag */
.gs-chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-chip input, .gs-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gs-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 48px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); background: rgba(255, 255, 255, .06); color: #fff; font: 700 1rem var(--font); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.gs-chip:hover span { border-color: var(--btn-line-bd, #e8c97a); transform: translateY(-1px); }
.gs-chip:active span { transform: scale(.97); }
.gs-chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--btn-ink, #15120e); }
.gs-chip input:focus-visible + span, .gs-seg input:focus-visible + span { outline: 2px solid var(--btn-line-fg, #f6e7bd); outline-offset: 3px; }
.gs-other { margin-top: 10px; }
.gs-eur { display: flex; align-items: center; gap: 10px; }
.gs-eur input { max-width: 160px; font-size: 1.15rem !important; font-weight: 700; }
.gs-eur b { font-size: 1.15rem; color: var(--gold-soft); }
.gs-fs.f-bad .gs-chip span, .gs-studios.f-bad .gs-studio-b { border-color: #d05a5a; }

/* Umschalter */
.gs-seg { display: flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .05); }
.gs-seg label { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-seg label + label { border-left: 1px solid rgba(255, 255, 255, .16); }
.gs-seg span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 6px; text-align: center; font: 600 .88rem/1.2 var(--font); color: var(--fg-soft); transition: background .2s ease, color .2s ease; }
.gs-seg input:checked + span { background: var(--gold); color: var(--btn-ink, #15120e); }
@media (hover: hover) { .gs-seg label:hover span { background: rgba(255, 255, 255, .1); color: #fff; } .gs-seg label:hover input:checked + span { background: var(--gold-soft); color: var(--btn-ink, #15120e); } }

/* Namen und Text */
.gs-personal { display: grid; gap: 14px; }
.gs-personal .f-2 { gap: 12px; }
@media (max-width: 380px) { .gs-personal .f-2 { grid-template-columns: 1fr; } }
.gs-textbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--fg); text-align: left; cursor: pointer; transition: border-color .2s ease; }
.gs-textbtn:hover { border-color: rgba(205, 169, 81, .6); }
.gs-textbtn [data-text-cur] { font-size: 1.0625rem; line-height: 1.45; color: #fff; }
.gs-textbtn em { flex: none; font: 700 .74rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--btn-line-fg, #f6e7bd); }
.gs-own { margin-top: 10px; }
.gs-own textarea { min-height: 120px; font-size: 1.0625rem; line-height: 1.45; }
.gs .f-field input::placeholder, .gs .f-field textarea::placeholder { color: rgba(255, 255, 255, .78); }
/* Sprache des Gutscheins = Sprache der Seite, Wechsel über die Website-Sprache */
.gs-lang .f-hint { margin: 0; }
.gs-lang-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; font-size: .88rem; color: var(--fg-soft); }
.gs-lang-to a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(232, 201, 122, .7); border-radius: var(--radius); color: var(--gold-soft); font-weight: 600; text-decoration: none; }
.gs-lang-to a:hover { background: rgba(232, 201, 122, .14); color: #fff; border-color: var(--gold-soft); }
.gs-lang-to a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.gs-count { display: block; margin-top: 6px; text-align: right; font-size: .76rem; color: var(--muted); }
.gs-flash { animation: gsFlash 1.1s ease; }
@keyframes gsFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(205, 169, 81, 0); } 25% { box-shadow: 0 0 0 4px rgba(205, 169, 81, .55); } }

/* ============================================================ Abholung: Originalkarte mit Betrag */
.gs-card { position: relative; display: block; max-width: 460px; margin: 0 auto; container-type: inline-size; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.gs-card img { display: block; width: 100%; height: auto; }
/* Linie auf der Karte (1400 px): x 478 bis 1302, y 723. Betrag mittig darüber in Gold. */
.gs-card-amt { position: absolute; left: 34.143%; width: 58.857%; bottom: calc(100% - 51.643% + 1.1%); text-align: center; font-size: 7.2cqw; font-weight: 400; line-height: 1; letter-spacing: .01em; color: #d2ad55; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); white-space: nowrap; pointer-events: none; }
.gs-studios { display: grid; gap: 10px; }
@media (min-width: 420px) { .gs-studios { grid-template-columns: 1fr 1fr; } }
.gs-studio { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-studio-b { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); transition: border-color .2s ease, background .2s ease; }
.gs-studio-b small { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--btn-line-fg, #f6e7bd); }
.gs-studio-b strong { font-size: 1.2rem; color: #fff; }
.gs-studio-b span { font-size: .84rem; color: var(--fg-soft); line-height: 1.5; }
.gs-studio:hover .gs-studio-b { border-color: rgba(205, 169, 81, .6); }
.gs-studio input:checked + .gs-studio-b { border-color: var(--gold); background: rgba(205, 169, 81, .14); box-shadow: 0 0 0 1px var(--gold); }
.gs-studio input:focus-visible + .gs-studio-b { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================================================ 3 Kontakt */
.gs-sub { color: var(--fg-soft); margin: -6px 0 16px; line-height: 1.55; }
.gs-acc { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(30, 26, 23, .3); border-radius: var(--radius); color: var(--fg-soft); font-size: .88rem; line-height: 1.55; }
.gs-acc svg { flex: none; width: 20px; height: 20px; fill: var(--gold-soft); margin-top: 1px; }
.gs-acc a { color: var(--gold-soft); font-weight: 700; }
.gs-acc.is-in { border-color: rgba(205, 169, 81, .5); color: #fff; }
.gs-fields { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 640px) { .gs-fields { grid-template-columns: 1fr 1fr; } .gs-fields > :first-child { grid-column: 1 / -1; } }
.gs-bill .gs-fields { grid-template-columns: 1fr; max-width: 660px; }
.gs-bill .gs-fields > * { grid-column: auto; }
/* Kontakt: drei Wege (Konto empfohlen, Gast, Anmelden). Akzent der Empfehlung als eine Variable (--gs-reco), Gold statt Grün */
.gs { --gs-reco: #e8c97a; --gs-reco-ink: #15120e; }
.gs-ways { display: grid; gap: 10px; margin: 0 0 18px; }
@media (min-width: 900px) { .gs-ways { grid-template-columns: 1.25fr 1fr 1fr; align-items: stretch; } .gs-ways-h { grid-column: 1 / -1; } }
.gs-ways-h { margin: 0 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }
.gs-wayc { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 64px; padding: 14px 44px 14px 16px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; background: rgba(30, 26, 23, .28); color: #fff; text-align: left; text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background .15s ease; }
.gs-wayc strong { font-size: 1.02rem; line-height: 1.3; color: #fff; }
.gs-wayc > span { font-size: .9rem; line-height: 1.45; color: var(--fg-soft); }
.gs-wayc-go { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; display: grid; place-items: center; }
.gs-wayc-go svg { width: 18px; height: 18px; fill: currentColor; }
.gs-wayc.is-reco { border: 2px solid var(--gs-reco); padding: 13px 43px 13px 15px; background: rgba(232, 201, 122, .1); }
.gs-wayc.is-reco .gs-wayc-go { color: var(--gs-reco); }
.gs-badge { align-self: flex-start; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; background: var(--gs-reco); color: var(--gs-reco-ink); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gs-wayc[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .08); }
@media (hover: hover) { .gs-wayc:hover { border-color: var(--gold-soft); background: rgba(255, 255, 255, .08); } .gs-wayc.is-reco:hover { background: rgba(232, 201, 122, .16); } }
.gs-wayc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gs-wayc:active { transform: scale(.99); }
.gs-reg-sent { margin: 0 0 18px; }
.gs-bill-h { margin: 6px 0 4px; font-size: 1.1rem; color: #fff; }
.gs-bill-p { margin: 0 0 14px; }
.gs-bill select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8c97a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.gs-bill select option { background: #2b2622; color: #fff; }
#gs-tax { text-transform: uppercase; letter-spacing: .04em; }
.gs-zipcity { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.gs-priv-bill { margin: -4px 0 18px; }
.gs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gs-terms-ok { min-height: 44px; padding: 6px 0; }
.gs-terms { margin: 10px 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); background: rgba(30, 26, 23, .3); }
.gs-terms summary { min-height: 46px; display: flex; align-items: center; padding: 10px 14px; cursor: pointer; color: var(--gold-soft); font-weight: 700; font-size: .9rem; }
.gs-terms ul { margin: 0; padding: 0 16px 14px 34px; color: var(--fg-soft); font-size: .88rem; line-height: 1.6; }
.gs-terms li { margin-bottom: 6px; }
.gs-priv { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.gs-priv a { color: var(--gold-soft); }
.gs-ferr { margin: 6px 0 0; color: var(--err); font-size: .85rem; line-height: 1.4; }

/* ============================================================ 4 Übersicht und Zahlung */
.gs-sum { display: grid; gap: 20px; }
@media (min-width: 700px) { .gs-sum { grid-template-columns: 210px 1fr; gap: 30px; align-items: start; } }
.gs-sum-pv { width: 60%; max-width: 230px; margin: 0 auto; }
@media (min-width: 700px) { .gs-sum-pv { width: 100%; } }
.gs-sum-pv .gs-card { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.gs-dl { margin: 0; }
.gs-dl > div { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.gs-dl dt { color: var(--muted); font-size: .82rem; padding-top: 2px; }
.gs-dl dd { margin: 0; color: #fff; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gs-chg { flex: none; min-height: 34px; padding: 4px 10px; border: 1px solid var(--btn-line-bd, #e8c97a); border-radius: var(--radius); background: transparent; color: var(--btn-line-fg, #f6e7bd); font: 700 .72rem var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gs-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--gold); font-size: 1.1rem; color: #fff; }
.gs-total strong { font-size: 1.6rem; color: var(--gold-soft); }
.gs-pay { margin-top: 22px; }
.gs-pay .f-note { margin-bottom: 4px; }
.gs-secure { color: var(--fg-soft); font-size: .9rem; }
.gs-sumup { min-height: 60px; margin: 12px 0; }
.gs-soon { padding: 22px 20px; border: 1px solid rgba(205, 169, 81, .55); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .45); }
.gs-soon h3 { color: var(--gold-soft); font-size: 1.2rem; margin: 0 0 8px; }
.gs-soon p { color: var(--fg-soft); line-height: 1.6; margin: 0 0 14px; }
.gs-soon-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.gs-soon-btns a { flex: 1 1 180px; }
.gs-err { margin-top: 14px; }

/* ============================================================ Aktionsleiste (Daumenbereich, ersetzt im Ablauf die Kontaktleiste) */
.gs-bar {
  position: sticky; bottom: calc(10px + var(--safe-b)); z-index: 35; display: flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 8px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(47, 41, 37, .92);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
}
.kb-open .gs-bar { position: relative; bottom: auto; }
.gs-bar-back { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 50px; padding: 0 12px; border: 1px solid var(--btn-line-bd, #e8c97a); border-radius: 11px; background: transparent; color: var(--btn-line-fg, #f6e7bd); font: 700 .86rem var(--font); cursor: pointer; }
.gs-bar-back svg { width: 20px; height: 20px; fill: currentColor; transform: rotate(180deg); }

@media (max-width: 459px) { .gs-bar-back span { display: none; } }
.gs-bar-sum { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gs-bar-sum strong { color: var(--gold-soft); font-size: 1.1rem; }
.gs-bar-sum small { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-bar .btn-gold { flex: none; min-height: 50px; padding: 10px 20px; border-radius: 11px; text-transform: none; letter-spacing: .02em; font-size: .95rem; line-height: 1.2; white-space: normal; text-align: center; }
.gs-bar .btn-gold svg { width: 18px; height: 18px; }
.gs-bar.is-last .gs-bar-sum { display: none; }
.gs-bar.is-last .btn-gold { flex: 1 1 auto; }
.gs-bar .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(10, 10, 10, .3); border-top-color: #0a0a0a; border-radius: 50%; animation: spin .8s linear infinite; }
.gs-bar .is-loading .spin { display: inline-block; }
.gs-bar .is-loading { cursor: progress; opacity: .9; }
@media (min-width: 900px) { .gs-bar { max-width: 760px; margin-left: auto; margin-right: auto; padding: 10px; } }

/* ============================================================ Textauswahl als Blatt von unten */
.gs-sheet-bg { position: fixed; inset: 0; z-index: 70; background: rgba(20, 17, 15, .62); opacity: 0; transition: opacity .2s ease; }
.gs-sheet-bg.show { opacity: 1; }
.gs-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: min(82vh, 640px); display: flex; flex-direction: column; background: #3f3833; border-top: 1px solid rgba(205, 169, 81, .6); border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .45); transform: translateY(102%); transition: transform .24s var(--ease); padding-bottom: var(--safe-b); }
.gs-sheet.show { transform: none; }
.gs-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gs-sheet-head strong { color: var(--gold-soft); font-size: 1.02rem; }
.gs-x { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--btn-line-bd, #e8c97a); border-radius: 10px; background: transparent; color: var(--btn-line-fg, #f6e7bd); cursor: pointer; }
.gs-x svg { width: 22px; height: 22px; fill: currentColor; }
.gs-sheet-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gs-sheet-list { padding: 12px 12px 16px; }
/* Textauswahl als Karten ohne Punkt: das Radio bleibt für Tastatur und Screenreader, ist aber nur visuell versteckt */
.gs-opt { position: relative; display: block; margin: 0 0 10px; padding: 16px 48px 16px 16px; min-height: 56px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(255, 255, 255, .04); cursor: pointer; color: #fff; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background .15s ease; }
.gs-opt:last-child { margin-bottom: 0; }
.gs-opt span { display: block; font-size: 1.0625rem; line-height: 1.45; color: #fff; }
.gs-opt:first-child span, .gs-opt.is-own span { font-weight: 700; color: var(--gold-soft); }
.gs-opt::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 13px; margin-top: -9px; border: solid transparent; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gs-opt:has(input:checked) { border: 2px solid var(--gold-soft); padding: 15px 47px 15px 15px; background: rgba(232, 201, 122, .1); }
.gs-opt:has(input:checked)::after { border-color: var(--gold-soft); }
.gs-opt:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .gs-opt:hover { border-color: rgba(232, 201, 122, .7); background: rgba(255, 255, 255, .08); } }
@media (min-width: 700px) {
  .gs-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, 92vw); border: 1px solid rgba(205, 169, 81, .6); border-radius: var(--radius-lg); transform: translate(-50%, -46%); opacity: 0; transition: transform .22s var(--ease), opacity .2s ease; }
  .gs-sheet.show { transform: translate(-50%, -50%); opacity: 1; }
}

/* ============================================================ Vergrößern */
.gs-zoom { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: rgba(30, 26, 23, .97); }
.gs-zoom-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(16px + var(--safe-t)) 16px 100px; }
.gs-zoom-page { width: 720px; margin: 0 auto; }
@media (min-width: 900px) { .gs-zoom-page { width: min(980px, 92vw); } }
.gs-zoom-x { position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); z-index: 2; min-height: 52px; padding: 12px 28px; text-transform: none; letter-spacing: .02em; }
.gs-zoom .gs-f[role="button"] { cursor: pointer; }

/* ============================================================ Danke-Seite */
.gs-ty { max-width: 1080px; margin: 30px auto 0; }
.gs-ty-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.gs-ty-head h1 { font-size: clamp(2rem, 7.6vw, 3rem); font-weight: 400; line-height: 1.1; color: #fff; margin: 0 0 12px; text-wrap: balance; }
.gs-ty-head .gs-lead { margin: 0 auto; }
.gs-badge { display: inline-block; margin-bottom: 12px; padding: 5px 12px; background: var(--gold); color: var(--btn-ink, #15120e); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gs-ty-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .gs-ty-grid { grid-template-columns: 1fr minmax(300px, 380px); align-items: start; gap: 44px; } }
.gs-ty-pv { max-width: 380px; width: 100%; margin: 0 auto; }
.gs-codebox { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; margin-bottom: 8px; border: 1px solid rgba(205, 169, 81, .6); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .45); text-align: center; }
.gs-codebox span { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gs-codebox strong { font: 700 clamp(1.4rem, 6.6vw, 1.9rem)/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: #fff; -webkit-user-select: all; user-select: all; }
.gs-dl-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.gs-dl-btns a { flex: 1 1 220px; }
.gs-tip { margin: 8px 0 0; }
.gs-studio-card { margin-top: 20px; padding: 18px; border: 1px solid rgba(205, 169, 81, .5); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .35); }
.gs-studio-card h2 { font-size: 1.2rem; margin-bottom: 8px; }
.gs-addr { color: var(--fg-soft); line-height: 1.6; margin: 0 0 8px; }
.gs-addr strong { color: #fff; }
.gs-appt { color: var(--muted); font-size: .86rem; margin: 0 0 12px; }
.gs-studio-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gs-studio-btns a { flex: 1 1 160px; min-height: 46px; padding: 10px 14px; font-size: .82rem; }
.gs-ty-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; }
.gs-ty-links a:not([class]) { color: var(--gold-soft); font-weight: 600; }
.gs-msg { max-width: 640px; margin: 10px auto 0; padding: 30px 22px; text-align: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .4); }
.gs-msg h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); color: #fff; margin: 0 0 10px; }
.gs-msg p { color: var(--fg-soft); line-height: 1.6; }
.gs-msg .gs-ty-links { justify-content: center; }
.gs-spin { display: inline-block; width: 34px; height: 34px; margin-bottom: 14px; border: 3px solid rgba(232, 201, 122, .25); border-top-color: var(--gold-soft); border-radius: 50%; animation: spin 1s linear infinite; }

/* ============================================================ Prüfseite */
.gs-pr { max-width: 680px; margin: 30px auto 0; }
.gs-pr-head { text-align: center; margin-bottom: 22px; }
.gs-pr-head h1 { font-size: clamp(2rem, 7.6vw, 2.8rem); font-weight: 400; color: #fff; margin: 0 0 10px; font-family: "BodoniModa", "Bodoni 72", Didot, Georgia, serif; }
.gs-pr-form { display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .35); }
.gs-pr-form input { text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 1.15rem !important; }
.gs-pr-form .btn-gold { width: 100%; }
@media (min-width: 560px) { .gs-pr-form { grid-template-columns: 1fr auto; align-items: end; } .gs-pr-form .btn-gold { width: auto; } }
.gs-res { margin-top: 20px; padding: 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); background: rgba(30, 26, 23, .45); }
.gs-res.is-ok { border-color: rgba(205, 169, 81, .7); }
.gs-res.is-bad { border-color: rgba(255, 155, 155, .55); }
.gs-state { display: inline-block; padding: 5px 12px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .14); color: #fff; }
.gs-res.is-ok .gs-state { background: var(--gold); color: var(--btn-ink, #15120e); }
.gs-res.is-bad .gs-state { background: #f2b0b0; color: var(--btn-ink, #15120e); }
.gs-res .gs-code { display: block; margin: 12px 0 4px; font: 700 1.4rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: #fff; }
.gs-rest { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0; color: var(--fg-soft); }
.gs-rest strong { font-size: 2rem; color: var(--gold-soft); line-height: 1; }
.gs-res p { color: var(--fg-soft); line-height: 1.55; margin: 6px 0 0; }
.gs-pr-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gs-pr-links a { flex: 1 1 200px; }

@media (prefers-reduced-motion: reduce) {
  .gs-way, .gs-tpl-img, .gs-sheet, .gs-sheet-bg { transition: none; }
  .gs-flash { animation: none; }
}
@media print {
  .gs-bar, .gs-nav, .gs-zoom, .gs-sheet, .gs-testband { display: none !important; }
}
.gs-pr-head .gs-lead { margin: 0 auto; }
/* Kopf mit drei Sprachen: am schmalen Handy reicht der Platz nicht für Subline, Konto, zwei Sprachknöpfe und Menü. Die Subline weicht. */
@media (max-width: 479px), (min-width: 900px) and (max-width: 1365px) { .gs-page .appbar .brand-txt { display: none; } }
@media (max-width: 699px) { .gs-testband { padding-top: 7px; padding-bottom: 7px; } .gs-testband span { display: none; } .gs-testband a { margin-left: auto; } }

/* ============================================================ Knöpfe einheitlich (wie base.css „Knöpfe einheitlich“): Rahmen-Knopf helles Gold, Hover goldene Fläche mit dunkler Schrift */
.gs-zoom-btn, .gs-bar-back, .gs-x, .gs-chg, .gs-textbtn, .gs-chip span, .gs-seg span, .gs-studio-b, .gs-tpl-img, .gs-nav-it b {
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .gs-zoom-btn:hover, .gs-bar-back:hover, .gs-x:hover, .gs-chg:hover { background: var(--gold); border-color: var(--gold); color: var(--btn-ink, #15120e); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(205, 169, 81, .22); }
  .gs-textbtn:hover { transform: translateY(-1px); border-color: var(--btn-line-bd, #e8c97a); }
  .gs-studio:hover .gs-studio-b { transform: translateY(-1px); }
  .gs-nav-it:not([disabled]):not([aria-current]):hover b { background: var(--gold); border-color: var(--gold); color: var(--btn-ink, #15120e); }
}
.gs-zoom-btn:active, .gs-bar-back:active, .gs-x:active, .gs-chg:active, .gs-textbtn:active { transform: scale(.98); box-shadow: none; }
.gs-zoom-btn:focus-visible, .gs-bar-back:focus-visible, .gs-x:focus-visible, .gs-chg:focus-visible, .gs-textbtn:focus-visible, .gs-nav-it:focus-visible b { outline: 2px solid var(--btn-line-fg, #f6e7bd); outline-offset: 3px; }
.gs-way:has(input:focus-visible), .gs-tpl:has(input:focus-visible) .gs-tpl-img, .gs-studio input:focus-visible + .gs-studio-b { outline-color: var(--btn-line-fg, #f6e7bd); }
.gs-bar .btn-gold[disabled] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .gs-zoom-btn, .gs-bar-back, .gs-x, .gs-chg, .gs-textbtn, .gs-chip span, .gs-seg span, .gs-studio-b, .gs-tpl-img { transition: none; transform: none !important; } }
.gs-charnote { color: var(--btn-line-fg, #f6e7bd); }
.gs-nowrap { white-space: nowrap; }

/* Zahlung vor Ort (27.10.2026): nur die Karte zur Abholung, eine Auswahl mittig */
.gs-ways.is-one { grid-template-columns: minmax(0, 560px); justify-content: center; }