/* Cold Start - das Paket in der Lobby. Siehe assets/paket.js. Die Kiste liegt NICHT auf dem Tisch, sondern kommt gross ueber das ganze Bild (Bastian, 2026-10-02: "soll als Overlay gross ueber das ganze Bild. Dann wird es geoeffnet, dann ist es weg."). */ .pk-ov { position: fixed; inset: 0; z-index: 60; background: rgba(8, 6, 4, .86); display: grid; place-items: safe center; overflow: auto; padding: 20px 0; } .pk-ov[hidden] { display: none; } /* Die Huelle haelt die Tafel und die Knopfzeile untereinander (Bastian, 18.10.2026: "Das soll immer bei allen Boxen ausserhalb stehen"). Sie ist so breit wie die Tafel - damit steht der Zaehler genau an deren linker Kante und der Hauptknopf an deren rechter. */ .pk-huelle { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .pk-karte { text-align: center; max-width: min(620px, 94vw); } /* Beim Inhalt bekommt das Fenster seine Tafel. Bei der Kiste NICHT: man sieht nur die Kiste, keinen Rahmen dahinter und keinen Text (Bastian, 2026-10-02). Deshalb hier ausdruecklich alles zurueckgesetzt - sonst schleppt eine spaetere Regel doch wieder einen Kasten herein. */ .pk-ov.ist-kiste .pk-karte { background: none; border: 0; border-radius: 0; padding: 0; max-width: none; } /* Feste Breite, nicht nach Inhalt: gemessen schrumpfte die Tafel sonst auf 180 px beim Erfolg, 238 beim Rahmen, 406 bei der Lackierung - die Stuecke kommen nacheinander, und eine Tafel, die bei jedem Schritt die Breite wechselt, macht die Uebergabe unruhig. Die Hoehe steht aus demselben Grund schon fest (.pk-buehne). */ .pk-ov.ist-inhalt .pk-karte { width: min(420px, 92vw); background: linear-gradient(#211a13, #15100b); border: 1px solid var(--gold); border-radius: 10px; padding: 18px 22px 20px; } /* DER GOLDENE SCHEIN NACH AUSSEN (Bastian, 18.10.2026: "alle geschenke sollen diese leuchten bekommen was die erfolge auch haben"). Dieselben zwei Lagen wie an der Erfolgstafel (.ne-karte in erfolg.css, Bastian am 2026-10-08: "die ganze Kachel einen goldenen Schein nach aussen"): eng und hell, weit und weich. Hier an der schlichten Tafel; bei der Kartenansicht sitzt er an der Spielkarte selbst (weiter unten), weil dort kein Rahmen mehr darum steht. :not(.ist-gross) ist noetig und nicht Zierde: die Kartenansicht traegt BEIDE Klassen (paket.js setzt 'pk-ov ist-inhalt ist-gross'). Ohne die Ausnahme leuchtete dort weiter der ganze Block - genau der Rahmen, der weg sollte, nur ohne Linie. */ .pk-ov.ist-inhalt:not(.ist-gross) .pk-karte { box-shadow: 0 0 14px rgba(232, 196, 90, .45), 0 0 48px rgba(232, 196, 90, .22); } /* KEIN RAHMEN UM DIE KARTENANSICHT (Bastian, 18.10.2026: "der doppelte Rahmen gefaellt mir nicht, mach das leuchten nur an die karte selbst und entferne den Rahmen"). Kurz zuvor hatte sie auf Rueckfrage eine goldene Tafel bekommen, damit man das Geschenk von der Sammlung unterscheidet. Im Bild stand damit ein goldener Rand um einen gruenen - die Spielkarte bringt ihren eigenen mit. Zwei Rahmen ineinander sind einer zu viel; der Unterschied zur Sammlung kommt jetzt allein aus dem Schein an der Karte (siehe unten). Die MASSE bleiben die der Sammlung: Karte 440 px, rechte Spalte 520. */ .pk-ov.ist-gross .pk-karte { width: auto; max-width: min(1040px, 96vw); background: none; border: 0; border-radius: 0; padding: 0; } /* Der Schein sitzt an der Spielkarte, nicht um die ganze Ansicht. drop-shadow und NICHT box-shadow: .dk-detail-card ist ein rechteckiges
um ein , und die Karte rundet ihre Ecken selbst. Ein box-shadow leuchtete am Kasten entlang, also quadratisch um eine runde Karte herum. drop-shadow folgt der gezeichneten Form. Der schwarze Schlagschatten aus deck.css steht vorn und bleibt erhalten - mehrere drop-shadow hintereinander legen sich uebereinander, und die Reihenfolge entscheidet, was ueber was liegt. */ .pk-ov.ist-gross .dk-detail-card { filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(232, 196, 90, .55)) drop-shadow(0 0 26px rgba(232, 196, 90, .30)); } .pk-ov.ist-gross .pk-anlass { margin-bottom: 10px; } /* Die rechte Spalte endet jetzt mit der Modellbuehne - die Knopfzeile steht ausserhalb der Tafel, wie bei jedem anderen Stueck. align-items: stretch bleibt, damit die Buehne die Hoehe der Karte mitgeht. */ .pk-ov.ist-gross .dk-detail { align-items: stretch; } /* FESTE BREITE, nicht dehnbare. Gemessen mit tools/pruefstaende/pruefpaket.js: Knopf und Karte waren bei Einheit und Befehl exakt gleich breit (176 und 440 px) - aber die rechte SPALTE begann einmal bei 762 px und einmal bei 777 px. Sie traegt im Kartendeck `flex: 1 1 520px`, dehnt sich also nach ihrem Inhalt. Der ganze rechte Block wanderte, nicht der Knopf. Im Kartendeck ist das richtig - dort sieht man eine Karte nach der anderen auf eigenen Wunsch. Hier laufen 24 Stuecke von selbst durch, und der Block muss stehen bleiben. */ .pk-ov.ist-gross .dk-detail-rechts { flex: 0 0 520px; } /* ENTFALLEN am 18.10.2026, als die Knopfzeile aus der Tafel wanderte: die Regeln fuer .dk-detail-fuss und .dk-detail-acts in diesem Fenster (margin-top: auto, padding-top, justify-content, flex der Knoepfe). Sie waren alle richtig gemessen - sie hielten den Knopf unten in der rechten Spalte, damit er zwischen Einheit und Befehl nicht sprang. Nur steht dort jetzt kein Knopf mehr, und eine Regel ohne Gegenstand ist kein Schutz, sondern Ballast: Wer sie spaeter liest, sucht einen Knopf, den es nicht gibt. Die Zusicherung selbst - der Knopf springt nicht - haelt seitdem .pk-huelle, und pruefpaket.js misst sie weiter. */ /* Dieselbe Ordnung auf der schlichten Tafel: Zaehler links, Knoepfe rechts - sonst sieht die Uebergabe je nach Stueck anders aufgebaut aus. */ .pk-knoepfe .pk-n { margin-right: auto; } /* Kein Umbruch im Knopf (18.10.2026, am Farbpaket aufgefallen): die Tafel ist so breit wie ihr Inhalt, und fuenf Farbkreise sind schmaler als eine Karte. "Alle annehmen" brach dort auf zwei Zeilen um und machte die Knopfzeile hoeher als bei allen anderen Stuecken - genau das Springen, das am selben Tag abgestellt wurde. Der Text bleibt jetzt in einer Zeile; die Tafel wird dafuer ein Stueck breiter, Platz ist da (max-width 1040). */ .pk-knoepfe .btn, .pk-ov.ist-gross .dk-detail-acts .btn { white-space: nowrap; } /* Der Zaehler ebenso - "7 von 8" brach sonst auf der schmalen Tafel hinter dem "7" um. */ .pk-n { white-space: nowrap; } .pk-anlass { /* Luft nach unten: die Kiste ist oben dunkel und breit, die Zeile klebte sonst auf dem Deckel. */ margin: 0 0 28px; font: 600 12px var(--font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); } /* ------------------------------------------------------------- Die Kiste */ .pk-kiste { display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; width: min(520px, 86vw); filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .6)); transition: transform .18s ease; } .pk-kiste:hover, .pk-kiste:focus-visible { transform: translateY(-6px); outline: none; } .pk-kiste-bild, .pk-kiste-svg { display: block; width: 100%; height: auto; } /* Liegt das gerenderte Bild vor, wird die gezeichnete Kiste nicht gebraucht. paket.js nimmt das heraus, wenn es fehlt - dann greift diese Regel nicht mehr und der Rueckfall wird sichtbar. */ .pk-kiste-bild + .pk-kiste-svg { display: none; } /* Das Oeffnen: die Kiste wird groesser und verschwindet in einem hellen Schein. Mehr braucht es nicht - der Inhalt ist der Auftritt, nicht die Verpackung. */ .pk-ov.ist-auf .pk-kiste { animation: pk-auf .46s cubic-bezier(.3, 0, .2, 1) forwards; pointer-events: none; } @keyframes pk-auf { 0% { transform: scale(1); opacity: 1; filter: drop-shadow(0 18px 34px rgba(0,0,0,.6)); } 38% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 40px rgba(232,196,90,.85)); } 100% { transform: scale(1.5); opacity: 0; filter: drop-shadow(0 0 70px rgba(232,196,90,0)); } } @keyframes pk-weg { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pk-kiste { transition: none; } .pk-kiste:hover, .pk-kiste:focus-visible { transform: none; } .pk-ov.ist-auf .pk-kiste { animation: pk-weg .12s ease forwards; } .pk-schein { animation: none; opacity: .85; } } /* Die gezeichnete Kiste - Platzhalter, bis das gerenderte Bild da ist. */ .pk-schatten { fill: rgba(0, 0, 0, .38); } .pk-innen { fill: #241b11; } .pk-holz { fill: #6d5736; } .pk-holz2 { fill: #7b6440; } .pk-holz-dunkel { fill: rgba(0, 0, 0, .22); } .pk-kante { fill: #8d7550; } .pk-naht { fill: rgba(0, 0, 0, .25); } .pk-band { fill: #3f3a2f; } .pk-band2 { fill: #3f3a2f; } .pk-niet { fill: #8a8373; } .pk-stern { fill: #c9a227; } /* Der Spalt unter dem angehobenen Deckel: das Einzige, was sagt, dass etwas drin ist. Ohne ihn ist es eine Kiste, mit ihm ein Paket. */ .pk-schein { fill: #e8c45a; animation: pk-atmen 2.6s ease-in-out infinite; } @keyframes pk-atmen { 0%, 100% { opacity: .55; } 76% { opacity: 1; } } /* ------------------------------------------------------------- Der Inhalt */ /* Die Buehne ist immer gleich hoch. Sonst springt der Knopf darunter je nachdem, ob gerade eine Karte oder ein Medaillon gezeigt wird. */ .pk-buehne { display: grid; place-items: center; min-height: 300px; margin: 0 0 12px; animation: pk-rein .3s ease; } @keyframes pk-rein { from { opacity: 0; transform: translateY(10px); } } .pk-buehne.ist-karte > * { width: min(300px, 76vw); height: auto; } .pk-buehne.ist-mini svg { width: min(360px, 84vw); height: auto; } /* DER ZEIGER SAGT, DASS MAN DREHEN KANN (Bastian, 18.10.2026: "beim drehen wird das Cursor Icon nicht geaendert"). Die Figur in der Kartenansicht traegt .dk-miniview-svg und bekommt `cursor: ew-resize` aus deck.css mit. Die Lackierungsbuehne hat ein eigenes SVG (.pk-dreh) und erbt davon nichts - dort stand der gewoehnliche Pfeil, obwohl sich die Figur drehen laesst. Eine Geste, die man nicht sieht, gibt es fuer den Spieler nicht. touch-action: none, damit das Ziehen auf einem Tastbildschirm die Figur dreht und nicht die Seite rollt. */ .pk-dreh { cursor: ew-resize; touch-action: none; } /* Waehrend des Ziehens behaelt der Zeiger die Form, auch wenn man ueber den Rand der Figur hinausfaehrt - sonst flackert er zwischen Pfeil und Hand, und das Drehen laeuft ja weiter. */ .pk-ov.ist-dreht, .pk-ov.ist-dreht * { cursor: ew-resize !important; } .pk-buehne.ist-zeichen svg { width: 150px; height: 150px; } /* Goldstreifen aus einem Geschenk (Geburtstag) */ .pk-buehne.ist-gold img { width: 170px; height: auto; display: block; } /* Farben und Farbpakete (Bastian, 18.10.2026). Dieselbe Reihe wie beim Quartiermeister (.qm-k-farben / .qm-ap-farben), nur gross: dort sind die Kreise 26 bzw. 46 px, hier ist die ganze Buehne dafuer da. Der dunkle Ring ist nicht Zierde - ohne ihn verschwimmen Neonmint und Neoncyan ineinander, wo sie sich ueberlappen. */ /* DIE REIHE MUSS IN DIE TAFEL PASSEN (Bastian, 18.10.2026: "Das Paket passt nicht in die Box, die Farben muessen da kleiner werden"). Erst standen hier 96 px. Fuenf davon mit 18 px Ueberlappung sind 408 px - die Tafel ist aber fest 420 px breit und hat 22 px Innenabstand je Seite, es bleiben also 376 px. Die Reihe lief rechts aus der Tafel heraus. Die feste Tafelbreite ist Absicht (siehe .pk-ov.ist-inhalt .pk-karte: eine wechselnde Breite macht die Uebergabe unruhig), also muessen sich die Kreise danach richten, nicht umgekehrt. 76 px bei 14 px Ueberlappung ergeben 5 * 76 - 4 * 14 = 324 px. `flex: 0 1 76px` mit aspect-ratio laesst sie zusaetzlich schrumpfen statt ueberzulaufen, falls einmal ein Paket mit sechs Farben kommt - rund bleiben sie dabei. */ .pk-buehne.ist-farben .pk-farben { display: flex; align-items: center; justify-content: center; width: 100%; } .pk-buehne.ist-farben i { flex: 0 1 76px; width: 76px; aspect-ratio: 1; height: auto; min-width: 0; border-radius: 50%; margin-left: -14px; background: linear-gradient(135deg, var(--h), var(--d)); border: 3px solid #141009; box-shadow: inset 0 2px 6px rgba(255, 255, 255, .22), inset 0 -6px 12px rgba(0, 0, 0, .35); } .pk-buehne.ist-farben i:first-child { margin-left: 0; } /* Eine einzelne Farbe hat keinen Nachbarn, an den sie sich anlehnt - die darf groesser stehen. */ .pk-buehne.ist-farben .pk-farben i:only-child { flex: 0 0 150px; width: 150px; } .pk-siegel { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--gold); background: #4a3f2c; color: #e8dcb0; font: 700 54px var(--font); } .pk-name { margin: 0 0 16px; } .pk-name b { display: block; font: 700 19px var(--font); color: var(--ink); } .pk-name small { display: block; margin-top: 2px; font: 600 11px var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mute); } /* Zaehler links an der Kante, Knoepfe rechts - dieselbe Ordnung wie in der grossen Kartenansicht, damit die Uebergabe nicht je Stueck anders aufgebaut aussieht. */ .pk-knoepfe { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .pk-knoepfe[hidden] { display: none; } /* Die Fehlermeldung hat keinen Zaehler und nur einen Knopf - der steht mittig. */ .pk-knoepfe.ist-mittig { justify-content: center; } .pk-n { font: 500 12px var(--font); color: var(--ink-mute); } .pk-fehler { margin: 0 0 16px; font: 400 14px/1.5 var(--font); color: var(--ink-dim); background: linear-gradient(#211a13, #15100b); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 20px 24px; } @media (max-width: 620px) { .pk-ov.ist-inhalt .pk-karte { padding: 14px 16px 16px; } .pk-buehne { min-height: 240px; } .pk-kiste { width: 86vw; } } /* Befehle ohne Modell behalten die Buehne, aber leer (Bastian, 18.10.2026). Der Zeiger darf dann nichts versprechen: gedreht wird nur eine Figur. */ .pk-ov .dk-miniview.ist-leer .dk-miniview-svg { cursor: default; filter: none; } /* Rechte Spalte genau so breit wie die Karte links (Bastian, 2026-10-18: "der rechte Bereich soll genau so breit sein wie der linke mit der Karte"). Die Karte steht fest auf 440 px (deck.css .dk-detail-card). */ .pk-ov.ist-gross .dk-detail-rechts { flex: 0 0 440px; width: 440px; } @media (max-width: 1040px) { /* dieselbe Grenze wie deck.css */ .pk-ov.ist-gross .dk-detail-rechts { flex: 0 0 auto; width: min(440px, calc(100vw - 40px)); } }