/* ═══════════════════════════════════════════════════════════════ KARTENDESIGN – GETEILT zwischen Spiel und Landingpage --------------------------------------------------------------- Bis zum 31.07.2026 lag dieser Block in style.css, und die Landingpage hatte einen eigenen Nachbau (.hcard). Beide sind auseinandergelaufen – deshalb liegt das Kartendesign jetzt hier und wird von index.html UND landing.html geladen. EINE Quelle, keine zwei Wahrheiten. Erwartet vom einbindenden Stylesheet: --card-w / --card-h Kartenmaße (style.css: :root + Media Queries, landing.css: eigene Größe für den Hero-Fächer) Alles Übrige (--tone, --ink, --pad …) setzt der Block selbst bzw. kommt aus tokens.css. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ KARTEN — Design-Handoff „Dampfstich" --------------------------------------------------------------- Aufbau je Karte nach Handoff: ein ÄUSSERER METALLRAHMEN mit Padding, darin die KARTENFLÄCHE (.card-face) mit dem gelieferten Kartenblatt aus public/img/kartenstoff/ – vier Leinen-Blätter je Spielfarbe, ein Ornament-Pergament für die Sonderkarten. Nieten trägt der Rahmen nur bei Sonderkarten; Zahlenkarten sind nietenlos. Die Motive bleiben Inline-SVGs aus ds-icons.js. Skalierung: ALLE Innenmaße sind Anteile von --card-w. Die Verhältnisse stammen aus dem Handoff (Bezugsgröße 120px Desktop-Karte), z. B. Padding 7/120 = .058, Rahmenradius 9/120 = .075, Flächenradius 5/120 = .042. So bleibt die Karte über die gesamte Projekt-Skala stimmig – von 120px Hand bis 22px Sitzkarte – ohne je eine Größe doppelt zu pflegen. Farbsteuerung über drei Custom Properties, die client.js inline setzt: --tone Rahmenfarbe (Spielfarbe bzw. Sonderkartenfarbe) --tone-hi Rahmen-Lichtkante (DS.frameHi: +34 bei dunklen Tönen, +12 bei hellen – sonst liefe der Verlauf oben ins Weiße) --ink Ziffern-/Icon-Ton auf hellem Grund Optional --card-glow für die beiden Karten mit farbigem Schein (Dampfkoloss glutrot, Funkenfee elektrisch-blau). ═══════════════════════════════════════════════════════════════ */ .card { --tone:var(--spade); --tone-hi:#7f9cb5; --ink:var(--ds-ink-blau); /* Gravur: Grundstellung ist HELL (Rot, Blau, Grün). Gelb dreht den ganzen Satz weiter unten auf dunkel. Zusammengehalten als Variablensatz, damit Wert, Ecksymbol und Mittelsymbol nie auseinanderlaufen. */ --engrave:var(--ds-engrave-light); --engrave-icon:var(--ds-engrave-light-icon); --engrave-mid:var(--ds-engrave-light-mid); --engrave-stroke:var(--ds-engrave-stroke-light); --engrave-shadow:var(--ds-engrave-shadow-light); --engrave-mid-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.6)); --engrave-mid-opacity:.95; --name-inset:var(--card-inset); /* seitlicher Einzug des Namensfeldes */ /* Schriftgröße des Kartennamens als Variable, weil sich die Position des Zwischenwerts (Fließband/Dampfwolke) daran orientieren MUSS: die Namensgröße ist ein fester Pixelwert (Handoff-Band), die Kartenbreite aber variabel – eine rein proportionale Position würde bei schmalen Karten in den Namen laufen. */ --name-size:10px; /* Abstand aller Inhalte zum Ornamentrahmen des Kartenblatts (Handoff: inset = max(4px, Kartenbreite × 0.075)). Darunter läuft Text in die gezeichnete Messingleiste und wird unlesbar. */ --card-inset:max(4px, calc(var(--card-w) * .075)); /* Oberkante des Zwischenwerts: unter dem Namen UND unter der Trennlinie (die laut Handoff bei .20 sitzt) – je nachdem, was tiefer liegt. */ --rank-top:max(calc(var(--card-inset) + var(--name-size) * 1.3), calc(var(--card-w) * .21 + 2px)); position:relative; flex:none; /* border-box explizit: --card-w/--card-h sind die AUSSENmaße der Karte, das Rahmen-Padding liegt darin. style.css und landing.css setzen den Reset zwar global, aber cards.css soll für sich stehen können. */ box-sizing:border-box; width:var(--card-w); height:var(--card-h); /* Die Karte ist ihr eigener Größen-Container – siehe Abschnitt „Größenleiter" am Dateiende. Unbedenklich, weil die Breite fest aus --card-w kommt und nie vom Inhalt abhängt. */ container-type:inline-size; /* ── Metallrahmen (Handoff) ── Padding 7/120, Radius 9/120, Verlauf linear-gradient(152deg, --tone-hi 0%, --tone 40%, #1d160f 100%). Er fasst das Blatt und trennt die Karte vom Tisch – ohne ihn steht besonders das helle Gelb-Blatt direkt auf dem Foto-Hintergrund. --card-rivets legen nur die Sonderkarten weiter unten an. */ padding:calc(var(--card-w) * .058); border-radius:calc(var(--card-w) * .075); background:var(--card-rivets, none), linear-gradient(152deg, var(--tone-hi) 0%, var(--tone) 40%, #1d160f 100%); /* Gold-Haarlinie auf der Rahmenkante + Schlagschatten. --card-glow setzt client.js nur für Dampfkoloss (Glutrot) und Funkenfee (elektrisches Blau); sonst ein unsichtbarer Schatten als Platzhalter. */ box-shadow:var(--ds-card-frame-ring), var(--ds-shadow-card), var(--card-glow, 0 0 transparent); user-select:none; cursor:default; transition:transform var(--t,var(--ds-t-micro) var(--ds-ease-ui)), box-shadow var(--t,var(--ds-t-micro) var(--ds-ease-ui)), filter var(--t,var(--ds-t-micro) var(--ds-ease-ui)); } /* Nieten: vier radial-gradients in den Rahmenecken. Laut Handoff kennzeichnen sie AUSSCHLIESSLICH Sonderkarten – die Ecken der Zahlenkarten bleiben ruhig. --ds-rivet zeichnet den Kopf bei (8px, 8px) seiner eigenen Malfläche. Die vier Kopien bekommen deshalb je eine 16-px-Kachel, die per background-position in eine Ecke gesetzt wird; der Kopf landet dann `Offset + 8px` vom Rand. Der Nietenkopf selbst bleibt absolut groß (rund 5,6 px) – er ist ein Beschlag, kein Anteil der Karte. Der Offset läuft zwischen den beiden Handoff-Stufen 6.5px (Handy) und 8px (Desktop) mit. */ .card.is-special { --rivet-off:clamp(-1.5px, calc(var(--card-w) * .0667 - 8px), 0px); --card-rivets: var(--ds-rivet) left var(--rivet-off) top var(--rivet-off) / 16px 16px no-repeat, var(--ds-rivet) right var(--rivet-off) top var(--rivet-off) / 16px 16px no-repeat, var(--ds-rivet) left var(--rivet-off) bottom var(--rivet-off) / 16px 16px no-repeat, var(--ds-rivet) right var(--rivet-off) bottom var(--rivet-off) / 16px 16px no-repeat; } /* Kleine Karten tragen die Beschläge nicht: der Kopf bleibt absolut groß und säße bei 54px Breite fast auf der Kartenfläche. */ .card.card-sm.is-special, .card.card-mini.is-special { --card-rivets:none; } /* ── Kartenfläche ────────────────────────────────────────────────── Sie liegt INNERHALB des Metallrahmens und trägt das gelieferte Kartenblatt – vier gefärbte Leinen-Blätter je Spielfarbe, ein Ornament-Pergament für die Sonderkarten (Tokens --ds-card-sheet-*). Radius 5/120 der Kartenbreite, also knapper als der Rahmen darum. Auf dem Blatt liegt nichts weiter: Der Emaille-Schliff stammte aus der Zwischenfassung, in der die Zahlenkarten METALLPLATTEN waren. Mit den Leinen-Blättern legte er nur einen grauen Schleier über die gezeichnete Struktur – laut Handoff ist die Fläche Blatt + Leitungsfarbe, sonst nichts, dazu eine Gold-Haarlinie nach innen. Die Leitungsfarbe (--tone, von client.js gesetzt) liegt als Rückfall darunter, falls ein Blatt nicht lädt. Alle Inhalte darin halten --card-inset Abstand. Der rechnet weiterhin mit der KARTENBREITE, nicht mit der Flächenbreite – genau wie im Handoff (`inset = max(4, w × 0.075)`, angewandt innerhalb der Fläche). */ .card-face { position:relative; width:100%; height:100%; border-radius:calc(var(--card-w) * .042); background:var(--kartenstoff,none) var(--ds-card-sheet-fit), var(--tone); box-shadow:inset 0 0 0 1px rgba(232,205,138,.3); overflow:hidden; } /* Blatt und Gravur je Spielfarbe. Rot, Blau und Grün sind dunkle Blätter → helle Gravur; Gelb ist hell → dunkle Gravur (Handoff-Tabelle). Früher lief auch Gelb hell und wurde dafür per Schleier abgedunkelt – das kostete dem Blatt seine Leuchtkraft und drehte den Kontrast trotzdem nur knapp über die Grenze. */ .card.suit-red { --kartenstoff:var(--ds-card-sheet-rot); } .card.suit-blue { --kartenstoff:var(--ds-card-sheet-blau); } .card.suit-green { --kartenstoff:var(--ds-card-sheet-gruen); } .card.suit-yellow { --kartenstoff:var(--ds-card-sheet-gelb); --engrave:var(--ds-engrave-dark); --engrave-icon:var(--ds-engrave-dark); --engrave-mid:var(--ds-engrave-dark); --engrave-stroke:var(--ds-engrave-stroke-dark); --engrave-shadow:var(--ds-engrave-shadow-dark); --engrave-mid-shadow:drop-shadow(0 1px 2px rgba(255,255,255,.5)); --engrave-mid-opacity:.9; } /* Sonderkarten: Kartenblatt aus dem Design-Handoff (assets/cards/frame.png, hier img/kartenstoff/sonderkarte.webp) – Ornamentrahmen + Pergament, 600×840 und damit exakt das Kartenformat 5:7, `100% 100%` verzerrt also nicht. ALLE elf Sonderkarten nutzen dieselbe Fläche; die früheren kartenspezifischen Flächentönungen (--face-bg für Dampfkoloss, Funkenfee, Kesselberster) sind laut Handoff entfallen. Unterschieden werden die Karten über Illustration, Name und Rahmenton – nur Koloss und Fee bekommen zusätzlich einen farbigen Schein (--card-glow aus SPECIAL_STYLE). */ .card.is-special { --kartenstoff:var(--ds-card-sheet-special); } .card.is-special .card-face { background:var(--kartenstoff) var(--ds-card-sheet-fit), var(--ds-card-face); box-shadow:inset 0 0 0 1px rgba(80,58,28,.35); } /* ── Zahlenkarten ──────────────────────────────────────────────── Wert + kleines Farbsymbol oben-links, identisch um 180° gedreht unten-rechts, großes Symbol zentriert. */ .card-corner { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1; } /* Eck-Offsets nach Handoff: x = Breite × .055, y = Breite × .04 */ .card-corner.tl { top:calc(var(--card-w) * .04); left:calc(var(--card-w) * .055); } .card-corner.br { bottom:calc(var(--card-w) * .04); right:calc(var(--card-w) * .055); transform:rotate(180deg); } /* Wert: Marcellus (--f-card-num), Größe = Breite × .29 × 1.12. Er liegt als Gravur IM Blatt – hell auf Rot/Blau/Grün, dunkel auf Gelb (Variablensatz oben). Als dunkle Tinte auf allen vier Blättern fiele der Kontrast auf Rot und Blau unter 3:1. */ .cc-num { font-family:var(--f-card-num); font-weight:400; font-size:calc(var(--card-w) * .325); line-height:.92; color:var(--engrave); -webkit-text-stroke:var(--engrave-stroke); text-shadow:var(--engrave-shadow); } /* Ecksymbol: Breite × .15, aber nie unter 9 px (Handoff) – darunter laufen die Striche zu. Unter 10 px Rendergröße entfällt es ganz; im Projekt trifft das die kleinen Karten, die es weiter unten ausblenden. */ .card-corner svg { width:max(9px, calc(var(--card-w) * .15)); height:auto; display:block; } .card:not(.is-special) .card-corner svg { color:var(--engrave-icon); } /* Großes Motiv – füllt die Fläche, bei Sonderkarten eingerückt für Name (oben) und Effekt-Hinweis (unten). */ .card-symbol { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; opacity:.92; } .card-symbol svg { width:calc(var(--card-w) * .48); height:auto; display:block; } /* Mittelsymbol der Zahlenkarte als Gravur im Blatt. Auf Gelb kippt der ganze Satz auf dunkel – inklusive Schlagschatten (dort weiß statt schwarz) und Deckkraft (.9 statt .95). */ .card:not(.is-special) .card-symbol { opacity:var(--engrave-mid-opacity); color:var(--engrave-mid); } .card:not(.is-special) .card-symbol svg { filter:var(--engrave-mid-shadow); } /* Motivfeld der Sonderkarte: unter der Trennlinie (bei .20), seitlich innerhalb des Ornamentrahmens. Die Werte waren früher großzügiger, weil der SVG-Glyph mit fester Breite (.50) mittig im Feld schwebte und die Ränder nie erreichte. Die Illustration füllt das Feld dagegen aus – ohne echte Grenzen liefe sie in Name und Hinweis. Grundstellung ist die Karte OHNE Hinweisband: der Handoff zeigt den Effekt-Hinweis erst ab 110 px Kartenbreite, „ohne Hinweis wächst die Illustration nach unten mit". Das Hinweisband schafft die Größenleiter am Dateiende wieder frei. */ .card.is-special .card-symbol { inset:calc(var(--card-w) * .235) calc(var(--card-w) * .07) calc(var(--card-w) * .07); opacity:1; } /* Sonderkarten-Illustration (Handoff assets/cards/.png, freigestellt mit Alphakanal und auf die Motiv-Bounding-Box zugeschnitten). Sie ersetzt den SVG-Glyph auf der KARTE; in Lobby-Toggles, Dialogen und Log bleibt der Glyph, weil die gezeichnete Fassung unter ~40 px nicht mehr lesbar ist. object-fit:contain im vorhandenen Motiv-Feld: Die Bilder haben ganz unterschiedliche Seitenverhältnisse (241×341 bis 391×385), jedes soll aber im selben Feld zwischen Trennlinie und Hinweis stehen, ohne es zu sprengen. Deshalb Prozentwerte statt fester Breite – anders als beim SVG. */ .card-illu { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; /* Grundstellung = die kleine Fassung des Handoffs: mehr Kontrast, damit die feine Schraffur nicht wegsackt, und ein knapperer Schatten. Sie gilt laut Handoff unter 110 px Kartenbreite – und darunter liegt im Spiel JEDE Karte (die breiteste misst 84 px). Den weichen Schatten der großen Fassung setzt die Größenleiter am Dateiende. */ filter:contrast(1.12) saturate(.95) drop-shadow(0 1px 1px rgba(60,40,15,.4)); } /* Angesagte Farbe von Fließband und Dampfwolke, ins Motiv gelegt. Beide Illustrationen tragen von Haus aus alle vier Farben (vierfarbiger Dampfstrahl bzw. vier farbige Zahnräder) – welche angesagt wurde, war bisher nur am kleinen Punkt unten abzulesen. Diese Ebene trägt die Farbe ins Motiv selbst. mix-blend-mode:color mischt NUR Farbton und Sättigung dazu und lässt die Helligkeit des Darunterliegenden stehen; die gestochene Schraffur bleibt also sichtbar, statt unter einer Farbfläche zu verschwinden. Die Maske ist dieselbe Bilddatei in derselben Box – beide werden mit `contain` zentriert eingepasst, decken sich also pixelgenau. Ohne Maske läge die Farbe über der ganzen Kartenfläche statt nur auf dem Motiv. */ .card-illu-tint { position:absolute; inset:0; pointer-events:none; background:var(--dc, var(--gold)); -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; mask-position:center; mask-size:contain; mask-repeat:no-repeat; mix-blend-mode:color; opacity:.92; } /* ── Sonderkarten: Name, Trennlinie, Effekt-Hinweis ─────────────── */ /* Handoff: Cinzel 700, EIN Größenband je Kartengröße (nicht stufenlos mit der Breite skaliert) und immer einzeilig. Passt der Name nicht in Kartenbreite − 12 px, setzt client.js die nächste Kurzform ein (Ausweichkette in game/CardNames.js) – umgebrochen wird nie. */ .card-name { position:absolute; top:var(--card-inset); z-index:2; left:var(--name-inset); right:var(--name-inset); text-align:center; line-height:1.05; font-family:var(--f-display); font-weight:700; font-size:var(--name-size); white-space:nowrap; overflow:hidden; letter-spacing:.02em; color:#3d2f18; } /* Bänder nach Kartenbreite: ≥110px → 11.5px · 80–109px → 10px · <80px → 8.5px. Im Spiel ist die breiteste Karte 84px, das oberste Band kommt also nicht vor. Unter 80px greift 8.5px – das betrifft .card-sm (54px) und ab dem 760px- Breakpoint auch die normale Karte (64px bzw. 56px), siehe dort. */ /* Kleine Karten zeigen keine Trennlinie – der Wert darf also direkt unter den Namen rücken. Mini zeigt zusätzlich keinen Namen. */ .card.card-sm { --name-size:8.5px; --rank-top:calc(var(--card-w) * .052 + var(--name-size) * 1.3); } .card-rule { position:absolute; z-index:2; left:var(--card-inset); right:var(--card-inset); top:calc(var(--card-w) * .20); height:1px; background:rgba(90,68,34,.35); } /* Effekt-Hinweis. Standardmäßig AUS: der Handoff zeigt ihn erst ab 110 px Kartenbreite („darunter entfällt er und das Icon wächst"). Eingeschaltet wird er allein von der Größenleiter am Dateiende. */ .card-hint { display:none; position:absolute; z-index:2; bottom:var(--card-inset); left:var(--card-inset); right:var(--card-inset); text-align:center; line-height:1.22; text-wrap:balance; font-family:var(--f-body); font-weight:600; font-size:calc(var(--card-w) * .079); /* Handoff-Ton: deutlich dunkler als früher – auf dem Pergament des Kartenblatts war #6b5a3a in Kartengröße kaum noch zu lesen. */ color:#46331a; } /* Zahlenwert der Karten mit Zwischenwert (Fließband 7½, Dampfwolke 9¾). Lag früher oben links GENAU unter dem Kartennamen, der die volle Breite einnimmt – der Wert war dadurch nicht lesbar. Er sitzt jetzt mittig im freien Band zwischen Trennlinie und Motiv. Dort ist er auf jeder Kartengröße frei, und der Name behält seine volle Breite (Fließband und Dampfwolke bleiben damit ausgeschrieben). Alle Maße sind Anteile von --card-w, skalieren also mit jeder Größe: Band beginnt bei .22 (Linie liegt bei .20), Motiv startet bei .167 + Höhe. GRÖSSE: .13 ergab auf Spielgröße (46–53 px Karte) 6 px – gerendert, aber nicht lesbar. Eine Zahlenkarte zeigt ihren Wert bei derselben Breite mit 15 px. Der Zwischenwert IST der Wert dieser Karte (Deck.js cardPower: 7,5 bzw. 9,75 in der angesagten Farbe), und auf kleinen Karten ist er die einzige Schrift überhaupt – Name und Regel sind dort ausgeblendet. Er steht jetzt bei .21, das sind rund 11 px auf der Handkarte. */ .card-rank { position:absolute; z-index:3; top:var(--rank-top); left:0; right:0; text-align:center; font-family:var(--f-num); font-weight:700; font-size:calc(var(--card-w) * .21); line-height:1; color:var(--ink); } /* ── Kartenrückseite ───────────────────────────────────────────── Fünf gelieferte Blätter (Handoff). Rahmen außen in Eisen, OHNE Nieten. Die früher hier gezeichneten Zahnräder (.cb-gear) sind entfallen: Sie hingen an `html[data-card-back]`, das IMMER gesetzt ist (game-auth.js schreibt „zahnwerk" als Vorgabe) – der Rückfall war also nie sichtbar. Bleibt ein Blatt aus, greift jetzt der Verlauf --ds-card-back als untere Ebene von .card-face-back (siehe dort). Die Blätter haben 9:16, die Karte 5:7 – deshalb `cover` und nicht `100% 100%`. Die Motive sind vertikal symmetrisch, der Beschnitt oben und unten fällt nicht auf, eine Verzerrung dagegen sofort. */ .card.card-facedown { --tone:var(--ds-iron); --tone-hi:#5c554a; /* Plaketten- und Schriftfarbe der Wortmarke; je Blatt überschrieben. */ --cb-plate:rgba(14,11,8,.8); --cb-ink:#f0d79a; } /* Blatt UND Rückfall liegen als zwei Ebenen übereinander, nicht als var()-Ausweichwert. Der Unterschied ist entscheidend: `var(--ds-card-back-blatt, var(--ds-card-back))` greift nur, wenn die VARIABLE fehlt – und die ist immer gesetzt (html[data-card-back] trägt game-auth.js grundsätzlich ein). Lädt dagegen die WebP nicht (404, abgebrochene Verbindung, Bildformat nicht unterstützt), bleibt die Ebene einfach leer, und die Karte stünde ohne Fläche da. Als eigene Ebene darunter zeichnet der Verlauf in genau diesem Fall. */ .card-face-back { background:var(--ds-card-back-blatt, none) var(--ds-card-back-fit), var(--ds-card-back); box-shadow:inset 0 0 0 1px rgba(200,150,60,.3); } /* ── Farbtabelle der fünf Rückseiten ───────────────────────────── Je Motiv drei Werte aus der Handoff-Tabelle: Rahmenton (--tone, der äußere Metallrahmen), Farbe der Wortmarken-Plakette (--cb-plate) und Schriftfarbe darauf (--cb-ink). Der Handoff-Key steht in Klammern. Die Blattpfade stehen als Tokens in tokens.css, damit sie nicht doppelt gepflegt werden. ZWEI Wege in dieselbe Tabelle, weil es zwei Situationen gibt: html[data-card-back="…"] – das Spiel: EINE gewählte Rückseite für alle verdeckten Karten (game-auth.js setzt das Attribut am ). .card-facedown[data-back] – die Vorschau: FÜNF Karten nebeneinander, jede in ihrem eigenen Motiv (Profil → „Design & Premium"). Das :not([data-back]) im ersten Zweig ist nicht kosmetisch: ohne es würde die dokumentweite Regel (höhere Spezifität durch das html-Element) auch die Vorschaukacheln einfärben, und alle fünf sähen aus wie die gerade gewählte Rückseite. */ html[data-card-back="zahnwerk"] .card.card-facedown:not([data-back]), .card.card-facedown[data-back="zahnwerk"] { /* messing */ --ds-card-back-blatt:var(--ds-card-back-zahnwerk); --tone:#8a6425; --tone-hi:#bc9457; --cb-plate:rgba(14,11,8,.8); --cb-ink:#f0d79a; } html[data-card-back="kupferstich"] .card.card-facedown:not([data-back]), .card.card-facedown[data-back="kupferstich"] { /* kupfer */ --ds-card-back-blatt:var(--ds-card-back-kupferstich); --tone:#8c5a2f; --tone-hi:#be8c61; --cb-plate:rgba(24,14,9,.78); --cb-ink:#f2c69a; } html[data-card-back="reissbrett"] .card.card-facedown:not([data-back]), .card.card-facedown[data-back="reissbrett"] { /* blaupause */ --ds-card-back-blatt:var(--ds-card-back-reissbrett); --tone:#2f5f86; --tone-hi:#6191b8; --cb-plate:rgba(10,26,40,.78); --cb-ink:#eaf3fa; } html[data-card-back="patina"] .card.card-facedown:not([data-back]), .card.card-facedown[data-back="patina"] { /* patina */ --ds-card-back-blatt:var(--ds-card-back-patina); --tone:#6b7a2a; --tone-hi:#7f8e3e; --cb-plate:rgba(12,20,10,.78); --cb-ink:#f0e2a2; } html[data-card-back="uhrwerk"] .card.card-facedown:not([data-back]), .card.card-facedown[data-back="uhrwerk"] { /* elfenbein */ --ds-card-back-blatt:var(--ds-card-back-uhrwerk); --tone:#b9b2a4; --tone-hi:#c5beb0; --cb-plate:rgba(46,16,18,.78); --cb-ink:#f6efe4; } /* Die Wortmarke ist NICHT Teil der Bilder – sie liegt als Foliendruck- Plakette mittig auf dem Blatt (Handoff): Band von 8 % bis 92 % Breite, vertikal zentriert, Höhe max(13px, Breite × .155). */ .cb-word { position:absolute; z-index:2; left:8%; right:8%; top:50%; transform:translateY(-50%); height:max(13px, calc(var(--card-w) * .155)); border-radius:calc(max(13px, var(--card-w) * .155) * .18); display:flex; align-items:center; justify-content:center; background:var(--cb-plate); backdrop-filter:blur(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.5); font-family:var(--f-logo); font-weight:700; font-size:max(6.5px, calc(var(--card-w) * .088)); letter-spacing:.04em; color:var(--cb-ink); white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,.7); } /* Die weite Sperrung (.1em) gilt laut Handoff erst ab 110 px Kartenbreite. Die breiteste Karte im Spiel misst 84 px, deshalb bleibt es hier bei den .04em oben – die Marke würde sonst über das Band hinauslaufen. */ /* ── Zustände (jeder mit Touch-Äquivalent, kein reines Hover) ───── */ .card.playable { cursor:pointer; box-shadow:inset 0 0 0 2px var(--ds-brass-hi), var(--ds-shadow-card), var(--card-glow, 0 0 transparent); } .card.not-legal { filter:grayscale(.85) brightness(.6); cursor:not-allowed; } /* Schloss-Badge: signalisiert „gesperrt" auch ohne Hover/Farbsehen */ .card-lock { position:absolute; left:50%; bottom:calc(var(--card-w) * .07); transform:translateX(-50%); z-index:4; width:calc(var(--card-w) * .38); height:calc(var(--card-w) * .38); min-width:16px; min-height:16px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(26,20,16,.85); border:1px solid var(--ds-blindgaenger); } .card-lock svg { width:70%; height:auto; } /* ── Größenvarianten ──────────────────────────────────────────── Kleine Karten (Trumpf-Panel, Dialoge, Sitzkarten) tragen die volle Anatomie nicht – dort bleiben Motiv + Wert, Text entfällt. */ .card.card-sm { --card-w:54px; --card-h:76px; } .card.card-mini { --card-w:46px; --card-h:64px; } /* Die Trennlinie sitzt bei .20 der Kartenbreite und liefe hier durch den Namen – auf der kleinen Karte entfällt sie deshalb. (Den Hinweis blendet schon die Grundstellung aus, siehe .card-hint.) */ .card.card-sm .card-rule { display:none; } /* Das Namensfeld nutzt denselben Rahmen-Einzug wie alle Inhalte – bei der Desktop-Karte sind das rund die „Kartenbreite − 12 px" aus dem Handoff. client.js kürzt den Namen anhand genau dieser Breite (Kurzform-Kette). */ .card.card-sm .card-corner.br { display:none; } .card.card-sm .card-corner svg { display:none; } /* Ohne Trennlinie und Hinweis reicht das Motivfeld hier tiefer hinunter – seitlich bleibt es innerhalb des Ornamentrahmens. */ .card.card-sm.is-special .card-symbol { inset:calc(var(--card-w) * .21) calc(var(--card-w) * .07) calc(var(--card-w) * .07); } /* Mini: nur noch Motiv und Wert */ .card.card-mini .card-name { display:none; } .card.card-mini.is-special .card-symbol { inset:calc(var(--card-w) * .07); } .card.card-mini .cb-word { display:none; } /* Karten mit Zwischenwert (Fließband/Dampfwolke): Das Motiv rückt ein Stück nach unten, damit der Wert im Band darüber freisteht. Ohne das säße das Motiv bei den kleinen Karten direkt auf der Ziffer. */ .card.has-rank.is-special .card-symbol { inset:calc(var(--rank-top) + var(--card-w) * .30) calc(var(--card-w) * .07) calc(var(--card-w) * .07); } .card.card-mini { --name-size:0px; --rank-top:calc(var(--card-w) * .09); } /* ═══════════════════════════════════════════════════════════════ GRÖSSENLEITER — hängt an der ECHTEN Kartenbreite, nicht an einer Klasse --------------------------------------------------------------- --card-w wird an vielen Stellen gesetzt: Handkarte, Stichablage, Sitzkarten, Trumpf-Panel, Dialoge, Hero-Fächer und Galerie der Landingpage. Die Anatomie hing bisher an .card-sm/.card-mini – und wer nur --card-w überschrieb, ohne die Klasse mitzugeben, bekam die volle Anatomie in Miniaturgröße. Genau das passierte der Stichablage auf dem Handy (46 px Karte, Hinweistext in 3,6 px, Name abgeschnitten). @container misst die INHALTSBOX der Karte, also Kartenbreite minus dem Rahmen-Padding von 2 × .058. Die Handoff-Schwellen umgerechnet: 110 px Karte → 97.3 px Fläche (Hinweis, großer Illustrationsschatten) 50 px Karte → 44.2 px Fläche (darunter kein Name mehr) Beide Blöcke sind so herum geschrieben, dass ein Browser ohne Container-Queries auf dem sicheren Zustand landet: Hinweis aus (er ist der unlesbare Teil), Name an. ═══════════════════════════════════════════════════════════════ */ /* ── Ab 110 px Kartenbreite: das volle Blatt aus dem Handoff ── Effekt-Hinweis unten, Motivfeld endet darüber, Illustration bekommt den weichen Schatten der großen Fassung. Im Spiel wird das nie erreicht (breiteste Karte 84 px) – es gilt für die Sonderkarten-Galerie der Landingpage, wo der Hinweis mit 10.4 px auch wirklich lesbar ist. */ @container (min-width: 97.3px) { .card-hint { display:block; } .card.is-special .card-symbol { inset:calc(var(--card-w) * .235) calc(var(--card-w) * .07) calc(var(--card-w) * .27); } .card.has-rank.is-special .card-symbol { inset:calc(var(--rank-top) + var(--card-w) * .32) calc(var(--card-w) * .07) calc(var(--card-w) * .27); } .card-illu { filter:drop-shadow(0 1px 2px rgba(60,40,15,.35)); } } /* ── Unter 50 px Kartenbreite: nur noch Motiv und Wert ── Das kleinste Namensband des Handoffs ist 8.5 px; darunter gibt es keine Stufe mehr, und die Kurzform-Kette endet bei rund 40 px Textbreite. Statt noch kürzere Kunstwörter zu erfinden, entfällt der Name – so wie es .card-mini schon immer getan hat. Diese Regel zieht denselben Zustand für JEDE Karte dieser Breite, auch ohne Klasse. */ @container (max-width: 44.19px) { .card-name, .card-rule { display:none; } .card.is-special .card-symbol { inset:calc(var(--card-w) * .07); } /* --rank-top säße auf der Karte selbst, und die ist ihr eigener Container – @container greift nur auf Nachkommen. Der Zwischenwert bekommt seine Oberkante deshalb direkt, mit demselben Wert wie bei .card-mini … … und das Motivfeld darunter dieselbe Rechnung. Sonst behielte es den aus --rank-top abgeleiteten Abstand, der noch einen Namen einplant, und ließe über der Illustration ein leeres Band stehen. */ .card-rank { top:calc(var(--card-w) * .09); } .card.has-rank.is-special .card-symbol { inset:calc(var(--card-w) * .38) calc(var(--card-w) * .07) calc(var(--card-w) * .07); } }