/* Cold Start - Kartendeck (deck.html, assets/deck.js) */
.deck-page { background: #14110d; overscroll-behavior-x: none; } /* keine Wisch-Navigation */
html:has(.deck-page) { overscroll-behavior-x: none; }
/* Deck als SPALTE links, Sammlung rechts (Bastian, 2026-10-18). Bis dahin
stand das Deck als Band oben: `flex-direction: column`. Das Band musste
alle Stapel in EINE Reihe bringen und schob sie dafuer uebereinander
(fitStrip) - bei einem vollen Deck lagen die Namen untereinander
begraben. Die Spalte hat Platz nach unten, und das Deck zerfaellt darin
in die zwei Dinge, die es ist: Aufstellung und Nachziehstapel. */
.dk-main {
flex: 1; min-height: 0;
display: flex; flex-direction: row;
}
@media (max-width: 860px) {
/* Auf schmalen Schirmen wieder untereinander - eine 392-px-Spalte neben
der Sammlung liesse fuer diese nichts uebrig. */
.dk-main { flex-direction: column; }
.dk-deck { width: auto; max-height: 46vh; border-right: 0;
border-bottom: 1px solid var(--panel-edge); }
}
/* ---------------------------------------------------------- Sammlung */
.dk-left { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dk-bar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 12px 18px;
border-bottom: 1px solid var(--panel-edge);
background: rgba(0, 0, 0, .2);
}
.dk-seg { display: flex; border: 1px solid var(--panel-edge); border-radius: var(--radius); overflow: hidden; }
.dk-seg button {
padding: 7px 14px; border: 0; border-left: 1px solid var(--panel-edge);
background: rgba(0, 0, 0, .25); color: var(--ink-dim);
font: 600 13px var(--font); cursor: pointer;
}
.dk-seg button:first-child { border-left: 0; }
.dk-seg button:hover { color: var(--ink); }
.dk-seg button.is-on { background: rgba(201, 162, 39, .18); color: var(--gold); }
.dk-hint { margin: 0; font-size: 12px; color: var(--ink-mute); }
.dk-err { color: var(--foe); padding: 20px; }
/* Waagerecht wird NICHT gescrollt (Bastian, 2026-09-29). Der Faecher der
letzten Spalte steht rund 22 px ueber den Rand hinaus; mit overflow-y: auto
allein macht der Browser daraus von selbst ein overflow-x: auto - dann gibt
es eine Querleiste, die nichts zeigt ausser der Kante des Stapels. Die darf
der Rand ruhig abschneiden. (Und waagerechtes Wischen loest in Chrome gern
die Zurueck-Navigation aus - siehe overscroll-behavior-x weiter unten.)
hidden, nicht clip: sobald die andere Achse scrollt, rechnet der Browser
ein overflow-x: clip ohnehin zu hidden herunter - geprueft, die berechnete
Regel meldet dann "hidden". Der Inhalt bleibt damit theoretisch
verschiebbar; von Hand erreichbar ist er nicht, es gibt keine Leiste. */
.dk-pool { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 18px 30px; }
.dk-h { margin: 16px 0 10px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); }
.dk-h small { color: var(--ink-mute); font-weight: 400; margin-left: 4px; }
/* Spaltenabstand 24 px (Bastian, 2026-09-28, zum Ansehen): der Faecher steht
rund 39 px ueber, seine aeusserste Kante rutscht damit unter die
Nachbarkarte. Fuer den vollen Faecher braeuchte es 40 px - siehe die
Fassung mit 34 px, die acht Spalten hielt. */
/* Kartengroesse nach Bildschirmbreite (Bastian, 2026-10-08: "in der
Kartensammlung ist der mehr Platz ja cool, aber es wirkt auf so einem
Bildschirm dann alles zu klein, also vielleicht passen wir die Groesse der
Karten an den Bildschirm an").
Vorher stand hier eine feste Mindestbreite von 150 Pixeln. Auf 3440 Pixeln
ergab das neunzehn Karten nebeneinander - jede so gross wie auf einem
Laptop, nur neunzehn davon. Der gewonnene Platz ging in die ANZAHL, und
die braucht niemand: man sucht eine Karte, man zaehlt sie nicht.
Jetzt geht er in die GROESSE. Die Zahlen sind so gewaehlt, dass sich auf
den verbreiteten 1920ern nichts aendert (7,8vw sind dort 150 Pixel, also
genau die alte Untergrenze); darueber waechst die Karte mit, bis bei
260 Pixeln Schluss ist - groesser faengt eine Uebersicht an, eine
Diaschau zu werden.
Die Karte selbst ist ein SVG mit width:100% und zieht einfach mit; es gibt
keine Rastergrafik, die dabei weich wuerde. */
.dk-grid {
display: grid;
--dk-karte-min: 150px;
grid-template-columns: repeat(auto-fill, minmax(clamp(var(--dk-karte-min), 7.8vw, 260px), 1fr));
gap: 30px 24px; padding-top: 18px;
} /* ohne Zaehlerleiste (Bastian): Stapel zeigt die Anzahl */
/* Tablets (Bastian, 2026-10-08: "eventuell bringt uns das auch in Sachen
Tablets zu einer besseren Darstellung?").
Die Regel oben allein bringt dort nichts: 7,8vw sind auf einem iPad quer
rund 92 Pixel, die Untergrenze greift, alles bleibt wie es war. Auf
Tablets ist auch nicht die Breite knapp, sondern der FINGER - eine 150
Pixel breite Karte, aus deren Faecher man ein bestimmtes Exemplar treffen
soll, ist mit der Fingerkuppe etwas anderes als mit einem Mauszeiger.
Also haengt die Untergrenze am Zeigegeraet und nicht an der Breite.
Die 700 Pixel sind kein Schoenheitsmass, sondern ein Riegel: ohne sie
greift die Regel auch auf dem Handy, und dort bliebe bei 190 Pixeln
Mindestbreite EINE Karte je Reihe stehen - aus einer Uebersicht wuerde
eine Diaschau. */
@media (pointer: coarse) and (min-width: 700px) {
.dk-grid { --dk-karte-min: 190px; }
}
.dk-empty { margin: 4px 0 8px; }
/* Stapel: mehrere Exemplare liegen sichtbar hintereinander. Die hinteren
Karten sind nur Kanten (.dk-layer), nach rechts oben versetzt. */
.dk-stack {
position: relative;
padding: 0; border: 0; background: none;
cursor: pointer;
text-align: left;
transition: transform .12s ease;
}
.dk-face { position: relative; display: block; z-index: 2; }
.dk-face svg.cs-card { display: block; width: 100%; height: auto; }
.dk-layer {
position: absolute; left: 0; right: 0; top: 0;
aspect-ratio: 5 / 7;
border-radius: 7%/5%;
background: linear-gradient(#262019, #16120d);
border: 1px solid #5a4a2a;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
z-index: 1;
}
/* In den DECKS - Band oben und "Deck ansehen" - liegen die Karten schraeg
nach rechts oben versetzt (Variante C, Bastian 2026-09-28). Dort stehen die
Karten dicht an dicht; ein Faecher braucht seitlich Platz, den es da nicht
gibt, der Versatz kommt mit einer Kante aus. Der Faecher bleibt der
Sammlung vorbehalten, siehe weiter unten. */
.dk-layer[data-i="1"] { transform: translate(4px, -4px); }
.dk-layer[data-i="2"] { transform: translate(8px, -8px); z-index: 0; }
.dk-layer[data-i="3"] { transform: translate(12px, -12px); z-index: -1; }
.dk-stack { cursor: default; }
/* Voll im Deck heisst NICHT ausgegraut (Bastian, 2026-10-01).
Vorher nahm die Karte Farbe und Helligkeit zurueck, sobald die erlaubte
Zahl im Deck lag. Das las sich wie "gesperrt" oder "besitzt du nicht" -
dabei ist es eine Aussage ueber das DECK, nicht ueber die Karte. Die
Sammlung zeigt, was man hat; wie oft etwas schon im Deck liegt, steht im
Tooltip ("im Deck 3 / 3") und auf dem Deckstapel daneben.
Die Kachel bleibt unziehbar - nur eben ohne Trauerflor. */
.dk-tile.is-full { cursor: default; }
.dk-count {
position: relative; z-index: 2;
white-space: nowrap;
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 5px; padding: 3px 8px;
border: 1px solid var(--panel-edge); border-radius: 6px;
background: rgba(15, 12, 8, .6);
font: 600 12px var(--font); color: var(--ink-dim);
}
.dk-count b { color: var(--gold); font-size: 14px; }
.dk-count small { font-size: 10.5px; font-weight: 400; color: var(--ink-mute); }
/* ---------------------------------------------------------------- Deck
Band oben ueber die volle Breite: Kopfzeile mit Platz, Name, Punkten und
Knoepfen, darunter die Karten als kleine Stapel (waagerecht scrollbar). */
.dk-deck {
flex: none; width: 392px; box-sizing: border-box;
display: flex; flex-direction: column; min-height: 0;
overflow-y: auto; overscroll-behavior: contain;
padding: 10px 16px 24px;
background: linear-gradient(#1c1610, #120e0a);
border-right: 1px solid var(--panel-edge);
box-shadow: 6px 0 16px rgba(0, 0, 0, .35);
position: relative; z-index: 1;
}
/* --dk-feld ist die gemeinsame Hoehe von Namensfeld und Gattungsfeldern
(Bastian, 2026-10-10: "dann kann das Feld eventuell genau so hoch werden
wie das Eingabefeld"). Einmal gesetzt, zweimal gelesen. */
/* In der Spalte steht die Kopfzeile UNTEREINANDER. Die Regeln dafuer, in
welcher Reihenfolge, stehen weiter unten bei den einzelnen Teilen; hier
nur die Richtung. --dk-feld bleibt die gemeinsame Hoehe von Namensfeld
und Gattungsfeldern. */
.dk-head {
position: relative; display: flex; flex-direction: column;
align-items: stretch; gap: 9px;
--dk-feld: 34px;
}
/* Fraktion und Plaetze nebeneinander, der Name daneben - drei Zeilen
waeren Verschwendung bei 392 px. */
.dk-head .dk-factions { align-self: stretch; }
.dk-head .dk-factions button { flex: 1; display: flex; align-items: center;
justify-content: center; gap: 7px; }
.dk-head .dk-factions svg { display: block; width: 24px; height: auto; }
/* Plaetze, Name und Dreipunkt in EINER Zeile. Der Name nimmt, was
uebrig bleibt - die drei Platzknoepfe und der Dreipunkt sind fest. */
.dk-kopfzeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dk-kopfzeile .dk-title { flex: 1 1 auto; width: auto; min-width: 0; }
.dk-kopfzeile .dk-slots { flex: none; }
/* Schmaler als in der Reihe: drei Knoepfe a 44 px plus Dreipunkt plus
Namensfeld passen in 392 px nur knapp. */
.dk-deck .dk-slot { width: 36px; }
.dk-deck .dk-mehr-btn { width: 32px; padding: 7px 0; }
/* Die Speichermeldung stand frueher neben dem Dreipunkt in der Ecke.
In der Spalte steht sie unter der Gattungsreihe und darf umbrechen. */
.dk-deck .dk-saved { margin: 0; min-height: 0; }
.dk-slots { display: flex; gap: 6px; }
.dk-slot {
position: relative;
width: 44px; padding: 7px 0; border: 1px solid var(--panel-edge); border-radius: var(--radius);
background: rgba(0, 0, 0, .25); color: var(--ink);
font: 800 15px var(--font); cursor: pointer;
}
.dk-slot.is-empty { color: var(--ink-mute); }
.dk-slot.is-draft { border-style: dashed; }
.dk-slot.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .15); color: var(--gold); }
.dk-slot.is-active::after { content: '★'; position: absolute; top: -6px; right: -3px; font-size: 12px; color: var(--gold); }
.dk-title {
width: 190px; box-sizing: border-box; height: var(--dk-feld);
padding: 0 10px;
border: 1px solid var(--panel-edge); border-radius: var(--radius);
background: rgba(0, 0, 0, .3); color: var(--ink);
font: 700 15px var(--font);
}
.dk-title:focus { outline: none; border-color: var(--gold); }
/* Punkte: Balken, daneben der Befund, darunter die Zaehlzeile. Zwei
Zeilen - so ist der Block etwa so hoch wie die Knoepfe daneben und die
Kopfzeile bleibt EINE Linie (Bastian, 2026-10-10). */
/* ACHTUNG, FLEX-RICHTUNG: Bis zum 18.10.2026 war die Kopfzeile eine REIHE,
und `flex: 1 1 300px` hiess "mindestens 300 px breit". Seit sie eine
SPALTE ist, heisst dieselbe Zeile "mindestens 300 px HOCH" - und genau
so sah es aus: zwischen Punkteleiste und Gattungsreihe klaffte ein
handgrosses Loch. In der Spalte darf der Block nur so hoch sein, wie
sein Inhalt ist.
Merksatz: Wer die Richtung eines Flex-Containers dreht, dreht die
Bedeutung jeder flex-basis darin mit. */
.dk-points { flex: none; min-width: 0; }
@media (max-width: 860px) { .dk-points { flex: 1 1 300px; min-width: 240px; } }
.dk-balken { display: flex; align-items: center; gap: 10px; }
/* Der Balken ist zugleich die Zustandsanzeige des Decks: gruen =
spielbar, rot = da fehlt noch etwas. Den roten Satz daneben gibt es
nicht mehr; die Gruende stehen in der Tafel beim Ueberfahren
(deck.js, balkenTafel). Darum ist er auch etwas hoeher als vorher -
8 px waren als blosse Fuellstandsanzeige gedacht. */
.dk-meter {
flex: 1 1 120px; height: 10px; border-radius: 5px;
background: rgba(255, 255, 255, .08); overflow: hidden;
/* Kein cursor: help mehr - das Fragezeichen des Systems (Bastian,
2026-10-23); die Tafel beim Ueberfahren erklaert sich selbst. */
}
.dk-meter span { display: block; height: 100%; background: var(--gold); transition: background .15s; }
.dk-meter.ist-bereit span { background: var(--ok); }
.dk-meter.ist-offen span { background: #b4543f; }
/* Zu teuer ist der eine Fall, in dem schon die LAENGE etwas sagt: der
Balken steht am Anschlag. Dann das kraeftigere Rot. */
.dk-meter.is-over span { background: var(--foe); }
.dk-sum { margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.dk-sum b { color: var(--ink); font-size: 15px; }
/* Die Mindestzahl steht hinter der Einheitenzahl und nicht mehr als roter
Satz darunter (Bastian, 2026-10-10). Sie steht IMMER da - wie "/100" bei
den Punkten ist sie eine Regel, keine Meldung; nur wenn sie noch nicht
erfuellt ist, faellt sie auf. */
.dk-min { font-style: normal; color: var(--ink-mute); }
.dk-min.ist-offen { color: #e0a08e; font-weight: 600; }
/* Die Gattungen als Reihe (Bastian, 2026-10-10). Jedes Feld: Zeichen,
dahinter wie viele im Deck liegen und dahinter die Grenze.
Zahl NEBEN dem Zeichen, nicht darunter (Bastian: "versuch mal die Zahlen
hinter die Icons zu schreiben, dann kann das Feld eventuell genau so
hoch werden wie das Eingabefeld"). Die Hoehe ist deshalb dieselbe wie
die des Namensfeldes daneben (--dk-feld): drei verschieden hohe Kaesten
in einer Kopfzeile sehen aus wie drei Zufaelle.
Die Reihe steht zwischen der Punktzeile und dem Befund - sie gehoert zu
den Zahlen, nicht zu den Meldungen. Sie darf umbrechen: auf schmalen
Fenstern sind neun Felder nebeneinander zu viel, und eine Reihe, die
waagerecht rollt, findet niemand.
Der Name steht nur in der Hinweistafel: neun Namen nebeneinander passen
nur abgekuerzt auf die Zeile, und "KAMPFPAN..." sagt weniger als das
Zeichen, das auf jeder Karte und jeder Marke dasselbe ist. */
.dk-gatt {
display: flex; flex-wrap: wrap; gap: 4px;
flex: 0 1 auto;
}
.dk-gatt-f {
flex: 0 0 auto;
display: flex; align-items: center; gap: 5px;
height: var(--dk-feld, 34px); box-sizing: border-box;
padding: 0 8px;
border: 1px solid #332a1f; border-radius: var(--radius);
background: rgba(255, 255, 255, .03);
}
.dk-gatt-f svg { display: block; width: 24px; height: 21px; fill: var(--ink-dim); }
.dk-gatt-f b { font: 700 13px var(--font); color: var(--ink); line-height: 1; }
.dk-gatt-f b i { font-style: normal; font-weight: 600; color: var(--ink-mute); }
/* Nichts davon im Deck: das Feld tritt zurueck, bleibt aber lesbar - die
Reihe soll vollstaendig sein, nicht gleich laut. */
.dk-gatt-f.ist-leer { opacity: .55; }
.dk-gatt-f.ist-leer b { color: var(--ink-mute); }
/* Grenze genau erreicht: Gold wie die Punkteleiste. Darueber: dieselbe
Farbe wie der Befund darunter, damit beides zusammengehoert. */
.dk-gatt-f.ist-voll { border-color: var(--gold); }
.dk-gatt-f.ist-voll b { color: var(--gold); }
.dk-gatt-f.ist-voll svg { fill: var(--gold); }
.dk-gatt-f.ist-drueber { border-color: var(--foe); background: rgba(190, 90, 70, .14); }
.dk-gatt-f.ist-drueber b, .dk-gatt-f.ist-drueber b i { color: #f0b5a4; }
.dk-gatt-f.ist-drueber svg { fill: #f0b5a4; }
/* Der Befund steht hinter dem Balken, nicht darunter. Er darf umbrechen:
ein langer Befund ist eine Auskunft, die man braucht - abgeschnitten
waere er schlimmer als zwei Zeilen hoch. */
/* Der Dreipunkt steht oben in der Ecke (Bastian, 2026-10-10: "das oben noch
in die Ecke, wird die Punktanzeige kuerzer"). Er ist aus dem Fluss
genommen, damit die Punktanzeige die ganze uebrige Breite bekommt und
nicht mehr gegen zwei Knoepfe antritt. Die Speichermeldung haengt klein
darunter und liegt ueber dem Band, damit die Kopfzeile einzeilig bleibt. */
/* Der Dreipunkt steht seit dem 18.10.2026 in der Kopfzeile NEBEN dem
Namensfeld, nicht mehr absolut in der Ecke (Bastian: "Das
Dreipunktmenue gehoert da nicht hin, vielleicht ABC und dann das
Textfeld und daneben das Dreipunktmenue?"). Die Ecke stammte aus der
Zeit des Bands; in der Spalte sass er mitten in der Flaggenleiste und
sah aus, als gehoerte er zu Russland. */
.dk-actions { flex: none; display: flex; gap: 8px; }
.dk-actions .btn { white-space: nowrap; }
/* Dreipunkt-Menue (Bastian, 2026-10-02): Truppenappell, Zuruecksetzen und
Leeren liegen dahinter. Die Tafel kommt aus .gm-menu in style.css - genau
die des Zahnradmenues im Gefecht, damit es nicht zwei Sorten Klappmenues
gibt. Hier steht nur, was anders ist. */
.dk-mehr-feld { position: relative; }
.dk-mehr-btn {
width: 34px; padding: 9px 0;
font-size: 17px; line-height: 1;
}
/* Ueber die Speichermeldung, die im selben Kasten unter den Knoepfen haengt.
Deckend, nicht wie .gm-menu bei 97 %: im Gefecht liegt das Menue ueber dem
Brett, hier ueber dem Deckband - und die Kartenruecken schimmerten gemessen
durch die Schrift. */
.dk-mehr-menu {
z-index: 6; min-width: 216px;
background: linear-gradient(#211a13, #15100b);
}
/* Die beiden Befehle, die das Deck wegwerfen, stehen unter einem Trenner und
sind als Warnung gefaerbt - vorher stand "Zuruecksetzen" ohne Abgrenzung
gleich ueber "Leeren" (Bastian, 2026-10-02: "Beides zerstoert mein
bisheriges Deck"). Kein roter Block wie beim Aufgeben im Gefecht: das waere
fuer einen Deckbau zu laut. Die Schrift reicht, der Trenner trennt. */
/* 2026-10-18: nicht mehr rot (Bastian: "Zuruecksetzen und Leeren sollen
nicht mehr rot sein"). Der Trenner bleibt, die Farbe ist die normale. */
.dk-mehr-menu button[disabled] { color: var(--ink-mute); opacity: .5; cursor: not-allowed; }
.dk-mehr-menu button[disabled]:hover { background: none; color: var(--ink-mute); }
.dk-saved {
position: absolute; right: 0; top: 100%; margin: 3px 0 0;
font-size: 11px; color: var(--ink-mute); white-space: nowrap;
}
/* Das Band ist zur Spalte geworden (18.10.2026): kein waagerechtes
Nebeneinander mehr, sondern Aufstellung und Nachziehstapel
untereinander. .dk-strip ist jetzt nur noch die Huelle dafuer. */
.dk-strip { display: block; padding: 14px 0 0; }
/* Eine Zwischenueberschrift in der Spalte - Wort links, Zahl rechts. */
.dk-zone-h {
display: flex; align-items: baseline; gap: 8px;
margin: 16px 0 0;
font: 700 11px var(--font); letter-spacing: 1.4px; text-transform: uppercase;
color: var(--ink-mute);
}
.dk-zone-h span { margin-left: auto; letter-spacing: 0; text-transform: none;
font-weight: 600; color: var(--ink-dim); }
/* Die sechs Aufstellungsplaetze. In einer 392-px-Spalte werden daraus 3x2;
eine Reihe von sechs braeuchte rund 620 px. Das ist der Preis der Spalte,
und er steht hier, damit er nicht als Versehen gelesen wird. */
.dk-plaetze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.dk-platz {
position: relative; aspect-ratio: 5 / 4; border-radius: 9px; cursor: grab;
border: 1px solid var(--panel-edge); overflow: hidden;
background: radial-gradient(ellipse at 50% 92%, rgba(201,162,39,.1), transparent 70%), #100d09;
}
.dk-platz img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; object-position: 50% 78%; }
.dk-platz-nr { position: absolute; top: 3px; left: 5px; z-index: 1;
font: 700 10px var(--font); color: var(--ink-mute); }
.dk-platz-n {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 7px 4px 3px; text-align: center;
font: 600 10.5px var(--font); color: var(--ink-dim);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: linear-gradient(transparent, rgba(16,13,9,.92) 55%);
}
/* Vorgeschlagen statt selbst gewaehlt: gestrichelt, wie der Entwurfs-Platz.
Die Auskunft gab es bisher als Marke "Start 1" auf dem Stapel; in der
Spalte traegt sie der Platz selbst. */
.dk-platz.ist-vorschlag { border-style: dashed; }
.dk-platz.ist-vorschlag .dk-platz-n { color: var(--ink-mute); font-style: italic; }
.dk-platz.is-frei { border-style: dashed; background: rgba(255,255,255,.02); }
.dk-platz.is-frei::after {
content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
font: 300 26px var(--font); color: var(--ink-mute);
}
/* Waehrend etwas gezogen wird, zeigen die Plaetze, dass sie Ziele sind -
sonst sieht man der Aufstellung nicht an, dass man dort ablegen kann
(Bastian, 18.10.2026: "man muss im Deck per drag & drop Einheiten in
die Startaufstellung ziehen koennen oder darin tauschen"). */
/* Gleiche Strichelung wie die Spalte drumherum (Bastian, 31.10.2026: "die
gestrichelten Linien sehen unterschiedlich aus, die Farbe ist
unterschiedlich und auch die Dicke"). Vorher: Spalte 2 px als outline,
die Plaetze 1 px als border in gedaempftem Gold - und gestrichelt nur die
vorgeschlagenen. Jetzt tragen die Plaetze dieselbe outline wie
#dk-deck / .dk-left (2 px, dashed, Gold 50 %), werden mit der Spalte
voll gold, und der Platz unter dem Zeiger wird durchgezogen (ist-ziel,
gesetzt in dragMove - :hover kam waehrend des Ziehens nicht zuverlaessig). */
body.dk-dragging .dk-platz {
border-color: transparent;
outline: 2px dashed rgba(201, 162, 39, .5); outline-offset: -2px;
}
body.dk-dragging.dk-drop-ok .dk-platz { outline-color: var(--gold); }
body.dk-dragging .dk-platz.ist-ziel {
outline: 2px solid var(--gold); background: rgba(201, 162, 39, .14);
}
/* Der Nachziehstapel als KARTEN (Bastian, 17.10.2026: "In der Deck Spalte
moechte ich wieder die karten haben, keine Liste."), drei je Reihe. */
.dk-vorrat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.dk-vorrat .dk-mini { width: auto; }
/* Die hinteren Exemplare mit derselben feinen Goldkante wie in der
Sammlung (Bastian, 31.10.2026: "ja B") - vorher waren sie vor dem
dunklen Grund nicht zu sehen. Versatz unveraendert (4 px je Blatt). */
.dk-vorrat .dk-layer { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .5), 0 2px 6px rgba(0, 0, 0, .6); }
.dk-vorrat .dk-layer[data-i="1"] { filter: brightness(1.35); }
.dk-vorrat .dk-layer[data-i="2"] { filter: brightness(1.15); }
/* Die Ueberlappungsregel des Bands ist entfallen (18.10.2026): im Raster
der Spalte steht jeder Stapel fuer sich. */
.dk-mini:hover, .dk-mini:focus-visible { z-index: 5; }
.dk-mini { flex: none; width: 96px; }
/* Das Deckband nimmt dieselben Winkel; bei 96 px Kartenbreite steht die
hinterste Kante nur rund 11 px ueber, das traegt der Abstand im Band. */
.dk-badge {
position: absolute; z-index: 3; left: -3px; bottom: -3px; /* links: rechts deckt die naechste Karte ab */
/* Zurueckhaltend und klein (Bastian, 2026-09-29): kein Rand, gedaempfte
Schrift, dunkle Scheibe nur so gross, dass die Ziffer ueber jedem
Kartenmotiv lesbar bleibt. Zweistellig traegt sie ueber min-width. */
min-width: 19px; height: 17px; padding: 0 5px; box-sizing: border-box;
display: grid; place-items: center;
border-radius: 9px; border: 0;
background: rgba(12, 10, 7, .9); color: var(--ink-mute);
font: 700 10.5px var(--font);
}
.dk-back {
position: absolute; z-index: 3; inset: 0 0 auto 0; aspect-ratio: 5 / 7;
display: grid; place-items: center;
border-radius: 8px;
background: rgba(10, 8, 6, .55); color: #f0e6cc;
font: 800 34px var(--font);
opacity: 0; transition: opacity .12s;
}
.dk-mini:hover .dk-back, .dk-mini:focus-visible .dk-back { opacity: 1; }
.dk-strip-empty { align-self: center; margin: 0 auto; }
@media (max-width: 900px) {
/* Der Dreipunkt steht auch hier in der Ecke - die Regel dafuer gilt
ohnehin. Eng wird nur die Zeile darunter. */
.dk-title, .dk-points { width: auto; flex: 1 1 180px; }
}
/* Kopfzeile so hoch wie in der Lobby, Schliessen-Kreuz statt "Lobby"
(Bastian, 2026-09-25) - Kreuz wie im Einstellungsfenster. */
.deck-page .topbar { box-sizing: border-box; height: 46px; padding-top: 0; padding-bottom: 0; }
.dk-close {
display: grid; place-items: center;
width: 30px; height: 30px;
border: 1px solid var(--panel-edge);
border-radius: var(--radius);
background: rgba(0, 0, 0, .25);
color: var(--ink-dim);
font-size: 20px; line-height: 1;
text-decoration: none;
}
.dk-close:hover { color: var(--ink); border-color: var(--ink-mute); }
/* Ohne Seitentitel neben dem Schriftzug (Bastian, 2026-09-26): senkrecht
mittig wie in der Lobby statt an der Grundlinie. */
.deck-page .brand,
.deck-page .brand-text { align-self: stretch; align-items: center; }
/* ------------------------------------------------ Filter der Sammlung (2026-09-27) */
.dk-seg button { display: inline-flex; align-items: center; gap: 6px; }
.dk-kind-ico { width: 20px; height: 17px; fill: currentColor; opacity: .85; }
.dk-quals { display: flex; align-items: center; gap: 6px; }
.dk-lbl { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mute); margin-right: 2px; }
.dk-q {
display: grid; place-items: center;
width: 30px; height: 30px; padding: 0;
border: 1px solid var(--panel-edge); border-radius: var(--radius);
background: rgba(0, 0, 0, .25); cursor: pointer;
}
/* DIE FARBE KOMMT AUS cards.js (18.10.2026). Hier standen dieselben vier
Werte ein zweites Mal; wer das Gruen aendert, aendert es in CSCards.QUALITY,
und diese vier Kaestchen behielten still das alte - bei 14 Pixeln faellt
das niemandem auf. renderTabs() setzt --dk-qfarbe je Kaestchen. */
.dk-q i { width: 14px; height: 14px; border-radius: 3px; opacity: .45;
border: 2px solid transparent; background: var(--dk-qfarbe, #999); }
.dk-q:hover i { opacity: .8; }
.dk-q.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .15); }
.dk-q.is-on i { opacity: 1; }
.dk-search {
width: 170px; box-sizing: border-box;
padding: 7px 10px;
border: 1px solid var(--panel-edge); border-radius: var(--radius);
background: rgba(0, 0, 0, .3); color: var(--ink);
font: 13px var(--font);
}
.dk-search:focus { outline: none; border-color: var(--gold); }
.dk-found { margin-left: auto; }
.dk-factions button { padding: 7px 12px; }
/* ------------------------------------------------- Deck gross ansehen */
.dk-view-ov { z-index: 50; }
.dk-view-card {
width: min(1560px, 96vw); max-width: none; max-height: 92vh;
display: flex; flex-direction: column;
padding: 20px 24px 18px; text-align: left;
}
/* Kopfzeile mit Schmuck und Ansprache (Bastian, 2026-09-29). Nichts davon
ist neu erfunden: die Plakette kommt vom Nachschubfeld der Karte, die
gesperrte Kapitaelchenzeile aus dem Kartenfuss, die goldene Skala von der
Angriffsleiste, die feine Linie steht wie ueber der Fusszeile, das
Sechseckraster ist die Kartenrueckseite. Links das Profilbild des
Spielers als General, daneben seine Ansprache. */
.dk-view-head {
/* flex: none ist Pflicht: .dk-view-card ist eine Spalte mit max-height, und
ein Flex-Element schrumpft darin von selbst. Zusammen mit overflow:hidden
(fuer das Raster) wurde die Ansprache sonst einfach abgeschnitten. */
flex: none;
position: relative; overflow: hidden;
display: flex; align-items: flex-start; gap: 16px;
}
.dk-view-head::before {
content: ''; position: absolute; inset: -22px -26px auto; height: 118px; pointer-events: none;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='47'%3E%3Cpath d='M13.5 0.5 27 8v15L13.5 30.5 0 23V8zM40.5 0.5 54 8v15L40.5 30.5 27 23V8z' fill='none' stroke='%23c9a227' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 54px 47px repeat;
opacity: .13;
-webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.dk-view-head > * { position: relative; }
.dk-view-portraet { flex: none; width: 52px; }
.dk-view-portraet svg { display: block; width: 100%; height: auto; }
/* Plakette wie das Nachschubfeld oben links auf der Karte */
.dk-view-plakette {
flex: none; width: 38px; height: 44px; display: grid; place-items: center;
background: linear-gradient(#5d6541, #414827); border: 1.5px solid #7c855b; border-radius: 5px;
font: 800 19px/1 var(--font); color: #e9e4d2;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.dk-view-text { flex: 1; min-width: 0; }
.dk-view-head h2 { margin: 0; }
.dk-view-head .dk-view-dok {
margin: 7px 0 0;
font: 700 11px/1 var(--font); letter-spacing: 2.6px; text-transform: uppercase; color: #7a6f59;
}
.dk-view-head .dk-view-punkte { display: flex; align-items: center; gap: 10px; margin: 11px 0 0; max-width: 330px; }
.dk-view-punkte b { font: 800 15px var(--font); color: var(--ink); }
.dk-view-punkte small { font-size: 12px; color: var(--ink-mute); }
.dk-view-bar { flex: 1; height: 7px; border-radius: 4px; background: #241f16; overflow: hidden; }
.dk-view-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8d7420, var(--gold)); }
/* Die Ansprache steht an einem goldenen Strich, damit sie als Zitat gelesen
wird und nicht als Beschriftung. */
.dk-view-head .dk-view-rede {
margin: 12px 0 0; padding-left: 16px; position: relative;
font: italic 400 14.5px/1.55 var(--font); color: #b3a992;
}
.dk-view-rede b { font-weight: 600; font-style: italic; color: #c8bda2; }
.dk-view-rede::before {
content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
background: linear-gradient(var(--gold), rgba(201, 162, 39, 0));
}
.dk-view-head .dk-close { margin-left: auto; align-self: flex-start; cursor: pointer; }
.dk-view-head + .dk-view-body { border-top: 1px solid #3d3322; }
/* Abschnittsueberschriften im Deckfenster (Bastian, 2026-09-29): dieselbe
gesperrte Kapitaelchenschrift wie die Doktrinzeile darueber, die Zahl als
kleine Plakette, dazwischen eine Haarlinie bis zum rechten Rand. Das
bindet die Abschnitte an die Kopfzeile statt sie nur zu beschriften. */
.dk-view-body .dk-h {
display: flex; align-items: center; gap: 12px;
margin: 26px 0 2px;
font: 700 11px/1 var(--font); letter-spacing: 2.6px; text-transform: uppercase; color: #8a7d63;
}
.dk-view-body .dk-h:first-child { margin-top: 18px; }
.dk-view-body .dk-h::after {
content: ''; order: 1; flex: 1; height: 1px;
background: linear-gradient(90deg, #3d3322, rgba(61, 51, 34, 0));
}
.dk-view-body .dk-h small {
margin: 0; flex: none;
min-width: 20px; padding: 2px 7px; border-radius: 9px;
background: rgba(201, 162, 39, .1); border: 1px solid rgba(201, 162, 39, .25);
font: 700 11px/1.3 var(--font); letter-spacing: .5px; color: var(--gold);
}
/* Eine einzige linke Kante fuer alles (Bastian, 2026-09-28): Titel,
Abschnittsueberschrift und die erste Karte beginnen an derselben Stelle.
Der Zaehler ragt 8 px darueber hinaus - dafuer reicht der Rand der Box,
ein eigener Einzug ist nicht noetig und hat die Kanten verschoben.
Rechts nur so viel, dass der Rollbalken nicht auf den Karten klebt. */
.dk-view-body {
overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
margin-top: 10px; padding: 0 8px 16px 0;
scrollbar-width: thin; scrollbar-color: #4a4029 transparent;
}
.dk-view-body::-webkit-scrollbar { width: 9px; }
.dk-view-body::-webkit-scrollbar-track { background: transparent; }
.dk-view-body::-webkit-scrollbar-thumb { background: #3d3322; border-radius: 5px; }
.dk-view-body::-webkit-scrollbar-thumb:hover { background: #4f4329; }
/* "Deck ansehen" zeigt dieselbe Ansicht wie die Sammlung (Bastian,
2026-09-28): Faecher statt Treppe.
Die Spalten sind nach oben gedeckelt (200-230 px) statt 1fr. Sonst dreht
sich die Sache im Kreis: ein groesserer Spaltenabstand laesst weniger
Spalten zu, dadurch werden die Karten breiter, und der Faecher waechst mit
der Kartenbreite - er wird also nie frei.
Der Abstand ist fuer ZWEI hintere Kanten gerechnet, nicht fuer drei
(Bastian, 2026-09-28): im Deck duerfen hoechstens 3 gleiche Karten liegen,
also gibt es hoechstens 2 Kanten - rund 40 px Ueberstand bei 230 px
Kartenbreite. In der Sammlung sind es drei Kanten und entsprechend mehr. */
/* Rechts 40 px frei halten (Bastian, 2026-09-29): der Faecher der LETZTEN
Spalte steht rund 35 px ueber ihre Spur hinaus. Ohne diesen Platz ragte er
aus dem Rollbereich heraus und erzeugte eine Querleiste - und zwar nur auf
breiten Schirmen, wo die Spalten genau aufgehen. */
/* Enger gesetzt (Bastian, 2026-09-29: "dann passen dort vielleicht auch sechs
Karten nebeneinander"). Gemessen: 172 px Spalte bei 34 px Luecke bringt ab
1366 px Fensterbreite sechs Karten, ab 1600 sieben - vorher waren es fuenf
bzw. sechs. Die Luecke darf nicht unter 30 px: so weit ragt der Faecher der
weiteren Exemplare nach rechts ueber die Karte hinaus, sonst schoebe er
sich unter die naechste. Die 30 px rechts halten ihn bei der letzten Spalte
vom Rand fern - sonst entstuende dort eine waagerechte Bildlaufleiste. */
.dk-view-grid { display: grid; grid-template-columns: repeat(auto-fill, 172px);
gap: 26px 34px; padding: 14px 30px 0 0; justify-content: start; }
.dk-view-grid .dk-layer { transform-origin: 50% 120%; }
.dk-view-grid .dk-layer[data-i="1"] { transform: rotate(3deg); }
.dk-view-grid .dk-layer[data-i="2"] { transform: rotate(6deg); z-index: 0; }
.dk-view-grid .dk-layer[data-i="3"] { transform: rotate(9deg); z-index: -1; }
.dk-big:hover .dk-back, .dk-big:focus-visible .dk-back { opacity: 1; }
/* ------------------------------------ Knoepfe am Stapel (2026-09-27)
Karten wandern nur noch ueber diese Knoepfe, nicht per Klick auf die
Karte (ging zu leicht unabsichtlich). Sie erscheinen beim Ueberfahren
bzw. wenn der Knopf den Tastaturfokus hat. */
/* Sammlung: Menue aus drei Knoepfen mitten auf dem Bild */
/* ohne Hover (Tastatur) alle drei zeigen, sobald einer Fokus hat */
/* Deck: runde Knoepfe mitten auf der Karte */
/* Ausgeblendete Karten (nur sichtbar mit "Ausgeblendete zeigen") */
/* Abgedunkelt statt durchsichtig (31.10.2026): mit opacity schien die
Rueckseite der Karte dahinter - samt Cold-Start-Zeichen - durch die
vordere Karte (Bastian: "Warum wird auf der Karte ein Cold Start Logo
angezeigt?"). Helligkeit nimmt nur Licht weg, nichts scheint durch. */
.dk-tile.is-hidden .dk-face, .dk-tile.is-hidden .dk-layer { filter: grayscale(.7) brightness(.42); }
.dk-toggle {
padding: 7px 12px;
border: 1px solid var(--panel-edge); border-radius: var(--radius);
background: rgba(0, 0, 0, .25); color: var(--ink-dim);
font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap;
}
.dk-toggle:hover { color: var(--ink); }
.dk-toggle.is-on { border-color: var(--gold); color: var(--gold); background: rgba(201, 162, 39, .15); }
.dk-toggle[hidden] { display: none; }
/* Details: grosse Einzelkarte mit Pfeilen links/rechts (2026-09-27) */
/* "safe center": mittig, solange es passt - sonst oben anschlagen, damit der
Kopf der Karte nicht ausserhalb des Fensters landet und unerreichbar wird. */
.dk-detail-ov { z-index: 70; place-items: safe center; overflow: auto; padding: 16px 0; }
/* Zwei Spalten (Bastian, 2026-10-02, Entwurf A): links die Karte, rechts
Kopf, Buehne und alles Bedienbare. Vorher stand hier ein einspaltiges
Raster und die Figur hing als position:fixed daneben. */
.dk-detail {
display: flex; align-items: stretch; gap: 20px;
max-width: min(1180px, 94vw);
}
/* FESTE BREITE, nicht dehnbare (Bastian, 18.10.2026: „In der
Kartensammlung sollte die Darstellung sehr ähnlich sein").
Mit `flex: 1 1 520px` richtete sich die Spalte nach ihrem Inhalt, und
der ist je Karte verschieden lang - der Knopf heisst einmal „Zur Alpha
Kompanie verlegen", einmal „Von der Alpha Kompanie abziehen". Gemessen
mit tools/pruefstaende/pruefsammlung.js: die Buehne war 360, 318 und
338 px breit, der Knopf stand bei 890, 911 und 901 px von links. Man
blaettert mit den Pfeiltasten durch die Karten, und bei jedem Blaettern
rutschte alles ein Stueck. In der Paketuebergabe steht dieselbe Zeile
seit demselben Tag fest (.pk-ov.ist-gross .dk-detail-rechts). */
/* 440 statt 520 (Bastian, 2026-10-18): so breit wie die Karte links,
wie in der Paketuebergabe. */
.dk-detail-rechts { flex: 0 0 440px; width: 440px; min-width: 0; display: flex; flex-direction: column; }
/* Die Knoepfe enden auf der Unterkante des GRUENEN Kartenrands, nicht des
SVG-Kastens (Bastian, 31.10.2026: "die Buttons sind nicht auf einer
Linie mit dem Kartenrand"). Der Rand (cu-quality, y 10..690, Strich 5)
endet 7,5 von 700 Einheiten ueber der Kastenkante - bei 440 px Breite
rund 7 px. Die Buehne gibt sie her (flex: 1). */
#dk-detail-ov .dk-detail-rechts { padding-bottom: 7px; }
.dk-detail-kopf { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 0 4px; }
/* Dreipunktmenue oben rechts im Detailfenster (31.10.2026, Bastian: dort
"Ausblenden", damit man es nicht mehr aus Versehen trifft). Knopf und
Tafel wie im Deckkopf (.dk-mehr-btn, .dk-mehr-menu); die Tafel klappt nach
links auf, sonst ragte sie aus dem Fenster. */
.dk-detail-mehr { margin-left: auto; align-self: center; }
.dk-detail-mehr .dk-mehr-btn { width: 32px; padding: 6px 0; }
.dk-detail-mehr .dk-mehr-menu { left: auto; right: 0; min-width: 230px; }
/* Erloes rechts in der Zeile "Verkaufen", leiser als das Wort. */
.dk-erloes { font-weight: 500; color: var(--gold); }
.dk-mehr-menu button[disabled] .dk-erloes { color: inherit; }
/* Verkaufen / Loeschen (31.10.2026, deck.js abgabeFenster, Entwurf "A"):
links die Karte, rechts Zaehler und Bilanz. */
.dk-ab { width: min(560px, 94vw); max-width: none; padding: 26px 28px 22px; text-align: left; }
.dk-ab.ist-weg { border-color: #8a4030; }
.dk-ab-reihe { display: flex; gap: 22px; align-items: flex-start; }
.dk-ab-karte { flex: none; width: 150px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.dk-ab-karte svg.cs-card { display: block; width: 100%; height: auto; }
.dk-ab-rechts { flex: 1; min-width: 0; }
.dk-ab h2 { margin: 0; font: 700 21px var(--font); }
.dk-ab-unter { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-mute); }
/* Bestand in Zahlen (31.10.2026): Sammlung · verkaeuflich/loeschbar ·
in Kompanien - jede Zahl fett, durch Punkte getrennt. */
/* Eine Zeile ohne Rahmen (Bastian: "ohne den Rahmen hat es mir besser
gefallen ... nur halt in einer Reihe"). Kein Umbruch: Schrift und
Abstand so knapp, dass drei Angaben in die 330 px der Spalte passen. */
.dk-ab-stand { display: flex; flex-wrap: nowrap; gap: 14px; margin-top: 12px; white-space: nowrap;
font-size: 12.5px; color: var(--ink-dim); }
.dk-ab-stand b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.dk-ab-lbl { margin: 18px 0 8px; font: 700 10.5px var(--font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-mute); }
.dk-ab-zeile { display: flex; align-items: center; gap: 10px; }
.dk-ab-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--panel-edge); border-radius: 8px; overflow: hidden; }
.dk-ab-stepper button {
width: 40px; border: 0; background: rgba(255, 255, 255, .04); color: var(--ink-dim);
font: 600 18px var(--font); cursor: pointer;
}
.dk-ab-stepper button:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, .08); }
.dk-ab-stepper button:disabled { opacity: .35; cursor: default; }
.dk-ab-stepper input {
width: 56px; padding: 6px 4px; text-align: center; border: 0;
border-left: 1px solid var(--panel-edge); border-right: 1px solid var(--panel-edge);
background: #0f0c09; color: var(--ink); font: 700 20px var(--font); font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.dk-ab-stepper input::-webkit-outer-spin-button, .dk-ab-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dk-ab-stepper input:focus { outline: none; background: #17120c; }
/* "von 3 frei" - zugleich der Knopf fuer "alle freien" */
.dk-ab-frei { padding: 0; border: 0; background: none; color: var(--ink-mute); font: 500 12.5px var(--font); cursor: pointer;
border-bottom: 1px dotted transparent; }
.dk-ab-frei:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--gold); }
.dk-ab-frei:disabled { cursor: default; }
.dk-ab-bilanz { margin-top: 18px; padding: 10px 14px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid var(--panel-edge); }
.dk-ab-bz { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; font-size: 13.5px; color: var(--ink-dim); }
.dk-ab-bz b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-ab.ist-weg .dk-ab-weg b { color: #e08a74; }
.dk-ab-erloes b { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 17px; }
.dk-ab-erloes i { font-style: normal; }
.dk-ab-gold { width: 30px; height: auto; }
/* .overlay-card p (style.css) setzt Groesse und Abstand - darum doppelt gefasst. */
/* In einer eigenen Box wie im Entwurf (Bastian, 31.10.2026: "Der Hinweis
steckte doch schon mal in einer Box"). */
.dk-ab p.dk-ab-hinweis {
margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
border: 1px solid var(--panel-edge); background: rgba(0, 0, 0, .18);
font-size: 12px; line-height: 1.45; color: var(--ink-mute);
}
.dk-ab-knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dk-ab-knoepfe .btn { min-width: 130px; }
@media (max-width: 560px) {
.dk-ab-karte { display: none; }
.dk-ab-knoepfe .btn { min-width: 0; flex: 1; }
}
/* Warum Verkaufen/Loeschen gesperrt sind - als Zeile, nicht nur im title. */
.dk-mehr-hinweis { margin: 4px 12px 6px; max-width: 220px; font: 500 11.5px/1.4 var(--font); color: var(--ink-mute); }
.dk-detail-kopf b { font: var(--display-weight) 19px var(--font-display); letter-spacing: .2px; }
.dk-detail-kopf small { font: 500 12.5px var(--font); color: var(--ink-mute); }
/* Die Buehne: eingelassen, nicht aufgesetzt - Innenschatten statt Schlagschatten,
ein schwacher Lichtkegel von unten und dasselbe Sechseckraster wie auf der
Kartenrueckseite, nur ganz leise. */
.dk-buehne {
position: relative; flex: 1; min-height: 240px; overflow: hidden;
display: grid; place-items: center;
border: 1px solid var(--panel-edge); border-radius: 8px;
background:
radial-gradient(70% 55% at 50% 78%, rgba(201, 162, 39, .09), transparent 70%),
linear-gradient(#120f0b, #0b0907);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .04), inset 0 -18px 40px rgba(0, 0, 0, .6);
}
.dk-buehne::after {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='47'%3E%3Cpath d='M13.5 0.5 27 8v15L13.5 30.5 0 23V8zM40.5 0.5 54 8v15L40.5 30.5 27 23V8z' fill='none' stroke='%23c9a227' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 54px 47px repeat;
}
.dk-buehne-t {
position: absolute; top: 10px; left: 12px; z-index: 1;
font: 700 10.5px var(--font); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--ink-mute);
}
/* 20 statt 12 px Luft ueber den Knoepfen (Bastian, 18.10.2026: „Die Buttons
brauchen eine Abstand nach oben"). Seit die Buehne bei JEDER Karte steht,
grenzt sie bei Befehlen unmittelbar an die Knopfzeile - vorher lag dort
nichts, und 12 px reichten. */
.dk-detail-fuss { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
/* Die Balken stehen MITTIG zwischen dem Kasten darueber (Lackierung bzw.
Buehne) und den Knoepfen (Bastian, 31.10.2026). Vorher 20 px darueber
und 11 darunter - sie klebten an den Knoepfen. Jetzt traegt der Abstand
die Balkenzeile selbst, oben und unten gleich; die Knoepfe bleiben, wo
sie waren (auf der Kante des Kartenrands). */
#dk-detail-ov .dk-detail-fuss { margin-top: 0; gap: 0; }
#dk-detail-ov .dk-detail-fuss > .dk-detail-count { margin: 15px 0; }
/* Immer dieselbe Groesse (Bastian, 2026-10-02). Vorher hing die Breite an
der Fensterhoehe und an dem, was daneben Platz brauchte - dieselbe Karte
sah damit in jedem Fenster anders aus. Jetzt steht sie fest; passt das
Fenster nicht, wird gerollt (.dk-detail-ov) statt geschrumpft. */
.dk-detail-card {
position: relative;
flex: 0 0 440px; width: 440px;
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .7));
}
.dk-detail-card svg.cs-card { display: block; width: 100%; height: auto; }
/* Die Ecke "2x im Deck" oben rechts an der Karte (29.09.2026) ist am
31.10.2026 entfallen: die Zahl im Deck steht jetzt immer als Balken ueber
den Knoepfen, der Besitz als Zeile unter der Karte (.dk-besitz). */
/* Anzahl als eine schmale Zeile mittig unter der Karte (Bastian, 2026-09-28).
Vorher standen Kartensymbole davor; die brauchte es nicht.
NICHT .dk-count nennen - die Klasse gehoert oben schon dem Deckband und
braechte Rahmen und Hintergrund mit. Der negative obere Abstand zieht die
Zeile gegen die Zeilenluecke von 22 px an die Kartenkante heran, damit sie
zur Karte gehoert und nicht zu den Knoepfen. */
.dk-detail-count {
align-self: center; margin: 0;
font: 500 12px var(--font); color: var(--ink-mute); white-space: nowrap;
}
/* Aus dem Deck heraus drei Balken statt der Zahl (Bastian, 2026-09-28).
Sie erben die Farbe von .dk-detail-count, sind also derselbe Ton wie der
Text daneben; die leeren sind nur heruntergedimmt, nicht andersfarbig. */
.dk-bars { display: flex; gap: 5px; align-items: center; height: 17px; }
.dk-bars i { width: 17px; height: 4px; border-radius: 2px; background: currentColor; opacity: .26; }
.dk-bars i.ist-da { opacity: 1; }
/* Beide Knoepfe fuellen die Zeile, aber jeder behaelt mindestens seine
eigene Breite: "Zur Alpha Kompanie verlegen" soll nicht umbrechen, nur
weil der zweite Knopf die Haelfte beansprucht. */
/* ------------------------------------------------- Stufen (2026-10-02)
Kleine Marken links oben neben der Karte, eine je Stufe, die man besitzt.
Sie liegen absolut an der Karte statt als Spalte im Raster - so steht die
Karte immer an derselben Stelle, ob es nun eine Stufe gibt oder vier.
Die Farben sind dieselben wie der Kartenrand (QUALITY in cards.js). */
.dk-stufen {
position: absolute; right: 100%; top: 2px; margin-right: 10px;
display: flex; flex-direction: column; gap: 6px;
}
.dk-stufe {
width: 26px; height: 26px; padding: 0; cursor: pointer;
border: 1px solid rgba(0, 0, 0, .45); border-radius: 7px;
font: 800 12px var(--font); color: rgba(0, 0, 0, .6);
/* Nicht gewaehlt heisst hier NICHT "gesperrt" - man besitzt sie ja. Also
nur zuruecktreten, nicht abblenden; die Lackierungen darunter benutzen
das staerkere Abblenden fuer "noch nicht freigeschaltet". */
opacity: .62; transition: opacity .13s, box-shadow .13s;
}
.dk-stufe:hover { opacity: .95; }
.dk-stufe.ist-an { opacity: 1; cursor: default; box-shadow: 0 0 0 2px rgba(201, 162, 39, .55); }
.dk-stufe.ist-gruen { background: #6f9a55; }
.dk-stufe.ist-gelb { background: #d9c23a; }
.dk-stufe.ist-orange { background: #c87a2c; }
.dk-stufe.ist-lila { background: #8b6bb1; }
.dk-detail-acts { display: flex; gap: 10px; }
.dk-detail-acts .btn { flex: 1 1 auto; white-space: nowrap; }
.dk-nav {
width: 52px; height: 96px; display: grid; place-items: center;
border: 0; border-radius: 10px; background: transparent;
color: var(--ink-dim); cursor: pointer;
transition: color .15s, background .15s;
}
.dk-nav:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, .05); }
.dk-nav:disabled { opacity: .18; cursor: default; }
.dk-detail-x { position: fixed; top: 16px; right: 18px; z-index: 2; cursor: pointer; }
/* ------------------------------------------------- Ziehen (2026-09-27) */
.dk-stack { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; touch-action: none; cursor: grab; }
.dk-stack.is-dragged { opacity: .35; }
.dk-dragging, .dk-dragging * { cursor: grabbing !important; }
.dk-ghost {
position: fixed; z-index: 100; pointer-events: none;
transform: translate(-50%, -40%) rotate(-4deg);
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .7));
opacity: .95;
}
.dk-ghost svg.cs-card { display: block; width: 100%; height: auto; }
/* Ziel hervorheben: Deckband beim Hineinziehen, Sammlung beim Herausziehen */
.dk-drag-in #dk-deck { outline: 2px dashed rgba(201, 162, 39, .5); outline-offset: -4px; }
.dk-drag-in.dk-drop-ok #dk-deck { outline-color: var(--gold); background: linear-gradient(#2a2114, #17110b); }
.dk-drag-out .dk-left { outline: 2px dashed rgba(201, 162, 39, .5); outline-offset: -4px; }
.dk-drag-out.dk-drop-ok .dk-left { outline-color: var(--gold); }
.dk-drag-in #dk-deck::after, .dk-drag-out .dk-left::before {
position: absolute; left: 50%; transform: translateX(-50%);
padding: 6px 14px; border-radius: 6px; z-index: 6;
background: rgba(20, 16, 11, .92); border: 1px solid var(--gold); color: var(--gold);
font: 700 13px var(--font); pointer-events: none;
}
.dk-drag-in #dk-deck::after { content: attr(data-label); bottom: 12px; }
.dk-left { position: relative; }
.dk-drag-out .dk-left::before { content: attr(data-label); top: 70px; }
/* Keine Knoepfe mehr auf den Karten (2026-09-27): Klick = Details */
.dk-stack:hover .dk-face svg.cs-card { filter: brightness(1.08); }
.dk-stack:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.dk-tile.is-full { cursor: pointer; } /* nicht ziehbar, Klick zeigt Details */
/* Stapel in der Sammlung als FAECHER (Bastian, 2026-09-28; vorher nur 3 px
nach oben versetzt, das verschmolz zu einem Schmier und war nicht zaehlbar).
Hoechstens drei hintere Karten, also vier Exemplare sichtbar.
Gedreht wird um die KARTENMITTE, nicht um die Unterkante: der Ausschlag an
der Oberkante waechst mit dem Abstand zum Drehpunkt, und von der Unterkante
aus waere er rund dreimal so gross - die Kachel raegte dann in ihre
Nachbarn im Raster. */
/* Die Sammlung faechert, und zwar genau wie im Vorschlag (Bastian,
2026-09-28): Drehpunkt 20 Prozent UNTER der Kartenunterkante, 3 Grad je
Karte. Der weit entfernte Drehpunkt ist der Grund, warum es nach Faecher
aussieht und nicht nach verrutschtem Stapel - die Karten schwenken aus,
statt sich zu drehen.
Preis: die hinterste Kante steht rund 45 px nach rechts ueber, fast alles
davon auf einer Seite. Der Spaltenabstand des Rasters oben traegt das
(siehe .dk-grid). */
.dk-tile .dk-layer { transform-origin: 50% 120%; }
.dk-tile .dk-layer[data-i="1"] { transform: rotate(3deg); }
.dk-tile .dk-layer[data-i="2"] { transform: rotate(6deg); z-index: 0; }
.dk-tile .dk-layer[data-i="3"] { transform: rotate(9deg); z-index: -1; }
/* Zaehlbar machen (Bastian, 31.10.2026, Entwurf "B"): die Rueckseiten
waren vor dem dunklen Grund fast schwarz, man sah nur Keile. Jetzt traegt
jede eine feine Goldkante, und die vorderen sind etwas heller - so liest
man die Zahl der Exemplare ab. Der Faecher selbst (3 Grad je Karte) und
damit der Platzbedarf bleiben. */
.dk-tile .dk-layer { box-shadow: inset 0 0 0 1.5px rgba(201, 162, 39, .5), 0 3px 10px rgba(0, 0, 0, .65); }
.dk-tile .dk-layer[data-i="1"] { filter: brightness(1.35); }
.dk-tile .dk-layer[data-i="2"] { filter: brightness(1.15); }
/* Ausgeblendet bleibt ausgegraut - sonst gewaenne die Helligkeit oben. */
.dk-tile.is-hidden .dk-layer[data-i] { filter: grayscale(.7) brightness(.42); }
/* Hintere Karten zeigen die echte Rueckseite (--dk-back aus deck.js) */
.dk-layer {
background: var(--dk-back, linear-gradient(#1a1611, #120f0b)) center / 100% 100% no-repeat, #0c0a08;
border: 0; border-radius: 4.8% / 3.4%;
box-shadow: inset 0 1px 0 #3d3322, 0 -1px 2px rgba(0, 0, 0, .45); /* Kante wie der Innenrand der Rueckseite */
}
/* Miniatur in den Details: seit 2026-09-28 in der rechten unteren Ecke des
Fensters, mit minimalem Abstand zum Rand (Bastian). Vorher lag sie auf dem
rechten Kartenrand. Sie haengt jetzt am Fenster statt an der Karte,
deshalb position: fixed - die Karte bleibt unberuehrt mittig. */
.dk-miniview {
position: relative; width: min(420px, 92%);
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.dk-miniview-svg {
display: block; width: 100%; height: auto; cursor: ew-resize; touch-action: none;
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .7));
}
/* Karten ohne Modell zeigen die KARTENRUECKSEITE statt einer leeren Buehne
(Bastian, 18.10.2026: "anstatt des leeren Feldes die Rueckseite einer
Karte" - und kurz darauf: "nicht in diesem rahmen, nur die Karte. Ohne
den Rahmen mit dem Wort Modell").
Kein Rahmen, keine Aufschrift: der Kasten mit dem Wort MODELL kuendigt
ein Modell an, und wo keines ist, verspricht er etwas, das nicht kommt.
Auf die BREITE passend, Hoehe nach dem Seitenverhaeltnis der Karte -
unten bleibt dann Platz. Das ist so gewollt (Bastian: "dann entsteht
unten halt etwas abstand"); die Karte zu strecken waere schlimmer. */
/* GEMESSEN, nicht geschaetzt: auf volle Breite (520 px) waere die Karte bei
ihrem Seitenverhaeltnis rund 728 px hoch - die Karte links ist 616. Die
rechte Spalte wuchs dadurch, die Tafel mit ihr, und der Knopf darunter
sprang um 18 px zwischen Einheit und Befehl (pruefpaket.js: 790 / 808).
Also nach der HOEHE eingepasst statt nach der Breite. Der Abstand
entsteht damit links und rechts statt unten - anders als gedacht, aber
die Alternative waere ein springender Knopf, und genau den haben wir
heute an drei Stellen abgestellt. Passt die Karte einmal in die Hoehe,
deckelt max-width sie auf die Spaltenbreite. */
.dk-rueckseite {
flex: 1 1 auto; min-height: 0;
position: relative;
}
/* ABSOLUT, und das ist der Punkt: `height: 100%` an einem Flex-Kind ohne
aufgeloeste Elternhoehe wirkt nicht - das SVG nahm seine natuerliche
Hoehe und DEHNTE den Kasten, statt sich ihm anzupassen. Gemessen: die
rechte Spalte wuchs von 616 auf 652 px, und der Knopf sprang wieder
(790 / 808). Aus dem Fluss genommen kann die Karte den Kasten nicht
mehr hoeher machen; inset + margin: auto zentriert sie darin. */
.dk-rueckseite svg.cs-card {
position: absolute; inset: 0; margin: auto;
display: block; height: 100%; width: auto; max-width: 100%;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
opacity: .62;
}
/* Der Zeiger darf nichts versprechen: gedreht wird nur eine Figur. */
.dk-miniview.ist-leer .dk-miniview-svg { cursor: default; filter: none; }
/* Schmale Fenster: die zweite Spalte passt nicht mehr daneben. Dann rueckt
sie unter die Karte, und Buehne und Kopf entfallen - der Name steht ja
auf der Karte, und fuer die Figur bliebe kein Platz. */
@media (max-width: 1040px) {
/* Untereinander wird es hoeher als das Fenster, sobald die Lackierungen
dazukommen - also darf gerollt werden, und die Karte gibt etwas Hoehe ab. */
.dk-detail-ov { padding: 18px 0 26px; }
/* Nur hier darf sie schmaler werden - auf einem Telefon sind 440 px mehr,
als das Fenster hat. */
.dk-detail-card { flex: 0 0 auto; width: min(440px, calc(100vw - 40px)); }
.dk-detail { flex-direction: column; align-items: center; }
.dk-detail-rechts { flex: 0 0 auto; width: min(440px, 72vw); }
.dk-detail-kopf, .dk-buehne { display: none; }
.dk-detail-fuss { margin-top: 14px; }
#dk-detail-ov .dk-detail-fuss > .dk-detail-count { margin: 13px 0; }
/* Jetzt ist die Spalte so breit wie die Karte - da passen zwei lange
Knoepfe nicht mehr nebeneinander, also duerfen sie umbrechen. */
.dk-detail-acts { flex-wrap: wrap; }
.dk-detail-acts .btn { white-space: normal; }
/* Neben der Karte ist links kein Platz mehr - die Marken ruecken darueber. */
.dk-stufen { position: static; margin: 0 0 10px; flex-direction: row; justify-content: center; }
}
@media (max-width: 560px) { .dk-detail-acts { flex-direction: column; } }
/* ------------------------------------------------- Lackierung (2026-10-02)
Eine Reihe Proben unter den Knoepfen; sie erscheint nur, wenn man fuer
dieses Fahrzeug ueberhaupt eine Zusatzlackierung besitzt. Die Probe ist
ein Ausschnitt des echten Miniaturbildes in dieser Lackierung, kein
gemalter Farbfleck - 170 % Zoom zeigt genug vom Fahrzeug, um das Muster
zu erkennen, und laesst noch etwas Boden stehen. */
.dk-lack {
/* Seit 18.10.2026 steht die Reihe UNTER DER BUEHNE statt unter den
Knoepfen. Grund: Gemessen mit tools/pruefstaende/pruefsammlung.js stand
der Knopf bei einer Einheit 132 px hoeher als bei einem Befehl - die
Reihe unter ihm schob ihn nach oben, ein Befehl hat keine. Jetzt endet
die Knopfzeile bei jeder Karte unten. Inhaltlich gehoert die Wahl
ohnehin ans Modell, nicht hinter die Knoepfe. Abstand nach oben, weil
sie den Flex-Abstand der Fusszeile verlassen hat. */
margin-top: 11px;
border: 1px solid var(--panel-edge); border-radius: 8px;
background: linear-gradient(#1d1710, #141009); padding: 11px 12px 12px;
}
.dk-lack-t {
display: block; margin: 0 0 9px; padding-left: 2px;
font: 700 10.5px var(--font); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--ink-mute);
}
.dk-lack-r { display: flex; gap: 9px; }
.dk-lack-k {
flex: 1; min-width: 0; padding: 0; overflow: hidden; text-align: center; cursor: pointer;
border: 1px solid var(--panel-edge); border-radius: 7px; background: rgba(0, 0, 0, .3);
transition: border-color .13s, box-shadow .13s;
}
.dk-lack-k:hover { border-color: var(--ink-mute); }
.dk-lack-b { display: block; position: relative; height: 46px; overflow: hidden; background: #0e0b08; }
.dk-lack-b img { position: absolute; left: 50%; top: 50%; width: 170%; height: auto; transform: translate(-50%, -50%); }
.dk-lack-n {
display: block; padding: 6px 4px 7px; font: 600 11.5px var(--font); color: var(--ink-dim);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-lack-k.ist-an { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .22); }
.dk-lack-k.ist-an .dk-lack-n { color: var(--ink); }
/* Nicht besessen: trotzdem sichtbar, aber abgeblendet und mit Schloss
(Bastian, 2026-10-02). Man soll sehen, dass es sie gibt - und woran man
ist. Das Bild bleibt erkennbar, nur entsaettigt; ganz grau waere es keine
Probe mehr. */
.dk-lack-k.ist-zu { cursor: default; }
.dk-lack-k.ist-zu:hover { border-color: var(--panel-edge); }
.dk-lack-k.ist-zu .dk-lack-b img { filter: grayscale(.7) brightness(.5); }
.dk-lack-k.ist-zu .dk-lack-n { color: var(--ink-mute); }
.dk-lack-schloss {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 17px; height: 17px; opacity: .8;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10V7a4.5 4.5 0 0 1 9 0v3' fill='none' stroke='%23e8e2d5' stroke-width='2.2'/%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2' fill='%23e8e2d5'/%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
/* Pfeile am Bildschirmrand (Bastian, 2026-09-27) */
.dk-detail .dk-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; }
.dk-detail .dk-nav[data-nav="-1"] { left: 16px; }
.dk-detail .dk-nav[data-nav="1"] { right: 16px; }
/* Gesperrte Lackierung mit Weg zum Quartiermeister (2026-10-04): das Schloss
ist anklickbar, der Rahmen zeigt es beim Ueberfahren. */
a.dk-lack-k { display: block; text-decoration: none; }
.dk-lack-k.ist-zu.ist-laden { cursor: pointer; }
.dk-lack-k.ist-zu.ist-laden:hover { border-color: #9fb1bf; }
.dk-lack-k.ist-zu.ist-laden:hover .dk-lack-n { color: #c9d3db; }
/* Stufen als Karteireiter links an der Karte (Variante C, 2026-10-08):
statt farbiger Kloetze mit Ziffer die Winkel der Spielkarte, die Farbe
steckt in den Winkeln. Ueberschreibt die Marken oben. */
.dk-stufen { right: 100%; top: 34px; margin-right: 0; gap: 5px; z-index: 0; }
.dk-stufe {
display: grid; place-items: center; width: 44px; height: 52px; margin-right: -5px; padding: 0 4px 0 0;
border: 1px solid #3a3628; border-right: 0; border-radius: 9px 0 0 9px;
background: #15110c; opacity: 1; box-shadow: none; transition: width .12s, background .12s;
}
.dk-stufe.ist-gruen, .dk-stufe.ist-gelb, .dk-stufe.ist-orange, .dk-stufe.ist-lila { background: #15110c; }
.dk-stufe .dk-winkel { width: 22px; height: 30px; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.dk-stufe:hover .dk-winkel { opacity: .9; }
.dk-stufe.ist-an { width: 50px; background: #2a2213; border-color: var(--gold); box-shadow: none; }
.dk-stufe.ist-an .dk-winkel { opacity: 1; }
@media (max-width: 1040px) {
/* Schmal steht die Leiste unter der Karte: Reiter haengen nach unten. */
.dk-stufe { width: 52px; height: 40px; margin: -5px 0 0; padding: 4px 0 0; border: 1px solid #3a3628; border-top: 0; border-radius: 0 0 9px 9px; }
.dk-stufe.ist-an { width: 52px; height: 46px; }
.dk-stufen { margin: 0 0 10px; gap: 5px; align-items: flex-start; }
}
/* Aktiver Reiter in der Stufenfarbe statt Gold (Bastian, 2026-10-08). */
.dk-stufe.ist-an.ist-gruen { border-color: #6f9a55; background: #1c2416; }
.dk-stufe.ist-an.ist-gelb { border-color: #d9c23a; background: #26220f; }
.dk-stufe.ist-an.ist-orange { border-color: #c87a2c; background: #2a1c10; }
.dk-stufe.ist-an.ist-lila { border-color: #8b6bb1; background: #1f1828; }
/* Alle Reiter buendig an der Karte - der schmalere inaktive hing in der Luft. */
.dk-stufen { align-items: flex-end; }
@media (max-width: 1040px) { .dk-stufen { align-items: flex-start; } }
/* Startaufstellung (2026-10-17): Marke oben links am Stapel, wie viele
Karten dieser Einheit in den sechs Startkarten liegen. Gestrichelt =
nicht selbst gewaehlt, sondern vorgeschlagen. */
/* ======================================== DREI ANSICHTEN DER SAMMLUNG
Bastian, 2026-10-18: Regal, Karten und Liste, umschaltbar. Bis dahin gab
es nur die Kacheln (.dk-grid), die hier als "Karten" weiterleben.
Der Ansichtsschalter steht rechts aussen in der Leiste, hinter der
Trefferzahl - er gehoert nicht zum Filter: der sagt, WELCHE Karten
stehen, dieser sagt, WIE. */
.dk-ansicht { margin-left: 4px; }
.dk-ansicht button { display: flex; align-items: center; gap: 6px; padding: 7px 11px; }
.dk-ansicht svg { display: block; width: 13px; height: 13px; fill: currentColor; opacity: .8; }
/* ------------------------------------------------------------- REGAL
Ein Fach je KARTE, und darin liegt sie so oft, wie man sie besitzt; die
Exemplare im Deck tragen ein Faehnchen. Damit sieht man "von meinen drei
liegen zwei im Deck" am Bild, ohne eine Zahl zu lesen.
Die Bildsprache ist EINDEUTIG belegt: der Stapel heisst "Exemplare", nie
"Stufen". Der erste Entwurf zeigte beides mit demselben Faecher - die
vier Stufen einer Karte sind aber vier VERSCHIEDENE Karten mit eigenem
Bestand und eigenem Platz im Deck (Bastian hat den Fehler gefunden).
Das Fach ist LEISER als im Shop (Bastian: "So ist es jetzt im Shop und
das ist auch gut. Hier wuerde mir etwas weniger auffaelliges besser
gefallen."). Im Shop sind es wenige Faecher und das Moebel ist Teil der
Auslage; hier stehen Dutzende nebeneinander, und aus demselben Braun
wuerde eine Wand, gegen die sich die Karte erst durchsetzen muesste.
Geblieben ist ein Boden und ein Lichtschein, beides sehr schwach; beim
Ueberfahren kommt das Moebel kurz zurueck. */
.dk-regal {
display: grid; gap: 18px 16px;
grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
}
.dk-fach-w { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dk-fach {
position: relative; display: block; width: 100%; height: 230px;
border: 1px solid #272419; border-radius: 6px; overflow: hidden; cursor: pointer;
background: radial-gradient(ellipse 72% 70% at 50% 30%, #211c15 0, #17130d 65%, #120f08 100%);
transition: background .18s, border-color .18s;
}
.dk-fach::after { /* das Brett: nur die Kante, auf der die Karte steht */
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(#4a3a26 0, #2c2217 100%);
box-shadow: 0 -10px 16px rgba(0, 0, 0, .45);
transition: height .18s, background .18s;
}
.dk-fach:hover, .dk-fach:focus-visible {
border-color: #6b540e;
background: radial-gradient(ellipse 72% 76% at 50% 28%, #2e2619 0, #1a160f 64%, #130f08 100%);
}
.dk-fach:hover::after, .dk-fach:focus-visible::after {
height: 9px; background: linear-gradient(#6b5035 0, #38291b 100%);
}
.dk-fach-karte {
position: absolute; z-index: 1; bottom: 16px; right: 14%;
width: 118px; transform: rotate(3deg);
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.dk-fach-karte svg.cs-card { display: block; width: 100%; height: auto; }
.dk-fach-order .dk-fach-karte { right: auto; left: 50%; width: 124px; bottom: 22px;
transform: translateX(-50%) rotate(-2deg); }
.dk-fach-mini { position: absolute; z-index: 2; left: -10px; bottom: -2px; width: 190px;
height: auto; pointer-events: none;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
/* Die Exemplare: nach HINTEN LINKS versetzt, nicht gefaechert - ein Stapel
ist ein Stapel (der Faecher gehoert im Quartiermeister den Stufen).
Seit dem 31.10.2026 deutlicher versetzt, 15 statt 9 px je Blatt, und
weniger abgedunkelt (Bastian waehlte aus vier Entwuerfen "B"): bei drei
und vier Exemplaren draengten sich die hinteren Karten vorher zu
schmalen Streifen. Hoechstens drei Blaetter hinter der vorderen Karte. */
.dk-fach.hat-mehrere .dk-fach-karte.dk-face { right: 10%; }
.dk-fach .dk-blatt { transition: transform .18s ease-out, filter .18s; }
.dk-fach .dk-blatt-1 { transform: rotate(3deg) translate(-15px, -7px); z-index: 0; filter: brightness(.8); }
.dk-fach .dk-blatt-2 { transform: rotate(3deg) translate(-30px, -14px); z-index: 0; filter: brightness(.66); }
.dk-fach .dk-blatt-3 { transform: rotate(3deg) translate(-45px, -21px); z-index: 0; filter: brightness(.54); }
.dk-fach:hover .dk-blatt-1 { transform: rotate(3deg) translate(-19px, -9px); }
.dk-fach:hover .dk-blatt-2 { transform: rotate(3deg) translate(-38px, -18px); }
.dk-fach:hover .dk-blatt-3 { transform: rotate(3deg) translate(-57px, -27px); }
.dk-fach-order .dk-blatt-1 { transform: translateX(-50%) rotate(-2deg) translate(-15px, -7px); }
.dk-fach-order .dk-blatt-2 { transform: translateX(-50%) rotate(-2deg) translate(-30px, -14px); }
.dk-fach-order .dk-blatt-3 { transform: translateX(-50%) rotate(-2deg) translate(-45px, -21px); }
.dk-fach-order:hover .dk-blatt-1 { transform: translateX(-50%) rotate(-2deg) translate(-19px, -9px); }
.dk-fach-order:hover .dk-blatt-2 { transform: translateX(-50%) rotate(-2deg) translate(-38px, -18px); }
.dk-fach-order:hover .dk-blatt-3 { transform: translateX(-50%) rotate(-2deg) translate(-57px, -27px); }
/* Das Faehnchen markiert, was im Deck liegt. Ein Goldrahmen tat es bis zum
17.10.2026 - Bastian: "der goldrahmen als markierung was im deck ist, ist
nicht gut. ein faehnchen waere bestimmt besser". */
.dk-fahne { position: absolute; z-index: 3; top: -7px; right: 9px; width: 17px; height: 22px;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.dk-fach-fuss { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-fach-fuss b { font: 700 14px var(--font); color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-fach-fuss small { display: flex; align-items: baseline; gap: 8px;
font-size: 11px; color: var(--ink-mute); }
/* Ausgeblendet: abgedunkelt und entsaettigt, wie bei den Kacheln. Sie
verschwinden nicht - sie treten zurueck. */
/* Schon so oft im Deck, wie die Gattung zulaesst: das Fach tritt zurueck
und bekommt den Zeiger "geht nicht" - dieselbe Auskunft wie bei der
Kachel (.dk-tile.is-full). Bis zum 18.10.2026 sah man es im Regal und
in der Liste gar nicht, und das Ziehen lief dort ins Leere, ohne dass
man ihm das ansah. */
.dk-fach.is-full { cursor: not-allowed; }
/* .dk-fach.is-full nicht mehr abgedunkelt (2026-10-18): der Grund steht als Marke daran (.dk-grund). */
.dk-lz.is-full { cursor: not-allowed; }
.dk-fach-w.is-hidden { opacity: .38; filter: grayscale(.7); }
.dk-fach-w.is-hidden .dk-fach { border-style: dashed; }
/* ------------------------------------------------------------- LISTE
Eine Zeile je Karte, die Werte in Spalten (Bastian, 17.10.2026: "besonders
die Liste behalten wir mal im Hinterkopf"). Das kann keine Kartenansicht:
dort stehen die Zahlen im Bild und lassen sich nicht vergleichen. */
/* Die Breite ist gedeckelt: ohne Deckel zieht die 1fr-Spalte des Namens
alles auseinander, und zwischen "Leopard 2A8" und seinen Zahlen klafft
auf einem breiten Schirm eine Handbreit Leere. Eine Tabelle liest sich
besser, wenn die Spalten beieinander stehen. */
/* 1240 statt 1040 seit der Spalte Eigenschaften (31.10.2026). */
.dk-liste { display: flex; flex-direction: column; gap: 2px; max-width: 1240px; }
.dk-lz {
display: grid; align-items: center; gap: 10px;
grid-template-columns: 6px 54px minmax(150px, 1fr) minmax(0, 1.25fr) 46px repeat(4, 38px) 54px 64px;
padding: 6px 10px; border-radius: var(--radius); cursor: pointer;
border: 1px solid transparent; background: rgba(255, 255, 255, .02);
}
/* Das Kartenbild in der Zeile (Bastian, 18.10.2026, "wenigstens als
Versuch"). Nur der Bildausschnitt, nicht die ganze Karte: eine Karte in
Zeilenhoehe waere unleserlich, und die Zeile wuerde auf Kartenhoehe
wachsen. Der Ausschnitt zeigt die obere Haelfte - dort steht das Motiv,
unten stehen die Werte, und die stehen ohnehin daneben in Spalten. */
.dk-lz-bild { width: 54px; height: 34px; border-radius: 3px; overflow: hidden;
background: rgba(0, 0, 0, .3); }
.dk-lz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
display: block; }
/* Der Tabellenkopf steht im selben Raster wie die Zeilen - sonst stuenden
die Ueberschriften neben ihren Spalten. Er ist keine Karte: kein
data-card, kein Zeiger, kein Aufleuchten beim Ueberfahren. */
.dk-lz-kopf {
position: sticky; top: 0; z-index: 2; cursor: default;
padding-top: 4px; padding-bottom: 4px; margin-bottom: 2px;
background: #16120d; border-bottom: 1px solid var(--panel-edge);
border-radius: 0;
font: 700 10.5px var(--font); letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-mute);
}
.dk-lz-kopf:hover { border-color: transparent; border-bottom-color: var(--panel-edge);
background: #16120d; }
.dk-lz-kopf .dk-lz-z { font: inherit; color: inherit; }
.dk-lz-kopf svg { display: block; width: 20px; height: 17px; margin-left: auto;
fill: var(--ink-mute); }
.dk-lz:hover, .dk-lz:focus-visible { border-color: rgba(201, 162, 39, .4);
background: rgba(201, 162, 39, .06); }
.dk-lz.is-hidden { opacity: .45; }
.dk-lz-q { width: 6px; height: 26px; border-radius: 2px; background: var(--dk-qfarbe, #999); }
.dk-lz-n { min-width: 0; display: flex; flex-direction: column; }
.dk-lz-n b { font: 600 13.5px var(--font); color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-lz-n small { font-size: 11px; color: var(--ink-mute); }
.dk-lz-kopf .dk-lz-n { display: block; font: inherit; color: inherit; }
.dk-lz-z { text-align: right; font: 600 13px var(--font); color: var(--ink-dim);
font-variant-numeric: tabular-nums; }
.dk-lz-z i { font-style: normal; color: var(--ink-mute); }
.dk-lz-pkt { color: var(--gold); font-weight: 700; }
/* Eigenschaften (31.10.2026): die Stichworte der Karte, hoechstens zwei
Zeilen; die Erklaerung kommt beim Ueberfahren (CSTip). */
.dk-lz-eig { min-width: 0; font: 600 11.5px/1.35 var(--font); color: var(--ink-dim);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-lz-eig i { font-style: normal; margin: 0 5px; color: var(--ink-mute); }
.dk-lz-eig-w { cursor: default; border-bottom: 1px dotted rgba(255, 255, 255, .22); }
.dk-lz-eig-w:hover { color: var(--ink); border-bottom-color: var(--gold); }
.dk-lz-kopf .dk-lz-eig { display: block; font: inherit; color: inherit; }
/* Sortierknoepfe im Tabellenkopf (31.10.2026): sehen aus wie die
Ueberschrift, die gewaehlte Spalte etwas heller mit Pfeil. */
.dk-lz-sort {
display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0;
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.dk-lz-kopf .dk-lz-sort.dk-lz-n { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; }
/* Der Kopf leuchtet beim Ueberfahren NICHT auf wie eine Kartenzeile -
.dk-lz:hover stand spaeter in der Datei und gewann. Seit die
Ueberschriften Knoepfe sind, faehrt man oft darueber. */
.dk-lz.dk-lz-kopf:hover, .dk-lz.dk-lz-kopf:focus-within { border-color: transparent; border-bottom-color: var(--panel-edge); background: #16120d; }
.dk-lz-sort:hover, .dk-lz-sort.ist-an { color: var(--ink); }
.dk-lz-sort:hover svg, .dk-lz-sort.ist-an svg { fill: var(--ink); }
.dk-lz-sort i { font-style: normal; font-size: 8px; width: 8px; color: var(--gold); }
.dk-lz-kopf .dk-lz-sort svg { margin-left: 0; }
/* Volle EINHEITEN lassen sich weiter in die Aufstellung ziehen (deck.js
dragStart, nurAuf - 2026-10-18); also kein Verbotszeichen an ihnen. */
/* (bis 18.10.: volle Einheiten mit cursor: grab - wieder gesperrt, siehe deck.js dragStart) */
/* Filterleiste in EINER Zeile (Bastian, 2026-10-18: "das muessen wir
einzeilig bekommen"): Art-Knoepfe enger, das Wort "Qualitaet" weg (die
Kaestchen tragen ihren Namen im Hinweis), Suche nimmt den Rest, der
Ansichtsschalter nur noch als Zeichen (Name im title). Wird es trotzdem
zu eng - schmales Fenster -, darf die Leiste weiter umbrechen. */
.dk-bar { gap: 10px; }
#dk-kinds button { padding: 7px 10px; white-space: nowrap; }
.dk-quals .dk-lbl { display: none; }
.dk-search { flex: 1 1 90px; min-width: 90px; width: auto; }
.dk-quals { gap: 4px; }
.dk-quals .dk-q { width: 28px; height: 28px; }
/* Wird die Sammlung schmal, fallen zuerst die Zeichen an den Art-Knoepfen
weg, dann erst darf die Leiste umbrechen. */
.dk-left { container-type: inline-size; }
@container (max-width: 1080px) {
#dk-kinds .dk-kind-ico { display: none; }
}
@container (max-width: 900px) {
#dk-kinds button { padding: 7px 8px; }
}
/* Bis rund 1300 px Fensterbreite (Sammlung ~890 px) passte die Leiste mit
Auge und Ansichtsschalter nicht mehr in eine Zeile (31.10.2026). Dann
enger, und die Trefferzahl ("2 Karten") faellt weg - sie ist das
Entbehrlichste: die Ueberschriften darunter zaehlen ohnehin mit. */
@container (max-width: 960px) {
#dk-kinds button { padding: 7px 8px; }
.dk-search { min-width: 70px; }
.dk-found { display: none; }
.dk-bar { gap: 8px; }
}
.dk-found { white-space: nowrap; }
.dk-found:empty { display: none; }
.dk-ansicht { margin-left: auto; }
.dk-ansicht button { padding: 7px 10px; }
.dk-ansicht button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk-ansicht svg { width: 15px; height: 15px; }
/* Ausgeblendete: ein Auge mit Zahl statt des Worts (31.10.2026), so hoch
wie der Ansichtsschalter daneben. */
#dk-showhidden { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; }
#dk-showhidden[hidden] { display: none; }
#dk-showhidden svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; }
#dk-showhidden b { font: 700 12.5px var(--font); font-variant-numeric: tabular-nums; }
/* Marken an den Karten der Sammlung (2026-10-18). Einheitlich in Karten-,
Regal- und Listenansicht: NEU oben links, der Grund fuer "nichts mehr ins
Deck" unten. Ausgegraut wird nur, was ausgeblendet ist. */
.dk-neu {
position: absolute; z-index: 6; top: 6px; left: 6px;
padding: 3px 7px; border-radius: 4px; background: var(--gold); color: #1b1610;
font: 800 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none;
}
.dk-lz-n .dk-neu { position: static; display: inline-block; margin-right: 6px; padding: 2px 5px; font-size: 9.5px; vertical-align: 1px; box-shadow: none; }
.dk-tile .dk-neu { top: -9px; left: -7px; } /* in der Kartenansicht ueber der Kante, nicht auf dem Namen */
/* "N in der Sammlung" (31.10.2026), bei jeder Karte. Erst ein
Stoerer oben links wie im Quartiermeister; Bastian hat aus vier
Positionen D gewaehlt: eine leise Zeile unter der Karte, ohne Kasten.
Sie liegt im Zeilenabstand des Rasters (.dk-grid, 30 px) und verschiebt
darum nichts. */
/* Links buendig mit dem GRUENEN Kartenrand, nicht mit dem SVG-Kasten
(Bastian, 31.10.2026 - dasselbe wie bei den Knoepfen im Detailfenster):
der Rand liegt 7,5 von 500 Einheiten innen, also 1,5 % der Kartenbreite. */
.dk-besitz {
position: absolute; z-index: 3; top: 100%; left: 1.5%; margin-top: 7px;
font: 500 11px/1 var(--font); color: var(--ink-mute); white-space: nowrap;
pointer-events: none;
}
.dk-detail-card > .dk-besitz { margin-top: 9px; font-size: 12.5px; }
/* Volle Karten: nicht ziehbar, Klick zeigt Details - also normaler Zeiger. */
.dk-fach.is-full, .dk-lz.is-full, .dk-tile.is-full { cursor: default; }
/* Hinweis beim Ziehversuch an einer vollen Karte (deck.js sperrHinweis) */
.dk-sperre {
position: fixed; z-index: 120; max-width: 260px; padding: 7px 11px; border-radius: 6px;
background: #241c12; border: 1px solid var(--gold); color: var(--ink);
font: 600 12.5px/1.35 var(--font); box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.dk-sperre.ist-da { opacity: 1; transform: none; }