/* Zerneborg · Pergament
*
* Referenz: concept/prototyp2. Ein alter Tisch, darauf Blätter aus Pergament.
* Jede Fläche des Spiels ist ein Blatt; das Pergament liegt im ::before, damit
* die Filter für Kante und Schatten den Text nicht verzerren.
*
* Grundregel wie bisher: Farbe trägt Bedeutung und steht nur dort, wo sie
* etwas sagt. Statt Leuchtfarben sind es Pigmente:
*
* --akzent Grünspan aktiv, positiv, bedienbar
* --warn Ocker Achtung (Energie verfällt, Gebäude beschädigt)
* --krit Zinnober kritisch (Fehler, Ansturm, Unterdeckung)
*
* Lesbarkeit geht vor. Das Spiel besteht aus Text: Textflächen bleiben hell
* und ruhig, Zierde sitzt am Rand. Zierschrift steht nur in Titeln, alles
* andere in EB Garamond. Kapitälchen kommen aus CSS (font-variant-caps), im
* HTML steht normaler Text.
*
* Was sich anklicken lässt, ist ein eigener Zettel mit Nagel und hebt sich
* unter dem Zeiger. Ein Kasten mit Rahmen ist nur Anzeige.
*
* Zeichnungen (Siegel, Nagel, Spuren) kommen aus static/js/pergament.js, die
* Filter und Zeichen dazu aus templates/core/_vorrat.html.
*/
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond.f12bc30ca94a.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond-kursiv.9cd12d294a2d.woff2") format("woff2");
font-weight: 400 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "UnifrakturMaguntia";
src: url("../fonts/unifraktur-maguntia-400.6179be6f8c01.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Fondamento";
src: url("../fonts/fondamento-400.d0f9bf80f69e.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Pinyon Script";
src: url("../fonts/pinyon-script-400.6fbb000d02c9.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
/* Nur noch für die ASCII-Zeichnungen der Gebäude, bis sie Federzeichnungen sind. */
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/jetbrains-mono-400.4e0581ae831b.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
:root {
--tisch: #2b221b;
--tisch-hell: #5c4a3c;
--papier: #eadcbc;
--papier-tief: #c2a577;
--papier-hell: #f3e8cf;
--schatten: rgba(6, 3, 1, .55);
/* Wie lange ein Fenster aufrollt und ein Beiblatt hingelegt wird. */
--zeit-rolle: .7s;
--zeit-hinlegen: .7s;
/* So lange liegt ein Blatt unsichtbar da, bevor es sich bewegt: Der Browser
zeichnet das Pergament in dieser Zeit fertig, sonst stockt der Anfang. */
--vorlauf: .09s;
/* Beim Schliessen rollt das Fenster zurück, deutlich schneller. */
--zeit-zu: .2s;
/* Die Namen von früher bleiben, damit die Templates sie weiter benutzen
können. --grund ist jetzt das Blatt (auch als Schriftfarbe auf Tinte),
--flaeche eine helle Lasur, --hell die dunkelste Tinte. */
--grund: var(--papier);
--flaeche: rgba(255, 249, 230, .38);
--linie: rgba(74, 50, 30, .36);
--rahmen: rgba(60, 40, 22, .5);
--text: #35251a;
--dim: #6a5541;
--hell: #1f140c;
--akzent: #3d6a3a;
--warn: #9c6418;
--krit: #9a2618;
--wasser: #4d6e85; /* nur für gezeichnetes Wasser, trägt keine Bedeutung */
/* Schätzungen auf einer Messlatte: Schraffur über einem dünnen Farbauftrag,
damit die Fläche auch aus Abstand als Fläche liest. Gegner rechtssteigend
in Rötel, Verletzungsgefahr linkssteigend in Ocker. */
--muster-gegner: repeating-linear-gradient(-58deg, var(--krit) 0 1.6px, transparent 1.6px 5px),
color-mix(in srgb, var(--krit) 18%, transparent);
--muster-verletzung: repeating-linear-gradient(58deg, var(--warn) 0 1.6px, transparent 1.6px 5px),
color-mix(in srgb, var(--warn) 24%, transparent);
/* Körperbereiche im Sportverlauf, nur für diese Grafik: Pigmente, wie sie
auf dem Blatt liegen könnten. Hell und dunkel wechseln sich ab, damit
benachbarte Abschnitte eines Stapels auch ohne Farbsinn auseinanderfallen;
nicht umsortieren. */
--sport-1: #4f7a5a; /* Grünspan */
--sport-2: #2f4a68; /* Indigo */
--sport-3: #c0922f; /* Ocker */
--sport-4: #8c3340; /* Krapplack */
--sport-5: #8f9a6c; /* Grüne Erde */
--sport-6: #45342a; /* Sepia */
--sport-7: #b4683a; /* Rötel */
--schein: rgba(255, 249, 230, .45);
--schrift: "EB Garamond", Garamond, "Times New Roman", serif;
--titel: "UnifrakturMaguntia", "EB Garamond", serif;
--hand: "Fondamento", "EB Garamond", serif;
--zug: "Pinyon Script", "Fondamento", cursive; /* Unterschrift */
--mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
--retro: var(--schrift); /* früher die Pixelschrift für grosse Zahlen */
--breite: 1160px;
/* Papierfasern: feines Rauschen in Braun, nur über den Alphakanal */
--textur-fasern: url("data:image/svg+xml,");
/* Ungleichmässiger Ton: grobes Rauschen, blass */
--textur-flecken: url("data:image/svg+xml,");
/* Stockflecken: so hart abgeschnitten, dass nur einzelne kleine Flecken bleiben */
--textur-stock: url("data:image/svg+xml,");
/* Eine einzige alte Tischplatte: lange Maserung, feine Fasern, grau
verwitterte Stellen, zwei Äste und Trockenrisse längs der Faser.
Als eigene Datei, nicht eingebettet: Das Bild hat mehrere Filter, und
collectstatic schreibt auf dem Server in einem eingebetteten Bild jeden
Filterverweis nach dem ersten um und macht ihn ungültig; der Tisch war
dann einfarbig. Eingebettet geht nur ein Bild mit einem einzigen Verweis.
(Auch in Kommentaren kein "url" mit Klammer schreiben, es würde ebenso
umgeschrieben.) */
--holz: url("../img/holz.1ac768103ffc.svg");
}
/* --- Grundlage -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--tisch); font-size: 17px; scrollbar-color: #6b4f2e #1c130c; scrollbar-width: thin; }
/* Rollbalken in Holz statt im Grau des Browsers; im Fenster ohne eigene Bahn. */
.modal { scrollbar-color: #7d5f38 transparent; scrollbar-width: thin; }
/* Markierter Text: wie mit verdünnter Tinte überstrichen. */
::selection { background: rgba(122, 82, 24, .34); color: var(--hell); }
body {
margin: 0;
min-height: 100vh;
padding: 0 16px;
color: var(--text);
font: 1rem/1.45 var(--schrift);
font-variant-numeric: lining-nums;
-webkit-text-size-adjust: 100%;
}
/* Der Tisch steht fest, während die Blätter scrollen. Er liegt auf einer
eigenen festen Ebene und nicht als background-attachment: fixed am body:
Das zwänge den Browser, bei jedem Scrollschritt das ganze Bild neu zu
malen, und das Scrollen stockt (gemessen: 6 ms Grafikkarte je Bild und
ausgelassene Bilder, gegen 0,5 ms und keine). Der body selbst darf deshalb
keinen Hintergrund haben, sonst läge er über dieser Ebene. */
body::before {
content: "";
position: fixed; inset: 0; z-index: -2;
pointer-events: none;
background-color: var(--tisch);
background-image:
radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .58) 100%),
var(--holz),
linear-gradient(180deg, var(--tisch-hell), var(--tisch));
}
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--hell); text-decoration: underline dotted; text-underline-offset: 3px; }
a:hover { color: var(--krit); }
:focus-visible { outline: 2px dashed var(--krit); outline-offset: 3px; }
kbd { font: inherit; font-size: .85em; color: var(--dim); }
.dim { color: var(--dim); }
.hell { color: var(--hell); }
.ok { color: var(--akzent); }
.warn { color: var(--warn); }
.krit { color: var(--krit); }
.klein { font-size: .92rem; }
/* Etiketten: früher Versalien, jetzt Kapitälchen. */
.etikett {
font-variant-caps: all-small-caps;
letter-spacing: .09em;
color: var(--dim);
}
/* Nur für Screenreader, unsichtbar auf dem Bildschirm. */
.nur-vorlesen {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Systemzeilen: knappe Auskünfte, kursiv wie eine Randbemerkung. */
.systemzeile { font-style: italic; }
/* --- Blatt ------------------------------------------------------------ */
/* Pergament ist geschnitten, nicht gerissen: die Kante läuft leicht wellig und
ist nur im Kleinen rau. Zum Rand hin ist die Haut vom Anfassen dunkel. Der
Schatten hat zwei Teile, einen engen dort, wo das Blatt aufliegt, und einen
weiten. --rand wählt eine von drei Kanten, --versatz verschiebt die Flecken,
damit nicht jedes Blatt gleich aussieht. */
.kopf, .panel, .fenster, .kachel, .quittung, .beiblatt, a.kopfteil, a.kolonielage__ansturm { isolation: isolate; }
.kopf::before, .panel::before, .fenster::before, .kachel::before, .quittung::before, .beiblatt::before,
a.kopfteil::before, a.kolonielage__ansturm::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(135deg, rgba(255, 250, 232, .22), transparent 40%),
var(--textur-stock) var(--versatz, 0 0),
var(--textur-fasern),
var(--textur-flecken) var(--versatz, 0 0),
var(--papier);
box-shadow: inset 0 0 38px rgba(92, 58, 22, .42), inset 0 0 9px rgba(58, 34, 12, .38);
filter: var(--rand, url(#rand-a)) drop-shadow(0 1px 1px rgba(8, 4, 1, .4)) drop-shadow(0 8px 12px var(--schatten));
}
.kachel:nth-child(3n + 2), .kolonie__seite > .panel:last-child, .fenster--klein { --rand: url(#rand-b); }
.kachel:nth-child(3n), .kolonielage, .fenster--breit { --rand: url(#rand-c); }
.kolonielage { --versatz: 210px 90px; }
.kachel:nth-child(2n) { --versatz: 140px 300px; }
.kachel:nth-child(3n) { --versatz: 380px 60px; }
.kachel:nth-child(5n + 1) { --versatz: 60px 430px; }
.kolonie__seite > .panel { --versatz: 300px 200px; }
.fenster { --versatz: 90px 350px; }
/* Kleine Zettel, die auf einem Blatt liegen: engerer Schatten */
a.kopfteil::before, a.kolonielage__ansturm::before, .quittung::before, .beiblatt::before {
filter: var(--rand, url(#rand-b)) drop-shadow(0 1px 1px rgba(8, 4, 1, .45)) drop-shadow(0 4px 6px rgba(20, 10, 2, .4));
}
/* Gebrauchsspuren und Zierde aus pergament.js. Flüssiges mischt sich mit dem
Blatt darunter, Nagel und Naht liegen obenauf. Nie auf Text. */
.klecks, .becherrand, .naht, .nagel, .kratzer { position: absolute; z-index: 0; width: var(--g, 50px); pointer-events: none; }
.klecks svg, .becherrand svg, .naht svg, .nagel svg, .kratzer svg { display: block; width: 100%; height: auto; overflow: visible; }
.klecks, .becherrand { mix-blend-mode: multiply; }
.naht { transform: rotate(var(--dreh, 0deg)); opacity: .9; }
/* Der Nagel sitzt auf der oberen Kante, halb über dem Blatt: so liegt er nie
auf einem Namen. */
.nagel { top: -13px; left: 50%; width: 30px; margin-left: -15px; }
.panel > .nagel { top: -12px; width: 36px; margin-left: -18px; }
/* Furchen im Tisch: stehen fest wie der Tisch, links oben neben den Blättern. */
.kratzer { position: fixed; z-index: -1; top: 110px; right: calc(50% + var(--breite) / 2 - 40px); width: min(360px, 24vw); transform: rotate(-14deg); }
/* --- Hinweis beim Überfahren ------------------------------------------- */
/* Kurzer Hinweis aus data-tipp="Text": eine Randnotiz auf einem Zettel. */
[data-tipp] { position: relative; }
[data-tipp]::after {
content: attr(data-tipp);
position: absolute; top: calc(100% + 6px); left: 50%;
z-index: 40;
padding: 2px 9px 3px;
background: var(--textur-fasern), var(--papier-hell);
box-shadow: 0 3px 8px rgba(30, 15, 5, .4);
color: var(--hell);
font-family: var(--hand); font-size: .88rem; font-style: normal; line-height: 1.35; letter-spacing: 0;
font-variant-caps: normal;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -2px) rotate(-1deg);
transition: opacity .12s, transform .12s;
}
[data-tipp]:hover::after {
opacity: 1;
transform: translate(-50%, 0) rotate(-1deg);
transition-delay: .15s;
}
/* --- Feder ------------------------------------------------------------- */
/* Was terminal.js schreibt, erscheint Zeichen für Zeichen: frisch ist die
Tinte fast schwarz und leicht verlaufen, dann trocknet sie braun. */
.f { animation: tinte-nass 1.6s both; }
@keyframes tinte-nass {
0% { opacity: 0; filter: blur(1.2px) brightness(.25); }
8% { opacity: 1; filter: blur(0) brightness(.25); }
100% { opacity: 1; filter: none; }
}
/* --- Ankunft nach der Anmeldung ---------------------------------------- */
/* Ein versiegelter Brief auf dem Tisch. Das Siegel bricht, das Mandat des
Barons liegt offen; ein weiterer Klick oder eine Taste legt ihn weg. */
.boot {
position: fixed; inset: 0; z-index: 900;
display: flex; flex-direction: column; align-items: center;
padding: 7vh 16px 16px;
overflow-y: auto;
background-color: var(--tisch);
background-image:
radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .58) 100%),
var(--holz),
linear-gradient(180deg, var(--tisch-hell), var(--tisch));
cursor: pointer;
transition: opacity .45s;
}
.boot.aus { opacity: 0; pointer-events: none; }
.boot__umschlag, .boot__text { position: relative; isolation: isolate; }
.boot__umschlag::before, .boot__text::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: var(--textur-fasern), var(--textur-flecken), var(--papier);
box-shadow: inset 0 0 38px rgba(92, 58, 22, .42), inset 0 0 9px rgba(58, 34, 12, .38);
filter: url(#rand-a) drop-shadow(0 1px 1px rgba(8, 4, 1, .4)) drop-shadow(0 8px 12px var(--schatten));
}
.boot__umschlag { width: min(440px, 100%); aspect-ratio: 3 / 2; margin-top: 11vh; animation: zettel-rein .7s cubic-bezier(.3, 1.3, .5, 1) both; }
.boot__falten { position: absolute; inset: 0; width: 100%; height: 100%; }
.boot__siegel { position: absolute; left: 50%; top: 57%; width: 128px; height: 128px; transform: translate(-50%, -50%); }
.boot__haelfte { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.3, 0, .6, 1), opacity .75s; }
.boot__haelfte svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(30, 5, 0, .45)); }
.boot__haelfte--l { clip-path: polygon(0 0, 54% 0, 46% 30%, 55% 52%, 44% 76%, 52% 100%, 0 100%); }
.boot__haelfte--r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 44% 76%, 55% 52%, 46% 30%); }
.boot.gebrochen .boot__haelfte--l { transform: translate(-40px, 70px) rotate(-38deg); opacity: 0; }
.boot.gebrochen .boot__haelfte--r { transform: translate(36px, 80px) rotate(30deg); opacity: 0; }
.boot__text {
width: min(560px, 100%); min-height: 15em;
padding: 2rem 2.4rem 2.2rem;
transform-origin: 50% 0;
animation: entfalten .8s cubic-bezier(.2, .75, .25, 1) both;
}
/* Das Mandat: von Hand geschrieben, unterzeichnet und rot gesiegelt
(Amtliches von aussen). Die Schnörkelschrift trägt nur die Unterschrift,
als Fliesstext ist sie zu mühsam. Der Text steht als Ganzes da, sobald der
Brief offen liegt. */
.boot__text { color: var(--hell); font-family: var(--hand); font-size: 1.12rem; line-height: 1.5; }
.boot__titel { margin-bottom: 1.1rem; font-family: var(--titel); font-size: 2.4rem; line-height: 1.05; text-align: center; }
.boot__text > p + p { margin-top: .7rem; }
.boot__text > .boot__datum { margin-top: 1.1rem; text-align: right; }
.boot__zeichnung { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-top: .4rem; }
.boot__wachs { width: 92px; flex: none; }
.boot__wachs svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgba(30, 5, 0, .4)); }
.boot__unterschrift { font-family: var(--zug); font-size: 2.7rem; line-height: 1; transform: rotate(-3deg); }
.boot__hinweis { margin-top: 1.6rem; font-style: italic; color: #e6d5b0; opacity: .7; text-shadow: 0 1px 2px #000; transition: opacity .3s; }
.boot.bereit .boot__hinweis, .boot.versiegelt .boot__hinweis { opacity: 1; }
@keyframes zettel-rein { from { opacity: 0; transform: translate(50px, -25px) rotate(9deg); } }
/* --- Kopfleiste ------------------------------------------------------- */
.kopf {
position: sticky; top: 0; z-index: 20;
max-width: var(--breite);
margin: 0 auto;
padding: .35rem 1.2rem .7rem;
}
/* Die obere Kante liegt ausserhalb des Bilds, sonst schaut dort der Tisch durch */
.kopf::before { top: -14px; }
.kopf.ohne-uebergang * { transition: none !important; }
.kopf__leiste {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
margin-bottom: .55rem;
}
.kopf__verwaltung { display: flex; align-items: baseline; gap: 1.1rem; font-size: .92rem; }
.kopf__verwaltung form { margin: 0; }
/* Drei Teile: Energie, Lager, Charakter */
.kopf__teile {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr);
gap: .8rem;
}
.kopfteil {
position: relative;
display: grid; align-content: start; gap: .15rem;
min-width: 0;
padding: .5rem .9rem .6rem;
border: 1px solid var(--rahmen);
color: inherit;
text-decoration: none;
}
.kopfteil > .etikett { line-height: 1.2; }
/* Anklickbar: ein Zettel, leicht schief, hebt sich unter dem Zeiger. */
a.kopfteil { border: 0; cursor: pointer; transform: rotate(var(--dreh, 0deg)); transition: transform .25s; }
a.kopfteil:hover, a.kopfteil:focus-visible { color: inherit; outline: none; transform: rotate(0deg) translateY(-3px); }
a.kopfteil--energie { --dreh: -.4deg; }
a.kopfteil--lager { --dreh: .5deg; }
a.kopfteil--charakter { --dreh: -.6deg; }
.ressourcen {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 .9rem;
font-size: .93rem;
}
.ressource { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ressource svg { flex: none; width: 17px; height: 17px; overflow: visible; fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ressource__kuerzel { flex: 1; color: var(--dim); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.ressource__menge { color: var(--hell); font-variant-numeric: lining-nums tabular-nums; }
.ressource--leer .ressource__menge { color: var(--dim); }
.ressource--leer svg { stroke: var(--dim); opacity: .7; }
.charakter__name { font-family: var(--titel); font-size: 1.25rem; line-height: 1.05; color: var(--hell); }
/* Die Kampfkraft ist die eine Zahl dieser Box und steht wie die Energie
nebenan gross am rechten Rand, neben Etikett und Name; gesetzt wie eine
Kennzahl im Charakterfenster (Zahl über Etikett). Die Statuseffekte
laufen darunter über die ganze Breite. */
.kopfteil--charakter { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; }
.kopfteil--charakter > * { grid-column: 1; }
.kopfteil--charakter > .charakter__wert {
grid-column: 2; grid-row: 1 / span 2; align-self: end;
display: flex; flex-direction: column-reverse; align-items: flex-end;
font-size: 1.9rem; line-height: 1; color: var(--hell);
font-variant-numeric: lining-nums;
}
.kopfteil--charakter > .aufstieg ~ .charakter__wert { grid-row: 2 / span 2; }
.charakter__wert > .dim { font-size: .9rem; line-height: 1.2; font-variant-caps: all-small-caps; letter-spacing: .09em; }
.kopfteil--charakter > .charakter__status { grid-column: 1 / -1; margin-top: .4rem; }
.charakter__status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; font-size: .9rem; font-style: italic; }
/* Statuseffekt: eine Marke mit Zeichen, ockerfarben laviert und umrandet.
Bewusst flach — kein Schatten, kein Nagel, keine Schräge, nichts hebt sich:
Sie ist Anzeige, kein Zettel zum Anklicken. Der Name steht in dunkler
Tinte, die Farbe tragen Zeichen, Rand und Grund. */
.status {
display: inline-flex; align-items: center; gap: .3rem;
padding: 0 .5rem .05rem .35rem;
border: 1px solid color-mix(in srgb, var(--warn) 65%, transparent); border-radius: 2px;
background: color-mix(in srgb, var(--warn) 14%, transparent);
color: var(--hell);
font-style: normal; line-height: 1.4; text-indent: 0; white-space: nowrap;
cursor: help;
}
.status > svg { flex: none; width: 15px; height: 15px; overflow: visible; fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Was nachwirkt (Allgeisttinktur), hilft: Grünspan statt Ocker. */
.status--wirkung {
border-color: color-mix(in srgb, var(--akzent) 65%, transparent);
background: color-mix(in srgb, var(--akzent) 14%, transparent);
}
.status--wirkung > svg { stroke: var(--akzent); }
a .status { cursor: inherit; }
/* Im Sportfenster stehen die wirksamen Effekte als Marken vor dem Abzug. */
.warnung.warnung--status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding-left: .7rem; text-indent: 0; }
/* Die Randnotiz eines Statuseffekts hängt an der ganzen Zeile, nicht am
Effekt: So beginnt sie immer am linken Rand der Zeile und ragt auch rechts
in der Kopfleiste nicht aus dem Bild. */
.charakter__status { position: relative; }
.charakter__status > .status.mit-tipp { position: static; }
.charakter__status .tipp { left: 0; font-style: normal; }
.marke {
font-family: var(--titel);
font-size: 1.6rem; line-height: 1.1;
color: var(--hell);
text-decoration: none;
}
.marke:hover { color: var(--hell); }
/* Rote Initiale aus der Textschrift: Das Z der Fraktur liest sich wie eine 3. */
.marke::first-letter { font-family: var(--schrift); font-weight: 600; color: var(--krit); }
.energie {
display: grid;
grid-template-columns: minmax(60px, 1fr) auto auto;
align-items: center;
gap: .1rem .7rem;
margin-top: .45rem;
}
.energie__zahl {
font-size: 1.85rem; line-height: .9;
min-width: 2ch; text-align: right;
color: var(--hell);
font-variant-numeric: lining-nums tabular-nums;
transition: color .4s;
}
.energie__zahl.neu { color: var(--akzent); }
.energie__hinweis { font-size: .88rem; font-style: italic; color: var(--dim); }
.energie__hinweis.warn { color: var(--warn); }
/* Das Plus ist mit zwei Pinselstrichen in einen freihändigen Kreis gesetzt.
Das Zeichen im HTML bleibt für Vorleseprogramme, sichtbar sind die Striche. */
.knopf-plus {
position: relative;
display: block; flex: none;
width: 30px; height: 30px; padding: 0;
border: 1.6px solid var(--akzent);
border-radius: 53% 47% 50% 50% / 47% 52% 48% 53%;
background: none;
color: var(--akzent);
font-size: 0;
text-decoration: none;
cursor: pointer;
transform: rotate(-4deg);
transition: background .15s, color .15s, transform .15s;
}
.knopf-plus::before, .knopf-plus::after {
content: "";
position: absolute; left: 50%; top: 50%;
width: 54%; height: 2.6px; margin: -1.3px 0 0 -27%;
border-radius: 2px 1px 2px 1px;
background: currentColor;
transform: rotate(3deg);
}
.knopf-plus::after { width: 50%; margin-left: -25%; transform: rotate(-86deg); }
.knopf-plus:hover, .knopf-plus:focus-visible { background: var(--akzent); color: var(--papier); outline: none; transform: rotate(0deg) scale(1.08); }
button.knopf-plus[disabled], button.knopf-plus[disabled]:hover { border-color: var(--dim); color: var(--dim); background: none; opacity: .45; cursor: not-allowed; transform: rotate(-4deg); }
.knopf-leise {
background: none; border: 0; padding: 0;
color: var(--text);
font-style: italic;
text-decoration: underline dotted; text-underline-offset: 3px;
cursor: pointer;
}
.knopf-leise:hover { color: var(--krit); }
.knopf-leise--krit:hover { color: var(--krit); }
/* --- Balken ----------------------------------------------------------- */
/* Kein Kasten: eine mit der Feder gezogene Messlatte mit Teilstrichen, darauf
ein Strich aus deckendem Pigment, wie in der Buchmalerei. */
.balken { position: relative; display: block; height: 27px; }
.balken::before {
content: "";
position: absolute; inset: 17px 0 auto; height: 9px;
border-top: 1.5px solid var(--hell);
border-inline: 1.5px solid var(--hell);
background:
linear-gradient(var(--hell), var(--hell)) 50% 0 / 1.3px 100% no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.2px), var(--hell) calc(10% - 1.2px) 10%) 0 0 / 100% 5px no-repeat;
filter: url(#hand);
}
.balken__fuell, .balken__ueber {
position: absolute; left: 0; top: 2px; height: 13px;
border-radius: 2px 7px 6px 2px / 3px 7px 5px 3px;
filter: url(#pigment);
transition: width .5s ease-out, left .5s ease-out;
}
.balken__fuell { background: var(--akzent); }
/* Was über der Übertragsgrenze liegt, ist mit Ocker übermalt */
.balken__ueber { top: 1px; height: 15px; border-radius: 1px 6px 5px 1px / 2px 6px 4px 2px; background: var(--warn); }
.balken__marke {
position: absolute; top: -1px; z-index: 2;
width: 1.3px; height: 27px; margin-left: -.65px;
background: var(--hell);
transition: left .5s ease-out;
}
.balken__marke::before {
content: attr(data-wert);
position: absolute; bottom: calc(100% + 1px); left: 50%;
transform: translateX(-50%);
font-size: .72rem; font-style: italic; line-height: 1;
color: var(--dim);
}
/* Schätzung: mit Rötel schraffiertes Feld, das auf der Latte steht */
.balken__band {
position: absolute; top: -3px; height: 21px;
border-inline: 2px solid var(--krit);
background: var(--muster-gegner);
filter: url(#hand);
}
/* Der Teil der Schätzung, den geräumte Nester, Kernstadt und gesicherte Felder schon abgetragen haben. */
.balken__band--ab {
border-color: var(--dim); border-left: 0; border-right-style: dashed;
background: repeating-linear-gradient(-58deg, var(--dim) 0 1.1px, transparent 1.1px 5px),
color-mix(in srgb, var(--dim) 10%, transparent);
opacity: .75;
}
.balken--welle .balken__fuell { background: var(--krit); }
.skala { display: flex; justify-content: space-between; margin-top: -1px; font-size: .8rem; font-style: italic; color: var(--dim); }
/* Klein: eine Rinne, in der das Pigment steht */
.minibalken {
position: relative; display: block;
height: 9px; margin: 3px 0 2px;
border: 1px solid var(--text); border-top: 0;
}
.minibalken > i {
position: absolute; inset: 1px auto 1.5px 0; width: 0;
border-radius: 1px 3px 3px 1px;
background: var(--akzent);
filter: url(#pigment);
transition: width .5s ease-out;
}
.minibalken--gross { height: 12px; }
/* Der Wasserstand auf der Brunnenkachel, im selben Blau wie der Schacht im Fenster */
.kachel__vorrat .minibalken > i { background: var(--wasser); }
/* --- Meldungen -------------------------------------------------------- */
.meldungen {
max-width: var(--breite);
margin: 1rem auto 0;
display: grid; gap: 6px;
}
.meldungen:empty { display: none; }
.meldung, .warnung, .hinweis {
padding: .35rem .9rem .4rem 2rem;
text-indent: -1.3rem;
background: var(--textur-fasern), var(--papier-hell);
box-shadow: 0 1px 1px rgba(8, 4, 1, .4), 0 4px 8px rgba(20, 10, 2, .35);
font-style: italic;
color: var(--text);
}
/* Rubriziertes Absatzzeichen statt Balken am Rand */
.meldung::before, .warnung::before, .hinweis::before {
content: "¶";
display: inline-block; width: 1.3rem; text-indent: 0;
font-style: normal; font-size: 1.15em; line-height: 1;
color: var(--dim);
}
.meldung--success::before, .hinweis::before { color: var(--akzent); }
.meldung--warning, .warnung { color: var(--warn); }
.meldung--warning::before, .warnung::before { color: var(--warn); }
.meldung--error { color: var(--krit); }
.meldung--error::before { color: var(--krit); }
/* Im Fenster liegt der Hinweis auf dem Blatt und braucht keinen eigenen Zettel. */
.fenster .warnung, .fenster .hinweis { background: var(--flaeche); box-shadow: none; }
/* Über offenen Fenstern muss eine Meldung sichtbar bleiben. */
body:has(#modal:not(:empty)) .meldungen:not(:empty) {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
}
/* --- Kolonie ------------------------------------------------------------ */
.kolonie {
max-width: var(--breite);
margin: 0 auto;
padding: 1.6rem 0 6rem;
display: grid;
gap: 1.6rem;
}
/* Ein Blatt. Der Titel aus data-titel steht als Überschrift oben auf dem
Blatt; das Pergament selbst liegt im ::before. */
.panel {
position: relative;
min-width: 0;
padding: 1.1rem 1.4rem 1.2rem;
}
.panel::after {
content: attr(data-titel);
position: absolute; top: .9rem; left: 1.4rem;
font-family: var(--titel); font-size: 1.35rem; line-height: 1.1;
color: var(--hell);
}
.panel[data-titel] { padding-top: 2.9rem; }
/* Die Gebäude liegen als einzelne Blätter direkt auf dem Tisch. */
.panel.kolonie__szene { padding: 0; }
.panel.kolonie__szene::before, .panel.kolonie__szene::after { content: none; }
.kolonie__szene > .systemzeile { color: #e6d5b0; text-shadow: 0 1px 2px #000; }
/* Rechte Spalte der Kolonie: Schmuggler-Box, darunter die Chronik. */
.kolonie__seite { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.log { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.log li {
display: grid;
grid-template-columns: 7.5em minmax(0, 1fr);
gap: .5rem;
padding: .22rem 0;
border-bottom: 1px dotted var(--linie);
}
.log li:last-child { border-bottom: 0; }
.log li.log--wert { grid-template-columns: 7.5em minmax(0, 1fr) auto; }
.log li.storniert .log__text { color: var(--dim); text-decoration: line-through; }
.log__zeit { color: var(--dim); font-style: italic; font-variant-numeric: lining-nums tabular-nums; }
/* Hauptprotokoll: Tageszeile, darunter Uhrzeit · wer · was. */
.log--haupt li { grid-template-columns: 2.9em 6.5ch minmax(0, 1fr); }
.log--haupt li.log__tag {
display: block;
padding: .5rem 0 .1rem;
border-bottom: 1px solid var(--rahmen);
font-variant-caps: all-small-caps; letter-spacing: .1em;
color: var(--hell);
}
.log--haupt li.log__tag:first-child { padding-top: 0; }
.fenster .log--haupt li { grid-template-columns: 2.9em 12ch minmax(0, 1fr); }
.panel__fuss { margin-top: .5rem; text-align: right; }
.log__wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hell); }
.log__text { min-width: 0; overflow-wrap: anywhere; }
.log__wert { color: var(--akzent); text-align: right; }
.log li.storniert .log__wert { color: var(--dim); }
@media (min-width: 920px) {
.kolonie { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
/* --- Fenster ---------------------------------------------------------- */
/* Ein Fenster ist ein Brief, der über der Kolonie liegt. Gescrollt wird der
Hintergrund, nicht das Blatt: so kann das Siegel über die untere Kante
hängen. */
.modal {
position: fixed; inset: 0; z-index: 50;
display: flex; align-items: flex-start; justify-content: center;
padding: 6vh 16px 170px;
background: rgba(12, 7, 3, .62);
overflow-y: auto; overflow-x: hidden;
}
.modal:empty { display: none; }
.fenster {
position: relative;
width: min(760px, 100%);
padding: 0 2.2rem 7.5rem;
}
.fenster--breit { width: min(980px, 100%); }
/* terminal.js setzt .oeffnet, bevor das Fenster eingefügt wird: das Blatt
rollt von oben nach unten auf. Beschnitten wird nur während der Bewegung
(backwards), danach hängt das Siegel wieder frei über die Kante. Die Walze
legt terminal.js daneben, im Blatt selbst würde sie mit beschnitten. */
.modal.oeffnet > .fenster, .fenster--klein {
animation: vorlauf var(--vorlauf), aufrollen var(--zeit-rolle) var(--vorlauf) cubic-bezier(.3, .05, .3, 1);
}
.fenster--klein { --zeit-rolle: .45s; }
/* Fast durchsichtig, aber nicht ganz: Nur dann wird das Blatt schon gezeichnet. */
@keyframes vorlauf { from, to { opacity: .01; } }
@keyframes aufrollen {
from { clip-path: inset(-50px -260px 100% -50px); }
82% { clip-path: inset(-50px -260px 0 -50px); animation-timing-function: ease-out; }
to { clip-path: inset(-50px -260px -180px -50px); }
}
.walze {
position: absolute; z-index: 3;
height: 36px;
border-radius: 17px 19px 18px 16px / 18px 17px 19px 18px;
background:
linear-gradient(rgba(92, 58, 22, .3), rgba(255, 250, 232, .2) 20%, transparent 40%, rgba(58, 34, 12, .5) 74%, rgba(24, 12, 3, .82)),
var(--textur-flecken) 120px 40px,
var(--textur-fasern),
var(--papier);
box-shadow:
inset 16px 0 12px -9px rgba(58, 34, 12, .55), inset -16px 0 12px -9px rgba(58, 34, 12, .55),
0 9px 12px rgba(6, 3, 1, .6), 0 2px 2px rgba(6, 3, 1, .5);
pointer-events: none;
opacity: 0;
animation: walze var(--zeit-rolle) var(--vorlauf) cubic-bezier(.3, .05, .3, 1);
}
/* Der Stab, um den gewickelt ist, schaut an beiden Enden heraus. */
.walze::before, .walze::after {
content: "";
position: absolute; top: 9px; left: -15px; z-index: -1;
width: 22px; height: 18px;
border-radius: 45% 20% 20% 45%;
background: linear-gradient(#7a5632, #4a2f18 55%, #1f1207);
}
.walze::after { left: auto; right: -15px; transform: scaleX(-1); }
/* Schliessen: Das Blatt rollt von unten nach oben zurück, der Grund hellt auf.
terminal.js setzt .schliesst und hält das Leeren des Fensters so lange auf. */
.modal.schliesst { animation: grund-weg var(--zeit-zu) ease-in forwards; }
.modal.schliesst > .fenster { animation: zurollen var(--zeit-zu) cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes grund-weg { to { background-color: rgba(12, 7, 3, 0); } }
@keyframes zurollen {
from { clip-path: inset(-50px -260px -180px -50px); }
12% { clip-path: inset(-50px -260px 0 -50px); }
to { clip-path: inset(-50px -260px 100% -50px); }
}
.walze--zu { opacity: 1; animation: walze-zu var(--zeit-zu) cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes walze-zu {
from, 12% { transform: translateY(var(--weg)) scaleY(.5); }
to { transform: translateY(0); }
}
/* Je weiter abgerollt, desto dünner die Rolle. Sie endet am unteren Rand des
Blatts (82 %, wie bei "aufrollen") und vergeht dort; in dieser letzten
Spanne kommt darunter das Band des Siegels zum Vorschein. */
@keyframes walze {
from { opacity: 1; transform: translateY(0); }
82% { opacity: 1; transform: translateY(var(--weg)) scaleY(.5); }
to { opacity: 0; transform: translateY(var(--weg)) scaleY(.5); }
}
/* Ein Beiblatt liegt auf einem Fenster; sein Inhalt wird ausgetauscht, ohne
dass das Fenster neu aufgeht (die Angaben zum Feld). Dann wird es
hingelegt: terminal.js setzt .hingelegt bei jedem Austausch neu.
Das Blatt selbst bleibt dabei dasselbe Element, und sein Pergament liegt
auf einer eigenen Ebene (will-change). So wird das Pergament mit seinen
Filtern ein einziges Mal gezeichnet und danach nur verschoben; wäre es
jedes Mal ein neues Element, stockte der Anfang der Bewegung (gemessen).
Aus demselben Grund die feste Mindesthöhe: Ändert sich die Grösse, muss
das Pergament neu gezeichnet werden.
Schief liegt nur das Pergament, nicht der Text: Eine eigene Ebene wird als
Bild gedreht, und gedrehter Text auf ihr wird unscharf. */
.beiblatt {
/* Über den Kartenfeldern (z-index 1): sonst liegen Hinweise am Beiblatt,
etwa an den Eigenschaften eines Nests, unter dem Nachbarfeld. */
position: relative; z-index: 5;
padding: .9rem 1.1rem 1.1rem;
will-change: transform, opacity;
}
.beiblatt::before { will-change: transform; transform: rotate(.3deg); }
.beiblatt:not(:has(.abschnitt)) { padding: 0; }
.beiblatt:not(:has(.abschnitt))::before, .beiblatt:not(:has(.abschnitt))::after { display: none; }
.beiblatt.hingelegt { animation: hinlegen var(--zeit-hinlegen) cubic-bezier(.2, .75, .3, 1) backwards; }
/* Der weite Schatten gehört zum fallenden Blatt und ist am Ende weg. Er ist
ein eigenes Element und wird nur ausgeblendet. */
.beiblatt::after {
content: "";
position: absolute; inset: 6px; z-index: -2;
box-shadow: 0 30px 28px rgba(6, 3, 1, .4);
opacity: 0;
pointer-events: none;
}
.beiblatt.hingelegt::after { animation: schatten-weg var(--zeit-hinlegen) cubic-bezier(.2, .75, .3, 1) backwards; }
@keyframes hinlegen {
from { opacity: 0; transform: translateY(-18px) rotate(-1.7deg) scale(1.04); }
30% { opacity: 1; }
}
@keyframes schatten-weg { from { opacity: 1; } to { opacity: 0; } }
/* Der Ankunftsbrief faltet sich weiter auf wie ein Brief. */
@keyframes entfalten {
0% { opacity: 0; transform: perspective(1600px) translateY(-30px) rotateX(-82deg) scaleY(.33); }
30% { opacity: 1; }
100% { opacity: 1; transform: perspective(1600px) translateY(0) rotateX(0) scaleY(1); }
}
.fenster__leiste {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 1.4rem 0 .3rem;
border-bottom: 1px solid var(--linie);
}
.fenster__titel {
font-family: var(--titel);
font-size: 1.85rem; line-height: 1.1;
color: var(--hell);
}
/* Schliessen: ein X mit zwei Federstrichen. Was im Verweis steht, bleibt für
Vorleseprogramme und ist nicht zu sehen. */
.fenster__schliessen {
position: relative; flex: none;
width: 34px; height: 34px; margin-right: -6px;
overflow: hidden;
color: var(--hell);
font-size: 0;
text-decoration: none;
transition: color .15s, transform .15s;
}
.fenster__schliessen::before, .fenster__schliessen::after {
content: "";
position: absolute; left: 4px; top: 50%;
width: 27px; height: 2.8px; margin-top: -1.4px;
border-radius: 3px 1px 2px 1px / 2px 1px 3px 1px;
background: currentColor;
transform: rotate(47deg);
}
.fenster__schliessen::after { left: 5px; width: 25px; height: 2.4px; transform: rotate(-41deg); }
.fenster__schliessen:hover, .fenster__schliessen:focus-visible { color: var(--krit); outline: none; transform: rotate(-6deg) scale(1.1); }
.fenster__inhalt { display: grid; gap: 1.2rem; padding: 1.1rem 0 0; }
.fenster__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Siegel am unteren Rand. Das Wachs sitzt auf der Kante, Band oder Schnur
hängen darüber hinaus. */
.fenster__siegel {
position: absolute; right: 2.4rem; bottom: -124px;
width: 158px;
pointer-events: none;
transform: rotate(4deg);
}
.fenster__siegel svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgba(30, 5, 0, .4)); }
/* Aushang: eine Meldung wie ein Schreiben. Kopfzeile klein,
darunter ruhiger Text in lesbarer Breite. */
.meldung__titel { margin: 4px 0 12px; font-family: var(--titel); font-size: 1.45rem; line-height: 1.15; color: var(--hell); }
.meldung__kopf { margin: 18px 0 8px; }
.meldung__text { margin: 0 0 10px; max-width: 68ch; }
.meldung__liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; max-width: 68ch; }
/* Hängender Einzug: Die zweite Zeile eines Punktes beginnt unter der ersten,
nicht unter dem Aufzählungszeichen. */
.meldung__liste > li { padding-left: 14px; text-indent: -14px; }
.meldung__liste > li::before { content: "· "; color: var(--krit); }
/* Reiter "Älteres": die früheren Anschläge als Verzeichnis, Nummer links,
Titel als Verweis. */
.anschlaege { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.anschlaege li { border-bottom: 1px dotted var(--linie); }
.anschlaege li:last-child { border-bottom: 0; }
.anschlaege a {
display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .8rem; align-items: baseline;
padding: .45rem 0;
color: inherit; text-decoration: none;
}
.anschlaege__nr { color: var(--dim); font-variant-caps: all-small-caps; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.anschlaege__titel { color: var(--hell); font-style: italic; text-decoration: underline dotted; text-underline-offset: 3px; }
.anschlaege a:hover .anschlaege__titel, .anschlaege a:focus-visible .anschlaege__titel { color: var(--krit); }
.abschnitt { display: grid; gap: .45rem; padding-top: 1rem; border-top: 1px dotted var(--linie); }
.abschnitt--erster { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
.modal { padding: 3vh 8px 150px; }
.fenster { padding: 0 1.1rem 6.5rem; }
.fenster__siegel { left: 1rem; width: 124px; bottom: -97px; }
}
/* --- Formulare -------------------------------------------------------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.formular { display: grid; gap: 1.2rem; }
.feld { display: grid; gap: .35rem; }
/* Überschrift eines Abschnitts oder Felds */
.feld__label {
font-variant-caps: all-small-caps; letter-spacing: .12em;
font-size: 1.05rem;
color: var(--hell);
}
.abschnitt > .feld__label, .fenster__inhalt > .feld__label { border-bottom: 1px solid var(--linie); }
.feld__hinweis { font-size: .92rem; font-style: italic; color: var(--dim); }
.feld__hinweis ul { margin: 4px 0 0; padding-left: 1.2em; }
/* Auswahl: ein kleines, freihändig gezogenes Kästchen. Gewählt ist, was mit
zwei Federstrichen angekreuzt ist; das Kreuz ragt über das Kästchen hinaus,
wie von Hand gemacht. */
.wahl { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }
.wahl label { cursor: pointer; white-space: nowrap; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl input + span { position: relative; display: inline-block; padding-left: 1.5em; }
.wahl input + span::before {
content: "";
position: absolute; left: .08em; top: .33em;
width: .8em; height: .8em;
border: 1.3px solid var(--text);
border-radius: 2px 3px 2px 4px / 3px 2px 4px 2px;
transform: rotate(-2deg);
}
.wahl input + span::after {
content: "";
position: absolute; left: -.14em; top: .06em;
width: 1.3em; height: 1.3em;
background: var(--hell);
-webkit-mask: var(--kreuz) center / contain no-repeat; mask: var(--kreuz) center / contain no-repeat;
--kreuz: url("data:image/svg+xml,");
opacity: 0; transform: scale(.6) rotate(-8deg);
transition: opacity .08s, transform .12s ease-out;
pointer-events: none;
}
.wahl input:checked + span { color: var(--hell); }
.wahl input:checked + span::after { opacity: 1; transform: none; }
.wahl input:focus-visible + span { outline: 2px dashed var(--krit); outline-offset: 3px; }
.wahl label:hover span { color: var(--hell); }
.wahl--spalte { flex-direction: column; gap: .3rem; }
.wahl label.wahl--aus { cursor: default; color: var(--dim); }
.wahl label.wahl--aus input + span::before { border-style: dotted; border-color: var(--dim); }
/* Favoriten des Sportfensters: je Zeile ein Kästchen, rechts das Streichen */
.favoriten { list-style: none; margin: 0; padding: 0; gap: 0; }
.favoriten li {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: .3rem 0;
border-bottom: 1px dotted var(--linie);
}
.favoriten li:last-child { border-bottom: 0; }
.favoriten label { flex: 1 1 auto; min-width: 0; white-space: normal; }
.favoriten .knopf-leise { font-size: .92rem; color: var(--dim); }
.favoriten .knopf-leise:hover { color: var(--krit); }
/* Eingabe: auf die Zeile geschrieben */
.eingabe { display: flex; align-items: baseline; gap: 10px; }
.eingabe > .dim[aria-hidden] { display: none; }
.eingabe input {
flex: 0 1 auto;
width: 100%; max-width: 28ch;
padding: 0 .2rem;
background: transparent;
border: 0; border-bottom: 1.5px solid var(--hell);
border-radius: 0;
color: var(--hell);
font-size: 1.15rem; line-height: 1.3;
caret-color: var(--krit);
outline: none;
}
.eingabe input:focus { border-bottom-color: var(--krit); }
.sportform .eingabe input { max-width: 7ch; font-size: 1.35rem; }
/* Punktlinie zwischen Bezeichnung und Wert, wie in einem Register */
.zeile-punkte { display: flex; align-items: baseline; gap: .35rem; }
/* Unterüberschrift in einer Liste aus Punktzeilen (Statistik, Freijagd je Waffenklasse).
* Durchgezogen unterstrichen: gepunktet sind die Verweise. */
.unterkopf { margin: .55rem 0 .1rem; color: var(--hell); text-decoration: underline solid 1px; text-underline-offset: .2em; }
.zeile-punkte .punkte { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted var(--linie); transform: translateY(-.28em); }
.zeile-punkte > :last-child { color: var(--hell); }
/* Farbige Werte behalten ihre Farbe. */
.zeile-punkte > .ok:last-child { color: var(--akzent); }
.zeile-punkte > .warn:last-child { color: var(--warn); }
.zeile-punkte > .krit:last-child { color: var(--krit); }
.zeile-punkte > .dim:last-child { color: var(--dim); }
.fehler { color: var(--krit); font-style: italic; }
.fehler ul { margin: 0; padding-left: 1.2em; }
/* Der Hauptknopf ist ein grosser Stempel in schwarzer Tinte: Doppelrand,
leicht schief aufgesetzt, nicht ganz satt. Unter dem Zeiger wird er satt
und etwas grösser. Die kleinen Stempel neben Zahlenfeldern (.schnell) sind
seine Verwandten mit einfachem Rand. */
.knopf {
justify-self: start;
display: inline-block;
padding: .2rem 1.05rem .3rem;
background: none;
border: 5px double var(--hell);
border-radius: 6px 9px 7px 10px / 9px 6px 10px 7px;
color: var(--hell);
font: inherit; font-size: 1.1rem; font-weight: 600;
font-variant-caps: all-small-caps; letter-spacing: .14em;
text-decoration: none;
cursor: pointer;
opacity: .86; transform: rotate(-2deg);
transition: transform .12s, opacity .12s;
}
.knopf:hover, .knopf:focus-visible { opacity: 1; transform: rotate(-2deg) scale(1.05); outline: none; }
.knopf:active { transform: rotate(-2deg) scale(.98); }
.knopf .dim { font-weight: 400; }
.htmx-request .knopf, .knopf.htmx-request { opacity: .5; cursor: wait; }
.knopf--klein { padding: .02rem .7rem .12rem; font-size: .95rem; border-width: 3px; letter-spacing: .12em; }
.knopf--gross { padding: .4rem 1.5rem .5rem; font-size: 1.25rem; }
.knopf--krit { border-color: var(--krit); color: var(--krit); }
/* Sichtbar, aber nicht bedienbar, z.B. bei erreichtem Baulimit. */
.knopf--aus, .knopf--aus:hover,
.knopf[disabled], .knopf[disabled]:hover {
border-color: var(--dim); color: var(--dim); opacity: .5; cursor: not-allowed; transform: rotate(-2deg);
}
/* --- Quittung --------------------------------------------------------- */
/* Ein Zettel, der auf dem Brief liegt, mit Stempel. */
.quittung {
position: relative;
padding: .7rem 1.1rem .7rem 1.2rem;
color: var(--hell);
cursor: default;
transform: rotate(-.5deg);
}
.quittung::after {
content: "Vermerkt";
position: absolute; right: .6rem; top: -.55rem;
padding: 0 .45rem;
border: 2px solid currentColor; border-radius: 4px;
color: var(--krit);
font-weight: 600; font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .14em; line-height: 1.3;
opacity: .72;
transform: rotate(-7deg);
mix-blend-mode: multiply;
}
/* terminal.js nimmt die Quittung aus dem Fenster und legt sie in die obere
rechte Ecke des Bildschirms, über alles andere. Dort stapeln sie sich. */
.quittungen {
position: fixed; top: 18px; right: 24px; z-index: 60;
display: flex; flex-direction: column; gap: 1rem;
width: min(340px, calc(100% - 40px));
pointer-events: none;
}
/* Im Fenster selbst ist sie dann nicht zu sehen. Sonst stünde sie dort einen
Augenblick, das Blatt würde grösser und gleich wieder kleiner. */
.mit-skript .quittung { display: none; }
.mit-skript .quittungen .quittung { display: block; }
.quittungen .quittung {
pointer-events: auto; cursor: pointer;
transform: rotate(-1.4deg);
animation: zettel-rein .5s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.quittungen .quittung:nth-child(2n) { transform: rotate(1deg); }
/* Der Stempel sitzt ganz auf dem Zettel, nicht über dessen Kante. */
.quittungen .quittung::after { top: .5rem; right: .7rem; }
.quittungen .quittung p:first-of-type { padding-right: 6rem; }
.quittungen .quittung.weg { animation: zettel-raus .35s ease-in forwards; }
@keyframes zettel-raus { to { opacity: 0; transform: translateY(-20px) rotate(-4deg); } }
.quittung p { min-height: 1.45em; white-space: pre-wrap; }
.quittung p:first-of-type { padding-right: 5.5rem; font-weight: 500; }
.verarbeitung { display: grid; gap: 6px; margin-bottom: 6px; font-style: italic; color: var(--dim); }
.verarbeitung .minibalken > i { transition: width var(--dauer, .5s) linear; }
/* --- Gebäudekacheln --------------------------------------------------- */
.gebaeude { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }
/* Die Blätter liegen nicht in Reih und Glied */
.kachel {
position: relative;
display: flex; flex-direction: column; gap: .1rem;
padding: .7rem .9rem .8rem;
color: inherit;
text-decoration: none;
transform: rotate(var(--dreh, 0deg));
transition: transform .25s;
}
.kachel:nth-child(6n + 1) { --dreh: -.7deg; }
.kachel:nth-child(6n + 2) { --dreh: .5deg; }
.kachel:nth-child(6n + 3) { --dreh: -.3deg; }
.kachel:nth-child(6n + 4) { --dreh: .8deg; }
.kachel:nth-child(6n + 5) { --dreh: -1.1deg; }
.kachel:nth-child(6n) { --dreh: .4deg; }
.kachel:hover, .kachel:focus-visible { color: inherit; outline: none; transform: rotate(0deg) translateY(-3px); }
.kachel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .8rem; }
.kachel__name { font-family: var(--titel); font-size: 1.2rem; line-height: 1.1; color: var(--hell); }
.kachel__zeile { display: flex; justify-content: space-between; gap: .5rem; font-size: .92rem; }
.kachel .minibalken { margin: 3px 0 2px; }
.kachel__projekt { display: grid; gap: 0; margin-top: .35rem; padding-top: .3rem; border-top: 1px dotted var(--linie); }
.kachel__projekt-text { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; font-style: italic; color: var(--hell); }
.kachel__projekt-text > span:first-child { margin-right: auto; }
/* Prozentzahl nie umbrechen: "12" und "%" gehören zusammen. */
.kachel__projekt-text > span:last-child { white-space: nowrap; font-style: normal; }
.kachel__vorrat { display: grid; margin-top: .25rem; }
.kachel__vorrat-text { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
/* Beschädigt: verkohlter Rand */
.kachel--beschaedigt::before { filter: url(#verkohlt) drop-shadow(0 1px 1px rgba(8, 4, 1, .4)) drop-shadow(0 8px 12px var(--schatten)); }
.kachel--beschaedigt .ascii { color: var(--warn); }
/* Gebäudezeichnung mit der Feder (settlement/zeichnungen.py): Striche in
Tinte, Dächer schraffiert, alles leicht zittrig wie von Hand. */
.zeichnung {
display: block;
width: 100%; max-width: 132px; height: auto;
margin: .2rem auto .3rem;
overflow: visible;
fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
filter: url(#hand);
}
.zeichnung .s { fill: url(#schraffur); }
.zeichnung .d { stroke-width: 1; }
.zeichnung--beschaedigt { stroke: var(--warn); }
/* Im Bau: der ganze Bau als gestrichelter Entwurf, darüber dieselbe Zeichnung
ausgezogen, von unten bis --p. */
.bau__entwurf { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 3; }
.bau__entwurf .s { fill: none; }
.bau__fertig { clip-path: inset(calc(100% - var(--p)) -4px -4px -4px); }
.fenster__streifen .zeichnung { max-width: 190px; margin: .5rem auto; }
/* Gezeichnete Bilder (core/bilder.py, concept/bilder.md): Im Bild steht nur,
wo Tinte ist; die Farbe kommt von hier. Das Bild liegt im ::before, damit
::after für einen Hinweis frei bleibt. Keine Filter darauf, die wären bei
jedem Neuzeichnen teuer. */
.bild { display: block; position: relative; width: 100%; aspect-ratio: 7 / 3; --tinte-bild: var(--text); --bild-fuellen: contain; }
.bild::before {
content: ""; position: absolute; inset: 0;
background: var(--tinte-bild);
-webkit-mask: var(--bild) center / var(--bild-fuellen) no-repeat;
mask: var(--bild) center / var(--bild-fuellen) no-repeat;
}
.bild--beschaedigt { --tinte-bild: var(--warn); }
/* Im Bau: das ganze Gebäude als blasse Vorzeichnung, in Tinte erst, wenn es
steht. Wie weit der Bau ist, zeigt der Balken daneben. */
.bild--im_bau::before { background: var(--dim); opacity: .42; }
/* In der Kachel nur die Mitte, im Fenster das ganze Bild */
.kachel .bild { aspect-ratio: 2 / 1; margin: .2rem 0 .3rem; --bild-fuellen: cover; }
.fenster__streifen .bild { max-width: 520px; margin: .4rem auto; }
/* Ein Bild über Meldung oder Bericht: Expedition, Vorbereitung, Ansturmbericht */
.szene .bild { max-width: 460px; margin: 0 auto .5rem; }
/* Gebäude ohne Federzeichnung zeigen ihre ASCII-Zeichnung in Tinte. */
.ascii {
display: block;
white-space: pre;
font-family: var(--mono);
font-size: 12px; line-height: 1.15; letter-spacing: 0;
color: var(--text);
margin: .5rem 0 .4rem;
min-height: 9.2em;
overflow: hidden;
}
.ascii .offen { color: var(--dim); opacity: .75; }
.fenster__streifen {
display: flex; justify-content: center;
padding: .3rem 0;
border-bottom: 1px dotted var(--linie);
overflow-x: auto;
}
.fenster__streifen .ascii { min-height: 0; margin: 8px 0; }
.fenster__streifen--eingebettet { border: 1px dotted var(--linie); margin: 8px 0; }
/* --- Erweiterungen und Bauprojekte ----------------------------------------- */
/* Was zur Wahl steht, liegt als kleine Zettel auf dem Blatt, jeder leicht
anders gedreht. Ohne Nagel und ohne Heben: Angeklickt wird der Knopf darauf. */
.erweiterungen { list-style: none; margin: .3rem 0 .2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem 1.2rem; align-items: start; }
.erweiterung {
display: grid; gap: .3rem;
padding: .7rem .9rem .85rem;
background:
linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%),
var(--textur-fasern),
var(--papier-hell);
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
box-shadow: inset 0 0 14px rgba(92, 58, 22, .22), 0 1px 1px rgba(8, 4, 1, .45), 0 4px 7px rgba(20, 10, 2, .3);
transform: rotate(-.6deg);
}
.erweiterung:nth-child(2n) { transform: rotate(.5deg); }
.erweiterung:nth-child(3n) { transform: rotate(-.2deg); }
.erweiterung .knopf { margin-top: .2rem; }
.erweiterung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.erweiterung__zustand { margin-left: auto; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.erweiterung--fertig .erweiterung__kopf .hell { color: var(--text); }
/* Ein laufendes Projekt: gerahmter Kasten auf dem Blatt */
.projekt { display: grid; gap: .6rem; padding: .7rem .9rem .8rem; border: 1px solid var(--rahmen); background: var(--flaeche); }
/* Beitragen links, Abbrechen rechts in einer Zeile. */
.projekt__aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.abbrechen { margin: 0; }
.projekt form { margin: 0; }
.fortschritt { display: grid; grid-template-columns: minmax(80px, 9em) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fortschritt > .etikett { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fortschritt > :last-child { color: var(--hell); min-width: 7ch; text-align: right; }
.beitrag { display: grid; gap: 8px; }
/* Laufendes Projekt mit Namen: Kopfzeile im Kasten, klar getrennt von fertigen Erweiterungen darüber. */
.projekt__kopf {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
margin: -2px 0 2px; padding-bottom: .5rem;
border-bottom: 1px dotted var(--linie);
}
.projekt__titel { font-family: var(--titel); font-size: 1.2rem; line-height: 1.1; color: var(--hell); }
.projekt__status { margin-left: auto; color: var(--hell); font-variant-caps: all-small-caps; letter-spacing: .1em; }
.erweiterungen + .projekt, .liste + .projekt { margin-top: 6px; }
/* --- Zahleneingaben: Schnellwahl und Segmente -------------------------- */
/* Eine Zahl steht auf der Linie zwischen einem Minus und einem Plus, beide mit
der Feder gezogen. Kürzel daneben ("Zuletzt 20", "Max", "Alles Mögliche
eintragen") sind Stempel in schwarzer Tinte. Im Markup stehen Feld und
Knöpfe wie zuvor hintereinander (ohne JavaScript bleibt nur das Feld); die
Reihenfolge macht "order", .eingabe und .schnellwahl lösen sich dafür auf. */
.zahl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.zahl > .eingabe, .zahl > .schnellwahl:not([hidden]) { display: contents; }
.zahl input, .sportform .zahl input, .beitrag__feld .zahl input {
flex: none; order: 0;
width: 4.4ch; max-width: none; padding: 0;
text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.2;
}
.schnellwahl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
p.schnellwahl { display: flex; }
.schnell[hidden] { display: none; }
.schnell {
order: 2; margin-left: 12px;
padding: .05rem .5rem .1rem;
background: none;
border: 2px solid var(--hell); border-radius: 5px 7px 6px 8px / 7px 5px 8px 6px;
box-shadow: inset 0 0 0 1px rgba(26, 18, 10, .22);
color: var(--hell); font: inherit; font-size: .9rem; font-weight: 600;
font-variant-caps: all-small-caps; letter-spacing: .1em;
white-space: nowrap; cursor: pointer;
opacity: .78; transform: rotate(-4deg);
transition: transform .12s, opacity .12s;
}
.schnell:hover, .schnell:focus-visible { opacity: 1; transform: rotate(-4deg) scale(1.07); outline: none; }
p.schnellwahl .schnell { margin-left: 0; transform: rotate(-1.5deg); }
p.schnellwahl .schnell:hover, p.schnellwahl .schnell:focus-visible { transform: rotate(-1.5deg) scale(1.04); }
/* Minus und Plus: Die Schrittweite steht weiter im Knopf, fürs Vorlesen. */
.schnell[data-schnell="plus"], .handel__pfeil {
order: 1; flex: none;
width: 34px; height: 34px; margin: 0; padding: 0;
border: 0; border-radius: 0; box-shadow: none;
background: var(--hell);
-webkit-mask: var(--zeichen) center / 20px no-repeat; mask: var(--zeichen) center / 20px no-repeat;
font-size: 0; opacity: 1; transform: none; cursor: pointer;
transition: transform .12s, background-color .12s;
--zeichen: url("data:image/svg+xml,");
}
.schnell[data-schnell="plus"][data-wert^="-"], .handel__pfeil[data-wert^="-"] {
order: -1;
--zeichen: url("data:image/svg+xml,");
}
.schnell[data-schnell="plus"]:hover, .schnell[data-schnell="plus"]:focus-visible,
.handel__pfeil:hover, .handel__pfeil:focus-visible { background: var(--krit); transform: scale(1.18) rotate(-4deg); outline: none; }
/* Einsatz im Kampf: eine Strichliste, die man setzt. */
.segmente { display: inline-flex; align-items: flex-end; gap: 6px; padding: 2px 0; outline: none; }
.segmente:focus-visible { outline: 2px dashed var(--krit); outline-offset: 4px; }
.segment {
width: 12px; height: 24px; padding: 0;
background: none; border: 0;
cursor: pointer;
position: relative;
}
.segment::before {
content: "";
position: absolute; left: 5px; top: 1px; bottom: 1px;
border-left: 1.6px dotted var(--dim);
transform: rotate(3deg);
}
.segment:nth-child(2n)::before { transform: rotate(-2deg); }
.segment:hover::before { border-left-color: var(--hell); border-left-style: solid; }
.segment--an::before { left: 4px; border-left: 3px solid var(--akzent); border-radius: 1px 1px 2px 1px; }
.segment--gesperrt, .segment--gesperrt:hover { opacity: .3; cursor: not-allowed; }
.segmente__kraft { margin-left: 8px; font-size: .92rem; font-style: italic; color: var(--akzent); white-space: nowrap; align-self: center; }
.segmente__wert { min-width: 2ch; margin-left: 8px; color: var(--hell); font-size: 1.6rem; line-height: 1; align-self: center; }
/* Brunnen: der Schacht im Schnitt, daneben was heute noch geht. */
.foerderung { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 0 1.8rem; align-items: center; }
.foerderung__seite { display: grid; gap: .6rem; }
.pegel { display: block; width: 100%; height: auto; overflow: visible; }
.pegel__tinte { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#hand); }
.pegel__tinte .d { stroke-width: .8; }
.pegel__tinte .s { fill: url(#schraffur); }
.pegel__wasser { fill: var(--wasser); transform: scaleY(var(--p)); transform-origin: 75px 198px; }
.pegel__stand { transform: translateY(calc((1 - var(--p)) * 128px)); }
.pegel__stand path { fill: none; stroke: var(--hell); stroke-width: 1.1; }
.pegel text { font-family: var(--schrift); font-size: 11px; font-style: italic; fill: var(--dim); }
.pegel .pegel__zahl { font-size: 17px; font-style: normal; fill: var(--hell); }
@media (max-width: 600px) { .foerderung { grid-template-columns: 110px minmax(0, 1fr); gap: 0 1rem; } }
/* Ein Eimer je Förderung, die heute noch frei ist. */
.lichter { display: flex; align-items: center; gap: .35rem; }
.lichter > .etikett { margin-right: .5rem; }
.licht {
width: 21px; height: 24px;
background: var(--dim);
-webkit-mask: var(--eimer) center / contain no-repeat; mask: var(--eimer) center / contain no-repeat;
opacity: .5;
--eimer: url("data:image/svg+xml,");
}
.licht--an {
background: var(--hell); opacity: 1;
--eimer: url("data:image/svg+xml,");
}
.foerdern { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.beitrag__felder { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.beitrag__feld { display: grid; gap: 2px; font-size: .95rem; }
.beitrag__feld .eingabe input,
.eingabe--klein input { max-width: 6ch; font-size: 1.05rem; }
.eingabe--klein { display: inline-flex; gap: 6px; }
.verweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.verweis {
display: flex; justify-content: space-between; gap: 12px;
padding: .15rem 0;
color: var(--krit);
font-style: italic;
text-decoration: none;
}
.verweis::after { content: "→"; }
.verweis > span:nth-child(2) { margin-left: auto; }
.verweis:hover > span:nth-child(2), .verweis:hover::after { text-decoration: underline; }
.kopf__hinweis { margin-top: .5rem; padding-top: .3rem; border-top: 1px dotted var(--rahmen); }
/* --- Rückfrage -------------------------------------------------------- */
/* Eine kleine Urkunde. Bestätigt wird durch Druck auf das Wachssiegel. */
.rueckfrage {
position: fixed; inset: 0; z-index: 70;
display: grid; place-items: center;
padding: 16px;
background: rgba(12, 7, 3, .45);
}
.fenster--klein { width: min(520px, 100%); padding: 0 2.2rem 1.5rem; text-align: center; }
.fenster--klein .fenster__leiste { justify-content: center; border-bottom: 0; padding-bottom: 0; }
.fenster--klein .fenster__inhalt { padding-top: .6rem; gap: .9rem; }
.rueckfrage .warnung, .rueckfrage .hinweis { padding: 0; text-indent: 0; background: none; color: var(--text); font-style: normal; }
.rueckfrage .warnung::before, .rueckfrage .hinweis::before { content: none; }
.rueckfrage__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 2.6rem; }
.siegelknopf {
display: inline-flex; flex-direction: column; align-items: center; gap: .05rem;
padding: 0; border: 0; background: none;
font-variant-caps: all-small-caps; letter-spacing: .1em;
color: var(--krit);
cursor: pointer;
}
.rueckfrage--ok .siegelknopf { color: var(--akzent); }
.siegelknopf svg { width: 104px; height: 104px; filter: drop-shadow(0 2px 2px rgba(30, 5, 0, .45)); transition: transform .2s; }
.siegelknopf:hover svg { transform: rotate(-4deg); }
.siegelknopf.gedrueckt svg { animation: siegel-druck .45s ease forwards; }
@keyframes siegel-druck {
0% { transform: scale(1); }
40% { transform: scale(.9); filter: drop-shadow(0 0 1px rgba(30, 5, 0, .6)) brightness(.85); }
100% { transform: scale(1); }
}
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
/* Erledigt: ein Haken mit der Feder */
.haken { width: .95em; height: .95em; margin-right: .35rem; vertical-align: -.08em; fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liste__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 9em; align-items: center; gap: 12px; min-height: 30px; }
.liste__zeile--leer .zeile-punkte > :last-child { color: var(--dim); }
.liste__zeile--breit { grid-template-columns: minmax(0, 1fr) auto; }
.liste__aktion { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; text-align: right; }
.liste__aktion form { margin: 0; }
/* Auswahl einer Waffenklasse: Die Erklärung gehört zur Klasse über ihr und
steht deshalb dicht daran — dafür mehr Luft bis zum nächsten Eintrag. */
.wahlliste { gap: 1rem; }
.wahlliste__klasse { display: grid; gap: 2px; min-width: 0; }
.umlagern { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 12px; margin: 0; }
/* --- Kennzahlen und Tabellen ------------------------------------------ */
/* Grosse Zahl, darunter ihr Etikett. Getrennt durch feine Linien statt Kästen. */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kennzahl { display: grid; gap: 0; justify-items: center; align-content: start; padding: .1rem .6rem .25rem; border-left: 1px solid var(--linie); text-align: center; }
.kennzahl:first-child { border-left: 0; }
.kennzahl__wert { font-size: 2.2rem; line-height: 1; color: var(--hell); }
.kennzahl__zeile { font-size: .88rem; font-style: italic; color: var(--dim); }
/* Rechnungsbuch */
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.tabelle th {
padding: .2rem .6rem .2rem 0;
border-bottom: 3px double var(--linie);
font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: .08em;
text-align: left;
color: var(--dim);
white-space: nowrap;
}
.tabelle td { padding: .3rem .6rem .3rem 0; border-bottom: 1px dotted var(--linie); vertical-align: baseline; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; }
.tabelle form { margin: 0; }
.tabelle tr.storniert td { color: var(--dim); }
.tabelle tr.storniert td:nth-child(3) { text-decoration: line-through; }
.tabelle tr.tabelle__eigene td { color: var(--hell); background: var(--flaeche); font-weight: 500; }
.tabelle .tabelle__abstand { padding-left: 24px; }
/* --- Sportverlauf: Balken und Säulenreihen ---------------------------- */
.sportgrafik .reiter { margin-top: 0; }
/* Kampfkraft im Charakterfenster: je Hand ein Block, im Expeditionskampf mehrere. */
.kampfkraft .reiter { margin-top: 0; }
.kampfkraft__hand { display: grid; gap: 8px; }
.kampfkraft__hand + .kampfkraft__hand { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--linie); }
.sportgrafik tr.storniert td:nth-child(3) { text-decoration: none; }
/* Die Zeiträume als Auswahl: unterstrichene Wörter, das gewählte rot. */
.zeitwahl { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.zeitwahl a { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }
.zeitwahl a:hover { color: var(--hell); }
.zeitwahl a[aria-current] { color: var(--krit); text-decoration: underline solid; }
/* Schwer und leicht liegen im selben Balken hintereinander. */
.sportbalken { display: flex; height: 9px; min-width: 80px; border: 1px solid var(--text); border-top: 0; }
.sportbalken > i { display: block; background: var(--akzent); }
.sportbalken > .sportbalken__leicht { opacity: .45; }
.tabelle td.sportbalken-zelle { width: 40%; vertical-align: middle; }
.sportlegende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; }
.sportlegende .sportbalken { min-width: 0; width: 14px; }
.sportlegende .sportbalken > i { width: 100%; }
/* Gestapelte Säulen. Jede Spalte ist gleich breit, der Abstand steckt im Rand
der Abschnitte — so steht die Achse darunter genau unter den Säulen. */
.stapel { display: grid; gap: 4px; }
/* Steht der Zeiger auf einer Spalte, sitzt ihre Summe auf der Säule: als
letztes Stück des Stapels, mittig, auch wenn sie breiter ist als die Spalte.
Die leere Zeile über der Grafik ist der Platz dafür über der höchsten Säule. */
.stapel__kopf { height: 1.4rem; }
.stapel__saeulen { display: flex; height: 180px; border-bottom: 1.5px solid var(--hell); }
.stapel__saeulen > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; }
.stapel__saeulen > span:hover { background: var(--flaeche); }
.stapel__saeulen > span:hover::after {
content: attr(data-summe);
flex: 0 0 auto; align-self: center;
font-size: .92rem; font-weight: 600; line-height: 1.3rem; color: var(--hell); white-space: nowrap;
}
.stapel__saeulen i { flex: 0 0 auto; margin: 0 1px; border-top: 1px solid var(--papier); background: var(--dim); }
/* Abdunkeln über einen Schatten statt über filter: ein Filter würde den
Hinweis an den Abschnitt binden und mit verändern. */
.stapel__saeulen i:hover { box-shadow: inset 0 0 0 999px rgba(20, 12, 6, .3); }
/* Der Hinweis hängt an der Grafik, nicht am Abschnitt: mittig über den Säulen
wird er am Fensterrand nicht abgeschnitten. Er sitzt über der Kopfzeile,
damit er die Summe der Spalte nicht verdeckt. */
.stapel__saeulen { position: relative; }
.stapel__saeulen i[data-tipp] { position: static; }
.stapel__saeulen i[data-tipp]::after { top: auto; bottom: calc(100% + 1.4rem + 10px); }
.stapel__achse { display: flex; font-size: .8rem; color: var(--dim); }
.stapel__achse > span { flex: 1 1 0; min-width: 0; padding-left: 1px; overflow: hidden; white-space: nowrap; }
.stapel__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .92rem; }
.stapel__legende li { display: flex; align-items: center; gap: 6px; }
.stapel__legende i { width: 10px; height: 10px; background: var(--dim); }
.stapel__legende .stapel__ohne { color: var(--dim); }
.stapel .sport-farbe-1 { background: var(--sport-1); }
.stapel .sport-farbe-2 { background: var(--sport-2); }
.stapel .sport-farbe-3 { background: var(--sport-3); }
.stapel .sport-farbe-4 { background: var(--sport-4); }
.stapel .sport-farbe-5 { background: var(--sport-5); }
.stapel .sport-farbe-6 { background: var(--sport-6); }
.stapel .sport-farbe-7 { background: var(--sport-7); }
@media (max-width: 600px) {
.sportgrafik .sportgrafik__breit { display: none; }
}
/* --- Umlandskarte ---------------------------------------------------- */
/* Eine Landkarte: doppelter Rahmen mit Massstabsleiste, Spalten und Zeilen am
Rand, Unerkundetes schraffiert. Das Markup ist ein Gitter aus Verweisen
(expedition/_karte.html, _feld.html); alles hier ist Gestalt. */
.lage { display: grid; gap: .2rem; }
.lage__stand { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--dim); }
.lage__meldung { min-height: 1.45em; max-width: 75ch; color: var(--hell); }
.raster {
position: relative;
display: grid; gap: 0;
padding: 12px 22px 22px 6px;
border: 3px double var(--hell);
}
/* Massstabsleiste oben und unten im Rahmen */
.raster::before, .raster::after {
content: "";
position: absolute; left: calc(6px + 1.4em); right: 22px; height: 5px;
border: 1px solid var(--hell);
background: repeating-linear-gradient(90deg, var(--hell) 0 10%, transparent 10% 20%);
}
.raster::before { top: 3px; }
.raster::after { bottom: 8px; }
.raster__zeile { display: grid; grid-template-columns: 1.4em repeat(5, minmax(0, 1fr)); gap: 0; }
.raster__zeile:first-child { margin-bottom: 2px; }
.achse { display: grid; place-items: center; font-size: .92rem; color: var(--text); }
.kartenfeld {
position: relative; z-index: 1;
display: grid; grid-template-rows: auto 1fr auto;
aspect-ratio: 1; min-width: 0;
margin: 0 -1px -1px 0;
padding: 3px 6px 4px;
border: 1px dashed var(--linie);
color: var(--text);
font-size: .8rem; line-height: 1.2;
text-decoration: none;
overflow: hidden;
}
/* Der Block der Felder hat einen festen Rand, innen nur gestrichelte Linien. */
.raster__zeile > .kartenfeld:first-of-type { border-left: 1.4px solid var(--hell); }
.raster__zeile > .kartenfeld:last-child { border-right: 1.4px solid var(--hell); }
.raster__zeile--kernstadt + .raster__zeile > .kartenfeld,
.raster__zeile:first-child + .raster__zeile:not(.raster__zeile--kernstadt) > .kartenfeld { border-top: 1.4px solid var(--hell); }
.raster__zeile:last-child > .kartenfeld { border-bottom: 1.4px solid var(--hell); }
/* Die Kernstadt: ein breites Feld über Zeile A, mit Dächern und Türmen. */
.raster__zeile--kernstadt { margin-bottom: 7px; }
.raster__zeile--kernstadt .kartenfeld {
grid-column: 2 / -1; aspect-ratio: auto; min-height: 76px;
border: 1.4px solid var(--hell);
background: url("data:image/svg+xml,") center 54% / auto 40px no-repeat;
}
.raster__zeile--kernstadt .kartenfeld--erreichbar { background: url("data:image/svg+xml,") center 54% / auto 40px no-repeat, repeating-linear-gradient(-45deg, rgba(53, 37, 26, .1) 0 1px, transparent 1px 6px); }
.raster__zeile--kernstadt .kartenfeld--blockiert { background: url("data:image/svg+xml,") center 54% / auto 40px no-repeat, repeating-linear-gradient(-45deg, rgba(53, 37, 26, .26) 0 1px, transparent 1px 4px); }
.raster__zeile--kernstadt .kartenfeld__fuss { justify-items: center; }
/* "Beruhigt" steht links unten neben dem Namen, nicht über der Stadtzeichnung in der Mitte. */
.raster__zeile--kernstadt .kartenfeld__tag { position: absolute; left: 0; bottom: 0; }
.unendlich { font-size: 1.5em; line-height: .6; vertical-align: -.1em; }
.kartenfeld__kopf { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 2px; }
.kartenfeld__k { color: var(--dim); }
/* Alle Angaben im Feld sind etwa gleich gross; die Sichtungen heben sich nur
durch Farbe und Strichstärke ab. */
.kartenfeld__spanne { color: var(--hell); font-size: .9rem; font-weight: 600; white-space: nowrap; }
/* Unruhe des Felds: je Stufe ein roter Strich unter der Koordinate. */
.kartenfeld__unruhe { grid-row: 2; align-self: start; display: flex; gap: 3px; margin-top: 2px; }
.kartenfeld__unruhe > span { width: 2px; height: 9px; border-radius: 1px; background: var(--krit); transform: rotate(4deg); }
.kartenfeld__unruhe > span:nth-child(2n) { transform: rotate(-3deg); }
.kartenfeld__fuss { position: relative; z-index: 1; grid-row: 3; display: grid; gap: 0; min-width: 0; }
.kartenfeld__ort { color: var(--hell); font-size: .82rem; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Landmarke: ein kleines Zeichen vor dem Namen */
a.kartenfeld .kartenfeld__ort::before {
content: "";
display: inline-block; width: .8em; height: .85em; margin-right: .25em; vertical-align: -.08em;
background: var(--hell);
-webkit-mask: var(--ort) center / contain no-repeat; mask: var(--ort) center / contain no-repeat;
--ort: url("data:image/svg+xml,");
}
.raster__zeile--kernstadt a.kartenfeld .kartenfeld__ort::before { content: none; }
.kartenfeld__ort-kurz { display: none; }
.kartenfeld__tag { color: var(--hell); font-size: .9rem; font-variant-caps: all-small-caps; letter-spacing: .04em; line-height: 1.05; }
.kartenfeld__tag--ok { color: var(--akzent); }
/* Punktwolke (pergament.js): Tintenpunkte in der Farbe der Risikobewertung. */
.kartenfeld__wolke { position: absolute; inset: 0; pointer-events: none; }
.kartenfeld__wolke i { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--text); opacity: .85; }
.kartenfeld__wolke i:nth-child(3n) { width: 5px; height: 5px; }
.stufe-tragbar .kartenfeld__wolke i { background: var(--akzent); }
.stufe-riskant .kartenfeld__wolke i { background: var(--warn); }
.stufe-ueberlegen .kartenfeld__wolke i { background: var(--krit); }
/* Nester: ein Höhleneingang in der Mitte des Felds, der grosse grösser.
Geräumt bleibt er bis zum Wochenwechsel klein und verschüttet im Fuss. */
.kartenfeld__nest { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); line-height: 0; pointer-events: none; }
.kartenfeld__nest .nest { width: 38px; height: 27px; }
.kartenfeld__nest .nest--fern { width: 54px; height: 38px; }
/* Solange das Nest steht, ist die Zahl der Sichtungen verborgen: drei rote Fragezeichen. */
.kartenfeld--nest .kartenfeld__spanne { color: var(--krit); }
.kartenfeld__nest-geraeumt { display: block; justify-self: end; line-height: 0; }
.nest--klein { width: 20px; height: 14px; }
.neststand { display: inline-flex; align-items: flex-end; gap: .3rem; }
/* Kolonie: die Palisade, nicht anklickbar */
.kartenfeld--kolonie { background: url("data:image/svg+xml,") center 46% / 58% auto no-repeat; }
.kartenfeld--kolonie .kartenfeld__fuss { justify-items: center; }
/* Wie ein Ortsname auf einer Karte aus dem Kupferstich: gesperrte Versalien. */
.kartenfeld--kolonie .kartenfeld__ort { font-style: normal; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; margin-right: -.2em; }
/* Unerkundet: schraffiert; was kein Weg erreicht, dichter */
.kartenfeld--erreichbar { background: repeating-linear-gradient(-45deg, rgba(53, 37, 26, .1) 0 1px, transparent 1px 6px); }
.kartenfeld--blockiert, .kartenfeld--unbekannt { background: repeating-linear-gradient(-45deg, rgba(53, 37, 26, .26) 0 1px, transparent 1px 4px); }
.kartenfeld--blockiert .kartenfeld__spanne, .kartenfeld--unbekannt .kartenfeld__spanne { color: var(--dim); }
.kartenfeld--frei .kartenfeld__spanne { color: var(--akzent); }
a.kartenfeld:hover, a.kartenfeld:focus-visible { color: var(--text); outline: none; box-shadow: inset 0 0 0 999px rgba(154, 38, 24, .07); }
/* Risikobewertung, nur mit Spähwarte */
.stufe-tragbar .kartenfeld__spanne { color: var(--akzent); }
.stufe-riskant .kartenfeld__spanne { color: var(--warn); }
.stufe-ueberlegen .kartenfeld__spanne { color: var(--krit); }
/* Auswahl: ein roter Kringel von Hand, damit Grün für "tragbar" frei bleibt */
.kartenfeld--gewaehlt { z-index: 3; overflow: visible; }
.kartenfeld--gewaehlt::after {
content: "";
position: absolute; inset: -5px -3px -4px -4px;
border: 2.2px solid var(--krit);
border-radius: 47% 53% 50% 50% / 53% 46% 54% 47%;
transform: rotate(-3deg);
pointer-events: none;
}
.raster__zeile--kernstadt .kartenfeld--gewaehlt::after { border-radius: 14% 12% 15% 11% / 48% 52% 46% 54%; transform: rotate(-.4deg); }
/* Legende unter der Karte: je ein Pinseltupfer in der Farbe der Bewertung */
.raster__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.8rem; font-style: italic; }
.raster__legende > span { display: flex; align-items: center; gap: .5rem; }
.legende__farbe { width: 28px; height: 10px; border-radius: 2px 6px 5px 2px / 3px 6px 4px 3px; background: currentColor; filter: url(#pigment); }
/* Breit: die Angaben zum Feld stehen neben der Karte. */
@media (min-width: 900px) {
.fenster--karte .fenster__inhalt { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 1.8rem; align-items: start; }
.fenster--karte .lage { grid-column: 1 / -1; }
.fenster--karte .raster, .fenster--karte .raster__legende { grid-column: 1; }
.fenster--karte .beiblatt { grid-column: 2; grid-row: 2 / span 2; }
.fenster--karte .beiblatt:has(.abschnitt) { min-height: 21rem; }
}
#feld-detail .abschnitt:first-of-type { border-top: 0; padding-top: 0; }
#feld-detail .zeile-punkte { margin: .05rem 0; }
#feld-detail .kampf__knoepfe { margin-top: .5rem; }
/* --- Expedition ------------------------------------------------------- */
.aktionen { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.aktion { display: grid; gap: 4px; justify-items: start; margin: 0; }
.log--bericht li { grid-template-columns: 7.5em minmax(0, 1fr); }
.log--bericht li + li .log__zeit:empty { visibility: hidden; }
/* Lagefelder: Kästen mit dem Etikett in der oberen Linie. Nur Anzeige. */
.lagefelder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem .6rem; margin-top: .4rem; }
/* Die Lage über einer Expedition: kleine Zettel, jeder leicht anders gedreht.
Das Gepäck lässt sich anklicken und trägt deshalb einen Nagel
(pergament.js) und hebt sich. */
.lagefeld {
position: relative;
display: grid; align-content: start; gap: 2px;
min-width: 0;
padding: .45rem .65rem .55rem;
border: 0; border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background:
linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%),
var(--textur-fasern),
var(--papier-hell);
box-shadow: inset 0 0 12px rgba(92, 58, 22, .24), 0 1px 1px rgba(8, 4, 1, .45), 0 4px 7px rgba(20, 10, 2, .3);
color: inherit; font: inherit; text-align: left;
transform: rotate(var(--dreh, -.8deg));
}
.lagefeld:nth-child(2n) { --dreh: .7deg; }
.lagefeld:nth-child(3n) { --dreh: -.3deg; }
.lagefeld > .etikett { line-height: 1.3; }
.lagefeld > .nagel { top: -9px; width: 22px; margin-left: -11px; }
.lagefeld__wert { font-size: 1.6rem; line-height: 1.05; color: var(--hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lagefeld__einheit { font-size: 1.05rem; color: var(--dim); }
.lagefeld__zeile { font-size: .85rem; font-style: italic; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lagefeld--knopf { cursor: pointer; padding-bottom: .9rem; transition: transform .18s; }
.lagefeld--knopf:hover, .lagefeld--knopf:focus-visible { outline: none; transform: rotate(0deg) translateY(-3px); }
/* Unruhe der Expedition: Striche unter den Sichtungen. */
.unruhe { display: flex; gap: 5px; margin: 3px 0 1px; }
.unruhe__feld { width: 0; height: 12px; border-left: 1.5px dotted var(--dim); transform: rotate(3deg); }
.unruhe__feld:nth-child(2n) { transform: rotate(-2deg); }
.unruhe__feld--an { border-left: 2.6px solid var(--krit); }
/* Geplündertes Feld: der ganze Kasten in Ocker. */
.lagefeld--warn { outline: 1.5px solid var(--warn); outline-offset: -5px; }
.lagefeld--warn > .etikett, .lagefeld--warn .lagefeld__wert, .lagefeld--warn .lagefeld__zeile { color: var(--warn); }
/* Ein offenes Nest im Feld: derselbe Kasten, rot. */
.lagefeld--krit { outline: 1.5px solid var(--krit); outline-offset: -5px; }
.lagefeld--krit > .etikett, .lagefeld--krit .lagefeld__wert, .lagefeld--krit .lagefeld__zeile { color: var(--krit); }
/* Ergiebigkeit unter der Umlandskarte: fünf Säcke, grob. Gefüllt ist, was noch da ist.
Geplündert: alle leer, Umrisse rot. */
.vorrat { display: inline-flex; gap: 2px; align-self: center; }
.vorrat__feld {
flex: none; width: 16px; height: 16px;
background: var(--dim); opacity: .5;
-webkit-mask: var(--sack) center / contain no-repeat; mask: var(--sack) center / contain no-repeat;
--sack: url("data:image/svg+xml,");
}
.vorrat__feld--an {
background: var(--hell); opacity: 1;
--sack: url("data:image/svg+xml,");
}
.vorrat--knapp .vorrat__feld--an { background: var(--warn); }
.vorrat--gepluendert .vorrat__feld { background: var(--krit); opacity: .8; }
/* Dieselbe Leiste für die Unruhe: rote Striche, gesetzt ist, was aufgerührt ist. */
.vorrat--unruhe { gap: 6px; align-items: flex-end; }
.vorrat--unruhe .vorrat__feld { width: 0; height: 18px; background: none; -webkit-mask: none; mask: none; border-left: 2px dotted var(--text); opacity: .75; transform: rotate(3deg); }
.vorrat--unruhe .vorrat__feld:nth-child(2n) { transform: rotate(-2deg); }
.vorrat--unruhe .vorrat__feld--an { border-left: 3px solid var(--krit); opacity: 1; }
/* Steht am rechten Rand des Beiblatts: der Hinweis hängt rechtsbündig darunter. */
.vorrat--unruhe[data-tipp]::after { left: auto; right: -4px; transform: translateY(-2px) rotate(-1deg); }
.vorrat--unruhe[data-tipp]:hover::after { transform: rotate(-1deg); }
/* Lasche am unteren Rand: zum Auf- und Zuklappen. */
.lagefeld__lasche {
position: absolute; left: 50%; bottom: 0;
transform: translate(-50%, 50%);
padding: 0 .7rem;
border: 0; border-radius: 0 0 4px 3px;
background: var(--textur-fasern), var(--papier-hell);
box-shadow: 0 2px 3px rgba(20, 10, 2, .35);
color: var(--krit);
font-size: .8rem; line-height: 1.2;
}
.lagefeld__lasche::before { content: "▾"; }
.lagefeld--knopf[aria-expanded="true"] .lagefeld__lasche::before { content: "▴"; }
.lagefeld--energie { padding-right: 44px; }
[data-energie-zahl] { transition: color .4s; }
[data-energie-zahl].neu { color: var(--akzent); }
.lagefeld__plus { position: absolute; right: 8px; top: 50%; margin-top: -14px; width: 28px; height: 28px; }
.gepaeck-inhalt { margin-top: -6px; padding: .6rem .8rem; border: 1px dotted var(--rahmen); }
/* Kategorie als kleiner Vermerk neben dem Namen. */
.tag {
display: inline-block;
padding: 0 .3rem;
border: 1px solid var(--linie); border-radius: 2px;
color: var(--dim);
font-family: var(--schrift); font-size: .78rem; font-style: normal; line-height: 1.35;
font-variant-caps: all-small-caps; letter-spacing: .07em;
vertical-align: 1px;
}
.tag--warn { border-color: var(--warn); color: var(--warn); }
.tag--ok { border-color: var(--akzent); color: var(--akzent); }
.lagefeld__wert .tag { vertical-align: 5px; }
/* Stimmungstext: Fliesstext. */
.stimmung { font-style: italic; line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.ausgang .stimmung { color: var(--hell); margin: 2px 0 4px; }
/* Verlauf der Expedition: Zeit · was getan wurde · Angaben */
.log--einsatz li { grid-template-columns: 7.5em 11em minmax(0, 1fr); padding: 2px 0; border-bottom: 0; }
.log--einsatz li.log--neu:not(:first-child) { margin-top: 4px; padding-top: 6px; border-top: 1px dotted var(--linie); }
.log--einsatz .log__aktion { color: var(--hell); }
/* Entscheidungen untereinander, Kosten daneben. */
/* Ein gemeinsames Raster, damit alle Knöpfe gleich breit sind. */
.entscheidungen { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .6rem 1rem; }
.entscheidung { display: contents; }
.entscheidung .knopf { justify-self: stretch; text-align: left; white-space: nowrap; transform: rotate(-.5deg); }
.entscheidung .knopf:hover, .entscheidung .knopf:focus-visible { transform: rotate(-.5deg) scale(1.02); }
.entscheidung__kosten { color: var(--dim); }
.entscheidung__zahl { font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--hell); margin-right: 2px; }
.entscheidung--aus .entscheidung__zahl { color: var(--dim); }
.entscheidung__grund { display: block; font-size: .9rem; font-style: italic; }
/* Letzte Meldung einer Expedition: was die letzte Aktion ergeben hat.
Eigener Name, damit sie den Meldungsstreifen (.meldung) nicht umfärbt. */
.einsatzmeldung {
display: grid; gap: 2px;
padding: .55rem .9rem .6rem;
border-left: 3px double var(--hell);
background: var(--flaeche);
color: var(--hell);
cursor: default;
}
.einsatzmeldung__kopf { font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--dim); }
.einsatzmeldung__zeile { min-height: 1.45em; white-space: pre-wrap; }
/* Kampfausgang: unübersehbar. Ein eigener Zettel auf dem Blatt; die Farbe des
Ausgangs trägt der Titel und eine feine Linie innen am Rand. */
.ausgang, .bilanz {
border: 0; border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px;
background:
linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%),
var(--textur-fasern),
var(--papier-hell);
box-shadow: inset 0 0 18px rgba(92, 58, 22, .24), 0 1px 1px rgba(8, 4, 1, .45), 0 5px 9px rgba(20, 10, 2, .32);
outline: 1.5px solid currentColor; outline-offset: -8px;
}
.ausgang {
display: grid; gap: 4px; justify-items: center;
padding: 1.2rem 1.3rem 1.3rem;
text-align: center;
transform: rotate(-.35deg);
}
.ausgang--sieg { color: var(--akzent); }
.ausgang--abbruch { color: var(--warn); }
.ausgang--niederlage { color: var(--krit); }
.ausgang__titel { font-family: var(--titel); font-size: 3.2rem; line-height: 1; }
.rueckkehr .ausgang__titel { font-size: 3.6rem; }
.ausgang__zahlen { color: var(--hell); }
.ausgang__zeilen { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: .95rem; color: var(--text); }
.ausgang--neu { animation: tinte-nass 1.2s both; }
.zerlegt { display: grid; gap: 6px; margin-top: 4px; padding: .7rem .9rem; border: 1px solid var(--akzent); background: var(--flaeche); }
.zerlegt__summe { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--akzent); }
/* Kampf: eigene Kampfkraft gegen die geschätzte Gruppe. Zwei Zettel wie die
Lagefelder, nur grösser und gegeneinander gedreht; die Farbe der Seite
als Federrahmen innen. Ohne Nagel: nur Anzeige. */
.duell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .6rem; margin: .6rem 0 .5rem; }
.duell__seite {
position: relative;
display: grid; align-content: start; justify-items: center; gap: 2px;
padding: .8rem .7rem .75rem;
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background:
linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%),
var(--textur-fasern),
var(--papier-hell);
box-shadow: inset 0 0 14px rgba(92, 58, 22, .24), 0 1px 1px rgba(8, 4, 1, .45), 0 5px 9px rgba(20, 10, 2, .32);
outline: 1.5px solid; outline-offset: -6px;
text-align: center;
transform: rotate(-.9deg);
}
.duell__seite > .etikett { line-height: 1.3; }
.duell__seite--eigen { outline-color: var(--akzent); }
.duell__seite--eigen > .etikett, .duell__seite--eigen .duell__wert { color: var(--akzent); }
.duell__seite--gegner { outline-color: var(--krit); transform: rotate(.8deg); }
.duell__seite--gegner > .etikett, .duell__seite--gegner .duell__wert { color: var(--krit); }
.duell__wert { font-size: 2.9rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.duell__zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: .88rem; font-style: italic; color: var(--dim); }
.duell__gegen { align-self: center; font-style: italic; color: var(--dim); }
/* Die Gegenüberstellung als Messlatte: Gruppe als Rötelfeld, Verletzungsbereich
in Ocker, die eigene Kraft als Pigmentstrich. */
.vergleich { display: grid; gap: 3px; }
.vergleich__spur { position: relative; height: 27px; }
.vergleich__spur::before {
content: "";
position: absolute; inset: 17px 0 auto; height: 9px;
border-top: 1.5px solid var(--hell); border-inline: 1.5px solid var(--hell);
background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.2px), var(--hell) calc(10% - 1.2px) 10%) 0 0 / 100% 5px no-repeat;
filter: url(#hand);
}
.vergleich__band, .vergleich__verletzung, .vergleich__kraft { position: absolute; }
.vergleich__band { top: -3px; height: 21px; border-inline: 2px solid var(--krit); background: var(--muster-gegner); filter: url(#hand); }
.vergleich__verletzung { top: -3px; height: 21px; border-inline: 1.6px dashed var(--warn); background: var(--muster-verletzung); }
.vergleich__kraft { left: 0; top: 2px; height: 13px; border-radius: 2px 7px 6px 2px / 3px 7px 5px 3px; background: var(--akzent); filter: url(#pigment); transition: width .25s ease-out; }
.vergleich__achse { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-style: italic; color: var(--dim); }
/* Legende: dieselben Muster wie auf der Latte, als kleine Felder. */
.muster { display: inline-block; width: 1.5em; height: .8em; margin: 0 .3em 0 .7em; vertical-align: -.05em; }
.muster--gegner { background: var(--muster-gegner); border-inline: 1.5px solid var(--krit); }
.muster--verletzung { background: var(--muster-verletzung); border-inline: 1.2px dashed var(--warn); }
.muster--kraft { height: .55em; vertical-align: .05em; border-radius: 1px 4px 3px 1px; background: var(--akzent); }
.kampf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.einschaetzung { margin-top: 6px; text-align: center; font-size: 1.1rem; font-style: italic; }
/* Funde und Gepäck: zwei Spalten, Pfeile schieben dazwischen. */
.packen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.packen__spalte { display: grid; align-content: start; min-width: 0; padding: 0 .6rem 4px; border: 1px solid var(--rahmen); }
.packen__spalte--gepaeck { border: 3px double var(--hell); }
.packen__kopf { padding: .4rem 0 .25rem; border-bottom: 1px solid var(--linie); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--hell); }
.packen__zeile {
display: grid; align-items: center; gap: 8px;
padding: .3rem 0; border-bottom: 1px dotted var(--linie);
font-size: .95rem;
}
.packen__spalte--funde .packen__zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.packen__spalte--gepaeck .packen__zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
.packen__zeile:last-of-type { border-bottom: 0; }
/* Zweizeilig: oben der Name, darunter Kategorie und Gewicht je Stück. */
.packen__name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; color: var(--hell); }
.packen__info { font-size: .85rem; color: var(--dim); }
.packen__info .tag { margin-right: 4px; }
.packen__zahl { min-width: 2ch; color: var(--hell); font-size: 1.1rem; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.packen__menge { display: flex; align-items: baseline; gap: 6px; }
.packen__menge .eingabe--klein input { width: 3.5ch; max-width: 3.5ch; text-align: right; }
/* Feste Breite, damit der Zähler beim Erscheinen nichts verschiebt. */
.packen__delta { min-width: 3ch; font-size: .92rem; }
/* Leer: bleibt stehen, damit nichts springt, tritt aber zurück. */
.packen__zeile--leer .packen__name, .packen__zeile--leer .packen__zahl, .packen__zeile--leer input { color: var(--dim); opacity: .55; }
.packen__pfeile { gap: 2px; }
.pfeil--rein::before { content: "›"; }
.pfeil--rein-alle::before { content: "»"; }
.pfeil--raus::before { content: "‹"; }
.pfeil--raus-alle::before { content: "«"; }
.packen__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* Bestandsliste: eine gerahmte Spalte wie beim Packen, rechts Zahl und Aktion.
Die Zeilen teilen sich die Spalten des Rahmens, damit Zahlen und Knöpfe
untereinander stehen, egal wie breit der Knopf der einzelnen Zeile ist. */
.bestaende { display: grid; gap: 12px; }
.gegenstandsname__sterne { white-space: nowrap; color: var(--warn); }
.packen__spalte--liste { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 18px; }
.packen__spalte--liste > * { grid-column: 1 / -1; }
.packen__spalte--liste > .packen__zeile { grid-template-columns: subgrid; }
.packen__spalte > .systemzeile { padding: 8px 0 4px; }
.packen__kopf--zusatz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.packen__kopf form { margin: 0; }
.packen__kopf .knopf-leise { font-variant-caps: normal; letter-spacing: normal; }
.packen__aktion, .packen__aktion form { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
/* Schloss: im Privaten Lager gegen das Zerlegen gesperrt. Offen ein blasser
Umriss, gesperrt geschlossen und in voller Tinte. Der Hinweis hängt
rechtsbündig, sonst ragte er am rechten Rand aus dem Fenster. */
.schloss {
display: inline-grid; place-items: center;
width: 20px; height: 24px; padding: 0;
background: none; border: 0; cursor: pointer;
color: var(--dim);
transform: rotate(3deg);
transition: transform .12s, color .12s;
}
.schloss svg { width: 15px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.schloss--zu { color: var(--hell); --schloss-loch: var(--papier); }
.schloss--zu svg { fill: currentColor; opacity: 1; }
.schloss:hover, .schloss:focus-visible { outline: none; transform: rotate(0deg) translateY(-2px); }
.schloss:hover svg, .schloss:focus-visible svg { opacity: 1; }
.schloss[data-tipp]::after { left: auto; right: -4px; transform: translateY(-2px) rotate(-1deg); }
.schloss[data-tipp]:hover::after { transform: rotate(-1deg); }
/* Kosten als Marken unter dem Posten; was fehlt, ist ockerfarben. */
.packen__kosten { display: flex; flex-wrap: wrap; gap: 4px; }
.packen__kosten .tag { margin: 0; color: var(--text); }
.packen__kosten .tag--warn { color: var(--warn); }
/* Im Gemeinschaftslager bucht jeder Pfeil sofort: je Zeile ein Formular. */
form.packen__pfeile { display: inline-flex; margin: 0; }
.pfeil {
min-width: 26px; height: 26px; padding: 0 0 3px;
background: transparent; border: 1px solid var(--rahmen); border-radius: 2px;
color: var(--hell); font: inherit; font-size: 1.15rem; line-height: 1;
cursor: pointer;
}
.pfeil:hover, .pfeil:focus-visible { border-color: var(--hell); background: var(--hell); color: var(--papier); outline: none; }
.pfeil:disabled { color: var(--dim); border-color: var(--linie); background: transparent; opacity: .45; cursor: default; }
.packlast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .95rem; }
.packlast--ueber { color: var(--krit); }
.packlast--ueber .minibalken > i { background: var(--krit); }
.klappe > summary { cursor: pointer; list-style: none; }
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: "▸ "; color: var(--krit); }
.klappe[open] > summary::before { content: "▾ "; }
.klappe[open] > summary { margin-bottom: 8px; }
.auswahl {
max-width: 22ch;
padding: 0 4px;
background: transparent;
border: 0; border-bottom: 1.5px solid var(--hell);
color: var(--hell);
}
.auswahl:focus { border-bottom-color: var(--krit); outline: none; }
.auswahl option { background: var(--papier-hell); color: var(--hell); }
/* Der Fuss des Kampfformulars: unter jedem Knopf steht, was er kostet. */
.kampf__knoepfe--fuss { align-items: start; gap: 12px 18px; }
.kampf__knopf { display: grid; justify-items: center; gap: 4px; }
.kampf__preis { font-size: .9rem; font-style: italic; color: var(--warn); min-height: 1em; }
/* Fähigkeit im Kampf: Knopf, daneben trocken die Wirkung. */
.kampf__einsatz { display: flex; align-items: center; gap: 8px; }
.kampf__preis.dim { color: var(--dim); }
/* --- Zugang ----------------------------------------------------------- */
.zugang {
width: min(520px, 100%);
margin: 0 auto;
padding: 10vh 0 48px;
display: grid;
gap: .6rem;
}
.zugang__marke { font-family: var(--titel); font-size: 3rem; line-height: 1; color: #eadcbc; text-shadow: 0 2px 3px #000; }
.zugang__marke::first-letter { font-family: var(--schrift); font-weight: 600; color: #c4462f; } /* wie .marke, heller für den Tisch */
.zugang__unterzeile { margin-bottom: 1.2rem; font-style: italic; color: #cdb992; text-shadow: 0 1px 2px #000; }
.zugang .fenster { width: 100%; padding-bottom: 2rem; }
.zugang__fuss { margin-top: 1rem; color: #cdb992; text-align: center; text-shadow: 0 1px 2px #000; }
.zugang__fuss a { color: #eadcbc; }
/* --- Lage: Lagebericht und nächster Ansturm --------------------------- */
.kolonielage { display: grid; gap: 1.2rem; }
/* Becherrand: nebeneinander zwischen Bericht und Ansturm-Box; untereinander
wäre das mitten im Bericht, dann sitzt er über der Ecke oben rechts. */
.kolonielage > .becherrand { right: -26px; top: -32px; }
@media (min-width: 720px) {
.kolonielage > .becherrand { right: auto; left: 59%; top: 12px; }
}
.kolonielage__kopf { margin-bottom: .35rem; font-style: italic; color: var(--dim); }
.kolonielage__text { display: grid; gap: .35rem; max-width: 70ch; color: var(--hell); }
.kolonielage__text p { min-height: 1.45em; }
/* Hinweis mit rubriziertem Absatzzeichen */
.kolonielage__hinweis { margin-top: .6rem; padding-left: 1.3rem; text-indent: -1.3rem; font-style: italic; }
.kolonielage__hinweis::before {
content: "¶";
display: inline-block; width: 1.3rem; text-indent: 0;
font-style: normal; font-size: 1.15em; line-height: 1;
color: var(--krit);
}
/* Statuszeilen: Etikett links, Wert in der Mitte, Verweis am rechten Rand. */
.kolonielage__zeilen { display: grid; margin-top: .8rem; border-top: 1px dotted var(--linie); }
.kolonielage__zeile {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8rem; align-items: baseline;
padding: .28rem 0; border-bottom: 1px dotted var(--linie);
}
.kolonielage__zeile > .etikett { grid-column: 1 / -1; color: var(--dim); }
.kolonielage__zeile > :nth-child(2) { color: var(--hell); }
.kolonielage__zeile > .warn:nth-child(2) { color: var(--warn); }
.kolonielage__teil { white-space: nowrap; }
.kolonielage__fort {
position: relative; display: inline-block;
width: 3.8rem; height: .6rem; margin: 0 .3rem;
border: 1px solid currentColor; border-top: 0;
color: var(--hell);
}
.kolonielage__fort::before {
content: "";
position: absolute; inset: 0 auto 1.5px 0; width: var(--p);
border-radius: 1px 3px 3px 1px;
background: var(--akzent);
filter: url(#pigment);
}
.kolonielage__fort--warn { color: var(--warn); }
.kolonielage__fort--warn::before { background: var(--warn); }
@media (min-width: 520px) {
.kolonielage__zeile { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
.kolonielage__zeile > .etikett { grid-column: auto; }
}
/* Der Bericht füllt die Höhe des Blatts, seine Verweise hängen darunter am Rand:
So stehen sie immer ganz unten, gleich wie lang der Bericht gerade ist. */
.kolonielage__bericht { display: flex; flex-direction: column; }
.kolonielage__fuss { margin-top: auto; padding-top: .8rem; }
/* Die Ansturm-Box ist ein Verweis ins Fenster Vorbereitung: ein eigener
Zettel mit Nagel, der auf dem Lageblatt liegt. */
.kolonielage__ansturm { position: relative; display: grid; gap: .15rem; align-content: start; }
a.kolonielage__ansturm {
padding: .7rem 1rem .8rem;
color: inherit; text-decoration: none; cursor: pointer;
transform: rotate(.7deg);
transition: transform .25s;
}
a.kolonielage__ansturm:hover, a.kolonielage__ansturm:focus-visible { color: inherit; outline: none; transform: rotate(0deg) translateY(-3px); }
.kolonielage__termin { font-family: var(--titel); font-size: 1.55rem; line-height: 1.1; color: var(--hell); }
.kolonielage__rest { margin-bottom: .4rem; font-size: .95rem; font-style: italic; }
.kolonielage__ansturm .balken { margin-top: .3rem; }
/* Die Woche bis zum Ansturm. Jeder Tag ein Kreis von Hand: vergangene sind
abgestrichen, heute ist dick umrandet, der Tag des Ansturms ein roter Mond. */
.woche { display: flex; gap: .45rem; margin: .1rem 0 .3rem; }
.wochentag {
position: relative; flex: none;
width: 19px; height: 19px; margin-bottom: 1.05rem;
border: 1.3px solid var(--text);
border-radius: 52% 48% 50% 50% / 47% 53% 48% 52%;
}
.wochentag:nth-child(2n) { border-radius: 48% 52% 53% 47% / 52% 48% 50% 50%; }
.wochentag::after {
content: attr(data-tag);
position: absolute; top: calc(100% + 1px); left: 50%;
transform: translateX(-50%);
font-size: .78rem; font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .04em; line-height: 1.2;
color: var(--dim);
}
.wochentag--vorbei { border-color: var(--dim); }
.wochentag--vorbei::before {
content: "";
position: absolute; inset: 50% -4px auto;
border-top: 1.7px solid var(--hell); border-radius: 2px;
transform: rotate(-52deg);
}
.wochentag--vorbei:nth-child(2n)::before { transform: rotate(-46deg) translateY(1px); }
.wochentag--heute { border-width: 2.6px; border-color: var(--hell); }
.wochentag--heute::after { color: var(--hell); }
.wochentag--ansturm { border-color: var(--krit); box-shadow: inset 6px -1px 0 0 var(--krit); }
.wochentag--ansturm::after { color: var(--krit); }
.vlage__kopf .woche { margin: 0 0 0 auto; }
/* Nester: Höhleneingänge. Offene mit dunklem Maul, geräumte verschüttet, blasser und durchgestrichen. */
.nest { width: 25px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; color: var(--hell); }
.nest--fern { width: 31px; height: 22px; }
/* Federstriche bleiben gleich dick, ob das Zeichen klein in der Zeile oder gross auf der Karte steht. */
#nest path { vector-effect: non-scaling-stroke; }
.nest--geraeumt { color: var(--dim); opacity: .75; --nest-loch: none; --nest-zu: currentColor; }
/* Woraus die Verteidigung besteht: eine kleine eingerückte Liste unter der Zahl. */
.kolonielage__anteile {
list-style: none; margin: 0 0 .2rem; padding: 0 0 0 .7rem;
display: grid; gap: 0;
border-left: 1px solid var(--linie);
font-size: .9rem; color: var(--dim);
}
.kolonielage__anteile li { display: flex; justify-content: space-between; gap: 8px; }
.kolonielage__einschaetzung { margin-top: .2rem; font-style: italic; }
@media (min-width: 720px) {
.kolonielage { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem; }
a.kolonielage__ansturm { margin: -.3rem -.5rem -.3rem 0; }
}
@media (min-width: 920px) {
.kolonielage { grid-column: 1 / -1; }
}
/* Schmuggler: ein angeschlagener Zettel, als Ganzes anklickbar. */
#kolonie-schmuggler.panel { transform: rotate(1deg); transition: transform .25s; }
#kolonie-schmuggler.panel:hover { transform: rotate(0deg) translateY(-3px); }
.schmugglerbox {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem;
color: var(--text); text-decoration: none;
}
.schmugglerbox:hover { color: var(--text); }
/* Der Verweis reicht über den ganzen Zettel, Titel und Rand eingeschlossen. */
.schmugglerbox::after { content: ""; position: absolute; inset: 0; }
/* --- Fenster Vorbereitung ---------------------------------------------- */
/* Kopf: die Ansturm-Box auf Fensterbreite. */
.vlage { display: grid; gap: .3rem; }
.vlage__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; }
.vlage__termin { font-family: var(--titel); font-size: 1.9rem; line-height: 1.1; color: var(--hell); }
.vlage__rest { font-style: italic; color: var(--dim); }
.vlage .balken { margin-top: .4rem; }
.vlage__zeilen { display: grid; gap: .1rem 2.2rem; margin-top: .3rem; align-items: baseline; }
@media (min-width: 600px) {
.vlage__zeilen { grid-template-columns: 1fr 1fr; }
.vlage__rechts { grid-column: 2; }
}
/* Verteidigung in ihren Teilen. */
.vteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vteile .kennzahl { align-content: start; }
.kennzahl--vorbereitung .kennzahl__wert { color: var(--akzent); }
/* Vorbereitungen: je Massnahme eine Zeile aus Name, Strichliste, Stand und [+] mit Preis. */
.vorb { display: grid; }
.vorb__zeile {
display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4rem 9.5rem;
align-items: start; gap: .3rem 1rem;
padding: .7rem 0 .45rem; border-top: 1px dotted var(--linie);
}
.vorb__zeile:first-child { border-top: 0; padding-top: .3rem; }
.vorb__name { color: var(--hell); }
.vorb__stand { color: var(--hell); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.vorb__stand small { font-size: .85em; color: var(--dim); }
.vorb__auftrag { display: flex; align-items: center; gap: .6rem; margin: 0; }
.vorb__auftrag .knopf-plus { width: 26px; height: 26px; }
.vorb__preis { display: grid; font-size: .88rem; line-height: 1.2; color: var(--dim); white-space: nowrap; }
.vorb__preis b { font-weight: 500; color: var(--hell); }
.vorb__auftrag--aus .vorb__preis, .vorb__auftrag--aus .vorb__preis b { color: var(--dim); }
/* Strichliste: vier Striche und ein Querstrich. Ein gesetzter Punkt ist ein
Tintenstrich, ein möglicher nur vorgeritzt. Keine zwei Striche stehen gleich. */
.kaesten { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.kaesten__gruppe { position: relative; display: inline-flex; align-items: flex-end; gap: 6px; height: 24px; padding: 0 4px; }
/* Gräben: unter jeder Fünfergruppe ihr Preis je Punkt. */
.kaesten__gruppe[data-preis] { margin-bottom: 1rem; }
.kaesten__gruppe[data-preis]::after {
content: attr(data-preis);
position: absolute; inset: 100% -1rem auto;
text-align: center;
font-size: .75rem; font-style: italic; line-height: 1.3;
color: var(--dim);
}
.kasten { width: 0; height: 22px; border-left: 1.5px dotted var(--dim); opacity: .6; }
.kasten:nth-child(1) { height: 21px; transform: rotate(3deg); }
.kasten:nth-child(2) { height: 23px; transform: rotate(-2deg); }
.kasten:nth-child(3) { transform: rotate(4deg); }
.kasten:nth-child(4) { height: 20px; transform: rotate(-1deg); }
.kasten:nth-child(5) { position: absolute; left: calc(50% - 1px); top: -5px; height: 34px; transform: rotate(61deg); }
.kasten--an { width: 2.2px; border: 0; border-radius: 1px 1px 2px 1px; background: var(--hell); opacity: 1; }
.kasten--neu { animation: tinte-nass 1.4s both; }
@media (max-width: 600px) {
.vorb__zeile { grid-template-columns: minmax(0, 1fr) auto; }
.vorb__zeile > .kaesten { grid-column: 1 / -1; grid-row: 2; }
.vorb__zeile > .vorb__auftrag { grid-column: 1 / -1; grid-row: 3; }
}
/* --- Ansturmbericht ---------------------------------------------------- */
.nacht { display: grid; gap: .4rem; }
.nacht__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.nacht__liste li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: .9rem; }
.nacht__zeit { color: var(--dim); font-style: italic; font-variant-numeric: lining-nums tabular-nums; }
.nacht__text { min-height: 1.45em; }
.nacht__liste li:last-child .nacht__text { color: var(--hell); }
.bericht__ausgang { padding: 1.4rem 1.3rem 1.5rem; }
.bericht__ausgang .ausgang__titel { font-size: 4.2rem; }
.gegenueber { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .6rem 1.1rem; }
.gegenueber__seite { display: grid; gap: 2px; }
.gegenueber__seite--verteidigung { justify-items: end; text-align: right; }
.gegenueber__zahl { font-size: 3.8rem; font-weight: 500; line-height: .95; }
.gegenueber__seite--welle .gegenueber__zahl { color: var(--krit); }
.gegenueber__seite--verteidigung .gegenueber__zahl { color: var(--akzent); }
.gegenueber__gegen { padding-bottom: .5rem; font-size: 1.5rem; font-style: italic; line-height: 1; color: var(--dim); }
.gegenueber__balken { grid-column: 1 / -1; display: grid; gap: 6px; }
.gegenueber__balken .balken__fuell { transition: width .9s ease-out; }
.gegenueber__anteile { grid-column: 1 / -1; font-size: .92rem; font-style: italic; }
.bilanz { display: grid; gap: .6rem; padding: 1.1rem 1.3rem 1.2rem; outline-color: var(--akzent); transform: rotate(.3deg); }
.bilanz--verlust { outline-color: var(--warn); }
/* Abspielen (terminal.js): Teile nehmen ihren Platz schon ein, das Fenster springt nicht. */
.ansturmbericht [data-bericht-teil].verdeckt { visibility: hidden; }
.ansturmbericht [data-bericht-teil].erscheint { animation: tinte-nass .9s both; }
/* --- Register und Reiter ---------------------------------------------- */
/* Register am rechten Rand eines Fensters (core/_fensterleiste.html):
Pergamentstreifen, die unter dem Blatt hervorschauen. Der gewählte ist hell
wie das Blatt und rot beschriftet, die anderen sind nachgedunkelt und
stecken tiefer; unter dem Zeiger rutscht einer ein Stück heraus. */
.register {
position: absolute; top: 4.6rem; left: calc(100% - 14px); z-index: -2;
display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}
.register__blatt {
padding: .3rem .9rem .35rem 1.6rem;
border-radius: 0 3px 4px 0 / 0 5px 3px 0;
background:
linear-gradient(90deg, rgba(40, 22, 8, .45), transparent 22px),
var(--textur-fasern),
var(--papier-tief);
box-shadow: inset 0 0 8px rgba(90, 58, 24, .45), 0 1px 1px rgba(8, 4, 1, .6), 2px 5px 7px rgba(0, 0, 0, .35);
color: var(--text); text-decoration: none; white-space: nowrap;
font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .08em;
transform: translateX(-8px);
transition: transform .15s;
}
.register__blatt:hover, .register__blatt:focus-visible { transform: translateX(-3px); outline: none; }
.register__blatt--aktiv, .register__blatt--aktiv:hover {
background:
linear-gradient(90deg, rgba(40, 22, 8, .35), transparent 18px),
var(--textur-fasern),
var(--papier);
color: var(--krit);
transform: none;
}
/* Kein Platz neben dem Blatt: Die Reiter hängen dann als Fähnchen unter der
Leiste. Das breite Fenster braucht dafür früher Platz als das schmale. */
@media (max-width: 1100px) {
.register { position: static; z-index: auto; flex-direction: row; flex-wrap: wrap; margin: 0 0 .2rem; }
.register__blatt, .register__blatt--aktiv { border-radius: 0 0 4px 3px; padding: .45rem .8rem .3rem; transform: translateY(-3px); background-image: linear-gradient(rgba(40, 22, 8, .35), transparent 14px), var(--textur-fasern); }
.register__blatt:hover, .register__blatt:focus-visible { transform: none; }
.register__blatt--aktiv, .register__blatt--aktiv:hover { transform: none; }
}
@media (max-width: 1340px) {
.fenster--breit .register { position: static; z-index: auto; flex-direction: row; flex-wrap: wrap; margin: 0 0 .2rem; }
.fenster--breit .register__blatt, .fenster--breit .register__blatt--aktiv { border-radius: 0 0 4px 3px; padding: .45rem .8rem .3rem; transform: translateY(-3px); background-image: linear-gradient(rgba(40, 22, 8, .35), transparent 14px), var(--textur-fasern); }
.fenster--breit .register__blatt:hover, .fenster--breit .register__blatt:focus-visible { transform: none; }
.fenster--breit .register__blatt--aktiv, .fenster--breit .register__blatt--aktiv:hover { transform: none; }
}
/* Reiter innerhalb eines Fensters: Umschalter für eine Ansicht. */
/* Registerzungen aus Pergament. Die gewählte ist hell wie das Blatt und rot
beschriftet, die anderen sind nachgedunkelt. */
.reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 0; border-bottom: 1px solid var(--rahmen); }
.reiter__blatt {
padding: .25rem .9rem .3rem; margin-bottom: -1px;
border: 1px solid var(--rahmen); border-bottom-color: transparent;
border-radius: 4px 5px 0 0 / 5px 4px 0 0;
background: var(--textur-fasern), var(--papier-tief);
color: var(--text); text-decoration: none;
font-variant-caps: all-small-caps; letter-spacing: .08em;
box-shadow: inset 0 -6px 8px -6px rgba(60, 36, 12, .5);
}
.reiter__blatt:hover { color: var(--hell); background: var(--textur-fasern), var(--papier); }
.reiter__blatt--aktiv, .reiter__blatt--aktiv:hover { background: var(--papier); border-bottom-color: var(--papier); color: var(--krit); box-shadow: none; }
.reiter__punkt {
display: inline-block; min-width: 1.3em; padding: 0 .3em; margin-left: .35em;
border-radius: 50%;
background: var(--krit); color: var(--papier);
font-size: .8em; font-variant-caps: normal; letter-spacing: 0; text-align: center;
}
/* --- Ausrüstung am Körper --------------------------------------------- */
/* Die Figur steht in der Mitte, die Kacheln in zwei Spalten daneben. Paare
stehen dicht beieinander (Verbrauch, Spezial), zwischen den Gruppen ist
Luft. Gepunktete Linien zeigen von der Kachel auf die Körperstelle; ihre
Koordinaten stehen in `character.anzeige.LINIEN` und rechnen mit derselben
Fläche von 680 × 620 wie die Abstände hier. */
/* Oben Platz für das, was am Bild der Figur über den Kopf ragt (Spiess, Feder):
bis 9 % ihrer Höhe. */
.koerper { position: relative; margin: 36px 0 20px; }
.slotfeld { position: relative; }
.slotfeld--offen { z-index: 8; }
/* Anwenden sitzt in der Ecke der Kachel, damit jede Kachel gleich hoch bleibt. */
.slot__aktion { position: absolute; right: 7px; bottom: 7px; z-index: 2; margin: 0; }
.koerper .slot { height: 72px; grid-template-columns: minmax(0, 1fr); padding: .25rem .5rem; }
.koerper .slot__name { font-size: .78rem; line-height: 1.25; }
.koerper .slot__inhalt { font-size: .95rem; line-height: 1.25; }
.koerper .slot__wert { font-size: .82rem; line-height: 1.2; }
.koerper .slot__inhalt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot__sterne { margin-left: .5ch; font-size: .85rem; line-height: 1; color: var(--warn); }
/* Die Figur: eine Federzeichnung. Ihre Teile sind mit Pergament gefüllt,
damit sie einander verdecken. */
.figur { overflow: visible; }
.figur__raster { stroke: var(--text); stroke-width: .5; stroke-opacity: .1; }
.figur__leib { fill: var(--papier); stroke: var(--hell); stroke-width: 1.2; stroke-opacity: .85; stroke-linejoin: round; }
.figur__mitte { fill: var(--papier); }
.figur__teil { fill: var(--papier); stroke: var(--hell); stroke-width: 1; stroke-opacity: .85; stroke-linejoin: round; }
.figur__strich { fill: none; stroke: var(--text); stroke-width: .7; stroke-opacity: .6; stroke-linecap: round; }
.figur__naht { fill: none; stroke: var(--text); stroke-width: .6; stroke-opacity: .6; stroke-dasharray: 1.5 2; }
.figur__punkt { fill: var(--krit); fill-opacity: .8; }
/* Als gezeichnetes Bild: gleiche Fläche wie die Zeichnung (200 x 440), das
Bild reicht um den Rand aus kunst/umwandeln.py (RAND = 50, 40, 50, 9)
darüber hinaus, für Spiess, Feder und Schild. */
.figur--bild { position: relative; aspect-ratio: 200 / 440; }
.figur--bild .bild { position: absolute; left: -25%; top: -9.09%; width: 150%; height: 111.14%; aspect-ratio: auto; }
.koerper__linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.koerper__linien line { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.koerper__linien .offen line { stroke: var(--krit); }
@media (min-width: 761px) {
.koerper { width: 680px; height: 620px; margin-top: 56px; margin-left: auto; margin-right: auto; }
.figur { position: absolute; left: 50%; top: 10px; width: 268px; height: 590px; transform: translateX(-50%); }
.koerper > .slotfeld { position: absolute; width: 190px; }
.slot--kopf { left: 0; top: 10px; }
.slot--oberkoerper { left: 0; top: 110px; }
.slot--waffe1 { left: 0; top: 277px; }
.slot--beine { left: 0; top: 377px; }
.slot--schuhe { left: 0; top: 520px; }
.slot--ruecken { right: 0; top: 10px; }
.slot--verbrauch1 { right: 0; top: 92px; }
.slot--verbrauch2 { right: 0; top: 170px; }
.slot--waffe2 { right: 0; top: 277px; }
.slot--munition { right: 0; top: 377px; }
.slot--spezial1 { right: 0; top: 470px; }
.slot--spezial2 { right: 0; top: 548px; }
}
/* Schmal: die Figur oben, darunter die Kacheln paarweise in zwei Spalten.
Linien gibt es hier keine. */
@media (max-width: 760px) {
.koerper {
display: grid; gap: 6px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"figur figur"
"kopf ruecken"
"oberkoerper beine"
"waffe1 waffe2"
"schuhe munition"
"verbrauch1 verbrauch2"
"spezial1 spezial2";
}
.figur { grid-area: figur; justify-self: center; height: 300px; margin-bottom: 6px; }
.koerper__linien { display: none; }
.slot--kopf { grid-area: kopf; }
.slot--ruecken { grid-area: ruecken; }
.slot--oberkoerper { grid-area: oberkoerper; }
.slot--beine { grid-area: beine; }
.slot--waffe1 { grid-area: waffe1; }
.slot--waffe2 { grid-area: waffe2; }
.slot--schuhe { grid-area: schuhe; }
.slot--munition { grid-area: munition; }
.slot--verbrauch1 { grid-area: verbrauch1; }
.slot--verbrauch2 { grid-area: verbrauch2; }
.slot--spezial1 { grid-area: spezial1; }
.slot--spezial2 { grid-area: spezial2; }
/* Das Menü klappt hier nach der Spalte des Rasters auf, nicht nach der
Seite der Figur. */
.koerper .slotmenue { left: 0; right: auto; }
.slot--ruecken .slotmenue, .slot--beine .slotmenue, .slot--waffe2 .slotmenue,
.slot--munition .slotmenue, .slot--verbrauch2 .slotmenue, .slot--spezial2 .slotmenue { left: auto; right: 0; }
}
/* Das Menü des offenen Slots hängt unter seiner Kachel und liegt über allem
darunter: ein Zettel mit der Auswahl. Es ist breiter als die Kachel, deshalb
richtet es sich nach der Spalte aus. Jede Zeile ist ein Knopf über die ganze
Breite. */
.slotmenue {
position: absolute; top: calc(100% + 4px); z-index: 8;
width: min(300px, calc(100vw - 34px));
display: grid;
background: var(--textur-fasern), var(--papier-hell);
box-shadow: 0 1px 1px rgba(8, 4, 1, .45), 0 6px 14px rgba(20, 10, 2, .5);
}
.slotmenue--links { left: 0; }
.slotmenue--rechts { right: 0; }
.slotmenue > form { margin: 0; }
.slotmenue > form + form { border-top: 1px dotted var(--linie); }
.slotmenue > p { margin: 0; padding: .4rem .7rem; }
.slotmenue__zeile {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px;
width: 100%; min-height: 36px; padding: .35rem .7rem;
border: 0; background: none; color: var(--text);
font: inherit; text-align: left;
cursor: pointer;
}
.slotmenue__zeile:hover, .slotmenue__zeile:focus-visible { background: rgba(60, 40, 22, .1); color: var(--hell); outline: none; box-shadow: inset 3px 0 0 var(--krit); }
/* Die Randnotiz steht über der Zeile und fängt keine Maus: so bleiben die
Zeilen darunter frei, wenn man die Liste hinuntergeht. */
.slotmenue .tipp { top: auto; bottom: calc(100% + 4px); pointer-events: none; }
/* Ausrüstungsplatz: ein kleiner Zettel neben der Figur, angenagelt und leicht
schief; unter dem Zeiger hebt er sich wie die Gebäudekacheln. Den Nagel
setzt pergament.js. Ein leerer Platz ist nachgedunkeltes Pergament. */
.slot {
position: relative; z-index: 1;
display: grid; gap: 0; align-content: start;
min-height: 60px; padding: .4rem .6rem;
border: 0; border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background:
linear-gradient(135deg, rgba(255, 250, 232, .35), transparent 45%),
var(--textur-fasern),
var(--papier-tief);
box-shadow: inset 0 0 12px rgba(92, 58, 22, .28), 0 1px 1px rgba(8, 4, 1, .5), 0 5px 8px rgba(20, 10, 2, .32);
color: var(--text); text-decoration: none;
transform: rotate(var(--dreh, -1.1deg));
transition: transform .18s;
}
.slotfeld:nth-child(2n) .slot { --dreh: .9deg; }
.slotfeld:nth-child(3n) .slot { --dreh: -.4deg; }
.slot:hover, .slot:focus-visible { color: var(--text); outline: none; transform: rotate(0deg) translateY(-3px); }
.slot--belegt { background: linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%), var(--textur-fasern), var(--papier-hell); }
.slot--offen { outline: 3px double var(--krit); outline-offset: 2px; transform: rotate(0deg); }
.slot > .nagel { top: -9px; width: 22px; margin-left: -11px; }
.slot__name { font-size: .85rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--dim); }
.slot__inhalt { color: var(--hell); }
.slot__wert { font-size: .88rem; color: var(--akzent); }
/* Hinweis auf einen Levelaufstieg in der Kopfleiste. Bleibt stehen, bis der
Fertigkeitsbaum offen war — ein Aufstieg mitten in einer Expedition fällt
sonst gar nicht auf. */
.aufstieg {
display: inline-block; margin: 2px 0; padding: 0 .4rem;
justify-self: start;
border: 2px solid var(--krit); border-radius: 3px;
color: var(--krit);
font-size: .9rem; font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .08em;
transform: rotate(-1.5deg);
}
@media (prefers-reduced-motion: no-preference) {
.aufstieg { animation: aufstieg-puls 1.8s ease-in-out 3; }
}
@keyframes aufstieg-puls {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
/* --- Berufswahl --------------------------------------------------------- */
/* Vier Karten im Quadrat, mobil untereinander. Jede Karte ist ein Formular:
ein Klick, ein Beruf. */
.berufe { display: grid; gap: 1rem; margin: 1rem 0 4px; }
@media (min-width: 640px) { .berufe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beruf {
display: grid; align-content: start; gap: .4rem;
padding: .8rem 1rem 1rem;
border: 1px solid var(--rahmen); background: var(--flaeche);
box-shadow: 0 1px 1px rgba(8, 4, 1, .25), 0 3px 6px rgba(20, 10, 2, .2);
}
.beruf:hover, .beruf:focus-within { border-color: var(--hell); }
.beruf__name { margin: 0; font-family: var(--titel); font-size: 1.4rem; line-height: 1.1; color: var(--hell); }
.beruf__text { margin: 0; font-style: italic; line-height: 1.45; color: var(--dim); }
.beruf__bonus { margin: 0; color: var(--akzent); }
.beruf__liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.beruf__liste li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
.beruf__knopf { margin-top: 6px; justify-self: start; }
/* --- Fertigkeitsbaum --------------------------------------------------- */
/* Ein Kreis aus vier Zweigen. Die Positionen rechnet `character.anzeige` aus
Zweig, Ring und Position — hier steht nur, wie es aussieht. Der Kreis steht
um ein Achtel gedreht: So laufen die Grenzen zwischen den Zweigen senkrecht
und waagerecht, und jeder Zweig hat eine freie Ecke für seinen Namen.
Unterhalb von 860px wird es zu eng für Kacheln auf einer Kreisbahn, dort
tritt die Liste an seine Stelle. */
.baum { display: none; }
.baumliste { display: block; }
@media (min-width: 860px) {
.baum { position: relative; display: block; width: 700px; height: 700px; margin: 18px auto 24px; }
.baumliste { display: none; }
}
/* Die vier Viertel als Felder: zwei davon eine Spur dunkler, wie ein
Schachbrett. Zusammen mit dem gestrichelten Kreuz sieht man auf einen
Blick, wo ein Zweig aufhört. */
.baum__feld { position: absolute; width: 50%; height: 50%; }
.baum__feld--oben-links { top: 0; left: 0; background: rgba(90, 58, 24, .07); }
.baum__feld--unten-rechts { bottom: 0; right: 0; background: rgba(90, 58, 24, .07); }
.baum__feld--oben-rechts { top: 0; right: 0; }
.baum__feld--unten-links { bottom: 0; left: 0; }
.baum__linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.baum__linie { stroke: var(--dim); stroke-width: 1; stroke-opacity: .6; vector-effect: non-scaling-stroke; }
.baum__linie--aktiv { stroke: var(--akzent); stroke-width: 2; stroke-opacity: 1; }
.baum__trenner {
stroke: var(--text); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 4 5;
vector-effect: non-scaling-stroke;
}
.baum__ecke {
position: absolute; max-width: 40%;
font-family: var(--titel); font-size: 1.15rem; line-height: 1.1; color: var(--hell);
}
.baum__ecke--oben-links { top: 2px; left: 4px; }
.baum__ecke--oben-rechts { top: 2px; right: 4px; }
.baum__ecke--unten-links { bottom: 2px; left: 4px; }
.baum__ecke--unten-rechts { bottom: 2px; right: 4px; }
.baum__zweigpunkte { font-family: var(--schrift); font-size: .9rem; color: var(--dim); }
.baum__knoten { position: absolute; transform: translate(-50%, -50%); margin: 0; }
.baum__knoten:hover, .baum__knoten:focus-within { z-index: 6; }
.knoten {
display: grid; gap: 0; width: 108px; min-height: 42px; padding: .2rem .3rem .25rem;
align-content: center; position: relative;
border: 1px solid var(--rahmen); background: var(--papier);
color: var(--dim); font: inherit; text-align: center; text-decoration: none;
}
.knoten__name { font-size: .82rem; line-height: 1.15; color: var(--text); }
.knoten__wirkung { font-size: .76rem; line-height: 1.2; font-style: italic; white-space: nowrap; }
.knoten--gewaehlt { border: 3px double var(--akzent); background: var(--papier-hell); }
.knoten--gewaehlt .knoten__name { color: var(--hell); font-weight: 500; }
.knoten--gewaehlt .knoten__wirkung { color: var(--akzent); }
.knoten--waehlbar { border-color: var(--hell); cursor: pointer; box-shadow: 0 1px 1px rgba(8, 4, 1, .3), 0 3px 5px rgba(20, 10, 2, .25); }
.knoten--waehlbar .knoten__name { color: var(--hell); }
.knoten--waehlbar:hover, .knoten--waehlbar:focus-visible { border-color: var(--krit); outline: none; }
/* Gesperrt wird über die Farben zurückgenommen, nicht über die Deckkraft:
Sonst verblasst die Randnotiz darin mit. */
.knoten--gesperrt { border-style: dotted; border-color: var(--linie); background: var(--papier); }
.knoten--gesperrt .knoten__name { color: #8d7a64; }
.knoten--gesperrt .knoten__wirkung { color: #a3907a; }
/* Die Randnotiz. Sie steckt im Element und erscheint ohne Verzögerung —
deshalb kein `title`, das der Browser erst nach einer Sekunde zeigt.
Dieselbe Notiz trägt die Fertigkeiten im Baum und jeden Gegenstand in den
Listen; `.mit-tipp` ist der Anker, an dem sie hängt. */
.mit-tipp { position: relative; }
.mit-tipp:hover, .mit-tipp:focus-within { z-index: 6; }
.mit-tipp:hover > .tipp,
.mit-tipp:focus-within > .tipp { visibility: visible; opacity: 1; }
.tipp__werte { font-family: var(--schrift); font-size: .95rem; color: var(--hell); }
.tipp__wirkung { line-height: 1.4; color: var(--akzent); }
.knoten__tipp, .tipp {
position: absolute; z-index: 7; width: 250px;
display: grid; gap: .25rem; padding: .5rem .75rem .6rem;
background: var(--textur-fasern), var(--papier-hell);
box-shadow: 0 1px 1px rgba(8, 4, 1, .45), 0 5px 12px rgba(30, 15, 5, .45);
color: var(--text);
font-family: var(--hand); font-size: .92rem; font-style: normal; font-weight: 400; line-height: 1.35;
font-variant-caps: normal; letter-spacing: 0;
text-align: left; white-space: normal; text-indent: 0;
visibility: hidden; opacity: 0;
}
.knoten:hover > .knoten__tipp,
.knoten:focus-visible > .knoten__tipp,
.knoten:focus-within > .knoten__tipp { visibility: visible; opacity: 1; }
.tipp__titel { font-family: var(--schrift); font-size: 1.05rem; font-weight: 600; line-height: 1.2; color: var(--hell); }
.tipp__fuss:last-child { display: flex; flex-wrap: wrap; gap: 5px; }
.tipp__text { line-height: 1.4; color: var(--text); }
.tipp__fuss { font-size: .88rem; line-height: 1.3; }
.tipp--unten { top: calc(100% + 9px); }
.tipp--oben { bottom: calc(100% + 9px); }
.tipp--mitte { left: 50%; transform: translateX(-50%); }
.tipp--links { left: -2px; }
.tipp--rechts { right: -2px; }
/* --- Schmuggler ---------------------------------------------------------- */
.handel { display: grid; gap: 1rem; }
/* Das Gitter rechnet in halben Boxen: Jede Box ist zwei Spalten breit und zwei
Zeilen hoch. So stehen die Zweierreihen mittig zwischen den Dreierreihen,
und alle Boxen sind gleich groß. Spalte 7 trennt die beiden Gruppen. */
.handel__raster {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr)) 9px repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
grid-auto-rows: minmax(50px, auto);
gap: 8px;
}
.handel__gruppe { grid-row: 1; align-self: end; }
.handel__gruppe--gewoehnlich { grid-column: 1 / 7; }
.handel__gruppe--wertvoll { grid-column: 8 / 10; }
.handel__trenner { grid-column: 7; grid-row: 1 / var(--ende); justify-self: center; border-left: 1px dotted var(--rahmen); }
.handel__box {
grid-column: var(--s) / span 2; grid-row: var(--z) / span 2;
position: relative;
display: grid; grid-template-rows: auto 1fr auto; gap: 4px;
min-width: 0; padding: .4rem .6rem;
border: 1px solid var(--rahmen);
background: var(--flaeche);
}
.handel__box:hover:not(.handel__box--ziel):not(.handel__box--leer) { border-color: var(--hell); }
.handel__box:has(.handel__wahl:focus-visible) { outline: 2px dashed var(--krit); outline-offset: 2px; }
.handel__box--gewaehlt, .handel__box--gewaehlt:hover:not(.handel__box--ziel) { border: 3px double var(--krit); padding: calc(.4rem - 2px) calc(.6rem - 2px); }
.handel__wahl {
justify-self: start; padding: 0; background: none; border: 0; outline: none;
display: inline-flex; align-items: center; gap: .35rem;
color: var(--text); font: inherit; font-variant-caps: all-small-caps; letter-spacing: .07em; text-align: left;
cursor: pointer;
}
/* Das Zeichen der Ressource vor dem Namen, in dessen Tinte: rot in der
gewählten Box, blass in einer leeren. */
.handel__zeichen { flex: none; width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Die ganze Box wählt aus — außer sie ist gerade Ziel des Tauschs, dann
gehört die Fläche dem Mengenfeld. */
.handel__wahl::after { content: ""; position: absolute; inset: 0; }
.handel__wahl[disabled] { cursor: default; }
.handel__box--ziel .handel__wahl::after { display: none; }
.handel__box--gewaehlt .handel__wahl { color: var(--krit); }
.handel__kuerzel { display: none; }
.handel__zahlen { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.handel__bestand { font-size: 1.7rem; font-weight: 500; color: var(--hell); }
.handel__box--leer .handel__wahl, .handel__box--leer .handel__bestand { color: var(--dim); }
.handel__abzug { font-size: 1.35rem; color: var(--krit); }
/* Der Kurs, daneben die Mengenwahl. Wird es eng, rutscht sie darunter. */
.handel__tausch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; }
.handel__menge { display: flex; align-items: center; gap: 0; }
.handel__menge .eingabe input { width: 3.5ch; max-width: none; text-align: center; }
.handel__pfeil { width: 28px; height: 30px; -webkit-mask-size: 17px; mask-size: 17px; }
/* Bestand als Reihe von Marken: rot, was abgeht, grün, was dazukommt. */
.handel__balken { align-self: end; display: flex; align-items: flex-end; gap: 3px; height: 12px; overflow: hidden; color: var(--text); }
.handel__balken i { flex: none; width: 2.4px; height: 11px; border-radius: 1px; background: currentColor; transform: rotate(3deg); }
.handel__balken i:nth-child(2n) { height: 10px; transform: rotate(-2deg); }
.handel__balken .ab { background: var(--krit); }
.handel__balken .zu { background: var(--akzent); }
.handel__balken .leer { width: 0; background: none; border-left: 1.4px dotted var(--dim); opacity: .6; }
.handel__box--leer .handel__balken { color: var(--dim); }
/* Kopf: Abreise, darunter die Waage zwischen "Du gibst" und "Du bekommst". */
.handel__kopf { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 6px 20px; padding-bottom: .8rem; border-bottom: 1px dotted var(--linie); }
/* Der Schmuggler selbst: Porträt (fenster/schmuggler), darunter die Abreise. */
.handel__person { display: grid; justify-items: center; gap: 2px; }
.handel__person .bild { width: 150px; aspect-ratio: 3 / 4; }
.handel__abreise { text-align: center; }
.handel__abreise b { margin-left: 6px; font-size: 1.35rem; font-weight: 500; line-height: 1; color: var(--hell); }
.handel__waage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 20px; }
.handel__bild { display: block; width: 190px; height: auto; fill: none; stroke: var(--hell); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#hand); }
.handel__schale { display: grid; gap: 4px; align-content: center; min-height: 96px; }
.handel__schale--links { text-align: right; }
.handel__gross { font-size: 1.45rem; line-height: 1.15; color: var(--dim); white-space: pre-line; }
.handel__gross.krit { color: var(--krit); }
.handel__gross.ok { color: var(--akzent); }
/* Fester Platz unter dem Fuß der Waage: Text oder Knopf, ohne dass etwas springt. */
.handel__fuss { grid-column: 1 / -1; display: grid; place-items: center; min-height: 38px; }
.handel__fuss .knopf { justify-self: center; }
.handel__leer { font-style: italic; color: var(--dim); }
.handel__leer.krit { color: var(--krit); }
@media (max-width: 600px) {
/* Die wertvollen rutschen als eigene Reihe unter die gewöhnlichen. */
.handel__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.handel__trenner { display: none; }
.handel__gruppe--gewoehnlich, .handel__gruppe--wertvoll { grid-column: 1 / -1; }
.handel__gruppe--wertvoll { grid-row: var(--mz-wertvoll); }
.handel__box { grid-column: var(--ms) / span 2; grid-row: var(--mz) / span 2; padding: 6px 8px; }
.handel__name { display: none; }
.handel__kuerzel { display: inline; }
/* Der Schmuggler kleiner über der Waage; die Waage über die ganze Breite,
die beiden Schalen darunter. */
.handel__kopf { grid-template-columns: minmax(0, 1fr); }
.handel__person .bild { width: 110px; }
.handel__waage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.handel__bild { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
.handel__schale { min-height: 0; }
.handel__balken { gap: 2px; }
}
/* --- Nester und Sturm -------------------------------------------------- */
/* Eigenschaften eines Nests: ein Wabenfeld aus Federstrichen. Unerkannt ist
es schraffiert wie ein unbekanntes Stück Karte; erkannt trägt es sein
Zeichen; greift es gerade nicht, ist es verblasst und durchgestrichen. Die
Art steht im inneren Rand: bedingt ohne, kontern durchgezogen,
Gelegenheit gepunktet. Vorlage: concept/prototyp_nester/. */
.merkmale { display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center; }
.merkmale--klein { margin: .2rem 0 .35rem; }
.merkmale--klein .merkmal { width: 40px; }
.merkmale--prominent { justify-content: center; gap: .6rem 1.4rem; margin: .2rem 0 .4rem; }
.merkmal { position: relative; display: inline-block; width: 62px; flex: none; line-height: 0; }
.merkmal--gross { width: 86px; }
.merkmal > svg { display: block; width: 100%; height: auto; overflow: visible; }
.merkmal__grund { fill: var(--papier-hell); stroke: none; }
.merkmal__rand { fill: none; stroke: var(--hell); stroke-width: 1.7; stroke-linejoin: round; filter: url(#hand); }
.merkmal__innen { fill: none; stroke: none; stroke-width: .7; }
.merkmal--kontern .merkmal__innen { stroke: var(--text); }
.merkmal--gelegenheit .merkmal__innen { stroke: var(--text); stroke-dasharray: .6 2.4; stroke-linecap: round; stroke-width: 1.1; }
.merkmal__zeichen { overflow: visible; }
.merkmal__zeichen use { fill: none; stroke: var(--hell); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.merkmal--verborgen .merkmal__grund { fill: color-mix(in srgb, var(--papier-tief) 22%, transparent); }
.merkmal--verborgen .merkmal__schraffur { fill: url(#schraffur-fein); opacity: .55; }
.merkmal--verborgen .merkmal__rand { stroke: var(--dim); stroke-dasharray: 3.5 3; }
.merkmal--verborgen .merkmal__innen { stroke: none; }
/* Erkannt, greift aber gerade nicht. Der Strich bleibt satt, damit man ihn auch klein sieht. */
.merkmal--offen .merkmal__rand, .merkmal--offen .merkmal__innen { stroke: var(--dim); }
.merkmal--offen .merkmal__zeichen { opacity: .45; }
.merkmal--offen .merkmal__grund { fill: color-mix(in srgb, var(--papier-tief) 14%, var(--papier-hell)); }
.merkmal__strich { fill: none; stroke: var(--hell); stroke-width: 2.6; stroke-linecap: round; filter: url(#hand); }
.merkmalkarte { display: grid; justify-items: center; gap: 4px; min-width: 96px; }
.merkmalkarte__name { min-height: 1.3em; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--hell); }
.merkmalkarte--offen .merkmalkarte__name { color: var(--dim); }
/* Plakette am Sechseck: ein Gegenmittel an diesem Nest. Kerze in Arbeit, Haken bereit. */
.merkmal__plakette {
position: absolute; right: -6%; bottom: -2%;
width: 42%; aspect-ratio: 1;
border-radius: 52% 48% 50% 50% / 47% 53% 48% 52%;
background: var(--papier-hell);
border: 1.4px solid var(--hell);
box-shadow: 0 1px 2px rgba(20, 10, 2, .35);
}
.merkmal__plakette svg { width: 70%; height: 70%; margin: 15%; fill: none; stroke: var(--hell); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.merkmal__plakette--bereit { border-color: var(--akzent); }
.merkmal__plakette--bereit svg { stroke: var(--akzent); stroke-width: 2.2; }
.merkmal__plakette--arbeit { border-style: dashed; border-color: var(--dim); }
.merkmal__plakette--arbeit svg { stroke: var(--dim); }
/* Gegenmittel in Werkstatt und Apotheke: wie die Herstellung, rechts die
Stundenkerze (sechs Ringe, die Flamme sinkt mit der Zeit) oder der Haken. */
.gegenmittel__name { display: inline-flex; align-items: center; gap: .5rem; }
.gegenmittel__name .merkmal { width: 26px; }
.gegenmittel__stand, .gegenmittel__stand[data-tipp] { display: inline-flex; align-items: center; gap: .3rem; }
.gegenmittel__uhr { font-size: .95rem; color: var(--hell); font-variant-numeric: tabular-nums; }
.gegenmittel__bereit svg { width: 18px; height: 18px; fill: none; stroke: var(--akzent); stroke-width: 2.2; stroke-linecap: round; }
.gegenmittel__kerze { width: 22px; height: auto; overflow: visible; }
.nestszene__tinte .gegenmittel__wachs { fill: var(--papier); }
.gegenmittel__abgebrannt { stroke-dasharray: 2 3; stroke: var(--dim); }
.nestszene__tinte .gegenmittel__flamme { fill: var(--warn); stroke: var(--warn); stroke-width: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: flamme-flackern 1.7s ease-in-out infinite; }
@keyframes flamme-flackern { 30% { transform: scale(.92, 1.06) rotate(-3deg); } 65% { transform: scale(1.05, .95) rotate(2deg); } }
/* Messlatte im Sturmfenster: der eigene, noch nicht gemeldete Anteil nur
vorgezeichnet; im Bericht das Nest als Marke in Zinnober. */
.sturmlatte { display: grid; gap: 1px; margin-top: 1rem; }
.sturmlatte__vorschau {
position: absolute; top: 2px; height: 13px;
background: repeating-linear-gradient(58deg, var(--akzent) 0 1.4px, transparent 1.4px 5px);
border: 1.3px dashed var(--akzent); border-left: 0;
filter: url(#hand);
}
.sturmlatte__marke { background: var(--krit); width: 2.4px; margin-left: -1.2px; }
.sturmlatte__marke::before { color: var(--krit); font-style: normal; font-size: .82rem; white-space: nowrap; }
/* Gemeldete und Beteiligte als Zettel. Wer noch nicht gemeldet ist, hat einen gestrichelten Platz. */
.sturmrolle { display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.sturmrolle__zettel {
position: relative;
display: inline-flex; align-items: center; gap: .45rem;
padding: .15rem .65rem .2rem;
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background: linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%), var(--textur-fasern), var(--papier-hell);
box-shadow: inset 0 0 10px rgba(92, 58, 22, .22), 0 1px 1px rgba(8, 4, 1, .4), 0 3px 5px rgba(20, 10, 2, .28);
transform: rotate(var(--dreh, -1deg));
font-family: var(--hand);
}
.sturmrolle__zettel .dim { font-family: var(--schrift); }
.sturmrolle__wunde { width: 18px; height: 18px; fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linecap: round; }
.sturmrolle__frei {
width: 92px; height: 30px;
border: 1.4px dashed var(--dim);
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
transform: rotate(-1.5deg);
opacity: .7;
}
/* Die eigene Meldung: links die Wahl, rechts der Zettel mit der Kampfkraft. */
.sturmmeldung__raster { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1.2rem 1.6rem; align-items: start; }
.sturmmeldung__wahl { display: grid; gap: 1rem; }
.sturmmeldung--fest .sturmmeldung__wahl { opacity: .5; }
.sturm__mitnehmen { gap: 12px 22px; }
.sturm__stapel { flex-wrap: wrap; }
/* Mitnehmen wie ein Stempel im Gefecht; eingepackt ist er grün. */
.stempelwahl input { position: absolute; opacity: 0; pointer-events: none; }
.stempelwahl:has(input:checked) { color: var(--akzent); border-color: var(--akzent); opacity: 1; }
.stempelwahl:has(input:focus-visible) { opacity: 1; transform: rotate(-2deg) scale(1.05); }
.meldezettel {
position: relative;
display: grid; justify-items: center; gap: 2px;
padding: 1rem 1rem 1.8rem;
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background: linear-gradient(135deg, rgba(255, 250, 232, .5), transparent 45%), var(--textur-fasern), var(--papier-hell);
box-shadow: inset 0 0 14px rgba(92, 58, 22, .26), 0 1px 1px rgba(8, 4, 1, .45), 0 6px 10px rgba(20, 10, 2, .32);
transform: rotate(1.6deg);
}
.meldezettel__wert { font-size: 2.6rem; line-height: 1.05; color: var(--akzent); }
.meldezettel__zusatz { font-size: .9rem; }
.meldezettel__siegel { position: absolute; right: -22px; bottom: -28px; width: 86px; pointer-events: none; transform: rotate(-12deg); }
.meldezettel__siegel svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgba(30, 5, 0, .4)); }
@media (max-width: 600px) {
.sturmmeldung__raster { grid-template-columns: minmax(0, 1fr); }
.meldezettel { justify-self: center; min-width: 190px; }
/* Drei Sechsecke nebeneinander, die Spanne passt in ihren Kasten. */
.merkmale--prominent { gap: .4rem .6rem; }
.merkmalkarte { min-width: 0; }
.merkmal--gross { width: 66px; }
.merkmalkarte__name { font-size: .85rem; }
#sturm-inhalt .duell__wert { font-size: 1.9rem; }
}
/* Beobachten: der Hügel als Bild, darüber wandert die Sonne von Stand zu
Stand (--dx/--dy: der Weg vom vorigen Stand). Gereizt: das Bild zuckt, ein
roter Stempel. Erkannt: ein Fundzettel fällt auf die Szene. */
.beobachten { display: grid; gap: .9rem; }
.nestszene { position: relative; margin: 0; }
.nestszene__bild { display: block; position: relative; width: 100%; height: auto; overflow: visible; }
.nestszene__tinte { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#hand); }
.nestszene__tinte .d { stroke-width: .85; }
.nestszene__tinte .nestszene__schraffur { fill: url(#schraffur); stroke: none; opacity: .42; }
.nestszene__tinte .nestszene__schraffur-fein { fill: url(#schraffur-fein); stroke: none; opacity: .5; }
.nestszene__bogen { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 2 7; }
.nestszene__stand { fill: var(--papier-hell); stroke: var(--dim); stroke-dasharray: 2.5 2.5; }
.nestszene__stand--vorbei { stroke-dasharray: none; fill: color-mix(in srgb, var(--dim) 45%, var(--papier-hell)); }
.nestszene__sonne { transition: opacity .6s; }
.nestszene__sonnenweg { animation: sonne-wandern 1.1s ease-in-out .2s backwards; }
@keyframes sonne-wandern { from { transform: translate(var(--dx), var(--dy)); } }
.nestszene__sonne--unter { opacity: .5; }
.nestszene__sonne circle { fill: var(--papier-hell); stroke: var(--hell); stroke-width: 2.4; }
.nestszene__sonne path { stroke: var(--hell); stroke-width: 1.4; }
.nestszene__sonnenkoerper { animation: sonne-drehen 90s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sonne-drehen { to { transform: rotate(360deg); } }
/* Hügel und Höhle als Bild unter der Zeichnung; beide 7:3, also deckungsgleich. */
.nestszene__grund { position: absolute; inset: 0; }
.nestszene--gereizt .nestszene__bild, .nestszene--gereizt .nestszene__grund { animation: szene-zucken .4s ease-out; }
@keyframes szene-zucken { 20% { transform: translate(-3px, 1px); } 45% { transform: translate(3px, -1px); } 70% { transform: translate(-1px, 0); } }
@keyframes stempel-auf {
0% { opacity: 0; transform: translateX(-50%) scale(1.7) rotate(-14deg); }
60% { opacity: 1; transform: translateX(-50%) scale(.94) rotate(-4deg); }
}
@keyframes zettel-weg { to { opacity: 0; visibility: hidden; } }
.nestszene__reizung {
position: absolute; left: 72%; top: 12%; z-index: 5; margin: 0;
white-space: nowrap;
padding: .1rem 1rem .2rem;
border: 5px double var(--krit);
border-radius: 6px 9px 7px 10px / 9px 6px 10px 7px;
background: color-mix(in srgb, var(--papier-hell) 55%, transparent);
color: var(--krit);
font-size: 1.4rem; font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .14em;
transform: translateX(-50%) rotate(-6deg);
opacity: .9;
pointer-events: none;
animation: stempel-auf .45s cubic-bezier(.2, .8, .3, 1.2) backwards, zettel-weg .6s ease-in 3.6s forwards;
}
.nestszene__fund {
position: absolute; left: 33%; top: 6%; z-index: 4;
display: grid; justify-items: center; gap: 2px;
min-width: 180px; padding: .7rem 1.3rem .9rem;
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background: linear-gradient(135deg, rgba(255, 250, 232, .6), transparent 45%), var(--textur-fasern), var(--papier-hell);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--akzent) 70%, transparent), inset 0 0 14px rgba(92, 58, 22, .26), 0 2px 2px rgba(8, 4, 1, .45), 0 12px 18px rgba(20, 10, 2, .4);
transform: translateX(-50%) rotate(-2.5deg);
pointer-events: none;
animation: fund-hinlegen .7s cubic-bezier(.2, .75, .3, 1) backwards, zettel-weg .8s ease-in 6s forwards;
}
@keyframes fund-hinlegen {
from { opacity: 0; transform: translate(-50%, -40px) rotate(-12deg) scale(1.15); }
40% { opacity: 1; }
}
.nestszene__fund .etikett { color: var(--akzent); font-size: 1.05rem; }
.nestszene__fund .merkmal { width: 86px; margin: .2rem 0 .1rem; }
.nestszene__fundname { font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 1.25rem; color: var(--hell); }
.nestszene__fundwirkung { font-size: .95rem; font-style: italic; color: var(--dim); }
/* Erkenntnis und Alarm: zwei grosse Messlatten nebeneinander. Neben der
Erkenntnis je Eigenschaft ein kleines Sechseck in Grünspan, neben dem
Alarm je Reizung eine Glocke im Kreis und der Aufschlag. */
.messung { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.6rem; }
.messung__latte { display: grid; gap: 1px; }
.messung .balken { height: 34px; }
.messung .balken::before { inset: 22px 0 auto; }
.messung .balken__fuell { height: 19px; top: 2px; }
.messung__balken--alarm .balken__fuell { background: var(--krit); }
/* Nach einem Schritt: vom Stand davor (--von) zum neuen. Beim Überlauf erst
voll, dann vom Anfang her bis zum neuen Stand. */
.messung .messung__fuell--von { animation: latte-fuellen .9s ease-out .25s backwards; }
@keyframes latte-fuellen { from { width: var(--von); } }
.messung .messung__fuell--ueberlauf { animation: latte-ueberlauf 1.5s ease-in-out .25s backwards; }
@keyframes latte-ueberlauf {
0% { width: var(--von); }
40%, 55% { width: 100%; }
56% { width: 0; }
}
.messung__zeichen { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-left: .6rem; vertical-align: middle; font-variant-caps: normal; letter-spacing: 0; }
.erkanntzeichen { display: inline-block; width: 22px; line-height: 0; }
.erkanntzeichen svg { display: block; width: 100%; height: auto; overflow: visible; }
.erkanntzeichen path { fill: none; stroke: var(--akzent); stroke-width: 4; stroke-dasharray: 7 6; stroke-linejoin: round; opacity: .7; filter: url(#hand); }
.erkanntzeichen--da path { fill: color-mix(in srgb, var(--akzent) 55%, var(--papier-hell)); stroke-dasharray: none; opacity: 1; }
.reizstufe {
display: inline-grid; place-items: center;
width: 30px; height: 30px;
border: 1.6px solid var(--krit);
border-radius: 52% 48% 50% 50% / 47% 53% 48% 52%;
background: color-mix(in srgb, var(--krit) 10%, var(--papier-hell));
}
.reizstufe:nth-child(2n) { border-radius: 48% 52% 53% 47% / 52% 48% 50% 50%; }
.reizstufe svg { width: 20px; height: 20px; fill: none; stroke: var(--krit); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: url(#hand); }
.reizstufe__wert { font-size: 1rem; font-style: italic; color: var(--krit); }
.messung__neu { animation: aufspringen .7s cubic-bezier(.2, .8, .3, 1.4) .35s backwards; }
@keyframes aufspringen { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.35) rotate(6deg); } }
/* Eine Eigenschaft erkannt oder das Nest gereizt: die Latte leuchtet kurz auf. */
.messung__balken--voll::after, .messung__balken--gereizt::after {
content: "";
position: absolute; inset: -5px -7px 6px;
border: 2.5px solid var(--akzent);
border-radius: 6px 9px 7px 10px / 9px 6px 10px 7px;
filter: url(#hand);
pointer-events: none;
animation: latte-aufleuchten 1.6s ease-out forwards;
}
.messung__balken--gereizt::after { border-color: var(--krit); }
@keyframes latte-aufleuchten {
0% { opacity: 0; transform: scale(.96); }
15% { opacity: 1; transform: scale(1.02); }
70% { opacity: 1; }
100% { opacity: 0; transform: scale(1); }
}
/* Das Ereignis des nächsten Schritts auf einem eigenen Zettel, gross und mittig. */
.ereigniszettel {
justify-self: center;
display: grid; justify-items: center; text-align: center;
width: min(100%, 36em);
padding: .9rem 1.6rem .8rem;
border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
background: linear-gradient(135deg, rgba(255, 250, 232, .55), transparent 45%), var(--textur-fasern), var(--papier-hell);
box-shadow: inset 0 0 0 1px var(--linie), inset 0 0 16px rgba(92, 58, 22, .22), 0 1px 1px rgba(8, 4, 1, .45), 0 6px 10px rgba(20, 10, 2, .3);
transform: rotate(-.6deg);
}
.ereigniszettel__text { margin: 0; min-height: 2.6em; display: grid; place-items: center; font-size: 1.32rem; font-style: italic; line-height: 1.35; color: var(--hell); }
/* Die Haltung als Dreieck: zwölf Punkte, die Regler an ihren Seiten, ihre
Strichlisten folgen der Wahl (über :has, ohne Skript). */
.beobachten__unten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; }
.beobachten__knoepfe { display: grid; justify-items: start; gap: 1rem; }
.dreieck { position: relative; width: 100%; max-width: 340px; aspect-ratio: 292 / 230; margin: .4rem auto 0; padding: 0; border: 0; min-width: 0; }
.dreieck--aus { opacity: .4; }
.dreieck__regler, .dreieck__regler[data-tipp] { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); }
/* Oben an der Spitze: Name über dem Zeichen, beide mittig über den Punkten;
die Strichliste hängt links neben dem Zeichen. */
/* Der Regler ist verschoben (transform) und damit eine eigene Ebene: Sein
Hinweis käme sonst nicht über die Punkte, die im Quelltext danach stehen. */
.dreieck__regler:hover { z-index: 3; }
.dreieck__regler--aufmerksamkeit { left: 50%; top: 2%; }
.dreieck__regler--aufmerksamkeit .dreieck__name { order: -1; }
.dreieck__regler--aufmerksamkeit .dreieck__striche { position: absolute; right: calc(50% + 21px); bottom: 7px; }
.dreieck__regler--bewegung { left: 13%; top: 60%; }
.dreieck__regler--deckung { left: 87%; top: 60%; }
.dreieck__regler svg { width: 30px; height: 30px; fill: none; stroke: var(--hell); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.dreieck__name { font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--hell); line-height: 1; }
.dreieck__striche { display: inline-flex; gap: 5px; height: 16px; }
.dreieck__striche i { width: 0; height: 16px; border-left: 1.2px dashed var(--dim); transform: rotate(4deg); }
.dreieck__striche i:nth-child(2) { transform: rotate(-3deg); }
.dreieck:has([data-bewegung="1"]:checked) .dreieck__regler--bewegung i:nth-child(-n+1),
.dreieck:has([data-bewegung="2"]:checked) .dreieck__regler--bewegung i:nth-child(-n+2),
.dreieck:has([data-bewegung="3"]:checked) .dreieck__regler--bewegung i:nth-child(-n+3),
.dreieck:has([data-aufmerksamkeit="1"]:checked) .dreieck__regler--aufmerksamkeit i:nth-child(-n+1),
.dreieck:has([data-aufmerksamkeit="2"]:checked) .dreieck__regler--aufmerksamkeit i:nth-child(-n+2),
.dreieck:has([data-aufmerksamkeit="3"]:checked) .dreieck__regler--aufmerksamkeit i:nth-child(-n+3),
.dreieck:has([data-deckung="1"]:checked) .dreieck__regler--deckung i:nth-child(-n+1),
.dreieck:has([data-deckung="2"]:checked) .dreieck__regler--deckung i:nth-child(-n+2),
.dreieck:has([data-deckung="3"]:checked) .dreieck__regler--deckung i:nth-child(-n+3) {
border-left: 3px solid var(--hell); filter: url(#hand);
}
.dreieck__punkt, .dreieck__punkt[data-tipp] {
position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
display: grid; place-items: center; cursor: pointer;
}
.dreieck--aus .dreieck__punkt { cursor: default; }
.dreieck__punkt input { position: absolute; opacity: 0; pointer-events: none; }
.dreieck__punkt > span[aria-hidden] {
width: 14px; height: 14px; border-radius: 50%;
background: var(--papier-hell); border: 1.5px solid var(--text);
transition: width .15s, height .15s;
}
.dreieck__punkt:hover > span[aria-hidden], .dreieck__punkt:has(input:focus-visible) > span[aria-hidden] {
width: 18px; height: 18px; border: 1.9px solid var(--hell);
}
.dreieck__punkt input:checked + span { width: 20px; height: 20px; background: var(--hell); border-color: var(--hell); filter: url(#pigment); }
@media (max-width: 600px) {
.messung, .beobachten__unten { grid-template-columns: minmax(0, 1fr); }
.nestszene__fund { left: 30%; top: -6%; min-width: 0; padding: .35rem .7rem .45rem; }
.nestszene__fund .etikett { font-size: .8rem; }
.nestszene__fund .merkmal { width: 44px; margin: 0; }
.nestszene__fundname { font-size: .95rem; }
.nestszene__fundwirkung { font-size: .78rem; }
.nestszene__reizung { left: 70%; top: 2%; padding: 0 .5rem .1rem; border-width: 3px; font-size: .9rem; }
}
/* --- Schmale Bildschirme ---------------------------------------------- */
@media (max-width: 720px) {
body { padding: 0 8px; }
/* Die Kopfleiste ist mobil zu hoch, um beim Scrollen stehen zu bleiben. */
.kopf { position: static; }
.kopf__teile { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .9rem .6rem; }
.kopfteil--energie { grid-column: 1 / -1; }
.log li, .log li.log--wert { grid-template-columns: 6.5em minmax(0, 1fr); }
.log li.log--wert .log__wert { grid-column: 2; text-align: left; }
.log--haupt li { grid-template-columns: 2.9em 9ch minmax(0, 1fr); }
.log--einsatz li { grid-template-columns: 6.5em minmax(0, 1fr); }
.log--einsatz .log__aktion, .log--einsatz .log__text { grid-column: 2; }
.log--einsatz .log__aktion:empty { display: none; }
.lagefelder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding-inline: 1.1rem; }
.panel::after { left: 1.1rem; }
}
@media (max-width: 440px) {
.kopf__teile { grid-template-columns: minmax(0, 1fr); }
/* Lager als eine Zeile, die zum Rand hin ausblendet; ein Tipp öffnet das Private Lager. */
.ressourcen {
display: flex; flex-wrap: nowrap; gap: 14px; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.ressource { flex: none; }
.segment { width: 11px; }
.raster { padding: 10px 12px 18px 2px; }
.raster::before, .raster::after { left: calc(2px + 1.2em); right: 12px; }
.raster__zeile { grid-template-columns: 1.2em repeat(5, minmax(0, 1fr)); }
.kartenfeld { aspect-ratio: auto; min-height: 72px; padding: 2px 3px; font-size: .7rem; }
.kartenfeld__spanne { font-size: .74rem; }
.kartenfeld__tag { font-size: .72rem; }
.kartenfeld__ort { font-size: .7rem; }
.kartenfeld__ort-lang { display: none; }
.kartenfeld__ort-kurz { display: inline; }
.kartenfeld--kolonie .kartenfeld__ort { font-size: .6rem; letter-spacing: .06em; margin-right: -.06em; }
.kartenfeld__nest .nest { width: 26px; height: 18px; }
.kartenfeld__nest .nest--fern { width: 34px; height: 24px; }
.liste__zeile { grid-template-columns: minmax(0, 1fr) auto; }
.fortschritt { grid-template-columns: minmax(0, 1fr) auto; }
.fortschritt > .minibalken { grid-column: 1 / -1; grid-row: 2; }
.lagefelder { gap: 1rem 6px; }
.lagefeld { padding: .7rem .5rem .4rem; }
.lagefeld--knopf { padding-bottom: .9rem; }
.lagefeld--energie { padding-right: 44px; }
.entscheidungen { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.entscheidung .knopf { padding-inline: 12px; white-space: normal; }
.entscheidung__kosten { text-align: right; }
.lagefeld__wert { font-size: 1.4rem; }
.lagefeld__einheit { font-size: .9rem; }
.duell { gap: 6px; }
.duell__wert { font-size: 2.3rem; }
.ausgang__titel, .bericht__ausgang .ausgang__titel, .rueckkehr .ausgang__titel { font-size: 2.6rem; }
.gegenueber__zahl { font-size: 2.7rem; }
.gegenueber__gegen { font-size: 1.2rem; }
.nacht__liste li { gap: 10px; }
.koerper { gap: 5px; }
.slot { min-height: 54px; padding: .3rem .45rem; }
/* Untereinander: Funde oben, Gepäck unten, Pfeile zeigen nach unten und oben. */
.packen { grid-template-columns: minmax(0, 1fr); }
.pfeil { min-width: 32px; height: 30px; }
.pfeil--rein::before { content: "↓"; }
.pfeil--rein-alle::before { content: "↓↓"; }
.pfeil--raus::before { content: "↑"; }
.pfeil--raus-alle::before { content: "↑↑"; }
}
/* --- Bewegung reduzieren ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}