/* ============================================================
Odenwald heute. Handschrift "Buntsandstein".
Themenschicht. NACH stil.css laden:
Diese Datei aendert nur das Aussehen. Keine Klassennamen, keine
Struktur, kein HTML. Jede bestehende Seite bekommt die Optik, ohne
dass sie angefasst wird, und jede neue Seite bekommt sie ebenfalls,
solange sie dieselben Klassen benutzt wie der Rest.
Zwei Modi:
Tag = Sandstein, Moosgruen, Rotbraun
Nacht = Nachtsandstein, Waldschwarz, Lampengold
Umgeschaltet wird ueber das Attribut am -Element:
erzwingt Nacht
erzwingt Tag
ohne Attribut folgt der Systemeinstellung
Gedacht ist es fuer den Sonnenuntergang aus dem Wetterabruf, nicht
fuer eine feste Uhrzeit: im Dezember ist um 17 Uhr Nacht, im Juni
nicht. Eine feste Stunde waere die Haelfte des Jahres falsch.
============================================================ */
/* ---------- Titelschrift ----------
Bricolage Grotesque traegt die Ueberschriften. Ohne die Datei fallen
sie sauber auf Geist zurueck, es bricht also nichts:
1. bricolage-grotesque.woff2 nach /schrift/ legen
2. das @font-face unten einkommentieren
3. in _headers font-src um die eigene Domain ergaenzen (steht schon drin)
Kein Google-Fonts-Link: das waere ein Abruf bei Dritten auf jeder
Seite, und die CSP muesste dafuer aufgeweicht werden. */
/*
@font-face {
font-family: 'Bricolage Grotesque';
src: url('/schrift/bricolage-grotesque.woff2') format('woff2-variations');
font-weight: 400 800;
font-display: swap;
}
*/
:root {
--schrift-titel: 'Bricolage Grotesque', 'Geist', 'Segoe UI', system-ui, sans-serif;
/* ----- Tag ----- */
--tinte: #2c2320;
--tinte-sanft: #5c4a3b;
--tinte-leise: #8a7562;
--papier: #f1e7db;
--flaeche: #f8f1e7;
--flaeche-tief: #e8d8c4;
--linie: #dbc7ae;
--linie-stark: #c8b096;
--signal: #7a4a24;
--signal-dunkel: #5a3418;
--signal-flaeche: #e8d8c4;
--signal-auf-dunkel: #dcb87a;
--moos: #4f5c3f;
--moos-tief: #3a4530;
--moos-schrift: #f3ece1;
--gold: #dcb87a;
--gold-tief: #b3925c;
--achtung: #8a4b06;
--achtung-flaeche: #f4e0c4;
--gut: #3f5c3a;
/* Kopfzeile und Tagesbanner als oberste Gesteinsschicht. */
--kopf-oben: #efd9bd;
--kopf-unten: #e7c9a5;
/* Die drei Hoehenzuege unter der Ueberschrift. Von fern nach nah, wie
man von einer Aussicht aus in den Odenwald schaut. */
--huegel-fern: #b98f63;
--huegel-mittel: #8f6f4c;
--huegel-nah: #4f5c3f;
/* Sandsteinkorn und Himmelskoerper. */
--korn: rgba(120, 80, 40, .022);
--tannen: #3d4a30;
--himmelskoerper: #fbf0dc;
--himmelsschein: rgba(251, 240, 220, .5);
--dunst: rgba(255, 246, 232, .3);
/* Bereichsfarben der Kartennadeln, in die Erdpalette gezogen.
Weiter acht Stueck, weiter etwa gleich hell, damit das weisse
Symbol lesbar bleibt. Nur eben nicht mehr aus dem Buntkasten. */
--m-ausflug: #7a4a24;
--m-draussen: #4f5c3f;
--m-essen: #a4552f;
--m-einkaufen: #6d7a1e;
--m-uebernachten: #7d4657;
--m-alltag: #5d5645;
--m-dorf: #8a3f2c;
--m-unterwegs: #3f6b6b;
/* Ein Radius fuer Flaechen, und die Steinform als Erkennungszeichen:
oben rund, unten kantig. Sie sitzt auf Bildern, Knoepfen, Chips und
der Fussleiste. Ein Grabstein, ein Grenzstein, ein Bildstock. */
--radius: 12px;
--radius-klein: 8px;
--stein: 26px 26px 7px 7px;
--stein-klein: 18px 18px 5px 5px;
--stein-gross: 30px 30px 12px 12px;
--schatten: 0 1px 2px rgba(70, 45, 25, .10), 0 4px 14px rgba(70, 45, 25, .10);
--schatten-blatt: 0 -2px 30px rgba(60, 38, 20, .3);
}
/* ----- Nacht -----
Kein umgefaerbter Tag: eigene Tageszeit. Das Gruen wird Waldschwarz,
das Rotbraun wird Lampengold, der Sandstein wird Nachtsandstein. */
@media (prefers-color-scheme: dark) {
:root:not([data-tageszeit='tag']) {
--tinte: #efe3d2;
--tinte-sanft: #cdbca7;
--tinte-leise: #8a7c6d;
--papier: #2a241d;
--flaeche: #322a21;
--flaeche-tief: #3b3229;
--linie: #443a30;
--linie-stark: #574a3d;
--signal: #dcb87a;
--signal-dunkel: #e8cb9a;
--signal-flaeche: #3b3229;
--signal-auf-dunkel: #dcb87a;
--moos: #232b1d;
--moos-tief: #1a2016;
--moos-schrift: #efe3d2;
--achtung: #e2ab63;
--achtung-flaeche: #3a2c1a;
--gut: #8fb07f;
--kopf-oben: #5c4636;
--kopf-unten: #33291f;
--huegel-fern: #31281f;
--huegel-mittel: #272019;
--huegel-nah: #1c2317;
--korn: rgba(255, 240, 210, .02);
--tannen: #151b12;
--himmelskoerper: #e8d9a8;
--himmelsschein: rgba(232, 217, 168, .32);
--dunst: rgba(220, 184, 122, .1);
--m-ausflug: #dcb87a;
--m-draussen: #8fb07f;
--m-essen: #e0a75a;
--m-einkaufen: #b9c46a;
--m-uebernachten: #cf94a6;
--m-alltag: #b3ab90;
--m-dorf: #e08a72;
--m-unterwegs: #7fbcbc;
--schatten: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .35);
--schatten-blatt: 0 -2px 30px rgba(0, 0, 0, .55);
}
}
/* Tag ausdruecklich erzwungen (Einstellung "immer hell"), auch wenn das
System auf dunkel steht. Dieselben Werte wie oben in :root. Das
Attribut darf auch auf einem einzelnen Abschnitt stehen, dann gilt es
nur dort — so zeigt der Baukasten beide Modi auf einer Seite. */
[data-tageszeit='tag'] {
--tinte: #2c2320;
--tinte-sanft: #5c4a3b;
--tinte-leise: #8a7562;
--papier: #f1e7db;
--flaeche: #f8f1e7;
--flaeche-tief: #e8d8c4;
--linie: #dbc7ae;
--linie-stark: #c8b096;
--signal: #7a4a24;
--signal-dunkel: #5a3418;
--signal-flaeche: #e8d8c4;
--signal-auf-dunkel: #dcb87a;
--moos: #4f5c3f;
--moos-tief: #3a4530;
--moos-schrift: #f3ece1;
--achtung: #8a4b06;
--achtung-flaeche: #f4e0c4;
--gut: #3f5c3a;
--kopf-oben: #efd9bd;
--kopf-unten: #e7c9a5;
--huegel-fern: #b98f63;
--huegel-mittel: #8f6f4c;
--huegel-nah: #4f5c3f;
/* Sandsteinkorn und Himmelskoerper. */
--korn: rgba(120, 80, 40, .022);
--tannen: #3d4a30;
--himmelskoerper: #fbf0dc;
--himmelsschein: rgba(251, 240, 220, .5);
--dunst: rgba(255, 246, 232, .3);
--m-ausflug: #7a4a24;
--m-draussen: #4f5c3f;
--m-essen: #a4552f;
--m-einkaufen: #6d7a1e;
--m-uebernachten: #7d4657;
--m-alltag: #5d5645;
--m-dorf: #8a3f2c;
--m-unterwegs: #3f6b6b;
--schatten: 0 1px 2px rgba(70, 45, 25, .10), 0 4px 14px rgba(70, 45, 25, .10);
--schatten-blatt: 0 -2px 30px rgba(60, 38, 20, .3);
}
/* Nacht ausdruecklich gesetzt. */
[data-tageszeit='nacht'] {
--tinte: #efe3d2;
--tinte-sanft: #cdbca7;
--tinte-leise: #8a7c6d;
--papier: #2a241d;
--flaeche: #322a21;
--flaeche-tief: #3b3229;
--linie: #443a30;
--linie-stark: #574a3d;
--signal: #dcb87a;
--signal-dunkel: #e8cb9a;
--signal-flaeche: #3b3229;
--signal-auf-dunkel: #dcb87a;
--moos: #232b1d;
--moos-tief: #1a2016;
--moos-schrift: #efe3d2;
--achtung: #e2ab63;
--achtung-flaeche: #3a2c1a;
--gut: #8fb07f;
--kopf-oben: #5c4636;
--kopf-unten: #33291f;
--huegel-fern: #31281f;
--huegel-mittel: #272019;
--huegel-nah: #1c2317;
--korn: rgba(255, 240, 210, .02);
--tannen: #151b12;
--himmelskoerper: #e8d9a8;
--himmelsschein: rgba(232, 217, 168, .32);
--dunst: rgba(220, 184, 122, .1);
--m-ausflug: #dcb87a;
--m-draussen: #8fb07f;
--m-essen: #e0a75a;
--m-einkaufen: #b9c46a;
--m-uebernachten: #cf94a6;
--m-alltag: #b3ab90;
--m-dorf: #e08a72;
--m-unterwegs: #7fbcbc;
--schatten: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .35);
--schatten-blatt: 0 -2px 30px rgba(0, 0, 0, .55);
}
[data-tageszeit] { background: var(--papier); color: var(--tinte); }
/* ---------- Schrift ---------- */
h1, h2, h3,
.wortmarke,
.abschnitt-kopf h2,
.tagesbanner h1,
.ideenkarte-text h3,
.blatt-kopf h2,
.paket-kopf h3,
.brett-titel {
font-family: var(--schrift-titel);
letter-spacing: -.03em;
font-weight: 700;
}
.wortmarke { letter-spacing: -.02em; font-weight: 800; }
.wortmarke span { color: var(--tinte-sanft); opacity: .75; }
.tagesbanner h1 {
font-size: clamp(2rem, 8.5vw, 2.875rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: .98;
}
.tagesbanner .datum {
color: var(--signal);
letter-spacing: .16em;
}
.abschnitt-kopf h2 { font-size: 1.375rem; }
a { text-decoration-thickness: .08em; }
/* ---------- Kopfzeile: oberste Schicht, keine runden Knoepfe ----------
Die zwei runden Symbolknoepfe oben rechts sind das Erkennungszeichen
jeder Baukasten-App. Sie werden zu Steinen. */
/* Ganz oben ist Wald: die Kopfzeile ist das Kronendach in Moosgruen,
Wortmarke und Knoepfe in Creme, der Ortspunkt in Gold. Darunter faengt
der Sandstein an. Keine Tannenkante — einmal probiert, war zu viel. */
.kopfzeile {
background: var(--moos);
border-bottom: 0;
backdrop-filter: none;
color: var(--moos-schrift);
}
.kopfzeile .wortmarke { color: var(--moos-schrift); }
.kopfzeile .wortmarke span { color: color-mix(in srgb, var(--moos-schrift) 68%, transparent); opacity: 1; }
.kopfzeile .kopfknopf,
.kopfzeile .ortknopf {
color: var(--moos-schrift);
background: rgba(255, 255, 255, .13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.kopfzeile .kopfknopf:hover,
.kopfzeile .ortknopf:hover {
color: var(--moos-schrift);
background: rgba(255, 255, 255, .2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.kopfzeile .ortknopf .sym { color: var(--gold); }
/* ---------- Das Tagesbanner ist die Landschaft ----------
Kopfzeile und Ueberschrift bilden eine durchgehende Schicht, und
darunter liegen drei Huegelzuege: fern, mittel, nah. Reines CSS, kein
Bild und kein zusaetzliches Element — damit gilt es auf jeder Seite,
die ein .tagesbanner hat, ohne dass ein HTML angefasst wird. */
.tagesbanner {
position: relative;
margin-inline: -1rem;
margin-bottom: 1.5rem;
padding: 1.5rem 1rem 2.5rem;
overflow: hidden;
background:
linear-gradient(180deg, transparent 56%, var(--dunst) 72%, transparent 88%),
radial-gradient(125% 88px at 18% 116%, var(--huegel-fern) 0 62%, transparent 63%),
radial-gradient(145% 104px at 78% 122%, var(--huegel-mittel) 0 62%, transparent 63%),
radial-gradient(170% 120px at 42% 132%, var(--huegel-nah) 0 62%, transparent 63%),
linear-gradient(180deg, var(--kopf-oben) 0%, var(--kopf-unten) 100%);
}
/* Nur wenn das Banner wirklich das erste Element ist, schliesst es
nach oben an die Kopfzeile an. Auf der Startseite steht davor das
Warnband: dort wuerde ein negatives Randmass darueber ziehen. */
.huelle > .tagesbanner:first-child { margin-top: -1.25rem; }
/* Auf Seiten mit Luftbild sitzt das Bild direkt unter der Schicht. */
.tagesbanner + .luftbild img { border-radius: var(--stein-klein); }
.kopfknopf {
border-radius: var(--stein-klein);
color: var(--tinte-sanft);
background: color-mix(in srgb, var(--flaeche) 62%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(70, 45, 25, .16);
}
.kopfknopf:hover { color: var(--signal); background: var(--flaeche); }
.ortknopf {
border: 0;
border-radius: var(--stein-klein);
background: color-mix(in srgb, var(--flaeche) 62%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(70, 45, 25, .16);
font-weight: 600;
}
.ortknopf:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 2px var(--signal); }
/* ---------- Listen: Schichten statt Kartenstapel ----------
Die weisse Karte mit Rahmen und Radius 14 verschwindet. Die Zeilen
liegen offen auf dem Papier, getrennt durch eine Haarlinie. Damit
fallen zwei Ebenen weg, die nie etwas erklaert haben. */
.zielliste,
.ortsliste {
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
.zielliste li + li,
.ortsliste li + li { border-top: 1px solid var(--linie); }
.zeile {
padding: .875rem .25rem;
gap: .875rem;
transition: transform .12s ease, background-color .12s ease;
}
.zeile:hover { background: none; transform: translateX(3px); }
.zeile:active { background: none; transform: translateX(1px); }
/* Der Pfeil rechts in jeder Zeile faellt weg. Dass eine Zeile antippbar
ist, sagt sie ueber Groesse und Nachgeben, nicht ueber ein Zeichen,
das dreissig Mal untereinander steht. */
.zeile > .sym-weiter { display: none; }
/* app.js baut Name, Nebenzeile, Foto und die Kartenteile als . Ein
inline-Kasten nimmt keine Breite, keine Hoehe und kein
text-overflow an: die Nebenzeile lief bisher quer ueber die
Entfernung, und die Bildflaeche der Ideenkarte hatte ihre Hoehe nur
aus der Zeilenhoehe. Deshalb hier einmal zentral geradegezogen. */
.zeile-name,
.zeile-meta,
.ideenkarte-bild,
.ideenkarte-text,
.zeile-bild,
.zeile-marke { display: block; }
.zeile-marke { display: grid; place-items: center; }
.zeile-bild { overflow: hidden; }
/* Symbol und Foto bekommen die Steinform. */
.zeile-marke {
width: 3.25rem;
height: 4.125rem;
border-radius: var(--stein);
background: var(--flaeche-tief);
color: var(--signal);
box-shadow: 0 2px 4px rgba(70, 45, 25, .14);
}
.zeile-bild {
width: 3.25rem;
height: 4.125rem;
border-radius: var(--stein);
box-shadow: 0 2px 4px rgba(70, 45, 25, .14);
}
/* Die Entfernung ist die zweitwichtigste Angabe der ganzen App. Sie
darf aussehen wie eine Zahl, nicht wie eine Fussnote. */
.zeile-weite {
font-family: var(--schrift-titel);
font-size: 1.125rem;
font-weight: 700;
color: var(--tinte);
line-height: 1.1;
}
.ortsliste {
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
overflow: hidden;
}
.ortsliste .zeile { padding-inline: .875rem; }
.ortsliste .zeile[aria-current='true'] { background: var(--signal-flaeche); }
/* ---------- Knoepfe: Steine, keine Pillen ----------
Gedrueckt wird ein Stein: Lichtkante oben, Standflaeche unten, beim
Antippen sinkt er 2 px ein. Kein Schweben, kein Farbverlauf. */
.knopf {
border-radius: var(--stein-klein);
font-weight: 700;
border: 0;
}
.knopf:active { transform: translateY(2px); }
.knopf-haupt {
background: var(--moos);
color: var(--moos-schrift);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 var(--moos-tief);
}
.knopf-haupt:hover { background: var(--moos); filter: brightness(1.08); }
.knopf-haupt:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 0 var(--moos-tief); }
.knopf-rand {
background: var(--flaeche-tief);
color: var(--tinte);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--linie-stark);
}
.knopf-rand:hover { background: color-mix(in srgb, var(--flaeche-tief) 88%, var(--signal)); }
.knopf-rand:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 var(--linie-stark); }
.knopf-leise {
background: none;
color: var(--tinte-sanft);
box-shadow: inset 0 0 0 1px var(--linie-stark);
}
.knopf-leise:hover { color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.knopf-leise[aria-pressed='true'] {
color: var(--moos-schrift);
background: var(--moos);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* Der Gold-Knopf gehoert der Nacht: eine Sage, ein Turm, ein Weg im
Dunkeln. Am Tag nicht benutzen, sonst nutzt er sich ab. */
.knopf-gold {
background: var(--gold);
color: #2a241d;
box-shadow: 0 3px 0 var(--gold-tief);
}
.knopf-gold:active { box-shadow: 0 1px 0 var(--gold-tief); }
/* ---------- Chips und Schlagworte ---------- */
.chip {
border: 0;
border-radius: var(--stein-klein);
background: var(--flaeche-tief);
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
.chip[aria-pressed='true'] {
background: var(--moos);
color: var(--moos-schrift);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
@media (prefers-color-scheme: dark) {
.chip[aria-pressed='true'] { color: var(--moos-schrift); }
}
a.chip { color: var(--tinte); }
.chipleiste, .filterleiste {
background: none;
border-bottom: 0;
}
/* In der Huelle traegt schon die Huelle das Innenmass. Auf der
Kartenseite sitzt die Filterleiste dagegen randlos unter der
Kopfzeile und braucht ihr eigenes. */
.huelle > .chipleiste,
.huelle > .filterleiste { padding-inline: 0; }
.karte-seite .filterleiste {
background: var(--papier);
border-bottom: 1px solid var(--linie);
}
.schlagwort {
border: 0;
border-radius: var(--stein-klein);
background: var(--flaeche-tief);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.schlagworte.umfeld .schlagwort {
color: var(--signal);
background: var(--signal-flaeche);
font-weight: 600;
}
.filterknopf {
border: 0;
border-radius: var(--stein-klein);
background: var(--moos);
color: var(--moos-schrift);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 var(--moos-tief);
}
.aktivmarke { border: 0; border-radius: var(--stein-klein); background: var(--flaeche-tief); }
/* ---------- Kategorien, Karten, Kacheln ---------- */
.katfeld {
border-radius: var(--stein-klein);
border-color: var(--linie);
background: var(--flaeche);
}
.katfeld:hover { border-color: var(--signal); background: var(--flaeche-tief); }
.katfeld .name { font-weight: 600; }
.katfeld .anzahl {
font-family: var(--schrift-titel);
font-size: 1rem;
font-weight: 700;
color: var(--signal);
}
.ideenkarte {
border: 0;
border-radius: var(--stein-gross);
background: var(--flaeche);
box-shadow: var(--schatten);
}
.ideenkarte:hover { box-shadow: 0 6px 18px rgba(70, 45, 25, .16); }
.ideenkarte-bild { display: block; height: 10.625rem; background: var(--flaeche-tief); overflow: hidden; }
.ideenkarte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ideenkarte-icon { color: var(--moos-schrift); background: var(--moos); }
.ideenkarte-text h3 { font-size: 1.375rem; }
.ideenkarte-zahl { color: var(--signal); }
.bildkachel img { border-radius: var(--stein-klein); }
.blattbild img, .luftbild img { border-radius: var(--stein-klein); }
.brett-eintrag, .paket, .hinweis {
border-radius: var(--radius);
border-color: var(--linie);
background: var(--flaeche);
}
.brett-kat, .paket-preis { color: var(--signal); }
.zahl {
border: 0;
border-radius: var(--stein-klein);
background: var(--flaeche-tief);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.zahl b { font-family: var(--schrift-titel); color: var(--signal); }
/* ---------- Baender ---------- */
.saisonband, .lagezeile {
border-radius: var(--radius-klein);
background: var(--flaeche-tief);
}
.saisonband .titel { color: var(--signal); }
.saisonband .stueck, .lagezeile .stueck {
border: 0;
border-radius: var(--stein-klein);
background: var(--papier);
}
.warnband { border-radius: var(--radius-klein); }
.zeitband { border-radius: var(--radius-klein); background: var(--flaeche-tief); }
/* Eine Schicht: laeuft von Rand zu Rand durch die Huelle hindurch und
traegt einen eigenen Grund. Damit bekommt eine Seite Rhythmus, ohne
dass jeder Abschnitt eine Karte wird. */
.schicht {
margin-inline: -1rem;
margin-top: 1.625rem;
padding: 1.375rem 1rem;
background: linear-gradient(180deg,
var(--flaeche-tief) 0%,
color-mix(in srgb, var(--flaeche-tief) 78%, var(--linie-stark)) 100%);
border-top: 1px solid var(--linie);
border-bottom: 1px solid var(--linie);
}
.schicht > :first-child { margin-top: 0; }
/* ---------- Die Sage: die tiefste Schicht, immer Nacht ----------
Gestein wird nach unten dunkler. Der Sagenblock ist deshalb in jedem
Modus dunkel, auch am Tag. Er ist der einzige Ort mit Lampengold. */
.sage-schicht {
margin-inline: -1rem;
margin-top: 1.625rem;
padding: 1.5rem 1rem 1.625rem;
background: linear-gradient(180deg, #3b3229 0%, #2a241d 100%);
color: #efe3d2;
position: relative;
overflow: hidden;
}
.sage-schicht .kleiner-titel { color: var(--gold); }
.sage-schicht h3 {
font-family: var(--schrift-titel);
font-size: 1.6875rem;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
max-width: 20ch;
color: #efe3d2;
}
.sage-schicht p { color: #cdbca7; }
.sage-schicht .sage-quelle { color: #8a7c6d; font-size: .875rem; }
.sage-bild {
width: 6rem;
height: 7.75rem;
flex: none;
border-radius: 48px 48px 10px 10px;
overflow: hidden;
background: #4a3f33;
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.sage-bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.72) saturate(.72) contrast(1.08); }
/* Der Mond. Der einzige Lichtpunkt der Seite, und der einzige Ort, an
dem sich etwas von allein bewegt. */
.sage-mond {
position: absolute;
right: 1.625rem;
top: 1.375rem;
width: 1.625rem;
height: 1.625rem;
border-radius: 50%;
background: #e8d9a8;
box-shadow: 0 0 26px 6px rgba(232, 217, 168, .32);
animation: mondlicht 6s ease-in-out infinite;
}
@keyframes mondlicht {
0%, 100% { opacity: .86; }
45% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sage-mond { animation: none; }
}
/* ---------- Blatt ---------- */
.blatt {
background: var(--flaeche);
border-radius: 30px 30px 0 0;
}
.blatt::backdrop { background: rgba(30, 22, 14, .55); }
.blatt-griff { background: var(--linie-stark); }
.blatt-zu {
border-radius: var(--stein-klein);
background: var(--flaeche-tief);
color: var(--tinte-sanft);
}
.blatt-kopf h2 { font-size: 1.625rem; }
.suchfeld, .schalterliste {
border-radius: var(--radius-klein);
background: var(--flaeche-tief);
border-color: var(--linie-stark);
}
.schalter input[type='checkbox']:checked { background: var(--moos); }
/* ---------- Karte ---------- */
.markierung {
color: var(--moos-schrift);
background: var(--signal);
border-color: var(--flaeche);
border-radius: 50% 50% 50% 12%;
}
.buendel {
background: var(--moos);
color: var(--moos-schrift);
border-color: var(--flaeche);
}
.markierung-ich { background: var(--signal); }
.kartenknopf, .kartenart {
border: 0;
border-radius: var(--stein-klein);
background: var(--flaeche);
color: var(--signal);
box-shadow: var(--schatten);
}
.zaehlfahne, .kartenfahne {
border: 0;
border-radius: var(--stein-klein);
background: color-mix(in srgb, var(--flaeche) 94%, transparent);
}
/* ---------- Fussnavigation: Moosband mit Steinen ---------- */
.fussnav {
padding: .5rem .625rem calc(.5rem + env(safe-area-inset-bottom));
background: var(--moos);
border-top: 0;
backdrop-filter: none;
gap: .25rem;
}
.fussnav a {
min-height: 3.75rem;
border-radius: var(--stein-klein);
color: color-mix(in srgb, var(--moos-schrift) 66%, transparent);
font-weight: 600;
}
.fussnav a[aria-current='page'] {
color: var(--moos-schrift);
background: rgba(255, 255, 255, .14);
font-weight: 700;
}
.fussnav a:active { background: rgba(255, 255, 255, .1); }
/* ---------- Landeseite ---------- */
.landekopf-los, .knopf-hell {
border-radius: var(--stein-klein);
font-weight: 700;
}
.landehero-titel {
font-family: var(--schrift-titel);
font-weight: 800;
letter-spacing: -.035em;
}
/* ---------- Kleinteile ---------- */
.wegmarke { background: var(--flaeche-tief); border-left-color: var(--linie-stark); }
.wegmarke[data-wichtig] { border-left-color: var(--signal); background: var(--signal-flaeche); }
.wegmarke b { border: 0; background: var(--papier); }
.regeln li::before, .schritte li::before { background: var(--signal); }
.schritte li::before { color: var(--moos-schrift); }
.kleiner-titel { letter-spacing: .14em; color: var(--tinte-leise); }
.geruest { border-radius: var(--stein-klein); }
.statuspunkt-offen { background: var(--gut); }
:focus-visible { outline-color: var(--signal); }
/* ============================================================
Feinschliff. Die Dinge, die den Unterschied zwischen "sauber"
und "von jemandem gemacht" ausmachen. Alles reines CSS, kein
zusaetzliches Element, kein Bild.
============================================================ */
/* ---------- Papier hat Korn ----------
Zwei feine Linienraster, leicht gegeneinander verdreht, bei etwa zwei
Prozent Deckung. Man sieht es nie bewusst, aber die Flaeche ist nicht
mehr toter Vollton. Fest verankert, damit das Korn beim Scrollen
liegen bleibt wie Papier und nicht mitwandert. */
body,
[data-tageszeit] {
background-image:
repeating-linear-gradient(92deg, var(--korn) 0 1px, transparent 1px 3px),
repeating-linear-gradient(3deg, var(--korn) 0 1px, transparent 1px 4px);
background-attachment: fixed;
}
/* ---------- Sonne und Mond ----------
Ein Himmelskoerper oben rechts im Tagesbanner: am Tag die tiefstehende
Sonne, in der Nacht der Mond. Das Dunstband ueber den Senken liegt als
erste Schicht im Hintergrund des Banners selbst — nicht als
Pseudo-Element, denn das wuerde ueber der Schrift liegen. */
.tagesbanner::before {
content: '';
position: absolute;
pointer-events: none;
right: 1.25rem;
top: 1.125rem;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--himmelskoerper);
box-shadow: 0 0 32px 10px var(--himmelsschein);
}
.tagesbanner > * { position: relative; z-index: 1; }
/* ---------- Ueberschriften bekommen ihren Stein ----------
Ein kleiner Grenzstein vor jeder Abschnitts-Ueberschrift. Dieselbe
Silhouette wie die Bilder, nur in Schriftgroesse. Das ist die eine
Stelle, an der die Handschrift bei jedem Abschnitt kurz auftaucht. */
.abschnitt-kopf h2 {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.abschnitt-kopf h2::before {
content: '';
flex: none;
width: .5rem;
height: .75rem;
border-radius: 4px 4px 1px 1px;
background: var(--signal);
}
/* ---------- Zeilen: der Stein hebt sich beim Antippen ---------- */
.zeile-marke,
.zeile-bild { transition: box-shadow .16s ease, transform .16s ease; }
.zeile:hover .zeile-marke,
.zeile:hover .zeile-bild {
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(70, 45, 25, .2);
}
.zeile:hover .zeile-weite { color: var(--signal); }
.zeile-weite { transition: color .16s ease; }
/* Bilder werden zusammengehalten: gleicher Ton, feiner Innenrand, damit
Handyfotos, Luftbilder und Commons-Bilder eine Familie bilden. */
.zeile-bild img,
.bildkachel img,
.ideenkarte-bild img {
filter: saturate(.93) contrast(1.02);
}
.zeile-bild,
.bildkachel img,
.blattbild img,
.luftbild img,
.ideenkarte-bild {
box-shadow: inset 0 0 0 1px rgba(70, 45, 25, .1);
}
/* ---------- Warnband: Schraffur wie am echten Schild ---------- */
.warnband {
position: relative;
overflow: hidden;
padding-left: 1.375rem;
}
.warnband::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: .5rem;
background: repeating-linear-gradient(
-45deg,
var(--achtung) 0 4px,
transparent 4px 8px);
opacity: .8;
}
/* ---------- Fussnavigation: Kerbe ueber dem aktiven Stein ----------
Statt der ueblichen Unterstreichung sitzt oben eine kleine Raute, wie
sie am Baum den Wanderweg markiert. */
.fussnav { position: relative; }
.fussnav a[aria-current='page'] { position: relative; }
.fussnav a[aria-current='page']::before {
content: '';
position: absolute;
top: .1875rem;
left: 50%;
width: .4375rem;
height: .4375rem;
margin-left: -.21875rem;
background: var(--moos-schrift);
transform: rotate(45deg);
}
.fussnav a[aria-current='page'] .sym { margin-top: .375rem; }
/* ---------- Kleinigkeiten ---------- */
::selection { background: var(--signal); color: var(--papier); }
.knopf:focus-visible,
.chip:focus-visible,
.zeile:focus-visible {
outline: 3px solid var(--signal);
outline-offset: 3px;
}
/* Die Quellzeile ist Kleingedrucktes und darf sich zurueckziehen, ohne
zu verschwinden: sie steht unter einer Haarlinie in Steinbreite. */
.quellzeile {
border-top: 0;
position: relative;
padding-top: 1.5rem;
}
.quellzeile::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3.25rem;
height: 2px;
background: var(--linie-stark);
}
@media (prefers-reduced-motion: reduce) {
.zeile:hover .zeile-marke,
.zeile:hover .zeile-bild { transform: none; }
}
/* ---------- Landeseite ----------
Das Luftbild bleibt, der Schleier darueber wird warm statt neutral,
damit das Foto zur Palette gehoert und die Schrift trotzdem traegt. */
.landehero-schleier {
background: linear-gradient(180deg,
rgba(26, 18, 10, .12) 0%,
rgba(26, 18, 10, .52) 55%,
rgba(26, 18, 10, .82) 100%);
}
.landehero-bild { filter: saturate(.9) contrast(1.04); }
.landekopf-los {
background: rgba(255, 255, 255, .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.landehero-quelle { color: rgba(255, 255, 255, .62); }
.knopf-hell {
background: var(--gold);
color: #2a241d;
box-shadow: 0 3px 0 var(--gold-tief);
}
.knopf-hell:hover { background: var(--gold); filter: brightness(1.06); }
.knopf-hell:active { box-shadow: 0 1px 0 var(--gold-tief); }
/* Die Landeseite hat kein .tagesbanner, also auch keine Huegel. Das ist
richtig: dort macht das Luftbild die Landschaft. */
.lande-seite .kopfzeile { background: none; }