/* Let's Yes! - der Stil aller Seiten. Dunkel, ruhig, eine Farbe für Links.
 *
 * Oben die Farben und Maße (ändern sie sich, ändert sich alles). Dann die Grundelemente, dann der
 * Rahmen jeder Seite (bar oben, main, footer unten), dann wenige Klassen zum Wiederverwenden:
 *
 *   .lead      der Satz unter der Überschrift, etwas größer
 *   .muted     leiser Text
 *   .cards     eine Liste als Kärtchen nebeneinander (je li.card; ein Bild darin füllt die Breite)
 *   .list      eine Liste von Links untereinander, ohne Punkte, mit feinen Linien
 *   .links     Links in einer Zeile, mit · dazwischen
 *   .actions   Knöpfe und Links unter einer Überschrift
 *   .chat      der Chat eines Ortes (lib/chat.php): eine Tafel - Kopf, die Zeilen (rollen), unten das Feld
 *   .faces     zu .cards: Kärtchen für Spieler - das Facepic im Kreis, darunter der Name (lib/elements.php)
 *
 * Für Seiten, die das ganze Fenster füllen (ein Bild, eine Karte, ein Editor):
 *
 *   body.fullscreen   kein Rahmen im Fluss, nichts rollt; Bild oder Karte liegen fest im Fenster
 *   .bar.floating     die Leiste oben, schwebend über Bild oder Karte (die Editoren)
 *   .stage            in body.fullscreen: die Bühne unter der Leiste - body wird zwei Zeilen, oben die Leiste
 *                     (nicht schwebend), darunter die Bühne, so hoch wie der Rest des Fensters; Bild oder Karte
 *                     füllen sie, alles darüber liegt in ihr (absolute, vom Rand der Bühne aus) - die Seiten zum Gehen
 *   .overlay          eine schwebende Tafel darüber (halb durchsichtig)
 *   .strip            Zeilen wie im Chat: je Zeile ein halb durchsichtiger Streifen, so breit wie ihr Text
 *
 * Eine Seite darf ihren eigenen <style> haben - er kommt nach diesem und gewinnt.
 */

:root {
  color-scheme: dark;
  --bg: #111113;
  --panel: #1a1a1e;
  --panel-hover: #212126;
  --line: #2b2b31;
  --text: #e6e6ea;
  --muted: #9d9da8;
  --accent: #a78bfa;
  --accent-strong: #c4b5fd;
  --pin: #e0302a;
  --me: #ffd60a;
  --error: #f87171;
  --overlay: rgba(17, 17, 19, .85);           /* dicht genug zum Lesen - ohne Unschärfe, die bei jedem Bild neu rechnen müsste */
  --bar: #151518;
  --bar-height: 2.8rem;                       /* wie hoch die Leiste oben ist - misst sie selbst (lib/frame.php) */
  --radius: .75rem;
  --gap: clamp(1rem, 3vw, 2rem);
}

/* --- Grundelemente ---------------------------------------------------------------------------- */

html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: clamp(1rem, 0.85rem + 0.4vw, 1.2rem) / 1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-strong); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8em, 1.4em + 2vw, 2.6em); margin: .2em 0 .4em; }
h2 { font-size: 1.35em; margin: 2em 0 .7em; }
h3 { font-size: 1.05em; margin: 0 0 .3em; }

p, ul, ol { margin: 0 0 1em; }
li > :is(ul, ol) { margin-bottom: 0; }   /* eine Liste in einem Listenpunkt: ohne Abstand darunter */
img { max-width: 100%; height: auto; }
figure { margin: 1.5em 0; }
figure img { display: block; border-radius: var(--radius); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
code { font-size: .9em; background: var(--panel); padding: .1em .35em; border-radius: .3em; }

button, input, textarea, select { font: inherit; color: inherit; }
button, .button {
  display: inline-block;
  padding: .35em .95em;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { background: var(--panel-hover); border-color: var(--accent); color: var(--text); }
input, textarea {
  padding: .45em .7em;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: #0c0c0e;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* --- Der Rahmen: bar oben, main, footer unten --------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  padding: .7rem var(--gap);
  background: var(--bar);                     /* undurchsichtig: nichts scheint durch, auch nicht beim Rollen */
  border-bottom: 1px solid var(--line);
  font-size: .85em;
}
.bar .brand { color: var(--text); font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.bar .brand:hover { color: var(--accent-strong); }
.bar .status { color: var(--muted); }

main { flex: 1; width: 100%; max-width: 68rem; margin: 0 auto; padding: var(--gap); box-sizing: border-box; }

.crumbs { margin: 0 0 1.5rem; color: var(--muted); font-size: .85em; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-strong); }

.footer {
  padding: 2rem var(--gap) 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85em;
  text-align: center;
}
.footer p { margin: .3em 0; }

/* --- Klassen zum Wiederverwenden ---------------------------------------------------------------- */

/* Eine Liste ohne Einträge zeigt sich nicht (:empty hilft nicht - Leerzeichen der Vorlage zählen mit). */
:is(ul, ol):is(.chat, .list, .cards, .links, .lines):not(:has(> li)) { display: none; }

.lead { font-size: 1.2em; color: var(--muted); max-width: 38em; }
.muted { color: var(--muted); }

.cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.card:hover { border-color: var(--accent); background: var(--panel-hover); }
.card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.card > :is(h3, p) { margin: 0; padding: 0 1.1rem; }
.card > h3 { padding-top: .9rem; }
.card > p { color: var(--muted); font-size: .92em; padding-top: .25rem; }
.card > :last-child { padding-bottom: 1rem; }

.list { list-style: none; padding: 0; }
.list li { padding: .45em 0; border-bottom: 1px solid var(--line); }
.list li:first-child { border-top: 1px solid var(--line); }

.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 0; }
.links li:not(:last-child)::after { content: "·"; margin: 0 .6em; color: var(--muted); }

/* Wie man auf eine Seite verlinkt: leise, gleich unter der Aktionszeile (page.php). */
.link-snippet { margin: -1rem 0 1.5rem; font-size: .8em; color: var(--muted); }
.link-snippet code { color: var(--text); }
.link-snippet button { padding: .1em .6em; font-size: .9em; }
.flash { padding: .5em .9em; border: 1px solid var(--accent); border-radius: var(--radius); }   /* was eine Aktion sagte */
.flash.failed { border-color: var(--error); color: var(--error); }
.state-line { margin: -1rem 0 1.5rem; font-size: .8em; color: var(--muted); }   /* der Zustand hier (lib/programs.php) */
.state-line button { padding: .1em .6em; font-size: .9em; }
.program-error { display: block; margin: .3em 0; font-size: .8em; color: var(--error); }   /* ein Programm in der Seite, das nicht geht */
:is(.image-tour, .map, .panorama) .hotspot .link-snippet { font-size: .75em; overflow-wrap: anywhere; }   /* im Kärtchen eines Punktes */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1.5rem; font-size: .9em; }

/* Der Chat (lib/chat.php, überall dieselbe Tafel): oben klein "Chat" und "nur Gesagtes", darunter die Zeilen -
   das Neueste unten, sie rollen -, ganz unten das Feld. Gesagtes: Gesicht, Name, Zeit, darunter der Text; sagt
   dasselbe Gesicht gleich noch etwas (continued), nur der Text, eingerückt. Anderes (kommen, gehen, nehmen):
   ein Zeichen und ein Satz, leise. Auf den Seiten zum Gehen schwebt sie (.overlay, walk.css legt sie hin). */
.chat { display: flex; flex-direction: column; margin: 0 0 1.5rem; padding: .5rem .7rem .6rem; background: var(--panel);
        border: 1px solid var(--line); border-radius: var(--radius); font-size: .9em; line-height: 1.4; }
.chat > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem;
                 font-size: .8em; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.chat > header label { font-weight: 400; letter-spacing: 0; cursor: pointer; user-select: none; }
.chat > header input { margin: 0 .25em 0 0; vertical-align: -.1em; accent-color: var(--accent); }
.chat .scroll { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
                scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.chat .lines { list-style: none; margin: 0; padding: 0; }
.chat .lines > li { display: grid; grid-template-columns: 1.6em 1fr; column-gap: .55em; overflow-wrap: anywhere; }
.chat .says { margin-top: .55em; }
.chat .says.continued { margin-top: .1em; }
.chat .says .face { grid-row: span 2; width: 1.6em; height: 1.6em; margin-top: .1em; border-radius: 50%; object-fit: cover;
                    background: var(--line); border: 1px solid var(--line); box-sizing: border-box; }
.chat .says .head { font-size: .9em; }
.chat .says .text { grid-column: 2; }
.chat .says.continued :is(.face, .head) { display: none; }
.chat .who { color: var(--text); font-weight: 600; text-decoration: none; }
.chat .who.me { color: var(--me); }
.chat .who:hover { color: var(--accent-strong); }
.chat time { margin-left: .35em; font-size: .8em; color: var(--muted); }
.chat .event { margin-top: .35em; font-size: .85em; color: var(--muted); }
.chat .event .sign { text-align: center; opacity: .8; }
.chat .event a { color: inherit; }
.chat .event a:hover { color: var(--accent-strong); }
.chat .event time { opacity: .75; }
.chat:has(.only-said:checked) .event { display: none; }
.chat .lines > :first-child { margin-top: 0; }
.chat form { margin: .5rem 0 0; }
.chat form input[name="text"] { width: 100%; box-sizing: border-box; }
/* .chat.plain: der Chat in einer Seite (<chat>) - schlicht: je Zeile „Name: Text“ (ich gelb), leise, was geschah;
   darunter Feld und Knopf. Dieselben Zeilen, nur ohne Tafel, Gesichter und Zeiten. */
.chat.plain { display: block; padding: 0; background: none; border: 0; border-radius: 0; font-size: 1em; }
.chat.plain .scroll { max-height: none; overflow: visible; }
.chat.plain .lines > li { display: block; margin: .2em 0; }
.chat.plain :is(.face, time, .sign) { display: none; }
.chat.plain .says .head, .chat.plain .says.continued .head { display: inline; font-size: 1em; }
.chat.plain .says .head::after { content: ":"; }
.chat.plain .who { font-weight: 600; }
.chat.plain .event { font-size: 1em; font-style: italic; }
.chat.plain form { display: flex; gap: .5rem; margin: .8rem 0 0; }
.chat.plain form input[name="text"] { width: auto; flex: 0 1 22rem; }
ul.chat { list-style: none; }                  /* user.php: nur eine Liste, ohne Kopf und Feld */
ul.chat li { padding: .3em 0; border-bottom: 1px solid var(--line); }
ul.chat li:last-child { border-bottom: 0; }

/* --- Karten, Touren und Panoramen in einer Seite (page.php): das Bild mit Punkten, je Punkt ein Kärtchen ------- */

:is(.image-tour, .map, .panorama) { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; align-items: start; }
:is(.image-tour, .map, .panorama) .picture { grid-column: 1 / -1; position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
:is(.image-tour, .map, .panorama) .credit { grid-column: 1 / -1; margin: -.5rem 0 0; font-size: .8em; color: var(--muted); }
:is(.image-tour, .map, .panorama) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.image-tour, .map, .panorama) :is(.pin, .thumbnail span) {
  position: absolute; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem;
  border-radius: 50%; background: var(--pin); border: 2px solid #fff; box-sizing: border-box;
}
:is(.image-tour, .map, .panorama) .hotspot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
:is(.image-tour, .map, .panorama) .hotspot:target { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.image-tour, .map, .panorama) .thumbnail { position: relative; overflow: hidden; }
:is(.image-tour, .map, .panorama) .hotspot :is(h2, p, nav) { margin: .3rem 1rem 0; font-size: 1em; overflow-wrap: anywhere; }
:is(.image-tour, .map, .panorama) .hotspot h2 { margin-top: .8rem; }
:is(.image-tour, .map, .panorama) .hotspot p { color: var(--muted); }
:is(.image-tour, .map, .panorama) .hotspot > :last-child { margin-bottom: .9rem; }

/* --- Die Elemente in Seiten (lib/elements.php): Kärtchen mit Vorschau, Spieler, die Merkliste ------------- */

/* Kärtchen mit der Vorschau eines Dokuments (lib/previews.php): ein Bild mit Punkten, ein paar Angaben, ein Absatz. */
.card small { color: var(--muted); }
.card .picture { position: relative; }
.card .picture img { display: block; width: 100%; height: auto; border-radius: 0; }
.card .dot { position: absolute; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%; background: var(--pin); border: 1.5px solid #fff; box-sizing: border-box; }
.card :is(h3, p) { overflow-wrap: anywhere; }
.card p img { max-width: 100%; height: auto; }
mark { background: yellow; color: #111; }     /* <search>: die Fundstelle im Namen */

.cards.faces { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.5rem; }
.faces .card { padding: 1rem; text-align: center; overflow-wrap: anywhere; }
.faces .card a { display: block; outline: none; }
.faces .card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .6rem; }
/* Das Formular oben in einem Element (Suchfeld, Notiz, Name) - Abstand wie ein Absatz, bis zu den Kärtchen. */
:is(.search, .merkliste, .friends) > form { margin: 0 0 1.2rem; }
.faces .card form { margin-top: .6rem; }

.merkliste textarea { box-sizing: border-box; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; field-sizing: content; min-height: 4lh; max-height: 16lh; }
.merkliste .card form { padding-inline: 1.1rem; padding-top: .5rem; }
.merkliste .card form p { margin: 0; padding: 0; color: inherit; font-size: 1em; }

/* --- Seiten, die das ganze Fenster füllen ------------------------------------------------------------ */

body.fullscreen { display: block; min-height: 0; height: 100vh; overflow: hidden; }
.bar.floating { position: fixed; top: 0; left: 0; right: 0; }
/* Mit Bühne: oben die Leiste, so hoch wie ihr Text, darunter die Bühne mit dem Rest; nichts ragt heraus. */
body.fullscreen:has(> .stage) { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
body.fullscreen > .stage { position: relative; overflow: hidden; min-height: 0; }
.overlay {
  background: var(--overlay);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}
.strip { display: flex; flex-direction: column; align-items: flex-start; }
.strip > * { margin: 0; padding: .12em .55rem; background: var(--overlay); overflow-wrap: anywhere; }
.me { color: var(--me); }