/* Gutscheinkarte (DIN A5 quer), ein Design fuer Druck/PDF (app/gutschein_karte.php) und die Live-Vorschau im Shop.
   Alle Masse in cqw (Breite der Karte), damit die Karte in jeder Groesse gleich aussieht. Motive: .wk-date (Date-Bild) und .wk-ratten (Rattenfaenger). */
.wk-rahmen{container-type:inline-size;width:100%}
.wk{position:relative;width:100cqw;aspect-ratio:210/148;overflow:hidden;display:grid;grid-template-columns:36% 1fr;background:#FBF6EC;color:#1C3134;
  font-family:"Source Sans 3",system-ui,sans-serif;line-height:1.35;text-align:left;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.wk *{box-sizing:border-box}
.wk-l{position:relative;padding:4cqw 3.4cqw;display:flex;flex-direction:column;justify-content:space-between;color:#F7F1E6;min-width:0;overflow:hidden}
.wk-l>*{position:relative}
.wk-logo{width:19cqw;height:auto;display:block}
.wk-claim{font:italic 500 2.9cqw/1.2 "Fraunces",serif}
.wk-ki{font-size:1.1cqw;opacity:.75;margin-top:1cqw}
.wk-r{position:relative;padding:4.6cqw 5cqw 3.6cqw;display:flex;flex-direction:column;min-width:0}
.wk-r::before{content:"";position:absolute;inset:2.2cqw;border:.22cqw solid #E9A21B;border-radius:1.4cqw;pointer-events:none}
.wk-r>*{position:relative;z-index:1}
.wk-fuer{font:italic 500 4.2cqw/1.1 "Fraunces",serif;color:#134A4E}
.wk-was{font:600 7.4cqw/1 "Fraunces",serif;letter-spacing:-.02em;margin-top:1.2cqw;color:#1C3134}
.wk-was .wk-lang{font-size:5.6cqw}
.wk-wofuer{font-size:1.75cqw;color:#616C69;margin-top:1cqw}
.wk-widmung{font:italic 500 2.3cqw/1.35 "Fraunces",serif;margin-top:2.4cqw;max-width:52cqw;overflow-wrap:anywhere}
.wk-von{font-size:1.75cqw;color:#616C69;margin-top:.8cqw}
/* Code senkrecht mittig im freien Platz zwischen Text und Anleitung, die Anleitung bleibt unten */
.wk-codezeile{margin:auto 0;padding-top:2cqw;display:flex;justify-content:center}
.wk-code{border:.25cqw dashed #134A4E;border-radius:1cqw;padding:1cqw 2.4cqw;background:rgba(251,246,236,.85);text-align:center}
.wk-code small{display:block;font-size:1.2cqw;letter-spacing:.12em;color:#616C69}
.wk-gueltig{display:block;margin-top:.4cqw;font-size:1.5cqw;font-weight:600;color:#134A4E}
.wk-code b{font:600 2.6cqw ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#134A4E;white-space:nowrap}
.wk-so{padding-top:1.4cqw;align-self:center;text-align:center;font-size:1.45cqw;line-height:1.45;color:#616C69;max-width:48cqw}
.wk-so b{color:#1C3134}

/* Format DIN lang (210 x 99 mm): gleiche Karte, kompakter gesetzt */
.wk-dl{aspect-ratio:210/99;grid-template-columns:30% 1fr}
.wk-dl .wk-l{padding:3cqw 2.6cqw}
.wk-dl .wk-logo{width:14cqw}
.wk-dl .wk-claim{font-size:2.3cqw}
.wk-dl .wk-ki{font-size:.95cqw;margin-top:.6cqw}
.wk-dl .wk-r{padding:3.2cqw 4cqw 2.6cqw}
.wk-dl .wk-r::before{inset:1.5cqw}
.wk-dl .wk-fuer{font-size:3.2cqw}
.wk-dl .wk-was{font-size:5.6cqw;margin-top:.6cqw}
.wk-dl .wk-was .wk-lang{font-size:4.4cqw}
.wk-dl .wk-wofuer,.wk-dl .wk-von{font-size:1.5cqw}
.wk-dl .wk-widmung{font-size:1.9cqw;margin-top:1.4cqw;max-width:66cqw}
.wk-dl .wk-codezeile{padding-top:1.2cqw}
.wk-dl .wk-so{padding-top:.8cqw}
.wk-dl .wk-code{padding:.7cqw 2cqw}
.wk-dl .wk-code b{font-size:2.2cqw}
.wk-dl .wk-gueltig{font-size:1.3cqw}
.wk-dl .wk-so{font-size:1.25cqw;max-width:66cqw}

/* Motiv Date-Abend: Bild links, Rattenfaenger zart hinter dem Text */
.wk-date .wk-l{background:linear-gradient(180deg,rgba(19,74,78,.55) 0%,rgba(11,42,45,.2) 38%,rgba(11,42,45,.85) 100%),url(/img/blinddate.webp) center/cover}
.wk-date .wk-logo{filter:drop-shadow(0 .3cqw 1cqw rgba(0,0,0,.35))}
.wk-date .wk-claim{text-shadow:0 .2cqw .8cqw rgba(0,0,0,.4)}
.wk-date .wk-r::after{content:"";position:absolute;right:3cqw;top:3cqw;width:26cqw;height:44cqw;background:url(/img/rattenfaenger-petrol.webp) no-repeat center/contain;opacity:.13;pointer-events:none;z-index:0}

/* Motiv Rattenfaenger: Petrol mit grossem hellem Rattenfaenger, Karte wie ein eingestecktes Ticket */
.wk-ratten{background:radial-gradient(circle at 20% 30%,#1A5C60,#134A4E 45%,#0B2A2D);grid-template-columns:38% 1fr}
.wk-ratten .wk-l::before{content:"";position:absolute;left:-2cqw;bottom:-4cqw;width:34cqw;height:58cqw;background:url(/img/rattenfaenger-hell.webp) no-repeat center/contain;opacity:.2}
.wk-ratten .wk-r{margin:2.6cqw 2.6cqw 2.6cqw 0;background:#FBF6EC;border-radius:1.6cqw;padding:3.6cqw 4.2cqw 3cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25)}
.wk-ratten .wk-r::before{inset:1.2cqw;border-radius:1cqw}
.wk-dl.wk-date .wk-r::after{width:20cqw;height:36cqw;top:2cqw;right:2.4cqw}
.wk-dl.wk-ratten .wk-r{margin:1.8cqw 1.8cqw 1.8cqw 0;padding:2.8cqw 3.6cqw 2.2cqw}
.wk-dl.wk-ratten .wk-l::before{width:26cqw;height:44cqw;bottom:-6cqw}