/* ===========================================================================
   ppx-dock.css — POCKET_RAUM_20260917
   Matildes Palette: Grund #15120f / #1c1712, Schrift #d8cdb8, Gold #d6a25e,
   Pocket-Akzent Violett. Animiert wird nur transform und opacity.
   =========================================================================== */
:root { --ppx-unten: 190px; --ppx-gold: #d6a25e; --ppx-vio: 140,110,224; --ppx-text: #e8dfd0; --ppx-leise: #9a8d7c; }

/* ── Knopf oben rechts ─────────────────────────────────────────────────── */
#ppx-gate {
  position: fixed; top: 44px; right: 12px; z-index: 9200;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 8px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(160deg, #221b28f5, #110d0bf7);
  border: 1px solid rgba(var(--ppx-vio), .42);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05);
  color: var(--ppx-text); -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .2s ease;
}
#ppx-gate:active { transform: scale(.95); }
#ppx-gate img { width: 26px; height: 26px; display: block; }
#ppx-gate span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#ppx-gate b { font: 600 14px/1.15 system-ui, -apple-system, sans-serif; letter-spacing: .01em; }
#ppx-gate small { font: 400 10px/1.2 system-ui, sans-serif; color: var(--ppx-leise); }
body.ppx-open #ppx-gate { border-color: rgba(var(--ppx-vio), .8); box-shadow: 0 0 0 3px rgba(var(--ppx-vio), .18), 0 8px 26px rgba(0,0,0,.45); }
.pp-lasche { display: none !important; }        /* altes Menue aus pocket-dock.js */

/* ── Raum ──────────────────────────────────────────────────────────────── */
#ppx-space {
  position: fixed; left: 0; right: 0; top: 0; bottom: var(--ppx-unten); z-index: 9000;
  display: flex; flex-direction: column; gap: 10px;
  padding: 98px 12px 8px;
  visibility: hidden; pointer-events: none;
  perspective: 900px;
  font-family: system-ui, -apple-system, sans-serif; color: var(--ppx-text);
  transition: visibility 0s linear .5s;
}
#ppx-space.open { visibility: visible; pointer-events: auto; transition: none; }
#ppx-space .ppx-schleier {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* BLICKDICHT_20260917: deckend, nur ein weiches Fenster um Matilde */
  background: radial-gradient(circle at var(--ppx-mx, 50%) var(--ppx-my, 150px),
    rgba(14,11,9,0) 0, rgba(14,11,9,0) var(--ppx-mr, 60px),
    rgba(14,11,9,.985) calc(var(--ppx-mr, 60px) + 26px));
  opacity: 0; transition: opacity .35s ease;
}
#ppx-space.open .ppx-schleier { opacity: 1; }

.ppx-kopf {
  position: absolute; top: 46px; left: 16px; max-width: calc(100% - 200px);
  opacity: 0; transition: opacity .3s ease .15s;
}
#ppx-space.open .ppx-kopf { opacity: 1; }
.ppx-kopf span { display: block; font: 600 11px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #b6a2e8; }
.ppx-kopf small { display: block; margin-top: 3px; font: 400 10.5px/1.35 system-ui, sans-serif; color: var(--ppx-leise); }

/* Einschweben: jeder Baustein kommt von vorne, einer nach dem anderen. */
.ppx-schweb {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(1.22);
  transition: transform .62s cubic-bezier(.16,.86,.22,1) calc(var(--d, 0) * 70ms),
              opacity .42s ease calc(var(--d, 0) * 70ms);
}
#ppx-space.open .ppx-schweb { opacity: 1; transform: none; }

.ppx-reihe { display: flex; gap: 10px; }
.ppx-oben { height: 158px; flex: none; }
.ppx-oben > .ppx-block { flex: 1 1 0; min-width: 0; }
.ppx-matilde-fenster {
  flex: 0 0 78px; align-self: stretch; border-radius: 16px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  border: 1px dashed rgba(214,162,94,0); transition: border-color .2s ease, background .2s ease;
}
.ppx-matilde-fenster span { font: 400 8.5px/1.25 system-ui, sans-serif; color: transparent; text-align: center; transition: color .2s; }
body.ppx-zieht .ppx-matilde-fenster { border-color: rgba(214,162,94,.55); background: rgba(214,162,94,.06); }
body.ppx-zieht .ppx-matilde-fenster span { color: var(--ppx-gold); }

/* ── Blöcke ────────────────────────────────────────────────────────────── */
.ppx-block {
  display: flex; flex-direction: column; min-height: 0;
  padding: 10px 10px 8px; border-radius: 16px;
  background: linear-gradient(158deg, #211a26f2, #120e0cf5);
  border: 1px solid rgba(var(--ppx-vio), .30);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.04);
}
.ppx-block header { display: flex; align-items: center; gap: 6px; flex: none; }
.ppx-block header svg, .ppx-face footer svg, .ppx-rund svg, .ppx-mini svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.ppx-block header svg { color: #b6a2e8; }
.ppx-block header b { font: 650 11px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ppx-block header small { margin-left: auto; font: 400 9.5px/1.2 system-ui, sans-serif; color: var(--ppx-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppx-was { margin: 3px 0 6px; font: 400 10px/1.3 system-ui, sans-serif; color: var(--ppx-leise); }
.ppx-leer { margin: 2px 0; font: italic 400 10.5px/1.4 system-ui, sans-serif; color: rgba(216,205,184,.45); }
.ppx-mini {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(var(--ppx-vio), .16); border: 1px solid rgba(var(--ppx-vio), .4); color: var(--ppx-text); cursor: pointer;
}
.ppx-heiss { box-shadow: 0 0 0 2px rgba(214,162,94,.85), 0 0 26px rgba(214,162,94,.35) !important; }

#ppx-editor-liste { display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.ppx-editor-card, .ppx-safe-item, .ppx-temp-chip, .ppx-zaehler {
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: inherit; color: var(--ppx-text); cursor: pointer;
}
.ppx-editor-card {
  display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 9px;
  background: rgba(241,230,207,.06); border: 1px solid rgba(241,230,207,.1);
  touch-action: pan-y;
}
.ppx-editor-card b { display: block; font: 600 10.5px/1.25 system-ui, sans-serif; color: var(--ppx-gold); }
.ppx-editor-card span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font: 400 11px/1.3 system-ui, sans-serif; }
.ppx-mehr { font: 400 9.5px system-ui, sans-serif; color: var(--ppx-leise); }

#ppx-safe-counts { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.ppx-zaehler {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 4px 6px; border-radius: 7px; background: none; border: 0; text-align: left;
}
.ppx-zaehler span { font: 500 11px/1.2 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-zaehler b { min-width: 20px; padding: 1px 6px; border-radius: 9px; text-align: center; font: 600 10px/1.5 system-ui, sans-serif; background: rgba(var(--ppx-vio), .2); color: #cfc2f0; }
.ppx-zaehler:active { background: rgba(var(--ppx-vio), .14); }

/* ── Temp ──────────────────────────────────────────────────────────────── */
.ppx-temp { flex: none; padding-bottom: 10px; }
#ppx-temp-row {
  display: flex; gap: 8px; margin-top: 8px; padding: 2px 1px 2px;
  overflow-x: auto; overflow-y: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x; min-height: 52px; align-items: center;
}
#ppx-temp-row::-webkit-scrollbar { display: none; }
.ppx-temp-chip {
  flex: 0 0 auto; width: 118px; height: 50px; padding: 6px 8px; border-radius: 11px; text-align: left;
  font: 400 10.5px/1.3 system-ui, sans-serif; overflow: hidden;
  background: linear-gradient(158deg, #2a2233, #17121c); border: 1px solid rgba(var(--ppx-vio), .38);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  transition: transform .2s ease, opacity .2s ease;
}
.ppx-temp-chip.weg { transform: translateY(-120%) !important; opacity: 0 !important; }

/* ── Würfel ────────────────────────────────────────────────────────────── */
.ppx-wuerfel-reihe { flex: 1 1 auto; min-height: 140px; max-height: 250px; gap: 14px; padding-bottom: 64px; }
.ppx-cube-zone { position: relative; flex: 1 1 0; min-width: 0; perspective: 700px; touch-action: pan-y; }
.ppx-cube {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .46s cubic-bezier(.2,.82,.22,1);
  will-change: transform;
}
.ppx-cube-zone.dreht .ppx-cube { transition: none; }
.ppx-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 10px 10px 8px; border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(150deg, #241c2b, #120e0c);
  border: 1px solid rgba(var(--ppx-vio), .42);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.ppx-face[data-index="0"] { border-color: rgba(214,162,94,.5); background: linear-gradient(150deg, #2a2117, #120e0c); }
.ppx-face header { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(214,162,94,.14); flex: none; }
.ppx-face header b { flex: 1; min-width: 0; font: 650 13px/1.2 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-face header > span { font: 600 10px/1.6 system-ui, sans-serif; padding: 0 7px; border-radius: 9px; background: rgba(var(--ppx-vio), .22); color: #cfc2f0; }
.ppx-face header .ppx-mini { margin-left: 0; width: 24px; height: 24px; font-size: 11px; }
.ppx-face-liste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; overflow: hidden; }
.ppx-safe-item {
  display: block; width: 100%; text-align: left; padding: 5px 7px; border-radius: 8px;
  background: rgba(241,230,207,.06); border: 1px solid rgba(241,230,207,.09);
  font: 400 11px/1.3 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppx-face footer { display: flex; align-items: center; gap: 5px; flex: none; padding-top: 4px; color: var(--ppx-leise); font: 400 9.5px system-ui, sans-serif; }
.ppx-face footer svg { width: 12px; height: 12px; }
.ppx-punkte { position: absolute; left: 0; right: 0; bottom: -13px; display: flex; justify-content: center; gap: 5px; }
.ppx-punkte i { width: 5px; height: 5px; border-radius: 50%; background: rgba(216,205,184,.25); transition: transform .25s ease, background .25s ease; }
.ppx-punkte i.an { background: #b6a2e8; transform: scale(1.4); }

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.ppx-fuss {
  position: absolute; right: 14px; bottom: -4px; display: flex; gap: 10px;
  transform: translateY(8px); opacity: 0; transition: opacity .3s ease .25s, transform .3s ease .25s;
}
#ppx-space.open .ppx-fuss { opacity: 1; transform: none; }
.ppx-rund {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(160deg, #221b28, #110d0b); border: 1px solid rgba(214,162,94,.35);
  color: var(--ppx-text); box-shadow: 0 6px 18px rgba(0,0,0,.5); -webkit-tap-highlight-color: transparent;
}
.ppx-rund svg { width: 18px; height: 18px; }
.ppx-rund:active { transform: scale(.92); }
#ppx-trash { opacity: .35; transition: opacity .2s ease; }
body.ppx-zieht #ppx-trash { opacity: 1; border-color: rgba(240,120,90,.6); color: #f2a08a; }
.ppx-fuss { bottom: auto; top: calc(100% - 52px); }

/* ── Ziehen ────────────────────────────────────────────────────────────── */
.ppx-geist {
  position: fixed; left: 0; top: 0; z-index: 9500; width: 140px; max-height: 70px; overflow: hidden;
  padding: 8px 10px; border-radius: 12px; pointer-events: none;
  background: #2a2233; border: 1px solid rgba(214,162,94,.7); color: var(--ppx-text);
  font: 400 11px/1.3 system-ui, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.6);
  opacity: .96;
}
body.ppx-zieht, body.ppx-zieht * { -webkit-user-select: none !important; user-select: none !important; }

/* ── Matilde fährt nach hinten ─────────────────────────────────────────── */
.ppx-matilde-depth {
  transform: translate3d(0, -2vh, 0) scale(.4) !important;
  transform-origin: 50% 0 !important;
  transition: transform .6s cubic-bezier(.2,.8,.2,1) !important;
}

/* ── Editor ────────────────────────────────────────────────────────────── */
#ppx-editor-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: 10vh; z-index: 9300;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: linear-gradient(170deg, #1f1924, #0f0c0a);
  border-top: 1px solid rgba(var(--ppx-vio), .5);
  box-shadow: 0 -20px 60px rgba(0,0,0,.7);
  transform: translate3d(0, 104%, 0); transition: transform .42s cubic-bezier(.2,.82,.22,1);
  visibility: hidden;
}
#ppx-editor-sheet.open { transform: none; visibility: visible; }
#ppx-editor-sheet > header { display: flex; align-items: center; }
#ppx-editor-sheet > header div { flex: 1; }
#ppx-editor-sheet > header small { display: block; font: 600 9.5px system-ui, sans-serif; letter-spacing: .16em; color: #b6a2e8; }
#ppx-editor-sheet > header b { font: 600 19px/1.2 system-ui, sans-serif; }
#ppx-editor-title {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 11px;
  background: rgba(241,230,207,.06); border: 1px solid rgba(241,230,207,.14);
  color: var(--ppx-text); font: 600 16px system-ui, sans-serif; outline: none;
}
.ppx-werkzeug { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ppx-werkzeug::-webkit-scrollbar { display: none; }
.ppx-werkzeug button {
  flex: 0 0 auto; min-width: 44px; height: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: rgba(var(--ppx-vio), .14); border: 1px solid rgba(var(--ppx-vio), .36);
  color: var(--ppx-text); font: 500 14px system-ui, sans-serif;
}
#ppx-editor-area {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 12px; border-radius: 12px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(241,230,207,.1);
  color: var(--ppx-text); font: 400 16px/1.55 system-ui, sans-serif; outline: none;
  -webkit-user-select: text; user-select: text;
}
#ppx-editor-area:empty::before { content: attr(data-leer); color: rgba(216,205,184,.4); }
#ppx-editor-sheet footer { display: flex; gap: 8px; flex: none; }
#ppx-editor-sheet footer button {
  flex: 1; height: 46px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, #2a2233, #17121c); border: 1px solid rgba(var(--ppx-vio), .45);
  color: var(--ppx-text); font: 600 13px system-ui, sans-serif;
}
#ppx-editor-matilde { border-color: rgba(214,162,94,.55) !important; color: #f0d5a8 !important; }
#ppx-ordnerwahl {
  position: absolute; left: 14px; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border-radius: 14px;
  background: #1b1520; border: 1px solid rgba(var(--ppx-vio), .5); box-shadow: 0 -10px 40px rgba(0,0,0,.6);
}
#ppx-ordnerwahl[hidden] { display: none; }
#ppx-ordnerwahl p { grid-column: 1 / -1; margin: 0 0 2px; font: 600 12px system-ui, sans-serif; color: var(--ppx-leise); }
#ppx-ordnerwahl button {
  height: 40px; border-radius: 10px; cursor: pointer; background: rgba(241,230,207,.06);
  border: 1px solid rgba(241,230,207,.14); color: var(--ppx-text); font: 500 13px system-ui, sans-serif;
}

/* ── Meldung ───────────────────────────────────────────────────────────── */
#ppx-toast {
  position: fixed; left: 50%; top: 104px; z-index: 9600; pointer-events: none;
  padding: 8px 14px; border-radius: 12px; max-width: 80vw;
  background: #231c29; border: 1px solid rgba(214,162,94,.45); color: var(--ppx-text);
  font: 500 13px system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translate3d(-50%, -8px, 0); transition: opacity .2s ease, transform .2s ease;
}
#ppx-toast.on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ── Verlauf: das Eingabefeld darf nie aus dem Bild rutschen ───────────── */
/* VERLAUF_SCHICHT_20260917 — Marcus: "unruhig darf es nicht sein".
   Auf der Seite steht nur die aktuelle Antwort. Der Verlauf lebt in einer
   Schicht ueber allem und ist ueber den Uhr-Knopf sofort da. */
body > #ppx-thread-shell, .hero #ppx-thread-shell, .chat-block #ppx-thread-shell { display: none !important; }
#ppx-verlauf-schicht {
  position: fixed; inset: 0; z-index: 9650; display: flex; flex-direction: column;
  background: rgba(12,10,8,.97); color: #e8dfd0;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
#ppx-verlauf-schicht.auf { opacity: 1; visibility: visible; transition: opacity .2s ease; }
#ppx-verlauf-schicht > header { display: flex; align-items: center; gap: 10px; flex: none; }
#ppx-verlauf-schicht > header div { flex: 1; }
#ppx-verlauf-schicht > header small { display: block; font: 600 10px system-ui, sans-serif; letter-spacing: .16em; color: #b6a2e8; }
#ppx-verlauf-schicht > header b { font: 600 17px system-ui, sans-serif; }
#ppx-verlauf-schicht .ppx-v-alle { height: 34px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: rgba(140,110,224,.14); border: 1px solid rgba(140,110,224,.45); color: #e8dfd0; font: 500 12px system-ui, sans-serif; }
#ppx-verlauf-schicht .ppx-v-zu { width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: #1c1712; border: 1px solid rgba(214,162,94,.4); color: #e8dfd0; font: 400 20px/1 system-ui; }
#ppx-verlauf-schicht .ppx-v-rumpf { flex: 1; min-height: 0; margin-top: 12px; display: flex; flex-direction: column; }
#ppx-verlauf-schicht #ppx-thread-shell { display: flex !important; flex-direction: column; flex: 1; min-height: 0;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
#ppx-verlauf-schicht .ppx-thread-head { display: none !important; }
#ppx-verlauf-schicht #ppx-thread { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#ppx-verlauf-schicht .ppx-v-leer { margin: auto; color: #9a8d7c; font: italic 400 14px system-ui, sans-serif; }
/* Pfeile an der aktuellen Antwort */
.ppx-live-pfeile { display: flex; justify-content: center; gap: 8px; margin: 6px 0 0; }
.ppx-live-pfeile button { width: 34px; height: 30px; border-radius: 9px; cursor: pointer;
  background: rgba(241,230,207,.05); border: 1px solid rgba(214,162,94,.24); color: #d6a25e; font: 400 15px/1 system-ui; }
.ppx-live-pfeile button:active { transform: scale(.9); }

@media (max-width: 360px) {
  .ppx-oben { height: 140px; }
  .ppx-matilde-fenster { flex-basis: 60px; }
  .ppx-temp-chip { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppx-schweb, .ppx-cube, #ppx-editor-sheet, .ppx-matilde-depth, #ppx-toast { transition-duration: .01ms !important; }
}

/* BLICKDICHT_20260917: deckender Boden unter Eingabe und GPS */
body.ppx-open::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: var(--ppx-unten);
  z-index: 9100; background: #0e0b09; pointer-events: none;
}
.ppx-temp-chip b { display: block; font: 600 10.5px/1.25 system-ui, sans-serif; color: var(--ppx-gold); }
.ppx-kopf { max-width: calc(100% - 230px); }

/* NICHT_SCHWIMMEN_20260917 — Marcus: "Bild schwimmt rechts/links".
   Nichts darf die Seite breiter als den Schirm machen. */
html, body { overflow-x: hidden !important; max-width: 100%; overscroll-behavior-x: none; }

/* NIE_BEWEGEN_20260917 — Marcus: "die Seite darf sich NIE bewegen".
   Der Verlauf hat von Anfang an seine feste Hoehe (auch leer), damit die
   erste Aussage nichts nach unten schiebt. Kein Nachfedern am Rand. */
html, body { overscroll-behavior: none !important; }

/* RUHIG_20260917 — Pocketpiles-Knopf so zurueckhaltend wie "Anmelden". */
#ppx-gate, body.ppx-open #ppx-gate {
  top: 40px; right: 16px; padding: 4px 2px; gap: 0; border: 0 !important; border-radius: 6px;
  background: none !important; box-shadow: none !important;
  color: rgba(216,205,184,.62); font: 600 13.5px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: .04em;
}
#ppx-gate span { display: inline; }
body.ppx-open #ppx-gate { color: #d8cdb8; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(214,162,94,.5); }
#ppx-history-button {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: rgba(216,205,184,.62) !important; opacity: 1 !important;
}

/* ECHTER_VERLAUF_20260917 */
#ppx-verlauf-schicht .ppx-v-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.ppx-v-tag { align-self: center; margin: 8px 0 2px; padding: 2px 10px; border-radius: 10px;
  background: rgba(214,162,94,.1); color: #d6a25e; font: 600 11px system-ui, sans-serif; letter-spacing: .06em; }
.ppx-v-g { padding: 10px 12px; border-radius: 12px; background: rgba(241,230,207,.04); border: 1px solid rgba(241,230,207,.08); }
.ppx-v-g time, .ppx-v-z time { font: 400 10.5px ui-monospace, monospace; color: #8d7f6b; }
.ppx-v-f { margin: 4px 0 4px auto; max-width: 85%; text-align: right; font: 400 13px/1.4 system-ui, sans-serif; color: #b6a2e8; }
.ppx-v-a { margin: 0; font: 400 14.5px/1.5 system-ui, sans-serif; color: #e8dfd0; white-space: pre-wrap; }
.ppx-v-pf { display: flex; gap: 6px; margin-top: 8px; }
.ppx-v-pf button { width: 34px; height: 28px; border-radius: 8px; cursor: pointer; background: rgba(241,230,207,.05);
  border: 1px solid rgba(214,162,94,.24); color: #d6a25e; font: 400 14px/1 system-ui; }
.ppx-v-z { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px; font: 400 12.5px/1.4 system-ui, sans-serif; color: #c9bda6; }
.ppx-v-z i { font-style: normal; width: 16px; text-align: center; color: #b6a2e8; }
.ppx-v-z b { font-weight: 600; color: #e8dfd0; }
.ppx-v-z em { color: #9a8d7c; }

/* EXPONENT_20260917 — Uhr klein am Pocketpiles-Knopf */
#ppx-history-button { width: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 !important;
  z-index: 9210 !important; }
#ppx-history-button svg, #ppx-history-button img { width: 14px !important; height: 14px !important; }

/* FESTGENAGELT_20260917 — Marcus: "ganze Seite schwimmt minimal".
   Auf dem iPhone steht die Seite nur still, wenn der Koerper fest ist. */
html { height: 100%; overflow: hidden; }
body { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  overflow: hidden !important; overscroll-behavior: none !important; touch-action: manipulation; }

/* MENUE_STRICHE_20260917 */
#m-login, #ppx-gate, #ppx-history-button { display: none !important; }
body.ppx-open #ppx-space { padding-top: 64px; }
body.ppx-open .ppx-kopf { top: 16px; }
#ppx-menue {
  position: fixed; top: 10px; right: 12px; z-index: 99998;
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
#ppx-menue i { display: block; width: 20px; height: 2px; border-radius: 1px; background: rgba(216,205,184,.7); transition: transform .2s ease, opacity .2s ease; }
#ppx-menue[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ppx-menue[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
#ppx-menue[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#ppx-menue-liste {
  position: fixed; top: 54px; right: 12px; z-index: 99998; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
  background: #1a1511; border: 1px solid rgba(214,162,94,.25); box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
#ppx-menue-liste[hidden] { display: none; }
#ppx-menue-liste button {
  height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  color: #e8dfd0; font: 500 15px system-ui, -apple-system, sans-serif;
}
#ppx-menue-liste button:active { background: rgba(214,162,94,.12); }

/* PLUS_RUHIG_20260917 — das Plus-Menue schwimmt nicht und passt ins Bild:
   es blaettert innen, nie die Seite. */
.mcp-sheet-bg { overflow: hidden !important; overscroll-behavior: none !important; touch-action: none; }
.mcp-sheet { max-height: 82dvh !important; overflow-y: auto !important; overflow-x: hidden !important;
  overscroll-behavior: contain !important; touch-action: pan-y !important; box-sizing: border-box !important;
  max-width: 100vw !important; -webkit-overflow-scrolling: touch; }
.mcp-sheet * { max-width: 100%; }

/* PFEILE_NUR_BEI_ANTWORT_20260917 — die drei Pfeile erst, wenn Matilde
   wirklich auf eine Frage geantwortet hat (nicht bei der Begruessung). */
.ppx-live-pfeile { display: none !important; }
body.ppx-hat-antwort .ppx-live-pfeile { display: flex !important; }

/* MENUE_ORDNUNG_20260917 — Info- und Anmeldebox */
#ppx-info, #ppx-anmelden { position: fixed; inset: 0; z-index: 99999; background: rgba(8,6,5,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ppx-info-karte, .ppx-anm-karte { position: relative; width: min(420px, 100%); border-radius: 18px;
  background: #1a1511; border: 1px solid rgba(214,162,94,.3); box-shadow: 0 20px 60px rgba(0,0,0,.6); color: #e8dfd0; }
.ppx-info-karte { padding: 22px 20px 20px; }
.ppx-info-karte b { display: block; margin: 0 30px 10px 0; font: 600 18px system-ui, sans-serif; }
.ppx-info-karte p { margin: 0; font: 400 15px/1.55 system-ui, sans-serif; color: #d8cdb8; }
.ppx-anm-karte { height: min(640px, 86dvh); overflow: hidden; padding-top: 44px; }
.ppx-anm-karte iframe { width: 100%; height: 100%; border: 0; display: block; background: #0f0c0a; }
.ppx-info-zu { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: #231c17; border: 1px solid rgba(214,162,94,.35); color: #e8dfd0; font: 400 20px/1 system-ui; }

/* ABMELDEN_IM_MENUE / VERLAUF_EXPONENT_20260917 */
#mab-konto { display: none !important; }
.ppx-exp { display: inline-flex; vertical-align: super; margin-left: 4px; width: 22px; height: 22px;
  align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(214,162,94,.35); color: #d6a25e; }
.ppx-exp svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* MENUE_SCHMAL_20260917 — Marcus: das Menue darf Matilde nicht ueberdecken.
   Schmal am rechten Rand, Eintraege rechtsbuendig. */
#ppx-menue-liste { min-width: 0 !important; width: auto; max-width: 150px; right: 8px; top: 52px; padding: 4px;
  background: rgba(22,18,15,.94); }
#ppx-menue-liste button { height: 40px; padding: 0 10px; text-align: right; font-size: 14px; white-space: nowrap; }

/* MODUS_IM_FELD_20260917 — Miniaturschrift oben im Eingabefeld, stoert den Text nicht */
.ppx-modus-mini {
  position: absolute; left: 64px; top: 3px; z-index: 2; pointer-events: none;
  font: 600 8.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(214,162,94,.75);
}

/* FESTGENAGELT_2_20260917 — der App-Rahmen (main.app-shell) war ein eigener
   Rollbereich und federte auf dem iPhone. Er rollt jetzt nicht mehr. */
main.app-shell { overflow: hidden !important; overscroll-behavior: none !important; height: 100dvh !important; }
#root { height: 100dvh; overflow: hidden; }

/* Nur auf sehr kleinen Schirmen darf der Rahmen rollen — sonst waere das
   Eingabefeld abgeschnitten. Normale iPhone-Hoehen bleiben fest. */
@media (max-height: 600px) {
  main.app-shell { overflow-y: auto !important; height: 100dvh !important; }
  #root { overflow: visible; }
}

/* FLUCHTPUNKT_20260917 — Matilde faehrt beim Antworten nach hinten.
   Der negative Aussenabstand holt den frei gewordenen Platz wirklich
   zurueck (sonst waere es nur optisch kleiner). */
.ppx-fluchtpunkt:not(.ppx-matilde-depth) {
  transform: perspective(900px) translate3d(0, -2%, -800px) !important;
  transform-origin: 50% 0 !important;
  margin-bottom: calc(var(--ppx-fp-zug, 180px) * -1) !important;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), margin-bottom .7s cubic-bezier(.2,.8,.2,1) !important;
}
.chat-response.ppx-antwort-blaettert {
  overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}

/* LAUFEN_20260917 — mit echter 3D-Figur nur den Platz zurueckholen */
.ppx-fluchtpunkt-3d:not(.ppx-matilde-depth) {
  margin-bottom: calc(var(--ppx-fp-zug, 180px) * -1) !important;
  transition: margin-bottom .8s cubic-bezier(.2,.8,.2,1) !important;
}

/* EINE_ZEILE_20260917 */
.ppx-live-pfeile { align-items: center; flex-wrap: nowrap; }
.ppx-live-pfeile .mq-marke { margin: 0 6px 0 0 !important; }

/* NICHT_QUETSCHEN_20260917 — die Quellenbox wurde in der Pfeilzeile
   zusammengedrueckt und lief ueber die Pfeile. Sie behaelt ihre Breite. */
.ppx-live-pfeile { flex-wrap: wrap; justify-content: center; }
.ppx-live-pfeile .mq-marke { flex: 0 0 auto !important; width: auto !important; min-width: max-content; }
.ppx-live-pfeile button { flex: 0 0 auto; }

/* DECKEND_20260917 (KEES) — Marcus: "noch mehr Ueberlappung hier".
   Gemessen: GPS-Tafel 684-792, Android-Kasten 808-1070 — sie liegen NICHT
   uebereinander. Die Tafel war nur zu 3% deckend (#f1e6cf08), darum schien
   der Text dahinter durch und sah aus wie Gekritzel. Jetzt deckt sie. */
.gps-tafel { background: #12100e !important; }
#mx-flaeche { position: relative; z-index: 1; background: #0e0b09; border-radius: 12px; margin-top: 10px; }

/* IMMER_SICHTBAR_20260917 (KEES) — Marcus: "EINGABEFELD MUSS IMMER
   SICHTBAR SEIN, aktuell kann man nicht mal runterscrollen."

   Vorher: der App-Rahmen war zugenagelt (overflow:hidden, 100dvh), damit
   die Seite nicht schwimmt. Solange die Antwort gekuerzt wurde, ging das
   auf. Seit nichts mehr abgeschnitten wird, schob die lange Antwort das
   Eingabefeld aus dem Bild — und man kam nicht hinterher.

   Jetzt: der Rahmen rollt SENKRECHT (waagerecht bleibt er fest, damit
   nichts rechts/links schwimmt), und das Eingabefeld sitzt fest unten.
   Der Fussabstand sorgt dafuer, dass das Ende der Antwort nicht hinter
   dem Feld verschwindet. */
/* LAYOUT_ZURUECK_20260924 (KEES): stillgelegt — siehe unten. */
/* LAYOUT_ZURUECK_20260924 (KEES): stillgelegt — siehe unten. */

/* MENUESTRICHE_WEG_20260917 (KEES) — Marcus: "das x in der Ecke ueberlappt
   mit den Menuestrichen, nicht zu benutzen". Der Menueknopf sitzt fest oben
   rechts ueber allem. Solange eine Vollbildschicht offen ist, ist er weg. */
body.mq-schicht-auf #ppx-menue { display: none !important; }

/* PFEIL_INFO_20260917 — der Kasten, der erklaert, was die drei Pfeile tun. */
.ppx-pfeil-karte { text-align: left; }
.ppx-pfeil-karte b { display: block; margin: 0 0 10px; font: 600 19px/1.25 system-ui, sans-serif; color: #f1e6cf; }
.ppx-pfeil-karte p { margin: 0 0 12px; font: 400 14.5px/1.5 system-ui, sans-serif; color: #c9bda6; }
.ppx-pfeil-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ppx-pfeil-liste li { display: flex; align-items: baseline; gap: 10px;
  font: 400 14px/1.4 system-ui, sans-serif; color: #e8dfd0; }
.ppx-pfeil-liste li span { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid rgba(214,162,94,.45); border-radius: 8px;
  color: #d6a25e; font-size: 14px; }
.ppx-pfeil-stark { font-weight: 600 !important; color: #f1e6cf !important; letter-spacing: .01em; }
.ppx-pfeil-klein { font-size: 12.5px !important; color: #8d7f6b !important; }
.ppx-pfeil-knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.ppx-pfeil-knoepfe button { flex: 1; padding: 12px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(214,162,94,.45); background: rgba(214,162,94,.12); color: #f1e6cf;
  font: 600 14.5px system-ui, sans-serif; }
.ppx-pfeil-knoepfe button[data-pf="login"] { background: #d6a25e; color: #1a1512; border-color: #d6a25e; }
.ppx-pfeil-knoepfe button:active { transform: scale(.98); }

/* LUFT_20260917 (KEES) — Marcus: "unten sehr pfuschig, Buttons beruehren
   sich" und "Pfeile sauber in einer Reihe".

   Ursache der Beruehrung: seit das Eingabefeld fest sitzt, ist es aus dem
   Fluss. Der Inhalt lief darunter weiter — gemessen lagen Pfeilzeile
   (686-716) und Eingabefeld (696-750) uebereinander. Ein Fussabstand
   allein half nicht, weil er HINTER dem Inhalt liegt, nicht unter ihm.
   Deshalb endet der Rollbereich jetzt ueber dem Eingabefeld. */
/* SAFARI_FEST_20260924 (KEES) — Marcus: "nach Anfrage schwarzes Bild, immer."

   Ursache war die Zeile darunter: height: calc(100dvh - 78px). In Safari
   aendert sich dvh bei jeder Bewegung der Leisten und beim Oeffnen der
   Tastatur. Faellt der Wert in dem Moment, in dem die Antwort einlaeuft und
   der Rahmen neu rechnet, bleibt eine Hoehe uebrig, in der nichts mehr zu
   sehen ist — schwarz, ohne Fehlermeldung. In Chrome tritt es nicht auf,
   deshalb hat meine Messung es nicht gezeigt.

   Jetzt: KEINE gerechnete Hoehe mehr. Der Rahmen bekommt eine Mindesthoehe
   und rollt; der Abstand nach unten haelt das Eingabefeld frei. Das ist
   robust gegen jede Leistenbewegung, weil nichts mehr subtrahiert wird.

   Eine schwarze Seite ist schlimmer als jede Scroll-Eigenheit. */
/* LAYOUT_ZURUECK_20260924 (KEES): stillgelegt — siehe unten. */

/* Eine Reihe, gleiche Hoehe, gleicher Abstand, Finger passen dazwischen. */
.ppx-live-pfeile {
  gap: 12px;
  margin: 14px 0 0;
  align-items: center;
  row-gap: 10px;
}
.ppx-live-pfeile button {
  width: 42px; height: 34px; border-radius: 11px;
  font: 400 16px/1 system-ui;
}
.ppx-live-pfeile .mq-marke {
  height: 34px !important;
  padding: 0 11px 0 10px !important;
  border-radius: 17px !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOCHWERT_20260917 (KEES) — Pocketpiles sieht teuer aus, nicht bunt.

   Marcus: "high end, nicht Science Fiction, nicht Kirmes."

   Was vorher billig wirkte, und warum:
   - ZWEI Akzentfarben (Violett und Messing) gleichzeitig. Teure Dinge
     haben einen Akzent, nicht zwei.
   - Farbige Raender an jeder Flaeche. Rand traegt keine Farbe, Rand traegt
     Licht.
   - Verlaeufe von Aubergine nach Schwarz. Das liest sich als Plastik.

   Die neue Sprache: mattes Schwarz mit kaum sichtbarer Maserung, eine
   Lichtkante oben (wie auf gebuerstetem Metall), langer weicher Schatten
   darunter, und Messing NUR dort, wo es etwas bedeutet. Kein Leuchten.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --pp-flaeche-1: #1a1715;      /* Oberseite, wo das Licht faellt */
  --pp-flaeche-2: #0f0d0c;      /* Unterseite */
  --pp-kante:     rgba(255,255,255,.07);
  --pp-licht:     rgba(255,255,255,.055);
  --pp-messing:   #d6a25e;
  --pp-schrift:   #ece5da;
  --pp-leise:     #8d8377;
}

/* ── Die Flaeche ─────────────────────────────────────────────────────── */
.ppx-face {
  padding: 14px 13px 11px;
  border-radius: 16px;
  background: linear-gradient(176deg, var(--pp-flaeche-1) 0%, var(--pp-flaeche-2) 68%);
  border: 1px solid var(--pp-kante);
  box-shadow:
    inset 0 1px 0 var(--pp-licht),          /* Lichtkante oben */
    inset 0 -1px 0 rgba(0,0,0,.5),          /* Schattenkante unten */
    0 2px 6px -2px rgba(0,0,0,.7),          /* Kontaktschatten */
    0 22px 44px -26px rgba(0,0,0,.95);      /* langer weicher Wurf */
  color: var(--pp-schrift);
}
/* Matildes Seite: kein goldener Rahmen, nur eine Linie Messing oben.
   Ein Rahmen schreit, eine Linie sagt Bescheid. */
.ppx-face[data-index="0"] {
  border-color: var(--pp-kante);
  background: linear-gradient(176deg, #1d1915 0%, #100d0b 68%);
  box-shadow:
    inset 0 1px 0 rgba(214,162,94,.34),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 6px -2px rgba(0,0,0,.7),
    0 22px 44px -26px rgba(0,0,0,.95);
}

/* ── Kopfzeile der Flaeche ───────────────────────────────────────────── */
.ppx-face header {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  gap: 8px;
}
.ppx-face header b {
  font: 600 13.5px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: -.005em; color: var(--pp-schrift);
}
/* Das Schildchen war violett gefuellt. Jetzt: nur Schrift, kein Kasten. */
.ppx-face header > span {
  padding: 0; background: none; color: var(--pp-leise);
  font: 600 9.5px/1.6 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.ppx-face[data-index="0"] header > span { color: var(--pp-messing); }

/* ── Was drin liegt ──────────────────────────────────────────────────── */
.ppx-face-liste { gap: 6px; padding-top: 10px; }
.ppx-safe-item {
  padding: 7px 9px; border-radius: 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  font: 400 11.5px/1.35 system-ui, sans-serif; color: #cfc6b9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.ppx-safe-item:active { background: rgba(255,255,255,.07); }

.ppx-face footer {
  padding-top: 8px; color: var(--pp-leise);
  font: 400 9.5px system-ui, sans-serif; letter-spacing: .04em;
}

/* ── Die Punkte unter dem Wuerfel ────────────────────────────────────── */
.ppx-punkte { bottom: -15px; gap: 6px; }
.ppx-punkte i {
  width: 4px; height: 4px; background: rgba(255,255,255,.16);
  transition: background .22s ease, transform .22s ease;
}
.ppx-punkte i.an { background: var(--pp-messing); transform: scale(1.25); }

/* ── Der Raum drumherum ──────────────────────────────────────────────── */
.ppx-wuerfel-reihe { gap: 16px; }
.ppx-kopf span { color: var(--pp-leise); letter-spacing: .18em; }
.ppx-kopf small { color: #6f675d; }

/* Der obere Block spricht dieselbe Sprache wie die Wuerfel. */
.ppx-block {
  background: linear-gradient(176deg, var(--pp-flaeche-1) 0%, var(--pp-flaeche-2) 68%) !important;
  border: 1px solid var(--pp-kante) !important;
  box-shadow:
    inset 0 1px 0 var(--pp-licht),
    0 2px 6px -2px rgba(0,0,0,.7),
    0 22px 44px -26px rgba(0,0,0,.95) !important;
}

/* Die runden Knoepfe am Fuss: matt, mit Lichtkante, ohne Farbe. */
.ppx-rund {
  background: linear-gradient(176deg, #1c1917, #121010) !important;
  border: 1px solid var(--pp-kante) !important;
  color: var(--pp-schrift) !important;
  box-shadow: inset 0 1px 0 var(--pp-licht), 0 10px 22px -14px rgba(0,0,0,.95) !important;
}
.ppx-rund:active { transform: scale(.96); }

/* ═══════════════════════════════════════════════════════════════════════
   EIN_WUERFEL_20260917 (KEES) — der erste Bildschirm wird dumm einfach.

   Marcus: "so einfach wie es geht — die geilen Features ergeben sich durch
   das Drehen der Kloetze" und "SOFORT CHECKEN MUSS DER USER".

   Vorher standen fuenf Bereiche gleichzeitig da (Edit, Safe, Temp und zwei
   kleine Wuerfel), dazu fuenfmal dieselbe Anleitung. Jetzt: EIN grosser
   Block in der Mitte, darunter die Punkte. Alles andere kommt durchs
   Drehen. Der Editor sitzt als runder Knopf unten, wo der Daumen ist.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kein zweiter Akzent mehr: die alte Violett-Variable wird warmes Grau. */
:root { --ppx-vio: 198,185,166; }

/* Die obere Reihe (Edit + Safe + Matilde-Fenster) verschwindet.
   Safe war doppelt — der Wuerfel IST der Safe. */
#ppx-space .ppx-oben { display: none !important; }

/* Ein Wuerfel statt zwei, gross und hochkant, in der Mitte. */
#ppx-space .ppx-cube-zone[data-w="1"] { display: none !important; }
#ppx-space .ppx-wuerfel-reihe {
  order: 4;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 34px;
  justify-content: center;
}
#ppx-space .ppx-cube-zone[data-w="0"] {
  flex: 0 1 min(330px, 86vw);
  max-width: 330px;
  perspective: 1100px;
}

/* Temp ruecken wir unter den Wuerfel: die Zwischenablage ist Beiwerk. */
#ppx-space #ppx-temp-block { order: 5; flex: none; }

/* Die Flaeche darf jetzt atmen — groessere Schrift, mehr Luft. */
.ppx-face { padding: 18px 16px 13px; border-radius: 18px; }
.ppx-face header b { font-size: 16.5px; }
.ppx-face header > span { font-size: 11px; letter-spacing: .1em; }
.ppx-face-liste { gap: 7px; padding-top: 12px; }
.ppx-safe-item { padding: 9px 11px; font-size: 12.5px; }
.ppx-leer {
  margin: 4px 0 0; font: 400 13px/1.5 system-ui, sans-serif; color: #7d7468;
}
.ppx-leer b { color: var(--pp-messing); font-weight: 600; }
.ppx-face footer {
  justify-content: flex-end; padding-top: 10px;
  font: 400 10px system-ui, sans-serif; letter-spacing: .1em; color: #6b6359;
}

/* Die Punkte sind die Bedienungsanleitung: sie sagen, dass es weitergeht. */
.ppx-punkte { bottom: -20px; gap: 7px; }
.ppx-punkte i { width: 5px; height: 5px; }

/* Kopf: ein Satz, keine Liste. */
.ppx-kopf { max-width: calc(100% - 90px); }
.ppx-kopf span { font-size: 10.5px; }
.ppx-kopf small { font-size: 11.5px; }

/* EIN_WUERFEL_2_20260918 (KEES) — Nachjustage nach dem ersten Blick.

   1. Der Block war 461px hoch und fast leer: das liest sich als Loch.
      Er bekommt eine Hoehe, die zum Inhalt passt, und der Satz steht
      mittig statt oben in der Ecke.
   2. Papierkorb und Schliessen lagen ueber dem Temp-Streifen. Sie stehen
      jetzt in der Reihe, nicht darueber.
   3. Temp erklaert sich zu laut. Ein Wort reicht. */

#ppx-space .ppx-wuerfel-reihe { max-height: 360px; padding-bottom: 30px; }

/* Leerer Block: der Satz steht in der Mitte, nicht oben links. */
.ppx-face-liste:has(> .ppx-leer) { justify-content: center; align-items: center; text-align: center; }
.ppx-leer { max-width: 22ch; }

/* Fuss: raus aus dem Schwebezustand, rein in die Reihe. */
#ppx-space .ppx-fuss {
  position: static; order: 6; align-self: flex-end;
  transform: none; margin: 10px 2px 0; gap: 12px;
}
#ppx-space.open .ppx-fuss { transform: none; }

/* Temp: schmal, ruhig, ein Wort. */
#ppx-space #ppx-temp-block { padding: 12px 14px; }
#ppx-space #ppx-temp-block header small { font-size: 10px; letter-spacing: .06em; color: #6b6359; }
.ppx-block header svg { color: var(--pp-messing); opacity: .8; }
.ppx-block header b { letter-spacing: .12em; font-size: 11.5px; text-transform: uppercase; color: #a89d8e; }

/* TIEFE_20260918 (KEES) — Marcus: "Die Bloecke kommen wirklich von vorne
   im Minecraft-Stil und man kann sie drehen."

   Bisher stand der Wuerfel frontal: dann sieht man eine Karte, keinen
   Block. Der Fluchtpunkt wandert nach rechts, dadurch zeigt sich die
   rechte Kante der Nachbarseite. Das sagt in einer halben Sekunde ohne
   ein Wort: da geht es weiter. Kein Wackeln, keine Animation — nur
   Perspektive, wie bei einem Gegenstand, den man leicht schraeg sieht. */
#ppx-space .ppx-cube-zone[data-w="0"] {
  perspective: 1000px;
  perspective-origin: 76% 44%;
}

/* TIEFE_2_20260918 (KEES) — der Fluchtpunkt allein half nicht: bei 0 Grad
   stehen die Nachbarseiten exakt auf der Kante, da ist nichts zu sehen.
   Der Block steht deshalb leicht schraeg im Ruhezustand, wie ein
   Gegenstand, den man in der Hand haelt. 8 Grad reichen: die rechte
   Nachbarseite blitzt auf, die Schrift bleibt gerade lesbar. */
#ppx-space .ppx-cube-zone[data-w="0"] {
  perspective: none;
  transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateX(2.5deg);
}
#ppx-space { perspective: 1400px; perspective-origin: 50% 38%; }

/* TIEFE_3_20260918 — 8 Grad waren zu viel: die Nachbarseite ragte aus dem
   Bild und wurde am Rand abgeschnitten, das sah kaputt aus statt gewollt.
   Jetzt 5 Grad, der Block etwas schmaler und nach links gerueckt: die
   Nachbarseite blitzt auf und bleibt vollstaendig im Bild. */
#ppx-space .ppx-cube-zone[data-w="0"] {
  transform: rotateY(-5deg) rotateX(2deg);
  flex: 0 1 292px;
  max-width: 292px;
  margin-right: 46px;
}
#ppx-space { perspective: 1700px; }

/* SCHATTEN_20260918 — die Seite, die sich wegdreht, liegt im Schatten. */
.ppx-face { transition: filter .28s ease; }
.ppx-face:not(.ppx-vorn) { filter: brightness(.42) saturate(.8); }

/* DREHGEFUEHL_20260918 — die Kurve ist mechanischer als vorher: schneller
   raus, sauber rein, kein Gummi. Ohne Nachwippen, das waere Kirmes. */
.ppx-cube { transition: transform .46s cubic-bezier(.17,.89,.25,1); }
.ppx-cube-zone.dreht .ppx-cube { transition: none; }
/* Waehrend des Drehens keine Schattenrechnung pro Bild: das kostet Bilder. */
.ppx-cube-zone.dreht .ppx-face { transition: none; }

/* ══ HILFE_20260918 (KEES) — die Karte hinter "Hilfe? Klar!" ══════════
   Gleiche Materialsprache wie der Rest: mattes Schwarz, eine Lichtkante,
   Messing nur fuer das, was man antippen soll. Fette Fingerziele, weil
   niemand auf einem Handy zielen will. */
#ppx-hilfe {
  position: fixed; inset: 0; z-index: 99999; background: rgba(8,6,5,.86);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.hilfe-karte {
  position: relative; width: min(460px, 100%); margin: auto;
  padding: 22px 18px 20px; border-radius: 20px;
  background: linear-gradient(176deg, #1a1715 0%, #0f0d0c 68%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 30px 60px -30px rgba(0,0,0,.95);
  color: #ece5da;
}
.hilfe-titel { display: block; margin: 0 0 14px; font: 600 21px/1.2 system-ui, sans-serif; }
.hilfe-hinweis { margin: 0 0 16px; font: 400 13.5px/1.55 system-ui, sans-serif; color: #a89d8e; }
.hilfe-klein { font-size: 12px !important; color: #7d7468 !important; }

/* Telefon zuerst: es ist der schnellste Weg, also sieht man es zuerst. */
.hilfe-tel {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px;
  padding: 13px 15px; border-radius: 13px; text-decoration: none;
  background: rgba(214,162,94,.11); border: 1px solid rgba(214,162,94,.4);
}
.hilfe-tel b { font: 600 15px system-ui, sans-serif; color: #d6a25e; }
.hilfe-tel span { font: 400 13.5px system-ui, sans-serif; color: #c9bda6; }
.hilfe-tel-aus { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); }
.hilfe-tel-aus b { color: #a89d8e; }

.hilfe-form { display: flex; flex-direction: column; gap: 12px; }
.hilfe-form label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 12px system-ui, sans-serif; letter-spacing: .04em; color: #a89d8e;
}
.hilfe-form label small { font-weight: 400; color: #7d7468; letter-spacing: 0; }
.hilfe-form input, .hilfe-form select, .hilfe-form textarea {
  width: 100%; padding: 12px 13px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #f1e6cf; font: 400 15px system-ui, sans-serif;   /* 15px: iOS zoomt sonst */
  -webkit-appearance: none; appearance: none;
}
.hilfe-form select {
  background-image: linear-gradient(45deg, transparent 50%, #d6a25e 50%),
                    linear-gradient(135deg, #d6a25e 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px;
}
.hilfe-form input:focus, .hilfe-form select:focus, .hilfe-form textarea:focus {
  outline: none; border-color: rgba(214,162,94,.55); background: rgba(255,255,255,.06);
}
.hilfe-form textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
.hilfe-zwei { display: flex; gap: 10px; }
.hilfe-zwei label { flex: 1 1 0; min-width: 0; }

/* Der Babbelfisch: drei fette Knoepfe, kein Ratespiel mit Augenschmerzen. */
.hilfe-fisch {
  display: flex; flex-direction: column; gap: 8px; padding: 13px;
  border-radius: 13px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.hilfe-fisch-frage { font: 600 12px system-ui, sans-serif; letter-spacing: .04em; color: #a89d8e; }
.hilfe-fisch-worte { display: flex; gap: 8px; flex-wrap: wrap; }
.hilfe-fisch-worte button {
  flex: 1 1 auto; min-width: 88px; padding: 11px 12px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #ece5da; font: 500 14.5px system-ui, sans-serif;
}
.hilfe-fisch-worte button.an {
  background: rgba(214,162,94,.18); border-color: #d6a25e; color: #f1e6cf;
}

.hilfe-haken {
  flex-direction: row !important; align-items: flex-start; gap: 10px !important;
  font-weight: 400 !important; font-size: 12.5px !important; line-height: 1.45;
  color: #a89d8e !important; letter-spacing: 0 !important;
}
.hilfe-haken input {
  flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; padding: 0;
  border-radius: 6px; accent-color: #d6a25e;
  -webkit-appearance: auto; appearance: auto;
}
.hilfe-fehler {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(164,60,56,.16); border: 1px solid rgba(226,133,127,.5);
  color: #e2857f; font: 500 13px system-ui, sans-serif;
}
.hilfe-senden {
  margin-top: 4px; padding: 15px; border-radius: 13px; cursor: pointer;
  background: #d6a25e; border: 1px solid #d6a25e; color: #1a1512;
  font: 600 16px system-ui, sans-serif;
}
.hilfe-senden:disabled { opacity: .6; }
.hilfe-senden:active { transform: scale(.99); }
#ppx-hilfe .ppx-info-zu {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #ece5da; font: 400 19px/1 system-ui; cursor: pointer;
}

/* ══ ZAEHLER_20260918 (KEES) — der Mini-Zaehler beim Kernwechsel ══════
   Sitzt oben, nicht unten: unten steht das Eingabefeld, und das darf er
   nicht verdecken. Ein Ring, der sich leert, statt eines Balkens, der
   die Breite frisst. Messing wie alles, was gerade arbeitet. */
#mcp-zaehler {
  position: fixed; top: max(10px, env(safe-area-inset-top, 10px)); left: 12px; right: 12px;
  z-index: 99997; display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 16px;
  background: linear-gradient(176deg, #1c1917 0%, #100e0c 70%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 40px -22px rgba(0,0,0,.95);
  color: #ece5da;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.85,.25,1);
}
#mcp-zaehler.an { opacity: 1; transform: none; }
.mz-ring { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.mz-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.mz-ring circle { fill: none; stroke-width: 2.5; }
.mz-bahn { stroke: rgba(255,255,255,.1); }
.mz-lauf { stroke: #d6a25e; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.mz-zeit {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 ui-monospace, monospace; color: #d6a25e; letter-spacing: -.02em;
}
.mz-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-text b { font: 600 14px system-ui, sans-serif; }
.mz-was { font: 400 12px system-ui, sans-serif; color: #a89d8e; }
#mcp-zaehler.gut .mz-lauf { stroke: #7fc192; }
#mcp-zaehler.gut .mz-zeit { color: #7fc192; font-size: 17px; }
#mcp-zaehler.schlecht .mz-lauf { stroke: #e2857f; }
#mcp-zaehler.schlecht .mz-zeit { color: #e2857f; }

/* ══ EINE_REIHE_20260918 (KEES) ═══════════════════════════════════════
   Marcus: "mir gefaellt das Arrangement der Symbole nicht, versteht auch
   so keiner. Die drei Pfeile in EINE Einheit, schoen klein, voellig
   analog zur Quellenbox. Sound daneben bleibt. Dann der Box-Pfeil nach
   oben im eigenen Kreis (senden an). Alles rechts arretiert, ueber dem
   GPS, in einer Reihe, buendig, Mini-Luecke."

   Vorher: drei lose Kaesten + ein Vorlese-Knopf, der 34px darunter hing.
   Jetzt: eine Zeile, rechts ausgerichtet —
   [Quellen] [Pfeil-Einheit] [Ton] [Teilen] */

.ppx-live-pfeile {
  justify-content: flex-end !important;
  align-items: center;
  gap: 8px !important;
  margin: 12px 2px 0 !important;
  flex-wrap: nowrap !important;
}

/* Die Einheit: gleicher Rand, gleiche Hoehe, gleiche Rundung wie die
   Quellenbox. Zwei Geschwister, nicht zwei Fremde. */
.ppx-pfeil-einheit {
  display: inline-flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 6px 0 9px; border-radius: 17px;
  border: 1px solid rgba(214,162,94,.38);
  background: rgba(21,18,15,.82);
  flex: 0 0 auto;
}
.ppx-pe-ic { width: 15px; height: 15px; color: #d6a25e; opacity: .85; margin-right: 4px; flex: none; }
.ppx-live-pfeile .ppx-pfeil-einheit button {
  width: 30px !important; height: 28px !important;
  border: 0 !important; background: none !important;
  border-radius: 9px !important;
  color: #d6a25e !important; font: 400 16px/1 system-ui !important;
  flex: 0 0 auto;
}
.ppx-live-pfeile .ppx-pfeil-einheit button:active { background: rgba(214,162,94,.16) !important; transform: scale(.92); }

/* Ton und Teilen: dasselbe Rund, dieselbe Groesse — ein Paar. */
.ppx-live-pfeile .chat-read-button,
.ppx-teilen {
  width: 34px !important; height: 34px !important; flex: 0 0 auto !important;
  border-radius: 50% !important; cursor: pointer;
  border: 1px solid rgba(214,162,94,.38) !important;
  background: rgba(21,18,15,.82) !important;
  color: #d6a25e !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
}
.ppx-teilen svg { width: 16px; height: 16px; }
.ppx-live-pfeile .chat-read-button:active, .ppx-teilen:active { transform: scale(.92); }

/* Die Quellenbox behaelt ihre Breite, sie darf nicht gequetscht werden. */
.ppx-live-pfeile .mq-marke { flex: 0 0 auto !important; margin: 0 auto 0 0 !important; }

@media (max-width: 360px) {
  .ppx-live-pfeile { gap: 6px !important; }
  .ppx-pfeil-einheit { padding: 0 4px 0 7px; }
  .ppx-live-pfeile .ppx-pfeil-einheit button { width: 27px !important; }
}

/* APP_IN_DIE_HILFE_20260918 — dezenter als der Telefonknopf: das Telefon
   ist der schnellste Weg, die App nur ein Angebot. */
.hilfe-app {
  display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 13px; text-decoration: none;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
}
.hilfe-app b { font: 600 14px system-ui, sans-serif; color: #ece5da; }
.hilfe-app span { font: 400 12.5px/1.45 system-ui, sans-serif; color: #8d8377; }

/* ══ MATILDE_BLEIBT_20260918 (KEES) ═══════════════════════════════════
   Marcus: "Wo ist Matilde mit Eingabefeld?????"

   Gemessen: beim Oeffnen von Pocketpiles schrumpfte Matilde von 99px auf
   39px und rutschte halb aus dem Bild (oben -7 bis 32). Das Guckloch im
   Vorhang sass bei y=10 mit 40px Radius. Sie war faktisch verschwunden.

   Marcus' Vorgabe von Anfang an war eine andere: sie faehrt NACH HINTEN
   und gibt Platz frei — sie verschwindet nicht. Wer sie nicht mehr sieht,
   glaubt, er sei in einer fremden App gelandet. Genau das ist passiert.

   Jetzt: sie tritt zurueck (halbe Groesse), bleibt aber ganz im Bild und
   behaelt ihren Platz oben. Der Vorhang bekommt ein Fenster, das zu ihrer
   echten Groesse passt. */
.ppx-matilde-depth {
  transform: translate3d(0, 6px, 0) scale(.62) !important;
  transform-origin: 50% 0 !important;
}
.ppx-fluchtpunkt:not(.ppx-matilde-depth) {
  transform: perspective(900px) translate3d(0, -1%, -500px) !important;
  margin-bottom: calc(var(--ppx-fp-zug, 180px) * -0.55) !important;
}
/* Der Raum faengt erst unter ihr an, statt ueber ihr zu liegen. */
#ppx-space { padding-top: 120px; }
body.ppx-open #ppx-space { padding-top: 120px; }

/* KREISLAUF_20260918 (KEES) — die leere Seite erklaert den Weg, nicht sich
   selbst. Drei kurze Zeilen, die dritte ist das Versprechen. */
.ppx-leer { display: flex; flex-direction: column; gap: 7px; max-width: 24ch; }
.ppx-leer-1 { font: 600 14.5px/1.3 system-ui, sans-serif; color: #ece5da; }
.ppx-leer-2 { font: 400 13px/1.4 system-ui, sans-serif; color: #a89d8e; }
.ppx-leer-3 { font: 400 13px/1.4 system-ui, sans-serif; color: #8d8377; }
.ppx-leer b { color: #d6a25e; font-weight: 600; font-size: 15px; }

/* ══ FRAGFELD_20260918 (KEES) — Matilde ist im Raum, nicht daneben ═════
   Marcus: "kein Eingabefeld von Matilde, man kann damit NICHTS machen."
   Das Feld sitzt oben im Raum, gross genug fuer einen Daumen, in
   derselben Sprache wie die Bloecke: mattes Schwarz, Lichtkante, ein
   Messingknopf fuer die einzige Aktion, die zaehlt. */
.ppx-frag {
  display: flex; align-items: center; gap: 9px; flex: none;
  margin: 0 0 2px; padding: 6px 6px 6px 14px; border-radius: 16px;
  background: linear-gradient(176deg, #1c1917 0%, #100e0c 70%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 14px 30px -20px rgba(0,0,0,.9);
}
#ppx-frag-feld {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
  color: #f1e6cf; font: 400 16px system-ui, -apple-system, sans-serif;  /* 16px: iOS zoomt sonst */
  padding: 10px 0;
}
#ppx-frag-feld::placeholder { color: #7d7468; }
.ppx-frag-ab {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid #d6a25e; background: #d6a25e; color: #1a1512;
  font: 600 19px/1 system-ui, sans-serif;
}
.ppx-frag-ab:active { transform: scale(.94); }

/* RAUM_BLEIBT_20260918 (KEES) — waehrend Matilde antwortet, wird der
   Vorhang durchsichtig: sie steht hinten, die Bloecke vorn. Beides
   gleichzeitig sichtbar, wie Marcus es von Anfang an beschrieben hat. */
body.ppx-frage-laeuft #ppx-space .ppx-schleier {
  opacity: .14 !important;
  transition: opacity .45s ease;
}
/* Die Bloecke treten dabei etwas zurueck, damit der Text lesbar bleibt. */
body.ppx-frage-laeuft #ppx-space .ppx-wuerfel-reihe {
  opacity: .5;
  transform: translateY(14px) scale(.94);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.85,.25,1);
}
body.ppx-frage-laeuft #ppx-space #ppx-temp-block { opacity: .5; transition: opacity .45s ease; }
/* Das Fragefeld bleibt voll da: von dort kommt die naechste Frage. */
body.ppx-frage-laeuft #ppx-space .ppx-frag { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT_ZURUECK_20260924 (KEES) — Marcus: "wieder schwarz!!!"

   Heute habe ich den App-Rahmen dreimal angefasst, damit das Eingabefeld
   immer sichtbar bleibt: erst gerechnete Hoehe (100dvh minus 78), dann
   Mindesthoehe, dazu ein fest sitzendes Eingabefeld. Auf dem iPhone wurde
   die Seite nach einer Anfrage schwarz — reproduzierbar, ohne Fehlermeldung.

   Ich habe zweimal nachgebessert statt zurueckzunehmen. Das war falsch.
   Eine schwarze Seite ist ein Totalausfall; ein Eingabefeld, das man
   heranscrollen muss, ist eine Unbequemlichkeit. Also: alle drei Eingriffe
   sind stillgelegt, der Rahmen verhaelt sich wieder wie vor dem 24.9.

   Was bleibt: Antworten werden NICHT gekuerzt (NICHTS_ABSCHNEIDEN vom
   17.9.), damit kein Satz mitten im Wort abbricht. Wird das Eingabefeld
   dadurch wieder weggeschoben, loesen wir das anders — mit einem Knopf,
   der zurueckspringt, statt mit Rechnungen an der Fensterhoehe.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ GPS_TREFFER_20260924 (KEES) — Marcus: "die GPS-Tafel laesst sich nicht
   aufklappen, das ist ein Fehler."

   Gemessen: In Chrome klappt sie auf (108 -> 258 px, neun Stationen, keine
   Fehler). Der Knopf funktioniert also. Was nicht funktioniert, ist das
   Treffen: die vier Knoepfe oben rechts sind 26 x 26 px gross und stehen
   dicht nebeneinander. Ein Daumen ist rund 45 px breit — man trifft den
   Nachbarn oder die Luecke.

   Die Knoepfe bleiben optisch gleich gross. Nur ihre unsichtbare
   Trefferflaeche waechst auf 44 px, wie es die Fingerregel verlangt.
   Dazu etwas mehr Luft dazwischen, damit nicht der falsche erwischt wird. */
.gps-tafel .gps-z {
  position: relative;
  margin-left: 4px;
}
.gps-tafel .gps-z::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  /* Nur Trefferflaeche, nichts Sichtbares. */
}

/* ══ ERREICHBAR_20260924 (KEES) — Marcus: "GPS ist leider nicht sichtbar,
   das ist schade, vor allem wegen der Karte."

   Gemessen nach einer Antwort: Inhalt 927 px hoch, Fenster 760 px, und der
   App-Rahmen stand auf overflow:hidden. Alles darunter war abgeschnitten
   und mit keiner Geste erreichbar — auch die GPS-Tafel mit der Wegkarte.

   Heute Mittag hatte ich das schon einmal geloest, aber mit einer
   gerechneten Hoehe (100dvh minus 78) und einem festgenagelten
   Eingabefeld. Beides habe ich zurueckgenommen, als die Seite schwarz
   wurde. Die schwarze Seite kam aber von etwas ganz anderem: ich hatte
   einen React-Knoten verschoben, und React riss den Baum ab.

   Deshalb jetzt nur das eine, was noetig ist: der Rahmen darf senkrecht
   rollen. Keine Rechnung an der Fensterhoehe, kein festes Eingabefeld,
   waagerecht bleibt er fest, damit nichts seitlich schwimmt. */
main.app-shell {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}