/* =============================================================================
   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; }

/* Gekauft wird ausschliesslich ueber die Leiste unten. Ein Mengenfeld
   gibt es nicht mehr: der Gutschein ist personalisiert, es wird immer
   genau einer gekauft. Das echte input[name="quantity"] bleibt aber
   samt Kaufen-Knopf in der Form stehen - WooCommerce braucht die Menge
   beim Absenden, und die Plugin-Skripte suchen ihre Felder dort. Die
   Leiste ist nur die Fernbedienung des Knopfes (realBtn.click()), damit
   Preis, Validierung und alle Plugin-Pruefungen unveraendert ueber die
   Originale laufen. Deshalb kein display:none, sondern nur aus dem
   Sichtfeld genommen; aus dem Tabstopp-Weg nimmt boot() die
   Bedienelemente zusaetzlich per tabindex.
   Wichtig: das Theme setzt dem Knopf min-width:200px/min-height:40px -
   ohne min-width:0/min-height:0 bliebe trotz width:1px ein 200x40
   grosser (unsichtbarer) Kasten stehen. */
.gc-b .gcb-buyrow{
	position:absolute !important;
	width:1px !important; height:1px !important;
	min-width:0 !important; min-height:0 !important;
	padding:0 !important; margin:-1px !important;
	border:0 !important; overflow:hidden !important;
	clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
	white-space:nowrap !important; pointer-events:none !important;
}

/* ---------- 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{
	height:46px; padding:0 26px; border:0; border-radius:999px;
	background:var(--gc-orange); color:#fff; cursor:pointer;
	font-family:var(--gc-body); font-size:14px; font-weight:600;
	letter-spacing:.06em; text-transform:uppercase; transition:filter .12s;
	white-space:nowrap; flex:0 0 auto;
}
@media (hover:hover){
.gcbar__cta:hover{ filter:brightness(1.08); }}
.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__cta{ padding:0 16px; }
	.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,.gcbar__cta{ 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; }
}