/* =========================================================
   Öffentliche Seite /gaestebuch — Grüße von draußen.
   Ein Markup für alle Modi, Tokens und Knöpfe aus modi.css.
   Aufbau wie songs.css: Grundform oben, danach je Modus Farben und Schriften.

   Die Einträge stammen von Fremden. Deshalb hält das CSS sie in Schach:
   overflow-wrap bricht ein 600 Zeichen langes Wort um, statt die Seite breit zu machen,
   und white-space: pre-line macht aus den Zeilenumbrüchen im Text echte Absätze —
   ohne dass irgendwo <br> aus fremdem Text entstehen müsste.
   ========================================================= */

/* ---------- Seitenaufbau ---------- */
.gb-kopf { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 44px) 8px; }
.seiten-meldung { max-width: 640px; }
.seiten-meldung .nochmal { margin-top: 14px; }
.gb-schreiben { padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 44px); }
.gb-liste-bereich { padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 44px) clamp(48px, 7vw, 80px); }
.zwischentitel { margin-bottom: 10px; }
.gb-hinweis { font-size: 15px; max-width: 70ch; margin-bottom: 20px; }
.gb-laden { font-weight: 600; padding: 8px 0; }

/* ---------- Formular ---------- */
.gb-form { max-width: 720px; }
.gb-feld { margin-bottom: 16px; min-width: 0; }
.gb-feld label { display: block; font: 700 12px var(--text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.gb-feld input,
.gb-feld textarea { width: 100%; font: 17px/1.5 var(--text); padding: 10px 12px; border-radius: 0; }
.gb-feld input { min-height: 48px; }
.gb-feld textarea { min-height: 120px; resize: vertical; }
.gb-feld input::placeholder,
.gb-feld textarea::placeholder { opacity: .7; }
.gb-feld [aria-invalid="true"] { outline: 3px solid var(--fehler, #ff4a4f); outline-offset: 0; }
.gb-zaehler { font: 700 12px var(--text); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.gb-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.gb-form[aria-busy="true"] .gb-feld { opacity: .6; transition: opacity .2s; }

/* ---------- Einträge ---------- */
.gb-liste { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.gb-eintrag { padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.gb-eintrag.leer { grid-column: 1 / -1; font-weight: 600; }
.gb-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.gb-absender { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: auto; }
.gb-name { overflow-wrap: anywhere; }
.gb-wann { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =============== Backstage: Zettel an der Backstage-Tür =============== */
html[data-modus="backstage"] { --fehler: var(--rot-text); }
html[data-modus="backstage"] .zwischentitel { font: 28px/1 var(--titel); text-transform: uppercase; }
html[data-modus="backstage"] .gb-hinweis { color: var(--gedaempft); }
/* Gelber Abschnitt: dort steht der Hinweis auf dunklerem Grund und braucht vollen Kontrast */
html[data-modus="backstage"] .gb-schreiben { background: var(--gelb); color: var(--schwarz); --fokus: var(--schwarz); border-top: 3px solid var(--schwarz); border-bottom: 3px solid var(--schwarz); }
html[data-modus="backstage"] .gb-schreiben .gb-hinweis { color: var(--schwarz); font-weight: 600; }
html[data-modus="backstage"] .gb-feld label { color: var(--schwarz); }
html[data-modus="backstage"] .gb-feld input,
html[data-modus="backstage"] .gb-feld textarea { border: 3px solid var(--schwarz); background: #fff; color: var(--schwarz); }
html[data-modus="backstage"] .gb-zaehler { color: var(--gedaempft); }
html[data-modus="backstage"] .gb-zaehler[data-knapp="true"] { color: var(--rot-text); }
html[data-modus="backstage"] .gb-eintrag {
  background: #fff9ec; border: 3px solid var(--schwarz); box-shadow: 5px 5px 0 var(--schwarz);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
html[data-modus="backstage"] .gb-name { font: 24px/1.05 var(--titel); font-weight: 400; text-transform: uppercase; }
html[data-modus="backstage"] .gb-wann { color: var(--gedaempft); }
html[data-modus="backstage"] .gb-eintrag.leer { background: transparent; border: 0; box-shadow: none; clip-path: none; padding: 8px 0; color: var(--gedaempft); }

/* =============== Welttournee: Fanpost bei Nacht =============== */
html[data-modus="welttournee"] { --fehler: var(--feuer); }
html[data-modus="welttournee"] .gb-kopf { background: radial-gradient(ellipse 70% 90% at 50% 0, rgba(255,91,26,.22), transparent 70%); }
html[data-modus="welttournee"] .zwischentitel { font: 900 22px/1 var(--block); text-transform: uppercase; letter-spacing: .08em; color: var(--feuer); }
html[data-modus="welttournee"] .gb-hinweis { color: var(--grau); }
html[data-modus="welttournee"] .gb-schreiben { border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); background: linear-gradient(180deg, #17120f, var(--nacht)); }
html[data-modus="welttournee"] .gb-feld label { font-family: var(--block); color: var(--grau); }
html[data-modus="welttournee"] .gb-feld input,
html[data-modus="welttournee"] .gb-feld textarea { border: 1px solid var(--grau); background: var(--nacht); color: var(--chrom); border-radius: 6px; }
html[data-modus="welttournee"] .gb-zaehler { font-family: var(--block); color: var(--grau); }
html[data-modus="welttournee"] .gb-zaehler[data-knapp="true"] { color: var(--glut); }
html[data-modus="welttournee"] .gb-eintrag { background: var(--asphalt); border: 1px solid var(--kante); border-radius: 10px; }
html[data-modus="welttournee"] .gb-name { font: 700 20px/1.1 var(--block); text-transform: uppercase; letter-spacing: .06em; color: var(--glut); }
html[data-modus="welttournee"] .gb-wann { color: var(--grau); }
html[data-modus="welttournee"] .gb-eintrag.leer { background: transparent; border: 0; padding: 8px 0; color: var(--grau); }

/* =============== Stumpi: Wand in Schwarz-Gelb =============== */
html[data-modus="stumpi"] { --fehler: var(--gelb); }
html[data-modus="stumpi"] .zwischentitel { font: 22px/1.1 var(--display); margin-bottom: 12px; }
html[data-modus="stumpi"] .gb-hinweis { color: var(--grau); }
/* Schräg angeschnittener gelber Block, wie die Wechselabschnitte der übrigen Seiten */
html[data-modus="stumpi"] .gb-schreiben {
  clip-path: polygon(0 44px, 100% 0, 100% calc(100% - 44px), 0 100%);
  padding-top: calc(clamp(32px, 5vw, 56px) + 44px); padding-bottom: calc(clamp(32px, 5vw, 56px) + 44px);
}
html[data-modus="stumpi"] .gb-schreiben .gb-hinweis { color: var(--schwarz); font-weight: 600; }
html[data-modus="stumpi"] .gb-feld label { color: var(--schwarz); }
html[data-modus="stumpi"] .gb-feld input,
html[data-modus="stumpi"] .gb-feld textarea { border: 3px solid var(--schwarz); background: var(--weiss); color: var(--schwarz); }
html[data-modus="stumpi"] .gb-feld [aria-invalid="true"] { outline-color: var(--rot); }
html[data-modus="stumpi"] .gb-schreiben .knopf { background: var(--schwarz); color: var(--gelb); border-color: var(--schwarz); }
html[data-modus="stumpi"] .gb-zaehler { color: var(--schwarz); }
html[data-modus="stumpi"] .gb-zaehler[data-knapp="true"] { color: var(--rot); font-size: 14px; }
html[data-modus="stumpi"] .gb-eintrag { background: var(--kohle); border-top: 6px solid var(--rot); --fokus: var(--gelb); }
html[data-modus="stumpi"] .gb-name { font: 20px/1.15 var(--display); font-weight: 400; color: var(--gelb); }
html[data-modus="stumpi"] .gb-wann { color: var(--grau); }
html[data-modus="stumpi"] .gb-eintrag.leer { background: transparent; border: 0; padding: 8px 0; color: var(--grau); }

@media (max-width: 700px) {
  html[data-modus] .gb-kopf .ueberschrift { overflow-wrap: break-word; }
  .gb-eintrag { padding: 16px; }
}