/* =============================================================================
   GUTSCHEIN — BUEHNE UND LEISTE auf der Produktseite
   -----------------------------------------------------------------------------
   Lag bis zum 14.08.2026 als eingebetteter Block `<style id="gc-stage-b">` im
   WPCode-Snippet „Gutschein: Produktseiten-Vorlage (Variante B)" (KTM 278088,
   Husky 5334), ausgegeben im Kopf und nur auf der Gutschein-Produktseite.

   Inhaltlich unveraendert bis auf eine Stelle: `--gc-orange` laeuft jetzt ueber
   `--brand-accent`. Die Schriftstapel bleiben **woertlich** stehen. Sie sind
   nicht dieselben wie `--spf-brand-head` (hier steht „Blender Heavy" vorn), und
   der Umzug soll am Aussehen nichts aendern. Fuer einen zweiten Shop waeren sie
   zu tokenisieren — dann aber gemessen, nicht geraten.
   ============================================================================= */

/* Token-Kontrakt identisch zum Plugin (giftcard-product.css), damit
   Buehne und Bar exakt dieselben Farben treffen wie das Formular. */
.gcstage,.gcbar{
	--gc-head:"Blender Heavy","Blender Pro","Blender","Roboto Condensed Regular",sans-serif;
	/* Fuer alles Schraeggestellte. Bewusst OHNE "Blender Heavy": fuer
	   diese Familie ist eine Kursive deklariert, die in Wahrheit
	   aufrecht ist - der Browser nimmt sie und neigt deshalb nichts.
	   Dieselbe Reihenfolge nutzt die Startseite bei "Ready to Race.". */
	--gc-slant:"Blender Pro",Oswald,system-ui,sans-serif;
	--gc-body:"Roboto Condensed Regular",Roboto,system-ui,-apple-system,sans-serif;
	--gc-card:#fff; --gc-line:#ececec; --gc-line-strong:#e0e1e3; --gc-border:#d7d9dc;
	--gc-ink:#16181c; --gc-muted:#6b7280; --gc-faint:#9aa0a6;
	--gc-orange:var(--brand-accent, #ff6600); --gc-ok:#22a447; --gc-r:14px; --gc-r2:10px;
	--gc-page:#f4f5f6;
}
body.spf-night .gcstage,body.spf-night .gcbar{
	--gc-card:#1a1c1e; --gc-line:#2a2d30; --gc-line-strong:#2f3236; --gc-border:#33363a;
	--gc-ink:#e8eaed; --gc-muted:#9aa0a6; --gc-faint:#6b7280;
	--gc-page:#0f1011;
}

/* ---------- Buehne ------------------------------------------------ */
/* Die Buehne sitzt direkt unter dem Header: Brotkrumen ausblenden
   (Markup bleibt fuer das Schema stehen) und die obere Innenkante
   der Produktseite auf 0. */
.gc-b .ktmpdp{ padding-top:0 !important; }
.gc-b .ktmpdp__bc{ display:none !important; }

/* KEIN overflow-x:clip auf .ktmpdp - das hat die randlose Buehne
   wieder auf die Inhaltsbreite zurueckgeschnitten. Die Breite setzt
   jetzt das JS exakt auf documentElement.clientWidth (ohne
   Scrollbalken), deshalb entsteht auch keine Querscroll-Leiste. */
.gcstage{
	position:relative; overflow:hidden;
	margin:0 0 34px;                     /* randlos: Rest macht bleed() */
	padding:44px 0 60px;
	background:linear-gradient(180deg,#0f1011 0%,#191b1e 100%);
	color:#fff; font-family:var(--gc-body);
}
/* Schraeg-Cut nach unten. Die Farbe zieht das JS aus dem echten
   Seitenhintergrund, damit Hell und Nacht immer exakt passen. */
.gcstage::after{
	content:''; position:absolute; left:-4%; right:-4%; bottom:-40px; height:80px;
	background:var(--gc-page); transform:rotate(-1.4deg);
}
.gcstage__in{
	position:relative; z-index:2;
	max-width:1320px; margin:0 auto; padding:0 24px;
	display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:48px; align-items:center;
}
.gcstage--nocard .gcstage__in{ grid-template-columns:minmax(0,1fr); }

/* Der Produkt-H1 bleibt erhalten (SEO), wird hier aber zur Eyebrow. */
.gcstage__eyebrow .ktmpdp__title{
	margin:0 0 14px; padding:0; border:0;
	font-family:var(--gc-head); font-size:13.5px; font-weight:400; line-height:1;
	letter-spacing:.16em; text-transform:uppercase; color:var(--gc-orange);
}
.gcstage__eyebrow .ktmpdp__title::before,
.gcstage__eyebrow .ktmpdp__title::after{ content:none !important; }

/* Eine Zeile, geneigt. Blender hat keinen echten Kursivschnitt - der
   Browser wuerde sonst faux-italic mit unkontrolliertem Winkel bauen.
   Genau dieser Rueckfall ist hier aber der richtige Weg: er ist die
   Loesung, die auch die Startseite bei "Ready to Race." verwendet.
   Ein Winkel (oblique <angle>) wird dagegen still verschluckt. */
.gcstage__h{
	margin:0; font-family:var(--gc-slant); font-weight:800;
	font-size:40px; line-height:1.03; letter-spacing:.01em; color:#fff;
	font-style:italic;
	white-space:nowrap;
}
.gcstage__h i{ color:var(--gc-orange); font-style:inherit; }
.gcstage__sub{ margin:12px 0 0; max-width:46ch; font-size:16px; line-height:1.55; color:#b9bdc2; }
.gcstage__checks{ margin-top:16px; display:grid; gap:8px; font-size:15px; color:#c9cdd1; }
.gcstage__checks svg{
	width:15px; height:15px; stroke:var(--gc-ok); fill:none; stroke-width:2.4;
	margin-right:8px; vertical-align:-2px;
}
.gcstage__card{ transform:rotate(-2.2deg); transition:transform .25s ease; }
@media (hover:hover){
.gcstage__card:hover{ transform:rotate(0); }}
.gcstage__card .bso-gc-preview{ margin:0; }

/* ---------- Kartenvorschau ----------------------------------------- */
/* Das Plugin setzt die Nachricht auf white-space:nowrap + Ellipse -
   damit war nach knapp einer Zeile Schluss, obwohl der vollstaendige
   Text im DOM steht. Hier darf sie umbrechen.
   Die tatsaechliche Hoehe rechnet fitMsg() im JS aus (max-height inline)
   und verkleinert die Schrift stufenweise, bis die GANZE Nachricht in
   den freien Bereich der Karte passt - oberhalb der eingebrannten
   Einloese-/Gueltigkeitszeile der Design-Grafik.
   Die Zeilenklammer ist nur die Notbremse, falls das JS nicht laeuft. */
.gc-b .bso-gc-preview__msg{
	white-space:normal !important;
	overflow:hidden !important;
	text-overflow:clip !important;
	display:-webkit-box !important;
	-webkit-box-orient:vertical !important;
	-webkit-line-clamp:6 !important;
	line-clamp:6 !important;
	font-size:13px !important;
	line-height:1.3 !important;
	width:100% !important;
	max-width:none !important;
	word-break:break-word !important;
}
/* Lange Nachricht braucht Platz: Betrag eine Stufe kleiner.
   Die Klasse setzt sync() im JS. */
.gc-b .bso-gc-preview.gc-longmsg .bso-gc-preview__amount,
.gc-b .bso-gc-preview.gc-longmsg [data-gc-amount]{
	font-size:40px !important; line-height:1 !important;
}

/* "Ready to Race" ist ein eigenes Kartendesign - dort traegt die Karte
   die Hausschrift Blender, ebenfalls geneigt. Das Attribut setzt
   sync() aus dem angehakten Design-Radio. */
.gc-b .bso-gc-preview[data-gc-design="ready-to-race"] .bso-gc-preview__amount,
.gc-b .bso-gc-preview[data-gc-design="ready-to-race"] [data-gc-amount],
.gc-b .bso-gc-preview[data-gc-design="ready-to-race"] .bso-gc-preview__msg,
.gc-b .bso-gc-preview[data-gc-design="ready-to-race"] .bso-gc-preview__names,
.gc-b .bso-gc-preview[data-gc-design="ready-to-race"] .bso-gc-preview__top{
	font-family:var(--gc-slant) !important;
	font-weight:800 !important;
	font-style:italic !important;
}

/* ---------- Konfigurator ------------------------------------------ */
.gc-b .ktmpdp__top{
	display:block !important;
	max-width:880px; margin:-8px auto 0 !important; padding-bottom:120px;
}
.gc-b .ktmpdp__gallery{ display:none !important; }
.gc-b .ktmpdp__summary{ max-width:none !important; width:auto !important; position:static !important; }
/* Reste der Standard-Produktseite: "ab"-Preis, leere Meta-Zeilen,
   Fitment-Badge und das kontextlose "MENGE"-Label. */
.gc-b .ktmpdp__price,
.gc-b .ktmpdp__meta,
.gc-b #spf-fitbadge-slot,
.gc-b .ktmpdp__qtylabel{ display:none !important; }
.gc-b .bso-gc{ max-width:none !important; margin-top:0 !important; }

/* Luft zwischen den nummerierten Gruppen: der Hinweistext am Ende
   einer Gruppe klebte mit 4 px an der Trennlinie der naechsten. */
.gc-b .bso-gc__group{ padding-bottom:16px !important; }
.gc-b .bso-gc__group + .bso-gc__group{ padding-top:32px !important; }
.gc-b .bso-gc__help{ margin-top:10px !important; }

/* Der Hinweistext, der am ENDE einer Gruppe steht, wiederholt nur, was
   die Karten-Vorschau bzw. das Formular ohnehin zeigt (Design-Hinweis,
   E-Mail-Hinweis). Bewusst ueber :last-child statt ueber nth-child, so
   bleiben die Feld-Hinweise mitten in einer Gruppe ("Dorthin senden wir
   den Gutschein.", "Leer = sofort ...", Zeichenzaehler) unangetastet -
   auch wenn das Plugin die Reihenfolge der Gruppen einmal aendert. */
.gc-b .bso-gc__group > .bso-gc__help:last-child{ display:none !important; }

.gcb-buyrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* DIE KAUFZEILE STEHT WIEDER IM FLUSS (Kili, 17.09.2026).
   Bis dahin war sie komplett aus dem Sichtfeld genommen, weil die Leiste
   unten der einzige Kaufweg sein sollte. Kili wollte den Knopf am
   Seitenende zurueck: „Warenkorb button im Bottom Sheet sollte sich zu
   den anderen Express Buttons gesellen, wenn man weit genug runter
   scrollt." Die Zeile steht genau dort richtig — im Markup kommt direkt
   nach ihr `.ppc-button-wrapper` mit den Express-Knoepfen.

   Von der alten Begruendung bleibt GENAU EIN Punkt bestehen: Ein
   Mengenfeld gibt es nicht, weil jeder Gutschein personalisiert ist und
   immer genau einer gekauft wird. Also wird nur noch DAS versteckt.
   `display:none` genuegt dafuer: Der Wert von input[name="quantity"]
   wird weiterhin mitgesendet, und das Feld faellt zugleich aus Tabfolge
   und Screenreader — der frueher noetige tabindex-Griff entfaellt damit.

   Der zweite Punkt von damals — „zwei identische Kaufwege auf einem
   Schirm waeren Dopplung" — bleibt gewahrt, weil die Leiste jetzt
   ausblendet, sobald diese Zeile im Bild steht (siehe place() im JS).

   ⚠️ KEIN `position:absolute` mehr: In `form.cart` (display:flex, siehe
   spf-product-layout.css) liefert getBoundingClientRect() fuer ein
   absolut gesetztes Kind die Startecke des Containers statt den echten
   Platz am Formularende — gemessen 543 statt 1775, also 1232 px daneben.
   place() koennte die Zeile dann nicht finden. */
.gc-b .gcb-buyrow{
	margin-top:14px;        /* gleiche Vertikalteilung wie .ppc-button-wrapper */
	/* `form.cart` ist display:flex mit flex-direction:row und flex-wrap:wrap
	   (spf-product-layout.css). Ohne volle Breite bleibt diese Zeile ein
	   inhaltsbreites Flex-Element und der Knopf steht schmal links —
	   gemessen 174 px gegen 880 px beim Geschwister `.bso-gc`. */
	width:100%;
}
.gc-b .gcb-buyrow .quantity{ display:none !important; }
/* Der Knopf fuellt seine Zeile. Begrenzt wird EINE Ebene hoeher, am ganzen
   Kaufbereich — siehe `--gc-kaufbreite` unten. */
.gc-b .gcb-buyrow .single_add_to_cart_button{
	width:100%;
}

/* ---------- Die Breite des Kaufbereichs: 750 px ---------------------------
   PayPal gibt sie vor, nicht wir. Der gerenderte Smart Button ist bei 750 px
   gedeckelt; mehr ist von aussen nicht zu holen.

   ⚠️ AM DOM IST DAS NICHT MESSBAR (17.09.2026, zweimal hineingelaufen):
   `.ppc-button-wrapper`, `.paypal-buttons` und das `component-frame`-iframe
   melden alle die voll Containerbreite — bei 880 px Formular also 880. Der
   sichtbare Knopf entsteht INNERHALB des iframes, und das gehoert paypal.com:
   cross-origin, weder messbar noch beeinflussbar. Wer `getBoundingClientRect()`
   befragt, haelt die Breiten faelschlich fuer gleich.
   Gemessen wurde es am Bild und am Verhalten: Auf Kilis Bildschirmfoto misst
   der Warenkorb-Knopf 1600 Bildpunkte, PayPal und SEPA je 1364 — 0,8525 mal
   880 ergibt 750. Und verkleinert man den Container testweise auf 600 px, folgt
   der Knopf auf 600. 750 ist also sein MAXIMUM, keine feste Breite.

   DARAUS FOLGT DIE REGEL HIER: Nicht nur der Kaufknopf wird gedeckelt, sondern
   der ganze Kaufbereich. Sonst stehen drei 750er Knoepfe unter einem 880 px
   breiten Formular, und genau das sah nach Fehler aus (Kili: „jetzt sind alle
   gleich lang aber alle zu kurz"). Mit der Deckelung am Container teilen sich
   Eingabefelder, Kaufknopf und Express-Knoepfe dieselbe Kante.

   Unter 750 px Fensterbreite greift die Regel von selbst nicht mehr; mobil
   fuellt alles die volle Breite. */
.gc-b .ktmpdp__cart{
	--gc-kaufbreite:750px;
	max-width:var(--gc-kaufbreite);
	/* MITTIG, nicht linksbuendig (Kili, 17.09.2026: „Seitenabstand rechts und
	   links ist jetzt nicht gleich gross"). Der Elternblock `.ktmpdp__summary`
	   ist 880 px breit und steht selbst mit 72 px Rand auf beiden Seiten; ein
	   750 px breites Kind darin haengt ohne `auto` links und laesst rechts
	   130 px stehen — gemessen 72 gegen 202 zum Fensterrand, waehrend alle
	   anderen Bloecke der Seite 72/72 haben. `margin-inline` statt
	   `margin-left/right`, damit die oberen und unteren Abstaende, die von
	   aussen kommen koennen, unangetastet bleiben. */
	margin-inline:auto;
}

/* ---------- Schriftgroessen (Barrierefreiheit) ---------------------- */
/* WCAG schreibt keine Mindestgroesse vor - massgeblich sind 1.4.4
   (200 % Zoom ohne Verlust) und 1.4.12 (Textabstaende). Als Hausregel
   gilt hier: 15 px fuer Hinweis- und Bedientexte, 16 px in Feldern
   (das verhindert nebenbei den Auto-Zoom von iOS beim Fokus).
   Die winzigen Druck-Labels auf der Karte selbst bleiben klein: das
   ist abgebildete Grafik, kein Bedientext. */
.gc-b .bso-gc__help,
.gc-b .bso-gc__opt-desc,
.gc-b .bso-gc__counter,
.gc-b .bso-gc__legend-opt{ font-size:15px !important; line-height:1.5 !important; }
.gc-b .bso-gc__label,
.gc-b .bso-gc__opt-title,
.gc-b .bso-gc__design-label{ font-size:15px !important; }
.gc-b .bso-gc input[type="text"],
.gc-b .bso-gc input[type="email"],
.gc-b .bso-gc input[type="number"],
.gc-b .bso-gc input[type="tel"],
.gc-b .bso-gc textarea,
.gc-b .bso-gc select{ font-size:16px !important; }

/* ---------- Sticky-Summary-Bar ------------------------------------ */
.gcbar{
	position:fixed; left:0; right:0; bottom:0; z-index:40;
	background:var(--gc-card); border-top:1px solid var(--gc-line-strong);
	box-shadow:0 -10px 30px rgba(15,16,17,.10);
	font-family:var(--gc-body); color:var(--gc-ink);
	visibility:hidden; transform:translateY(105%); transition:transform .22s ease;
}
body.spf-night .gcbar{ box-shadow:0 -10px 30px rgba(0,0,0,.5); }
.gcbar.is-on{ visibility:visible; transform:none; }
.gcbar__in{ max-width:880px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:16px; }
.gcbar__amt{ font-family:var(--gc-head); font-size:24px; line-height:1; white-space:nowrap; }
/* min-width:0, damit der Text bei Platznot schrumpfen darf statt den
   Kaufen-Knopf umzubrechen. */
.gcbar__det{ font-size:14px; color:var(--gc-muted); min-width:0; }
.gcbar__act{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* `.gcbar__cta` ist am 17.09.2026 entfallen — die Leiste traegt keinen
   Kaufknopf mehr (Kili). Die Regeln dazu sind mit dem Markup gegangen,
   damit keine Klasse ohne Element stehenbleibt. */
.gcbar__pv{
	height:46px; padding:0 18px; border-radius:999px; cursor:pointer;
	background:transparent; color:var(--gc-ink);
	border:1px solid var(--gc-line-strong);
	font-family:var(--gc-body); font-size:14px; font-weight:600;
	letter-spacing:.06em; text-transform:uppercase;
	white-space:nowrap; transition:background .12s;
}
@media (hover:hover){
.gcbar__pv:hover{ background:rgba(127,127,127,.12); }}

/* ---------- Vorschau-Klappe ueber der Bar --------------------------- */
/* Beim Ausfuellen ist die Buehne mit der Karte laengst aus dem Bild.
   Die Klappe holt DENSELBEN Vorschau-Knoten nach unten (kein Klon,
   sonst schreibt das Plugin ins Leere) und gibt ihn beim Schliessen
   wieder an die Buehne zurueck. pointer-events bleibt aus, damit nur
   die Karte selbst klickbar ist und der Rest der Seite bedienbar. */
.gcpv{
	position:fixed; left:0; right:0; bottom:64px; z-index:39;
	display:flex; justify-content:center; padding:0 16px 14px;
	pointer-events:none; opacity:0; transform:translateY(14px);
	transition:opacity .18s ease, transform .18s ease;
}
.gcpv.is-on{ opacity:1; transform:none; }
/* Gleiche Breite wie auf der Buehne: die Karte skaliert ihre Hoehe ueber
   das Seitenverhaeltnis, eine schmalere Klappe haette also weniger Platz
   fuer die Nachricht UND mehr Zeilen. Auf flachen Fenstern wird deshalb
   nicht die Breite gekuerzt, sondern die fertige Karte per transform
   verkleinert - das aendert das Layout nicht und bricht nichts um. */
.gcpv__box{
	pointer-events:auto; width:100%; max-width:470px;
	filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.gcpv__box .bso-gc-preview{ margin:0 !important; }
@media (max-height:760px){ .gcpv__box{ transform:scale(.86); transform-origin:bottom center; } }
@media (max-height:640px){ .gcpv__box{ transform:scale(.72); transform-origin:bottom center; } }

/* ---------- Responsive -------------------------------------------- */
@media (max-width:991px){
	.gcstage__in{ grid-template-columns:minmax(0,1fr); gap:28px; }
	.gcstage__card{ width:100%; max-width:470px; margin-left:auto; margin-right:auto; }
}
@media (max-width:640px){
	.gcstage{ padding:32px 0 46px; }
	.gcstage__h{ font-size:30px; }
	.gcstage__in{ padding-left:16px; padding-right:16px; }
	.gc-b .ktmpdp__top{ padding-bottom:110px; }
	.gcbar__det{ display:none; }
	/* Ohne Mengenwaehler passen Preis, Vorschau und Kaufen wieder in
	   eine Zeile. */
	.gcbar__in{ padding:11px 16px; gap:12px; }
	.gcbar__amt{ font-size:21px; }
	.gcbar__act{ gap:8px; }
	.gcbar__pv{ padding:0 14px; }
}
/* Die Kopfzeile steht bewusst in einer Zeile - auf sehr schmalen
   Geraeten muss dafuer die Groesse nachgeben. */
@media (max-width:400px){
	.gcstage__h{ font-size:25px; }
	.gcbar__amt{ font-size:20px; }
	.gcbar__pv{ font-size:13px; padding:0 12px; }
}

@media (prefers-reduced-motion: reduce){
	.gcstage__card,.gcbar,.gcpv{ transition:none; }
}

@media print{
	.gcbar,.gcpv{ display:none !important; }
	/* !important, weil bleed() die Breite inline setzt */
	.gcstage{ margin-left:0 !important; width:auto !important; }
}

/* ===== Apple Pay unter dem Kaufknopf (18.09.2026) ============================
   Kili: „Apple Pay zu klein und klebt oben am Warenkorb dran."

   Mollie erzeugt den Knopf erst im Browser, in dem serverseitig gelieferten
   <div id="mollie-applepayDirect-button">. Nur die ZEICHNUNG ist nativ; Hoehe,
   Breite, Radius und Abstand sind von aussen setzbar. Ohne eigene Regel faellt
   der Knopf auf die Vorgabe des Browsers — flacher als die Knoepfe darueber und
   ohne Abstand nach oben.

   Es gab die Regel schon dreimal — fuer Produktseite (spf-product-v2.css),
   Warenkorb (spf-cart.css) und Kasse (spf-kasse.css). Sie greift hier keine
   davon: Die Produktseiten-Regel haengt an `.ppv2 .kauf__aktion`, und die
   Gutscheinseite baut ihren Kaufblock ohne `.ppv2` — `spf-product-v2.css` wird
   dort nicht einmal geladen. Vierte Platzierung, vierte Regel.

   Hoehe ueber `--btn-h` (48px) statt `--btn-h-l`: Hier ist „In den Warenkorb"
   48px hoch, und die drei Knoepfe im Block gehoeren auf eine Hoehe. */
.gc-b .ktmpdp__cart #mollie-applepayDirect-button{ margin-top:14px; }
.gc-b .ktmpdp__cart #mollie_applepay_button.apple-pay-button{
	display:block; width:100%;
	height:var(--btn-h,48px); min-height:var(--btn-h,48px);
	border-radius:var(--btn-radius,10px);
	/* WebKits UA-Stylesheet setzt an JEDEM <button> `cursor:default`; die native
	   Zeichnung fasst den Zeiger nicht an. Gleiche Begruendung wie auf der
	   Produktseite. */
	cursor:pointer;
}