/* smp.winku.de ALS APP (30.09.2026, Faddi: „füg bei smp.winku.de hinzu, dass man die Webseite als App zum Homebildschirm
   hinzufügen kann und die dann wirklich aussieht wie eine App — auch der Chat und so … mach so richtig geil").
   Lädt auf JEDER Seite (seiten/huelle.js) und auf /offline. Drei Teile:
     1. APP-MODUS    wenn die Seite als installierte App läuft: html[data-app] (setzt js/app.js) UND @media (display-mode:
                     standalone) — das Skript läuft erst nach dem Laden, die Medienabfrage greift schon beim ersten Bild.
                     Darum stehen die Regeln ZWEIMAL da (einmal je Weg) — beim Ändern beide Blöcke gleich halten.
                     Im normalen Browser gibt es kein standalone: zum Prüfen html[data-app] von Hand setzen.
     2. EINBLENDUNGEN Ladebalken, Ziehen zum Aktualisieren, Installier-Blatt — die Elemente baut js/app.js.
     3. SEITEN       die App-Startseite /app (seiten/app.js appStart) und „Keine Verbindung" (/offline).
   FALLEN: iOS legt den Inhalt UNTER die Statusleiste (black-translucent, viewport-fit=cover) — der Kopf braucht
   env(safe-area-inset-top). [hidden] gewinnt dank smp.css „[hidden] { display: none !important }". Eigene Einblendungen nie
   über der Leiste unten (--leiste-hoehe). Pixelbilder nur ganzzahlig vergrößert und pixelated, Pixelschrift nur 20/30/40 px. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   0. ÜBERALL — Tippen ohne Doppeltipp-Zoom; der Zurück-Knopf gehört nur der App
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
a, button, summary, label, .mc-knopf, .nv-unten-platz { touch-action: manipulation; }
.app-zurueck { display: none; }
/* Chat und Glocke am Telefon oben RECHTS (30.09.2026 abends, Faddi: „mach auf dem Handy, dass Chat und Benachrichtigungen oben
   rechts sind"). smp.css „.nv-haupt + .wk-rechts { margin-inline-start: 0 }" ist für den Laptop gedacht (dort schiebt die
   Hauptnavigation mit margin auto); am Telefon ist .nv-haupt ausgeblendet, die Regel griff trotzdem — die Symbole klebten
   direkt hinter „Wink". Hier wieder an den Rand, auf allen Seiten. */
@media (max-width: 760px) { .wk-zeile > .nv-haupt + .wk-rechts { margin-inline-start: auto; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   1. APP-MODUS — Weg A: html[data-app] (js/app.js)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-app], html[data-app] body { overscroll-behavior-y: none; }
html[data-app] { -webkit-tap-highlight-color: transparent; }
/* Kopf wie die Titelleiste einer App: bleibt oben, liegt unter der Statusleiste, ohne „Winku /" und Sprache (die steht auf /app) */
/* 30.09.2026 abends (Faddi: „Am Handy ist der Header verschwommen oder oben so ausgefadet?"): Kopf und Leiste unten sind DECKEND und ohne
   Weichzeichner — vorher 93 %/90 % mit backdrop-filter: blur, dann schimmerte der Inhalt verschwommen durch, am iPhone (Statusleiste
   black-translucent) auch unter der Uhrzeit. Nie wieder halbdurchsichtig machen (UI-Fehler 32/39). */
html[data-app] .wk-kopf { position: sticky; inset-block-start: 0; padding-block-start: env(safe-area-inset-top, 0px);
  background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-block-end: 1px solid var(--rand); transition: none; }
html[data-app] .wk-kopf .wk-marke, html[data-app] .wk-kopf .wk-trenner, html[data-app] .wk-kopf .wk-sprachen { display: none; }
html[data-app] .app-zurueck:not([hidden]) { display: inline-grid; }
html[data-app] :is(.wk-kopf, .nv-unten, .nv-leiste, .app-kachel, .app-chip) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Leiste unten wie eine Tab-Bar: halb durchsichtig, drückt sich beim Tippen */
html[data-app] .nv-unten { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-app] .nv-unten-platz img, html[data-app] .nv-unten-platz .wk-avatar { transition: transform .12s; }
html[data-app] .nv-unten-platz:active img, html[data-app] .nv-unten-platz:active .wk-avatar { transform: scale(.86); }
/* Der große Fuß ist weg — Sprache, Impressum und Datenschutz stehen auf /app */
html[data-app] .wk-fuss { display: none; }
html[data-app] .toasts { inset-block-start: calc(76px + env(safe-area-inset-top, 0px)); }
html[data-app] .app-installieren, html[data-app] .app-blatt { display: none; }
@media (max-width: 760px) {
  html[data-app] .wk-glocke-klapp > .nv-tafel.wk-glocke-tafel { inset-block-start: calc(62px + env(safe-area-inset-top, 0px)); }
}

/* ── Weg B: dasselbe über die Medienabfrage (vor dem Skript, kein Flackern) — gleich halten mit Weg A! ─────────── */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html, body { overscroll-behavior-y: none; }
  html { -webkit-tap-highlight-color: transparent; }
  .wk-kopf { position: sticky; inset-block-start: 0; padding-block-start: env(safe-area-inset-top, 0px);
    background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-block-end: 1px solid var(--rand); transition: none; }
  html .wk-kopf .wk-marke, html .wk-kopf .wk-trenner, html .wk-kopf .wk-sprachen { display: none; }
  html .app-zurueck:not([hidden]) { display: inline-grid; }
  :is(.wk-kopf, .nv-unten, .nv-leiste, .app-kachel, .app-chip) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html .nv-unten { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nv-unten-platz img, .nv-unten-platz .wk-avatar { transition: transform .12s; }
  .nv-unten-platz:active img, .nv-unten-platz:active .wk-avatar { transform: scale(.86); }
  html .wk-fuss { display: none; }
  html .toasts { inset-block-start: calc(76px + env(safe-area-inset-top, 0px)); }
  html .app-installieren, html .app-blatt { display: none; }
}
@media (display-mode: standalone) and (max-width: 760px), (display-mode: fullscreen) and (max-width: 760px) {
  html .wk-glocke-klapp > .nv-tafel.wk-glocke-tafel { inset-block-start: calc(62px + env(safe-area-inset-top, 0px)); }
}

/* Der Zurück-Knopf (seiten/huelle.js, js/app.js zeigt ihn auf Unterseiten): Stein-Knopf mit Pixel-Winkel, 44 px Tippfläche */
.app-zurueck { place-items: center; inline-size: 44px; block-size: 44px; flex: none; margin-inline-start: -8px; padding: 0; cursor: pointer;
  border: 0; background: none; color: #fff; }
.app-zurueck > span { display: none; }
/* 03.10.2026: Winkel (8x8-Pixel) in 24 px = genau 3 px je Pixel (vorher 20 px = 2,5 → ungleich breite Reihen, unscharf) */
.app-zurueck::before { content: ""; inline-size: 36px; block-size: 36px; box-sizing: border-box; border: 2px solid #000; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 1h2v1H5v1H4v2h1v1h1v1H4V6H3V5H2V3h1V2h1z'/%3E%3C/svg%3E") center / 24px 24px no-repeat,
    linear-gradient(rgb(111 111 111 / .82), rgb(111 111 111 / .82)), url("img/tex/stein.png") 0 0 / 32px 32px;
  box-shadow: inset 2px 2px 0 var(--knopf-licht, #aaa), inset -2px -3px 0 var(--knopf-schatten, #3c3c3c); }
.app-zurueck:active::before { box-shadow: inset 2px 3px 0 var(--knopf-schatten, #3c3c3c), inset -2px -2px 0 var(--knopf-licht, #aaa); }
.app-zurueck:focus-visible { outline: 2px solid var(--fokus, #fff); outline-offset: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   2. EINBLENDUNGEN (js/app.js baut sie)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Ladebalken beim Seitenwechsel — eine Erfahrungsleiste: schwarzer Rahmen, dunkelgrüne Rinne, hellgrüne Füllung in Kästchen */
.app-lade { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto 0; z-index: 400; block-size: 6px; background: #000; pointer-events: none;
  opacity: 0; transition: opacity .25s; }
.app-lade::before { content: ""; position: absolute; inset: 1px 0; background: #1f3a12; }
.app-lade > span { position: absolute; inset: 1px 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(#d4ff8a, #8ee03a 45%, #4b9a16); box-shadow: 0 0 8px rgb(142 224 58 / .55); }
.app-lade::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 24px); }
.app-lade[data-an] { opacity: 1; }
.app-lade[data-an] > span { animation: app-lade 10s cubic-bezier(.08, .75, .2, 1) forwards; }
.app-lade[data-fertig] > span { animation: none; transform: scaleX(1); transition: transform .15s; }
@keyframes app-lade { 0% { transform: scaleX(0); } 8% { transform: scaleX(.28); } 30% { transform: scaleX(.6); } 100% { transform: scaleX(.93); } }

/* Ziehen zum Aktualisieren — ein Stein-Knopf mit Pixel-Pfeil kommt unter dem Kopf hervor und dreht sich mit dem Finger */
.app-ziehen { position: fixed; inset-inline: 0; inset-block-start: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 45; display: grid; justify-items: center;
  pointer-events: none; transform: translateY(var(--zug, -64px)); opacity: var(--zug-a, 0); }
.app-ziehen > span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; box-sizing: border-box; border: 2px solid #000; image-rendering: pixelated;
  background: linear-gradient(rgb(60 60 60 / .9), rgb(60 60 60 / .9)), url("img/tex/stein.png") 0 0 / 32px 32px;
  box-shadow: inset 2px 2px 0 #8a8a8a, inset -2px -3px 0 #222, 0 8px 18px -6px rgb(0 0 0 / .8); }
.app-ziehen svg { inline-size: 24px; block-size: 24px; transform: rotate(var(--dreh, 0deg)); }
.app-ziehen[data-bereit] > span { background: linear-gradient(rgb(46 125 50 / .92), rgb(46 125 50 / .92)), url("img/tex/stein.png") 0 0 / 32px 32px;
  box-shadow: inset 2px 2px 0 #7bd17f, inset -2px -3px 0 #1b4d1e, 0 8px 18px -6px rgb(0 0 0 / .8); }
.app-ziehen[data-laedt] svg { animation: app-drehen .8s steps(8) infinite; }
.app-ziehen[data-zurueck] { transition: transform .22s, opacity .22s; }
@keyframes app-drehen { to { transform: rotate(360deg); } }

/* Installier-Blatt (nicht auf /app): klein, ÜBER der Leiste unten — nie darauf */
.app-blatt { position: fixed; inset: auto 8px calc(var(--leiste-hoehe, 0px) + 8px) 8px; z-index: 70; display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 4px 12px; align-items: center; padding: 10px 6px 12px 12px; box-sizing: border-box;
  color: #fff; background: #17171d; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 18px 44px -10px rgb(0 0 0 / .9); }
.app-blatt > img { grid-row: span 2; inline-size: 64px; block-size: 64px; image-rendering: pixelated; }
.app-blatt-text { display: grid; gap: 3px; min-inline-size: 0; }
.app-blatt-text b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); }
.app-blatt-text span { font: 500 .84rem/1.35 var(--schrift-text); color: #cfcfcf; }
.app-blatt-text img { inline-size: 24px; block-size: 24px; vertical-align: -7px; image-rendering: auto; }
.app-blatt-zu { all: unset; box-sizing: border-box; display: grid; place-items: center; inline-size: 44px; block-size: 44px; align-self: start; cursor: pointer;
  font: 400 30px/1 var(--mc-schrift); color: #aaa; text-shadow: 2px 2px 0 #000; }
.app-blatt-zu:hover, .app-blatt-zu:focus-visible { color: #fff; }
.app-blatt-zu:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.app-blatt-knoepfe { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.app-blatt-knoepfe .mc-knopf { min-block-size: 44px; }
body:has(details[open]) .app-blatt { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .app-blatt { animation: app-blatt-rein .45s cubic-bezier(.16, 1, .3, 1) both; }
  .app-kopf-innen, .app-boden .app-karte { animation: app-rein .5s cubic-bezier(.16, 1, .3, 1) both; }
  .app-boden .app-spalte:last-child .app-karte { animation-delay: .06s; }
}
@keyframes app-blatt-rein { from { translate: 0 calc(100% + 16px); } }
@keyframes app-rein { from { opacity: 0; translate: 0 10px; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   3a. DIE APP-STARTSEITE /app
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Die Bereichsleiste von Start passt nicht auf den Homescreen (dort steht schon alles) */
body:has([data-app-start]) .nv-leiste { display: none; }
.app-start { display: flex; flex-direction: column; min-block-size: 100%; }
.app-innen { inline-size: min(100% - 32px, 1060px); margin-inline: auto; position: relative; }

/* Kopf: der Himmel von Start (Tageszeit, Sonne, Mond, Sterne — seiten/start.js himmel), nur niedrig */
.himmel.app-kopf { min-block-size: 0; display: block; padding-block: 22px 26px; }
/* Sonne und Mond rechts oben — nicht hinter Begrüßung und Namen */
.himmel.app-kopf, .himmel.app-kopf[data-tageszeit] { --sonne-x: 88%; --mond-x: 88%; --mond-y: 14%; --oben: 40px; }
.app-kopf-innen { display: grid; gap: 16px; }
.app-ich { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.app-kopfbild { position: relative; display: grid; place-items: center; inline-size: 64px; block-size: 64px; flex: none; overflow: hidden;
  color: #fff; font: 800 1.5rem/1 var(--schrift-text); background: linear-gradient(135deg, #7c3aed, #06b6d4); box-shadow: 0 0 0 2px #000, 0 6px 0 rgb(0 0 0 / .35); }
.app-kopfbild img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; image-rendering: pixelated; }
.app-gruss { display: grid; gap: 2px; min-inline-size: 0; margin: 0; }
.app-gruss-zeile { font: 650 .98rem/1.25 var(--schrift-text); color: rgb(255 255 255 / .9); text-shadow: 0 1px 3px rgb(0 0 0 / .8); }
.app-name { font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-inline-size: 30rem; }
.app-chip { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; min-block-size: 52px; padding: 8px 12px; box-sizing: border-box;
  color: #fff; text-decoration: none; background: rgb(8 10 18 / .74); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .12s, border-color .12s; }
.app-chip img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.app-chip > span { display: grid; min-inline-size: 0; }
.app-chip b { font: 400 20px/24px var(--mc-schrift); font-weight: 400; text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-chip small { font: 600 .72rem/1.2 var(--schrift-text); color: #b9b9b9; }
.app-chip .app-betrag { color: var(--mc-gold); text-shadow: 2px 2px 0 #3f2a00; }
.app-chip.hat-neu { border-color: #6b4a00; box-shadow: inset 0 0 0 2px rgb(255 170 0 / .35); }
.app-chip.hat-neu b { color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.app-chip:hover, .app-chip:focus-visible { border-color: #fff; outline: none; }
.app-chip:active { transform: translateY(2px); }
.app-kopf-text { margin: 0; max-inline-size: 36rem; color: #fff; font-size: .95rem; line-height: 1.55; text-shadow: 0 1px 3px rgb(0 0 0 / .85); }
.app-gast-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 30rem; }
@media (max-width: 440px) { .app-gast-knoepfe { grid-template-columns: minmax(0, 1fr); } }
.app-gras.grasnarbe { block-size: 32px; background-size: 32px 32px; }

/* Boden: Erde, darauf die Karten */
.app-boden { flex: 1; padding-block: 18px 28px; image-rendering: pixelated;
  background: linear-gradient(rgb(20 12 6 / .74), rgb(10 8 6 / .88)), url("img/tex/erde.png") 0 0 / 64px 64px; }
.app-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.app-spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-inline-size: 0; }
@media (min-width: 980px) { .app-spalten { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.app-karte { position: relative; padding: 16px; min-inline-size: 0; background: rgb(10 10 14 / .8); border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .07), 0 12px 30px -14px rgb(0 0 0 / .8); }
.app-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); overflow-wrap: anywhere; }
.app-titelbild { inline-size: 32px; block-size: 32px; flex: none; image-rendering: pixelated; }
.app-untertitel { margin: 0 0 6px; font: 700 .74rem/1.2 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; }
.app-leise { margin: 0 0 12px; color: #cfcfcf; font-size: .9rem; line-height: 1.5; }
.app-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 8px; }
.app-karte-kopf .app-titel { margin: 0; min-inline-size: 0; }
.app-mehr { flex: none; display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 4px; font: 650 .86rem/1 var(--schrift-text); color: var(--mc-aqua); text-decoration: none; }
.app-mehr:hover, .app-mehr:focus-visible { text-decoration: underline; }

/* Spieler prüfen */
.app-suchform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.app-suchform .mc-feld { -webkit-appearance: none; appearance: none; min-block-size: 48px; }
.app-suchform .mc-feld::-webkit-search-cancel-button { filter: invert(1) grayscale(1); }
.app-suchform .mc-knopf { min-block-size: 48px; }
@media (max-width: 359px) { .app-suchform { grid-template-columns: minmax(0, 1fr); } }

/* Die Kacheln — ein Homescreen aus Pixel-Symbolen, in Gruppen wie Ordner */
.app-raster-karte { padding: 14px 10px 8px; }
.app-gruppe + .app-gruppe { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 2px solid rgb(255 255 255 / .06); }
.app-gruppe-titel { margin: 0 6px 12px; font: 400 20px/24px var(--mc-schrift); color: #a8a8a8; text-shadow: 2px 2px 0 #1e1e1e; }
.app-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; }
@media (min-width: 600px) { .app-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.app-raster > li { display: grid; min-inline-size: 0; }
.app-kachel { display: grid; justify-items: center; align-content: start; gap: 7px; min-inline-size: 0; padding: 4px 2px 2px; border-radius: 10px;
  color: #ececec; text-decoration: none; text-align: center; }
.app-kachel:focus-visible { outline: 2px solid var(--fokus, #fff); outline-offset: 2px; }
/* Farben je Kachel: Grundton --k; Fläche aus Stein, darüber die Farbe, Fase hell oben links, dunkel unten rechts */
.app-kachel { --k: #5b6170; }
.app-kachel[data-farbe="lila"] { --k: #7c3aed; }  .app-kachel[data-farbe="gold"] { --k: #c98a0c; }   .app-kachel[data-farbe="rot"] { --k: #c42a2a; }
.app-kachel[data-farbe="orange"] { --k: #d9651b; } .app-kachel[data-farbe="blau"] { --k: #2f6fd6; }  .app-kachel[data-farbe="tuerkis"] { --k: #149a8b; }
.app-kachel[data-farbe="pink"] { --k: #c93f7d; }  .app-kachel[data-farbe="gruen"] { --k: #2f9a3f; } .app-kachel[data-farbe="braun"] { --k: #8a5a2b; }
.app-kachel[data-farbe="cyan"] { --k: #1491ad; }  .app-kachel[data-farbe="gelb"] { --k: #b9960c; }  .app-kachel[data-farbe="grau"] { --k: #5b6170; }
/* Die Umrandung folgt den Pixel-Ecken: drop-shadow am Träger zeichnet sie um die beschnittene Fläche */
.app-symbol { position: relative; display: grid; place-items: center; inline-size: 64px; block-size: 64px; flex: none;
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 4px 0 rgb(0 0 0 / .4));
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1); }
.app-flaeche { position: absolute; inset: 0; image-rendering: pixelated;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  background: linear-gradient(rgb(255 255 255 / .1), rgb(0 0 0 / .22)),
    linear-gradient(color-mix(in srgb, var(--k) 84%, transparent), color-mix(in srgb, var(--k) 84%, transparent)), url("img/tex/stein.png") 0 0 / 32px 32px;
  box-shadow: inset 4px 4px 0 color-mix(in srgb, var(--k) 55%, #fff), inset -4px -4px 0 color-mix(in srgb, var(--k) 50%, #000); }
.app-symbol > img { position: relative; inline-size: 48px; block-size: 48px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgb(0 0 0 / .35)); }
.app-symbol > .app-kopfbild { inline-size: 40px; block-size: 40px; font-size: 1.1rem; box-shadow: 0 0 0 2px rgb(0 0 0 / .55), 3px 3px 0 rgb(0 0 0 / .3); }
.app-zahl { position: absolute; inset: -9px -6px auto auto; display: grid; place-items: center; min-inline-size: 26px; block-size: 26px; padding: 0 5px 2px; box-sizing: border-box;
  font: 400 20px/1 var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #5c1010; background: #e0302f; box-shadow: inset 2px 2px 0 #ff7b7b, inset -2px -2px 0 #8e1515; }
.app-kachel-name { max-inline-size: 100%; font: 650 .74rem/1.18 var(--schrift-text); color: #ececec; text-shadow: 0 1px 2px #000;
  overflow-wrap: break-word; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .app-kachel:hover .app-symbol { transform: translateY(-3px); } .app-kachel:hover .app-kachel-name { color: #fff; } }
.app-kachel:active .app-symbol { transform: translateY(2px) scale(.94); transition-duration: .06s; }
@media (max-width: 340px) {
  .app-symbol { inline-size: 56px; block-size: 56px; }
  .app-name { font-size: 20px; line-height: 24px; }
}

/* Neu für dich */
.app-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.app-hinweis { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-block-size: 44px; padding: 10px; box-sizing: border-box;
  color: var(--text); text-decoration: none; background: rgb(255 255 255 / .03); border-inline-start: 4px solid transparent; }
.app-hinweis img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.app-hinweis[data-neu] { background: rgb(255 170 0 / .08); border-inline-start-color: var(--mc-gold); }
.app-hinweis:hover, .app-hinweis:focus-visible { background: rgb(255 255 255 / .08); outline: none; }
.app-hinweis:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.app-hinweis-text { display: grid; gap: 2px; min-inline-size: 0; }
.app-hinweis-text > span { font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-hinweis-text small { font-size: .74rem; color: #a8a8a8; }
.app-neu-marke { font: 400 20px/1 var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
/* Leerer Zustand: erklärt, wofür die Seite da ist (seiten/app.js erklaerung) */
.app-erklaerung { display: grid; gap: 10px; padding: 12px; background: rgb(85 255 255 / .05); border-inline-start: 4px solid var(--mc-aqua); }
.app-erklaerung-kopf { margin: 0; color: #e6e6e6; font-size: .92rem; line-height: 1.45; }
.app-erklaerung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-erklaerung-liste li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; color: #d6d6d6; font-size: .88rem; line-height: 1.4; }
.app-erklaerung-liste img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }

/* ── ZWEI ANSICHTEN (30.09.2026 abends, Faddi: „auf dem PC nur Info dort anzeigen, nicht die Handy-Version"):
      .app-handy bis 760 px, .app-pc ab 761 px (Grenze der Navigation) — als installierte App immer .app-handy ─────────── */
.app-handy { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 760px) { .app-pc { display: none; } }
@media (min-width: 761px) { .app-handy { display: none; } }
html[data-app] .app-handy { display: flex; }
html[data-app] .app-pc { display: none; }
@media (display-mode: standalone), (display-mode: fullscreen) { html .app-handy { display: flex; } html .app-pc { display: none; } }

/* Die PC-Info: ruhig, eine Schicht Stein, links was die App ist und wie man sie holt, rechts Code und Adresse */
.app-pc { flex: 1; padding-block: 56px 72px; image-rendering: pixelated;
  background: linear-gradient(rgb(10 10 12 / .72), rgb(10 10 12 / .82)), url("img/tex/stein.png") 0 0 / 64px 64px; }
.app-pc-innen { inline-size: min(100% - 48px, 1060px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 980px) { .app-pc-innen { grid-template-columns: minmax(0, 1fr); } }
.app-pc-text { display: grid; gap: 18px; min-inline-size: 0; }
.app-pc-ueber { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.app-pc-symbol { inline-size: 64px; block-size: 64px; image-rendering: pixelated; filter: drop-shadow(0 8px 14px rgb(124 58 237 / .45)); }
.app-pc-titel { font: 400 40px/48px var(--mc-schrift); color: #fff; text-shadow: 4px 4px 0 var(--mc-schatten); }
.app-pc-satz { margin: 0; max-inline-size: 40rem; color: #d6d6d6; font-size: 1rem; line-height: 1.6; }
.app-pc-vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-pc-vorteile li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; background: rgb(0 0 0 / .45); border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06); font-size: .88rem; line-height: 1.4; color: #bdbdbd; }
.app-pc-vorteile img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.app-pc-vorteile b { display: block; color: #fff; font-weight: 700; font-size: .95rem; }
.app-pc-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-pc-weg { padding: 14px 16px; background: rgb(10 10 14 / .8); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .07); }
.app-pc-wegtitel { margin: 0 0 10px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.app-pc-weg ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-pc-weg li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .88rem; line-height: 1.4; color: #d6d6d6; }
.app-pc-weg li img { inline-size: 24px; block-size: 24px; image-rendering: auto; }
.app-pc-nr { display: grid; place-items: center; inline-size: 24px; block-size: 24px; font: 400 20px/1 var(--mc-schrift); color: var(--mc-gelb); background: #000; }
.app-pc-code { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: rgb(10 10 14 / .8); border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .07), 0 18px 40px -14px rgb(0 0 0 / .8); }
.app-pc-qrrahmen { padding: 8px; background: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 6px #3a3a3a, 0 0 0 8px #000; line-height: 0; }
.app-pc-qr { display: block; max-inline-size: 100%; block-size: auto; }
.app-pc-scan { margin: 8px 0 0; color: #bdbdbd; font-size: .9rem; }
.app-pc-adresse { margin: 6px 0 0; font: 400 30px/36px var(--mc-schrift); color: var(--mc-gruen); text-shadow: 3px 3px 0 #153f15; overflow-wrap: anywhere; user-select: all; }
.app-pc-klein { margin: 0; color: #8a8a8a; font-size: .82rem; }

/* Push aufs Handy — was sichtbar ist, bestimmt data-push-zustand (js/app.js), Teile mit data-nur="…" */
.app-push[data-push-zustand="pruefen"] [data-nur]:not([data-nur~="pruefen"]),
.app-push[data-push-zustand="nicht"] [data-nur]:not([data-nur~="nicht"]),
.app-push[data-push-zustand="ios"] [data-nur]:not([data-nur~="ios"]),
.app-push[data-push-zustand="aus"] [data-nur]:not([data-nur~="aus"]),
.app-push[data-push-zustand="an"] [data-nur]:not([data-nur~="an"]),
.app-push[data-push-zustand="arbeitet"] [data-nur]:not([data-nur~="arbeitet"]),
.app-push[data-push-zustand="blockiert"] [data-nur]:not([data-nur~="blockiert"]) { display: none; }
.app-push-schalter.mc-knopf { justify-content: space-between; gap: 12px; min-block-size: 48px; padding: 8px 14px 10px; white-space: normal; text-align: start; }
.app-push-schalter > span:first-child { min-inline-size: 0; overflow-wrap: break-word; }
.app-push-schalter .wert { flex: none; white-space: nowrap; }
.app-push-schalter .wert::after { content: attr(data-aus); color: #ff8080; }
.app-push-schalter[aria-checked="true"] .wert::after { content: attr(data-an); color: #80ff80; }
.app-push[data-push-zustand="arbeitet"] .app-push-schalter { cursor: progress; }
.app-push[data-push-zustand="arbeitet"] .app-push-schalter .wert::after { content: "…"; color: #e0e0e0; }
.app-push .knopfreihe { margin-block-start: 10px; }
.app-hinweis-kasten { margin: 0 0 4px; padding: 10px 12px; color: #e6e6e6; font-size: .9rem; line-height: 1.5;
  background: rgb(255 170 0 / .08); border-inline-start: 4px solid var(--mc-gold); }
.app-hinweis-kasten p { margin: 0 0 6px; } .app-hinweis-kasten p:last-child { margin: 0; }
.app-hinweis-kasten.app-ok { background: rgb(85 255 85 / .08); border-inline-start-color: var(--mc-gruen); }
.app-liste { margin: 0 0 6px; padding-inline-start: 1.2rem; display: grid; gap: 4px; }
.app-meldung { margin: 10px 0 0; font-size: .88rem; line-height: 1.45; color: #b8f5b8; }
.app-meldung[data-art="fehler"] { color: #ff9a9a; }
.app-meldung:empty { display: none; }
.app-geraete { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 2px solid rgb(255 255 255 / .06); }
.app-geraete-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-geraet { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 0; }
.app-geraet > img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.app-geraet-text { display: grid; gap: 1px; min-inline-size: 0; }
.app-geraet-text > span { font-weight: 650; font-size: .9rem; overflow-wrap: anywhere; }
.app-geraet-text small { font-size: .74rem; color: #a8a8a8; }
.app-entfernen { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 12px; cursor: pointer;
  font: 650 .82rem/1 var(--schrift-text); color: #ff9a9a; border: 2px solid rgb(255 85 85 / .35); }
.app-entfernen:hover, .app-entfernen:focus-visible { color: #fff; background: rgb(255 85 85 / .18); border-color: #ff5555; }
.app-entfernen:disabled { opacity: .5; cursor: progress; }

/* Hol dir die App — Variante je Gerät (data-installieren-art, js/app.js) */
.app-installieren [data-art] { display: none; }
.app-installieren[data-installieren-art="android"] [data-art="android"], .app-installieren[data-installieren-art="sonst"] [data-art="sonst"],
.app-installieren[data-installieren-art="fertig"] [data-art="fertig"] { display: block; }
.app-installieren[data-installieren-art="ios"] [data-art="ios"] { display: grid; }
.app-inst-kopf { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; margin-block-end: 12px; }
.app-inst-kopf .app-leise { margin: 0; }
.app-inst-symbol { inline-size: 64px; block-size: 64px; image-rendering: pixelated; filter: drop-shadow(0 8px 14px rgb(124 58 237 / .45)); }
.app-installieren [data-installieren-knopf] { margin-block-end: 10px; }
.app-schritte { list-style: none; margin: 0; padding: 0; gap: 8px; }
.app-schritte > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; font-size: .9rem; line-height: 1.45;
  background: rgb(255 255 255 / .04); border: 2px solid rgb(0 0 0 / .6); }
.app-schritt-bild { inline-size: 48px; block-size: 48px; image-rendering: pixelated; background: #232838; box-shadow: 0 0 0 2px #000; }
.app-schritt-bild.app-schritt-app { inline-size: 32px; block-size: 32px; padding: 8px; box-sizing: content-box; }
.app-schritte b { font-weight: 800; color: var(--mc-gelb); }

/* Unten klein: Sprache und Rechtliches (im App-Modus ist der große Fuß weg) */
.app-fussnote { display: grid; gap: 8px; justify-items: center; margin-block-start: 22px; padding-block: 8px; text-align: center; color: #9a9a9a; font-size: .8rem; }
.app-fussnote p { margin: 0; max-inline-size: 34rem; line-height: 1.5; }
.app-sprache { display: inline-flex; gap: 2px; padding: 3px; background: rgb(0 0 0 / .55); border: 2px solid #000; }
.app-sprache a { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 16px; color: #cfcfcf; text-decoration: none; font: 650 .86rem/1 var(--schrift-text); }
.app-sprache a[aria-current="true"] { color: #fff; background: #2e7d32; box-shadow: inset 2px 2px 0 #7bd17f, inset -2px -2px 0 #1b4d1e; }
.app-rechtliches { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.app-rechtliches a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 10px; color: #cfcfcf; text-decoration: none; font-weight: 600; }
.app-rechtliches a:hover, .app-rechtliches a:focus-visible, .app-sprache a:hover { color: #fff; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   3b. KEINE VERBINDUNG (/offline, seiten/app.js offline — ohne Hülle, der Worker zeigt sie, wenn nichts lädt)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.app-offline-seite { --leiste-hoehe: 0px; padding-block-end: 0; }
.app-offline { flex: 1; display: grid; place-items: center; min-block-size: 100dvh; box-sizing: border-box; image-rendering: pixelated;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgb(8 6 4 / .62), rgb(8 6 4 / .8)), url("img/tex/erde.png") 0 0 / 64px 64px; }
.app-offline-kasten { display: grid; justify-items: center; gap: 18px; inline-size: min(100%, 34rem); text-align: center; }
.app-offline-bild { position: relative; display: grid; place-items: center; inline-size: 96px; block-size: 96px; background: rgb(0 0 0 / .45); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgb(255 255 255 / .06); }
.app-offline-bild img { inline-size: 64px; block-size: 64px; image-rendering: pixelated; opacity: .75; }
/* ein rotes Pixel-X über der Antenne */
.app-offline-x { position: absolute; inset: auto 6px 6px auto; inline-size: 30px; block-size: 30px; background: #ff5555;
  clip-path: polygon(0 0, 6px 0, 15px 9px, 24px 0, 30px 0, 30px 6px, 21px 15px, 30px 24px, 30px 30px, 24px 30px, 15px 21px, 6px 30px, 0 30px, 0 24px, 9px 15px, 0 6px); }
@media (prefers-reduced-motion: no-preference) { .app-offline-x { animation: app-blinken 1.2s steps(2) infinite; } }
@keyframes app-blinken { 50% { opacity: .35; } }
.app-offline-titel { margin: 0; font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); }
@media (min-width: 600px) { .app-offline-titel { font-size: 40px; line-height: 48px; text-shadow: 4px 4px 0 var(--mc-schatten); } }
.app-offline-texte { display: grid; gap: 10px; }
.app-offline-texte p { margin: 0; color: #d6d6d6; line-height: 1.55; }
.app-offline-texte p[lang="en"] { color: #a8a8a8; }
.app-offline-knopf.mc-knopf { white-space: normal; min-inline-size: min(100%, 18rem); padding-block: 8px 10px; }
.app-offline-klein { margin: 0; font: 400 20px/24px var(--mc-schrift); color: #7a7a7a; text-shadow: 2px 2px 0 #000; }