/* ============================================================
   InclusiveMap — shared design system
   High-contrast, accessibility-first, bold "designer" rebrand.
   Used by: index.html, pricing.html, about.html, contact.html
   Fonts via fonts.bunny.net (EU-based, privacy-friendly,
   GDPR-clean drop-in for Google Fonts).
   ============================================================ */
@import url("https://fonts.bunny.net/css?family=space-grotesk:500,600,700|inter:400,500,600,700");

/* hidden heisst hidden - auf JEDER Seite, die dieses Blatt laedt.
   ---------------------------------------------------------------------------
   19.09.2026. Auf der Karte erschien ein Dialog, der ein hidden-Attribut trug
   und trotzdem dastand. Grund: [hidden]{display:none} kommt aus dem
   Standardstilblatt des Browsers und hat die schwaechste Stufe ueberhaupt.
   Eine einzige eigene Regel, die display setzt, gewinnt dagegen - und das
   Element bleibt sichtbar, obwohl im Quelltext nichts Falsches steht.

   Nachgemessen in einer echten Rendering-Engine: display meldete "grid", das
   Element hatte eine Flaeche. jsdom hatte vorher "versteckt" gesagt; es bildet
   diese Rangfolge nicht nach.

   Diese Datei laden zwoelf Seiten. Die Regel steht deshalb hier und nicht nur
   dort, wo der Fehler auffiel. tools/versteckt.test.mjs haelt sie fest. */
[hidden]{ display:none !important; }

:root{
  /* --- core palette (high contrast) --- */
  --ink:#111318;          /* near-black text ~ 18:1 on white */
  --ink-2:#3d414c;        /* secondary text ~ 9:1 */
  --muted:#5b606d;        /* ~ 6:1 */
  --line:#e4e2da;         /* hairlines */
  --paper:#ffffff;
  --bg:#f4f2ea;           /* warm off-white canvas */
  --bg-2:#eeece2;

  /* --- brand accents --- */
  --accent:#1d4ed8;       /* cobalt, interactive; white text = AA */
  --accent-ink:#0d2a8f;   /* much darker for a clearly visible hover */
  --hot:#ff4d2e;          /* signal coral, used big + sparingly */
  --gold:#f5b400;         /* partner gold */
  --gold-ink:#8a6400;

  /* --- facility colors (distinct, all pass on white w/ icon+border) --- */
  --f-accessible:#1d4ed8;
  --f-gender_neutral:#7c3aed;
  --f-baby:#0f9d58;
  --f-breastfeeding:#d6247a;
  --f-period:#e11d48;
  --f-adult_changing:#0891b2;
  --f-family:#ea6b0c;
  /* kids_seating had no token, so facColor() fell back to the accent and it wore the
     exact blue of "accessible" - two different facilities, one colour. This hue is
     29.7 ΔE from its nearest neighbour (the bar set by the closest existing pair is
     11.7) and clears 3:1 against both the light and the dark surface. */
  --f-kids_seating:#4d7c0f;
  --f-kids_corner:#c026d3;
  --f-wheelchair_parking:#4338ca;
  --f-wheelchair_entrance:#0ea5e9;
  --f-assistance_dogs:#a16207;
  /* eurokey (30.10.2026): Stein-Grau wie Metall. Gemessen: 32,2 dE zum naechsten
     Nachbarn, Kontrast 4,28 auf hell (#f4f2ea) und 3,87 auf dunkel (#111318). */
  --f-eurokey:#78716c;
  /* 01.11.2026: E-Rollstuhl laden. Gemessen: 27,8 Delta-E zur naechsten Farbe
     (adult_changing), Kontrast 3,34 auf hell und 4,96 auf dunkel. */
  --f-wheelchair_charging:#0d9488;
  --f-climate_control:#0e7490;
  --f-prayer_room:#7c3aed;
  --f-quiet_room:#0891b2;
  --f-heart:#ff4d2e;

  --radius:14px;
  --radius-lg:22px;
  --shadow:0 8px 30px rgba(17,19,24,.10);
  --shadow-sm:0 2px 10px rgba(17,19,24,.08);
  --ring:0 0 0 3px rgba(29,78,216,.45);

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* first-visit install nudge (feature #6) — shared across pages via styles.css */
/* ============================================================
   Der Installationshinweis sitzt OBEN
   ------------------------------------------------------------
   Bis zum 10.09.2026 stand er unten. Oben ist richtiger, und zwar aus einem
   Grund, der nichts mit Geschmack zu tun hat: unten sitzt auf einem Telefon die
   Werkzeugleiste des Browsers, und auf iOS seit Version 15 sogar die
   Adresszeile. Ein Balken, der sich dorthin legt, verdeckt genau die Knoepfe,
   die man zum Installieren braucht.

   Was hier NICHT geht, und das ist wichtig zu wissen: die Leiste, die der
   Browser selbst zeigt, koennen wir nicht steuern. Kein Skript darf eine App
   ungefragt auf einen Startbildschirm legen; jeder Browser verlangt eine
   bewusste Geste, und das ist richtig so. Was wir duerfen, ist genau das hier -
   unser eigener Balken, der beim Antippen den echten Dialog des Browsers
   oeffnet.

   58 px ist die Hoehe der Kopfzeile, env(safe-area-inset-top) die Uhr und die
   Notch. Der Balken sitzt also UNTER der Kopfzeile, nicht darauf: beim ersten
   Versuch lag er mit top:12px genau ueber Wortmarke, Sprachwahl und Hamburger,
   und wer ihn nicht sofort wegklickte, kam an das Menue nicht mehr heran. Ein
   Hinweis, der die Bedienung blockiert, ist kein Hinweis mehr.
   ============================================================ */
#installNudge{ position:fixed; left:12px; right:12px; top:calc(58px + 8px + env(safe-area-inset-top)); z-index:3500; display:flex; justify-content:center; pointer-events:none; }
#installNudge .in-card{ min-width:0; pointer-events:auto; display:flex; align-items:center; gap:12px; max-width:520px; width:100%;
  background:#111318; color:#fff; border:2px solid #111318; border-radius:16px; padding:12px 14px; box-shadow:0 10px 34px rgba(0,0,0,.3); }
#installNudge .in-i{ display:flex; color:#f5b400; flex:0 0 auto; }
#installNudge .in-txt{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
#installNudge .in-txt b{ font:800 13.5px/1.25 var(--font-display); }
#installNudge .in-txt span{ font-size:12px; color:#c9cdd8; }
#installNudge .in-add{ flex:0 0 auto; border:0; background:var(--gold); color:#231a00; font:700 12.5px/1 var(--font-display);
  padding:10px 14px; border-radius:10px; cursor:pointer; min-height:40px; }
#installNudge .in-x{ flex:0 0 auto; border:0; background:none; color:#9aa2b1; font-size:22px; line-height:1; cursor:pointer; padding:2px 6px; }
#installNudge .in-x:hover{ color:#fff; }
/* Der Balken muss in ein Telefon passen - auch er.

   Gemessen am 10.09.2026 mit tools/pwa.test.mjs: bei 375 px stand das Kreuz
   zum Wegklicken bei x=407, also 32 px AUSSERHALB des Bildes. Man konnte den
   Hinweis sehen und nicht schliessen.

   Der Grund ist derselbe wie an drei anderen Stellen heute: ein Flex-Element
   schrumpft nicht unter seinen Inhalt, solange niemand min-width:0 sagt. Der
   Titel "Mapclusive zum Startbildschirm hinzufuegen" ist in einer Zeile
   breiter als jedes Telefon.

   Bemerkenswert daran: mein eigener Layouttest meldete diese Seite als sauber.
   Er kann den Balken nicht sehen, weil der erst nach `beforeinstallprompt`
   erscheint - und das loest ein Browser ohne Bildschirm nicht aus. Gefunden hat
   es erst der Test, der das Ereignis nachstellt. Ein gruener Test misst nur,
   was er misst. */
@media (max-width:520px){
  #installNudge .in-txt span{ display:none; }
  #installNudge .in-txt b, #iosNudge .in-txt b{ overflow-wrap:anywhere; }
  /* Zweizeilig: Text oben, Knopf und Kreuz darunter. Einzeilig gerechnet
     braucht die Karte mindestens 20 (Symbol) + 134 (Knopf) + 25 (Kreuz) +
     36 (Abstaende) + Text - und "Installieren" laesst sich nicht kuerzen. Bei
     375 px kam das Kreuz dadurch auf x=407 zu liegen, also ausserhalb des
     Bildes, und der Hinweis war nicht mehr wegzuklicken.
     Umbrechen statt quetschen: der Knopf wird dabei sogar groesser. */
  #installNudge .in-card, #iosNudge .in-card{ flex-wrap:wrap; }
  #installNudge .in-txt, #iosNudge .in-txt{ flex:1 1 100%; order:1; }
  #installNudge .in-i, #iosNudge .in-i{ display:none; }
  #installNudge .in-add, #iosNudge .in-add{ order:2; flex:1 1 auto; }
  #installNudge .in-x, #iosNudge .in-x{ order:3; flex:0 0 auto; min-width:44px; min-height:44px; }
}
/* Von oben herein, nicht von unten. Wer die Bewegung abbestellt hat, bekommt
   keine - der Balken ist dann einfach da. */
#installNudge, #iosNudge{ animation:nudgeIn .22s ease-out; }
/* -6 px, nicht -12. Der Balken sitzt 8 px unter der 58 px hohen Kopfzeile; bei
   -12 rutscht er waehrend der Bewegung auf 54 und liegt damit kurz UEBER ihr.
   Unsichtbar in 0,22 Sekunden, aber es ist genau die Art Detail, die man
   spaeter nicht mehr findet, wenn jemand die Kopfzeile hoeher macht.
   Gemeldet von tools/pwa.test.mjs, das genau dieses Uebereinanderliegen misst. */
@keyframes nudgeIn{ from{ transform:translateY(-6px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ #installNudge, #iosNudge{ animation:none; } }
/* iOS "Add to Home Screen" hint - Safari has no programmatic install, so this is
   instructional. Reuses the install-nudge look; the instruction text must STAY
   visible on small screens (unlike the Android nudge), because it is the point. */
#iosNudge{ position:fixed; left:12px; right:12px; top:calc(58px + 8px + env(safe-area-inset-top)); z-index:3500; display:flex; justify-content:center; pointer-events:none; }
#iosNudge .in-card{ min-width:0; pointer-events:auto; display:flex; align-items:center; gap:12px; max-width:520px; width:100%;
  background:#111318; color:#fff; border:2px solid #111318; border-radius:16px; padding:12px 14px; box-shadow:0 10px 34px rgba(0,0,0,.3); }
#iosNudge .in-i{ display:flex; color:#f5b400; flex:0 0 auto; }
#iosNudge .in-txt{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
#iosNudge .in-txt b{ font:800 13.5px/1.25 var(--font-display); }
#iosNudge .in-txt span{ font-size:12px; color:#c9cdd8; }
#iosNudge .in-add{ flex:0 0 auto; border:0; background:var(--gold); color:#231a00; font:700 12.5px/1 var(--font-display); padding:10px 14px; border-radius:10px; cursor:pointer; min-height:40px; }
#iosNudge .in-x{ flex:0 0 auto; border:0; background:none; color:#9aa2b1; font-size:22px; line-height:1; cursor:pointer; padding:2px 6px; }
#iosNudge .in-x:hover{ color:#fff; }

/* ===== Night mode — shared components (appbar, nav, dropdowns, buttons) =====
   The map page sets the colour variables; these fix the shared pieces that
   hard-code colours, so nothing is left unreadable on a dark background. */
body.nightmap .appbar{ background:#1e1f22; border-bottom-color:#33363c; }
body.nightmap .brandmark{ color:#eef0f4; }
/* The mark stays exactly as it is in light mode - black tile, white glyph, coral dot.
   It gets one addition in the dark: a hairline ring, because a #111318 tile on a
   #1e1f22 bar is very nearly invisible.

   Drawn as a box-shadow, not a border, for two reasons that both bit earlier attempts:
   the tile is box-sizing:border-box, so a 1px border would eat 2px of the 32px artwork;
   and it is overflow:hidden with a ::after dot bleeding past the bottom-right corner, so
   changing the box would move where that dot is clipped. A box-shadow sits outside the
   box, follows the 9px radius, and changes no geometry at all.
   Never set `background` here - the shorthand wipes the CSS logo image. */
body.nightmap .appbar .brandmark .mk{ box-shadow:0 0 0 1px rgba(255,255,255,.75); }
body.nightmap .appnav a.navlink{ color:#eef0f4; }
body.nightmap .appnav a.navlink:hover{ background:#2a2c31; }
body.nightmap .appnav a.navlink.cta{ background:#eef0f4; color:#161719; }
/* Same cobalt hover in the dark, not near-white -> white (no red on hover, 01.11.2026). */
body.nightmap .appnav a.navlink.cta:hover{ background:var(--accent); color:#fff; }
/* "Map" is the active link. In the dark bar a muddy navy tint (#20325e) read as
   a dead grey-blue box. A solid brand cobalt with white text is crisp, clearly
   the current page, and on-brand. */
body.nightmap .appnav a.navlink.primary{ background:var(--accent); color:#fff; }
body.nightmap .appnav a.navlink.primary:hover{ background:var(--accent-ink); color:#fff; }
/* Dropdowns — native selects AND the branded customsel (language, etc.) */
body.nightmap select, body.nightmap .langsel,
body.nightmap .customsel .csbtn{ background:#1e1f22; color:#eef0f4; border-color:#33363c; }
/* dropdown.js generates .csmenu > .csitem (NOT .cslist/.csopt — that was the bug
   that left the language list white with invisible grey text in dark mode). */
body.nightmap .customsel .csmenu{ background:#1e1f22; border-color:#33363c; box-shadow:0 12px 30px rgba(0,0,0,.55); }
body.nightmap .customsel .csitem{ color:#eef0f4; border-top-color:#33363c; }
body.nightmap .customsel .csitem:hover{ background:#2a2c31; }
body.nightmap .customsel .csitem.sel{ color:var(--accent); }
body.nightmap .customsel .cschev{ color:#c3c8d4; }
/* the custom chevron in selects is a dark SVG — swap to a light one */
body.nightmap select{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c3c8d4'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); }
/* Ghost buttons on dark */
body.nightmap .btn.ghost{ background:#1e1f22; color:#eef0f4; border-color:#33363c; }
body.nightmap .btn.ghost:hover{ background:#eef0f4; color:#161719; border-color:#eef0f4; }
body.nightmap .site-footer{ background:#0e0f11; }

/* Visible to a screen reader, invisible on screen. The standard clip-rect technique:
   not display:none and not visibility:hidden, because both remove the text from the
   accessibility tree as well - which is exactly what we do NOT want here. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
/* Overscroll fix: a hard rubber-band scroll reveals the HTML element's background
   (the "canvas"). Body stays beige for content; HTML gets the footer's ink so nothing
   beige shows past the footer. overscroll-behavior stops the bounce in Chrome/Firefox;
   min-height keeps short pages from showing ink before the footer. */
html{ background:var(--ink); overscroll-behavior-y:none; }
body{ min-height:100vh; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{ font-family:var(--font-display); letter-spacing:-.02em; line-height:1.08; }
a{ color:var(--accent); text-underline-offset:2px; }
img{ max-width:100%; display:block; }

/* ---------- Accessible focus for everything ---------- */
/* Concrete focus ring, not a blurry glow. A soft box-shadow halo (the old --ring)
   read as a fuzzy border, especially on the blue buttons. A solid outline is
   crisp, consistent everywhere, and clearer for keyboard users. */
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; box-shadow:none; }
/* Text fields already show a solid dark-blue border on focus, so the global glow
   ring on top made TWO borders. Keep just the border here — one clear indicator,
   still fully visible. (Buttons/links keep the ring; they have no border to rely on.) */
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible{ outline:none; box-shadow:none; border-color:var(--accent); }
body.nightmap input:focus, body.nightmap textarea:focus, body.nightmap select:focus{ border-color:#5b83f0; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- Buttons (all have hover + active + focus) ---------- */
.btn{
  --b:var(--accent); --bt:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1;
  padding:13px 20px; border-radius:12px; border:2px solid transparent;
  background:var(--b); color:var(--bt); cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  min-height:44px; /* touch target */
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); background:var(--accent-ink); border-color:var(--accent-ink); }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
/* Solid, contrasting outline on the button itself — no soft halo. On a filled
   button the dark ink outline stays visible against any brand colour. */
.btn:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px; box-shadow:none; }

.btn.gold{ --b:var(--gold); --bt:#241a00; }
.btn.gold:hover{ background:#ffd451; border-color:#ffd451; color:#231a00; }
.btn.hot{ --b:var(--hot); --bt:#fff; }
.btn.hot:hover{ background:var(--ink); border-color:var(--ink); }
.btn.ghost{ --b:transparent; --bt:var(--ink); border-color:var(--line); background:#fff; }
.btn.ghost:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow); }
.btn.dark{ --b:var(--ink); --bt:#fff; }
.btn.dark:hover{ background:var(--accent); border-color:var(--accent); }
.btn.block{ width:100%; }
.btn.sm{ padding:9px 14px; font-size:13.5px; min-height:38px; border-radius:10px; }
.btn.lg{ padding:16px 26px; font-size:17px; }
.btn[disabled]{ opacity:.55; cursor:default; transform:none !important; box-shadow:none !important; }

/* ---------- Top app bar (shared) ---------- */
.appbar{
  height:58px; background:var(--paper); border-bottom:2px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  position:sticky; top:0; z-index:1200;
}
.brandmark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.03em; }
.brandmark .mk{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:18px;
  /* Brand colours are LITERAL here on purpose. This used to be var(--ink), which dark
     mode redefines to near-white — so the mark inverted itself (white tile, dark glyph)
     and stopped matching the light-mode logo. A logo is a fixed asset, not a themed
     surface: black tile, white glyph, orange dot, in every theme. */
  background:#111318; position:relative; overflow:hidden;
}
/* Paint the brand mark in CSS so it's there on FIRST paint, before icons.js runs.
   Previously the icon was JS-injected, so every page load showed an empty box for
   a frame — the logo "blink" when switching pages. The identical JS-rendered SVG
   still lands on top; it's the same white circle, so there's no visible change,
   just no more flash. */
.appbar .brandmark .mk{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.3' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.brandmark .mk::after{ content:""; position:absolute; inset:auto -6px -8px auto; width:18px; height:18px; background:var(--hot); border-radius:50%; }
.brandmark b{ color:var(--hot); }
.appnav{ display:flex; align-items:center; gap:4px; }
/* The link's height came from its font metrics (padding + line-height), the toggle's
   from a fixed 36px box. Two different sources, so they never matched exactly. Both
   now declare the same height and centre their content in it. */
.appnav a.navlink{
  font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; height:36px;
  padding:0 12px; border-radius:9px; transition:background .12s;
}
.appnav a.navlink:hover{ background:#f1efe6; }
/* Knapp ueber der Telefonbreite (821 bis 960 px) enger setzen. Gemessen am
   30.09.2026: auf Ungarisch lief die Leiste bei 821 px schon heute 12 px aus dem
   Bild, und mit dem Zeichen "Ort vorschlagen" (Handy-Befund H8) auf Griechisch
   44 px. Kleinere Innenabstaende und eine Spur kleinere Schrift geben den Platz
   her, ohne dass ein Link verschwindet. */
@media (min-width:821px) and (max-width:960px){
  .appnav a.navlink{ padding:0 7px; font-size:13.5px; }
  .appnav .navtools{ margin-inline-start:8px; }
}
/* Day/night toggle in the header. Sized to the nav links' own optical height and
   given no border, so it reads as one of them rather than as a floating map control. */
/* A transparent border at rest was the wrong reading of "give it a border": it left
   the icon floating with nothing around it next to a filled nav link. It now carries
   a visible outline at all times, the same hairline the search field and the filter
   panels use, and darkens on hover and while pressed. */
/* --navicon-flaeche: die Ruheflaeche als Variable, nicht als Literal.
   19.09.2026. Der Kontoknopf soll beim Zeigen NUR seinen Rand aendern und
   seine Fuellung behalten. Ohne Variable muesste die Ausnahme den Farbwert
   wiederholen - je einmal fuer Tag und Nacht -, und zwei Kopien derselben
   Farbe driften beim ersten Umfaerben auseinander. So steht der Wert an einer
   Stelle, und die Ausnahme sagt nur "nimm die Ruheflaeche". */
.appnav .navicon{ --navicon-flaeche:#fff;
  width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto;
  border:2px solid var(--line); background:var(--navicon-flaeche); color:var(--ink); border-radius:9px;
  cursor:pointer; padding:0; margin-right:2px; transition:background .12s, color .12s, border-color .12s; }
.appnav .navicon:hover{ background:#f1efe6; border-color:var(--ink); }
.appnav .navicon:active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.appnav .navicon:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--ink); }
body.nightmap .appnav .navicon{ --navicon-flaeche:#1e1f22; color:#eef0f4; background:var(--navicon-flaeche); border-color:#33363c; }
body.nightmap .appnav .navicon:hover{ background:#2a2c31; border-color:#eef0f4; }
body.nightmap .appnav .navicon:active{ background:#eef0f4; color:#161719; border-color:#eef0f4; }
.appnav a.navlink.cta{ color:#fff; background:var(--ink); transition:background .12s, color .12s, transform .12s; }
/* Hover shifts to cobalt - a real, visible change (was coral until 01.11.2026;
   Tim: no red on hover, red is an alarm colour). Before that #111318 -> #000,
   i.e. near-black to black, which looked like nothing happened. */
.appnav a.navlink.cta:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); }
/* the map is what people come for — keep it the most visible link */
.appnav a.navlink.primary{ background:#e8edff; color:var(--accent); font-weight:700; }
.appnav a.navlink.primary:hover{ background:var(--accent); color:#fff; }
/* breathing room between the menu and the language / install controls */
/* Die Werkzeuggruppe rechts: Installieren, Tag/Nacht, Konto, Sprache.
   ---------------------------------------------------------------------------
   18.09.2026. Vorher trugen .cs-lang und #installBtn je einen eigenen
   margin-left:12px, der Rest lief mit gap:4px. Gemessen ergab das die Folge
   4, 4, 4, 4, 16, 4, 16 - und der Theme-Knopf stand ganz links, vor den Links,
   waehrend die drei anderen Werkzeuge rechts standen.

   Jetzt: ein Abstand innen, ein Abstand zwischen den Gruppen, kein Element mit
   eigenem Rand. margin-inline-start laeuft in Arabisch und Hebraeisch von
   selbst richtig herum - die zwei [dir="rtl"]-Regeln, die hier standen,
   entfallen ersatzlos. */
.appnav .navtools{ display:inline-flex; align-items:center; gap:6px; margin-inline-start:16px; }

/* EINE HOEHE FUER ALLE. Gemessen waren es drei: .navicon und die Links je 36,
   #installBtn 38 (aus .btn.sm), der Sprachwaehler 40. Tim: "jetzt ist der
   Knopf zum Sprache aendern etwas hoeher als die anderen."

   Die 36 gewinnt, weil sie die Zahl der Mehrheit ist und weil die Links sie
   aus ihren eigenen Schriftmassen beziehen - eine Leiste, in der die Knoepfe
   sich nach den Texten richten, bleibt auch dann ausgerichtet, wenn jemand
   die Schriftgroesse aendert.

   Auf Tablet und Telefon greifen weiter die 44 px weiter unten: dort ist die
   Hoehe eine Trefferflaeche und keine Frage der Ordnung. */
.appnav #installBtn{ min-height:36px; height:36px; padding:0 14px; }
.appnav .cs-lang .csbtn{ min-height:36px; height:36px; padding:0 12px; }

/* language switcher */
/* Corp-style dropdowns: custom chevron, spaced from the right edge */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235b606d'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
[dir="rtl"] select{ background-position:left 14px center; }

.langsel{
  font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--ink);
  border:2px solid var(--line); background-color:#fff; border-radius:9px; padding:8px 38px 8px 12px; cursor:pointer;
  transition:border-color .12s; min-height:40px;
}
.langsel:hover{ border-color:#cfccbf; }

/* Branded custom dropdown (dropdown.js) — styles the open list too */
.cs-native{ position:absolute !important; opacity:0; pointer-events:none; width:1px; height:1px; overflow:hidden; }
.customsel{ position:relative; }
.customsel.cs-lang{ display:inline-block; }
.csbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); border:2px solid var(--line); background:#fff; border-radius:11px; padding:11px 12px; cursor:pointer; min-height:44px; text-align:left; transition:border-color .12s; }
.csbtn:hover{ border-color:#cfccbf; }
.csbtn:focus-visible{ outline:none; box-shadow:none; border-color:var(--accent); }   /* single clean border, no blurry ring, never clipped */
/* ONE blue. The brand cobalt lives in --accent and nothing else may hard-code a blue.
   Dark mode lifts that single token (same hue, enough lightness to stay legible on the
   dark surfaces) so every blue on screen is still the same value. */
body.nightmap{ --accent:#4d7cf3; }
.customsel.open .csbtn{ border-color:var(--accent); }
.cslabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cschev{ display:flex; color:var(--muted); transition:transform .15s; flex:none; }
.customsel.open .cschev{ transform:rotate(180deg); }
.csmenu{ position:absolute; left:0; right:0; top:calc(100% + 5px); background:#fff; border:2px solid var(--ink); border-radius:12px; box-shadow:var(--shadow); z-index:3000; max-height:260px; overflow:auto; display:none; }
.customsel.open .csmenu{ display:block; }
.csitem{ padding:10px 12px; font-size:14px; cursor:pointer; border-top:1px solid var(--line); }
.csitem:first-child{ border-top:0; }
.csitem:hover{ background:#f4f2ea; }
.csitem.sel{ font-weight:700; color:var(--accent); }
/* Per-option icons (option[data-ic]). The glyph keeps its own facility colour, so it
   stays recognisable while the label takes the selected/hover colour around it. */
.csitem.has-ic, .cslabel.has-ic{ display:flex; align-items:center; gap:9px; }
.csico{ display:flex; flex:0 0 auto; }
.csico svg{ display:block; }
.cslabel.has-ic .cstext{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csitem .cstext{ min-width:0; }
/* Fixed glyph box so the labels line up in a column no matter how wide the icon is -
   a ragged left edge is exactly what makes a list slow to scan. */
.csitem.has-ic .csico, .cslabel.has-ic .csico{ width:18px; align-items:center; justify-content:center; }
.cs-lang .csbtn{ min-width:118px; min-height:40px; padding:8px 12px; border-radius:9px; font-weight:600; font-size:13.5px; }
.cs-lang .csmenu{ left:auto; right:0; min-width:150px; }
[dir="rtl"] .cs-lang .csmenu{ right:auto; left:0; }

/* hamburger (mobile) */
/* Handy-Befunde H1 und H2, 28.09.2026.
   H1, Tim: "Der Knopf oben rechts zum Aufklappen des Menues ist im Nachtmodus
   immer weiss, die drei Striche darin hellgrau - nicht zu erkennen."
   Gemessen am 30.09.: Hintergrund rgb(255,255,255), Striche rgb(238,240,244).
   Der Hintergrund war fest weiss, die Striche folgen var(--ink), und das ist
   nachts hell. Jetzt folgt die Flaeche dem Nachtmodus wie jeder .navicon.
   H2, am schmalen Rechnerfenster: Menueknopf 44 px, alle anderen Knoepfe 36.
   Jetzt 36 wie die anderen; mit dem Finger (pointer:coarse) werden alle 44. */
.hamb{ display:none; width:36px; height:36px; border:2px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
body.nightmap .hamb{ background:#1e1f22; border-color:#33363c; }
.hamb span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.hamb span::before,.hamb span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.hamb span::before{ top:-6px; } .hamb span::after{ top:6px; }

.mobilemenu{ display:none; position:fixed; inset:58px 0 auto 0; background:var(--paper); border-bottom:2px solid var(--ink); padding:8px; z-index:1150; flex-direction:column; gap:4px; }
.mobilemenu.open{ display:flex; }
.mobilemenu a{ font-family:var(--font-display); font-weight:600; padding:13px; border-radius:10px; text-decoration:none; color:var(--ink); }
.mobilemenu a:hover{ background:#f1efe6; }

/* ---------- Generic page layout ---------- */
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
.section{ padding:64px 0; }
.eyebrow{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--hot); }
.h-xl{ font-size:clamp(34px,6vw,64px); }
.h-lg{ font-size:clamp(26px,4vw,40px); }
.lead{ font-size:18px; color:var(--ink-2); }

.card{ background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.chipdot{ display:inline-block; width:10px; height:10px; border-radius:50%; }

/* ---------- Legal / long-form pages ---------- */
.legal{ max-width:820px; margin:0 auto; padding:56px 20px 48px; }
.legal h1{ font-size:clamp(28px,4vw,42px); margin:0 0 8px; }
.legal .upd{ color:var(--muted); font-size:13px; margin:0 0 26px; }
.legal h2{ font-size:20px; margin:32px 0 8px; }
.legal p, .legal li{ color:var(--ink-2); font-size:15px; line-height:1.7; }
.legal ul{ padding-left:20px; margin:8px 0; }
.legal a{ font-weight:600; }
.legal .note{ background:var(--paper); border:2px solid var(--ink); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--ink); }
/* Hinweis "nur die deutsche Fassung ist verbindlich" (25.09.2026) */
.legal .lgbind{ margin:0 0 22px; border-color:var(--gold, #c98a00); }
.legal .lglink{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--blue, #1d4ed8); text-decoration:underline; cursor:pointer; }
.legal .lgbind[hidden]{ display:none; }
.legal table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14px; }
.legal th, .legal td{ text-align:left; border-bottom:1px solid var(--line); padding:9px 8px; vertical-align:top; }
.legal th{ font-family:var(--font-display); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

/* ---------- Enterprise site footer (footer.js) ---------- */
.site-footer{ background:var(--ink); color:#c9cdd8; padding:48px 0 22px; margin-top:24px; }
.site-footer a{ color:#e7eaf1; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
/* minmax(0,1fr): forces the four menu columns to stay EXACTLY equal width, so the
   gaps between them are identical. Plain 1fr let a long link ("Contribute to
   OpenStreetMap") blow its track wider than the others and threw the spacing off. */
.ft-grid{ display:grid; grid-template-columns:1.6fr repeat(4,minmax(0,1fr)); gap:28px; }
.ft-col a, .ft-col .ft-link{ overflow-wrap:break-word; }
.ft-brand .brandmark{ color:#fff; margin-bottom:10px; }
/* Bilingual legal heading. The German half used to be half-size on the same baseline,
   which left the slash floating between two different type sizes. Keep both on one
   baseline, the second half lighter and only slightly smaller, so "Imprint / Impressum"
   reads as one title. (These legal pages have no <style> block of their own.) */
.imp-h1{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }
.imp-h1 .imp-alt{ font-size:.62em; font-weight:600; color:var(--muted); letter-spacing:0; }

.ft-brand .brandmark .mk{ background:#fff; color:#111318; }   /* same reason: var(--ink) went white in dark mode and the glyph vanished on the white tile */
.ft-brand .brandmark .mk::after{ background:var(--hot); }
.ft-brand p{ margin:0; font-size:13px; color:#9aa2b1; max-width:280px; line-height:1.6; }
.ft-col h4{ font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin:0 0 12px; }
.ft-col a, .ft-col .ft-link{ display:block; font-size:13.5px; padding:5px 0; }
.ft-link{ background:none; border:0; color:#e7eaf1; font:inherit; font-size:13.5px; cursor:pointer; text-align:left; padding:5px 0; }
.ft-link:hover{ color:#fff; text-decoration:underline; }
.ft-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid #2a2d36; margin-top:34px; padding-top:18px; font-size:12px; color:#9aa2b1; }
/* Sits under the tagline, but reads as a maker's mark, not more body copy:
   display font, a touch bolder and more muted — distinct without shouting in caps. */
.ft-love{ display:inline-flex; align-items:center; gap:6px; margin-top:14px !important;
  color:#8b93a3; font-family:var(--font-display); font-weight:700; font-size:12px; }
.ft-love .hh{ display:inline-flex; color:var(--hot); }
.ft-love .hh svg{ fill:currentColor; }   /* filled, not an outline — it's a heart, not a button */
@media (max-width:900px){ .ft-grid{ grid-template-columns:1fr 1fr; } .ft-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .ft-grid{ grid-template-columns:1fr; } }

/* ---------- Cookie / privacy banner ---------- */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:4000;
  max-width:880px; margin:0 auto;
  background:var(--paper); border:2px solid var(--ink); border-radius:16px; box-shadow:var(--shadow);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  animation:ckIn .38s cubic-bezier(.4,0,.2,1);
}
.cookiebar.hiding{ transform:translateY(150%); opacity:0; }
@keyframes ckIn{ from{ transform:translateY(150%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.cookiebar .ck-txt{ font-size:13px; color:var(--ink-2); flex:1; min-width:240px; line-height:1.5; }
.cookiebar .ck-txt b{ color:var(--ink); }
.cookiebar .ck-acts{ display:flex; gap:8px; flex:none; }
@media (max-width:520px){ .cookiebar{ left:10px; right:10px; bottom:10px; } .cookiebar .ck-acts{ width:100%; } .cookiebar .ck-acts .btn{ flex:1; } }

/* ---------- Toast (shared) ---------- */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px;
  z-index:4000; opacity:0; transition:all .25s; pointer-events:none; max-width:88vw; text-align:center;
  box-shadow:var(--shadow);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- RTL ---------- */
[dir="rtl"] .brandmark .mk::after{ inset:auto auto -8px -6px; }
[dir="rtl"] .eyebrow{ letter-spacing:0; }

/* ---------- Telefon und Tablet ---------- */

/* Die Kopfzeile klappt hier zusammen. Dass sie das TUT, ist neu: die Regeln gab
   es seit Langem, sie haben nur nie gegriffen.

   Der Grund war Spezifitaet, nicht Reihenfolge. Die Grundregel oben heisst
   `.appnav a.navlink` (zwei Klassen plus ein Element), hier stand
   `.appnav .navlink` (zwei Klassen). Der Sammelpunkt der Grundregel ist hoeher,
   also gewann `display:inline-flex` auch innerhalb dieser Abfrage - egal, dass
   sie spaeter in der Datei steht. Ergebnis: auf einem 375-px-Telefon standen
   das volle Menue UND der Hamburger nebeneinander, die Leiste war 569 px breit,
   und die ganze Seite liess sich seitwaerts wegwischen. Auf einer Karte ist das
   besonders bitter, weil man dann nicht mehr merkt, ob sich die Karte oder die
   Seite bewegt.

   Gemessen mit tools/device-report.mjs, das die Seite in einem echten Chromium
   bei 320, 375, 768, 1024 und 1280 px oeffnet. Deshalb tragen die Regeln hier
   jetzt dieselbe Form wie die Grundregeln, die sie ausser Kraft setzen sollen. */
@media (max-width:820px){
  .appnav a.navlink{ display:none; }
  .hamb{ display:flex; }

  /* Der Knopf "App installieren" in der Kopfzeile bleibt hier verborgen.

     Er ist normalerweise unsichtbar und taucht erst auf, wenn der Browser
     meldet, dass eine Installation moeglich ist. Genau in diesem Moment war die
     Seite auf einem 375-px-Telefon kaputt: der Knopf ist 118 px breit, die
     Kopfzeile hatte keinen Platz dafuer, das Dokument wuchs auf 460 px, und die
     ganze Seite liess sich seitwaerts wegwischen. Gemessen mit
     tools/pwa.test.mjs.

     Das Bittere daran: der Fehler zeigte sich NUR bei installierbaren Browsern,
     also genau bei den Menschen, denen man die App anbieten wollte. Mein
     Layouttest sah ihn nie, weil er das Ereignis nicht ausloest.

     Auf dem Telefon uebernimmt der Balken oben diese Aufgabe, und Chrome hat
     den Punkt zusaetzlich in seinem eigenen Menue. Auf dem Schreibtisch, wo
     Platz ist, bleibt der Knopf. */
  .appnav #installBtn{ display:none !important; }

  /* Der Aufruf zum Handeln bleibt sichtbar - er ist der einzige Weg zu einem
     Gespraech, und ihn im Hamburger zu verstecken hiesse, ihn abzuschaffen. */
  .appnav a.navlink.cta{ display:inline-flex; }
}

/* Unter 560 px wird auch das zu viel. Gerechnet fuer 375 px:
   Wortmarke 156 + Tag/Nacht 44 + Sprache 44 + Hamburger 44 = 288, plus Abstaende
   und Rand. Der Aufruf zum Handeln mit 89 px passt da nicht mehr dazu, ohne dass
   etwas herausragt - und er steht im Hamburger gleich mit drin. */
@media (max-width:560px){
  .appnav a.navlink.cta{ display:none; }
  /* Die Wortmarke darf schrumpfen, statt den Rest hinauszuschieben. */
  .brandmark .wm{ font-size:16px; }
}

/* Fingerkuppen, nicht Mauszeiger.

   44 px ist Apples Zahl, Google nennt 48. Auf einer Karte fuer Menschen mit
   Rollator, Kinderwagen am Arm oder zitternden Haenden ist ein 36-px-Knopf
   keine Schoenheitsfrage. Nur auf Geraeten ohne genauen Zeiger - eine Maus
   trifft auch 36 px, und am Schreibtisch wuerde alles unnoetig gross. */
@media (pointer:coarse){
  .appnav .navicon,
  .langsel,
  .hamb{ min-height:44px; min-width:44px; }
  .appnav .navicon{ height:44px; width:44px; }
  .mobilemenu a{ padding:15px 13px; }

  /* Die Wortmarke fuehrt zurueck auf die Karte, ist also ein Ziel wie jedes
     andere. Sie war 32 px hoch. */
  .brandmark{ min-height:44px; }
  /* Der sichtbare Sprachknopf ist .csbtn; das native <select> ist versteckt und
     44 px darauf zu setzen aendert nichts. Oben steht min-height:40px, hier
     wird sie ueberschrieben. */
  .cs-lang .csbtn{ min-height:44px; }
  /* Handy-Befund H2, 28.09.2026: "Alle Knoepfe in der oberen Leiste muessen
     dieselbe Hoehe haben." Gemessen am 30.09. bei 390 px: Sprache 36 px, alle
     anderen 44. Die Regel eine Zeile hoeher kam nicht an, weil
     `.appnav .cs-lang .csbtn{ height:36px }` spezifischer ist (0,3,0 gegen
     0,2,0) und obendrein eine feste Hoehe setzt. Also in derselben Form. */
  .appnav .cs-lang .csbtn, .appnav #installBtn{ min-height:44px; height:44px; }
  /* Fusszeile: die Spaltenlinks standen mit 31 px Hoehe dicht untereinander -
     die Stelle, an der man auf "Impressum" tippt und "AGB" bekommt. */
  /* `display:flex`, nicht `inline-flex`. Der erste Versuch nahm inline-flex und
     machte die Links damit zu Inline-Elementen: sie flossen nebeneinander in
     Reihen, statt untereinander zu stehen, und aus einer Fussleiste mit vier
     Spalten wurde ein Absatz. Die Grundregel oben sagt `display:block` - eine
     groessere Trefferflaeche darf die Anordnung nicht mitaendern. */
  .ft-col a, .ft-col .ft-link{ min-height:44px; display:flex; align-items:center; padding:5px 0; }
  /* Der sichtbar gebliebene Aufruf im Kopf, auf dem Tablet der einzige Link
     dort. Seine 36 px kamen aus einer festen Hoehe weiter oben. */
  .appnav a.navlink{ min-height:44px; height:auto; }
}

/* Der Sprachwaehler im Kopf, schmal gerechnet.

   Gemessen bei 375 px: Wortmarke 137 + Tag/Nacht 44 + Sprache 118 + Hamburger 44
   plus Abstaende und 2x16 Rand ergeben 383 px. Sechs Pixel zu viel, und schon
   laesst sich die ganze Seite seitwaerts wischen. Bei 320 px fehlten 61.

   Statt den Namen abzuschneiden ("Deuts...") zeigt der Knopf hier das Kuerzel,
   das dropdown.js mitfuehrt. Die aufgeklappte Liste bleibt vollstaendig - wer
   seine Sprache sucht, sucht sie im Klartext. */
@media (max-width:560px){
  .customsel.cs-lang .cslabel{ display:none; }
  .customsel.cs-lang .csbtn::before{
    content:attr(data-code);
    font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.02em;
  }
  /* min-width:118px oben ist auf die breiteste Sprachbezeichnung gerechnet.
     Steht dort nur noch "DE", muss die Zahl mit - sonst bleibt der Knopf so
     breit wie vorher und die ganze Uebung war umsonst. Genau das war beim
     ersten Versuch der Fall: Beschriftung ausgeblendet, Breite unveraendert. */
  .customsel.cs-lang .csbtn{ min-width:0; padding-left:12px; padding-right:10px; gap:4px; }
  .customsel.cs-lang .cschev{ flex:0 0 auto; }
}
@media (max-width:400px){
  .appbar{ padding-left:12px; padding-right:12px; }
}
/* Ein iPhone SE der ersten Generation ist 320 px breit. Dort fehlten zuletzt
   noch fuenf Pixel: Wortmarke 137 + Tag/Nacht 44 + Sprache 66 + Hamburger 44
   plus Abstaende und 2x12 Rand. Die Wortmarke gibt sie her, ohne dass etwas
   Wichtiges verschwindet - das Zeichen bleibt, nur der Schriftzug wird kleiner. */
@media (max-width:360px){
  .brandmark{ font-size:14px; gap:6px; }
  /* 12 px Abstand vor dem Sprachwaehler sind hier ein Zwoelftel des freien
     Platzes. Gerechnet fuer 320 px: 12 Rand + 112 Wortmarke + 44 + 4 + 66 + 44
     + 12 Rand = 294. Vorher waren es 333 und die Seite lief ueber.

     Seit dem 18.09.2026 sitzen die Werkzeuge in .navtools; der Abstand liegt
     dort und nicht mehr an zwei einzelnen Elementen. Die Rechnung aendert das
     nicht: es ist derselbe eine Abstand, nur an einer Stelle. Auf dieser
     Breite sind die Links ohnehin ausgeblendet, es bleibt also die Gruppe
     neben der Wortmarke - und zwischen zwei Dingen braucht es keine 16 px, um
     zu zeigen, dass es zwei sind. */
  .appnav .navtools{ margin-inline-start:4px; gap:4px; }
}

/* H12 (Handy-Befund vom 30.09.2026, Tims Ja am 08.10.2026): unter 360 px
   verschwindet der Schriftzug neben dem Zeichen, das Zeichen bleibt und fuehrt
   weiter zur Karte. Gemessen am 08.10. auf der Karte bei 320 px: Zeichen und
   Schriftzug 12 bis 132, Werkzeuge 136 bis 298, Menue bis 346 - die Seite war
   26 px zu breit und das Telefon zoomte sie auf 92 %. Seit dem Kontoknopf
   (44 px) reicht die kleinere Schrift von oben nicht mehr. Der Schriftzug wird
   nicht entfernt, sondern nur unsichtbar gesetzt: Vorleser sagen weiter
   "Mapclusive", und die Trefferflaeche des Links bleibt 44 px hoch. */
@media (max-width:359px){
  .appbar .brandmark{ position:relative; gap:0; }
  .appbar .brandmark .wm{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
}

/* Filterchips und die Griffleiste am Kartenblatt.

   Die Chips waren 34 px hoch bei 10.5 px Schrift. Das ist die Groesse, bei der
   ein Mensch mit Kinderwagen am Arm danebentippt und dann glaubt, die Karte sei
   kaputt. Die Griffleiste war 44x5 px - sichtbar als Strich, aber als Ziel eine
   Linie. Sie bleibt optisch ein Strich und bekommt nur ihre Trefferflaeche. */
@media (pointer:coarse){
  .chip{ min-height:44px; padding:8px 12px; font-size:12.5px; }
  /* Der Balken selbst. Sein Knopf war 40 px hoch und sein Kreuz 25x26 - also
     ausgerechnet der Hinweis, der zum Antippen einlaedt, war zu klein zum
     Antippen. Sichtbar erst, seit der Bericht das Ereignis nachstellt. */
  #installNudge .in-add, #iosNudge .in-add,
  #installNudge .in-x,   #iosNudge .in-x{ min-height:44px; min-width:44px; }
  .appnav #installBtn{ min-height:44px; }
  /* Zustimmen und Ablehnen muessen gleich gross und gleich leicht zu treffen
     sein. Ein kleineres "Nur notwendige" waere ein dunkles Muster. */
  .cookiebar .btn{ min-height:44px; }
  .fgall, #facAll{ min-height:44px; padding:6px 10px; font-size:12px; }
  .handle{ position:relative; }
  .handle::after{ content:""; position:absolute; left:-40px; right:-40px; top:-18px; bottom:-18px; }
}