/* Alle Schriftarten lokal gehostet - keine Verbindung mehr zu Google- Servern (siehe /lizenzen). Lizenz: SIL Open Font License 1.1. Inter: github.com/rsms/inter | IBM Plex Mono: github.com/IBM/plex */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/Inter-Regular.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/Inter-Medium.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/Inter-Bold.woff2') format('woff2'); } /* IBM Plex Mono liegt NUR als Medium (500) im Projekt - es gibt keine zweite Datei. Ueberall auf der Seite steht an den Monospace-Stellen aber `font-weight:700` (Plaketten, Kennzahlen, Spaltenkoepfe). Stand hier `font-weight:500`, galt die Datei nur fuer genau 500 - und fuer 700 rechnete der Browser sich einen fetten Schnitt selbst aus (synthetisches Fett). Bei 9 bis 11 Pixeln laeuft das ineinander, und genau daran waren die kleinen Zahlen schwer zu lesen. `font-weight:400 700` sagt: Diese eine Datei deckt den ganzen Bereich ab. Der Browser nimmt sie unveraendert und rechnet nichts hinzu. Die Marken wirken dadurch eine Spur weniger fett - dafuer sind sie scharf. Besser waere eine echte IBMPlexMono-SemiBold.woff2 neben der Medium (OFL, github.com/IBM/plex). Liegt sie eines Tages im Ordner, kommt ein zweites @font-face mit `font-weight:600` dazu und diese Zeile wird wieder auf `400 500` eingegrenzt. */ @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'); } :root{ /* ======================================================================= DUNKLES KOMPENDIUM ======================================================================= Hier stand `--akzent: var(--info)`. Das ist woertlich Tailwind-Blau 600 - dieselbe Farbe, die jedes zweite Dashboard im Netz benutzt. Zusammen mit Inter, 10px-Radien und weissen Flaechen ergab das ein kompetentes Admin-Panel und kein Portal, auf dem man stoebern will. Die neue Richtung war im Haus schon vorhanden, nur nie ausgerollt: Auf der Spielseite gab es einen Goldakzent (#E9C171 / #C4923A) an genau fuenf Stellen. Der wird jetzt zur Leitfarbe. ----------------------------------------------------------------------- WARUM DUNKEL DIE VORGABE IST ----------------------------------------------------------------------- Nicht aus Mode. Ein Nachschlagewerk wird lange und oft am Abend gelesen, und Gold traegt auf Tinte, waehrend es auf Weiss verschwindet - deshalb hat der helle Modus unten eine eigene, dunklere Goldstufe. Der Umschalter bleibt; er schreibt weiterhin `data-theme`. Geaendert hat sich nur, was ohne gespeicherte Wahl gilt. ----------------------------------------------------------------------- WARUM DIE FARBEN NICHT NEUTRALGRAU SIND ----------------------------------------------------------------------- `--text` ist #E8E4DA und nicht #FFFFFF: ein warmes Pergamentweiss. Reines Weiss auf fast-Schwarz ist der Kontrast, bei dem die Buchstaben zu flimmern anfangen, und es sieht aus wie ein Terminal. Ein halbes Grad Waerme macht aus einem Bildschirm eine Seite. Dasselbe bei den Flaechen: #12151F hat einen Blaustich, #0B0D14 einen staerkeren. Zwei Toene mit derselben Temperatur wirken flach; zwei mit leicht verschobener Temperatur wirken uebereinander gelegt. ======================================================================= */ --bg: #0B0D14; --bg-tief: #07080D; --oberflaeche: #12151F; --oberflaeche-2: #1A1F2E; --text: #E8E4DA; --text-2: #97918A; --border: #242A38; /* Gold. Die helle Stufe traegt Text und Linien, die tiefe fuellt Flaechen - auf einer gefuellten Goldflaeche steht dunkler Text, nicht heller. */ --akzent: #E9C171; --akzent-tief: #C4923A; /* Eine Goldkante, die man nicht als Linie liest, sondern als Schimmer. Fuer Karten, die hervorgehoben sind, ohne zu schreien. */ --kante-gold: rgba(233,193,113,.22); /* Eine GARANTIERT blickdichte Flaeche - fuer Fenster, die ÜBER dem dynamischen Hintergrundbild schweben (Cookie-Einstellungen, News & Updates). `--oberflaeche` wird im dynamischen Modus absichtlich durchscheinend (siehe body.dynamisch-modus weiter unten), damit das Motiv durch normale Flaechen der Seite schimmert - ein Fenster mit Lesetext braucht das Gegenteil. Ausserhalb des dynamischen Modus ist `--oberflaeche` ohnehin schon deckend, hier passiert also nichts. */ --oberflaeche-modal: var(--oberflaeche); /* --------------------------------------------------------------------- STATUSFARBEN - VIER TOKEN, KEINE ZWEITE PALETTE --------------------------------------------------------------------- Diese vier gab es schon; daneben standen im Stylesheet aber zwei weitere Saetze roher Hexwerte: Tailwind-Rot/Gruen/Blau (var(--fehler), var(--erfolg), var(--info)) und ein aelteres Paar (var(--fehler) / var(--erfolg)). Das war nicht nur Unordnung, sondern ein sichtbarer Fehler: Die TOKEN wechseln im hellen Modus (unten), die rohen Hexwerte nicht. Ein rotes var(--fehler) auf Pergament ist ein anderes Rot als --fehler - dieselbe Bedeutung, zwei Farben, je nach Seite. `--info` ist neu: Fuer "stark gegen", "magisch", Hinweise gab es bis jetzt kein Token, nur das Tailwind-Blau. */ --erfolg: #4ADE9B; --warnung: #FBBF24; --fehler: #F87171; --info: #7FA8D9; /* ----------------------------------------------------------------------- GRUPPENFARBEN (RPG Builder Portal, Phase 11 - 2026-09-05) ----------------------------------------------------------------------- Eine Akzentfarbe je `entitaet_arten.gruppe` - dieselben fünf Werte, die der Katalog schon kennt (figuren/welt/sachen/koennen/aufgaben), nicht neu erfunden. Dient der Entity Card und dem Icon-Set als Farbcode, DAMIT ein Gegner auf den ersten Blick anders wirkt als ein Ort - nicht als zweites Farbsystem neben --akzent, sondern als Ergänzung dafür. */ --gruppe-figuren: #E08585; --gruppe-welt: #6FBF9E; --gruppe-sachen: #7FA8D9; --gruppe-koennen: #B589E8; --gruppe-aufgaben: #E0A458; /* ----------------------------------------------------------------------- SCHRIFTEN ----------------------------------------------------------------------- Ueberschriften bekommen eine Serife. Das ist der einzelne Griff, der am meisten ausmacht: Eine Grotesk-Schlagzeile liest sich wie eine Benutzeroberflaeche, eine Serifen-Schlagzeile wie ein Text, den jemand geschrieben hat. ES IST EINE SYSTEMSCHRIFT, UND ZWAR ABSICHTLICH VORLAEUFIG. Das Projekt bindet Schriften ausschliesslich lokal ein (siehe /lizenzen) und laedt nichts von fremden Servern. Eine passende Serife als .woff2 liegt nicht im Projekt, und sie laesst sich von hier aus nicht beschaffen. Die Kette unten trifft auf macOS Iowan Old Style, auf Windows Georgia - beide taugen. Wer spaeter eine eigene Serife einbaut (etwa Source Serif oder Spectral, beide OFL), legt die .woff2 nach /assets/fonts, ergaenzt ein @font-face und setzt hier den Namen davor. Eine Stelle, und die ganze Seite folgt. ----------------------------------------------------------------------- */ --schrift-display: 'Iowan Old Style','Palatino Linotype',Palatino, 'Book Antiqua',Georgia,'Times New Roman',serif; --schrift-text: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --schrift-mono: 'IBM Plex Mono',ui-monospace,monospace; /* ----------------------------------------------------------------------- RADIEN UND ERHEBUNG ----------------------------------------------------------------------- 10px ueberall war die Vorgabe - und 10px ist der Radius, den man nimmt, wenn man sich nicht entschieden hat. Drei Stufen sagen etwas: Ein Chip ist fast rund, eine Karte hat eine ruhige Kante, ein Fenster eine weiche. ----------------------------------------------------------------------- */ /* Die runde Form (Plaketten, Chips, Knoepfe) stand 99-mal als roher Wert im Blatt, in zwei Schreibweisen (999px und 99px). Sie bedeuten dasselbe - und eine Form, die zweimal geschrieben wird, wird irgendwann nur einmal geaendert. */ --radius-rund: 999px; --radius: 12px; --radius-klein: 8px; --radius-gross: 18px; /* Schatten auf Dunkel funktionieren nicht ueber Schwaerze - da ist schon alles schwarz. Sie funktionieren ueber eine helle Oberkante: Das Auge liest die Lichtkante als Erhebung. */ --erhebung: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 8px rgba(0,0,0,.35); --erhebung-hoch: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 32px rgba(0,0,0,.5); /* Eine Dauer, ein Verlauf - damit sich die ganze Seite gleich anfuehlt. Verschiedene Geschwindigkeiten an verschiedenen Stellen nimmt man nicht bewusst wahr; man haelt die Seite fuer unsauber gebaut. */ --dauer: .16s; --kurve: cubic-bezier(.2,.6,.3,1); /* ======================================================================= ZWEI BREITEN: DER KOPF BLEIBT, DER INHALT WAECHST MIT ======================================================================= Hier stand EIN Wert - 1280px - fuer Kopfbanner, Navigation, Seiteninhalt und Fusszeile. Auf einem 1280er-Bildschirm ist das richtig. Auf einem Full-HD-Schirm stehen links und rechts je 320px leer, auf einem 4K-Schirm je 1280px - dort nimmt der Inhalt ein Drittel der Flaeche ein und der Rest ist Hintergrund. --kopf-breite bleibt fest. Das Kopfbild ist ein Bild mit fester Hoehe; es auf 2400px zu ziehen macht daraus einen Streifen. Die Navigationsleiste haengt daran, damit beide Kanten zusammen bleiben. --inhalt-breite waechst mit dem Fenster: ab 1280px aufwaerts nimmt der Inhalt 92% der Fensterbreite, bis 2400px. Darueber ist Schluss - nicht aus Bequemlichkeit, sondern weil eine Textzeile ueber 2400px niemand mehr liest; das Auge verliert beim Ruecksprung die Zeile. Der Platz jenseits davon geht nicht verloren: Die Raster auf den Seiten stehen auf `auto-fill`, sie machen aus mehr Breite MEHR SPALTEN statt laengerer Zeilen. Das ist der Unterschied zwischen „voll genutzt" und „auseinandergezogen". Innenabstand der Container sind 32 px je Seite; --inhalt-innen ist die Breite, die dem Text tatsaechlich bleibt, und wird fuer die Trennlinien der Fusszeile gebraucht. */ --kopf-breite: 1280px; /* ----------------------------------------------------------------- ZWEI INHALTSBREITEN ----------------------------------------------------------------- `--inhalt-breite` stand auf 92vw bis 2400px. Das nutzt einen grossen Schirm aus und ist fuer eine LESESEITE zu viel: Die Kacheln werden so breit, dass Bezeichnung und Wert an den entgegengesetzten Raendern stehen und das Auge dazwischen sucht. 82vw bis 1760px ist die Lesebreite - immer noch deutlich mehr als die festen 1280px von frueher, aber ruhiger. Die STARTSEITE ist etwas anderes: Sie zeigt Kacheln nebeneinander, keine Wertetabellen. Dort ist mehr Breite mehr Inhalt, und sie bekommt deshalb ihre eigene Zahl. Der Kopf bleibt unberuehrt - `--kopf-breite` haengt an keiner der beiden. ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- DIE OBERGRENZEN ----------------------------------------------------------------- Erst 2400px (zu breit fuer Wertetabellen), dann 1760px - und das war auf einem sehr breiten Fenster zu wenig: Der Inhalt stand als schmaler Streifen in der Mitte, mit leerer Flaeche links und rechts, die breiter war als er selbst. 2040px ist der Ausgleich. Auf Full HD greift ohnehin `86vw` und nicht die Obergrenze - dort aendert sich damit fast nichts. Sie wirkt erst ab etwa 2370px Fensterbreite, und genau dort war das Problem. `86vw` statt `82vw`: vier Prozent mehr Inhalt und entsprechend weniger Rand. Der Unterschied ist klein und auf einem grossen Schirm sichtbar. ----------------------------------------------------------------- */ --inhalt-breite: clamp(1100px, 86vw, 2040px); --inhalt-breite-weit: clamp(1280px, 94vw, 2480px); --inhalt-innen: calc(var(--inhalt-breite) - 64px); /* Fuer Fliesstext: Auch in einer 2400px breiten Spalte darf ein Absatz nicht ueber die ganze Breite laufen. 78 Zeichen ist die Grenze, ab der das Auge beim Zeilenwechsel anfaengt zu suchen. */ --lese-breite: 78ch; } /* ========================================================================= DER HELLE MODUS - PERGAMENT, NICHT BUEROPAPIER ========================================================================= Vorher war Hell die Vorgabe und Dunkel die Ausnahme; jetzt ist es umgekehrt. Der Umschalter und das Attribut haben sich NICHT geaendert - `data-theme` traegt weiterhin `dunkel` oder `hell`. Geaendert hat sich nur, was ohne gespeicherte Wahl gilt. Damit die dreizehn Regeln im Stylesheet, die auf `[data-theme="dunkel"]` zeigen, weiter greifen, schreibt das Skript im das Attribut jetzt IMMER - auch beim ersten Besuch. Ohne das haetten sie beim ersten Aufruf nicht gegriffen und ab dem zweiten schon; ein Fehler, der sich beim Neuladen selbst repariert und deshalb schwer zu finden ist. ------------------------------------------------------------------------- GOLD BRAUCHT HIER EINEN ANDEREN WERT ------------------------------------------------------------------------- #E9C171 auf #0B0D14 ist ein Kontrast von etwa 9:1 - sehr gut lesbar. Dasselbe Gold auf hellem Papier kommt auf 1,6:1 und ist als Text unbrauchbar. Es ist also nicht dieselbe Farbe in beiden Modi, sondern dieselbe FUNKTION: das gedeckte #8A5D14 traegt hier, was dort das helle Gold traegt. Wer eine Marke ueber die Lesbarkeit stellt, bekommt eine Marke, die niemand lesen kann. ========================================================================= */ :root[data-theme="hell"]{ /* ----------------------------------------------------------------- REINES WEISS WAR DER FEHLER ----------------------------------------------------------------- `--oberflaeche` stand auf #FFFFFF. Auf einem waermeren Grund ist eine reinweisse Flaeche kein Blatt, sondern eine Leuchtplatte - und der RPG Explorer, der aus lauter solchen Flaechen besteht, blendete entsprechend. Der Modus heisst „Pergament" und nicht „Bueropapier": Alle drei Toene tragen denselben warmen Stich, und die Karte liegt eine Spur HELLER als die Seite - das liest das Auge als aufliegendes Blatt. Reines Weiss kommt gar nicht mehr vor. ----------------------------------------------------------------- */ --bg: #F4F1E8; --bg-tief: #EBE6D9; --oberflaeche: #FCFAF3; --oberflaeche-2: #EDE8DA; --text: #1C1A16; --text-2: #6B6558; --border: #E2DDD0; --akzent: #8A5D14; --akzent-tief: #6B4710; --kante-gold: rgba(138,93,20,.22); --erfolg: #15803D; --warnung: #B45309; --fehler: #B91C1C; --info: #2F5C8F; --gruppe-figuren: #B84A4A; --gruppe-welt: #2F7A5C; --gruppe-sachen: #3A628F; --gruppe-koennen: #7A4FA8; --gruppe-aufgaben: #A3661E; /* Auf Papier ist Erhebung ein Schatten, keine Lichtkante. */ --erhebung: 0 1px 2px rgba(28,26,22,.06), 0 2px 8px rgba(28,26,22,.04); --erhebung-hoch: 0 12px 32px rgba(28,26,22,.12); } /* Die dunklen Werte gelten sowohl ohne Attribut als auch mit `dunkel`. Der Block ist leer bis auf diesen Hinweis: Die Werte stehen oben in `:root`, weil Dunkel die Vorgabe ist. Diese Regel steht hier trotzdem, damit jemand, der nach `data-theme="dunkel"` sucht, nicht ins Leere greift und glaubt, der dunkle Modus sei verschwunden. */ :root[data-theme="dunkel"]{ color-scheme: dark; /* Sagt dem Browser, wie er Bildlaufleisten und Formularelemente zeichnen soll. Stand als zweite Regel fuer denselben Selektor daneben - dieselbe Sorte Doppelung, gegen die es einen Test gibt. Der greift nur bei Klassenselektoren, hier war also niemand zustaendig ausser dem Lesen. */ color-scheme: light; } *{ box-sizing: border-box; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--schrift-text); /* 16px und 1.65 standen bis 2026-09-12 ein zweites Mal am ENDE des Blattes und ueberschrieben die Werte, die hier begruendet wurden - wer hier etwas aenderte, sah keine Wirkung. Jetzt steht die Grundschrift an einer Stelle. 16px, weil 14px die Groesse von Bedienoberflaechen ist und das Portal zu weiten Teilen aus Fliesstext besteht. 1.65 ist der spuerbarste Einzelwert fuer Lesbarkeit und der billigste - er kostet nur senkrechten Platz. */ font-size:16px; line-height:1.65; transition:background .2s ease, color .2s ease; /* Ohne das rendert Chrome die Inter auf dunklem Grund fetter, als sie ist - die Buchstaben laufen zu und wirken schmutzig. */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- Seitenhintergrund ------------------------------------------ Zwei Lagen, beide selbst erstellt und ohne fremde Quellen: 1. weiche Lichtflecken aus reinen CSS-Verläufen. Sie greifen auf die Akzentfarbe zurück und passen sich damit von allein an Hell- und Dunkelmodus an. Im dynamischen Modus wird diese Ebene komplett durch das Hintergrundbild ersetzt (siehe unten). 2. hintergrund-muster.svg - ein eigens gezeichnetes, nahtlos wiederholtes Kartenraster mit Höhenlinien. Bewusst in einer eigenen Ebene hinter dem Inhalt (position:fixed, z-index negativ) statt als background des body: so scrollt der Hintergrund nicht mit, bleibt bei langen Seiten ruhig und kostet kein erneutes Zeichnen. pointer-events:none, damit die Ebene keine Klicks abfängt. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:var(--bg); background-image: radial-gradient(70rem 40rem at 12% -10%, color-mix(in srgb, var(--akzent) 12%, transparent) 0%, transparent 60%), radial-gradient(55rem 35rem at 88% 8%, color-mix(in srgb, var(--akzent) 9%, transparent) 0%, transparent 62%), radial-gradient(60rem 45rem at 50% 108%, color-mix(in srgb, var(--akzent) 7%, transparent) 0%, transparent 65%), url('/assets/images/hintergrund-muster.svg'); background-repeat:no-repeat, no-repeat, no-repeat, repeat; background-size:auto, auto, auto, 160px 160px; } /* Im Dunkelmodus darf das Muster etwas deutlicher sein - auf hellem Grund wirkt dieselbe Deckkraft schnell schmutzig. */ :root[data-theme="dunkel"] body::before{ opacity:1; } :root:not([data-theme="dunkel"]) body::before{ opacity:0.75; } /* Wer es ganz ruhig mag oder Bewegung reduziert haben will, bekommt nur die Grundfarbe - das Muster ist Schmuck, kein Bedeutungsträger. */ @media (prefers-reduced-motion: reduce){ body::before{ transition:none; } } /* ---------- Optionaler dynamischer Hintergrund (Admin/Einstellungen) -------- Ganzflaechiges Bild (/assets/images/ultra-wide.*) statt des normalen Hintergrunds. Ueberschreibt die Design-Tokens NUR innerhalb von body.dynamisch-modus (kaskadiert auf alle Kinder) - Komponenten selbst bleiben unveraendert. Wirkt unabhaengig vom Hell-/Dunkelmodus-Schalter, da das Motiv inhaerent dunkel ist und helle Tokens darauf unlesbar waeren. "Dynamisch" heisst hier dreierlei: 1. das Bild liegt in festen Ebenen hinter dem Inhalt (body::before und body::after, siehe unten) - es passt sich jeder Fenstergroesse und jedem Seitenverhaeltnis an, scrollt nicht mit, wird nie gekachelt und ist dabei immer vollstaendig zu sehen; 2. die Flaechen der Seite werden durchscheinend (--oberflaeche/--bg mit Alpha), damit das Motiv ueberall durchtraegt statt vom Inhalt zugedeckt zu werden; 3. eine sehr langsame Bewegung auf der unscharfen Fuellebene haelt die Seite in Bewegung, ohne das scharfe Bild anzufassen. */ /* ========================================================================= DER DYNAMISCHE MODUS UEBERSCHRIEB DEN AKZENT MIT BLAU ========================================================================= Hier stand `--akzent: #8CC2FF` - ein helles Blau, passend zum Motiv im Hintergrund und zum damaligen blauen Portal. Seit das Portal gold ist, war das ein Schalter, der den ganzen Umbau zuruecknahm: Wer den dynamischen Hintergrund eingeschaltet hatte, sah weiterhin eine blaue Seite - und musste denken, es habe sich nichts geaendert. Was dieser Modus WIRKLICH tut, bleibt: Die Flaechen werden durchscheinend, damit das Motiv ueberall durchtraegt. Das ist der Zweck, und dafuer braucht es keine eigene Leitfarbe. Die Farben sind deshalb nicht mehr fest eingetragen, sondern aus den Tokens gemischt: `color-mix` gegen `transparent` macht aus der Flaeche der Seite eine durchscheinende Flaeche - in jedem Modus, mit jeder spaeteren Farbaenderung. ========================================================================= */ body.dynamisch-modus{ /* Ein tiefer, kuehler Grund unter dem Motiv - er traegt den Schleier, der den Text lesbar haelt. */ --bg: rgba(9,11,18,0.84); --oberflaeche: rgba(24,28,42,0.62); --oberflaeche-2: rgba(38,44,62,0.66); /* Dieselbe Tonung wie `--oberflaeche` oben, aber OHNE Alpha - siehe die Begruendung bei der Definition in :root. Cookie-Einstellungen und News & Updates sollen ueber dem Hintergrundbild lesbar bleiben, nicht durchscheinend werden. */ --oberflaeche-modal: rgb(24,28,42); /* Etwas heller als sonst: Auf einem Bild braucht Text mehr Abstand zum Untergrund als auf einer ruhigen Flaeche. */ --text: #F3EFE4; --text-2: #C0B8A8; --border: rgba(233,193,113,0.26); --kante-gold: rgba(233,193,113,0.34); /* Der Akzent bleibt Gold. Genau das war vorher anders. */ background:transparent; } /* Der Hintergrund besteht in diesem Modus aus ZWEI festen Ebenen. Grund: /* Der Hintergrund besteht aus ZWEI festen Ebenen: body::before = das Bild selbst, formatfuellend (cover) body::after = Schleier und Lichtakzente fuer die Textlesbarkeit WARUM COVER UND NICHT CONTAIN Frueher lag hier eine unscharfe Fuellebene unter einem contain-Bild: Das Motiv war dadurch immer vollstaendig zu sehen, sass aber als Rechteck in der Mitte, mit weichgezeichneten Raendern links und rechts. Gewuenscht ist eine wirklich formatfuellende Flaeche - deshalb jetzt cover. Das Bild fuellt damit jede Fenstergroesse und jedes Seitenverhaeltnis randlos aus, und die Fuellebene entfaellt ersatzlos. Nebeneffekt: Der Weichzeichner ist weg, der auf Mobilgeraeten der teuerste Teil der ganzen Darstellung war. DER ZUSCHNITT IST DAS EIGENTLICHE THEMA Ultra_Wide.jpg ist 3226x1382, also 2,33:1. Ein Handy im Hochformat hat rund 0,46:1. Beides gleichzeitig - vollstaendig UND randlos - ist geometrisch unmoeglich: Bei cover bleiben auf dem Handy nur etwa 20 % der Bildbreite sichtbar. Entscheidend ist deshalb, WELCHE 20 %. Das Motiv hat seine Dichte an den Raendern - links das violette Portal, rechts die blaue Konstellation ueber der schwebenden Festung -, waehrend die Mitte fast leerer Nachthimmel ist. Ein mittiger Zuschnitt wuerde auf dem Handy also ausgerechnet die leere Flaeche zeigen. Bei schmalen Seitenverhaeltnissen wandert der Ausschnitt deshalb nach rechts (siehe Media Query weiter unten). BILDGROESSEN Ausgeliefert wird WebP mit JPEG als Rueckfallebene, und die Aufloesung richtet sich nach der Fensterbreite: 900 px fuer Handys (13 KB), 1600 px fuer Tablets (33 KB), volle Breite fuer Desktop (100 KB). Die volle Datei auf ein Handy zu schicken, um davon vier Fuenftel wegzuschneiden, waere ueber Mobilfunk die teuerste denkbare Art, einen Hintergrund zu zeigen. background-color #070A1A entspricht der gemessenen Randfarbe des Bildes und greift nur, falls die Datei nicht laedt. Der :root-Praefix hebt die Spezifitaet ueber die Deckkraft-Regeln oben. */ :root body.dynamisch-modus::before{ opacity:1; background-color:#070A1A; /* Zuerst die einfache Form fuer Browser ohne image-set - sie laedt JPEG. Die Zeile darunter ueberschreibt sie, wo image-set verstanden wird. */ background-image:url('/assets/images/ultra-wide.jpg'); background-image:image-set( url('/assets/images/ultra-wide.webp') type('image/webp'), url('/assets/images/ultra-wide.jpg') type('image/jpeg') ); background-repeat:no-repeat; background-size:cover; background-position:center center; /* Kein Weichzeichner und keine Skalierung mehr: Das Bild soll scharf und unveraendert zu sehen sein. Eine Animation wuerde es zusaetzlich vergroessern und damit weiter beschneiden - genau das Gegenteil von "moeglichst vollstaendig". */ filter:none; transform:none; } /* ---- Kleinere Dateien fuer kleinere Fenster ---- Die Breiten sind grosszuegig gewaehlt: Ein Handy mit 390 px CSS-Breite und dreifacher Pixeldichte braucht rechnerisch 1170 px - vom Ultra-Wide-Bild wird davon aber nur ein Ausschnitt gezeigt, sodass 900 px Quellbreite ausreichen, ohne sichtbar weich zu werden. */ @media (max-width: 700px){ :root body.dynamisch-modus::before{ background-image:url('/assets/images/ultra-wide-900.webp'); background-image:image-set( url('/assets/images/ultra-wide-900.webp') type('image/webp'), url('/assets/images/ultra-wide.jpg') type('image/jpeg') ); } } @media (min-width: 701px) and (max-width: 1400px){ :root body.dynamisch-modus::before{ background-image:url('/assets/images/ultra-wide-1600.webp'); background-image:image-set( url('/assets/images/ultra-wide-1600.webp') type('image/webp'), url('/assets/images/ultra-wide.jpg') type('image/jpeg') ); } } /* ---- Zuschnitt bei hohen, schmalen Fenstern ---- Ab hier ist das Fenster hoeher als breit - typisch fuer ein Handy im Hochformat. Der sichtbare Ausschnitt wandert nach rechts auf die blaue Konstellation ueber der Festung; mittig laege dort nur leerer Himmel. 82 % ist an drei Ausschnitten geprueft (68 / 82 / 90 %) und der beste Kompromiss: Bei 68 % bleibt die rechte Haelfte des Streifens leerer Himmel, bei 90 % wird die Festung vom Bildrand angeschnitten. 82 % zeigt auf einem Handy mit 375x812 den Bereich von 66 % bis 86 % - dort stehen die blaue Konstellation oben und die schwebende Festung mit ihrem Lichtstrahl unten, beide vollstaendig im Bild. */ @media (max-aspect-ratio: 1/1){ :root body.dynamisch-modus::before{ background-position:82% center; } } /* Querformat auf dem Handy: Das Seitenverhaeltnis liegt dann nahe am Bild selbst - hier ist mittig richtig, und es ist fast alles zu sehen. */ /* Das Bild traegt an vielen Stellen helle Punkte; ohne diesen Schleier waere Text darauf stellenweise unlesbar. Die beiden Radialverlaeufe setzen zwei sehr weiche Lichtakzente, der Linearverlauf dunkelt oben und unten ab - dort stehen Kopfzeile und Fusszeile. */ body.dynamisch-modus::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image: radial-gradient(50rem 32rem at 22% 18%, rgba(140,194,255,0.10) 0%, transparent 62%), radial-gradient(42rem 28rem at 78% 72%, rgba(120,110,220,0.09) 0%, transparent 65%), linear-gradient(to bottom, rgba(6,7,22,0.50) 0%, rgba(6,7,22,0.10) 32%, rgba(6,7,22,0.38) 100%); background-repeat:no-repeat, no-repeat, no-repeat; background-size:100% 100%, 100% 100%, 100% 100%; background-position:center, center, center; } /* Der Kopfbereich hat sonst eine deckende Flaeche - hier wuerde sie das Bild oben abschneiden. */ body.dynamisch-modus .kopf-bereich{ background:transparent; } /* Flaechen bekommen eine Milchglas-Wirkung: dahinter weichgezeichnetes Bild statt harter Kante. Bewusst nur auf den grossen Behaeltern - auf jedem Chip waere der Weichzeichner reine Rechenlast. */ body.dynamisch-modus .karte, body.dynamisch-modus .portal-karte, body.dynamisch-modus .portal-kasten, body.dynamisch-modus .mein-portal-karte, body.dynamisch-modus .bericht-karte, body.dynamisch-modus .admin-quickstart-karte, body.dynamisch-modus .nachricht, body.dynamisch-modus .nav-menue, body.dynamisch-modus .admin-nav, body.dynamisch-modus .finder-formular, body.dynamisch-modus .bewertung-block, body.dynamisch-modus .fortschritt-widget, body.dynamisch-modus .konto-info{ backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); } /* Der Akzent ist in diesem Modus ein helles Blau. Ueberall dort, wo er als FLAECHE dient (aktiver Reiter, Knopf, Filter-Chip), waere die sonst uebliche weisse Schrift darauf kaum noch lesbar - dort kommt deshalb ein dunkles Marineblau zum Einsatz. Gilt fuer alle Menues gleichermassen: Hauptnav, Aufklappmenue, Spielseiten-Reiter, Admin-Nav, Portal- und Suchfilter. */ body.dynamisch-modus .btn:not(.btn-sekundaer), body.dynamisch-modus .segment-umschalter a.aktiv, body.dynamisch-modus .spiel-admin-tab.ist-aktiv, body.dynamisch-modus .admin-nav-tabs a.ist-aktiv, body.dynamisch-modus .admin-tab.ist-aktiv, body.dynamisch-modus .builder-tab.ist-aktiv, body.dynamisch-modus .builder-schritt.ist-aktiv, body.dynamisch-modus .inhalt-explorer-tab.ist-aktiv, body.dynamisch-modus .suche-filter a.aktiv, body.dynamisch-modus .fortschritt-status-btn.ist-aktiv, body.dynamisch-modus .consent-btn-primaer{ color:#0A1930; } /* ========================================================================= ACHT BLAUE GEGENSTUECKE, DIE ES NICHT MEHR BRAUCHT ========================================================================= Hier standen acht Regeln fuer `body.dynamisch-modus .spiel-detail-neu` - Titelverlauf, Karten-Hover, Badge, Hauptknopf, Explorer-Reiter, Bewertungsbalken. Ihr eigener Kommentar sagte, warum: „Titelverlauf, Karten-Hover, Badge, Hauptknopf und Bewertungsbalken sind auf der Spielseite FEST IN GOLD eingetragen - hier die blauen Gegenstuecke." Sie waren also die Gegenrechnung zu fest verdrahteten Goldwerten. Diese Werte gibt es nicht mehr: Die Spielseite hat keine eigene Palette und keine festen Farben mehr, sie nimmt `--akzent` wie jede andere Seite. Damit ist die Gegenrechnung nicht nur ueberfluessig, sondern falsch - sie faerbte die Spielseite blau, waehrend der Rest des Portals gold ist. Was der dynamische Modus fuer die Spielseite noch tun muss, steht in der einen Regel unten: durchscheinend statt deckend, damit das Motiv durchtraegt. ========================================================================= */ body.dynamisch-modus .spiel-detail-neu{ background: radial-gradient(1200px 400px at 15% -10%, color-mix(in srgb, var(--akzent) 12%, transparent), transparent 60%), rgba(10,13,22,0.55); border:1px solid var(--kante-gold); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:0 20px 50px rgba(0,0,0,.40); } /* Wer Bewegung reduziert haben will, bekommt dasselbe Bild - nur still. */ @media (prefers-reduced-motion: reduce){ :root body.dynamisch-modus::before{ animation:none; } } a{ color:inherit; text-decoration:none; } /* =========================================================================== EINE GRUNDLAGE FUER ALLE EINGABEFELDER =========================================================================== Es gab keine. Jeder Bereich hat sein eigenes Feld gebaut - der Builder, die Umfragen, die News, der Eintragseditor, der Admin-Wizard. Fuenf Regeln fuer dieselbe Sache, jede mit eigenen Werten fuer Innenabstand, Radius und Fokusrahmen. Das faellt nicht als Fehler auf, sondern als Unruhe: Die Felder sehen fast gleich aus, und "fast" ist genau das, was eine Seite billig wirken laesst. Hier steht ein Grundzustand als ELEMENT-Selektor. Er hat die niedrigste Spezifitaet, die es gibt - jede vorhandene Klassenregel gewinnt weiterhin gegen ihn. Er aendert also nichts an dem, was schon gestaltet ist, und faengt alles ab, was bisher nackt war. =========================================================================== */ input, select, textarea{ font-family:var(--schrift-text); font-size:14px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-klein); padding:10px 12px; transition:border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); } input::placeholder, textarea::placeholder{ color:var(--text-2); opacity:.75; } /* Kaestchen und Schalter tragen die Akzentfarbe, ohne dass jede Stelle es einzeln sagen muss. */ input[type="checkbox"], input[type="radio"]{ accent-color:var(--akzent); padding:0; } /* --------------------------------------------------------------------------- DER FOKUSRAHMEN - EINMAL, UND ZWAR SICHTBAR --------------------------------------------------------------------------- `:focus-visible` und nicht `:focus`: Der Rahmen erscheint bei Tastatur- bedienung und nicht bei jedem Mausklick. Ein Knopf, der nach dem Anklicken einen Rahmen behaelt, sieht kaputt aus - und genau deshalb entfernen ihn viele Seiten ganz. Damit ist die Seite dann mit der Tastatur unbedienbar. Zwei Ringe uebereinander: aussen die Akzentfarbe, innen ein schmaler Ring in der Hintergrundfarbe. So bleibt der Rahmen auf JEDEM Untergrund sichtbar - auch auf einer goldenen Flaeche, wo ein goldener Ring verschwinden wuerde. --------------------------------------------------------------------------- */ :focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; border-radius:var(--radius-klein); } input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); } /* Markierter Text in der Akzentfarbe. Eine Kleinigkeit, die man nicht bewusst bemerkt - aber die blaue Standardmarkierung des Browsers auf einer goldenen Seite bemerkt man. */ ::selection{ background:color-mix(in srgb, var(--akzent) 30%, transparent); color:var(--text); } /* Die Bildlaufleiste. Auf einer dunklen Seite ist die helle Standardleiste des Browsers ein weisser Balken am Rand. */ *{ scrollbar-color:var(--border) transparent; scrollbar-width:thin; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:var(--radius-rund); border:3px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--text-2); background-clip:padding-box; } /* ---------- Ueberschriften: Serife ---------------------------------------- Der einzelne Griff, der am meisten ausmacht. Eine Grotesk-Schlagzeile liest sich wie eine Benutzeroberflaeche, eine Serifen-Schlagzeile wie ein Text, den jemand geschrieben hat. `letter-spacing` geht von -0.01em auf -0.015em: Serifen brauchen bei grossen Graden etwas mehr Zug, sonst fallen die Woerter auseinander. `font-weight:600` faellt weg - eine Serife im Halbfetten wirkt gedrungen, und die Systemserifen bringen ohnehin selten einen 600er Schnitt mit. */ h1,h2,h3{ font-family:var(--schrift-display); font-weight:600; letter-spacing:-0.015em; line-height:1.22; } /* h4 bis h6 bleiben bei der Grotesk: Sie stehen als Kleinueberschriften in Kaesten und Tabellen, oft versal und klein - dort ist eine Serife nicht feierlich, sondern schlecht lesbar. */ h4,h5,h6{ font-family:var(--schrift-text); font-weight:600; } /* ---------- Kopf-Header: kompaktes, randloses Hintergrundbild + Hauptnav + Suche ---------- */ .kopf-bereich{ background:var(--bg); padding:20px 24px 0; } /* Bewusst OHNE overflow:hidden - das wuerde das Admin-Aufklappmenue in der oberen Leiste abschneiden. Die Rundung liegt stattdessen direkt auf den Bildebenen (.kopf-hintergrund / .kopf-overlay), das Ergebnis sieht identisch aus. */ /* Feste Breite: Das Kopfbild hat 220px Hoehe. Mitwachsen wuerde es bei 2400px zu einem Streifen ziehen, und das Motiv haelt das nicht aus. */ .kopf-bild-rahmen{ position:relative; border-radius:var(--radius-gross); max-width:var(--kopf-breite); height:220px; margin:0 auto; /* Die Farbe hinter dem Bild - sichtbar, solange es laedt. Sie folgt dem MOTIV und nicht dem Modus: Im dunklen Modus liegt dort das helle Bild, also ist auch der Rueckfall hell. Andersherum blitzte beim Laden ein schwarzer Kasten auf, der gleich darauf hell wird. */ background-color:#F1EDE3; box-shadow:0 10px 30px rgba(0,0,0,0.18); } .kopf-hintergrund, .kopf-overlay{ border-radius:var(--radius-gross); } :root:not([data-theme="dunkel"]) .kopf-bild-rahmen{ background-color:#0A0C12; } /* Kopfbanner: zwei Motive, gesteuert vom Hell-/Dunkelmodus-Schalter. Bewusst unabhaengig vom dynamischen Hintergrund - der Header behaelt sein eigenes Bild, auch wenn dahinter das ganzseitige Motiv laeuft. =========================================================================== DIE ZUORDNUNG IST ABSICHTLICH ueberKREUZ =========================================================================== BGDunkel im HELLEN Modus, BGHell im DUNKLEN. Das sieht nach einem Vertauscher aus und ist ausdruecklich so gewollt. Der Grund: Der Kopf ist keine Flaeche, die sich in die Seite einfuegen soll, sondern ein Bild, das sich von ihr abheben soll. Ein helles Motiv auf hellem Grund verschwindet, ein dunkles auf dunklem ebenso - in beiden Faellen sieht man einen Kasten und kein Bild. Ueber Kreuz traegt der Kopf jedes Mal den staerkeren Kontrast zur Seite dahinter, und der weisse Schriftzug darauf bleibt in beiden Modi lesbar (das Overlay unten sorgt dafuer). Wer das fuer einen Fehler haelt und es "richtigstellt", dreht es zurueck - deshalb steht der Grund hier und nicht nur im Verlauf. =========================================================================== */ .kopf-hintergrund{ position:absolute; inset:0; background-image:url('/assets/images/BGDunkel.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; } :root[data-theme="dunkel"] .kopf-hintergrund{ background-image:url('/assets/images/BGHell.jpg'); } /* Im dynamischen Modus bleibt das Kopfbild wie es ist - nur der Schlagschatten wird kraeftiger, damit sich der Rahmen vom dunklen Motiv dahinter abhebt. */ body.dynamisch-modus .kopf-bild-rahmen{ box-shadow:0 10px 34px rgba(0,0,0,0.55); } .kopf-overlay{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(8,9,14,0.45) 0%, rgba(8,9,14,0) 30%); } .kopf-inhalt{ position:relative; z-index:1; display:flex; justify-content:flex-end; padding:14px 18px; } /* Login / Benutzermenue oben rechts, ueber dem Bild */ .kopf-user-nav{ display:flex; align-items:center; gap:14px; font-size:13px; flex-wrap:wrap; justify-content:flex-end; } .kopf-user-nav a{ color:#F0F1F6; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,0.6); opacity:.9; transition:color .15s ease, opacity .15s ease; } .kopf-user-nav a:hover{ color:#fff; opacity:1; } .kopf-user-nav a.aktiv{ color:#5B9BFF; opacity:1; } .theme-umschalter{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto; border:1px solid rgba(255,255,255,0.28); border-radius:var(--radius-klein); background:rgba(255,255,255,0.12); cursor:pointer; color:#fff; transition:background .15s ease; } .theme-umschalter:hover{ background:rgba(255,255,255,0.22); } .theme-umschalter svg{ width:15px; height:15px; } .theme-umschalter .icon-dunkel{ display:none; } :root[data-theme="dunkel"] .theme-umschalter .icon-hell{ display:none; } :root[data-theme="dunkel"] .theme-umschalter .icon-dunkel{ display:block; } /* Hauptnavigation: eigene, dezente Leiste unterhalb des Bildes */ .hauptnav{ display:flex; align-items:center; justify-content:center; /* Bleibt an der Kante des Kopfbildes - eine Navigationsleiste, die breiter ist als das Bild darueber, sieht aus wie ein Versehen. */ /* Enger als die frueheren 22px: Seit die Punkte selbst Innenabstand haben, entsteht der Abstand aus ihnen. 22px zusaetzlich riss die Leiste auseinander. */ gap:4px; flex-wrap:wrap; max-width:var(--kopf-breite); margin:14px auto 0; padding:7px 10px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--erhebung); font-size:14px; } /* Die Punkte sind Flaechen, keine blossen Woerter. Vorher war ein Menuepunkt ein Link mit Hover-Farbwechsel - beim Zielen traf man ein Wort, und zwischen zwei Woertern war nichts. Ein Punkt mit Innenabstand ist ein Ziel, das man auch knapp daneben trifft. */ .hauptnav a{ color:var(--text-2); white-space:nowrap; padding:7px 11px; border-radius:var(--radius-klein); transition:color var(--dauer) var(--kurve), background var(--dauer) var(--kurve); } .hauptnav a:hover{ color:var(--text); background:var(--oberflaeche-2); } /* Der aktive Punkt traegt Gold - und eine Kante darunter statt Fettdruck. Fettdruck macht den Punkt breiter als seine Nachbarn, und die Leiste springt beim Wechseln der Seite. */ .hauptnav a.aktiv{ color:var(--akzent); background:color-mix(in srgb, var(--akzent) 9%, transparent); box-shadow:inset 0 -2px 0 var(--akzent); } .hauptnav-eintrag{ display:inline-flex; align-items:center; gap:2px; } .hauptnav-admin-plus{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:5px; font-size:12px; font-weight:700; line-height:1; background:color-mix(in srgb, var(--akzent) 14%, transparent); color:var(--akzent) !important; } .hauptnav-admin-plus:hover{ background:color-mix(in srgb, var(--akzent) 26%, transparent); } /* Zweistufiges Aufklappmenü "Spiele" -> Spiel -> Inhaltstyp. Reines CSS: :hover für die Maus, :focus-within für die Tastatur - so bleibt es ohne JavaScript nutzbar. Die Menüs sind nur unsichtbar (visibility), nicht display:none, damit der Übergang weich bleibt. */ .nav-aufklapp{ position:relative; } .nav-pfeil{ font-size:10px; margin-left:4px; opacity:.7; } .nav-pfeil-rechts{ margin-left:auto; padding-left:10px; } .nav-menue{ position:absolute; top:100%; left:0; z-index:200; min-width:230px; display:flex; flex-direction:column; padding:6px; margin-top:6px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); /* Die Goldkante oben: Das Menue soll wirken, als klappe eine Seite auf, nicht als schiebe sich ein Kasten davor. */ border-top-color:var(--kante-gold); box-shadow:var(--erhebung-hoch); visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .14s ease, transform .14s ease, visibility .14s; /* KEIN overflow/max-height: beides erzeugt einen Beschneidungsbereich, in dem das seitlich herausklappende Untermenü unsichtbar bliebe. Die Länge der Liste wird stattdessen serverseitig begrenzt (siehe kopf.php: MENUE_MAX_SPIELE + Zeile "Alle Spiele"). */ } .nav-aufklapp:hover > .nav-menue, .nav-aufklapp:focus-within > .nav-menue{ visibility:visible; opacity:1; transform:translateY(0); } /* Unsichtbare Brücke: verhindert, dass das Menü zuklappt, während die Maus die Lücke zwischen Leiste und Menü überquert. */ .nav-aufklapp > .nav-menue::before{ content:''; position:absolute; top:-8px; left:0; right:0; height:8px; } .nav-menue-zeile{ position:relative; display:flex; align-items:center; } .nav-menue-zeile > a{ flex:1; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; font-size:13.5px; color:var(--text-2) !important; white-space:nowrap; } .nav-menue-zeile > a:hover, .nav-menue-zeile:focus-within > a{ background:var(--bg); color:var(--text) !important; } /* `tabular-nums` ist hier nicht Kosmetik: Ohne gleich breite Ziffern zappelt die rechte Kante der Spalte von Zeile zu Zeile. */ .nav-zahl{ margin-left:auto; font-family:var(--schrift-mono); font-size:10.5px; color:var(--text-2); font-variant-numeric:tabular-nums; opacity:.75; } /* ---- Das breite Menue "Entdecken" ---------------------------------------- Die acht Inhaltsarten standen frueher einzeln in der Kopfzeile. Sie stehen jetzt hier, nach Gruppen sortiert und mit Zahlen. `auto-fit` und nicht `repeat(5, 1fr)`: Bei fuenf Gruppen stehen fuenf Spalten, bei zweien zwei - und nicht zwei Spalten neben drei Loechern. Was im Katalog steht, entscheidet die Breite; das Stylesheet raet nicht mit. */ .nav-menue-breit{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:4px 20px; padding:18px 20px; min-width:min(880px, 84vw); } /* Das Menue haengt am linken Rand seines Punktes. Bei einem 880px breiten Menue an einem Punkt weit rechts liefe es aus dem Bild - deshalb wird es hier mittig unter der Leiste ausgerichtet statt am Punkt. `translateX(-50%)` zusammen mit dem Aufklapp-Versatz: Die Bewegung beim Oeffnen muss dieselbe bleiben, sonst springt das Menue seitlich. */ .nav-aufklapp > .nav-menue-breit{ left:50%; transform:translate(-50%, -4px); } .nav-aufklapp:hover > .nav-menue-breit, .nav-aufklapp:focus-within > .nav-menue-breit{ transform:translate(-50%, 0); } .nav-spalte{ display:flex; flex-direction:column; gap:1px; } /* Die Gruppenueberschrift: klein, versal, gedaempft. Sie soll die Spalte benennen, nicht mit den Eintraegen um Aufmerksamkeit ringen - deshalb Grotesk und nicht die Serife der uebrigen Ueberschriften. */ .nav-spalte-titel{ font-family:var(--schrift-text); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-2); padding:0 9px 8px; margin-bottom:4px; border-bottom:1px solid var(--border); } .nav-spalte-zeile{ display:flex; align-items:baseline; gap:10px; padding:6px 9px; border-radius:var(--radius-klein); font-size:13.5px; color:var(--text-2) !important; transition:background var(--dauer) var(--kurve), color var(--dauer) var(--kurve); } .nav-spalte-zeile:hover, .nav-spalte-zeile:focus-visible{ background:var(--oberflaeche-2); color:var(--text) !important; } .nav-spalte-zeile.aktiv{ color:var(--akzent) !important; } /* Die letzte Spalte ist ein Angebot, kein Inhalt: Wer in keiner Zeile sein Anliegen wiedererkennt, klickt sonst gar nicht. */ .nav-spalte-aktion{ gap:8px; } .nav-aktion{ display:block; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); transition:border-color var(--dauer) var(--kurve), background var(--dauer) var(--kurve); } .nav-aktion:hover{ border-color:var(--kante-gold); background:var(--oberflaeche-2); } .nav-aktion strong{ display:block; font-size:13.5px; color:var(--akzent); margin-bottom:2px; } .nav-aktion small{ display:block; font-size:11.5px; line-height:1.45; color:var(--text-2); white-space:normal; /* die Leiste setzt nowrap - hier ist es ein Satz */ } /* --------------------------------------------------------------------------- Admin-Geraete (WebAuthn/Passkey) --------------------------------------------------------------------------- */ .geraet-banner{ padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:13.5px; line-height:1.55; } .geraet-banner-info{ background:color-mix(in srgb, var(--akzent) 8%, transparent); border:1px solid color-mix(in srgb, var(--akzent) 32%, transparent); } /* Warnung bei nur einem Geraet - das ist ein echtes Aussperrrisiko. */ .geraet-banner-warnung{ background:color-mix(in srgb, var(--warnung) 10%, transparent); border:1px solid color-mix(in srgb, var(--warnung) 40%, transparent); } /* Leerzustaende (kein Geraet / nicht bestaetigt) - mittig, ruhig, mit genau einer klaren Handlung. */ .geraet-leer{ text-align:center; padding:46px 28px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:14px; } .geraet-leer-icon{ display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:50%; margin-bottom:16px; background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--akzent); } .geraet-leer-titel{ font-size:19px; font-weight:700; margin:0 0 8px; } .geraet-liste{ display:flex; flex-direction:column; gap:8px; } .geraet{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); } .geraet.ist-widerrufen{ opacity:.6; } .geraet-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; flex:0 0 auto; background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--akzent); } .geraet.ist-widerrufen .geraet-icon{ background:var(--oberflaeche); color:var(--text-2); } .geraet-daten{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:180px; } .geraet-name{ font-size:14.5px; font-weight:600; } .geraet-meta{ font-size:12px; color:var(--text-2); } .geraet-status{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); flex:0 0 auto; } .geraet-status.ist-aktiv{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); background:color-mix(in srgb, var(--erfolg) 10%, transparent); } /* Zurueckhaltend gestaltet: Widerrufen ist selten und soll nicht der auffaelligste Knopf der Seite sein - erst beim Hoverkontakt rot. */ .geraet-widerrufen{ padding:7px 14px; border-radius:var(--radius-klein); font-size:12.5px; font-family:inherit; cursor:pointer; background:transparent; border:1px solid var(--border); color:var(--text-2); transition:color .15s ease, border-color .15s ease, background .15s ease; } .geraet-widerrufen:hover{ color:var(--fehler); border-color:var(--fehler); background:color-mix(in srgb, var(--fehler) 10%, transparent); } /* Partnerlink-Knopf auf der Spielseite. Bewusst als Nebenhandlung gestaltet und sichtbar als Anzeige gekennzeichnet - er soll nicht auffaelliger sein als die eigentlichen Inhalte. */ .btn-kaufen{ display:inline-flex; align-items:center; gap:9px; background:var(--oberflaeche); color:var(--text); border:1px solid color-mix(in srgb, var(--erfolg) 45%, var(--border)); } .btn-kaufen:hover{ border-color:var(--erfolg); color:var(--erfolg); } .btn-kaufen-anzeige{ font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:2px 6px; border-radius:4px; background:color-mix(in srgb, var(--text-2) 20%, transparent); color:var(--text-2); } .btn-kaufen-hinweis{ display:inline-flex; align-items:center; font-size:11.5px; color:var(--text-2); margin-left:4px; } /* Affiliate-Verwaltung im Adminbereich. */ .affiliate-liste{ display:flex; flex-direction:column; gap:10px; } .affiliate-zeile{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr) auto; gap:16px; align-items:end; padding:14px 16px; border-radius:10px; background:var(--bg); border:1px solid var(--border); } .affiliate-zeile.ist-aktiv{ border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); } .affiliate-spiel{ display:flex; flex-direction:column; gap:5px; } .affiliate-spiel-name{ font-size:14px; font-weight:600; color:var(--text); text-decoration:none; } .affiliate-spiel-name:hover{ color:var(--akzent); } .affiliate-status{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; align-self:flex-start; padding:3px 8px; border-radius:5px; background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); } .affiliate-status.ist-aktiv{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); } .affiliate-felder{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; } .affiliate-felder label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text-2); margin:0; } .affiliate-felder input{ padding:8px 10px; border-radius:7px; font-size:12.5px; font-family:inherit; background:var(--oberflaeche); border:1px solid var(--border); color:var(--text); outline:none; } .affiliate-felder input:focus{ border-color:var(--akzent); } .affiliate-aktion{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .affiliate-schalter{ display:flex; align-items:center; gap:6px; font-size:12px; margin:0; cursor:pointer; } .affiliate-schalter input{ width:auto; margin:0; } .affiliate-aktion .btn{ padding:8px 16px; font-size:13px; } @media (max-width:1000px){ .affiliate-zeile{ grid-template-columns:1fr; } .affiliate-felder{ grid-template-columns:1fr; } } /* Kennzahl als Link (z.B. "Noch unbearbeitet" -> gefilterte Liste). */ .dash-kennzahl-link{ text-decoration:none; transition:border-color .15s ease; } .dash-kennzahl-link:hover{ border-color:var(--akzent); } /* Bearbeitungsstand je Beitrag - Auswahl direkt in der Tabelle. */ .beitrag-stand-form{ display:flex; align-items:center; gap:5px; } .beitrag-stand{ padding:5px 8px; border-radius:7px; font-size:12px; font-family:inherit; cursor:pointer; background:var(--bg); border:1px solid var(--border); color:var(--text); outline:none; max-width:150px; } .beitrag-stand:focus{ border-color:var(--akzent); } /* Farbe folgt dem Stand, damit die Spalte auf einen Blick lesbar ist. */ .beitrag-stand.stand-neu{ color:var(--warnung); border-color:color-mix(in srgb, var(--warnung) 45%, transparent); } .beitrag-stand.stand-in_bearbeitung{ color:var(--akzent); border-color:color-mix(in srgb, var(--akzent) 45%, transparent); } .beitrag-stand.stand-bearbeitet{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 45%, transparent); } .beitrag-stand.stand-abgelehnt{ color:var(--text-2); } .beitrag-stand-knopf{ padding:5px 9px; border-radius:7px; font-size:12px; line-height:1; cursor:pointer; background:transparent; border:1px solid var(--border); color:var(--text-2); } .beitrag-stand-knopf:hover{ color:var(--akzent); border-color:var(--akzent); } /* Filterbloecke: Art und Bearbeitungsstand getrennt beschriftet. */ .beitrag-filter-block{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .beitrag-filter-titel{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); flex:0 0 130px; } .beitrag-filter-chip.stand-neu.ist-aktiv{ color:var(--warnung); border-color:var(--warnung); background:color-mix(in srgb, var(--warnung) 12%, transparent); } .beitrag-filter-chip.stand-bearbeitet.ist-aktiv{ color:var(--erfolg); border-color:var(--erfolg); background:color-mix(in srgb, var(--erfolg) 12%, transparent); } @media (max-width:640px){ .beitrag-filter-titel{ flex:1 1 100%; } } /* Filterleiste der eingegangenen Beitraege (nach Art). */ .beitrag-filter{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; } .beitrag-filter-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--radius-rund); font-size:13px; text-decoration:none; background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); transition:color .15s ease, border-color .15s ease; } .beitrag-filter-chip:hover{ color:var(--text); border-color:var(--akzent); } .beitrag-filter-chip.ist-aktiv{ color:var(--akzent); font-weight:600; border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 10%, transparent); } /* Arten ohne Beitraege bleiben sichtbar, damit die Leiste ihre Form behaelt - nur gedaempft, damit klar ist, dass dort nichts liegt. */ .beitrag-filter-chip.ist-leer{ opacity:.45; } .beitrag-filter-zahl{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-variant-numeric:tabular-nums; opacity:.85; } /* Aufklappbarer Volltext eines Beitrags in der Tabelle. */ .beitrag-text{ margin-top:6px; font-weight:400; } .beitrag-text > summary{ cursor:pointer; font-size:11.5px; color:var(--akzent); list-style:none; display:inline-block; } .beitrag-text > summary::-webkit-details-marker{ display:none; } .beitrag-text > summary::before{ content:'▸ '; font-size:10px; } .beitrag-text[open] > summary::before{ content:'▾ '; } .beitrag-text > p{ margin:8px 0 0; padding:10px 12px; border-radius:var(--radius-klein); background:var(--bg); border:1px solid var(--border); font-size:12.5px; line-height:1.6; white-space:pre-wrap; max-width:60ch; } .beitrag-von{ display:block; font-size:13px; font-weight:600; } .beitrag-mail{ display:block; font-size:11.5px; color:var(--text-2); text-decoration:none; } .beitrag-mail:hover{ color:var(--akzent); } /* Empfaengerwahl beim Versand einer Mitteilung. */ .empfaenger-wahl{ border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:16px; } .empfaenger-wahl legend{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); padding:0 6px; } .empfaenger-option{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; cursor:pointer; } .empfaenger-option input{ width:auto; margin:0; } /* Die Personenliste erscheint erst, wenn "Nur an ausgewaehlte" gewaehlt ist. Reines CSS ueber :has() - ohne JavaScript bleibt sie sichtbar, was funktional voellig in Ordnung ist. */ .empfaenger-liste{ display:none; margin-top:10px; padding-top:12px; border-top:1px solid var(--border); max-height:260px; overflow-y:auto; } .empfaenger-wahl:has(input[value="auswahl"]:checked) .empfaenger-liste{ display:block; } .empfaenger-person{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; font-size:13.5px; cursor:pointer; } .empfaenger-person:hover{ background:var(--bg); } .empfaenger-person input{ width:auto; margin:0; flex:0 0 auto; } .empfaenger-name{ font-weight:600; } .empfaenger-mail{ color:var(--text-2); font-size:12px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .empfaenger-rolle{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:5px; background:color-mix(in srgb, var(--akzent) 14%, transparent); color:var(--akzent); } /* Zaehler fuer ungelesene Nachrichten (Header und Reiter). */ .kopf-zaehler{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:var(--radius-rund); background:var(--fehler); color:#fff !important; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; } /* Nachrichtenboard: Mitteilungen und eigene Beitraege. */ .nachricht-liste{ display:flex; flex-direction:column; gap:14px; } .nachricht{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; } /* Ungelesenes deutlich, aber ohne Blinken oder Farbgewitter. */ .nachricht.ist-ungelesen{ border-color:color-mix(in srgb, var(--akzent) 45%, transparent); background:color-mix(in srgb, var(--akzent) 5%, var(--oberflaeche)); } .nachricht-kopf{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .nachricht-betreff{ font-size:16px; font-weight:700; margin:0; flex:1 1 auto; } .nachricht-datum{ font-size:12px; color:var(--text-2); white-space:nowrap; } .nachricht-text{ font-size:14px; line-height:1.65; margin:0; white-space:pre-wrap; } .nachricht-aktion{ margin-top:12px; } .nachricht-art{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:5px; background:var(--bg); border:1px solid var(--border); color:var(--text-2); white-space:nowrap; } .nachricht-art-ankuendigung{ color:var(--akzent); border-color:color-mix(in srgb, var(--akzent) 40%, transparent); } .nachricht-art-wartung{ color:var(--warnung); border-color:color-mix(in srgb, var(--warnung) 40%, transparent); } .nachricht-art-wichtig{ color:var(--fehler); border-color:color-mix(in srgb, var(--fehler) 40%, transparent); } .nachricht-status{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--radius-rund); background:var(--bg); border:1px solid var(--border); color:var(--text-2); white-space:nowrap; } .nachricht-status-umgesetzt{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); } .nachricht-status-abgelehnt{ color:var(--text-2); } /* "Mein RPGPortal": Reiter ueber dem Kasten, Titel/Untertitel und der Inhalt des gewaehlten Reiters IM Kasten. */ .portal-kasten{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:0 12px 12px 12px; padding:26px 28px 30px; } .portal-kasten > .portal-hero-titel{ margin:0 0 6px; } .portal-untertitel{ margin:0 0 24px; } /* Reiter in "Mein RPGPortal" - normale Links, kein JavaScript noetig. Sitzen direkt auf dem Kasten auf, der aktive Reiter geht nahtlos in ihn ueber (deshalb unten keine Linie und dieselbe Flaechenfarbe). */ .portal-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; } .portal-tab{ display:inline-flex; align-items:center; padding:10px 18px; border-radius:10px 10px 0 0; font-size:14px; color:var(--text-2); text-decoration:none; border:1px solid transparent; border-bottom:none; transition:color .15s ease, background .15s ease; } .portal-tab:hover{ color:var(--text); background:color-mix(in srgb, var(--oberflaeche) 60%, transparent); } .portal-tab.ist-aktiv{ color:var(--akzent); font-weight:600; background:var(--oberflaeche); border-color:var(--border); } .portal-erfolg{ background:#DCFCE7; color:#166534; border-radius:10px; padding:14px 16px; margin-bottom:20px; } /* --------------------------------------------------------------------------- Admin-Dashboard: Kennzahlen, Verlauf, Ranglisten, Erkenntnisse --------------------------------------------------------------------------- */ .dash-titel{ font-size:17px; font-weight:700; margin:30px 0 14px; } .dash-titel:first-of-type{ margin-top:8px; } .dash-kennzahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:18px; margin-bottom:30px; } .dash-kennzahl{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); } .dash-kennzahl-wert{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .dash-kennzahl-label{ font-size:11.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; } .dash-karte{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:20px; } .dash-karte-titel{ font-size:14px; font-weight:700; margin:0 0 14px; } .dash-spalten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; } /* Erkenntnisse: fertig formulierte Saetze aus den Messwerten. */ .dash-erkenntnisse{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:30px; } .dash-erkenntnis{ padding:16px 18px; border-radius:var(--radius); background:color-mix(in srgb, var(--akzent) 7%, transparent); border:1px solid color-mix(in srgb, var(--akzent) 30%, transparent); } .dash-erkenntnis-titel{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--akzent); } .dash-erkenntnis-text{ font-size:14px; line-height:1.55; margin:8px 0 8px; } .dash-erkenntnis-quelle{ font-size:11px; color:var(--text-2); } /* Tagesverlauf als einfaches Balkendiagramm - reines CSS, keine Bibliothek. */ .dash-verlauf{ display:flex; align-items:flex-end; gap:6px; height:150px; } .dash-balken-spalte{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; } .dash-balken{ width:100%; border-radius:4px 4px 0 0; min-height:2px; background:linear-gradient(180deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, transparent)); } .dash-balken-tag{ font-size:9.5px; color:var(--text-2); white-space:nowrap; } /* Ranglisten mit Anteilsbalken. */ .dash-rang{ display:flex; align-items:center; gap:10px; padding:6px 0; } .dash-rang-name{ flex:0 0 42%; font-size:13px; color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.dash-rang-name:hover{ color:var(--akzent); } .dash-rang-leiste{ flex:1; height:7px; border-radius:4px; background:var(--bg); overflow:hidden; } .dash-rang-leiste > span{ display:block; height:100%; background:var(--akzent); border-radius:4px; } .dash-rang-zahl{ flex:0 0 auto; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; min-width:32px; text-align:right; } /* Rechts sitzende Aufklappmenues (z.B. Admin) oeffnen rechtsbuendig, damit sie nicht ueber den Rand der Leiste hinauslaufen. */ .nav-aufklapp-rechts{ margin-left:auto; } .nav-aufklapp-rechts > .nav-menue{ left:auto; right:0; } .hauptnav-admin-menue{ color:var(--akzent) !important; font-weight:600; } .nav-menue-mehr{ border-top:1px solid var(--border); margin-top:4px; padding-top:4px; } .nav-menue-mehr > a{ color:var(--akzent) !important; font-size:12.5px; } /* Jede weitere Ebene klappt seitlich nach rechts auf. Bewusst generisch ueber die Verschachtelung formuliert (nicht je Ebene einzeln), damit eine zusaetzliche Ebene ohne neue Regel funktioniert. */ .nav-menue-zeile > .nav-menue{ top:-6px; left:100%; margin-top:0; margin-left:2px; min-width:200px; } .nav-menue-zeile:hover > .nav-menue, .nav-menue-zeile:focus-within > .nav-menue{ visibility:visible; opacity:1; transform:translateY(0); } /* Bruecke nach links, damit der Weg zur naechsten Ebene nicht abreisst. */ .nav-menue-zeile > .nav-menue::before{ content:''; position:absolute; top:0; left:-6px; width:6px; height:100%; } /* Zu wenig Platz nach rechts: seitliche Ebenen nach links ausklappen. */ @media (max-width:1400px){ .nav-menue-zeile > .nav-menue{ left:auto; right:100%; margin-left:0; margin-right:2px; } .nav-menue-zeile > .nav-menue::before{ left:auto; right:-6px; } .nav-pfeil-rechts{ transform:rotate(180deg); } } /* Auf Touch-Geräten gibt es kein Hover - dort führt "Spiele" einfach zur Übersichtsseite, statt ein nicht bedienbares Menü anzubieten. */ @media (hover:none){ .nav-menue{ display:none; } .nav-pfeil{ display:none; } } /* Zentrierte Suchleiste unter der Hauptnavigation, im Seitendesign */ .kopf-suche{ position:relative; display:flex; align-items:center; gap:0; width:min(100%, 560px); margin:14px auto 20px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); } .kopf-suche-lupe-btn{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-left:16px; padding:0; border:none; background:transparent; cursor:pointer; color:var(--text-2); } .kopf-suche-lupe-btn:hover{ color:var(--text); } .kopf-suche-lupe{ width:18px; height:18px; flex:0 0 auto; pointer-events:none; } .kopf-suche input{ flex:1; min-width:0; padding:13px 18px; border:none; background:transparent; color:var(--text); font-size:15px; font-family:inherit; outline:none; } .kopf-suche input::placeholder{ color:var(--text-2); } .kopf-suche input::-webkit-search-cancel-button{ -webkit-appearance:none; } .kopf-suche-trenner{ width:1px; height:24px; background:var(--border); flex:0 0 auto; } .kopf-suche-filter{ flex:0 0 auto; max-width:150px; border:none; background:transparent; color:var(--text-2); font-size:13.5px; font-family:inherit; padding:13px 14px; cursor:pointer; outline:none; } .kopf-suche-filter:hover{ color:var(--text); } .kopf-suche-live{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 12px 30px rgba(0,0,0,0.25); overflow:hidden; max-height:340px; overflow-y:auto; } .kopf-suche-live-zeile{ display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--border); } .kopf-suche-live-zeile:last-child{ border-bottom:none; } .kopf-suche-live-zeile:hover{ background:var(--bg); } .kopf-suche-live-typ{ flex:0 0 auto; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); border:1px solid var(--border); border-radius:var(--radius-rund); padding:2px 8px; } .kopf-suche-live-leer{ padding:14px 16px; font-size:13px; color:var(--text-2); } /* Mobile: kompakter, aber gleiches ruhiges Layout */ @media (max-width:1024px){ .kopf-bereich{ padding:14px 14px 0; } .kopf-bild-rahmen{ height:150px; border-radius:14px; } /* Bewusst KEIN overflow-x:auto: das würde einen Beschneidungsbereich erzeugen und die Aufklappmenüs abschneiden. Stattdessen umbrechen. */ .hauptnav{ justify-content:flex-start; flex-wrap:wrap; gap:16px; font-size:13px; margin-top:12px; padding:10px 16px; } .kopf-suche{ width:100%; } .kopf-suche input{ padding:12px 16px; font-size:15px; } .kopf-suche-filter{ max-width:108px; font-size:12.5px; padding:12px 8px; } } @media (max-width:560px){ .kopf-bild-rahmen{ height:120px; } .hauptnav{ gap:12px; padding:10px 14px; } } .zurueck-leiste{ max-width:var(--inhalt-breite); margin:14px auto 0; padding:0 24px; } .zurueck-button{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-rund); background:var(--oberflaeche); color:var(--text-2); font-size:13px; font-family:inherit; cursor:pointer; transition:color .15s ease, border-color .15s ease; } .zurueck-button:hover{ color:var(--text); border-color:var(--akzent); } @media (max-width:1024px){ .zurueck-leiste{ padding:0 14px; } } /* Der erste Eindruck. 34px war eine Ueberschrift, keine Schlagzeile - und auf einem 2400px breiten Container verliert sie sich. `clamp` statt einer festen Groesse: auf dem Telefon 30px, auf dem 4K-Schirm 60px, dazwischen gleitend. Mit der Serife aus `--schrift-display` (h1 erbt sie) ergibt das den Auftritt, den ein Nachschlagewerk am Anfang braucht. */ .hero{ padding:clamp(40px,6vw,84px) 32px 44px; max-width:var(--inhalt-breite); margin:0 auto; } .hero h1{ font-size:clamp(30px,4.4vw,60px); margin:0 0 14px; } .hero p{ color:var(--text-2); font-size:clamp(15px,1.3vw,18px); max-width:var(--lese-breite); } .homepage-inhalt{ font-size:16px; line-height:1.7; color:var(--text); max-width:820px; } .homepage-inhalt p{ margin:0 0 16px; } .homepage-inhalt a{ color:var(--akzent); } .homepage-inhalt img{ max-width:100%; border-radius:var(--radius); } /* Spiele-Uebersicht: Toolbar mit Ansicht-/Sortier-Umschaltern */ .spiele-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; } .spiele-toolbar-controls{ display:flex; flex-wrap:wrap; gap:10px; } .segment-umschalter{ display:flex; border:1px solid var(--border); border-radius:var(--radius-rund); overflow:hidden; } .segment-umschalter a{ padding:8px 16px; font-size:12.5px; color:var(--text-2); background:var(--oberflaeche); white-space:nowrap; } .segment-umschalter a:hover{ color:var(--text); } .segment-umschalter a.aktiv{ background:var(--akzent); color:var(--bg); font-weight:600; } .spiele-reihen-titel{ font-size:15px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin:32px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--border); } /* Startseite: modernes RPG-Portal-Layout */ @media (max-width:700px){ } .mein-portal-liste{ display:flex; flex-direction:column; gap:16px; } .mein-portal-karte{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; background:var(--oberflaeche); } .mein-portal-titel{ font-size:16px; font-weight:700; color:var(--text); } .mein-portal-zeile{ display:flex; align-items:center; gap:10px; margin:10px 0; } .mein-portal-zeile select{ padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-size:13px; } .mein-portal-like{ border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); padding:6px 12px; font-size:15px; cursor:pointer; opacity:.55; } .mein-portal-like:hover{ opacity:.85; } .mein-portal-like.ist-aktiv{ opacity:1; border-color:var(--akzent); } .mein-portal-bewertung{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:10px; } .mein-portal-bewertung label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-2); } .mein-portal-bewertung input, .mein-portal-bewertung textarea{ padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-family:inherit; font-size:13.5px; } .mein-portal-bewertung input{ width:80px; } .mein-portal-bewertung textarea{ width:320px; max-width:100%; } /* Mein RPGPortal - Steuerzentrale */ .portal-hero{ padding:32px 36px; border-radius:var(--radius-gross); margin-bottom:28px; background:linear-gradient(135deg, rgba(67,56,202,0.16) 0%, rgba(109,40,217,0.12) 45%, rgba(219,39,119,0.12) 100%); border:1px solid var(--border); } .portal-hero-titel{ margin:0 0 6px; font-size:28px; } .portal-hinzufuegen{ display:flex; gap:10px; align-items:center; margin:20px 0; flex-wrap:wrap; } .portal-hinzufuegen select{ flex:1; min-width:220px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--oberflaeche); color:var(--text); font-size:14px; } .portal-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:20px; } .portal-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:14px 10px; border-radius:var(--radius); background:var(--oberflaeche); border:1px solid var(--border); } .portal-stat-zahl{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:700; color:var(--text); } .portal-stat-label{ font-size:11.5px; color:var(--text-2); } .portal-liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; } .portal-karte{ border:1px solid var(--border); border-radius:14px; padding:16px; background:var(--oberflaeche); } .portal-karte-kopf{ display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; } .portal-karte-entfernen{ flex:0 0 auto; width:26px; height:26px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text-2); font-size:13px; line-height:1; cursor:pointer; } .portal-karte-entfernen:hover{ color:var(--fehler); border-color:var(--fehler); } .graph-knoten-liste{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; } .graph-knoten{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--oberflaeche); font-size:13.5px; } .graph-knoten-kopf{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .graph-knoten-kinder{ display:flex; flex-direction:column; gap:2px; padding-left:4px; } .graph-knoten-kinder a{ font-size:12.5px; color:var(--akzent); } a.graph-knoten-klickbar{ display:flex; align-items:center; gap:10px; color:var(--text); } a.graph-knoten-klickbar:hover{ border-color:var(--akzent); } .elementmatrix-tabelle th, .elementmatrix-tabelle td{ white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; } .elementmatrix-zelle{ text-align:center; } .elementmatrix-schwach{ background:color-mix(in srgb, var(--fehler) 15%, transparent); color:var(--fehler); font-weight:600; } .elementmatrix-stark{ background:color-mix(in srgb, var(--info) 12%, transparent); color:var(--info); } .elementmatrix-immun{ background:rgba(107,107,114,0.15); color:var(--text); font-weight:600; } .elementmatrix-absorbiert{ background:color-mix(in srgb, var(--erfolg) 15%, transparent); color:var(--erfolg); font-weight:600; } .elementmatrix-reflektiert{ background:rgba(217,119,6,0.15); color:var(--warnung); font-weight:600; } .elementmatrix-verursacht{ background:color-mix(in srgb, var(--info) 6%, transparent); } .admin-quickstart-karte{ border:1px solid var(--border); border-radius:14px; padding:22px 24px; background:var(--oberflaeche); } .admin-quickstart-karte select{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-size:14px; } .admin-quickstart-typen{ display:flex; flex-wrap:wrap; gap:10px; } .admin-quickstart-typ-btn{ padding:10px 18px; border:1px solid var(--border); border-radius:var(--radius-rund); background:var(--bg); color:var(--text); font-size:13.5px; font-weight:600; transition:all .15s ease; } .admin-quickstart-typ-btn:hover{ border-color:var(--akzent); color:var(--akzent); transform:translateY(-1px); } /* Stepper-Nummerierung (2026-09-05, Master-Auftrag "① Basis -> ② Typ -> ..."): ein CSS-Zähler statt fest eingetragener Ziffern je Vorlage - ein Reiter mehr oder weniger zählt sich von selbst neu durch. */ .builder-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:12px; counter-reset:builder-schritt; } .builder-tab{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--radius-rund); font-size:13px; color:var(--text-2); background:var(--oberflaeche); border:1px solid var(--border); counter-increment:builder-schritt; } .builder-tab::before{ content:counter(builder-schritt); display:inline-flex; align-items:center; justify-content:center; flex:none; width:17px; height:17px; border-radius:50%; font-size:10px; font-weight:700; background:var(--oberflaeche-2); color:var(--text-2); } .builder-tab:hover{ color:var(--text); } .builder-tab.ist-aktiv{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); font-weight:600; } .builder-tab.ist-aktiv::before{ background:var(--bg); color:var(--akzent); } .builder-tab-zaehler{ opacity:.75; font-size:11.5px; } .builder-tab-warnung{ color:var(--warnung); margin-left:2px; } .builder-tab-pruefen{ background:color-mix(in srgb, var(--erfolg) 12%, transparent); border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); color:var(--erfolg); font-weight:600; } .builder-stepper-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:14px; border-top:1px solid var(--border); } /* ---- Beziehungen: eine Zeile je Typ (2026-09-05, Nutzer-Mockup) ---- */ .builder-beziehungszeilen{ display:flex; flex-direction:column; gap:6px; } .builder-beziehung-zeile{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-radius:var(--radius-klein); background:var(--oberflaeche); border:1px solid var(--border); } .builder-beziehung-zeile-label{ font-size:13px; font-weight:600; color:var(--text); flex:0 0 150px; } .builder-beziehung-zeile-label small{ font-weight:400; color:var(--text-2); } .builder-beziehung-zeile-auswahl{ flex:1 1 140px; min-width:0; font-size:12.5px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); } .builder-beziehung-zeile-name{ flex:1 1 140px; min-width:0; font-size:12.5px; padding:6px 8px; } .builder-beziehung-zeile-menge{ flex:0 1 70px; font-size:12.5px; padding:6px 8px; } .builder-beziehung-zeile-bedingung{ flex:1 1 100px; min-width:0; font-size:12.5px; padding:6px 8px; } /* Sortiment je Ort: Orte ankreuzen (2026-09-11). Klappt in der Zeile auf - kein schwebendes Menü, das ein Panel mit overflow abschneiden könnte. */ .builder-ort-auswahl{ flex:1 1 150px; min-width:0; font-size:12.5px; } .builder-ort-auswahl[open]{ flex-basis:100%; } .builder-ort-auswahl > summary{ cursor:pointer; list-style:none; padding:6px 26px 6px 8px; border-radius:6px; position:relative; border:1px solid var(--border); background:var(--bg); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .builder-ort-auswahl > summary::-webkit-details-marker{ display:none; } .builder-ort-auswahl > summary::after{ content:"▾"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--text-2); } .builder-ort-auswahl[open] > summary::after{ content:"▴"; } .builder-ort-auswahl-kopf{ display:flex; gap:6px; margin:6px 0; } .builder-ort-auswahl-filter{ flex:1 1 auto; min-width:0; font-size:12.5px; padding:5px 8px; } .builder-ort-auswahl-liste{ max-height:260px; overflow:auto; padding:4px; border-radius:6px; border:1px solid var(--border); background:var(--bg); } .builder-ort-auswahl-zeile{ display:flex; align-items:center; gap:6px; padding:3px 6px; padding-left:calc(6px + var(--tiefe, 0) * 16px); border-radius:4px; cursor:pointer; } .builder-ort-auswahl-zeile:hover{ background:var(--oberflaeche); } .builder-ort-auswahl-zeile small{ margin-left:auto; color:var(--text-2); } /* Orte markierter „Verkauft"-Zeilen setzen (2026-09-11). */ .builder-sortiment-haken{ margin:0 6px 0 0; vertical-align:middle; } .builder-plakette-ueberall{ display:inline-block; margin-left:4px; padding:0 7px; border-radius:var(--radius-rund); border:1px dashed var(--border); color:var(--text-2); font-size:11px; } .builder-sortiment-orte{ margin-top:10px; } .builder-sortiment-alle{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-2); } .builder-sortiment-hinweis{ flex-basis:100%; margin:0; } /* Beziehungen gesammelt speichern (2026-09-11). */ .builder-beziehungen-alle{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); } .builder-beziehungen-alle .hinweis{ margin:0; } @media (max-width: 640px){ .builder-beziehung-zeile-label{ flex-basis:100%; } } /* ---- Speicherstatus (2026-09-05) ---- */ .builder-formular-aktionen{ display:flex; align-items:center; gap:12px; margin-top:6px; } .builder-speicherstatus{ font-size:12px; color:var(--text-2); } .builder-speicherstatus.ist-gespeichert{ color:var(--erfolg); } .builder-speicherstatus.ist-ungespeichert{ color:var(--warnung); font-weight:600; } .builder-schritte{ display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; font-size:13px; } .builder-schritt{ padding:6px 12px; border-radius:var(--radius-rund); color:var(--text-2); background:var(--oberflaeche); border:1px solid var(--border); } .builder-schritt.ist-fertig{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 40%, transparent); } .builder-schritt.ist-aktiv{ color:var(--bg); background:var(--akzent); border-color:var(--akzent); font-weight:600; } .builder-schritt-pfeil{ color:var(--text-2); } /* ---------- Gamebuilder-Studio (Auftrag "Gamebuilder Visual & UX", Phase 1) ---------- Eigenstaendiges, "ruhiges" Dark-Knowledge-Studio-Layout fuer den Builder - erweitert die bestehenden Design-Tokens (--bg/--oberflaeche/--text/--akzent), ersetzt sie nicht. Nutzt weiterhin dieselben :root[data-theme="dunkel"]-Werte wie der Rest der Seite statt eines erzwungenen Dauer-Dark-Modes. */ .studio-kopf{ max-width:var(--inhalt-breite); margin:0 auto; } .studio-fortschritt{ display:flex; align-items:center; gap:0; max-width:var(--inhalt-breite); margin:0 auto 24px; flex-wrap:wrap; } .studio-fortschritt-schritt{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:70px; } .studio-fortschritt-symbol{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--text-2); } .studio-fortschritt-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); } .studio-fortschritt-fertig .studio-fortschritt-symbol, .studio-fortschritt-fertig .studio-fortschritt-label{ color:var(--erfolg); } .studio-fortschritt-aktiv .studio-fortschritt-symbol, .studio-fortschritt-aktiv .studio-fortschritt-label{ color:var(--akzent); font-weight:700; } .studio-fortschritt-linie{ flex:1; height:1px; background:var(--border); margin:0 6px; align-self:flex-start; margin-top:9px; min-width:20px; } .studio-fortschritt-linie-fertig{ background:var(--erfolg); opacity:.5; } /* Die 1400px hier waren die letzte feste Breite im Stylesheet - sie stammt aus der Zeit vor dem Token und liess das Studio auf einem grossen Schirm schmaler stehen als jede andere Seite. */ .studio-layout{ display:grid; grid-template-columns:clamp(220px, 15vw, 320px) minmax(0,1fr) clamp(220px, 15vw, 320px); gap:24px; max-width:var(--inhalt-breite); margin:0 auto; align-items:start; } .studio-sidebar, .studio-statspanel{ position:sticky; top:16px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:18px; font-size:13px; } .studio-sidebar-titel{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 8px; } .studio-sidebar-titel:first-child{ margin-top:0; } .studio-sidebar-schritte{ display:flex; flex-direction:column; gap:2px; } .studio-sidebar-schritt{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--radius-klein); color:var(--text-2); font-size:13px; } .studio-sidebar-schritt:hover{ background:var(--bg); color:var(--text); } .studio-sidebar-schritt.ist-aktiv{ background:color-mix(in srgb, var(--akzent) 14%, transparent); color:var(--akzent); font-weight:600; } .studio-sidebar-symbol{ font-family:'IBM Plex Mono',monospace; width:14px; flex:0 0 auto; text-align:center; } .studio-sidebar-zaehler{ margin-left:auto; opacity:.7; font-size:11.5px; } .studio-sidebar-warnung{ color:var(--warnung); } .studio-sidebar-schritt-pruefen{ margin-top:6px; border-top:1px solid var(--border); padding-top:10px; } .studio-sidebar-kennzahlen{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-2); } .studio-sidebar-kennzahlen strong{ color:var(--text); font-weight:700; } .studio-qualitaet-balken{ height:6px; border-radius:var(--radius-rund); background:var(--bg); overflow:hidden; } .studio-qualitaet-fuellung{ height:100%; background:var(--akzent); transition:width .3s ease; } .studio-sidebar-qualitaet-wert{ margin:6px 0 0; font-size:12px; color:var(--text-2); } .studio-workspace{ min-width:0; } .studio-card{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:0; } .studio-card-kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--akzent); text-transform:uppercase; letter-spacing:.06em; margin:0; } .studio-stat-kachel{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; display:flex; flex-direction:column; gap:2px; } .studio-stat-zahl{ font-size:22px; font-weight:700; color:var(--akzent); line-height:1.1; } .studio-stat-label{ font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; } /* Admin-Wizard-Fortschritt (Basis-Schritt), eingebettet in .studio-sidebar statt als eigene horizontale Kopfzeile - siehe spiel-formular.php. */ .studio-sidebar .admin-wizard-progress{ flex-direction:column; align-items:flex-start; gap:10px; } .studio-sidebar .admin-wizard-progress-track, .studio-sidebar .admin-wizard-progress-bar{ display:none; } .studio-sidebar .admin-wizard-step{ flex-direction:row; align-items:center; gap:8px; width:100%; } .studio-sidebar .admin-wizard-step-circle{ width:22px; height:22px; font-size:11px; border-width:2px; flex:0 0 auto; } .studio-sidebar .admin-wizard-step-label{ margin-top:0; text-align:left; font-size:12px; white-space:normal; } @media (max-width:1100px){ .studio-layout{ grid-template-columns:1fr; } .studio-sidebar, .studio-statspanel{ position:static; } } @media (prefers-reduced-motion: reduce){ .studio-qualitaet-fuellung{ transition:none; } } .spiel-admin-kontext{ background:var(--oberflaeche); border-bottom:1px solid var(--border); } .spiel-admin-kontext-name{ display:block; max-width:var(--inhalt-breite); margin:0 auto; padding:10px 24px 0; font-size:12px; color:var(--text-2); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .spiel-admin-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:var(--inhalt-breite); margin:0 auto; padding:8px 24px 12px; } .spiel-admin-tab{ padding:7px 14px; border-radius:var(--radius-rund); font-size:13px; color:var(--text-2); } .spiel-admin-tab:hover{ color:var(--text); background:var(--bg); } .spiel-admin-tab.ist-aktiv{ background:var(--akzent); color:var(--bg); font-weight:600; } .spiel-admin-tab-extern{ margin-left:auto; } /* Die Schrittnummer im Game Builder. Sie steht vor der Beschriftung und ist bewusst zurueckgenommen: Die Reihenfolge soll erkennbar sein, ohne dass die Zahl mit dem Namen des Schritts um Aufmerksamkeit ringt. Auf dem aktiven Reiter erbt sie dessen Farbe und bleibt nur durch die Deckkraft leiser. */ .spiel-admin-tab-nr{ margin-right:6px; font-size:11px; font-weight:600; opacity:.55; font-variant-numeric:tabular-nums; } .spiel-admin-tab.ist-aktiv .spiel-admin-tab-nr{ opacity:.75; } .lizenz-tabelle{ width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:13.5px; } .lizenz-tabelle th, .lizenz-tabelle td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); } .lizenz-tabelle th{ color:var(--text-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; } /* Consent-Banner */ .consent-banner{ position:fixed; left:0; right:0; bottom:0; z-index:500; background:var(--oberflaeche); border-top:1px solid var(--border); box-shadow:0 -8px 30px rgba(0,0,0,0.25); } .consent-banner-inhalt{ max-width:var(--inhalt-breite); margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .consent-banner-inhalt p{ margin:0; font-size:13.5px; color:var(--text); flex:1; min-width:240px; } .consent-banner-inhalt a{ color:var(--akzent); } .consent-banner-buttons{ display:flex; gap:10px; flex-wrap:wrap; } .consent-btn{ padding:9px 18px; border-radius:var(--radius-klein); font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); font-family:inherit; } .consent-btn-sekundaer{ background:var(--bg); color:var(--text); } .consent-btn-primaer{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); } /* Consent-Einstellungsdialog */ .consent-modal{ position:fixed; inset:0; z-index:501; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:20px; } .consent-modal-box{ background:var(--oberflaeche-modal); border-radius:14px; border:1px solid var(--border); max-width:520px; width:100%; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; position:relative; } .consent-modal-scroll{ padding:26px 26px 0; overflow-y:auto; flex:1; } .consent-modal-box h2{ margin:0 0 8px; } .consent-modal-schliessen-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:var(--radius-klein); border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; font-size:16px; line-height:1; } .consent-modal-footer{ padding:16px 26px 26px; flex:0 0 auto; } .consent-kategorien{ display:flex; flex-direction:column; gap:14px; margin:18px 0; } .consent-kategorie{ display:flex; align-items:flex-start; gap:14px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; } .consent-kategorie strong{ font-size:14px; color:var(--text); } .consent-kategorie p{ margin:4px 0 0; font-size:12.5px; color:var(--text-2); } .consent-kategorie input[type="checkbox"]{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; } @media (max-width:700px){ .consent-banner-inhalt{ flex-direction:column; align-items:stretch; } .consent-banner-buttons{ justify-content:stretch; } .consent-btn{ flex:1; } } /* WICHTIG: hidden-Attribut muss die display:flex-Regeln oben zuverlaessig ueberschreiben - gleiche Spezifitaet wie [hidden] via Klassenselektor, ohne !important gewinnt sonst die spaeter stehende Klassenregel. */ .consent-modal[hidden], .consent-banner[hidden]{ display:none !important; } @media (max-width:1024px){ .spiel-admin-tabs{ padding:8px 14px 12px; overflow-x:auto; } .spiel-admin-kontext-name{ padding:10px 14px 0; } } .admin-wizard-checkboxen{ display:flex; flex-wrap:wrap; gap:8px 16px; } .admin-wizard-checkbox{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:400; width:auto; flex-direction:row; } .admin-wizard-spielsysteme-form h4{ margin:0 0 8px; font-size:13px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; } /* Hier stand: .builder-panel{ display:none; } .builder-panel.ist-aktiv{ display:block; } Eine Altlast aus dem frueheren Reiter-Builder, bei dem immer nur ein Panel sichtbar war. Die Klasse `ist-aktiv` wird an einem `.builder-panel` seit dem Neuaufbau NIRGENDS mehr gesetzt - damit war jedes Panel dauerhaft ausgeblendet. Betroffen waren die Itemfamilien (die ganze rechte Spalte fehlte), der Pruefen-Bereich im Builder und die Meldung "Im Katalog steht keine Inhaltsart". Alle drei waren im HTML vorhanden und unsichtbar - die Form von Fehler, die man nicht im Fehlerprotokoll findet. Die Sichtbarkeit entscheidet jetzt der Server: Was nicht angezeigt werden soll, wird gar nicht erst gerendert. */ .builder-schnellform{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .builder-schnellform input[type="text"]{ flex:1; min-width:200px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--oberflaeche); color:var(--text); } .builder-schnellform select{ padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--oberflaeche); color:var(--text); } .portal-karte-cover{ width:56px; height:56px; border-radius:10px; flex:0 0 auto; background:linear-gradient(150deg, var(--cp-1) 0%, var(--cp-2) 50%, var(--cp-3) 100%); } .portal-karte-titelblock{ flex:1; min-width:0; } .portal-karte-titel{ display:block; font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; } .portal-fortschritt-leiste{ height:6px; border-radius:var(--radius-rund); background:var(--bg); overflow:hidden; margin-bottom:4px; } .portal-fortschritt-fuellung{ height:100%; background:linear-gradient(90deg, #6d28d9, #db2777); } .portal-fortschritt-text{ font-size:11px; color:var(--text-2); } .portal-karte-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .portal-karte-controls select{ padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-size:12.5px; } .portal-like-gruppe{ display:flex; gap:6px; } .portal-bewertung-block{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); } .portal-bewertung-titel{ margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--text-2); } .portal-bewertung-block .mein-portal-bewertung textarea{ width:100%; } .berichte-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; } .bericht-karte{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; background:var(--oberflaeche); } .bericht-kopf{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } .bericht-avatar{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #4338ca, #db2777); color:#fff; font-weight:700; font-size:14px; } .bericht-name{ display:block; font-size:14px; color:var(--text); } .bericht-datum{ display:block; font-size:11.5px; color:var(--text-2); } .bericht-rating{ margin-left:auto; font-size:13px; font-weight:700; color:#FACC15; white-space:nowrap; } .bericht-text{ font-size:14px; line-height:1.6; color:var(--text); margin:0; } /* Pill-Tag-Reihe, z.B. "Verwandte Concepts" - unabhaengig vom Header-Umbau */ .hero-kategorien{ position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:100%; } .hero-kategorien a{ padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius-rund); font-size:13px; color:var(--text); background:var(--oberflaeche); transition:background .15s ease, border-color .15s ease; } .hero-kategorien a:hover{ background:var(--bg); border-color:var(--akzent); } .abschnitt{ max-width:var(--inhalt-breite); margin:0 auto; padding:32px; } /* Nur auf der Spielseite ein noch breiterer Inhaltskasten (Auftrag "inhalkasten.jpg"): Dort stehen Tabellen und Inhaltsraster nebeneinander, die von jeder zusaetzlichen Spalte profitieren. Der Abstand zur normalen Breite ist bewusst als Aufschlag geschrieben und nicht als feste Zahl - so bleibt die Spielseite immer um denselben Betrag breiter als der Rest, auch wenn --inhalt-breite spaeter noch einmal geaendert wird. Mit einer festen 1400 waere der Unterschied bei jeder Aenderung ein anderer, und irgendwann waere die "breitere" Seite die schmalere. */ /* Der Zuschlag von 240px stammt aus der Zeit der festen 1280px: Die Spielseite traegt zwei Spalten und brauchte mehr als die anderen. Jetzt waechst --inhalt-breite ohnehin mit dem Fenster, und ein Zuschlag obendrauf schoebe die Spielseite als einzige ueber den Rand der Fusszeile hinaus - eine Kante, die um 240px versetzt sitzt. Genau die Sorte Abweichung, wegen der die Breite ueberhaupt ein Token wurde. */ .abschnitt-spiel{ max-width:var(--inhalt-breite); } .abschnitt-schmal{ max-width:420px; } /* Volle Bildschirmbreite - fuer Arbeitstabellen mit vielen Spalten. =================================================================== Der Dateneditor zeigt ALLE Felder eines Inhaltstyps. Bei einem Gegner sind das ueber zwanzig Spalten. In einem auf 1280px begrenzten Kasten laesst sich das nicht darstellen: Man scrollt waagerecht durch eine schmale Roehre, waehrend rechts und links die halbe Bildschirmbreite leer bleibt. Auf einem breiten Monitor passen alle Spalten nebeneinander - dort soll auch nichts gescrollt werden muessen. Der Rest des Portals bleibt bei seiner Lesebreite. Ein Fliesstext ueber die volle Breite eines 34-Zoll-Monitors ist unlesbar; eine Tabelle ist es erst dann nicht mehr, wenn sie abgeschnitten wird. */ .abschnitt-voll{ max-width:none; padding-left:24px; padding-right:24px; } .abschnitt h2{ font-size:19px; margin:32px 0 16px; } /* Nur auf der Spielseite: dezenter Akzentbalken vor Abschnittsüberschriften ("Inhalte", "Ähnliche Spiele", ...) statt sitegweit auf jedem h2 (Admin, Guides etc. behalten ihr bisheriges, ruhigeres Erscheinungsbild). */ .spiel-abschnitt-titel{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:32px 0 16px; display:flex; align-items:center; gap:10px; } .spiel-abschnitt-titel::before{ content:''; width:4px; height:18px; border-radius:2px; background:var(--akzent); flex:0 0 auto; } .raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; } /* ---- Das Grundsystem im Builder ------------------------------------------- Drei Tafeln: Kampf und Entwicklung, Ressourcen, Inhaltsarten. Die Haken stehen in einem `
` mit `` und nicht in einer Liste mit Ueberschrift daneben: Ein Vorlesegeraet meldet die Zugehoerigkeit damit mit, ohne dass man sie ihm sagen muss. --------------------------------------------------------------------------- */ .system-feld{ margin:0 0 18px; } .system-feld label{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--text-2); } .system-feld label small{ font-weight:400; } .system-feld select, .system-feld textarea{ width:100%; max-width:620px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-family:inherit; font-size:14.5px; transition:border-color var(--dauer) var(--kurve); } .system-feld select:focus, .system-feld textarea:focus{ outline:none; border-color:var(--akzent); } .system-feld textarea{ line-height:1.6; resize:vertical; } .system-haken{ border:none; padding:0; margin:0 0 20px; } .system-haken legend{ padding:0; margin:0 0 10px; font-family:var(--schrift-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-2); } /* Ein Raster und keine Spalte: Bei einundzwanzig Inhaltsarten waere eine Spalte einundzwanzig Zeilen lang, und das Formular passte auf keinen Bildschirm. */ .system-arten{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px 18px; } .system-arten legend{ grid-column:1 / -1; } .system-haken label{ display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; cursor:pointer; padding:5px 0; } .system-haken input[type="checkbox"]{ margin-top:3px; flex:0 0 auto; } .system-haken label small{ display:block; margin-top:2px; font-size:11.5px; color:var(--text-2); line-height:1.5; } /* Was schon Eintraege hat, laesst sich nicht abwaehlen. Der Haken bleibt bedienbar - er wird beim Speichern wieder gesetzt und der Grund gesagt. Ihn zu sperren waere ehrlicher und waere schlechter: Ein gesperrtes Feld sagt nicht, WARUM es gesperrt ist. */ .system-arten label.ist-belegt small{ color:var(--akzent); } @media (max-width: 560px){ .system-arten{ grid-template-columns:1fr; } } /* ---- Tafel ---------------------------------------------------------------- DIE KACHEL ALS BAUSTEIN. Es gab sechs Klassen mit fast derselben Flaeche: `.karte`, `.stat-karte`, `.spiel-panel`, `.woche-karte`, `.rand-block`, `.umfrage-karte`. Fast - nicht ganz: verschiedene Radien, mal `--oberflaeche` und mal `--bg`, mal mit Erhebung und mal ohne. Wer eine neue Kachel brauchte, schrieb die siebte, weil keine der sechs so hiess, dass man sie gesucht haette. `.tafel` ist die Flaeche. Was darin steht, regelt die Vorlage; wie sie aussieht, steht hier - einmal. --------------------------------------------------------------------------- ZWEI STUFEN, UND DER UNTERSCHIED IST EINE AUSSAGE --------------------------------------------------------------------------- `.tafel` ruhig. Der Normalfall - ein Block, den man liest. `.tafel-gehoben` mit Goldkante und Verlauf. Der Hauptgegenstand der Seite, und davon gibt es genau einen. Traegt jede Kachel Gold, traegt keine mehr etwas bei: Auszeichnung, die ueberall steht, ist Hintergrund. --------------------------------------------------------------------------- */ .tafel{ padding:20px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--oberflaeche); box-shadow:var(--erhebung); } /* Auf `--bg` statt `--oberflaeche` sinkt eine Kachel HINTER die Seite, waehrend die Kacheln daneben davor liegen. Das ist im Portal schon zweimal passiert (Neuigkeiten, Umfragekarte im Admin) und sah beide Male nicht falsch aus - nur flach. */ .tafel-gehoben{ padding:24px; border-radius:var(--radius-gross); border:1px solid var(--kante-gold); background:linear-gradient(165deg, var(--oberflaeche-2) 0%, var(--oberflaeche) 60%, color-mix(in srgb, var(--oberflaeche) 88%, var(--akzent) 8%) 100%); box-shadow:var(--erhebung); } /* Die Ueberschrift einer Tafel: versal, schmal, mit goldener Haarlinie - dieselbe wie im Panel auf der Spielseite. Sie benennt die Tafel und ringt nicht mit dem Inhalt um Aufmerksamkeit. */ .tafel-titel{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px; padding-bottom:12px; font-family:var(--schrift-mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text); border-bottom:1px solid var(--kante-gold); } /* Eine Zahl rechts im Titel („24 Vorschläge"). Tabellenziffern, damit sie ueber mehrere Tafeln hinweg untereinander stehen. */ .tafel-titel-zahl{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--akzent); text-transform:none; flex:0 0 auto; font-variant-numeric:tabular-nums; } .tafel > :last-child{ margin-bottom:0; } /* Mehrere Tafeln untereinander. Als eigene Klasse und nicht als Rand an der Tafel selbst: Eine Tafel in einem Raster braucht keinen Aussenrand, und ihn dort wieder abzuziehen ist die Sorte Regel, die man spaeter sucht. */ .tafel-stapel{ display:flex; flex-direction:column; gap:18px; } /* ---- Karten --------------------------------------------------------------- `box-shadow:0 1px 2px rgba(0,0,0,0.04)` war auf Weiss ein feiner Rand. Auf #0B0D14 ist er unsichtbar - man kann Schwarz nicht abdunkeln. Auf dunklem Grund entsteht Erhebung ueber eine helle OBERKANTE: Das Auge liest die Lichtkante als "weiter vorn". Genau das macht `--erhebung`. */ .karte{ display:block; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--oberflaeche); box-shadow:var(--erhebung); transition:border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); } .karte:hover{ border-color:color-mix(in srgb, var(--akzent) 55%, var(--border)); box-shadow:0 10px 28px -14px color-mix(in srgb, var(--akzent) 35%, rgba(0,0,0,0.3)), 0 2px 6px -2px rgba(0,0,0,0.08); transform:translateY(-2px); } .karte h3{ font-size:15px; margin:0 0 6px; } .karte p{ font-size:13px; color:var(--text-2); margin:0; } .karte-klein{ padding:12px 16px; } .karte-klein h4{ font-size:13.5px; margin:2px 0 0; } .beziehungstyp{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.03em; } /* #EFF4FF war ein blasses Blau - passend zum alten blauen Akzent und auf Tinte ein weisser Fleck. */ .tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--schrift-mono); font-size:11px; color:var(--akzent); background:color-mix(in srgb, var(--akzent) 13%, transparent); border:1px solid var(--kante-gold); padding:3px 10px; border-radius:var(--radius-rund); margin-bottom:10px; } .tag svg{ flex:0 0 auto; } :root[data-theme="dunkel"] .tag{ background:color-mix(in srgb, var(--akzent) 16%, transparent); } .karte-mit-icon{ display:flex; align-items:center; gap:14px; } .karte-mit-icon-badge{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border-radius:11px; background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--akzent); transition:background .15s ease; } .karte:hover .karte-mit-icon-badge{ background:color-mix(in srgb, var(--akzent) 20%, transparent); } .karte-mit-icon svg{ flex:0 0 auto; color:var(--akzent); } .karte-mit-icon h3{ margin:0 0 2px; } .karte-mit-icon p{ margin:0; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.02em; } .element-liste{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px; } /* "Ähnliche Inhalte" (Entity-Detailseite) - spielübergreifende Verbindungen über ein gemeinsames Element. Bewusst ruhig gehalten: eine dezente Kopfzeile pro Element statt grosser Grafiken, damit der Wissensgraph- Gedanke ("alles ist verknüpft") ohne Spielerei transportiert wird. */ .aehnliche-section{ margin-top:40px; padding-top:28px; border-top:1px solid var(--border); } .aehnliche-section h2{ margin-top:0; } .aehnliche-element-kopf{ display:flex; align-items:center; gap:8px; margin:20px 0 10px; font-size:13px; color:var(--text-2); } .aehnliche-element-kopf strong{ color:var(--text); font-weight:600; } .kampfdaten{ background:linear-gradient(165deg, var(--oberflaeche) 0%, color-mix(in srgb, var(--oberflaeche) 92%, var(--akzent) 4%) 100%); border:1px solid var(--border); border-radius:14px; padding:22px 24px; margin:18px 0; box-shadow:0 1px 2px rgba(0,0,0,0.04); } /* Die Abschnittsmarke ist der kleine Text ueber einer Ueberschrift. Sie traegt jetzt Gold: Zusammen mit der Serifen-Ueberschrift darunter ergibt das den Rhythmus, den ein Nachschlagewerk braucht - Marke, Titel, Text. */ .abschnitt-label{ font-family:var(--schrift-mono); font-size:11px; font-weight:700; color:var(--akzent); text-transform:uppercase; letter-spacing:.11em; margin:28px 0 8px; } .abschnitt-label:first-child{ margin-top:0; } /* Ruhige Trennlinie zwischen grossen Seitenabschnitten (z.B. vor "Inhalte", vor "Erfahrungsberichte") - läuft zu beiden Seiten aus, damit sie nicht wie eine harte Tabellenlinie wirkt. */ .abschnitt-trenner{ border:none; height:1px; margin:36px 0 28px; background:linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent); } /* Der Verlauf ging von der Flaeche zu einem Hauch Akzent - auf Weiss ein sanfter Schimmer, auf Dunkel praktisch unsichtbar. Auf dunklem Grund muss der Verlauf HELLER werden, nicht farbiger. */ .stat-karte{ background:linear-gradient(165deg, var(--oberflaeche-2) 0%, var(--oberflaeche) 62%, color-mix(in srgb, var(--oberflaeche) 88%, var(--akzent) 7%) 100%); border:1px solid var(--border); border-radius:var(--radius-gross); padding:22px 24px; margin:18px 0; box-shadow:var(--erhebung); } /* minmax bewusst grosszuegiger als vorher (220 statt 180px): bei kurzen Werten ("50 Std.") bleibt trotzdem viel Luft, bei langen ("2026 JP · 2027 EU") oder der Community-Wertung bricht der Text nicht mehr mitten im Wort um - das Grid bleibt so unabhaengig von der Textlaenge ruhig. */ .stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px 28px; } .stat-zeile{ display:flex; flex-direction:column; gap:3px; min-width:0; } /* Fuer Werte, die auch bei 220px noch eng werden koennten (z.B. "Community- Wertung" mit Zusatztext) - nimmt zwei Spalten ein statt zu quetschen. */ .stat-zeile-breit{ grid-column:span 2; } @media (max-width:520px){ .stat-zeile-breit{ grid-column:span 1; } } .stat-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; } .stat-wert{ font-size:15px; font-weight:600; line-height:1.4; } .stat-wert-zahl{ font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--akzent); font-variant-numeric:tabular-nums; } .stat-wert-zusatz{ font-size:12.5px; color:var(--text-2); } /* "Spiel auf einen Blick"-Tabelle (abschnitt-spiel): kompakte Label|Wert- Zeilen statt Grid-Kacheln - besser scannbar bei vielen Datenpunkten, eigene Klasse statt .stat-grid global anzufassen (nur diese Seite). */ .spiel-info-tabelle{ display:flex; flex-direction:column; } .spiel-info-zeile{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); } .spiel-info-zeile:last-child{ border-bottom:none; } .spiel-info-zeile .stat-label{ flex-shrink:0; } .spiel-info-zeile .stat-wert{ text-align:right; } .kategorie-tag{ font-weight:700; } .kategorie-nahkampf, .kategorie-aktiv, .kategorie-angriff{ color:var(--fehler); border-color:var(--fehler); background:color-mix(in srgb, var(--fehler) 10%, transparent); } .kategorie-fernkampf, .kategorie-buff, .kategorie-unterstuetzung{ color:var(--erfolg); border-color:var(--erfolg); background:color-mix(in srgb, var(--erfolg) 10%, transparent); } .kategorie-magisch, .kategorie-verteidigung{ color:var(--info); border-color:var(--info); background:color-mix(in srgb, var(--info) 10%, transparent); } .kategorie-passiv, .kategorie-kontrolle{ color:#7C3AED; border-color:#7C3AED; background:color-mix(in srgb, #7C3AED 10%, transparent); } .kategorie-debuff{ color:var(--warnung); border-color:var(--warnung); background:color-mix(in srgb, var(--warnung) 10%, transparent); } .kategorie-heilung{ color:#0D9488; border-color:#0D9488; background:color-mix(in srgb, #0D9488 10%, transparent); } .kampfdaten-werte{ display:flex; gap:28px; margin-bottom:16px; } .kampfdaten-wert{ display:flex; flex-direction:column; } .kampfdaten-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; } .kampfdaten-zahl{ font-size:22px; font-weight:700; } .kampfdaten-elemente{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; } .kampfdaten-element-zeile{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .kampfdaten-element-label{ font-size:12.5px; color:var(--text-2); font-weight:600; min-width:150px; } .kampfdaten-text{ font-size:13.5px; margin:6px 0; } .kampfdaten-liste-block{ margin-top:14px; } .raster-klein{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:8px; } .vergleich-kopf{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin:20px 0; } .vergleich-vs{ font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--text-2); font-size:13px; } .vergleich-tabelle{ width:100%; border-collapse:collapse; margin-top:20px; } .vergleich-tabelle th{ text-align:center; padding:10px; border-bottom:2px solid var(--border); font-size:13px; } .vergleich-tabelle th:nth-child(2){ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-2); } .vergleich-tabelle td{ padding:10px; border-bottom:1px solid var(--border); text-align:center; font-size:13.5px; } .vergleich-label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-2); text-transform:uppercase; } .vergleich-besser{ color:var(--erfolg); font-weight:700; } .vergleich-auswertung-zeile td{ border-bottom:1px solid var(--border); padding:4px 10px 14px; text-align:center; font-size:12.5px; color:var(--text-2); font-style:italic; } @media (max-width:700px){ .vergleich-kopf{ grid-template-columns:1fr; } .vergleich-vs{ justify-self:center; } } .vergleich-picker{ display:flex; gap:12px; align-items:flex-end; margin:18px 0; flex-wrap:wrap; } .vergleich-picker select{ padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-size:13.5px; width:100%; } /* Das Freitextfeld steht ÜBER dem Filterkasten und nicht darin. Es ist der Einstieg - erst tippen, dann bei Bedarf verfeinern. Im Kasten wäre es eines von acht Feldern und damit genauso beiläufig wie "Plattform". */ .finder-freitext{ display:block; margin-bottom:14px; font-size:13.5px; color:var(--text-2); } .finder-freitext input{ display:block; width:100%; margin-top:6px; padding:13px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:15px; font-family:inherit; } .finder-freitext input:focus{ outline:none; border-color:var(--akzent); } .finder-freitext small{ display:block; margin-top:6px; font-size:12px; } .finder-formular{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:20px; } .finder-formular label{ min-width:160px; } .finder-formular select{ padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text); font-size:13.5px; width:100%; } .finder-ergebnisse{ display:flex; flex-direction:column; gap:14px; } .finder-karte{ display:block; border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; } .finder-karte:hover{ border-color:var(--akzent); } .finder-karte-kopf{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .finder-karte-kopf h3{ margin:0; font-size:16px; } .finder-score{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:16px; color:var(--akzent); } .finder-balken{ height:6px; background:var(--border); border-radius:var(--radius-rund); overflow:hidden; margin-bottom:12px; } .finder-balken-fuellung{ height:100%; background:var(--akzent); border-radius:var(--radius-rund); } .finder-gruende{ list-style:none; padding:0; margin:4px 0 0; font-size:12.5px; } .finder-gruende-plus li{ color:var(--erfolg); } .finder-gruende-minus li{ color:var(--text-2); } .bewertung-block{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin:20px 0; } .bewertung-gesamt{ display:flex; align-items:baseline; gap:6px; margin-bottom:18px; flex-wrap:wrap; } .bewertung-gesamt-zahl{ font-size:32px; font-weight:700; color:var(--akzent); } .bewertung-gesamt-max{ font-size:16px; color:var(--text-2); } .bewertung-gesamt-label{ font-size:12.5px; color:var(--text-2); margin-left:8px; } .bewertung-zeile{ display:grid; grid-template-columns:130px 1fr 32px; align-items:center; gap:10px; margin-bottom:4px; } .bewertung-label{ font-size:12.5px; color:var(--text-2); } .bewertung-balken{ height:6px; background:var(--border); border-radius:var(--radius-rund); overflow:hidden; } .bewertung-balken-fuellung{ height:100%; background:var(--akzent); border-radius:var(--radius-rund); } .bewertung-zahl{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-align:right; } .bewertung-note{ font-size:12px; color:var(--text-2); margin:0 0 10px; padding-left:140px; font-style:italic; } @media (max-width:600px){ .bewertung-zeile{ grid-template-columns:100px 1fr 28px; } .bewertung-note{ padding-left:0; } } .element-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; padding:5px 12px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); display:inline-flex; align-items:center; gap:4px; } a.element-tag:hover{ border-color:var(--akzent); color:var(--akzent); } .element-tag-feuer{ color:#FF6B5A; border-color:#FF6B5A; background:color-mix(in srgb, #FF6B5A 12%, transparent); } .element-tag-eis{ color:#4FC3F7; border-color:#4FC3F7; background:color-mix(in srgb, #4FC3F7 12%, transparent); } .element-tag-erde{ color:#C49A46; border-color:#C49A46; background:color-mix(in srgb, #C49A46 12%, transparent); } .element-tag-wind{ color:#5BD98A; border-color:#5BD98A; background:color-mix(in srgb, #5BD98A 12%, transparent); } .element-tag-licht{ color:#F5D76E; border-color:#F5D76E; background:color-mix(in srgb, #F5D76E 12%, transparent); } .element-tag-schall{ color:#A78BFA; border-color:#A78BFA; background:color-mix(in srgb, #A78BFA 12%, transparent); } .element-tag-blitz{ color:#FFC93C; border-color:#FFC93C; background:color-mix(in srgb, #FFC93C 12%, transparent); } .element-tag-wasser{ color:#5B9BFF; border-color:#5B9BFF; background:color-mix(in srgb, #5B9BFF 12%, transparent); } /* ---- Wirkungsliste im Admin ----------------------------------------------- Die Balkenansicht - eine Wirkung je Zeile, mit Farbstreifen fuer die Richtung. Auf der Besucherseite ist sie durch das Wirkungsgitter darunter ersetzt; im Builder bleibt sie, und das ist kein Versehen: Dort geht es ums PFLEGEN. Eine Redakteurin will jede einzelne Wirkung sehen, wie sie in der Datenbank steht - mit ihrem vollen Satz, in der Reihenfolge der Sortierung, und jede fuer sich anklickbar. Das Gitter fasst zusammen und ist genau deshalb hier falsch. Die Regeln standen kurz vor dem Loeschen, weil ich sie fuer Ueberbleibsel der alten Ansicht hielt. Sie sind noch in Benutzung. */ .eintrag-wirkung-liste{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:6px; } .eintrag-wirkung-liste li{ font-size:13px; line-height:1.5; padding:7px 11px; border-radius:var(--radius-klein); background:var(--bg); border:1px solid var(--border); border-left-width:3px; } .eintrag-wirkung-liste li.ist-offensiv{ border-left-color:var(--fehler); } .eintrag-wirkung-liste li.ist-defensiv{ border-left-color:var(--akzent); } .eintrag-wirkung-liste li.ist-neutral{ border-left-color:var(--text-2); } /* ---- Aehnliche Inhalte ---------------------------------------------------- Was das Gegenelement traegt. Links und keine Plaketten: Sie fuehren woandershin, und das soll man sehen, bevor man klickt. */ .aehnlich-liste{ display:flex; flex-wrap:wrap; gap:6px; } .aehnlich-liste a{ font-size:12.5px; padding:4px 10px; border-radius:var(--radius-rund); border:1px solid var(--border); background:var(--bg); color:var(--text-2); transition:border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); } .aehnlich-liste a:hover{ border-color:var(--kante-gold); color:var(--text); } .aehnlich-mehr{ font-size:11.5px; color:var(--text-2); align-self:center; font-style:italic; } /* ---- Wirkungsgitter ------------------------------------------------------- „Schwach gegen [Feuer] [Eis]" - die Ansicht aus der alten Spieleseite. Vorher stand jede Wirkung als eigener Balken untereinander: acht Zeilen, alle gleich breit, alle gleich grau. Wer wissen wollte, wogegen ein Gegner schwach ist, musste sie Wort fuer Wort lesen. Ein
und kein
: Beschriftung und Werte sind genau das, wofuer es die Beschreibungsliste gibt - und ein Vorlesegeraet meldet die Zuordnung mit, ohne dass man sie ihm sagen muss. --------------------------------------------------------------------------- DIE BESCHRIFTUNG STEHT LINKS UND HAT EINE FESTE BREITE --------------------------------------------------------------------------- `minmax(96px, auto)`: Die Spalte richtet sich nach der laengsten Wendung („Resistent gegen"), und alle Plaketten beginnen dadurch an derselben Kante. Ohne feste Kante wandert der Anfang der Plaketten von Zeile zu Zeile mit der Laenge der Beschriftung - und das Auge findet die Reihe nicht mehr. --------------------------------------------------------------------------- */ .wirkungsgitter{ display:grid; grid-template-columns:minmax(96px, auto) minmax(0, 1fr); gap:9px 16px; margin:0 0 4px; align-items:baseline; } /* Die Beschriftung: klein, versal, gedaempft - sie benennt die Reihe und soll nicht mit den Plaketten um Aufmerksamkeit ringen. */ .wirkungsgitter dt{ font-family:var(--schrift-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); padding-top:4px; white-space:nowrap; } /* Die Richtung als Punkt vor der Beschriftung. Offensiv ist, was der Eintrag TUT; defensiv, was ihm widerfaehrt. Wer nach einer Schwaeche sucht, findet die Reihe am Punkt, bevor er liest. */ .wirkungsgitter dt::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:7px; vertical-align:middle; background:var(--text-2); } .wirkungsgitter dt.ist-offensiv::before{ background:var(--fehler); } .wirkungsgitter dt.ist-defensiv::before{ background:var(--akzent); } .wirkungsgitter dd{ margin:0; display:flex; flex-wrap:wrap; gap:6px; } /* Der Zusatz („50 %") in der Plakette: kleiner, halbdurchsichtig, mit einem feinen Strich abgesetzt. Er gehoert zum Element und ist doch nicht sein Name. */ .wirkungsgitter .element-tag small{ font-size:10px; opacity:.75; padding-left:6px; margin-left:2px; border-left:1px solid currentColor; } @media (max-width: 560px){ /* Untereinander: Bei 96px Beschriftung und Plaketten daneben bleibt auf einem Telefon fuer die Plaketten zu wenig. */ .wirkungsgitter{ grid-template-columns:1fr; gap:4px 0; } .wirkungsgitter dt{ padding-top:8px; } .wirkungsgitter dd{ margin-bottom:6px; } } .element-tag-heilig{ color:#FFE9A8; border-color:#FFE9A8; background:color-mix(in srgb, #FFE9A8 12%, transparent); } .element-tag-dunkel{ color:#B388FF; border-color:#B388FF; background:color-mix(in srgb, #B388FF 12%, transparent); } .element-tag-gift{ color:#8BD450; border-color:#8BD450; background:color-mix(in srgb, #8BD450 12%, transparent); } .element-tag-gravitation{ color:#9AA3C7; border-color:#9AA3C7; background:color-mix(in srgb, #9AA3C7 12%, transparent); } /* Koerperliche Arten und „nicht-elementar" bleiben gedaempft: Sie sind Angaben und keine Elemente im Sinne von Feuer und Eis. Ein eigener Ton fuer jede von ihnen waere ein Regenbogen ohne Ordnung - und dann sagt die Farbe gar nichts mehr. */ .element-tag-hieb, .element-tag-stich, .element-tag-schlag, .element-tag-neutral{ color:var(--text-2); border-color:var(--border); background:color-mix(in srgb, var(--text-2) 8%, transparent); } /* Zustaende („Gift", „Blind", „Stumm") bekommen keine eigene Farbe - davon gibt es zu viele. Sie stehen in der Akzentfarbe und heben sich damit von den Elementen ab, ohne mit ihnen um Aufmerksamkeit zu ringen. */ .element-tag.ist-zustand{ color:var(--akzent); border-color:var(--kante-gold); background:color-mix(in srgb, var(--akzent) 10%, transparent); } /* Die Wendung davor („Schwach gegen") und der Zusatz danach („50 %") stehen gedaempft - die Plakette dazwischen traegt die Auskunft. */ .wirkung-wendung{ color:var(--text-2); font-size:12.5px; } .wirkung-zusatz{ color:var(--text-2); font-size:11.5px; font-family:var(--schrift-mono); } .suche-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 28px; } .suche-filter a{ padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-rund); font-size:12.5px; color:var(--text-2); background:var(--oberflaeche); transition:all .15s ease; } .suche-filter a:hover{ color:var(--text); border-color:var(--akzent); } .suche-filter a.aktiv{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); } .erweiterte-filter{ margin:0 0 28px; } .erweiterte-filter summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-2); padding:8px 0; list-style:none; display:inline-flex; align-items:center; gap:6px; } .erweiterte-filter summary::-webkit-details-marker{ display:none; } .erweiterte-filter summary::before{ content:'▸'; font-size:11px; transition:transform .15s ease; } .erweiterte-filter[open] summary::before{ transform:rotate(90deg); } .erweiterte-filter summary:hover{ color:var(--text); } .fortschritt-widget{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; margin:20px 0; background:var(--oberflaeche); } .fortschritt-buttons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .fortschritt-status-btn{ padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-rund); background:var(--bg); color:var(--text-2); font-size:12.5px; font-family:inherit; cursor:pointer; transition:all .15s ease; } .fortschritt-status-btn:hover{ border-color:var(--akzent); color:var(--text); } /* `color:#fff` war auf dem alten Blau richtig und ist auf Gold unlesbar - dieselbe Stelle wie beim gefuellten Knopf. */ .fortschritt-status-btn.ist-aktiv{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); font-weight:600; } .fortschritt-zeile{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--border); } .fortschritt-zeile:last-child{ border-bottom:none; } .formular{ display:flex; flex-direction:column; gap:14px; margin-top:20px; } .formular label{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--text-2); } .formular input{ padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); font-size:14px; font-family:inherit; } /* ---- Knoepfe -------------------------------------------------------------- `color:#fff` stand hier fest - und war auf dem alten Blau richtig. Auf Gold ist weisser Text unlesbar: #FFF auf #E9C171 ergibt 1,7:1. Ein gefuellter Knopf traegt jetzt DUNKLEN Text. Das ist keine Ausnahme fuer Gold, sondern die Regel fuer jede helle Fuellfarbe - und der Grund, warum `--akzent` und `--akzent-tief` zwei Werte sind statt einer Farbe mit Helligkeitsstufen. */ .btn{ display:inline-block; padding:11px 22px; background:var(--akzent); color:var(--bg); border:1px solid transparent; border-radius:var(--radius-klein); font-family:var(--schrift-text); font-size:14px; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:background var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); } /* Nur ein Hauch heller und ein Pixel hoch. Ein Knopf, der beim Zeigen um 4px waechst, laesst die Zeile darunter zappeln. */ .btn:hover{ background:color-mix(in srgb, var(--akzent) 88%, #FFF); } .btn:active{ transform:translateY(1px); } .btn-sekundaer{ background:var(--oberflaeche); color:var(--text); border:1px solid var(--border); } .btn-sekundaer:hover{ background:var(--oberflaeche-2); border-color:var(--kante-gold); color:var(--text); } .btn-sekundaer:hover{ border-color:var(--akzent); color:var(--akzent); } .spiel-hero-aktionen{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* `background:#FEF2F2` und `border:#FCA5A5` waren auf Weiss ein zartes Rosa. Auf #0B0D14 sind es zwei leuchtende Flaechen - und ausgerechnet die Fehlermeldung schreit dann am lautesten. `color-mix` gegen `transparent` loest das ohne zweite Regel: Der Kasten nimmt die Farbe des Untergrunds auf, in beiden Modi. */ .fehler-box{ background:color-mix(in srgb, var(--fehler) 12%, transparent); color:var(--fehler); border:1px solid color-mix(in srgb, var(--fehler) 40%, transparent); border-radius:var(--radius-klein); padding:11px 14px; font-size:13.5px; margin-bottom:12px; } .breadcrumb{ max-width:var(--inhalt-breite); margin:20px auto 0; padding:0 32px; font-size:13px; color:var(--text-2); } .breadcrumb a{ color:var(--text-2); } .breadcrumb a:hover{ color:var(--text); } /* Glattere Breadcrumb-Variante mit Chevron-Trennern statt Schrägstrich-Text (Auftrag: Navigation "unschön gelöst") - bislang auf Entity-Detailseiten. */ .breadcrumb-neu{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; max-width:var(--inhalt-breite); margin:20px auto 0; padding:0 32px; font-size:12.5px; color:var(--text-2); } .breadcrumb-neu a{ color:var(--text-2); padding:3px 7px; border-radius:6px; transition:background .15s ease, color .15s ease; } .breadcrumb-neu a:hover{ color:var(--text); background:var(--oberflaeche); } .breadcrumb-neu-trenner{ color:var(--border); font-size:13px; } .breadcrumb-neu-aktuell{ color:var(--text); font-weight:600; padding:3px 7px; } /* Vor-/Zurück-Slider zwischen Inhalten desselben Typs im selben Spiel. */ .entity-slider{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--inhalt-breite); margin:10px auto 0; padding:0 32px; } .entity-slider-pfeil{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); font-size:13px; transition:border-color .15s ease, color .15s ease; max-width:48%; } .entity-slider-pfeil:hover{ border-color:var(--akzent); color:var(--akzent); } .entity-slider-links{ margin-right:auto; } .entity-slider-rechts{ margin-left:auto; } .entity-slider-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:640px){ .entity-slider-name{ max-width:110px; } } .liste{ padding-left:20px; font-size:14px; } .liste li{ margin-bottom:6px; } .hinweis{ color:var(--text-2); font-size:14px; } /* Die beiden Trennlinien der Fusszeile - oben und ueber der Copyright-Zeile - enden buendig mit dem Inhalt, statt ueber die ganze Fensterbreite zu laufen. Auf einem breiten Monitor zogen sie sich sonst quer durch das Bild, waehrend der Text darunter bei 1100 px endete. Umgesetzt als Pseudo-Element statt als border-top: Ein Rahmen sitzt immer an der Kante seines Elements und laesst sich nicht schmaler machen als dieses. Die Linie braucht aber eine eigene Breite, unabhaengig vom Container. width und max-width zusammen decken beide Faelle ab: Auf breiten Fenstern greift max-width (1100 px Inhaltsbreite minus 2x32 px Innenabstand, damit die Linie genau dort beginnt, wo auch die Spaltenueberschriften beginnen); auf schmalen greift width und haelt denselben Abstand zum Rand. */ .fuss{ color:var(--text-2); font-size:13px; margin-top:60px; } .fuss::before, .fuss-zeile::before{ content:''; display:block; height:1px; background:var(--border); max-width:var(--inhalt-innen); margin:0 auto; } /* .fuss hat selbst keinen Innenabstand - die Linie muss ihn deshalb hier erzeugen, damit sie auf schmalen Fenstern denselben Randabstand haelt wie der Text darunter. */ .fuss::before{ width:calc(100% - 64px); } /* .fuss-zeile bringt ihre 32 px bereits mit. Hier waere derselbe Abzug ein zweites Mal wirksam und die Linie am Ende 96 px vom Rand entfernt - sie waere sichtbar schmaler als die obere. */ .fuss-zeile::before{ width:100%; } /* Zentriert statt linksbuendig. `justify-items:center` ruecke die Spalten zusammen und laesst sie als Block in der Mitte stehen; `text-align:center` richtet ihren Inhalt danach aus. Beides zusammen - ohne das zweite staenden die Ueberschriften mittig und die Links darunter linksbuendig. */ .fuss-innen{ max-width:var(--inhalt-breite); margin:0 auto; padding:40px 32px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; justify-items:center; text-align:center; } /* Die Listen sind Flex-Spalten - `text-align` allein reicht dort nicht, weil die Elemente an der Flex-Achse ausgerichtet werden. */ .fuss-spalte ul{ align-items:center; } .fuss-spalte h4{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin:0 0 12px; } .fuss-spalte ul{ display:flex; flex-direction:column; gap:8px; } .fuss-spalte a{ font-size:13.5px; color:var(--text-2); } .fuss-spalte a:hover{ color:var(--text); } /* padding-top auf 0: Die Linie ist jetzt das erste Kind und braucht den Abstand UNTER sich, nicht ueber sich - sonst schwebte sie 16 px unterhalb der Oberkante statt an ihr. */ .fuss-zeile{ padding:0 32px 16px; text-align:center; } .fuss-zeile::before{ margin-bottom:16px; } .fuss-disclaimer{ max-width:700px; margin:0 auto; padding:0 32px 20px; text-align:center; } .fuss-disclaimer p{ font-size:11.5px; color:var(--text-2); line-height:1.6; margin:0; } /* Die Markenzeile ist laenger als das frühere „© 2026 RPG Portal" - sie bekommt eine Lesebreite und etwas kleinere Schrift, damit sie unter dem Fuss nicht wie eine zweite Navigation wirkt. */ .fuss-zeile p{ margin:0 auto; max-width:72ch; font-size:12.5px; line-height:1.6; color:var(--text-2); text-wrap:pretty; } .fuss-zeile a{ color:var(--text-2); text-decoration:underline; } .fuss-zeile a:hover, .fuss-zeile a:focus-visible{ color:var(--akzent); } @media (max-width:600px){ .fuss-innen{ grid-template-columns:1fr; } } @media (max-width:700px){ .hero, .abschnitt{ padding:24px 18px; } } /* ---------- Karte (eigenes SVG, keine fremden Kartenbilder) ---------- */ .karten-buehne{ position:relative; width:100%; max-width:720px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:20px; } .karten-buehne svg{ display:block; width:100%; height:auto; } .karten-marker-schicht{ position:absolute; inset:0; } .karten-marker{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--oberflaeche); border:2px solid var(--akzent); font-size:11px; font-weight:700; color:var(--akzent); } .karten-marker.ist-erledigt{ background:var(--erfolg); border-color:var(--erfolg); color:#fff; } .karten-marker .marker-label{ position:absolute; top:26px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; background:var(--oberflaeche); padding:2px 6px; border-radius:4px; border:1px solid var(--border); opacity:0; transition:opacity .15s ease; pointer-events:none; } .karten-marker:hover .marker-label{ opacity:1; } /* ---------- Fragenbaum ---------- */ .frage-text{ font-size:17px; font-weight:500; margin:16px 0 20px; } .btn-antwort{ display:block; width:100%; text-align:left; background:var(--oberflaeche); color:var(--text); border:1px solid var(--border); margin-bottom:8px; } .btn-antwort:hover{ border-color:var(--akzent); } /* ---------- Werbeflächen ---------- */ .ad-slot{ text-align:center; padding:14px; border:1px dashed var(--border); border-radius:var(--radius-klein); margin:24px 0; color:var(--text-2); font-size:11px; } .ad-slot-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:6px; } /* ---------- Admin-Bereich ---------- */ .admin-nav{ background:var(--oberflaeche); border-bottom:1px solid var(--border); } .admin-nav-tabs{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px; max-width:var(--inhalt-breite); margin:0 auto; padding:10px 24px; position:relative; } .admin-nav-tabs a{ padding:8px 16px; border-radius:var(--radius-rund); font-size:13.5px; font-weight:600; color:var(--text-2); transition:background .15s ease, color .15s ease; } .admin-nav-tabs a:hover{ color:var(--text); background:var(--bg); } .admin-nav-tabs a.ist-aktiv{ color:var(--bg); background:var(--akzent); } .admin-nav-extern{ position:absolute; right:24px; font-weight:400 !important; color:var(--text-2) !important; background:none !important; } .admin-nav-extern:hover{ color:var(--text) !important; background:none !important; } .admin-nav-sub{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:var(--inhalt-breite); margin:0 auto; padding:0 28px 12px; font-size:13px; } .admin-nav-sub a{ color:var(--text-2); padding-bottom:2px; border-bottom:2px solid transparent; } .admin-nav-sub a:hover{ color:var(--text); } .admin-nav-sub a.ist-aktiv{ color:var(--text); border-bottom-color:var(--akzent); font-weight:600; } @media (max-width:1024px){ .admin-nav-tabs{ padding:10px 14px; overflow-x:auto; justify-content:flex-start; } .admin-nav-extern{ position:static; margin-left:12px; } .admin-nav-sub{ padding:0 14px 12px; overflow-x:auto; justify-content:flex-start; } } /* Tab-Leiste innerhalb von Formularen (z.B. Inhalt bearbeiten) - gleiches Prinzip */ .admin-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:12px; } .admin-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--radius-rund); border:1px solid var(--border); background:var(--oberflaeche); color:var(--text-2); font-size:13.5px; font-family:inherit; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; } .admin-tab:hover{ color:var(--text); border-color:var(--akzent); } .admin-tab.ist-aktiv{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); } .admin-tab-nummer{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.25); font-size:11px; font-weight:700; } .admin-tab:not(.ist-aktiv) .admin-tab-nummer{ background:var(--border); color:var(--text-2); } .admin-panel{ display:none; } .admin-panel.ist-aktiv{ display:block; } .admin-tabelle{ width:100%; min-width:480px; border-collapse:collapse; font-size:13.5px; } .admin-tabelle-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; } @media (max-width:700px){ .admin-tabelle td, .admin-tabelle th{ white-space:nowrap; } } .admin-tabelle th{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; } .admin-tabelle td{ padding:10px 12px; border-bottom:1px solid var(--border); } .admin-tabelle a{ color:var(--akzent); font-size:12.5px; } .admin-tabelle .spalte-haken{ width:1%; padding-right:0; text-align:center; } .admin-tabelle code{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-2); } .status-tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:3px 9px; border-radius:var(--radius-rund); text-transform:uppercase; } /* SECHS REGELN FUER DREI MARKEN - jetzt drei. Hier standen die hellen Werte und darunter noch einmal dieselben Marken fuer den dunklen Modus. Wer eine Farbe aenderte, musste an zwei Stellen denken; wer es vergass, bekam eine Marke, die in einem der beiden Modi nicht passte - und man sieht immer nur einen Modus gleichzeitig. `color-mix` gegen `transparent` braucht keine zweite Fassung: Der Untergrund scheint durch, die Marke passt sich von selbst an. */ .status-published{ background:color-mix(in srgb, var(--erfolg) 15%, transparent); color:var(--erfolg); } .status-draft{ background:color-mix(in srgb, var(--warnung) 15%, transparent); color:var(--warnung); } .status-archived{ background:color-mix(in srgb, var(--text-2) 15%, transparent); color:var(--text-2); } .formular select, .formular textarea{ padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-klein); font-size:14px; font-family:inherit; background:var(--bg); color:var(--text); } .formular textarea{ resize:vertical; } .konto-info{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:20px 0 32px; font-size:13.5px; } .konto-info p{ margin:0 0 6px; } .konto-info p:last-child{ margin-bottom:0; } .admin-tabelle-btn{ padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); color:var(--text-2); font-size:11.5px; cursor:pointer; font-family:inherit; transition:border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); } .admin-tabelle-btn:hover{ border-color:var(--kante-gold); color:var(--text); } .admin-tabelle-btn:hover{ border-color:var(--akzent); color:var(--text); } .admin-massenaktion{ display:flex; align-items:center; gap:14px; padding:10px 16px; margin-bottom:14px; background:var(--oberflaeche); border:1px solid var(--border); border-radius:10px; font-size:13px; color:var(--text-2); } .admin-confirm-overlay{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; padding:20px; } .admin-confirm-box{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:14px; padding:24px 26px; max-width:480px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.4); } .admin-confirm-box h3{ margin:0 0 10px; } /* ---------- Favoriten ---------- */ .favoriten-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-rund); border:1px solid var(--border); background:var(--oberflaeche); color:var(--text-2); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s ease; } .favoriten-btn svg{ width:15px; height:15px; } .favoriten-btn:hover{ border-color:var(--akzent); color:var(--text); } .favoriten-btn.ist-aktiv{ background:color-mix(in srgb, var(--akzent) 12%, transparent); border-color:var(--akzent); color:var(--akzent); } /* ---------- Spiel-Showcase: 3D-Tilt-Karten, Glaseffekt-Badges, 3D-Button ---------- Reines CSS, keine externen Bilder/Skripte. Primaer fuers dunkle Theme entworfen, funktioniert aber (mit reduziertem Kontrast) auch im hellen Theme. */ .showcase-raster{ display:flex; flex-direction:column; gap:10px; } .showcase-release-reihe{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; } .showcase-release-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin-right:2px; } .showcase-glass-badge{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); } .showcase-glass-badge-flagge{ font-size:14px; line-height:1; } .showcase-glass-badge-jahr{ font-size:12px; font-weight:600; color:var(--text); } /* Moderne, flache Spiel-Zeile (2026-2030) - ersetzt die alte 3D-Glaskarte */ .spielzeile{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--radius); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text); transition:border-color .15s ease, transform .15s ease; } .spielzeile:hover{ border-color:var(--akzent); transform:translateX(2px); } .spielzeile-initiale{ flex:0 0 auto; width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--border); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:18px; color:var(--akzent); } .spielzeile-mitte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .spielzeile-kopf{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .spielzeile-titel{ font-size:16px; font-weight:700; color:var(--text); } .spielzeile-match{ font-size:11px; font-weight:700; color:var(--erfolg); background:color-mix(in srgb, var(--erfolg) 12%, transparent); padding:2px 9px; border-radius:var(--radius-rund); } .spielzeile-beschreibung{ font-size:13px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .spielzeile-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } .spielzeile-community-status{ display:flex; flex-direction:column; gap:2px; font-size:11.5px; color:var(--text-2); margin-top:4px; } .spielzeile-community-status-zeile{ display:block; } /* --------------------------------------------------------------------------- REITER UND LISTE (2026-09-08) --------------------------------------------------------------------------- Ein erster Versuch faerbte jeden Reiter/Listeneintrag in seiner Inhaltsgruppenfarbe (rot/gruen/blau/violett je nach Art) - Rueckmeldung: "es wird schlimmer statt besser", die Buntheit wirkte unruhiger statt professioneller. Zurueck auf EINEN ruhigen Akzent (Gold) fuer alle Gruppen - die strukturelle Politur (Icon am Reiter, Hover-Lift, Schatten) bleibt bestehen, nur die Vielfarbigkeit ist wieder weg. */ .inhalt-explorer-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } .inhalt-explorer-tab{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text-2); font-size:13px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; } .inhalt-explorer-tab:hover{ color:var(--text); border-color:var(--akzent); } /* `color:#fff` auf Gold ergibt 1,7:1 - dieselbe Stelle wie beim gefuellten Knopf. Der aktive Reiter traegt die Hintergrundfarbe. */ .inhalt-explorer-tab.ist-aktiv{ background:var(--akzent); border-color:var(--akzent); color:var(--bg); font-weight:600; } .inhalt-explorer-tab-zahl{ opacity:.9; font-size:12px; font-variant-numeric:tabular-nums; } /* Klickbare Ergebnisliste innerhalb der linken Anzeige (nach Tab-Klick). */ .inhalt-explorer-liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; } .inhalt-explorer-listen-eintrag{ text-align:left; padding:9px 12px; border-radius:var(--radius-klein); background:var(--bg); border:1px solid var(--border); color:var(--text); font-size:13px; cursor:pointer; transition:border-color .15s ease; } .inhalt-explorer-listen-eintrag:hover{ border-color:var(--akzent); color:var(--akzent); } /* Schätze je Ort (2026-09-11): „Schätze Erdschrein" aufklappen → die Truhen dieses Gebiets. Dieselbe Optik wie ein Listeneintrag, eingerückte Liste. */ .inhalt-explorer-gruppe{ width:100%; border:1px solid var(--border); border-radius:var(--radius-klein); background:var(--bg); } .inhalt-explorer-gruppe > summary{ display:flex; align-items:center; gap:8px; padding:9px 12px; list-style:none; cursor:pointer; font-size:13px; color:var(--text); } .inhalt-explorer-gruppe > summary::-webkit-details-marker{ display:none; } .inhalt-explorer-gruppe > summary::before{ content:'▸'; font-size:11px; color:var(--text-2); transition:transform .15s ease; } .inhalt-explorer-gruppe[open] > summary::before{ transform:rotate(90deg); } .inhalt-explorer-gruppe > summary:hover{ color:var(--akzent); } .inhalt-explorer-gruppe[open] > summary{ border-bottom:1px solid var(--border); } .inhalt-explorer-gruppe-zahl{ margin-left:auto; font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; } .inhalt-explorer-gruppe-liste{ display:flex; flex-direction:column; gap:4px; padding:8px 8px 8px 22px; } .inhalt-explorer-gruppe-liste .inhalt-explorer-listen-eintrag{ width:100%; } @media (prefers-reduced-motion: reduce){ .inhalt-explorer-gruppe > summary::before{ transition:none; } } /* Spielinhalt-Explorer: Eintragsliste links, vollstaendige Detailkarte rechts. Die frühere Baum-Navigation ist entfallen (die Tab-Leiste deckt sie ab) - der freigewordene Platz geht an die Detailspalte. */ /* Der Schatten war fest auf Weiss gerechnet (`rgba(0,0,0,0.04)`) - auf dunklem Grund unsichtbar, weil man Schwarz nicht abdunkeln kann. `--erhebung` traegt in beiden Modi das Richtige: Lichtkante auf Tinte, Schatten auf Papier. */ .inhalt-explorer-anzeige{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; min-height:160px; box-shadow:var(--erhebung); } .inhalt-explorer-anzeige.hat-liste{ display:grid; grid-template-columns:clamp(230px, 16vw, 340px) minmax(0,1fr); gap:0; padding:0; } .inhalt-explorer-liste-pane{ padding:16px; border-right:1px solid var(--border); max-height:640px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; } .inhalt-explorer-liste-pane .inhalt-explorer-listen-eintrag{ width:100%; } .inhalt-explorer-listen-eintrag.ist-aktiv{ border-color:var(--akzent); color:var(--akzent); background:color-mix(in srgb, var(--akzent) 10%, var(--bg)); } /* Höhe folgt dem Inhalt (2026-09-11, Betreiber: „wenn ich auf Rain klicke, muss ich scrollen, weil sich der Explorer nicht weit genug nach unten zieht"). Vorher 640px mit eigener Scrollleiste im Explorer. Die Liste links behält ihre Grenze - sie scrollt für sich. */ .inhalt-explorer-detail-pane{ padding:22px 24px; min-width:0; } @media (max-width:760px){ .inhalt-explorer-anzeige.hat-liste{ grid-template-columns:1fr; } .inhalt-explorer-liste-pane{ border-right:none; border-bottom:1px solid var(--border); max-height:220px; flex-direction:row; flex-wrap:wrap; } } /* Ort unter dem kurzen Namen (2026-09-11): „Schatztruhe #1" / „in Mitra". */ .inhalt-karte-ort{ margin:2px 0 0; font-size:13px; color:var(--text-2); } .inhalt-karte-ort a{ color:var(--akzent); text-decoration:none; } .inhalt-karte-ort a:hover{ text-decoration:underline; } /* Builder: Schätze je Ort gruppiert, Ortsauswahl für Truhen (2026-09-11). */ .builder-eintrag-gruppe{ margin:0 0 6px; border:1px solid var(--border); border-radius:var(--radius-klein); } .builder-eintrag-gruppe > summary{ display:flex; align-items:center; gap:8px; padding:7px 10px; list-style:none; cursor:pointer; font-size:13px; font-weight:600; } .builder-eintrag-gruppe > summary::-webkit-details-marker{ display:none; } .builder-eintrag-gruppe > summary::before{ content:'▸'; font-size:11px; color:var(--text-2); } .builder-eintrag-gruppe[open] > summary::before{ content:'▾'; } .builder-eintrag-gruppe-zahl{ margin-left:auto; font-size:11px; font-weight:500; color:var(--text-2); } .builder-eintrag-gruppe-liste{ padding:0 6px 6px 16px; } .builder-beziehung-zeile-truhenort{ flex:1 1 150px; min-width:0; font-size:12.5px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); } /* --------------------------------------------------------------------------- DETAILKARTE IM EXPLORER (2026-09-08, Nutzerkorrektur: "das muss jetzt noch professioneller dargestellt werden ... noch sieht es so 0815 aus") --------------------------------------------------------------------------- Vorher hatte `.inhalt-karte` selbst gar keine eigene Flaeche - sie sass als reiner Inhalt im Innenabstand ihres Rahmens (`.inhalt-explorer-detail-pane`), ohne Kante, ohne Tiefe. Jetzt hat sie eine eigene Flaeche mit Kante. 2026-09-11 zurueckgenommen (Betreiberwunsch): die Farbe JE GRUPPE (Farbstreifen oben, `.ist-figuren` usw.) - ein Zauber violett, ein Ort gruen, ein Gegenstand blau. Die Karte traegt jetzt durchgehend den Akzent des Portals (`--gruppen-farbe` ist hier nirgends gesetzt, jede Regel faellt auf `--akzent` zurueck). Entity Card und Builder-Typ-Hero behalten ihre Gruppenfarben. */ .inhalt-karte{ position:relative; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius-gross); padding:22px 24px 24px; overflow:hidden; } .inhalt-karte-kopf{ margin-bottom:16px; } /* „Schon gesehen?" oben rechts in der Karte (2026-09-11, Betreiber) - der Kurztext folgt direkt unter dem Namen. */ .inhalt-karte-kopf .karte-haken{ position:absolute; top:22px; right:24px; margin-top:0; } .inhalt-karte-kopf:has(.karte-haken) .inhalt-karte-name{ padding-right:150px; } @media (max-width:560px){ .inhalt-karte-kopf:has(.karte-haken) .inhalt-karte-name{ padding-right:0; margin-top:18px; } } .inhalt-karte-typ{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-rund); background:color-mix(in srgb, var(--gruppen-farbe, var(--akzent)) 16%, transparent); color:var(--gruppen-farbe, var(--akzent)); font-size:11.5px; font-weight:700; letter-spacing:.02em; } .inhalt-karte-name{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin:10px 0 4px; } .inhalt-karte-kurz{ font-size:13.5px; color:var(--text-2); margin:0; line-height:1.55; } .inhalt-karte-block{ padding-top:18px; margin-top:18px; border-top:1px solid var(--border); } .inhalt-karte-block:first-of-type{ border-top:none; padding-top:0; margin-top:0; } .inhalt-karte-block-titel{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); margin:0 0 10px; display:flex; align-items:center; gap:7px; } .inhalt-karte-text{ font-size:13.5px; line-height:1.65; margin:0; color:var(--text-2); } .inhalt-karte-taxo{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap; } .inhalt-karte-taxo .element-liste{ display:flex; flex-wrap:wrap; gap:5px; } /* Verweise auf andere Inhalte: laden in derselben Ansicht nach (kein Link). */ .inhalt-verweis-liste{ display:flex; flex-direction:column; gap:5px; } .inhalt-verweis{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 11px; border-radius:var(--radius-klein); cursor:pointer; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:13px; transition:border-color .15s ease, color .15s ease; } .inhalt-verweis:hover{ border-color:var(--akzent); color:var(--akzent); } .inhalt-verweis-icon{ display:flex; color:var(--akzent); flex:0 0 auto; } .inhalt-verweis-name{ flex:1; min-width:0; } .inhalt-verweis-zusatz{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-2); background:var(--oberflaeche); border:1px solid var(--border); border-radius:5px; padding:2px 7px; flex:0 0 auto; white-space:nowrap; } .spielzeile-chip{ font-size:11px; padding:3px 10px; border-radius:var(--radius-rund); background:var(--bg); border:1px solid var(--border); color:var(--text-2); transition:border-color .15s ease, color .15s ease; } .spielzeile-chip-plattform{ font-family:'IBM Plex Mono',monospace; } .spielzeile-rechts{ flex:0 0 auto; display:flex; align-items:center; gap:14px; } .spielzeile-rating{ font-size:13px; font-weight:600; color:#FACC15; white-space:nowrap; } .spielzeile-pfeil{ color:var(--text-2); flex:0 0 auto; } .spielzeile:hover .spielzeile-pfeil{ color:var(--akzent); } /* Spiel-Detailseite: kein umschliessender Hero-Kasten mehr - der Titel sitzt direkt unter dem "ÜBERBLICK"-Label, wie eine normale Seiten- überschrift. Bewusst ohne Box/Schatten/3D: bei einem kurzen Testeintrag wie bei einem datenreichen Spiel sieht die Kopfzeile gleich aufgeräumt aus, weil hier nichts mehr "abgefüllt" werden muss. */ .spiel-ueberblick-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .spiel-titel{ font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 12px; color:var(--text); } .spiel-hero-chips{ display:flex; flex-wrap:wrap; gap:6px; } .spiel-hero-beschreibung{ font-size:14.5px; color:var(--text-2); line-height:1.65; margin:0 0 22px; max-width:68ch; } .spiel-plattform-zeile{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; margin:0 0 18px; box-shadow:0 1px 2px rgba(0,0,0,0.04); } .spiel-plattform-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; } .spiel-plattform-chips{ display:flex; flex-wrap:wrap; gap:6px; } @media (max-width:640px){ .showcase-raster{ grid-template-columns:1fr; } .showcase-titel-hero{ font-size:22px; } } /* ============================================================ Admin-Wizard (Spiel anlegen/bearbeiten - Schritt "Basis" des Gamebuilder-Studios, siehe auch .studio-* oben). Nutzt jetzt dieselben Design-Tokens wie der Rest der Seite (folgt also Hell-/Dunkelmodus) statt eines eigenen, fest verdrahteten Indigo/Purple-Themes - Auftrag "Gamebuilder Visual & UX": /admin/games/neu soll sich wie derselbe Studio-Builder anfuehlen, nicht wie ein Fremdkoerper. Alle Klassen mit Praefix admin-wizard-. ============================================================ */ .admin-wizard-section{ max-width:760px; margin:0 auto; padding:32px 24px 48px; } .admin-wizard-page-title{ color:var(--text); font-size:22px; font-weight:700; margin:0 0 16px; } /* Container-Karte */ .admin-wizard-container{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.12); color:var(--text); } :root[data-theme="dunkel"] .admin-wizard-container{ box-shadow:0 20px 50px rgba(0,0,0,0.45); } /* Header + Fortschrittsanzeige */ .admin-wizard-header{ background:var(--bg); padding:24px 28px; border-bottom:1px solid var(--border); } .admin-wizard-title{ font-size:22px; font-weight:700; margin:0 0 20px; color:var(--text); } /* Progress Steps mit Verbindungslinie - dieselbe Symbolsprache (Nummer statt reiner Farbcode) wie .studio-fortschritt im Builder. */ .admin-wizard-progress{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; } .admin-wizard-progress-track{ position:absolute; left:0; top:16px; width:100%; height:2px; background:var(--border); border-radius:var(--radius-rund); z-index:0; } .admin-wizard-progress-bar{ position:absolute; left:0; top:16px; width:0%; height:2px; background:var(--akzent); border-radius:var(--radius-rund); z-index:0; transition:width .3s ease; } .admin-wizard-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; flex:1; } .admin-wizard-step-circle{ width:32px; height:32px; border-radius:50%; background:var(--oberflaeche); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'IBM Plex Mono',monospace; border:3px solid var(--bg); transition:background-color .25s ease, color .25s ease; } .admin-wizard-step-circle.is-active{ background:var(--akzent); color:var(--bg); } .admin-wizard-step-label{ margin-top:6px; font-size:10.5px; color:var(--text-2); text-align:center; text-transform:uppercase; letter-spacing:.05em; transition:color .25s ease; white-space:nowrap; } .admin-wizard-step-label.is-active{ color:var(--akzent); font-weight:600; } /* Schritt-Inhalt ein-/ausblenden */ .admin-wizard-step-content{ display:none; } .admin-wizard-step-content.active{ display:block; animation:admin-wizard-fadeIn .4s ease-in-out; } @keyframes admin-wizard-fadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .admin-wizard-step-content.active{ animation:none; } } .admin-wizard-body{ padding:28px; } .admin-wizard-step-heading{ font-size:18px; font-weight:700; color:var(--text); margin:0 0 20px; } /* Hilfsklassen */ .admin-wizard-is-hidden, .admin-wizard .is-hidden{ display:none !important; } .admin-wizard-container .is-hidden{ display:none !important; } .is-hidden{ display:none !important; } .admin-wizard-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Sektionen innerhalb eines Schritts */ .admin-wizard-section{ padding-top:20px; margin-top:20px; border-top:1px solid var(--border); } .admin-wizard-section:first-child{ border-top:none; margin-top:0; padding-top:0; } .admin-wizard-label{ display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:10px; } .admin-wizard-hint{ font-size:12.5px; color:var(--text-2); margin:8px 0 0; } /* Grid-Layouts */ .admin-wizard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .admin-wizard-grid-3{ grid-template-columns:repeat(3,1fr); } .admin-wizard-grid-2{ grid-template-columns:1fr 1fr; } .admin-wizard-field{ display:flex; flex-direction:column; gap:6px; } .admin-wizard-field > span{ font-size:13px; font-weight:500; color:var(--text-2); } .admin-wizard-field-full{ grid-column:1 / -1; } .admin-wizard-field-row{ flex-direction:row; align-items:center; gap:8px; } .admin-wizard-field-row > span{ font-size:14px; color:var(--text); } /* Eingabefelder */ .admin-wizard-input{ width:100%; padding:11px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-klein); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease; } .admin-wizard-input::placeholder{ color:var(--text-2); opacity:.7; } .admin-wizard-input:focus{ outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 20%, transparent); } textarea.admin-wizard-input{ resize:vertical; min-height:90px; } /* Selects */ .admin-wizard-select{ width:100%; padding:11px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-klein); color:var(--text); font-size:14px; font-family:inherit; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238B90A3' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; } .admin-wizard-select:focus{ outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 20%, transparent); } .admin-wizard-select option{ background:var(--bg); color:var(--text); } /* Custom-Input (fuer "Anderes"-Option) */ .admin-wizard-custom-input{ width:100%; margin-top:8px; padding:10px 14px; background:var(--oberflaeche); border:1px solid var(--akzent); border-radius:var(--radius-klein); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s ease; } .admin-wizard-custom-input:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 25%, transparent); } /* Glass-Badges fuer Releases */ .admin-wizard-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .admin-wizard-glass-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-rund); background:var(--oberflaeche); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:500; } .admin-wizard-badge-remove{ background:none; border:none; color:var(--text-2); cursor:pointer; font-size:16px; line-height:1; padding:0 0 0 2px; transition:color .15s ease; } .admin-wizard-badge-remove:hover{ color:var(--fehler); } /* Release hinzufuegen Zeile */ .admin-wizard-release-add{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; } .admin-wizard-release-add .admin-wizard-select, .admin-wizard-release-add .admin-wizard-input{ flex:1 1 120px; min-width:120px; } .admin-wizard-release-add .admin-wizard-btn-secondary{ flex:0 0 auto; } /* Buttons */ .admin-wizard-btn-secondary{ padding:10px 16px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-klein); font-size:13.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:background-color .15s ease, border-color .15s ease; } .admin-wizard-btn-secondary:hover{ border-color:var(--akzent); color:var(--akzent); } .admin-wizard-btn-ghost{ padding:10px 18px; background:transparent; color:var(--text-2); border:1px solid var(--border); border-radius:var(--radius-klein); font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; transition:background-color .15s ease, color .15s ease; } .admin-wizard-btn-ghost:hover{ background:var(--bg); color:var(--text); } .admin-wizard-btn-next{ padding:11px 22px; background:var(--akzent); color:var(--bg); border:1px solid var(--akzent); border-radius:var(--radius-klein); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:filter .15s ease; } .admin-wizard-btn-next:hover{ filter:brightness(0.92); } /* Speichern-Button - klar erkennbare Primäraktion, ohne 3D-/Glow-Gimmick */ .admin-wizard-btn-3d{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 26px; border-radius:var(--radius-klein); background:var(--akzent); color:var(--bg); border:1px solid var(--akzent); font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .15s ease; } .admin-wizard-btn-3d:hover{ filter:brightness(0.92); } /* Footer / Navigation */ .admin-wizard-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--bg); padding:20px 28px; border-top:1px solid var(--border); } .admin-wizard-footer-right{ margin-left:auto; display:flex; gap:12px; } /* Tags-Grid (Checkbox-Grid, 3 Spalten) */ .admin-wizard-tag-add{ display:flex; gap:8px; margin-bottom:16px; } .admin-wizard-tag-add .admin-wizard-input{ flex:1 1 auto; } .admin-wizard-tag-add .admin-wizard-btn-secondary{ flex:0 0 auto; } .admin-wizard-tags-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .admin-wizard-tag-item{ display:flex; align-items:center; gap:8px; background:var(--bg); padding:9px 11px; border-radius:var(--radius-klein); border:1px solid var(--border); cursor:pointer; font-size:13px; color:var(--text); transition:border-color .15s ease, background-color .15s ease; } .admin-wizard-tag-item:hover{ border-color:var(--akzent); } .admin-wizard-tag-item input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--akzent); cursor:pointer; flex:0 0 auto; } .admin-wizard-tag-item input[type="checkbox"]:checked + span{ color:var(--akzent); font-weight:500; } /* Dynamisch hinzugefuegte Tags (akzentuiert) */ .admin-wizard-tag-custom{ background:color-mix(in srgb, var(--akzent) 12%, transparent); border-color:color-mix(in srgb, var(--akzent) 50%, transparent); animation:admin-wizard-fadeIn .3s ease-in-out; } .admin-wizard-tag-custom span{ color:var(--akzent); font-weight:500; } @media (prefers-reduced-motion: reduce){ .admin-wizard-tag-custom{ animation:none; } } /* Externe Formulare unter dem Wizard (Bewertung, SEO) */ .admin-wizard-extra{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); padding:24px 28px; margin-top:28px; color:var(--text); } .admin-wizard-extra-title{ font-size:18px; font-weight:700; color:var(--text); margin:0 0 8px; } .admin-wizard-extra-form{ display:flex; flex-direction:column; gap:14px; margin-top:16px; } /* Responsive */ @media (max-width:640px){ .admin-wizard-grid, .admin-wizard-grid-2, .admin-wizard-grid-3, .admin-wizard-tags-grid{ grid-template-columns:1fr; } .admin-wizard-tags-grid{ grid-template-columns:1fr 1fr; } .admin-wizard-footer{ flex-direction:column; align-items:stretch; } .admin-wizard-footer-right{ margin-left:0; flex-direction:column-reverse; } .admin-wizard-btn-next, .admin-wizard-btn-3d{ width:100%; } .admin-wizard-step-label{ font-size:10px; } } /* ========================================================================== Spiel-Detailseite: eigenstaendige dunkle "RPG-Hub"-Optik mit warmen Gold-/ Bronze-Akzenten statt der Standard-Markenfarbe Blau - nur auf dieser Seite (Klasse .spiel-detail-neu), unabhaengig vom Hell/Dunkel-Toggle des restlichen Portals. Ueberschreibt nur die Design-Tokens; alle bereits bestehenden Komponenten (.karte, .stat-karte, .btn, .spiel-abschnitt-titel, .inhalt-explorer* usw.) nutzen intern var(--akzent)/var(--oberflaeche)/... und uebernehmen die neue Optik dadurch automatisch, ohne dass jede Regel einzeln dupliziert werden muss. Reine Eigenkreation (kein Referenzbild- Layout, keine fremden Farben/Assets uebernommen), keine Bilder noetig. Hoehere Spezifitaet als die :root[data-theme] Bloecke oben, damit die Seite immer dunkel+gold bleibt, egal welches Seiten-Theme aktiv ist. ---- */ /* ========================================================================= DIE SPIELSEITE IST KEINE INSEL MEHR ========================================================================= Hier stand eine ZWEITE Palette: `--bg:#15110B`, `--akzent:#D7A34C`, `--border:#3C3120` - eigene Braun-Gold-Werte, die die Tokens der Seite ueberschrieben, und zwar mit hoeherer Spezifitaet als die :root[data-theme]-Bloecke. Der Kommentar dazu sagte offen, warum: "damit die Seite immer dunkel+gold bleibt, egal welches Seiten-Theme aktiv ist". Das war richtig, solange das Portal blau war. Die Spielseite sollte etwas Besonderes sein, und sie war die einzige Stelle mit Gold. Jetzt ist das ganze Portal dunkel und gold. Damit dreht sich die Wirkung um, gleich zweifach: 1. #15110B (Braun) neben #0B0D14 (Tinte) sind ZWEI dunkle Toene mit verschiedener Temperatur. Wer von der Startseite auf ein Spiel klickt, sieht nicht eine besondere Seite - er sieht eine andere Website. 2. Die Ueberschreibung hebelte den Hell-Umschalter aus. Wer auf Hell stellt, bekam ueberall Papier und auf der Spielseite Braun. Das ist kein Kunstgriff, das ist ein Schalter, der nicht tut, was draufsteht. Was bleibt, ist die Atmosphaere: der Lichtschein oben links, der Rahmen, der Schatten. Was geht, sind die Farben - die kommen jetzt von der Seite. Die Spielseite ist damit weiterhin die aufwendigste Seite des Portals, aber sie gehoert dazu. ========================================================================= */ .spiel-detail-neu{ background: /* Ein Lichtschein oben links, als faele Licht auf eine aufgeschlagene Seite. `--akzent` statt eines festen Goldes: Im hellen Modus wird daraus derselbe Schein in gedecktem Gold, statt eines braunen Flecks auf Papier. */ radial-gradient(1200px 400px at 15% -10%, color-mix(in srgb, var(--akzent) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--oberflaeche) 0%, var(--bg) 100%); color:var(--text); border:1px solid var(--kante-gold); border-radius:var(--radius-gross); padding:clamp(22px,3.5vw,40px) clamp(18px,4vw,44px) 48px; box-shadow:var(--erhebung-hoch); } /* Ueberschrift-Bereich: groesser, mit dezentem Gold-Farbverlauf im Titel statt reiner Textfarbe - wirkt hochwertiger, bleibt aber Text (kein Bild). */ /* Der Titel traegt einen Goldverlauf. Die drei festen Stufen waren auf dunklen Grund gerechnet; auf Papier waere der hellste (#F3E6C8) fast unsichtbar. `color-mix` gegen die Textfarbe des Modus loest das: dunkel wird der Verlauf heller, hell wird er tiefer. */ .spiel-detail-neu .spiel-titel{ font-size:clamp(30px,3.6vw,46px); background:linear-gradient(135deg, color-mix(in srgb, var(--akzent) 45%, var(--text)) 0%, var(--akzent) 55%, var(--akzent-tief) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .spiel-detail-neu .abschnitt-label{ color:var(--akzent); letter-spacing:.08em; } /* Karten/Panels: minimal transparente Flaechen auf dem dunklen Hintergrund statt deckendem Grau, mit gedaempftem Gold-Rand statt neutralem Grau. */ .spiel-detail-neu .karte, .spiel-detail-neu .stat-karte, .spiel-detail-neu .bewertung-block, .spiel-detail-neu .fortschritt-widget, .spiel-detail-neu .spiel-plattform-zeile, /* `rgba(255,255,255,.025)` hellt auf - auf Papier waere das ein weisser Fleck auf Weiss, also nichts. `--oberflaeche-2` ist in beiden Modi die naechste Stufe ueber der Flaeche. */ .spiel-detail-neu .inhalt-explorer-anzeige{ background:var(--oberflaeche-2); border-color:var(--border); } .spiel-detail-neu .karte:hover{ border-color:color-mix(in srgb, var(--akzent) 45%, var(--border)); box-shadow:var(--erhebung-hoch); } .spiel-detail-neu .karte-mit-icon-badge{ background:color-mix(in srgb, var(--akzent) 12%, transparent); } .spiel-detail-neu .karte:hover .karte-mit-icon-badge{ background:color-mix(in srgb, var(--akzent) 22%, transparent); } /* Primaerer Button: Gold-Verlauf statt Flaechenfarbe, dunkler Text fuer ausreichend Kontrast auf hellem Gold (WCAG-tauglicher als weiss auf Gold). */ .spiel-detail-neu .btn:not(.btn-sekundaer){ background:linear-gradient(135deg, var(--akzent), var(--akzent-tief)); color:var(--bg); font-weight:700; } .spiel-detail-neu .btn-sekundaer:hover{ border-color:var(--akzent); color:var(--akzent); } .spiel-detail-neu .spielzeile-chip{ background:var(--oberflaeche-2); } .spiel-detail-neu .spielzeile-chip-plattform{ color:var(--text-2); } .spiel-detail-neu .showcase-glass-badge{ background:var(--oberflaeche-2); border-color:var(--border); } .spiel-detail-neu .inhalt-explorer-tab.ist-aktiv{ background:linear-gradient(135deg, var(--akzent), var(--akzent-tief)); border-color:transparent; color:var(--bg); } .spiel-detail-neu .inhalt-explorer-listen-eintrag.ist-aktiv{ background:color-mix(in srgb, var(--akzent) 14%, transparent); } .spiel-detail-neu .abschnitt-trenner{ background:linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent); } .spiel-detail-neu .stat-wert-zahl{ color:var(--akzent); } .spiel-detail-neu a{ color:var(--akzent); } .spiel-detail-neu .hinweis{ color:var(--text-2); } /* --- HERO (rein typografisch, ohne Coverart/Hintergrundbild) ------------ */ /* ========================================================================= DIE BEGRENZUNG GEHOERT AN DEN TEXT, NICHT AN DEN BEHAELTER ========================================================================= Hier stand `max-width:900px` am ganzen Hero. Sinnvoll war das fuer den TEXT darin: Titel und Beschreibung sollen nicht ueber die halbe Seite laufen. Seit die Eckdaten im Hero stehen, deckelt dieselbe Zahl auch sie - und damit stand der komplette Block mit Entwickler, Spielzeit, Plattformen und Beschreibung in der linken Haelfte der Seite, waehrend rechts daneben nichts war. Bei einem breiten Fenster war das der groessere Teil. Die Begrenzung sitzt jetzt an den einzelnen Textstuecken. Der Behaelter nimmt die volle Breite, und was darin breit sein darf, entscheidet jedes Element fuer sich. ========================================================================= */ /* ========================================================================= DER HERO IST ZWEISPALTIG - LINKS DER KOPF, RECHTS DER TEXT ========================================================================= Links alles, was das Spiel benennt: Reihe, Titel, Einleitung, Hinweise, Knoepfe und die Eckdaten. Rechts die Beschreibung, von oben an - auf Hoehe des Titels. Die Teilung sass vorher eine Ebene tiefer, in den Eckdaten. Das hatte zwei Folgen: Die Beschreibung begann erst auf halber Hoehe der Seite, und die Werteliste musste sich die linke Haelfte mit ihr teilen. `minmax(0, 1.15fr) minmax(0, 1fr)`: Links etwas mehr, weil dort die Plattform-Plaketten stehen und in zwei Zeilen umbrechen sollen statt in vier. Nicht viel mehr - der Text rechts soll keine Randspalte werden. ========================================================================= */ .spiel-detail-neu .spiel-hero{ margin-bottom:28px; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:0 clamp(32px, 4vw, 64px); align-items:start; } .spiel-hero-links{ min-width:0; } /* ---- Die Beschreibung rechts ---------------------------------------------- --------------------------------------------------------------------------- DIE LINIE LAEUFT DURCH, DER TEXT STEHT MITTIG --------------------------------------------------------------------------- Zwei Dinge, die sich widersprechen wuerden, wenn man sie am selben Element loest: - Die Trennlinie soll die volle Hoehe des Kopfes haben - von der Ueberzeile bis unter die Plattform-Plaketten. - Der Text soll darin mittig stehen, weil er kuerzer ist als die Spalte links. `align-self:stretch` zieht die Spalte auf die volle Hoehe (dort sitzt die Linie), und `display:flex` mit `align-items:center` zentriert den Text DARIN. Ein einzelnes Element mit `align-items:center` am Raster haette die Spalte auf Texthoehe geschrumpft - und die Linie mit ihr. --------------------------------------------------------------------------- */ .spiel-hero-rechts{ min-width:0; align-self:stretch; display:flex; /* ----------------------------------------------------------------- OBEN VERANKERT STATT MITTIG ----------------------------------------------------------------- Hier stand `align-items:center`. Mittig ist eine Position, die vom INHALT abhaengt: Ein kurzer Text rutscht tief, ein langer fuellt die Spalte. Zwei Spiele nebeneinander haetten ihre Beschreibung auf verschiedener Hoehe - und beim Blaettern springt sie. Oben verankert mit einem festen Abstand ist die Hoehe immer dieselbe. Der Abstand bringt die erste Zeile etwa auf die Hoehe des Titels, nicht der Ueberzeile darueber - der Text soll neben dem Namen beginnen, nicht neben der Reihe. ----------------------------------------------------------------- */ align-items:flex-start; padding-top:clamp(20px, 2.6vw, 48px); padding-left:clamp(28px, 3.4vw, 56px); border-left:1px solid var(--kante-gold); } /* ---- Der Text -------------------------------------------------------------- Etwas groesser und luftiger als der Fliesstext sonst: Er steht neben einem grossen Titel und wuerde daneben gedrungen wirken, haette er dieselbe Groesse wie ein Absatz in einer Kachel. `text-wrap:pretty` verhindert einzelne Woerter in der letzten Zeile. Wo der Browser es nicht kennt, aendert sich nichts. --------------------------------------------------------------------------- */ .spiel-hero-rechts .spiel-beschreibung{ font-size:15.5px; line-height:1.8; color:var(--text-2); text-wrap:pretty; } .spiel-hero-rechts .spiel-beschreibung p{ margin:0 0 1.15em; } .spiel-hero-rechts .spiel-beschreibung p:last-child{ margin-bottom:0; } /* Der erste Absatz traegt die Hauptaussage - er steht heller und eine Spur groesser. Das ist der ganze Unterschied zwischen „ein Textblock" und „ein Text, den jemand gesetzt hat". Erst jetzt greift diese Regel: Vorher erzeugte `nl2br()` nur
-Paare, und ein `p:first-child` fand nichts vor. */ .spiel-hero-rechts .spiel-beschreibung p:first-child{ color:var(--text); font-size:16.5px; line-height:1.7; } @media (max-width: 1100px){ /* Untereinander: Zwei Spalten unter 1100px sind zwei zu schmale Spalten. Die Linie wandert nach oben - senkrecht zwischen zwei gestapelten Bloecken waere sie ein Strich ins Leere. */ .spiel-detail-neu .spiel-hero{ grid-template-columns:1fr; gap:28px 0; } .spiel-hero-rechts{ align-self:auto; display:block; padding-left:0; padding-top:24px; border-left:none; border-top:1px solid var(--kante-gold); } } /* Titel und Einleitung behalten ihre Lesebreite - sie ist der Grund, aus dem die 900px ueberhaupt dastanden. */ .spiel-detail-neu .spiel-hero > .spiel-titel, .spiel-detail-neu .spiel-hero > .abschnitt-label, .spiel-detail-neu .spiel-hero > .spiel-hero-beschreibung{ max-width:900px; } .spiel-hero-kicker{ /* Traegt jetzt die Reihe statt der Genres - siehe die Vorlage. */ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; color:var(--akzent); text-transform:uppercase; letter-spacing:.1em; } .spiel-detail-neu .spiel-hero-beschreibung{ margin:14px 0 18px; } .spiel-hero-meta{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:18px; } .spiel-hero-meta-eintrag{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text-2); } .spiel-hero-meta-eintrag svg{ color:var(--akzent); flex:0 0 auto; } .spiel-hero-firmen{ display:flex; flex-wrap:wrap; gap:36px; margin-bottom:18px; } .spiel-hero-firmen > div{ display:flex; flex-direction:column; gap:3px; } .spiel-hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } /* Pills farblich nach Bedeutung differenziert (eigene Palette, aus den vorhandenen Tokens abgeleitet) - macht die Kernmerkmale auf einen Blick unterscheidbar, statt vier identische graue Chips zu zeigen. */ .spiel-pill{ font-size:12px; font-weight:600; padding:5px 13px; border-radius:var(--radius-rund); border:1px solid; background:transparent; } .spiel-pill-genre{ color:var(--akzent); border-color:color-mix(in srgb, var(--akzent) 45%, transparent); background:color-mix(in srgb, var(--akzent) 10%, transparent); } .spiel-pill-welt{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 45%, transparent); background:color-mix(in srgb, var(--erfolg) 10%, transparent); } .spiel-pill-story{ color:var(--text); border-color:var(--border); background:rgba(255,255,255,.04); } .spiel-pill-schwer{ color:var(--fehler); border-color:color-mix(in srgb, var(--fehler) 45%, transparent); background:color-mix(in srgb, var(--fehler) 10%, transparent); } .spiel-detail-neu .spiel-hero-aktionen{ display:flex; flex-wrap:wrap; gap:10px; } /* --- Panels: jeder Abschnitt sitzt in einem eigenen Kasten mit Kapitaelchen-Titel (Struktur wie in der Bildvorlage, eigene Optik). --- */ .spiel-panel{ background:var(--oberflaeche); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--erhebung); padding:20px 22px; margin-bottom:20px; } /* Die Trennlinie unter dem Titel bekommt einen Goldstich - sie ist die einzige Linie, die auf jeder Kachel vorkommt, und traegt deshalb das meiste Wiedererkennen bei geringstem Aufwand. */ .spiel-panel-titel{ font-family:var(--schrift-mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text); margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--kante-gold); } .spiel-panel-unterzeile{ font-size:12.5px; color:var(--text-2); margin:-8px 0 14px; } /* Gesamtzahl rechts im Panel-Titel (z.B. "600 Einträge" im RPG Explorer). */ .spiel-panel-titel{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .spiel-panel-titel-zahl{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--akzent); text-transform:none; flex:0 0 auto; font-variant-numeric:tabular-nums; } .spiel-panel-btn{ display:block; width:100%; text-align:center; margin-top:14px; } .spiel-panel-breit{ margin-top:8px; } /* Zwei-Spalten-"Hub": breite Hauptspalte (Profil, Bewertung, Explorer, Inhalte) links, schmale Sidebar (Spielwelt, Wissensgraph, Vergleichen) rechts - Anordnung wie in der Bildvorlage, eigene Gestaltung. */ /* --------------------------------------------------------------------- SEITENSPALTEN WACHSEN MIT, ABER LANGSAMER --------------------------------------------------------------------- Die Spalte stand fest auf 300px. Solange der Container 1280px breit war, stimmte das Verhaeltnis. Waechst er auf 2200px, ist die Seitenspalte ploetzlich ein Siebtel der Seite - die Fassungsliste bricht dort um, waehrend daneben eine Tabelle in einem sehr weiten Feld steht. `clamp(300px, 20vw, 460px)`: unten die bisherige Breite, damit sich auf einem 1280er-Schirm nichts aendert; oben eine Grenze, weil eine Seitenspalte ab einem gewissen Punkt keine Seitenspalte mehr ist. */ .spiel-hub-grid{ display:grid; gap:24px; align-items:start; grid-template-columns:minmax(0,1fr) clamp(300px, 20vw, 460px); } .spiel-hub-spalte{ min-width:0; } /* Obere Reihe der Hauptspalte: Profil-Tabelle und Bewertung nebeneinander. */ .spiel-hub-oben{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } .spiel-hub-oben > .spiel-panel{ margin-bottom:20px; } @media (max-width:960px){ .spiel-hub-grid{ grid-template-columns:1fr; } } /* Menge, Wahrscheinlichkeit, Wert - die Zahlen an einer Beziehung. Monospace und gedaempft: Sie stehen NEBEN dem Namen, nicht statt seiner. „Elixier 12,5 %" soll sich lesen wie ein Name mit einer Fussnote, nicht wie zwei gleichwertige Angaben. */ .inhalt-karte-angabe{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; } /* ---- Admin: Meldungen ----------------------------------------------------- */ .meldung-reiter{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; } .meldung-reiter a{ padding:8px 14px; border-radius:var(--radius-klein); font-size:13px; color:var(--text-2); border:1px solid transparent; } .meldung-reiter a:hover{ background:var(--oberflaeche-2); color:var(--text); } .meldung-reiter a.ist-aktiv{ color:var(--akzent); border-color:var(--kante-gold); background:color-mix(in srgb, var(--akzent) 9%, transparent); } .meldung-zahl{ font-family:var(--schrift-mono); font-size:11px; margin-left:5px; padding:1px 6px; border-radius:var(--radius-rund); background:var(--akzent); color:var(--bg); } .meldung-karte{ padding:16px 18px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--oberflaeche); } .meldung-kopf{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 10px; font-size:12.5px; color:var(--text-2); } .meldung-art{ padding:2px 9px; border-radius:var(--radius-rund); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--border); } /* „Stimmt nicht" ist der dringlichste Fall - dort steht etwas Falsches auf der Seite. „Fehlt" ist eine Luecke und kann warten. */ .meldung-art.ist-falsch{ color:var(--fehler); border-color:color-mix(in srgb, var(--fehler) 45%, var(--border)); } .meldung-art.ist-fehlt{ color:var(--warnung); } .meldung-feld{ font-family:var(--schrift-mono); font-size:11.5px; color:var(--akzent); } /* Der Eintrag ist geloescht, die Meldung nicht - das ist eine Auskunft, kein Fehler. Durchgestrichen sagt das ohne einen Satz. */ .meldung-weg{ text-decoration:line-through; } .meldung-konto{ font-family:var(--schrift-mono); font-size:11.5px; } .meldung-text{ margin:0 0 12px; font-size:14px; line-height:1.6; } .meldung-notiz{ margin:0 0 12px; padding:8px 12px; font-size:13px; border-left:2px solid var(--kante-gold); color:var(--text-2); } .meldung-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .meldung-form input[type="text"]{ flex:1 1 240px; min-width:0; } /* ---- Melden: der Weg von aussen nach innen ------------------------------- Ein leeres Feld ist ein Mangel. Eine benannte Luecke ist eine Aufgabe. */ .melden{ margin-top:32px; padding-top:20px; border-top:1px solid var(--border); } /* Die Luecke wird beim Namen genannt - in Gold, nicht in Rot. Es ist keine Fehlermeldung, sondern eine Einladung. */ .melden-luecke{ margin:0 0 12px; padding:11px 14px; border:1px solid var(--kante-gold); border-radius:var(--radius-klein); background:color-mix(in srgb, var(--akzent) 7%, transparent); font-size:13.5px; } /* Zugeklappt kostet es eine Zeile. Die allermeisten Besucher wollen lesen, nicht melden - ein offenes Textfeld unter jedem Eintrag waere eine Aufforderung an alle fuer die Wenigen, die etwas zu sagen haben. */ .melden-klapp > summary{ cursor:pointer; font-size:13.5px; color:var(--text-2); padding:8px 0; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .melden-klapp > summary::-webkit-details-marker{ display:none; } .melden-klapp > summary::before{ content:'+'; color:var(--akzent); font-weight:700; } .melden-klapp[open] > summary::before{ content:'−'; } .melden-klapp > summary:hover{ color:var(--text); } /* Wie viele Hinweise schon vorliegen. Das ist die Frage, die sonst jeder zweite Melder stellt - sie hier zu beantworten spart Doppelmeldungen. */ .melden-offen{ font-family:var(--schrift-mono); font-size:11px; color:var(--akzent); padding:2px 8px; border-radius:var(--radius-rund); border:1px solid var(--kante-gold); } .melden-form{ display:flex; flex-direction:column; gap:4px; margin-top:12px; max-width:640px; } .melden-form label{ font-size:12.5px; color:var(--text-2); margin-top:8px; } .melden-fuss{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; } .melden-antwort{ margin:0 0 12px; padding:10px 14px; border-radius:var(--radius-klein); font-size:13.5px; border:1px solid var(--border); } .melden-antwort.ist-gut{ color:var(--erfolg); border-color:color-mix(in srgb, var(--erfolg) 35%, var(--border)); background:color-mix(in srgb, var(--erfolg) 8%, transparent); } .melden-antwort.ist-schwer{ color:var(--fehler); border-color:color-mix(in srgb, var(--fehler) 35%, var(--border)); background:color-mix(in srgb, var(--fehler) 8%, transparent); } .melden-antwort.ist-neutral{ color:var(--text-2); } /* ---- Seit deinem letzten Besuch ------------------------------------------ Der woechentliche Anstoss ohne Postfach: Es gibt keinen Cron auf diesem Webspace, und eine Mail braechte Einwilligung, Abmeldung und Zustellung als dauerhaften Betrieb mit sich. Die Goldkante links macht den Kasten zur Ansprache statt zu einem weiteren Block - er redet den Leser an, die anderen berichten. */ /* Der Kasten stand nur an einer Goldkante. Er ist der Grund, aus dem jemand ueberhaupt wiederkommt - er darf eine Flaeche haben. */ .seit-besuch{ border:1px solid var(--kante-gold); border-left-width:3px; border-radius:var(--radius); background:color-mix(in srgb, var(--akzent) 5%, var(--oberflaeche)); box-shadow:var(--erhebung); } /* Das Polster steht hier und nicht in der Kurzform oben: `.gemeinde-block` setzt `padding-top:30px` und steht spaeter in der Datei - bei gleicher Staerke gewinnt der spaetere. Oben waeren 20px oben und 22px seitlich geworden zu 30px oben und 22px seitlich. Zwei Klassen schlagen eine. */ .gemeinde-block.seit-besuch{ border-top:1px solid var(--kante-gold); padding:20px 22px; } .seit-besuch-liste{ list-style:none; padding:0; margin:0; } .seit-besuch-liste li{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; } .seit-besuch-liste li:last-child{ border-bottom:none; } .seit-besuch-liste small{ font-size:12px; color:var(--text-2); } .seit-besuch-liste small.hinweis{ margin-left:auto; } /* ---- Bauplan -------------------------------------------------------------- Zutaten, und deren Zutaten. Die Verschachtelung ist eine