:root {
  --nacht: #06121c; --tief: #0a1f2e; --schaum: #e8f4f1; --leise: #9fb6c0; --tuerkis: #7fd4c1; --glut: #ffd58a;
  --linie: rgba(232, 244, 241, .14); --glas: rgba(10, 31, 46, .72);
  --schrift: "Inter", system-ui, sans-serif; --erzaehlt: "Lora", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--nacht); color: var(--schaum); font-family: var(--schrift); font-size: 16px; line-height: 1.6; }
a { color: var(--tuerkis); }
[hidden] { display: none !important; }
.leise { color: var(--leise); font-size: 14.5px; }
.klein { font-size: 12.5px; }
.hintergrund { position: fixed; inset: 0; background: url(/bilder/strand_nacht.webp) center / cover no-repeat; opacity: .28; z-index: -1; }
.hintergrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,18,28,.35), var(--nacht) 85%); }

.sprache { position: fixed; top: 12px; right: 12px; z-index: 5; border: 1px solid var(--linie); background: var(--glas); color: var(--leise);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer; }
.sprache .an { color: var(--schaum); font-weight: 600; }

.raum { max-width: 720px; margin: 0 auto; padding: 28px 18px 24px; }
.kopf { display: flex; align-items: center; gap: 16px; margin: 18px 0 22px; }
.bild { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(127,212,193,.5), 0 0 34px rgba(127,212,193,.25); }
h1 { margin: 0; font-family: var(--erzaehlt); font-weight: 500; font-size: 34px; letter-spacing: .02em; line-height: 1.1; }
.kopf p { margin: 4px 0 0; }

.karte { background: var(--glas); border: 1px solid var(--linie); border-radius: 18px; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.erzaehlt { font-family: var(--erzaehlt); font-size: 17px; line-height: 1.7; margin-top: 0; }
.hinweis { border-left: 3px solid var(--glut); padding: 8px 14px; margin: 14px 0 18px; background: rgba(255,213,138,.06); border-radius: 0 10px 10px 0; }
.hinweis p { margin: 4px 0 0; font-size: 14px; color: var(--leise); }
.start { display: grid; gap: 14px; }
.start label { display: grid; gap: 6px; font-size: 14px; color: var(--leise); }
.start .haken { display: flex; align-items: flex-start; gap: 10px; }
.start .haken input { margin-top: 4px; }
input, textarea { font: inherit; color: var(--schaum); background: rgba(6,18,28,.7); border: 1px solid var(--linie); border-radius: 12px; padding: 11px 14px; }
input:focus, textarea:focus { outline: none; border-color: var(--tuerkis); }
.knopf { justify-self: start; font: inherit; font-weight: 600; color: var(--nacht); background: var(--tuerkis); border: 0; border-radius: 12px; padding: 11px 20px; cursor: pointer; }
.knopf:disabled { opacity: .5; }

.ki-zeile { margin: 0 0 10px; font-size: 12.5px; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.verlauf li { max-width: 88%; padding: 11px 15px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.verlauf .gast { justify-self: end; background: rgba(127,212,193,.14); border: 1px solid rgba(127,212,193,.25); border-bottom-right-radius: 5px; }
.verlauf .calypso { justify-self: start; background: var(--glas); border: 1px solid var(--linie); border-bottom-left-radius: 5px;
  font-family: var(--erzaehlt); font-size: 16.5px; line-height: 1.65; }
.verlauf .wer { display: block; font-family: var(--schrift); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 3px; }
.verlauf .anhoeren { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--schrift); font-size: 13px;
  color: var(--tuerkis); background: none; border: 1px solid rgba(127,212,193,.35); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.verlauf .wartet { opacity: .6; }
.schreibt { margin: 12px 4px 0; display: flex; align-items: center; gap: 8px; }
.punkte { display: inline-flex; gap: 4px; }
.punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--tuerkis); animation: puls 1.2s infinite ease-in-out; }
.punkte i:nth-child(2) { animation-delay: .15s; } .punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes puls { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .punkte i { animation: none; opacity: .7; } }

.eingabe { position: sticky; bottom: 10px; margin-top: 18px; display: flex; gap: 8px; align-items: flex-end; background: var(--glas);
  border: 1px solid var(--linie); border-radius: 18px; padding: 8px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.eingabe textarea { flex: 1; resize: none; border: 0; background: transparent; max-height: 180px; padding: 9px 10px; }
.rund { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; }
.rund svg { width: 20px; height: 20px; fill: currentColor; }
.senden { background: var(--tuerkis); color: var(--nacht); }
.mikro { background: rgba(232,244,241,.08); color: var(--schaum); }
.mikro.nimmt { background: #e0605a; color: #fff; animation: nimmt 1.4s infinite; }
@keyframes nimmt { 50% { box-shadow: 0 0 0 8px rgba(224,96,90,.18); } }
.meldung { min-height: 1.2em; margin: 8px 4px 0; font-size: 13px; }
.fuss { text-align: center; padding: 20px 0 30px; font-size: 13px; }

.text-seite { max-width: 720px; margin: 0 auto; padding: 40px 20px; }
.text-seite h1 { font-size: 28px; margin-bottom: 18px; }
.text-seite h2 { font-size: 18px; margin: 26px 0 8px; }

/* 30.10.: Titelbild – Calypso am Telefon in ihrer Hütte (Marcs Bild) */
.titelbild { position: relative; margin: 6px 0 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--linie);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(127,212,193,.08); }
.titelbild img { width: 100%; height: clamp(230px, 52vw, 380px); object-fit: cover; object-position: 72% 30%; display: block; }
.titelbild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,18,28,0) 45%, rgba(6,18,28,.92) 100%); }
.titel-text { position: absolute; left: 22px; bottom: 16px; right: 22px; z-index: 1; }
.titel-text h1 { font-size: clamp(34px, 7vw, 46px); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.titel-text p { margin: 4px 0 0; color: #d7e6e3; font-size: 15px; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.kopf .bild { width: 56px; height: 56px; }
.kopf h1 { font-size: 26px; }
@media (max-width: 700px) { .raum { padding-top: 14px; } .titelbild img { object-position: 78% 25%; } }
.vorschau-hinweis { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--glut);
  background: rgba(255,213,138,.08); border: 1px dashed rgba(255,213,138,.45); }
.schlaeft { margin: 12px 4px 0; padding: 9px 13px; border-radius: 12px; background: rgba(160,140,255,.08); border: 1px solid rgba(160,140,255,.25); color: #cfc8ff; }