/* ===================================================================== Apewars – handgeschriebenes Stylesheet (kein Framework, kein Build). Modernes CSS: Custom Properties, Flexbox, Grid, clamp(). ===================================================================== */ :root { /* SCHRIFTSKALA. Fünf Stufen, aus denen gewählt wird – statt für jede Stelle eine neue Zahl zu erfinden. Am 18.08.2026 standen 38 verschiedene rem-Werte in dieser Datei, allein sechzehn davon zwischen 0,70 und 1,00. Solche Unterschiede sieht man einzeln nicht, in Summe wirken sie unruhig. Die Stufen sind bewusst weit auseinander (rund 15 % Abstand): Nur so ist ein Unterschied auch als Absicht erkennbar. Wer eine neue Größe braucht, nimmt die nächstgelegene Stufe – und wenn wirklich keine passt, ändert er die Skala hier, nicht die einzelne Regel. Neue Regeln nutzen var(--fs-*); die Altbestände werden nach und nach umgezogen. */ --fs-2xs: .625rem; /* 10px – Etiketten in Großbuchstaben mit weitem Zeichenabstand */ --fs-xs: .6875rem; /* 11px – Mikroschrift: Prozente unter Loot-Rahmen, Zähler */ --fs-s: .75rem; /* 12px – Kleintext: Kacheln, Hinweise, Fußzeilen */ --fs-m: .8125rem; /* 13px – dichter Text: Tabellen, Plaketten */ --fs-l: .875rem; /* 14px – STANDARD. Alles, was normaler Fließtext ist. */ --fs-xl: 1rem; /* 16px – hervorgehobene Zahlen, kleine Überschriften */ --fs-2xl: 1.25rem; /* 20px – große Zahlen (Bilanzen, Belohnungen) */ --fs-3xl: 1.75rem; /* 28px – Schaustücke: Titel der Startseite, Kampfergebnis */ /* ABSTAND ZWISCHEN FENSTERN – eine Zahl für die ganze Seite. --luecke ist der SICHTBARE Spalt. Gemessen wird aber von Rahmen zu Rahmen, und ein Titel- oder Reiter-Badge ragt über den oberen Kartenrand hinaus. Ohne Ausgleich blieben von 16px nur 5px übrig – deshalb --badge-ueber. Die 11px sind gemessen, nicht die -13px aus .card-title geschätzt: Der sichtbare Überstand fiel an 15 Karten auf 6 Seiten übereinstimmend auf 11px. */ --luecke: 1rem; /* GEOMETRIE DER PUPPE – eine Quelle für die Puppe UND die Kopfzeile darüber. Standen vorher nur im Media-Block bei .paperdoll; die Kopfzeile braucht dieselben Zahlen, um exakt so breit zu sein wie Charakterbild + Slots. --puppe-breite = Bild + 4 Slot-Spalten + die Lücken dazwischen: .eq-left/.eq-right haben je .3rem zwischen ihren beiden Spalten, .paperdoll .5rem zwischen den Blöcken, .char-center .15rem Rand. Die Fläschchen zählen NICHT mit – sie flankieren die Puppe außen. */ --char-h: 224px; /* gemessene Höhe UND Breite des Charakterbildes */ --eq-gap: .5rem; --puppe-breite: calc(var(--char-h) + 4 * (var(--char-h) - 2 * var(--eq-gap)) / 3 + 2 * (.3rem + .5rem + .15rem)); /* EIN Wert für den Abstand über UND unter der Kopfzeile. */ --kopf-luft: 10px; --badge-ueber: 11px; /* WIEDERKEHRENDE FARBEN. Kein neuer Ton, nur ein Name: Diese sieben standen zusammen 87-mal wörtlich im Blatt. Wer das Gold ändern will, ändert es sonst an 29 Stellen – und übersieht drei. Die Paare sind KEINE Dubletten, sondern zwei Untergründe: --gut gilt auf dunklem Grund, --gut-plakette auf der braunen Plakette (dort gemessene 8,69:1; der andere Ton käme auf 1,06:1 und wäre unsichtbar). Wer sie zusammenlegt, macht Text unlesbar – nicht bloß anders. */ --gold: #e0a020; /* Akzent: Rahmen, Hervorhebungen */ /* HELLES Gold auf dunklem Grund – Sterne, Zahlen, aktive Ränder, Hervorhebungen. Acht fast gleiche Töne standen dafür einzeln im Blatt (#ffd97a, #ffd23a, #ffc94a, #ffd24a, #ffd98a, #f0c060, #f4d9a0, #e8b84a). Alle lagen zwischen 10,0:1 und 13,6:1 auf dunkel, waren also nie aus Kontrastgründen verschieden – sie sind einfach nacheinander entstanden. */ --gold-hell: #ffd97a; --dunkel: #2b2620; /* Innenkante dunkler Kästen */ --tief: #17110a; /* tiefe Kante, Schattenlinie */ --gut: #7bd06a; /* positiv auf dunklem Grund */ --gut-plakette: #a6e86b; /* positiv auf brauner Plakette */ /* Positiv auf HELLEM Grund. Zwei Töne meinten das bisher: #1f5910 (Arena, Beute, Set-Liste) und #1f5214 (Statusstreifen). Dieser hier ist der bessere von beiden – gemessen 4,98:1 auf Pergament und 5,97:1 auf dem Statusstreifen gegen 4,54 und 5,44 des anderen. Unterscheiden konnte man sie ohnehin nicht. */ --gut-pergament: #1f5214; /* Gold für HELLEN Grund. --gold-hell (#ffd97a) ist fürs dunkle Braun gemacht und liegt auf Pergament bei 1,2:1. Gemessen: 5,4:1 auf dem Kartengrund, 4,6:1 auf der grün getönten Belohnungskachel. Gegenstück zu --gut-pergament. */ --gold-pergament: #6f4e0a; /* NEGATIV, Schrift auf DUNKLEM Grund. Der Wert kommt von #ff8a80, das an vier Stellen einzeln stand – es ist der bessere: 8,07:1 auf dunkel gegen 5,98:1 des früheren #ff5a4d. Zwei weitere Töne meinten dasselbe (#ff9a8f, #f08a7a) und sind hier aufgegangen; unterscheiden konnte man sie nicht. */ --schlecht: #ff8a80; /* NEGATIV auf HELLEM Grund (Pergament). Drei Werte meinten das: #8a2f27 (fünfmal, 4,50:1 – genau auf der Kante), #b8341f (dreimal, 3,19:1 – DURCHGEFALLEN, das war der „verloren"-Text im Kampfergebnis) und #7c2a1a (5,14:1). Der beste gewinnt. */ --schlecht-hell: #7c2a1a; /* NEGATIV auf der BRAUNEN PLAKETTE – Gegenstück zu --gut-plakette, gleiche Logik wie dort. Am echten Kostenknopf der Schamanenhütte gemessen (Grund rgb(90,63,34)): --schlecht (#ff8a80) kommt dort nur auf 4,24:1 und liegt damit unter der Schwelle, --schlecht-flaeche auf 1,82:1. Dieser Ton erreicht 4,98:1. */ --schlecht-plakette: #ffa199; --schlecht-flaeche: #b8443f; /* negativ, Fläche */ --sky: #141414; /* aus dem unteren Rand von img/bg.jpg gemessen (2026-08-12, neues Bild) */ --parch: #e8d5b7; --ink: #241a0e; --ink-soft: #6b5236; --wood: #6b4f2a; --holz-dunkel: #5a3f22; /* Holzrahmen und .btn.ghost – zweimal derselbe Wert */ /* Dunkle Plakette: gibt Schrift einen eigenen, gleichmäßigen Grund, wenn sie sonst auf Textur, Vignette oder Rahmenlaub läge. Kampfergebnis und Level-up-Feier. */ --plakette: linear-gradient(160deg, #322619, #1c140c); /* CHANCEN-SKALA der Dungeons (Siegaussicht). Eigene Rolle, kein Zufall: Jede Stufe steht zweimal im Blatt – einmal als Schrift, einmal als Rand der Plakette. Als Token ändert man sie an EINER Stelle, statt beide Vorkommen zu suchen. „leicht" fehlt hier bewusst: dort gilt das normale --gut. */ --chance-machbar: #c8d94a; --chance-riskant: #f0a03c; --chance-aus: #ff6b5c; /* Aktionsknopf. Der Ton ist 9 % dunkler als das ursprüngliche #4d9139: Weiß darauf kam auf 3,87:1 und lag damit unter dem Schwellwert 4,5:1 – die Knopfschrift ist 13px fett, die Ausnahme für Großschrift (ab 18,66px fett) greift nicht. Jetzt sind es 4,55:1, und der Unterschied ist mit bloßem Auge nicht zu sehen. */ --green: #468434; --green-d: #346927; /* Braune Box (Original: img/bg_braune_box.jpg). --box-bg = Mittelwert der Textur als Unterlage. Text darauf muss hell sein – .card definiert --ink/--ink-soft deshalb auf diese Werte um. */ --box-bg: #402f21; --box-ink: #eaddc4; --box-ink-soft: #bdab8e; /* 5.6:1 auf --box-bg; #a8957a lag mit 4.4 unter WCAG-AA */ /* Seltenheits-Palette – EINE Quelle für Slots, Tooltip und Schrift. *-glow = heller Verlauf (auf dunklem Slot/Tooltip), *-ink = dunklere, auf Pergament lesbare Schriftfarbe (gleicher Farbton). */ --rar1-glow: #7a6a4a; --r1: #4a3c22; --rar2-glow: #3767f9; --r2: #1f6f9c; --rar3-glow: #e6c200; --r3: #b07a00; --rar4-glow: #ca0797; --r4: #8a2fa0; --rar5-glow: #fa0605; --r5: #b8341f; /* Set-Ecke */ --set-green: #29da20; --set-orange: #e09120; --slot: 70px; /* native Item-/Slot-Größe */ /* Größe der 620px-Rahmenleinwand auf dem Bildschirm – die einzige Stellschraube je Rahmen. Größer = dickerer Rahmen, alles andere (Kanten, Füllung, Innenabstände) rechnet sich mit. */ --fc-main: 323px; /* Hauptfenster (.panel.pad-lg), Balken ~25px */ --fc-side: 103px; /* Seitenleisten-Kästen (.panel.pad), Balken ~9px */ } * { box-sizing: border-box; } html { -webkit-tap-highlight-color: transparent; } body { margin: 0; min-height: 100vh; color: var(--ink); /* STANDARDSCHRIFT. Alles ohne eigene Angabe erbt sie – normaler Fließtext braucht deshalb KEINE font-size-Regel. Wer für gewöhnlichen Text eine eigene Größe setzt, baut eine Sonderregel, die später niemand mehr begründen kann. Die rem-Werte bleiben an der 16px-Wurzel: So verändert eine Änderung hier nur die Schrift, nicht Abstände, Kastenbreiten und Rundungen. */ font-size: var(--fs-l); /* Bewusst NUR System-Schriften: nichts nachzuladen, kein externer Server, damit auch kein DSGVO-Thema. Die Liste deckt Windows, macOS/iOS, Android und Linux ab. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--sky); background-image: url('../img/bg.jpg'); background-repeat: no-repeat; background-position: top center; background-size: auto; /* volle Naturgröße, nichts verkleinern */ position: relative; overflow-x: hidden; /* kein horizontales Scrollen */ } img { max-width: 100%; } a { color: inherit; text-decoration: none; } /* --- Grund-Layout ---------------------------------------------------- */ .wrap { width: 100%; max-width: 1420px; margin: 0 auto; /* Gilt nur unter 1280px und ausgeloggt (eingeloggt setzt .in-game .wrap auf 0, am Desktop überschreibt die Regel weiter unten). Handy: volle Breite, kein Seitenrand. */ padding: clamp(60px, 11vw, 150px) 0 96px; } .cols { display: block; } .center-win { margin-inline: auto; } /* --- Fenster: Dschungel-Rahmen als Overlay ---------------------------- 4 Ecken + 4 Kanten als absolut positionierte Deko-Kinder ÜBER dem Panel, NICHT als border-image: border-image säße im Boxmodell und würde der Box Inhaltsfläche wegfressen. So behält .panel seine volle deklarierte Größe. Die acht Bilder sind ein echter 9-Slice (Betreiber-Export 2026-08-13, web/img/frame_main bzw. frame_side): alle liegen auf derselben quadratischen 620px-Leinwand, in der der Steinbalken überall an derselben Stelle sitzt. Ecke und Kante treffen sich dadurch von selbst – nachgemessen liegen die Nähte bei 0-1px, und zwar ohne dass irgendein Teil eigene Maße bekommt. Vorher trug jede Kante ihren eigenen Versatz und ihre eigene Dicke; das ist komplett entfallen. EINE Stellschraube pro Variante: --fc (Kantenlänge der Leinwand auf dem Bildschirm). Dazu je vier gemessene Anteile für Aussen- und Innenkante des Balkens (--o-* / --i-*, siehe .panel). Diese acht Zahlen beschreiben die GRAFIK, nicht den Geschmack – sie werden nur angefasst, wenn neue Bilder kommen. */ .panel { position: relative; z-index: 1; box-sizing: border-box; color: var(--ink); isolation: isolate; /* eigener Stacking-Context, damit z-index der Rahmenteile nicht mit der Seite kollidiert */ /* ABSTAND INHALT -> RAHMEN. Das sind die vier Zahlen zum Drehen; gesetzt werden sie je Variante unten bei .panel.pad-lg / .panel.pad. Untergrenze ist die Balkendicke, sonst liegt Text auf dem Stein: Hauptfenster 25px, Seitenleiste 9px. Nach oben ist alles erlaubt – je größer, desto weniger ragen die Ecken-Ornamente in den Inhalt. */ padding: var(--pad-oben) var(--pad-rechts) var(--pad-unten) var(--pad-links); } .panel > .content { position: relative; z-index: 1; } /* Helle Füllung: eigene Ebene, exakt auf den Balken-Versatz eingerückt (siehe .pad-lg/.pad unten) – sie endet damit an der Balken-Innenkante statt den ganzen Kasten zu füllen und neben dem Ecken-Ornament herauszublitzen. Bild füllt diese Ebene randlos; die Farbe dahinter deckt den Rest, wenn das Bild bei hohen Boxen unten nicht mehr hinreicht. Bild NICHT zusätzlich einrücken – dann klafft je nach --fc eine Lücke zwischen Balken und Pergament. #dcc39a ist die UNTERKANTE von pergament.jpg, aus dem Bild gemessen (nicht der Mittelwert!). Nur so ist der Übergang unsichtbar: Genau dort läuft das Bild aus und die Farbe übernimmt. Beim Bildtausch muss dieser Wert MIT nachgemessen werden, sonst zieht sich eine helle Kante quer durch hohe Boxen. NICHT var(--parch) nehmen – das Token hängt an Tooltips und Dialogen (Zeilen 240/266/281/397) und würde die mitverfärben. */ .frame-fill { position: absolute; z-index: 1; background: #dcc39a url('../img/pergament.jpg') no-repeat 0 0 / 100% auto; /* Endet an der Balken-INNENkante. Abstand zur Boxkante = Balkendicke, also (--i-* minus --o-*). 2px Überlappung unter den Stein, damit bei krummen Breiten kein Haarspalt aufgeht – die liegen auf deckendem Stein. */ top: calc(var(--fc) * (var(--i-t) - var(--o-t)) - 2px); right: calc(var(--fc) * (var(--i-r) - var(--o-r)) - 2px); bottom: calc(var(--fc) * (var(--i-b) - var(--o-b)) - 2px); left: calc(var(--fc) * (var(--i-l) - var(--o-l)) - 2px); } /* Ecken/Kanten: rein dekorativ, fangen keine Klicks, liegen ÜBER Füllung UND Inhalt (Ecken zusätzlich über den Kanten). Jedes Teil ist --fc gross und um --o-* nach AUSSEN versetzt – dadurch liegt die Balken-Aussenkante genau auf der Boxkante und die Ornamente ragen nach draussen, wie bei einem aufgelegten Rahmen. Die Kanten spannen exakt von Ecke zu Ecke: eine Ecke endet bei (1 - --o-*) x --fc. */ .frame-corner, .frame-edge { position: absolute; pointer-events: none; } .frame-corner { z-index: 3; width: var(--fc); height: var(--fc); background-size: 100% 100%; } .frame-edge { z-index: 2; } .frame-corner.tl { top: calc(var(--fc) * var(--o-t) * -1); left: calc(var(--fc) * var(--o-l) * -1); } .frame-corner.tr { top: calc(var(--fc) * var(--o-t) * -1); right: calc(var(--fc) * var(--o-r) * -1); } .frame-corner.bl { bottom: calc(var(--fc) * var(--o-b) * -1); left: calc(var(--fc) * var(--o-l) * -1); } .frame-corner.br { bottom: calc(var(--fc) * var(--o-b) * -1); right: calc(var(--fc) * var(--o-r) * -1); } .frame-edge.top, .frame-edge.bottom { height: var(--fc); background-repeat: repeat-x; background-size: auto 100%; left: calc(var(--fc) * (1 - var(--o-l))); right: calc(var(--fc) * (1 - var(--o-r))); } .frame-edge.top { top: calc(var(--fc) * var(--o-t) * -1); } .frame-edge.bottom { bottom: calc(var(--fc) * var(--o-b) * -1); } .frame-edge.left, .frame-edge.right { width: var(--fc); background-repeat: repeat-y; background-size: 100% auto; top: calc(var(--fc) * (1 - var(--o-t))); bottom: calc(var(--fc) * (1 - var(--o-b))); } .frame-edge.left { left: calc(var(--fc) * var(--o-l) * -1); } .frame-edge.right { right: calc(var(--fc) * var(--o-r) * -1); } /* Haupt-Fenster (Mitte): der dickere der beiden Rahmen. */ .panel.pad-lg { --fc: var(--fc-main); /* Grafik-Messwerte, NICHT zum Drehen – nur anfassen, wenn neue Bilder kommen. */ --o-t: .4323; --o-r: .3161; --o-b: .3806; --o-l: .3161; --i-t: .5097; --i-r: .4016; --i-b: .4613; --i-l: .4016; /* >>> ABSTAND INHALT -> RAHMEN (Hauptfenster). Hier drehen. <<< Balken ist 25px dick, weniger ist also nicht sinnvoll. Die Ecken-Ornamente ragen bei kleinen Werten in die Ecken der Inhaltsfläche: ab 120px gar nicht mehr, bei 40px rund 30px weit. Das ist Absicht und stört nur, wenn dort Text steht (Karten halten selbst 16px Abstand, so viel Überlappung schluckt der Kartenrand). */ --pad-oben: 60px; --pad-rechts: 60px; --pad-unten: 60px; --pad-links: 60px; } .panel.pad-lg > .frame-corner.tl { background-image: url('../img/frame_main/ecke_ol.png'); } .panel.pad-lg > .frame-corner.tr { background-image: url('../img/frame_main/ecke_or.png'); } .panel.pad-lg > .frame-corner.bl { background-image: url('../img/frame_main/ecke_ul.png'); } .panel.pad-lg > .frame-corner.br { background-image: url('../img/frame_main/ecke_ur.png'); } .panel.pad-lg > .frame-edge.top { background-image: url('../img/frame_main/oben.png'); } .panel.pad-lg > .frame-edge.bottom { background-image: url('../img/frame_main/unten.png'); } .panel.pad-lg > .frame-edge.left { background-image: url('../img/frame_main/links.png'); } .panel.pad-lg > .frame-edge.right { background-image: url('../img/frame_main/rechts.png'); } /* Seitenleisten-Kästen (Menü + Charakter): schlankere Variante, gleiche Technik, eigener Bildersatz und eigene gemessene Kanten-Anteile. */ .panel.pad { --fc: var(--fc-side); /* Seitlicher Einzug für ALLES, was in diesen Kästen untereinander steht – Menü-Buttons, Erfahrungsbalken, Ressourcen, Statuszeilen. Eine Variable, damit die Kanten nicht auseinanderlaufen, wenn einer davon angepasst wird. */ --einzug: 15px; /* Grafik-Messwerte, NICHT zum Drehen – nur anfassen, wenn neue Bilder kommen. */ --o-t: .3597; --o-r: .3129; --o-b: .3726; --o-l: .3129; --i-t: .4500; --i-r: .4048; --i-b: .4629; --i-l: .4065; /* >>> ABSTAND INHALT -> RAHMEN (Seitenleiste + Siegfenster). Hier drehen. <<< Balken ist 9px dick; die Ecken ragen bis 12px herein. */ --pad-oben: 18px; --pad-rechts: 20px; --pad-unten: 18px; --pad-links: 20px; } .panel.pad > .frame-corner.tl { background-image: url('../img/frame_side/ecke_ol.png'); } .panel.pad > .frame-corner.tr { background-image: url('../img/frame_side/ecke_or.png'); } .panel.pad > .frame-corner.bl { background-image: url('../img/frame_side/ecke_ul.png'); } .panel.pad > .frame-corner.br { background-image: url('../img/frame_side/ecke_ur.png'); } .panel.pad > .frame-edge.top { background-image: url('../img/frame_side/oben.png'); } .panel.pad > .frame-edge.bottom { background-image: url('../img/frame_side/unten.png'); } .panel.pad > .frame-edge.left { background-image: url('../img/frame_side/links.png'); } .panel.pad > .frame-edge.right { background-image: url('../img/frame_side/rechts.png'); } /* Der Titel/Reiter der OBERSTEN Karte musste früher vor dem Ecken-Ornament ausweichen und saß dadurch weiter rechts als alle Reiter darunter. Seit die Innenabstände auf 60px stehen, ist das erledigt: der Reiter beginnt bei 72px, das Ornament endet auf seiner Höhe bei 73px (2026-08-13 nachgemessen, inkl. halbtransparenter Blattränder). Alle Reiter stehen damit auf einer Flucht. */ /* Zwei gestapelte Rahmen in der Seitenleiste brauchen etwas Luft dazwischen. */ /* Abstand zwischen den Boxen der Seitenleiste. `> * + *` statt `.panel + .panel`, weil die Symbol-Leiste in einem