/**
 * Gutscheinkarte — Bildschirm-Fassung (Kopfbereich, Live-Vorschau, „So kommt es an" auf /gutscheine/).
 *
 * Quelle: Arbeitsauftrag „Gutscheinkarten Online + Print" Abschnitt 4 in der Fassung vom 10.11.2026
 * (build.py/page_v2.py): Wertkarte mit Collage-Motiv + .scrim.deep, v-dark mit Titel-Glow und
 * Stubfoot #bdbdbd. Skalierung wie Seitenprototyp v2: 1 mm = 1/210 der Kartenbreite
 * (--u = 100cqw / 210 am Container .cq-gk), daher rein per CSS auf jede Spaltenbreite.
 *
 * NICHT von Hand pflegen: erzeugt aus scratchpad/gs/a/karte-css-quelle.css (mm/pt-Werte)
 * mit karte-css-bauen.mjs — mm → calc(N*var(--u)), pt → calc(N*.3528*var(--u)).
 * Unterschiede zum Arbeitsauftrag nur für die Website: alles unter .cq-gk gekapselt
 * (Website-Grundregeln für h4/ol/img/line-height zurückgesetzt), Schrift Formular statt Jost.
 * Radius 0 überall (Design-System Hard Rule 1).
 */

/* Cinzel Decorative — nur für den Raumtitel „Wizards Secrets" (dokumentierte Ausnahme).
   Datei liefert Agent C nach assets/fonts/cinzel/; fehlt sie, greift die Serifen-Ersatzschrift. */
@font-face {
    font-family: 'Cinzel Decorative';
    src: url('../assets/fonts/cinzel/cinzel-decorative-v19-latin_latin-ext-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Rahmen: Container, an dem --u hängt */
.cq-gk { container-type: inline-size; width: 100%; position: relative; }
.cq-gk > .card { --u: calc(100cqw / 210); }
.cq-gk > .card[hidden] { display: none; }
.cq-gk .card, .cq-gk .card * { box-sizing: border-box; border-radius: 0 !important; }
.cq-gk .card { line-height: normal; letter-spacing: normal; text-align: left; text-transform: none; }
.cq-gk .card img { max-width: none; }
.cq-gk.shadow { box-shadow: 0 30px 70px rgba(0,0,0,.85), 0 0 0 1px rgba(178,148,116,.35); }

/* ── Arbeitsauftrag Abschnitt 4 (Stand 10.11.2026) ── */
.cq-gk .card{position:relative;width:calc(210*var(--u));height:calc(99*var(--u));background:#000;color:#fff;overflow:hidden;font-family:"Formular","Jost",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
.cq-gk .card .motif{position:absolute;left:0;top:0;width:calc(141*var(--u));height:calc(101*var(--u));background-size:cover;background-position:center}
.cq-gk .card .scrim{position:absolute;left:0;top:0;width:calc(141*var(--u));height:calc(101*var(--u));background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.94) 100%)}
.cq-gk .card .scrim.deep{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.22) 28%,rgba(0,0,0,.80) 56%,rgba(0,0,0,.96) 100%)}
.cq-gk .card .logo{position:absolute;left:calc(8*var(--u));top:calc(7*var(--u));height:calc(18*var(--u));width:auto}
.cq-gk .card .eyebrow{position:absolute;left:calc(8*var(--u));bottom:calc(33*var(--u));font-size:calc(6.6*.3528*var(--u));font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#B29474;white-space:nowrap}
.cq-gk .card .title{position:absolute;left:calc(8*var(--u));bottom:calc(17*var(--u));width:calc(124*var(--u));font-weight:200;font-size:calc(21*.3528*var(--u));letter-spacing:.14em;text-transform:uppercase;line-height:1.05;text-wrap:balance}
.cq-gk .card .title.cinzel{font-family:"Cinzel Decorative","Formular",serif;font-weight:400;font-size:calc(18*.3528*var(--u));letter-spacing:.06em}
.cq-gk .card .title.long{font-size:calc(17*.3528*var(--u))}
.cq-gk .card .meta{position:absolute;left:calc(8*var(--u));bottom:calc(9*var(--u));font-size:calc(7.6*.3528*var(--u));font-weight:400;letter-spacing:.06em;color:#e6e6e6;white-space:nowrap}
.cq-gk .card .meta b{font-weight:500;color:#fff}
.cq-gk .card .stub{position:absolute;left:calc(140*var(--u));top:0;width:calc(72*var(--u));height:calc(101*var(--u));background:#000;color:#fff}
.cq-gk .card .tag{position:absolute;left:calc(146*var(--u));top:calc(9.5*var(--u));width:calc(58*var(--u));height:calc(71*var(--u));--k:max(1px,calc(0.25*var(--u)));--gh:linear-gradient(90deg,rgba(178,148,116,0),#B29474 25%,#B29474 75%,rgba(178,148,116,0));--gv:linear-gradient(180deg,rgba(178,148,116,0),#B29474 25%,#B29474 75%,rgba(178,148,116,0));background:var(--gh) left top/100% var(--k) no-repeat,var(--gh) left bottom/100% var(--k) no-repeat,var(--gv) left top/var(--k) 100% no-repeat,var(--gv) right top/var(--k) 100% no-repeat,#fff}
.cq-gk .card .perf{position:absolute;left:calc(140*var(--u));top:0;width:max(1px,calc(0.25*var(--u)));height:calc(99*var(--u));background:linear-gradient(180deg,rgba(200,168,134,0),#C8A886 25%,#C8A886 75%,rgba(200,168,134,0))}
.cq-gk .card .f{position:absolute;left:calc(150*var(--u));width:calc(50*var(--u));height:calc(11*var(--u))}
.cq-gk .card .f .lab{font-size:calc(6*.3528*var(--u));font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#9B7E62;line-height:normal}
.cq-gk .card .f .line{position:absolute;left:0;right:0;bottom:0;border-bottom:calc(0.25*var(--u)) solid rgba(178,148,116,.6)}
.cq-gk .card .f .val{position:absolute;left:0;bottom:calc(1.6*var(--u));font-size:calc(10.5*.3528*var(--u));font-weight:400;color:#000;white-space:nowrap;letter-spacing:.02em;line-height:normal}
.cq-gk .card .f .val.mono{font-family:"Courier New",monospace;font-weight:700;font-size:calc(11*.3528*var(--u));letter-spacing:.12em}
.cq-gk .card .f .val.small{font-size:calc(9*.3528*var(--u))}
.cq-gk .card .stubfoot{position:absolute;left:calc(147*var(--u));right:calc(7*var(--u));bottom:calc(5*var(--u));font-size:calc(6.4*.3528*var(--u));font-weight:400;letter-spacing:.03em;color:#bdbdbd;line-height:1.35}
.cq-gk .card .stubfoot b{color:#B29474;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.cq-gk .card .stubhead{position:absolute;left:calc(147*var(--u));top:calc(5*var(--u));font-size:calc(6*.3528*var(--u));font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#B29474}
.cq-gk .card .stubhead span{color:#8f8f8f}
.cq-gk .card.back .motif,.cq-gk .card.back .scrim{display:none}
.cq-gk .card.back .brand{position:absolute;left:calc(8*var(--u));top:calc(7*var(--u));font-size:calc(6.6*.3528*var(--u));font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#B29474;white-space:nowrap}
.cq-gk .card.back .how{position:absolute;left:calc(8*var(--u));top:calc(15*var(--u));width:calc(84*var(--u))}
.cq-gk .card.back .how h4{margin:0 0 calc(3.5*var(--u));padding:0;font-family:inherit;font-weight:200;font-size:calc(13*.3528*var(--u));line-height:normal;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.cq-gk .card.back .how ol{margin:0;padding:0;list-style:none;display:grid;gap:calc(3*var(--u))}
.cq-gk .card.back .how li{display:grid;grid-template-columns:calc(7*var(--u)) 1fr;gap:calc(2*var(--u));margin:0;padding:0;font-size:calc(7.6*.3528*var(--u));font-weight:400;color:#e6e6e6;line-height:1.4}
.cq-gk .card.back .how li b{font-weight:200;font-size:calc(11*.3528*var(--u));color:#B29474;line-height:1}
.cq-gk .card.back .legal{position:absolute;left:calc(8*var(--u));bottom:calc(6*var(--u));width:calc(124*var(--u));font-size:calc(6.2*.3528*var(--u));font-weight:400;color:#bdbdbd;line-height:1.4}
.cq-gk .card.back .qr{position:absolute;left:calc(104*var(--u));top:calc(26*var(--u));width:calc(26*var(--u));height:calc(26*var(--u));background:#fff;padding:calc(1.5*var(--u))}
.cq-gk .card.back .qr div{width:100%;height:100%;background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/calc(2.2*var(--u)) calc(2.2*var(--u))}
.cq-gk .card.back .qrlab{position:absolute;left:calc(100*var(--u));top:calc(57.5*var(--u));width:calc(34*var(--u));text-align:center;font-size:calc(6*.3528*var(--u));font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#B29474}
.cq-gk .card.back .tag{top:calc(9.5*var(--u));height:calc(76*var(--u))}
.cq-gk .card.back .msg{position:absolute;left:calc(150*var(--u));top:calc(13*var(--u));width:calc(50*var(--u));height:calc(70*var(--u))}
.cq-gk .card.back .msg .row{height:calc(8.75*var(--u));border-bottom:calc(0.2*var(--u)) solid rgba(178,148,116,.5);font-size:calc(9*.3528*var(--u));line-height:calc(8.75*var(--u));color:#000;font-weight:300;white-space:nowrap;overflow:hidden}
.cq-gk .card.back .msg .row span{display:inline-block;transform:translateY(calc(-0.9*var(--u)))}

/* ── Variante F – Online (v-dark), Stand 10.11.: Titel-Glow, Stubfoot #bdbdbd ── */
.cq-gk .card.v-dark .title{text-shadow:0 0 calc(6*var(--u)) rgba(255,255,255,.25),0 0 calc(12*var(--u)) rgba(178,148,116,.25)}
.cq-gk .card.v-dark .stub{background:#0A0A0A}
.cq-gk .card.v-dark .tag{display:none}
.cq-gk .card.v-dark .stubhead{color:#B29474}
.cq-gk .card.v-dark .f{left:calc(147*var(--u));width:calc(57*var(--u))}
.cq-gk .card.v-dark .f .lab{color:#B29474}
.cq-gk .card.v-dark .f .line{border-bottom-color:rgba(178,148,116,.45)}
.cq-gk .card.v-dark .f .val{color:#fff}
.cq-gk .card.v-dark .f .val.mono{color:#C8A886}
.cq-gk .card.v-dark .stubfoot{color:#bdbdbd}.cq-gk .card.v-dark .stubfoot b{color:#B29474}
.cq-gk .card.back.v-dark .msg{left:calc(147*var(--u));width:calc(57*var(--u))}
.cq-gk .card.back.v-dark .msg .row{color:#fff;border-bottom-color:rgba(178,148,116,.4)}

/* Motiv in zwei Fassungen (template-parts/gutschein-karte.php): Handys nehmen die kleine,
   sonst die Web-Fassung. Nur die zutreffende Variable wird als Bild geladen. */
.cq-gk .card .motif { background-image: var(--m-web, none); }
@media (max-width: 700px) {
    .cq-gk .card .motif { background-image: var(--m-klein, var(--m-web, none)); }
}
/* Code passt nicht ins Feld (z. B. 19 Zeichen im Etikett): js/gutscheine.js verkleinert per --fit */
.cq-gk .card .f .val[style*="--fit"] { font-size: calc(var(--fit) * .3528 * var(--u)); }

/* Wertkarte ohne Collage-Motiv (cq_gc_motiv_url('wert') noch nicht da): Gold-Glow statt Bild */
.cq-gk .card.ohne-motiv .motif { background: radial-gradient(60% 70% at 40% 45%, rgba(178,148,116,.22), transparent 70%); }