/* ═══════════════════════════════════════════════════════════════════════
   Nevim Maps — Farben und Bausteine

   Die beiden Farbsaetze sind 1:1 aus dem Drive uebernommen, damit alle
   Werkzeuge unter janevim.com gleich aussehen. Wer hier eine Farbe
   ergaenzt, muss sie in BEIDEN Saetzen ergaenzen — ein Test haelt das fest.
   Umgeschaltet wird ueber  document.documentElement.dataset.thema
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HELL ─────────────────────────────────────────────────────────────── */
:root {
  --bg:#ffffff; --bg-secondary:#fafbfa; --bg-tertiary:#f4f5f4; --bg-hover:#eef0ef;
  --surface:#ffffff; --border:#e6ebea;
  --text:#0a1e1a; --text-secondary:#5f7570; --text-muted:#94a5a0;
  --teal:#00C4A7; --teal-dark:#00a38b; --teal-darker:#007a68;
  --teal-light:#e6faf6; --teal-dim:rgba(0,196,167,0.1);
  --danger:#ef4444;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono","Fira Code","Fira Mono",Menlo,Consolas,monospace;
  --transition:all 0.15s ease;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04); --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --text-dim:var(--text-secondary);
  /* Farben der Routen auf der Karte: die gewaehlte kraeftig, die
     Alternativen blass. Beide Saetze brauchen eigene Werte, weil eine
     blasse Linie auf dunklem Grund sonst verschwindet. */
  --route:#00a38b; --route-blass:#4a6b64; --erreichbar:#00C4A7;
}

/* ── DUNKEL ───────────────────────────────────────────────────────────── */
:root[data-thema="dunkel"] {
  --bg:#071310; --bg-secondary:#0c1a16; --bg-tertiary:#122320; --bg-hover:#1a2f2a;
  --surface:#0f1f1b; --border:#223b35;
  --text:#e8f2ef; --text-secondary:#9fb5af; --text-muted:#6f8880;
  --teal:#1fd9bb; --teal-dark:#00C4A7; --teal-darker:#7ff0dc;
  --teal-light:#123330; --teal-dim:rgba(31,217,187,0.14);
  --danger:#ff6b6b;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.5);
  --route:#1fd9bb; --route-blass:#a8c4be; --erreichbar:#1fd9bb;
}

* { box-sizing:border-box; margin:0; padding:0; }

/* Das `hidden`-Attribut muss staerker sein als jede eigene Regel.
   Der Browser setzt fuer `hidden` nur `display:none` in seiner
   Grundausstattung — jede eigene Regel mit `display:` schlaegt das. Genau
   das ist am 03.09. passiert: `.sperre { display:grid }` liess die
   Sperrseite ueber der Karte stehen, obwohl das Konto laengst
   freigeschaltet war. Diese eine Zeile deckt alle solchen Faelle ab, auch
   kuenftige. */
[hidden] { display:none !important; }

html, body { height:100%; }
body {
  font-family:var(--font); background:var(--bg-secondary); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden;
}
button, input, select { font:inherit; color:inherit; }
a { color:var(--teal-darker); }

/* ── Grundriss ────────────────────────────────────────────────────────── */
.rahmen { display:grid; grid-template-columns:370px 1fr;
          grid-template-rows:var(--nevim-kopf, 56px) 1fr;
          grid-template-areas:"kopf kopf" "tafel flaeche"; height:100vh;
          height:100dvh; }

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.kopf { grid-area:kopf; display:flex; align-items:center; gap:14px; z-index:900;
        padding:0 16px; background:var(--bg); border-bottom:1px solid var(--border); }
.marke { display:flex; align-items:center; gap:10px; width:auto; flex:none;
         font-size:1.35rem; font-weight:600; color:var(--text); letter-spacing:.01em; }
.marke svg { flex:none; }

.suchfeld { flex:1; max-width:620px; position:relative; }
.suchfeld input {
  width:100%; padding:11px 40px 11px 46px; border:1px solid transparent;
  border-radius:var(--radius-lg); background:var(--bg-tertiary); color:var(--text);
  outline:none; transition:var(--transition);
}
.suchfeld input:focus { background:var(--surface); border-color:var(--teal);
                        box-shadow:var(--shadow-md); }
.suchfeld input::placeholder { color:var(--text-muted); }
.suchfeld input::-webkit-search-cancel-button { display:none; }
.suchfeld .lupe { position:absolute; left:15px; top:50%; transform:translateY(-50%);
                  color:var(--text-secondary); pointer-events:none; }
.feld-loeschen { position:absolute; right:8px; top:50%; transform:translateY(-50%);
                 width:28px; height:28px; display:grid; place-items:center;
                 border:none; border-radius:50%; background:transparent;
                 color:var(--text-secondary); cursor:pointer; }
.feld-loeschen:hover { background:var(--bg-hover); color:var(--text); }

.kopf-rechts { display:flex; align-items:center; gap:6px; margin-left:auto; }

.rund { width:40px; height:40px; display:grid; place-items:center; flex:none;
        border:none; border-radius:50%; background:transparent; color:var(--text-secondary);
        cursor:pointer; transition:var(--transition); }
.rund:hover { background:var(--bg-hover); color:var(--text); }
.rund.aktiv { background:var(--teal-dim); color:var(--teal-darker); }

/* ── Vorschlaege beim Tippen ──────────────────────────────────────────── */
.vorschlaege { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1000;
               list-style:none; background:var(--surface); border:1px solid var(--border);
               border-radius:var(--radius); box-shadow:var(--shadow-md);
               max-height:60vh; overflow-y:auto; }
.vorschlaege li { padding:10px 14px; cursor:pointer; display:flex; gap:10px;
                  align-items:baseline; border-bottom:1px solid var(--border); }
.vorschlaege li:last-child { border-bottom:none; }
.vorschlaege li:hover, .vorschlaege li.wahl { background:var(--bg-hover); }
.vorschlaege .v-name { font-weight:500; }
.vorschlaege .v-wo { color:var(--text-secondary); font-size:.88rem; }

/* ── Tafel (linke Spalte) ─────────────────────────────────────────────── */
.tafel { grid-area:tafel; background:var(--bg); border-right:1px solid var(--border);
         display:flex; flex-direction:column; overflow:hidden; }

.reiter { display:flex; border-bottom:1px solid var(--border); flex:none; }
.reiter-knopf { flex:1; padding:13px 8px; border:none; background:transparent;
                color:var(--text-secondary); cursor:pointer; font-weight:500;
                border-bottom:2px solid transparent; transition:var(--transition); }
.reiter-knopf:hover { background:var(--bg-hover); color:var(--text); }
.reiter-knopf.aktiv { color:var(--teal-darker); border-bottom-color:var(--teal); }

.tafel-inhalt { display:none; padding:16px; overflow-y:auto; flex:1; }
.tafel-inhalt.aktiv { display:block; }

.hinweis { color:var(--text-secondary); font-size:.92rem; padding:8px 2px; }

.block { margin-top:20px; }
.block-kopf { display:flex; align-items:center; justify-content:space-between;
              margin-bottom:8px; }
.block-kopf h2 { font-size:.82rem; font-weight:600; text-transform:uppercase;
                 letter-spacing:.06em; color:var(--text-muted); }

/* ── Listeneintraege (Treffer, Orte, Routen, letzte Suchen) ───────────── */
.zeile { display:flex; align-items:center; gap:10px; padding:10px 10px;
         border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.zeile:hover { background:var(--bg-hover); }
.zeile-text { flex:1; min-width:0; }
.zeile-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zeile-wo { color:var(--text-secondary); font-size:.86rem;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zeile-tat { display:flex; gap:2px; flex:none; opacity:0; transition:var(--transition); }
.zeile:hover .zeile-tat, .zeile:focus-within .zeile-tat { opacity:1; }
.zeile-tat .rund { width:32px; height:32px; }
.zeile-sinnbild { width:34px; height:34px; flex:none; display:grid; place-items:center;
                  border-radius:50%; background:var(--teal-dim); color:var(--teal-darker); }

/* ── Verkehrsmittel ───────────────────────────────────────────────────── */
.mittel { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:14px; }
.mittel-knopf { display:flex; flex-direction:column; align-items:center; gap:3px;
                padding:9px 4px; border:1px solid var(--border); border-radius:var(--radius-sm);
                background:var(--surface); color:var(--text-secondary); cursor:pointer;
                font-size:.76rem; transition:var(--transition); }
.mittel-knopf:hover { background:var(--bg-hover); color:var(--text); }
.mittel-knopf.aktiv { background:var(--teal-dim); border-color:var(--teal);
                      color:var(--teal-darker); }

/* ── Punkte der Route ─────────────────────────────────────────────────── */
.punkte { list-style:none; display:flex; flex-direction:column; gap:8px; }
/* `relative`, damit die Vorschlagsliste beim Tippen unter GENAU diesem
   Feld haengt und nicht unter dem ersten der Liste. */
.punkt { display:flex; align-items:center; gap:8px; position:relative; }
.punkt .vorschlaege { left:30px; top:calc(100% + 4px); max-height:44vh; }
.punkt-marke { width:22px; flex:none; text-align:center; font-weight:600;
               color:var(--text-secondary); font-size:.85rem; }
/* Der Griff zum Umsortieren. `touch-action:none` ist Pflicht: ohne das
   scrollt das Handy die Seite, statt den Punkt zu ziehen. Die Flaeche ist
   bewusst groesser als die Schrift — mit dem Daumen muss man sie treffen. */
.punkt-griff { cursor:grab; touch-action:none; user-select:none;
               width:28px; height:34px; display:flex; align-items:center;
               justify-content:center; border-radius:var(--radius-sm); }
.punkt-griff:hover { background:var(--bg-hover); color:var(--text); }
.punkt-griff:active { cursor:grabbing; }
.punkt.zieht { opacity:.55; }
.punkt.zieht .punkt-griff { background:var(--teal-dim); color:var(--teal-darker); }
/* Waehrend des Ziehens keine Schwebe-Effekte auf den anderen Zeilen —
   sonst blinkt die Liste unter dem Finger. */
.punkte.sortiert .punkt:not(.zieht) { transition:transform .12s ease; }
.punkte.sortiert .punkt-griff:hover { background:transparent; }
.punkt input { flex:1; min-width:0; padding:10px 12px; border:1px solid var(--border);
               border-radius:var(--radius-sm); background:var(--bg-tertiary);
               color:var(--text); outline:none; transition:var(--transition); }
.punkt input:focus { background:var(--surface); border-color:var(--teal); }
.punkt input.gesetzt { border-color:var(--teal); background:var(--surface); }
.punkt .rund { width:32px; height:32px; }
.punkt-knoepfe { display:flex; gap:8px; margin:10px 0 4px; flex-wrap:wrap; }

.klein-knopf { padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
               background:var(--surface); color:var(--text-secondary); cursor:pointer;
               font-size:.86rem; transition:var(--transition); }
.klein-knopf:hover { background:var(--bg-hover); color:var(--text); border-color:var(--teal); }
.klein-knopf[disabled] { opacity:.45; cursor:default; }

.optionen { margin:12px 0; border:1px solid var(--border); border-radius:var(--radius-sm);
            padding:10px 12px; background:var(--surface); }
.optionen summary { cursor:pointer; color:var(--text-secondary); font-size:.9rem; }
.optionen label { display:flex; align-items:center; gap:8px; padding:7px 0 0;
                  font-size:.92rem; cursor:pointer; }
.optionen input[type=checkbox] { width:16px; height:16px; accent-color:var(--teal); }

.haupt-knoepfe { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.haupt-knopf { display:inline-block; text-align:center; text-decoration:none;
               padding:12px 16px; border:none; border-radius:var(--radius-sm);
               background:var(--teal); color:#04231e; font-weight:600; cursor:pointer;
               transition:var(--transition); }
.haupt-knopf:hover { background:var(--teal-dark); }
.haupt-knopf[disabled] { opacity:.5; cursor:default; }

/* ── Route-Ergebnis ───────────────────────────────────────────────────── */
.vorschlag { border:1px solid var(--border); border-radius:var(--radius);
             padding:12px 14px; margin-bottom:10px; cursor:pointer;
             background:var(--surface); transition:var(--transition); }
.vorschlag:hover { border-color:var(--teal); }
.vorschlag.aktiv { border-color:var(--teal); background:var(--teal-dim); }
.vorschlag-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vorschlag-dauer { font-size:1.15rem; font-weight:600; }
.vorschlag-strecke { color:var(--text-secondary); }
.vorschlag-notiz { color:var(--text-muted); font-size:.84rem; margin-top:2px; }

.schritte { list-style:none; margin-top:10px; }
.schritt { display:flex; gap:10px; padding:9px 4px; border-top:1px solid var(--border);
           cursor:pointer; }
.schritt:hover { background:var(--bg-hover); }
.schritt-nr { color:var(--text-muted); font-size:.82rem; min-width:20px; flex:none;
              font-variant-numeric:tabular-nums; }
.schritt-text { flex:1; }
.schritt-weit { color:var(--text-secondary); font-size:.84rem; white-space:nowrap;
                font-variant-numeric:tabular-nums; }

.profil { margin-top:12px; }
.profil svg { width:100%; height:80px; display:block; }
.profil-text { color:var(--text-secondary); font-size:.84rem; margin-top:4px; }

.ergebnis-knoepfe { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }

/* ── Karte ────────────────────────────────────────────────────────────── */
.flaeche { grid-area:flaeche; position:relative; }
#karte { position:absolute; inset:0; background:var(--bg-tertiary); }
.leaflet-container { font-family:var(--font); background:var(--bg-tertiary); }

.karten-knoepfe { position:absolute; right:12px; top:12px; z-index:500;
                  display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.rund.flach { background:var(--surface); border:1px solid var(--border);
              box-shadow:var(--shadow-sm); color:var(--text-secondary); }
.rund.flach:hover { color:var(--teal-darker); border-color:var(--teal); }
.rund.flach.aktiv { background:var(--teal-dim); color:var(--teal-darker);
                    border-color:var(--teal); }

.stil-waehler { display:flex; background:var(--surface); border:1px solid var(--border);
                border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.stil-knopf { padding:8px 12px; border:none; background:transparent;
              color:var(--text-secondary); cursor:pointer; font-size:.85rem;
              transition:var(--transition); }
.stil-knopf:hover { background:var(--bg-hover); color:var(--text); }
.stil-knopf.aktiv { background:var(--teal-dim); color:var(--teal-darker); font-weight:500; }

.meldung { position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
           z-index:600; max-width:min(90%, 460px); padding:11px 18px;
           border-radius:var(--radius); background:var(--surface);
           border:1px solid var(--border); box-shadow:var(--shadow-md);
           color:var(--text); text-align:center; }
.meldung.schlecht { border-color:var(--danger); color:var(--danger); }

/* Blaue Punkte gibt es hier nicht — der eigene Standort traegt die
   Hausfarbe, damit er sich von den Zielmarken unterscheidet. */
.standort-punkt { border-radius:50%; background:var(--teal);
                  border:2px solid var(--surface); box-shadow:0 0 0 4px var(--teal-dim); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); }
.leaflet-popup-content { margin:12px 14px; }
.leaflet-popup-content b { display:block; margin-bottom:2px; }
.leaflet-popup-content .popup-knoepfe { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.leaflet-bar a, .leaflet-bar a:hover { background:var(--surface); color:var(--text);
                                       border-bottom-color:var(--border); }
.leaflet-control-attribution { background:var(--surface); color:var(--text-secondary); }
.leaflet-control-attribution a { color:var(--teal-darker); }

/* ── Fahransicht ──────────────────────────────────────────────────────── */
/* Sie liegt über der Karte, nimmt aber keine Berührungen an: nur die
   beiden Kästen tun das. Sonst könnte man die Karte nicht mehr schieben,
   während man fährt. */
.fahren { position:absolute; inset:0; z-index:700; pointer-events:none;
          display:flex; flex-direction:column; justify-content:space-between;
          padding:12px; gap:12px; }
.fahren-oben, .fahren-unten { pointer-events:auto; background:var(--surface);
          border:1px solid var(--border); border-radius:var(--radius);
          box-shadow:var(--shadow-md); }

.fahren-oben { padding:14px 18px; max-width:min(100%, 560px); }
/* Die Entfernung ist unterwegs die wichtigste Zahl — sie steht groß und
   in gleichbreiten Ziffern, damit sie beim Zählen nicht zappelt. */
.fahren-bis { font-size:2rem; font-weight:700; line-height:1.1;
              color:var(--teal-darker); font-variant-numeric:tabular-nums; }
.fahren-anweisung { font-size:1.1rem; margin-top:4px; }

.fahren-unten { display:flex; align-items:center; gap:12px; padding:10px 12px; }
.fahren-rest { flex:1; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.fahren-ende { padding:10px 18px; }

/* Während der Fahrt stören die übrigen Kartenknöpfe nur — die Karte soll
   Karte sein. Der Stil-Wähler bleibt, das Umschalten auf Dunkel ist im
   Auto bei Nacht nützlich. */
body.faehrt .karten-knoepfe .rund { display:none; }
body.faehrt .handy-leiste { display:none; }

/* Waehrend der Fahrt klebt unten die Fahrt-Tafel. Was Leaflet unten auf
   die Karte legt (Zoom links, Herkunftshinweis rechts), muss DARUEBER
   ruecken — sonst liegt es hinter der Tafel (Rico, 04.09., am Bild: der
   OpenStreetMap-Hinweis lag mitten unter den Fahrt-Angaben). Die Tafel
   ist je nach Textzeilen unterschiedlich hoch; maps.js misst sie und
   pflegt --fahren-unten-hoehe. Dazu: 12px Rand der .fahren-Huelle plus
   8px Luft. */
body.faehrt .leaflet-bottom {
  bottom: calc(var(--fahren-unten-hoehe, 96px) + 20px
               + env(safe-area-inset-bottom, 0px));
}

/* Der Abbiege-Pfeil. Steht neben der Entfernung; im großen Bild ist er ein
   Zusatz, im kleinen Fenster die Hauptsache. */
.fahren-zeile { display:flex; align-items:center; gap:14px; }
.fahren-pfeil { width:44px; height:44px; flex:none; color:var(--teal-darker); }
.fahren-strasse { font-size:1.05rem; font-weight:600; margin-top:2px; }
.fahren-strasse:empty { display:none; }

/* ── Kompakt-Ansicht (Bild-in-Bild) ───────────────────────────────────── */
/* Die Android-Hülle setzt diese Klasse, sobald sie ins kleine Fenster geht
   (etwa daumengroß). Dort passt nichts hin außer Pfeil, Entfernung und
   Straße — die Karte selbst ist bei der Größe nicht zu gebrauchen.
   Ausprobieren geht auch ohne App: in den Entwicklerwerkzeugen
   `document.body.classList.add("kompakt")` eintippen. */
body.kompakt #karte,
body.kompakt .tafel,
body.kompakt .kopf,
body.kompakt .handy-leiste,
body.kompakt .karten-knoepfe,
body.kompakt .stil-waehler,
body.kompakt .meldung,
body.kompakt .fahren-unten,
body.kompakt .fahren-anweisung { display:none; }

/* Mittig und groß: im Auto wird das aus einem Meter Entfernung im
   Augenwinkel gelesen, nicht studiert. */
body.kompakt .fahren { position:fixed; padding:6px;
          justify-content:center; align-items:center; }
body.kompakt .fahren-oben { width:100%; padding:0; border:none;
          box-shadow:none; background:transparent; text-align:center; }
body.kompakt .fahren-zeile { gap:8px; justify-content:center; }
body.kompakt .fahren-pfeil { width:22vw; height:22vw;
          min-width:52px; min-height:52px; max-width:96px; max-height:96px; }
body.kompakt .fahren-bis { font-size:13vw; line-height:1; }
body.kompakt .fahren-strasse { font-size:5vw; line-height:1.2; margin-top:6px;
          /* Ein langer Straßenname darf das Fenster nicht sprengen. */
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Sperrseite ───────────────────────────────────────────────────────── */
.sperre { position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
          background:var(--bg-secondary); padding:20px; }
.sperre-karte { max-width:460px; background:var(--surface); border:1px solid var(--border);
                border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-md); }
.sperre-karte h1 { font-size:1.3rem; margin-bottom:10px; }
.sperre-karte p { color:var(--text-secondary); margin-bottom:18px; }

/* ── Handy ────────────────────────────────────────────────────────────── */
/* Am Rechner gibt es weder die untere Leiste noch den Schubladen-Griff:
   dort steht die Tafel fest an der Seite. */
.tafel-knopf, .handy-leiste, .tafel-griff { display:none; }

/* Die untere Leiste — der einzige Weg zu Route und Orten am Telefon.
   Ohne sie sieht man dort nur die Karte und kommt an nichts heran. */
.handy-leiste {
  position:fixed; left:0; right:0; bottom:0; z-index:1300;
  height:calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--bg); border-top:1px solid var(--border);
}
.handy-knopf { flex:1; display:flex; flex-direction:column; align-items:center;
               justify-content:center; gap:2px; border:none; background:transparent;
               color:var(--text-secondary); cursor:pointer; font-size:.7rem;
               padding:0; -webkit-tap-highlight-color:transparent; }
.handy-knopf.aktiv { color:var(--teal-darker); }
.handy-knopf.aktiv svg { transform:scale(1.06); }

/* Der Griff oben an der Schublade: der graue Strich, den man von
   Handy-Oberflaechen kennt. Er sagt „hier laesst sich schieben". */
.tafel-griff { width:100%; padding:9px 0 5px; border:none; background:transparent;
               cursor:pointer; touch-action:none; }
.tafel-griff span { display:block; width:40px; height:4px; margin:0 auto;
                    border-radius:2px; background:var(--border); }

@media (max-width: 860px) {
  /* Die Karte bekommt die ganze Fläche, die Tafel fährt von unten ein.
     Knöpfe bleiben mindestens 40 Pixel hoch — mit dem Daumen bedienbar. */
  .rahmen { grid-template-columns:1fr; grid-template-rows:var(--nevim-kopf, 56px) 1fr;
            grid-template-areas:"kopf" "flaeche"; }
  .handy-leiste { display:flex; }
  .tafel-griff { display:block; }
  .marke .schrift { display:none; }
  /* Der Hamburger oben entfällt: die untere Leiste macht dasselbe,
     nur sichtbar. Zwei Wege zum selben Ziel verwirren nur. */
  .tafel-knopf { display:none; }

  .tafel { position:fixed; left:0; right:0; z-index:1200;
           bottom:calc(58px + env(safe-area-inset-bottom, 0px));
           max-height:60dvh; border-right:none; border-top:1px solid var(--border);
           border-radius:var(--radius-lg) var(--radius-lg) 0 0;
           box-shadow:var(--shadow-md);
           /* 100% reicht nicht: die Schublade steht über der Leiste und
              würde sonst mit ihrer Oberkante sichtbar bleiben. */
           transform:translateY(calc(100% + 58px + env(safe-area-inset-bottom, 0px)));
           transition:transform .22s ease; }
  .tafel.offen { transform:translateY(0); }
  .tafel-inhalt { padding:14px 16px 20px; }

  /* Die Kartenknöpfe bleiben oben rechts — genau wie am Rechner. Sie
     einmal nach unten zu schieben war ein Fehler: dort stapeln sich schon
     Zoom, Herkunftshinweis und die Leiste, und man sucht sie an einer
     anderen Stelle als am großen Bildschirm. */

  /* Was UNTEN auf der Karte klebt, muss dagegen über die Leiste rutschen —
     sonst liegt es darunter und ist nicht mehr zu treffen. Das betrifft
     Leaflets eigene Bedienelemente: Zoom links, Herkunftshinweis rechts. */
  .leaflet-bottom { bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
  .meldung { bottom:auto; top:12px; }

  /* Der Stil-Wähler nahm ein Drittel der Breite. Am Telefon kompakter. */
  .stil-knopf { padding:8px 10px; font-size:.8rem; }
  .mittel-knopf span { font-size:.72rem; }
  /* Fingerfreundlich: nichts unter 40 Pixel Höhe. */
  .zeile { padding:12px 10px; }
  .zeile-tat { opacity:1; }
  .klein-knopf { padding:10px 14px; }
  .punkt input { padding:12px; }
}