/* Pixi – dunkel, Akzent im Olivgelb des Roboters, Blau seiner Augen */
:root { --grund:#0f1512; --flaeche:#1a2420; --flaeche2:#24302a; --akzent:#c0b62a; --auge:#2aa7ff; --text:#eef2ec;
  --leise:rgba(238,242,236,.6); --ich:#2f5f8a; --gefahr:#e0484e; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--grund); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior:none; }
button { font:inherit; color:inherit; border:none; cursor:pointer; }
input, textarea { font:inherit; color:var(--text); }
.versteckt { display:none !important; }
.leise { color:var(--leise); }
.fehler { color:#ff8a8f; min-height:1.2em; }

/* Anmeldung */
#anmeldung { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.anmelde-bot { width:150px; height:150px; animation:schweben 3s ease-in-out infinite; }
#anmeldung h1 { margin:6px 0 0; font-size:34px; letter-spacing:1px; }
#anmeldeform { width:min(320px, 100%); display:flex; flex-direction:column; gap:10px; margin-top:22px; }
#anmeldeform input { padding:14px 16px; border-radius:14px; border:1px solid #2c3a33; background:var(--flaeche); font-size:16px; }
#anmeldeform button, .blatt-innen > button:not(.text-knopf) { padding:14px; border-radius:14px; background:var(--akzent); color:#1a1a05; font-weight:700; }
@keyframes schweben { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }

/* App-Gerüst */
#app { height:100dvh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:var(--flaeche); }
.kopf-bot { width:40px; height:40px; }
.kopf-bot.denkt { animation:wackeln .6s ease-in-out infinite; }
@keyframes wackeln { 0%,100% { transform:rotate(-6deg) } 50% { transform:rotate(6deg) } }
.kopf-text { flex:1; display:flex; flex-direction:column; }
.kopf-text b { font-size:18px; }
#kopfstatus { font-size:12px; color:var(--akzent); }
.rund { width:40px; height:40px; border-radius:50%; background:var(--flaeche2); font-size:20px; }
#zurueck { font-size:28px; line-height:1; }
main { flex:1; overflow:hidden; position:relative; }
.seite { position:absolute; inset:0; overflow-y:auto; padding:14px 12px; animation:einblenden .2s ease-out; }
@keyframes einblenden { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

/* Chat */
#verlauf { display:flex; flex-direction:column; gap:8px; }
.msg { max-width:84%; padding:9px 12px 6px; border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.38;
  font-size:15.5px; animation:auftauchen .22s cubic-bezier(.2,.9,.3,1.3); }
.msg em { display:block; text-align:right; font-style:normal; font-size:11px; color:var(--leise); margin-top:3px; }
.msg.pixi { align-self:flex-start; background:var(--flaeche2); border-bottom-left-radius:5px; }
.msg.ich { align-self:flex-end; background:var(--ich); border-bottom-right-radius:5px; }
.tag { align-self:center; font-size:12px; color:var(--leise); background:var(--flaeche); padding:3px 10px; border-radius:10px; margin:6px 0; }
@keyframes auftauchen { from { opacity:0; transform:translateY(10px) scale(.96) } to { opacity:1; transform:none } }
.tippt { display:flex; gap:5px; padding:12px 14px; margin-top:8px; width:max-content; }
.tippt i { width:8px; height:8px; border-radius:50%; background:var(--akzent); animation:punkt 1s infinite; }
.tippt i:nth-child(2) { animation-delay:.15s } .tippt i:nth-child(3) { animation-delay:.3s }
@keyframes punkt { 0%,60%,100% { transform:translateY(0); opacity:.5 } 30% { transform:translateY(-6px); opacity:1 } }

/* Schnellknöpfe + Eingabe */
.chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.chips button { flex:none; padding:7px 12px; border-radius:16px; background:var(--flaeche2); font-size:14px; }
.chips button:active { transform:scale(.95); }
#eingabe { display:flex; gap:8px; align-items:flex-end; padding:8px 10px; }
#eingabe textarea { flex:1; resize:none; border:none; outline:none; border-radius:22px; padding:11px 16px; background:var(--flaeche2);
  font-size:16px; max-height:140px; }
#eingabe button { width:46px; height:46px; flex:none; border-radius:50%; background:var(--akzent); color:#1a1a05; font-size:20px; }
#eingabe button:active { transform:scale(.9); }

/* Navigation unten */
nav { display:flex; background:var(--flaeche); padding-bottom:env(safe-area-inset-bottom); }
nav button { flex:1; background:none; padding:8px 0 10px; font-size:12px; color:var(--leise); display:flex; flex-direction:column; align-items:center; gap:2px; }
nav button span { font-size:20px; }
nav button.an { color:var(--akzent); }

/* Listen */
.listenkarte { width:100%; display:flex; align-items:center; gap:10px; padding:14px 16px; margin-bottom:8px; border-radius:16px;
  background:var(--flaeche2); text-align:left; animation:auftauchen .2s ease-out; }
.listenkarte b { flex:1; font-size:16px; }
.listenkarte i { font-style:normal; background:var(--akzent); color:#1a1a05; border-radius:10px; padding:1px 8px; font-size:13px; font-weight:700; }
.listenkarte i.null { background:var(--flaeche); color:var(--leise); }
.zeile-form { display:flex; gap:8px; margin-top:6px; }
.zeile-form input { flex:1; padding:12px 14px; border-radius:14px; border:1px dashed #3a4a42; background:transparent; font-size:16px; outline:none; }
.zeile-form button { width:46px; border-radius:14px; background:var(--akzent); color:#1a1a05; font-size:22px; font-weight:700; }
.punkt { display:flex; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid #222d27; animation:auftauchen .18s ease-out; }
.punkt .haken { width:26px; height:26px; flex:none; border-radius:8px; border:2px solid var(--akzent); background:transparent;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:#1a1a05; transition:background .15s, transform .15s; }
.punkt.erledigt .haken { background:var(--akzent); }
.punkt .haken:active { transform:scale(.85); }
.punkt span { flex:1; font-size:16px; transition:color .2s; }
.punkt.erledigt span { color:var(--leise); text-decoration:line-through; }
.punkt .weg { background:none; color:var(--leise); font-size:20px; padding:0 6px; }
.liste-fuss { display:flex; justify-content:space-between; margin-top:18px; }
.text-knopf { background:none; color:var(--leise); padding:8px; font-size:14px; }
.gefahr { color:var(--gefahr) !important; }
.leer { text-align:center; color:var(--leise); margin-top:40px; }

/* Einstellungsblatt */
.blatt { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; z-index:10; animation:einblenden .15s; }
.blatt-innen { width:100%; background:var(--flaeche); border-radius:22px 22px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px; animation:hoch .25s cubic-bezier(.2,.9,.3,1.1); }
@keyframes hoch { from { transform:translateY(100%) } to { transform:none } }
.blatt-innen h2 { margin:0 0 4px; font-size:18px; }
.blatt-innen button.zweit { background:var(--flaeche2) !important; color:var(--text) !important; font-weight:600; }

/* ---- Umbau 23.10.: Startseite, Nachrichten (Eingang/Ausgang), Gespräche, Neue Nachricht ---- */
.kopf-bot { cursor:pointer; }
.gruss { display:flex; align-items:center; gap:12px; margin:4px 2px 14px; }
.gruss img { width:64px; height:64px; animation:schweben 3s ease-in-out infinite; }
.gruss b { display:block; font-size:20px; }
.gruss span { color:var(--leise); font-size:14px; }
.gross-knopf { width:100%; padding:15px; border-radius:16px; background:var(--akzent); color:#1a1a05; font-weight:700; font-size:16px;
  margin-bottom:12px; transition:transform .1s; }
.gross-knopf:active { transform:scale(.98); }
.kachel { width:100%; display:block; text-align:left; background:var(--flaeche2); border-radius:18px; padding:14px 16px; margin-bottom:10px;
  animation:auftauchen .25s ease-out; }
.kachel-kopf { display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:16px; margin-bottom:6px; }
.kachel-kopf em { font-style:normal; font-weight:400; font-size:12px; color:var(--leise); }
.kachel-liste div { display:flex; gap:8px; font-size:14px; padding:4px 0; color:var(--leise); }
.kachel-liste div b { color:var(--text); font-weight:600; flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kachel-liste div span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kachel-liste .neu b::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gefahr); margin-right:6px; }
.zahl { font-style:normal; background:var(--gefahr); color:#fff; border-radius:11px; padding:1px 9px; font-size:13px; }
.werte { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.werte div { background:var(--flaeche); border-radius:12px; padding:8px 10px; }
.werte small { display:block; color:var(--leise); font-size:12px; }
.werte b { font-size:18px; }
.reiter { display:flex; background:var(--flaeche); border-radius:14px; padding:4px; margin-bottom:12px; }
.reiter button { flex:1; padding:9px; border-radius:11px; background:none; color:var(--leise); font-weight:600; }
.reiter button.an { background:var(--flaeche2); color:var(--text); }
.eintrag { width:100%; display:grid; grid-template-columns:1fr auto; gap:3px 10px; text-align:left; padding:12px 14px; margin-bottom:6px;
  border-radius:14px; background:var(--flaeche2); animation:auftauchen .2s ease-out; }
.eintrag b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eintrag em { font-style:normal; font-size:12px; color:var(--leise); }
.eintrag span { grid-column:1 / -1; font-size:14px; color:var(--leise); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eintrag.neu { box-shadow:inset 4px 0 0 var(--gefahr); }
.eintrag.neu span { color:var(--text); font-weight:600; }
.eintrag .status { color:var(--auge); }
.fab { position:absolute; right:16px; bottom:16px; width:58px; height:58px; border-radius:50%; background:var(--akzent); font-size:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.4); animation:auftauchen .3s ease-out; }
#nachrichten { padding-bottom:90px; }
#neu-text { width:100%; resize:vertical; border:none; outline:none; border-radius:16px; padding:14px; background:var(--flaeche2);
  font-size:16px; margin:6px 0 10px; }
#neu .chips { padding:0 0 12px; flex-wrap:wrap; }
nav button { position:relative; }
.punkt-rot { position:absolute; top:6px; left:calc(50% + 8px); width:10px; height:10px; border-radius:50%; background:var(--gefahr); }

/* ==== Pixel-Look (23.10.2026, Wunsch Johannes: Kacheln statt Reiter, stylisch, Pixelart) ==== */
@font-face { font-family:"Silkscreen"; src:url("/silkscreen-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Silkscreen"; src:url("/silkscreen-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
:root { --pixel:"Silkscreen", ui-monospace, monospace; --kante:#05080a; --schatten:4px 4px 0 var(--kante); }
body { background-color:var(--grund);
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:8px 8px; }
img { image-rendering:pixelated; }
i[data-pixel] { display:inline-flex; width:24px; height:24px; flex:none; }
i[data-pixel] svg { width:100%; height:100%; }
h1, h2, .kopf-text b, .pk b, .reiter button, .tag, .gross-knopf, .menue-zeile, .listenkarte b, #anmeldeform button { font-family:var(--pixel); letter-spacing:.5px; }
#anmeldung h1 { font-size:40px; text-transform:uppercase; }
#anmeldeform input, #anmeldeform button { border-radius:0; border:3px solid var(--kante); box-shadow:var(--schatten); }
#anmeldeform button:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--kante); }

/* Kopf */
header { background:var(--flaeche); border-bottom:3px solid var(--kante); }
.kopf-text b { font-size:17px; text-transform:uppercase; }
#kopfstatus { font-family:var(--pixel); font-size:10px; text-transform:uppercase; }
.rund { border-radius:0; border:3px solid var(--kante); box-shadow:3px 3px 0 var(--kante); background:var(--flaeche2);
  display:flex; align-items:center; justify-content:center; color:var(--akzent); }
.rund i[data-pixel] { width:20px; height:20px; }
.rund:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--kante); }

/* Gruß mit Sprechblase */
.gruss { align-items:flex-end; margin:6px 2px 18px; }
.gruss img { width:72px; height:72px; }
.sprechblase { position:relative; background:var(--text); color:#111; padding:10px 12px; border:3px solid var(--kante); box-shadow:var(--schatten); flex:1; }
.sprechblase::before { content:""; position:absolute; left:-12px; bottom:10px; width:12px; height:12px; background:var(--text);
  border-left:3px solid var(--kante); border-bottom:3px solid var(--kante); clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.gruss .sprechblase b { font-family:var(--pixel); font-size:15px; color:#111; text-transform:uppercase; }
.gruss .sprechblase span { color:#333; font-size:13.5px; }

/* Kacheln */
.kacheln { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pk { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; min-height:128px;
  padding:14px 14px 12px; background:var(--flaeche2); color:var(--text); border:3px solid var(--kante); box-shadow:var(--schatten);
  transition:transform .08s, box-shadow .08s; animation:reinpoppen .35s steps(5) both; overflow:hidden; }
.pk:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--kante); }
.pk::after { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--akzent); }
.pk.breit { grid-column:span 2; min-height:0; }
.pk i[data-pixel] { width:30px; height:30px; color:var(--akzent); margin-top:4px; }
.pk b { font-size:14px; text-transform:uppercase; line-height:1.2; }
.pk-text { font-size:13px; color:var(--leise); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pk strong { font-family:var(--pixel); font-size:26px; color:var(--akzent); line-height:1; }
.pk-zahl { position:absolute; top:14px; right:12px; font-style:normal; font-family:var(--pixel); background:var(--gefahr); color:#fff;
  padding:2px 7px; border:2px solid var(--kante); animation:blinken 1.2s steps(2) infinite; }
.pk-klein { position:absolute; top:16px; right:12px; font-style:normal; font-family:var(--pixel); font-size:10px; color:var(--leise); }
.pk-nachrichten::after { background:var(--auge); } .pk-nachrichten i[data-pixel] { color:var(--auge); }
.pk-listen::after { background:var(--akzent); }
.pk-haus::after { background:#8ff0b0; } .pk-haus i[data-pixel] { color:#8ff0b0; }
.pk-haus .werte { width:100%; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:4px; }
.pk-haus .werte div { background:var(--flaeche); border:2px solid var(--kante); border-radius:0; padding:6px; }
.pk-haus .werte small { font-family:var(--pixel); font-size:9px; text-transform:uppercase; }
.pk-haus .werte b { font-family:var(--pixel); font-size:14px; }
.pk-neu { flex-direction:row; align-items:center; gap:12px; background:var(--akzent); color:#14140a; padding:16px 14px; }
.pk-neu::after { display:none; }
.pk-neu i[data-pixel] { color:#14140a; margin:0; }
.pk-neu b { font-size:15px; }
.kacheln .pk:nth-child(2) { animation-delay:.05s } .kacheln .pk:nth-child(3) { animation-delay:.1s } .kacheln .pk:nth-child(4) { animation-delay:.15s }
@keyframes reinpoppen { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
@keyframes blinken { 50% { opacity:.35 } }

/* Unterseiten im selben Stil */
.reiter { border-radius:0; border:3px solid var(--kante); box-shadow:var(--schatten); padding:0; }
.reiter button { border-radius:0; font-size:13px; text-transform:uppercase; }
.reiter button.an { background:var(--akzent); color:#14140a; }
.eintrag, .listenkarte { border-radius:0; border:3px solid var(--kante); box-shadow:3px 3px 0 var(--kante); margin-bottom:10px; }
.eintrag:active, .listenkarte:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--kante); }
.eintrag.neu { box-shadow:inset 6px 0 0 var(--gefahr), 3px 3px 0 var(--kante); }
.listenkarte i { border-radius:0; font-family:var(--pixel); }
.fab { border-radius:0; border:3px solid var(--kante); box-shadow:var(--schatten); }
.fab:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--kante); }
.msg { border-radius:0 !important; border:2px solid var(--kante); box-shadow:3px 3px 0 var(--kante); }
.tag { border-radius:0; font-size:10px; text-transform:uppercase; }
.chips button, .zeile-form input, .zeile-form button, #neu-text, .gross-knopf { border-radius:0; border:3px solid var(--kante); }
.chips button { box-shadow:2px 2px 0 var(--kante); }
.gross-knopf { box-shadow:var(--schatten); }
#eingabe { border-top:3px solid var(--kante); background:var(--flaeche); }
#eingabe textarea { border-radius:0; border:2px solid var(--kante); }
#eingabe button { border-radius:0; border:3px solid var(--kante); box-shadow:3px 3px 0 var(--kante); }
#eingabe button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--kante); }
.punkt .haken { border-radius:0; }
.tippt i { border-radius:0; }

/* Menü */
.blatt-innen { border-radius:0; border-top:3px solid var(--kante); }
.blatt-innen h2 { text-transform:uppercase; }
.blatt-innen > button { border-radius:0 !important; border:3px solid var(--kante); box-shadow:3px 3px 0 var(--kante); }
.menue-zeile { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:var(--flaeche2);
  border:3px solid var(--kante); font-size:13px; }
.menue-zeile b { font-size:13px; color:var(--leise); }
.menue-zeile b.an { color:#8ff0b0; }
#abmelden { background:none !important; border:none !important; box-shadow:none !important; text-align:left; padding:8px 0 !important; font-size:14px; }
.kopf-text { min-width:0; }
.kopf-text b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#offline { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; gap:6px; }
#offline h1 { font-family:var(--pixel); text-transform:uppercase; margin:6px 0 0; }
#offline .anmelde-bot { filter:grayscale(.7); }
#offline .gross-knopf { width:min(320px, 100%); margin-top:14px; }
.pk b { font-size:clamp(11px, 3.6vw, 14px); overflow-wrap:anywhere; }
.pk b { overflow-wrap:normal; }
@media (max-width: 360px) {
  .pk b { font-size:10.5px; letter-spacing:0; }
  .pk-haus .werte { grid-template-columns:1fr 1fr; }
  .pk { padding:12px 10px 10px; }
}

/* ==== Startseiten-Banner (23.10.2026): Sternenhimmel, Skyline, Pixi zentral ==== */
.gruss, .sprechblase { display:none; }
#app.auf-start header { position:absolute; top:0; left:0; right:0; z-index:3; background:transparent; border:none; justify-content:flex-end; }
#app.auf-start .kopf-bot, #app.auf-start .kopf-text { display:none; }
#app.auf-start main .seite#start { padding-top:0; }
#start { padding-left:0; padding-right:0; }
#start .kacheln { padding:0 12px 16px; }
.held { position:relative; height:calc(300px + env(safe-area-inset-top)); margin-bottom:18px; overflow:hidden;
  background:linear-gradient(180deg, #070b14 0%, #0d1726 45%, #1b2a2a 100%); border-bottom:3px solid var(--kante); }
.held-sterne i { position:absolute; width:3px; height:3px; background:#e8f2ff; animation:funkeln 2.4s steps(2) infinite; }
.held-sterne i:nth-child(3n) { background:var(--auge); width:2px; height:2px; }
.held-sterne i:nth-child(5n) { background:var(--akzent); }
@keyframes funkeln { 50% { opacity:.15 } }
.held-mitte { position:absolute; inset:0; padding-top:env(safe-area-inset-top); display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding-bottom:40px; z-index:2; }
.held-bot { width:128px; height:128px; animation:schweben 2.6s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(42,167,255,.35)); }
.held-schatten { display:block; width:70px; height:8px; margin-top:4px; background:rgba(0,0,0,.55); animation:schatten 2.6s ease-in-out infinite; }
@keyframes schatten { 50% { transform:scaleX(.75); opacity:.6 } }
.held-name { margin:10px 0 4px; font-family:var(--pixel); font-size:46px; letter-spacing:6px; color:var(--akzent);
  text-shadow:4px 4px 0 var(--kante), 0 0 22px rgba(192,182,42,.45); }
.held-status { display:flex; align-items:center; gap:7px; font-family:var(--pixel); font-size:11px; text-transform:uppercase; color:var(--text);
  background:rgba(5,8,10,.65); border:2px solid var(--kante); padding:5px 10px; }
.held-status .trenner { color:var(--leise); }
.led { width:8px; height:8px; background:#38e07b; box-shadow:0 0 8px #38e07b; animation:blinken 2s steps(2) infinite; }
.held-status.post .led { background:var(--gefahr); box-shadow:0 0 8px var(--gefahr); animation-duration:.8s; }
.held-status.post #held-text { color:#ffb3b5; }
.held-stadt { position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1; }
.held-stadt svg { width:100%; height:100%; display:block; }
.held-stadt .haus { fill:#0a100d; }
.held-stadt .fenster { fill:var(--akzent); opacity:.85; }

/* ==== Titelbildschirm im Stil alter Game-Boy-Spiele (23.10.2026, Wunsch Johannes) ==== */
:root { --gb0:#0f380f; --gb1:#306230; --gb2:#8bac0f; --gb3:#9bbc0f; }
.held { height:calc(330px + env(safe-area-inset-top)); background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(139,172,15,.55) 6px 8px) 0 62% / 100% 30% no-repeat,
    var(--gb3);
  border-bottom:4px solid var(--gb0); }
.held-sterne { display:none; }
.held-status { position:absolute; top:calc(14px + env(safe-area-inset-top)); left:12px; z-index:4; gap:6px; background:var(--gb0); color:var(--gb3);
  border:2px solid var(--gb0); box-shadow:3px 3px 0 var(--gb1); font-size:10px; padding:5px 8px; }
.held-status .led { background:var(--gb3); box-shadow:none; }
.held-status.post .led { background:var(--gb3); animation-duration:.5s; }
.held-status.post #held-text { color:var(--gb3); }
.held-mitte { padding-bottom:56px; padding-top:calc(36px + env(safe-area-inset-top)); justify-content:flex-start; }
.held-bot { width:112px; height:112px; filter:none; image-rendering:pixelated; animation:schweben 1.6s steps(4) infinite; }
.held-schatten { display:none; }
.gb-logo { display:flex; gap:2px; margin:6px 0 0; font-family:var(--pixel); font-weight:700; font-size:60px; line-height:1; color:var(--gb2);
  transform:skewX(-8deg) rotate(-3deg);
  text-shadow: 3px 0 0 var(--gb0), -3px 0 0 var(--gb0), 0 3px 0 var(--gb0), 0 -3px 0 var(--gb0),
    3px 3px 0 var(--gb0), -3px -3px 0 var(--gb0), 3px -3px 0 var(--gb0), -3px 3px 0 var(--gb0),
    6px 6px 0 var(--gb1), 8px 8px 0 var(--gb0); }
.gb-logo span { display:inline-block; animation:hopsen 1.2s steps(2) infinite; }
.gb-logo span:nth-child(2) { animation-delay:.15s } .gb-logo span:nth-child(3) { animation-delay:.3s } .gb-logo span:nth-child(4) { animation-delay:.45s }
@keyframes hopsen { 50% { transform:translateY(-4px) } }
.gb-band { margin-top:16px; padding:5px 12px; background:var(--gb0); color:var(--gb3); font-family:var(--pixel); font-size:11px;
  text-transform:uppercase; letter-spacing:1px; box-shadow:4px 4px 0 var(--gb1); position:relative; }
.gb-band::before, .gb-band::after { content:""; position:absolute; top:4px; width:10px; height:100%; background:var(--gb1); z-index:-1; }
.gb-band::before { left:-10px; } .gb-band::after { right:-10px; }
.gb-start { margin-top:14px; background:none; color:var(--gb0); font-family:var(--pixel); font-weight:700; font-size:14px; text-transform:uppercase;
  letter-spacing:2px; animation:blinken 1s steps(2) infinite; padding:6px 10px; }
.held-stadt { bottom:16px; height:56px; }
.held-stadt .haus { fill:var(--gb1); }
.held-stadt .fenster { fill:var(--gb3); opacity:1; }
.gb-boden { position:absolute; left:0; right:0; bottom:0; height:16px; z-index:1; background:
    repeating-linear-gradient(90deg, var(--gb0) 0 2px, transparent 2px 16px) 0 0 / 100% 8px repeat-x,
    repeating-linear-gradient(90deg, var(--gb0) 0 2px, transparent 2px 16px) 8px 8px / 100% 8px repeat-x,
    linear-gradient(var(--gb0) 0 2px, var(--gb1) 2px 8px, var(--gb0) 8px 10px, var(--gb1) 10px); }
#app.auf-start .rund { background:var(--gb2); color:var(--gb0); border-color:var(--gb0); box-shadow:3px 3px 0 var(--gb1); }
.held { height:calc(360px + env(safe-area-inset-top)); }
.held-bot { width:96px; height:96px; }
.gb-logo { font-size:56px; }
.gb-band { margin-top:14px; }
.gb-start { margin-top:10px; background:var(--gb3); }
.held-stadt { height:48px; }

/* ==== Titel im Stil alter Arcade-Logos (Schriftband rot, Name grün im Bogen, Unterzeile gelb auf Klecks) — 23.10.2026 ==== */
@font-face { font-family:"Luckiest Guy"; src:url("/luckiest-guy.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Bangers"; src:url("/bangers.woff2") format("woff2"); font-display:swap; }
:root { --logo-kontur:#14210f; --logo-gruen:#56a83a; --logo-gruen-dunkel:#2f6b22; --logo-rot:#d8312c; --logo-gelb:#f6e05a; }
.held { height:calc(380px + env(safe-area-inset-top)); border-bottom:4px solid var(--kante);
  background:linear-gradient(180deg, #08101f 0%, #10213a 55%, #1c3550 100%); }
.held-sterne { display:block; }
.held-status { background:rgba(5,8,10,.75); color:var(--text); border-color:var(--kante); box-shadow:3px 3px 0 #000; }
.held-status .led { background:#38e07b; box-shadow:0 0 8px #38e07b; }
.held-status.post .led { background:var(--gefahr); box-shadow:0 0 8px var(--gefahr); }
.held-status.post #held-text { color:#ffb3b5; }
.held-mitte { padding-top:calc(46px + env(safe-area-inset-top)); padding-bottom:70px; }
.held-bot { width:84px; height:84px; image-rendering:auto; animation:schweben 2.4s ease-in-out infinite; filter:drop-shadow(0 4px 0 #000); }
.logo { display:flex; flex-direction:column; align-items:center; margin-top:2px; }
.logo-band { position:relative; z-index:2; padding:3px 16px 2px; background:var(--logo-rot); border:3px solid var(--logo-kontur);
  font-family:"Bangers", var(--pixel); font-size:20px; letter-spacing:1.5px; color:#fff; text-transform:uppercase;
  transform:perspective(220px) rotateX(10deg) skewX(-6deg); box-shadow:3px 4px 0 var(--logo-kontur);
  clip-path:polygon(3% 0, 100% 0, 97% 100%, 0 100%); text-shadow:2px 2px 0 var(--logo-kontur); }
.logo-name { display:flex; margin:-6px 0 0; font-family:"Luckiest Guy", var(--pixel); font-size:88px; line-height:1; color:var(--logo-gruen);
  -webkit-text-stroke:4px var(--logo-kontur); paint-order:stroke fill; text-shadow:5px 6px 0 var(--logo-kontur); letter-spacing:2px; }
.logo-name span { display:inline-block; animation:hopsen 2.4s ease-in-out infinite; }
.logo-name span:nth-child(1) { transform:rotate(-14deg) translateY(14px); --dreh:-14deg; --hoch:14px; }
.logo-name span:nth-child(2) { transform:rotate(-5deg) translateY(0); --dreh:-5deg; --hoch:0px; animation-delay:.15s; }
.logo-name span:nth-child(3) { transform:rotate(5deg) translateY(0); --dreh:5deg; --hoch:0px; animation-delay:.3s; }
.logo-name span:nth-child(4) { transform:rotate(14deg) translateY(14px); --dreh:14deg; --hoch:14px; animation-delay:.45s; }
@keyframes hopsen { 0%,100% { transform:rotate(var(--dreh)) translateY(var(--hoch)) } 50% { transform:rotate(var(--dreh)) translateY(calc(var(--hoch) - 5px)) } }
.logo-klecks { margin-top:-4px; padding:4px 16px 2px; background:var(--logo-gruen-dunkel); border:3px solid var(--logo-kontur);
  border-radius:14px 6px 16px 8px / 10px 14px 6px 12px; font-family:"Luckiest Guy", var(--pixel); font-size:26px; color:var(--logo-gelb);
  -webkit-text-stroke:2px var(--logo-kontur); paint-order:stroke fill; text-transform:uppercase; transform:rotate(-2deg);
  box-shadow:4px 4px 0 var(--logo-kontur); letter-spacing:1px; }
.gb-start { margin-top:16px; background:none; color:var(--logo-gelb); text-shadow:2px 2px 0 #000; }
.held-stadt { bottom:16px; height:60px; }
.held-stadt .haus { fill:#070b12; }
.held-stadt .fenster { fill:var(--logo-gelb); opacity:.9; }
.gb-boden { background:
    repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 16px) 0 0 / 100% 8px repeat-x,
    repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 16px) 8px 8px / 100% 8px repeat-x,
    linear-gradient(#000 0 2px, #3a2b22 2px 8px, #000 8px 10px, #3a2b22 10px); }
#app.auf-start .rund { background:rgba(5,8,10,.75); color:var(--logo-gelb); border-color:var(--kante); box-shadow:3px 3px 0 #000; }
@media (max-width: 360px) { .logo-name { font-size:72px; } .logo-band { font-size:17px; } .logo-klecks { font-size:22px; } }
/* Nur „PIXI“ (Wunsch Johannes): größer, ohne Schriftband und Unterzeile */
.logo-name { margin-top:6px; font-size:112px; -webkit-text-stroke:5px var(--logo-kontur); text-shadow:6px 7px 0 var(--logo-kontur); }
.logo-name span:nth-child(1) { --dreh:-14deg; --hoch:18px; } .logo-name span:nth-child(4) { --dreh:14deg; --hoch:18px; }
.held-bot { width:96px; height:96px; }
.gb-start { margin-top:22px; }
@media (max-width: 360px) { .logo-name { font-size:92px; } }
.logo-klecks { margin-top:12px; font-size:24px; }
.gb-start { margin-top:18px; }
@media (max-width: 360px) { .logo-klecks { font-size:20px; } }
.held { height:calc(430px + env(safe-area-inset-top)); }
.held-mitte { padding-bottom:84px; justify-content:center; padding-top:calc(24px + env(safe-area-inset-top)); }
.held { height:calc(450px + env(safe-area-inset-top)); }
.held-mitte { padding-top:calc(52px + env(safe-area-inset-top)); }
.held { height:calc(470px + env(safe-area-inset-top)); }
.gb-start { padding:12px 16px; min-height:44px; margin-top:12px; }

/* ==== Startseite passt auf eine Seite (23.10.2026): Titel teilt sich die Höhe mit den Kacheln ==== */
#start { display:flex; flex-direction:column; padding-bottom:12px; }
.held { flex:1 1 auto; height:auto; min-height:240px; max-height:470px; margin-bottom:12px; }
#start .kacheln { flex:none; gap:10px; }
.held-mitte { padding-top:calc(40px + env(safe-area-inset-top)); padding-bottom:62px; justify-content:center; }
.held-bot { width:clamp(44px, 8.5dvh, 96px); height:clamp(44px, 8.5dvh, 96px); }
.logo-name { font-size:clamp(54px, 10.5dvh, 112px); margin-top:0; }
.logo-name span:nth-child(1), .logo-name span:nth-child(4) { --hoch:clamp(6px, 1.6dvh, 18px); }
.logo-klecks { font-size:clamp(15px, 2.6dvh, 24px); margin-top:clamp(4px, 1dvh, 12px); }
.gb-start { margin-top:clamp(2px, .8dvh, 12px); }
.held-stadt { height:clamp(30px, 6dvh, 60px); }
.pk { min-height:104px; padding:12px 12px 10px; }
.pk i[data-pixel] { width:26px; height:26px; margin-top:2px; }
.pk-haus { padding-bottom:10px; }
.pk-neu { padding:13px 14px; }
@media (max-width: 360px) { .logo-name { font-size:clamp(50px, 10dvh, 92px); } }
/* Niedrige Bildschirme: kompakter Titel, „Press Start“ entfällt (die Kachel „Neue Nachricht“ macht dasselbe) */
@media (max-height: 700px) {
  .held { min-height:170px; margin-bottom:10px; }
  .held-mitte { padding-top:calc(34px + env(safe-area-inset-top)); padding-bottom:40px; }
  .held-bot { width:38px; height:38px; }
  .logo-name { font-size:46px; -webkit-text-stroke:3px var(--logo-kontur); text-shadow:4px 4px 0 var(--logo-kontur); }
  .logo-klecks { font-size:14px; margin-top:4px; padding:2px 10px 1px; }
  .gb-start { display:none; }
  .held-stadt { height:26px; bottom:12px; }
  .gb-boden { height:12px; }
  .pk { min-height:86px; gap:4px; }
  .pk-text { -webkit-line-clamp:1; }
  .pk-haus .werte b { font-size:12px; }
}
@media (max-width: 360px) and (max-height: 700px) {
  .pk-haus .werte { grid-template-columns:repeat(4, 1fr); gap:4px; }
  .pk-haus .werte div { padding:4px 3px; }
  .pk-haus .werte small { font-size:7.5px; }
  .pk-haus .werte b { font-size:11px; }
}
.gb-start { margin-top:clamp(8px, 1.2dvh, 14px); }

/* ==== Neu 23.10.2026: Wetter, Erinnerungen, Mikrofon, Töne, Startanimation ==== */
.pk-wetter { display:flex; align-items:center; gap:6px; width:100%; font-size:13px; color:var(--text); margin:-2px 0 2px; }
.pk-wetter i[data-pixel] { width:20px; height:20px; color:var(--logo-gelb); margin:0; }
.pk-wetter b { font-family:var(--pixel); font-size:15px; }
.pk-wetter span { color:var(--leise); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.pk-wetter em { font-style:normal; font-family:var(--pixel); font-size:10px; color:var(--leise); display:flex; align-items:center; gap:3px; white-space:nowrap; }
.pk-wetter em i[data-pixel] { width:14px; height:14px; color:var(--leise); }
.pk-erinn { position:absolute; top:14px; right:12px; font-style:normal; font-family:var(--pixel); font-size:11px; background:var(--flaeche);
  border:2px solid var(--kante); padding:2px 6px; }
.mikro { width:46px; height:46px; flex:none; background:var(--flaeche2); border:3px solid var(--kante); box-shadow:3px 3px 0 var(--kante);
  display:flex; align-items:center; justify-content:center; color:var(--auge); }
.mikro i[data-pixel] { width:22px; height:22px; }
.mikro.hoert { background:var(--gefahr); color:#fff; animation:blinken .6s steps(2) infinite; }
.neu-knoepfe { display:flex; gap:10px; align-items:stretch; }
.neu-knoepfe .gross-knopf { flex:1; margin:0; }
.mikro.gross { width:56px; height:auto; }
.menue-zeile.schalter { width:100%; text-align:left; color:var(--text); cursor:pointer; }
/* Startanimation */
#boot { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(180deg, #08101f, #10213a); transition:opacity .4s; }
#boot.weg { opacity:0; }
.boot-logo { display:flex; font-family:"Luckiest Guy", var(--pixel); font-size:96px; color:var(--logo-gruen); -webkit-text-stroke:5px var(--logo-kontur);
  paint-order:stroke fill; text-shadow:6px 7px 0 var(--logo-kontur); animation:fallen .9s steps(9) both; }
.boot-logo span { display:inline-block; }
.boot-logo span:nth-child(1) { transform:rotate(-14deg) translateY(16px) } .boot-logo span:nth-child(2) { transform:rotate(-5deg) }
.boot-logo span:nth-child(3) { transform:rotate(5deg) } .boot-logo span:nth-child(4) { transform:rotate(14deg) translateY(16px) }
@keyframes fallen { from { transform:translateY(-60vh) } to { transform:none } }
.boot-unter { font-family:"Luckiest Guy", var(--pixel); font-size:22px; color:var(--logo-gelb); -webkit-text-stroke:2px var(--logo-kontur);
  paint-order:stroke fill; text-transform:uppercase; opacity:0; animation:auftauchen .3s .9s both; }
.boot-balken { width:160px; height:12px; border:3px solid var(--kante); background:var(--flaeche); margin-top:8px; }
.boot-balken i { display:block; height:100%; width:0; background:var(--logo-gelb); animation:laden-balken .7s 1s steps(8) forwards; }
@keyframes laden-balken { to { width:100% } }
@media (max-height: 700px) { .pk-wetter { font-size:12px; } .pk-wetter em { display:none; } }
/* Schmale Handys (z. B. Galaxy S23, 360 px): Hauswerte in einer Reihe, damit der Titel Luft behält */
@media (max-width: 400px) {
  .pk-haus .werte { grid-template-columns:repeat(4, 1fr); gap:4px; }
  .pk-haus .werte div { padding:5px 4px; }
  .pk-haus .werte small { font-size:7.5px; }
  .pk-haus .werte b { font-size:12px; }
  .held-status { max-width:calc(100% - 90px); }
}
.blatt-innen > button.menue-zeile.schalter { background:var(--flaeche2) !important; color:var(--text) !important; font-weight:400; padding:12px 14px; box-shadow:none; }
.kopf-text b { font-size:clamp(12px, 4vw, 17px); }
.logo-klecks { margin-bottom:4px; }

/* ==== Titel wächst mit dem Titelbereich selbst (Container-Einheiten), nicht mit dem Bildschirm (23.10.2026, Rückmeldung Johannes) ==== */
.held { container-type:size; }
.held-mitte { padding-top:calc(46px + env(safe-area-inset-top)); padding-bottom:calc(clamp(26px, 13cqh, 60px) + 18px); gap:0; }
.held-bot { width:clamp(34px, 20cqh, 112px); height:clamp(34px, 20cqh, 112px); }
.logo-name { font-size:clamp(40px, 24cqh, 128px); -webkit-text-stroke:clamp(2px, 1.1cqh, 5px) var(--logo-kontur);
  text-shadow:clamp(3px, 1.3cqh, 6px) clamp(3px, 1.5cqh, 7px) 0 var(--logo-kontur); margin-top:0; }
.logo-name span:nth-child(1), .logo-name span:nth-child(4) { --hoch:clamp(5px, 3.5cqh, 20px); }
.logo-klecks { font-size:clamp(13px, 5.8cqh, 28px); margin-top:clamp(3px, 2cqh, 14px); padding:clamp(1px, .8cqh, 4px) clamp(8px, 3.5cqh, 18px); }
.held-stadt { height:clamp(26px, 13cqh, 60px); bottom:clamp(12px, 3.6cqh, 16px); }
.gb-start { display:none; margin-top:clamp(6px, 2.5cqh, 16px); }
@container (min-height: 330px) { .gb-start { display:inline-block; } }
.held-bot { width:clamp(30px, 18cqh, 108px); height:clamp(30px, 18cqh, 108px); }
.logo-name { font-size:clamp(34px, 22.5cqh, 124px); }
.logo-klecks { font-size:clamp(12px, 5.4cqh, 27px); }
.gb-start { display:none; }
@container (min-height: 360px) { .gb-start { display:inline-block; } }
.held-mitte { padding-top:calc(clamp(34px, 12cqh, 46px) + env(safe-area-inset-top)); }