/* Kartenansicht. Ohne Fremdbibliothek, ohne eingebettetes Stilblatt:
   die Inhaltsrichtlinie erlaubt nur 'self', also keine style-Attribute im HTML. */

:root {
  --grund: #f7f5f2;
  --feld: #ffffff;
  --rand: #ddd6cc;
  --schrift: #23201c;
  --schrift-leise: #6d655b;
  --betont: #2f6f4e;
  --plan: #efece6;
  --zone: #e3ddd2;
  --zone-strich: #b9ae9c;
  --hg-haus: #e2dcd1;
  --hg-haus-kante: #cec6b7;
  --hg-strasse: #ffffff;
  --hg-weg: #c8c0b1;
  --hg-gruen: #dde5cf;
  --hg-wasser: #cfdce8;
  --hg-wasserlinie: #9dbdd8;
  --hg-platz: #e9e5dc;
  --hg-schrift: #4a443b;
  --hg-saum: #ffffff;
  --warnung: #b3261e;      /* Kontrast 6.5 auf --feld */
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);

  /* ---------- Abstaende ----------
     Vorher standen zwanzig verschiedene Werte im Blatt — .05, .15, .2, .25,
     .3, .35, .4, .45, .5, .55, .6, .7, .8, .9, 1, 1.1, 1.2, 1.25, 1.5, 1.9 —
     jede Stelle hatte ihren eigenen erfunden. Daher kam die Unruhe: nichts
     stand auf einer Linie, weil es keine gab.

     Vier Sprossen auf einem Raster von vier Bildpunkten reichen. Wer eine
     fuenfte braucht, braucht meist keine, sondern hat sich vertan. */
  --raum-1: .25rem;   /*  4px  innerhalb eines Bedienelements */
  --raum-2: .5rem;    /*  8px  zwischen eng Zusammengehoerigem */
  --raum-3: .75rem;   /* 12px  zwischen Feldern */
  --raum-4: 1rem;     /* 16px  zwischen Gruppen */
  --raum-5: 1.5rem;   /* 24px  zwischen Bereichen */

  /* Das waagerechte Polster aller drei Spalten. Eine Zahl, damit die
     Beschriftungen von links, Mitte und rechts auf derselben Linie sitzen. */
  --polster-x: 1rem;
}

/* Das Schema haengt an data-theme am Wurzelelement. thema.js setzt es vor dem
   ersten Zeichnen — entweder aus der gespeicherten Wahl oder aus der
   Einstellung des Systems. So gibt es nur EINEN dunklen Block, der nicht mit
   einer zweiten Fassung auseinanderlaufen kann. */
:root[data-theme="dark"] {
    --grund: #16150f;
    --feld: #1f1d17;
    --rand: #35322a;
    --schrift: #ece7dd;
    --schrift-leise: #9b9184;
    --betont: #6db38a;
    --plan: #1a180f;
    --zone: #262319;
    --zone-strich: #4a4536;
    --hg-haus: #2a2720;
    --hg-haus-kante: #383429;
    --hg-strasse: #46412f;
    --hg-weg: #3a3628;
    --hg-gruen: #232a1c;
    --hg-wasser: #1e2833;
    --hg-wasserlinie: #2c4256;
    --hg-platz: #221f18;
    --hg-schrift: #c2b8a6;
    --hg-saum: #14130d;
    --warnung: #e6837c;    /* Kontrast 6.3 auf --feld */
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

/* ---------- hidden heisst hidden ----------
   Sobald eine Regel einem Element ein eigenes display gibt, ueberstimmt sie
   das [hidden] des Browsers — und die Oberflaeche schaltet dann ein Attribut
   um, das nichts mehr bewirkt. Das ist dreimal passiert, jedesmal unbemerkt:
   alle fuenf Reitertafeln standen untereinander statt einzeln (auf dem
   Telefon wurde die Tafel dadurch 3100 Bildpunkte hoch), und ein leerer
   Streifen "Pflege" stand auch fuer Besucher da, die gar nichts pflegen
   duerfen.

   Es einzeln nachzutragen hiesse, beim naechsten Mal wieder daran denken zu
   muessen. Also einmal fuer alle — das ist genau der Fall, fuer den es
   !important gibt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.lade, .fehler {
  margin: 3rem auto;
  max-width: 34rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--feld);
  color: var(--schrift-leise);
}
.fehler { border-color: var(--warnung); color: var(--warnung); }
.fehler code { display: block; margin-top: .5rem; font-size: .85em; opacity: .8; word-break: break-all; }

/* Feste Hoehe, nicht min-height: die Kartenspalte braucht eine bestimmte
   Hoehe. Sonst zieht das SVG seine Hoehe aus dem Seitenverhaeltnis der
   viewBox, waehrend die viewBox aus der Hoehe berechnet wird — das schaukelt
   sich zu einer Zeichenflaeche von mehreren tausend Pixeln auf. */
.huelle { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---------- Kopf ---------- */

/* Der Kopf einer Anwendung, nicht der eines Dokuments.

   Vorher war er 122 px hoch und nahm 16,9 % des Fensters, auf dem Telefon
   242 px und 29,8 % — fast ein Drittel, bevor die Karte anfing, bei einem
   Werkzeug, dessen Zweck das Erfassen vor Ort ist. Ursache war nicht die
   Schriftgroesse, sondern die Anordnung: Titel und Laufzeit uebereinander,
   die Bereichsleiste per `order` und `width: 100%` in eine eigene volle
   Zeile gezwungen, und alles mit demselben Gewicht.

   Jetzt eine Reihe, drei Zonen. Die mittlere darf schrumpfen (minmax mit 0),
   sonst schoebe eine lange Bereichsliste die Knoepfe aus dem Bild. */
.kopf {
  /* Flex und nicht Raster, und das ist der Kern: eine Rasterspalte mit `auto`
     nimmt sich ihre volle Inhaltsbreite und laeuft ueber den Rand, statt
     umzubrechen — gemessen liefen die Bereiche bei 800 px genau so aus dem
     Bild. Flex mit Umbruch weicht sauber in eine zweite Reihe aus, und das
     ist hier die richtige Aufgabe des Platzmangels.

     Die Reihenfolge des Nachgebens ist die Aussage: der Titel weicht zuerst
     (er ist Identitaet, man liest ihn einmal), dann brechen die Bereiche um,
     die Knoepfe weichen nie. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Mehr Luft, in beide Richtungen. Vorher .4rem/1rem und .5rem Polster -
     drei Gruppen in 49 px, davon 32 px Knopfhoehe. Das war nicht dicht
     gearbeitet, das war eng. */
  gap: .5rem 2rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--rand);
  background: var(--feld);
}
.kopf-titel  { flex: 1 1 10rem; }
/* Drei Zonen, nicht drei Nachbarn: wer man gerade ansieht (links), wohin man
   springen kann (Mitte-rechts), und was die Anwendung betrifft (ganz rechts).
   Vorher standen Bereichsmarken und Abmelden-Knopf unmittelbar nebeneinander
   und mit gleichem Gewicht - zwei voellig verschiedene Dinge in einer Reihe. */
.bereichsnavigation { flex: 0 1 auto; margin-left: auto; }
.kopf-knoepfe { flex: none; }

/* Titel und Laufzeit UNTEREINANDER.
   Sie standen nebeneinander — das sparte eine Zeile und war der Grund, warum
   die Kopfzeile gedraengt wirkte: gemessen 49 px Gesamthoehe, Name (16,8 px)
   und Laufzeit (12,8 px) auf derselben Grundlinie, 24 px auseinander. Damit
   liest sich die Laufzeit wie eine Fortsetzung des Namens statt als seine
   Unterzeile, und der Name verliert seinen Rang.

   Raster statt Spalten-Flex, weil die Zustandsmarke ("Entwurf") NEBEN den
   Namen gehoert und nicht zwischen Name und Laufzeit — die Reihenfolge im
   Baum gibt das sonst so vor. minmax(0,auto) fuer die erste Spalte, damit
   ein langer Name kuerzt statt die Zeile aufzublaehen; der volle steht im
   title-Attribut. */
.kopf-titel {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-areas: "name marke" "zeile zeile";
  align-items: baseline;
  column-gap: .55rem;
  row-gap: .1rem;
  justify-content: start;
  min-width: 0;
}
.kopf h1 { grid-area: name; }
.kopf-zustand { grid-area: marke; }
.kopf-zeile { grid-area: zeile; }
.kopf h1 {
  margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopf-zeile {
  margin: 0; color: var(--schrift-leise); font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.kopf-hinweis {
  margin: 0; color: var(--schrift-leise); font-size: .8rem;
  max-width: 24rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Leer heisst weg, nicht nur unsichtbar: ein Element, das meistens nichts
   sagt, soll auch keinen Abstand beanspruchen. */
.kopf-hinweis:empty { display: none; }

/* Nicht oeffentlich: das gehoert neben den Namen und nicht ans Ende. In der
   Warnfarbe, weil es eine Einschraenkung ist und keine Angabe - aber ohne
   Ausrufezeichen, denn ein Entwurf ist ein normaler Arbeitszustand. */
.kopf-zustand {
  margin: 0; flex: none;
  padding: .1rem .4rem;
  border: 1px solid var(--warnung); border-radius: 999px;
  color: var(--warnung); font-size: .7rem; line-height: 1.4;
  white-space: nowrap;
}
/* Bleibt auch im verdichteten Kopf stehen. Die Laufzeit darf weichen, das ist
   eine Angabe; "nicht oeffentlich" ist eine Einschraenkung, und die
   auszublenden, sobald jemand zu arbeiten beginnt, waere genau falsch
   herum. */

/* Die Veranstaltungswahl steht bei den Sprungmarken - und sieht aus wie
   eine. Sie sass vorher mit eckigen Ecken und eigener Hoehe zwischen lauter
   runden Marken; das sah aus, als gehoerte sie nicht dazu.

   Der Pfeil kommt als Hintergrundbild, weil appearance:none den eigenen des
   Browsers entfernt - ohne Ersatz saehe das Feld aus wie ein Textfeld, und
   dass es aufklappt, wuesste niemand. Als Data-URI, damit keine zusaetzliche
   Anfrage entsteht und die Inhaltsrichtlinie nichts erlauben muss. */
.kopf-wahl {
  max-width: 14rem;
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center;
  padding: var(--raum-1) 1.7rem var(--raum-1) var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--grund);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239b9184' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: .6rem;
  color: var(--schrift);
  font: inherit; font-size: .8rem; line-height: 1.3;
  cursor: pointer;
  text-overflow: ellipsis;
}
.kopf-wahl:hover { border-color: var(--betont); color: var(--betont); }
.kopf-wahl:focus-visible { outline: 2px solid var(--betont); outline-offset: 1px; }

/* Eine Vorliebe wiegt weniger als ein Arbeitsschritt. Quadratisch, nur das
   Zeichen — der Begriff steht fuer die Vorlesehilfe daneben. */
.knopf-symbol { width: 2rem; padding: 0; display: inline-grid; place-items: center; }
.schema-zeichen {
  width: .95rem; height: .95rem; border-radius: 50%;
  border: 1.5px solid currentColor;
  /* Halbmond: die eine Haelfte gefuellt. Sagt "Helligkeit" ohne Bilddatei
     und ohne Zeichensatz, der nicht geladen wird. */
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* Verdichtet, sobald gearbeitet wird: ist ein Stand gewaehlt, hat man den
   Namen der Veranstaltung laengst gelesen, und der Platz gehoert der Karte.
   Nur die Laufzeit geht, nie der Titel — sonst wuesste man nicht mehr,
   worin man steht. */
.kopf-eng .kopf-zeile,
.kopf-eng .kopf-hinweis { display: none; }
.kopf-eng .kopf { padding-top: .35rem; padding-bottom: .35rem; }

/* Sprungziele. Bei vielen Bereichen darf die Leiste umbrechen statt die
   Kopfzeile aufzuschieben. */
.bereichsnavigation {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-width: 0;
}
/* Die Wahl der Veranstaltung steht vor den Sprungmarken: sie wechselt den
   ganzen Plan, die Marken springen nur darin herum. Im Baum steht sie
   hinten, weil sie aus dem HTML kommt und die Marken erzeugt werden. */
.kopf-wahl { order: -1; }
/* Bewusst weiter umbrechend und NICHT scrollbar. Eine scrollbare Leiste hat
   in diesem Projekt schon einmal zwei von fuenf Reitern versteckt und wurde
   deshalb zurueckgenommen; ein Sprungziel, das man nicht sieht, gibt es
   nicht. Lieber eine zweite Reihe als ein verstecktes Ziel. */
.sprung {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--grund);
  color: var(--schrift);
  font: inherit; font-size: .8rem; line-height: 1.3;
  cursor: pointer;
}
.sprung:hover { border-color: var(--betont); color: var(--betont); }
.sprung:focus-visible { outline: 2px solid var(--betont); outline-offset: 1px; }
/* Die Flaeche mit dem Startfokus traegt einen Punkt vor dem Namen. */
.sprung-start::before { content: '●'; color: var(--betont); font-size: .62em; }

.sprung.ist-hier {
  border-color: var(--betont);
  background: color-mix(in srgb, var(--betont) 14%, transparent);
  color: var(--betont);
  font-weight: 600;
}

/* ---------- Spalten ---------- */

.spalten {
  display: grid;
  grid-template-columns: var(--spalte-links) minmax(0, 1fr) var(--spalte-rechts);
  flex: 1;
  min-height: 0;
}

/* Ein Sprungziel, das eine Strecke ist, sieht anders aus als eine Flaeche:
   gestrichelter Rand, wie die Strecke selbst auf der Karte. Sonst stuende
   "Zugweg" neben "Rathausplatz", als waere beides dasselbe. */
/* Die Umrandung bleibt durchgezogen. Sie war gestrichelt, weil eine Strecke
   auf der Karte gestrichelt gezeichnet wird - das Zeichen davor sagt das aber
   schon. Zweimal dasselbe, und gestrichelt liest sich obendrein wie
   "vorlaeufig": die aktuelle Strecke sah aus wie ein Entwurf. */
.sprung-strecke::before {
  content: ""; flex: none;
  width: .8rem; height: 0;
  border-top: 2px dashed currentColor;
  opacity: .75;
}

/* ---------- Ein- und Ausklappen ----------
   Beide Seitenspalten lassen sich wegklappen; die Karte nimmt den Platz.
   Ganz auf null, nicht auf eine schmale Leiste: eine Leiste, die nur einen
   Knopf traegt, kostet Breite und gibt nichts zurueck. Damit der Weg zurueck
   trotzdem immer da ist, haengen die Griffe an der KARTE.

   Die Breiten stehen in Marken, damit das Raster sie nur einmal nennen muss
   und das Umschalten eine Zeile ist. */
:root { --spalte-links: 17rem; --spalte-rechts: 19rem; }
.pflegt { --spalte-rechts: 27rem; }

@media (min-width: 60.001rem) {
  .spalten {
    grid-template-columns:
      var(--spalte-links) minmax(0, 1fr) var(--spalte-rechts);
    transition: grid-template-columns .22s ease;
  }
  .links-zu  { --spalte-links: 0rem; }
  .rechts-zu { --spalte-rechts: 0rem; }
  /* Eine zugeklappte Spalte ist nicht nur schmal, sondern aus dem Weg: kein
     Inhalt, der herausragt, und nichts, was der Tabulator noch findet. */
  .links-zu .seite,
  .rechts-zu .detail,
  .rechts-zu .pflegetafel { border: 0; overflow: hidden; }
}

/* Wer Bewegung nicht mag, bekommt den Sprung ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
  .spalten { transition: none; }
}

.klappgriff {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 3.2rem; padding: 0;
  border: 1px solid var(--rand); background: var(--feld);
  color: var(--schrift-leise); cursor: pointer;
  box-shadow: var(--schatten);
}
.klappgriff-links  { left: 0;  border-left: 0;  border-radius: 0 7px 7px 0; }
.klappgriff-rechts { right: 0; border-right: 0; border-radius: 7px 0 0 7px; }
.klappgriff:hover { color: var(--schrift); background: var(--plan); }
.klappgriff:focus-visible { outline: 2px solid var(--betont); outline-offset: 2px; }

/* Ein Winkel aus zwei Strichen, gedreht: er zeigt immer dorthin, wohin der
   Klick die Spalte bewegt. */
.klappgriff-pfeil {
  width: .38rem; height: .38rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transition: transform .22s ease;
}
.klappgriff-links  .klappgriff-pfeil { transform: rotate(45deg)  translate(1px, -1px); }
.klappgriff-rechts .klappgriff-pfeil { transform: rotate(-135deg) translate(1px, -1px); }
.links-zu  .klappgriff-links  .klappgriff-pfeil { transform: rotate(-135deg) translate(1px, -1px); }
.rechts-zu .klappgriff-rechts .klappgriff-pfeil { transform: rotate(45deg)  translate(1px, -1px); }

/* Im schmalen Fenster steht ohnehin alles untereinander — dort waere das
   Klappen sinnlos und der Griff nur im Weg. */
@media (max-width: 60rem) { .klappgriff { display: none; } }

/* Zum Bearbeiten braucht der Datensatz Platz. In der Lesespalte von 19rem
   stand ein Formular mit siebenundvierzig Bedienelementen als endlose Rolle;
   ein Eingabefeld war dort keine 12rem breit. */
/* Gelesen und bearbeitet wird derselbe Stand — beide Tafeln nebeneinander
   waeren dieselben Angaben zweimal, und welche gilt, waere nicht zu sehen. */
.pflegt .detail { display: none; }

.seite, .detail {
  border-right: 1px solid var(--rand);
  background: var(--feld);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
}
.detail { border-right: 0; border-left: 1px solid var(--rand); padding: var(--raum-4) var(--polster-x); }

.seite { display: flex; flex-direction: column; }
.block { padding: var(--raum-4) var(--polster-x); border-bottom: 1px solid var(--rand); }
.block-wachsend { flex: 1; border-bottom: 0; }
.block-titel {
  margin: 0 0 var(--raum-2);
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--schrift-leise);
}
.zahl { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- Pflege und Anmeldung ---------- */

.kopf-knoepfe { display: flex; gap: .4rem; align-self: center; flex: none; }

.formular { display: grid; gap: var(--raum-3); }
.feld { display: grid; gap: var(--raum-1); }
.feld > span { font-size: .78rem; color: var(--schrift-leise); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  /* Acht Bildpunkte senkrecht ergeben ein Bedienelement von rund 35 — hoch
     genug, um es mit dem Finger zu treffen. */
  padding: var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
  font-size: .875rem;
}
.feld textarea { resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--betont); outline-offset: -1px; border-color: var(--betont);
}

.haken { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.haken input { accent-color: var(--betont); margin: 0; }

.formular-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
/* Die Warnfarbe kommt aus der Marke, nicht fest aus dem Blatt. Fest
   verdrahtet war sie #b3462f und erreichte im dunklen Schema nur 3,08
   Kontrast — ausgerechnet an der Stelle, an der steht, warum etwas NICHT
   gespeichert wurde. Ueber die Marke sind es 6,34 dunkel und 6,54 hell. */
.formular-meldung { margin: 0; min-height: 1.1em; font-size: .8rem; color: var(--warnung); }

.knopf-tat { border-color: var(--betont); color: var(--betont); font-weight: 600; }
.knopf-warnung { border-color: var(--warnung); color: var(--warnung); }

.pflege-leiste { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
/* Kein Rand am Absatz: den Abstand macht das Raster der Flaeche, sonst
   addieren sich beide. */
.pflege-hinweis { margin: 0; font-size: .82rem; color: var(--schrift-leise); line-height: 1.5; }
.pflege-wartet { color: var(--betont); font-weight: 600; }
/* Die Sitzung ist beendet, das Formular steht noch da — damit man die Arbeit
   herauskopieren kann. Der Hinweis muss dabei deutlicher sein als ein
   gewoehnlicher. */
.pflege-abgelaufen {
  color: var(--warnung); font-weight: 600;
  border-left: 3px solid var(--warnung);
  padding-left: var(--raum-2);
}
.pflege-lage { margin: 0; font-size: .74rem; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }

/* Waehrend die Karte auf einen Punkt wartet, sagt der Zeiger das auch. */
.karte.setzt-punkt { cursor: crosshair; }

/* Im Bearbeitungsmodus zeigt der Zeiger ueber einer Nadel, dass sie sich
   ziehen laesst. */
.karte.zieh-modus .markierung { cursor: grab; }
.karte.zieh-modus .markierung.wird-gezogen { cursor: grabbing; }
.markierung.wird-gezogen .markierung-schatten { opacity: .38; }

/* ---------- Suche ---------- */

.suchfeld { position: relative; display: flex; }
.suchfeld input {
  width: 100%;
  padding: .4rem 1.9rem .4rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
  font-size: .9rem;
}
.suchfeld input:focus-visible { outline: 2px solid var(--betont); outline-offset: -1px; border-color: var(--betont); }
.suchfeld input::-webkit-search-cancel-button { display: none; }

.such-loeschen {
  position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  border: 0; border-radius: 4px;
  background: none; color: var(--schrift-leise);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.such-loeschen:hover { background: var(--plan); color: var(--schrift); }

.such-ergebnis { margin: .45rem 0 0; color: var(--schrift-leise); font-size: .78rem; min-height: 1.1em; }

/* Der Treffer im Namen wird hervorgehoben, damit erkennbar ist, warum ein
   Stand in der Liste steht — bei einem Treffer in der Beschreibung oder in
   den Merkmalen sagt der Name allein das nicht. */
.liste mark {
  background: color-mix(in srgb, var(--betont) 28%, transparent);
  color: inherit;
  border-radius: 2px;
}
.liste-wo { display: block; color: var(--schrift-leise); font-size: .74rem; }

/* ---------- Filter ---------- */

.filter { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.filter label {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .35rem; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.filter label:hover { background: var(--plan); }
.filter input { accent-color: var(--betont); margin: 0; }
.punkt { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }

/* Bei Staenden setzt das Skript die Farbe der Kategorie. Flaechen, Strecken
   und die Veranstaltung haben keine — die Klassen standen im Markup und
   waren nirgends gestaltet, die Punkte also unsichtbar. Ein leerer Kreis an
   einer Stelle, an der bei den Nachbarn Farbe steht, sieht aus wie ein
   Fehler. */
/* Ein Stueck, das nicht in der Mitte zerbrechen darf — ein Datum, eine
   Zahl mit Einheit. */
.ganz { white-space: nowrap; }

/* ---------- Erste Einrichtung ----------
   Steht allein auf der Seite, ohne Karte und ohne Spalten - die gibt es an
   dieser Stelle noch nicht. */
.erstlauf {
  max-width: 32rem; margin: 0 auto; padding: var(--raum-4) var(--polster-x);
  display: grid; gap: var(--raum-3);
}
.erstlauf h1 { margin: 0; font-size: 1.2rem; }
.erstlauf p { margin: 0; color: var(--schrift-leise); }
.erstlauf form { display: grid; gap: var(--raum-3); }
.erstlauf-feld { display: grid; gap: var(--raum-1); }
.erstlauf-feld > span { font-size: .78rem; color: var(--schrift-leise); }
.erstlauf-feld input {
  width: 100%; padding: var(--raum-2);
  border: 1px solid var(--rand); border-radius: 6px;
  background: var(--grund); color: var(--schrift); font: inherit; font-size: .875rem;
}
.erstlauf-meldung:empty { display: none; }
.erstlauf-hinweis { font-size: .8rem; }

.punkt-veranstaltung { background: var(--betont); }
/* Anzeigen: derselbe nuechterne Rahmen wie die Marke, damit beides als
   dasselbe gelesen wird. */
.punkt-anzeige { background: none; border: 2px solid var(--schrift-leise); border-radius: 2px; }
/* Abgelaufen ist kein Fehler, aber eine Tatsache, die auffallen muss - sonst
   ruft ein Kunde an und niemand weiss, dass seine Buchung vorbei ist. */
.liste-wo.ist-abgelaufen { color: var(--warnung); }
.punkt-flaeche { background: none; border: 2px solid var(--schrift-leise); }
.punkt-strecke {
  /* Eine Strecke ist eine Linie, kein Ort: ein Strich statt eines Kreises. */
  width: .8rem; height: 0; border-radius: 0;
  border-top: 2px dashed var(--schrift-leise);
  align-self: center;
}

/* ---------- Gruppen innerhalb eines Blocks ----------
   Im Pflegeblock stehen zwei Gruppen untereinander: die Veranstaltung, dann
   Flaechen und Strecken. Gemessen sass die zweite Ueberschrift mit NULL
   Bildpunkten Abstand auf der Liste darueber — Unterkante 687, Oberkante 687.
   Getrennt wird wie draussen auch: eine Haarlinie mit Luft davor und
   dahinter, damit die Gruppen als Gruppen lesbar sind. */
/* Der Knopf zum Anlegen sitzt unter der Liste, mit Luft: er gehoert zur
   Gruppe, ist aber keine ihrer Zeilen. */
.bereichsliste-tat { margin: var(--raum-2) 0 0; }

.bereichsliste > * + .block-titel {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
}

/* ---------- Liste ---------- */

/* Rasterfelder duerfen von sich aus nicht unter ihre Inhaltsbreite —
   ohne min-width: 0 schiebt ein langer Standname die ganze Spalte auf. */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.liste li, .filter li { min-width: 0; }
.liste button {
  min-width: 0;
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .45rem .5rem; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.liste button:hover { background: var(--plan); }
.liste button:focus-visible { outline: 2px solid var(--betont); outline-offset: -2px; }
.liste .ist-gewaehlt { background: var(--plan); box-shadow: inset 3px 0 0 var(--betont); }
.liste-text { flex: 1; min-width: 0; display: block; }
.liste-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bezahlte Platzierung. Nuechtern und klein, aber nicht leise: sie muss
   erkennbar sein, ohne sich als Auszeichnung auszugeben. Eigener Rahmen statt
   Farbflaeche, damit sie nicht wie eine Kategorie aussieht. */
.anzeigenmarke {
  display: inline-block; margin-left: .4em;
  padding: 0 .35em;
  border: 1px solid var(--schrift-leise); border-radius: 3px;
  color: var(--schrift-leise);
  font-size: .68em; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
  white-space: nowrap;
}

.liste-ref { color: var(--schrift-leise); font-size: .78rem; font-variant-numeric: tabular-nums; }
.liste-leer { padding: .5rem; color: var(--schrift-leise); font-size: .875rem; }

/* ---------- Karte ---------- */

.karte-feld { position: relative; background: var(--plan); min-height: 0; overflow: hidden; }
/* absolut gesetzt, damit die Groesse allein aus der Spalte kommt und nie aus
   dem Seitenverhaeltnis der viewBox */
/* Keine Textmarkierung auf der Karte. Strassennamen sind Beschriftung, kein
   Fliesstext — beim Ziehen wurden sie blau markiert, und eine begonnene
   Auswahl verschluckt ausserdem den Klick auf eine Bude. */
.karte {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.karte text { user-select: none; -webkit-user-select: none; }
.karte.wird-gezogen { cursor: grabbing; }

/* ---------- Hintergrund aus OpenStreetMap ---------- */

/* Alle Striche mit non-scaling-stroke: die Breite bleibt in Bildpunkten, egal
   wie weit gezoomt wird. Sonst muesste das Skript bei jedem Bild ueber
   dreitausend Elemente laufen, nur um Strichstaerken nachzuziehen. */
#lage-hintergrund path, #lage-uebersicht path { vector-effect: non-scaling-stroke; }

/* Bei weitem Ausschnitt fallen die feinen Ebenen weg. Ueber Kilometer hinweg
   sind einzelne Gebaeude und Fusswege nur noch Grieselflaechen; die
   Hauptstrassen der Uebersicht tragen die Orientierung allein. */
.karte.weit #lage-hintergrund .hg-gebaeude,
.karte.weit #lage-hintergrund .hg-weg,
.karte.weit #lage-hintergrund .hg-strasse,
.karte.weit #lage-hintergrund .hg-fuss { display: none; }

.hg-gruen    { fill: var(--hg-gruen); stroke: none; }
.hg-wasser   { fill: var(--hg-wasser); stroke: none; }
/* Fluesse und Baeche sind meist Linien, keine Flaechen — die Duessel etwa.
   Etwas kraeftiger als ihre Flaeche, damit ein schmaler Bach nicht verschwindet. */
.hg-wasserlauf { fill: none; stroke: var(--hg-wasserlinie); stroke-width: 2.2;
                 stroke-linecap: round; stroke-linejoin: round; }
.hg-fuss     { fill: var(--hg-platz); stroke: none; }
.hg-gebaeude { fill: var(--hg-haus); stroke: var(--hg-haus-kante); stroke-width: .6; }

.hg-strasse-gross { fill: none; stroke: var(--hg-strasse); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hg-strasse       { fill: none; stroke: var(--hg-strasse); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hg-weg           { fill: none; stroke: var(--hg-weg); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 4 3; }

/* Strassennamen laufen mit der Strasse. Der helle Saum hebt sie vom
   Hintergrund ab, ohne dass ein Kasten darunter noetig waere. */
.hg-name {
  fill: var(--hg-schrift);
  paint-order: stroke;
  /* Der Saum ist bewusst Weiss und nicht die Grundfarbe: die Namen liegen
     meist auf Strassen oder Gebaeuden, und ein Saum in der Farbe des
     Kartengrunds waere dort ein schmutziger Rand um jede Letter. */
  stroke: var(--hg-saum);
  /* stroke-width steht bewusst NICHT hier, sondern wird im Skript in
     Weltmassen gesetzt — genau wie die Schriftgroesse. vector-effect:
     non-scaling-stroke wirkt bei <text> nicht verlaesslich; wo es fehlschlaegt,
     ist "1.5px" keine 1.5 Bildpunkte, sondern 1.5 Meter, und der Saum waechst
     beim Hineinzoomen zu einem Klotz um jeden Buchstaben. */
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
  font-weight: 600;
}

.herkunft {
  position: absolute; right: .7rem; bottom: .55rem; z-index: 2;
  margin: 0; padding: .1rem .4rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--feld) 78%, transparent);
  color: var(--schrift-leise); font-size: .68rem;
}

/* Der Lizenzverweis nimmt die Farbe der Zeile. Das Blau, das der Browser von
   sich aus vergibt, kam auf dieser dunklen Leiste auf Kontrast 2,23 - bei
   10,9 px Schrift eine Zumutung und unter der Grenze von 4,5. Mit der Farbe
   der Zeile sind es 6,77. Erkennbar bleibt er an der Unterstreichung, nicht
   an der Farbe; darauf allein darf ein Verweis ohnehin nie beruhen. */
.herkunft a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.herkunft a:hover, .herkunft a:focus-visible { color: var(--schrift); }

/* ---------- eigene Geometrie ---------- */

/* Nur Formen — bei <text> ist auf non-scaling-stroke kein Verlass, dort
   setzt das Skript die Strichstaerke in Weltmassen. Die Nadel braucht es
   nicht: ihre Gruppe traegt scale(m), dort ist eine Einheit ein Bildpunkt. */
.zone-flaeche, .zone-ohne, .flaeche {
  vector-effect: non-scaling-stroke;
}
.zone-flaeche { fill: var(--zone); fill-opacity: .55; stroke: var(--zone-strich); stroke-width: 1.5; stroke-dasharray: 6 4; }
/* ACHTUNG: keine Laengen fuer SVG-Text in dieses Stilblatt schreiben.
   In SVG ist "px" in CSS keine Bildpunkte, sondern eine Welteinheit — bei
   dieser Abbildung also ein Meter. Eine Regel "font-size: 11px" ergibt damit
   elf Meter hohe Schrift, die beim Hineinzoomen mitwaechst. Und weil CSS das
   Praesentationsattribut schlaegt, bliebe die Berechnung im Skript wirkungslos.
   Schriftgroesse und Strichstaerke setzt deshalb ausschliesslich karte.js. */
.zone-name { fill: var(--schrift-leise); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.zone-ohne { fill: none; stroke: var(--zone-strich); stroke-width: 1.5; stroke-dasharray: 3 5; }

.flaeche { fill-opacity: .22; stroke-width: 1.5; cursor: pointer; }
/* Die Grundflaeche des gewaehlten Standes tritt mit ihm hervor. */
.flaeche.flaeche-gewaehlt { fill-opacity: .42; stroke-width: 2.5; }

/* ---------- Strecken ---------- */

.strecke {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .85;
}
.strecke-name { fill: var(--schrift); font-weight: 600; paint-order: stroke;
  stroke: var(--plan); stroke-linejoin: round; pointer-events: none; }

/* ---------- Entwurf beim Zeichnen ---------- */

#lage-entwurf path, #lage-entwurf circle { vector-effect: non-scaling-stroke; }
.entwurf-linie { fill: none; stroke: var(--betont); stroke-width: 2.5; stroke-dasharray: 7 5; }
.entwurf-flaeche { fill: var(--betont); fill-opacity: .14; stroke: var(--betont);
  stroke-width: 2.5; stroke-dasharray: 7 5; }
.entwurf-punkt { fill: var(--feld); stroke: var(--betont); stroke-width: 2; }
.entwurf-pfeil path { fill: var(--betont); }

/* Richtungspfeile auf gespeicherten Strecken. Sie sind Auskunft, kein Ziel:
   pointer-events aus, damit sie den Klick auf die Strecke darunter nicht
   abfangen. Der schmale Saum in der Planfarbe trennt sie von der Linie,
   auf der sie sitzen — ohne ihn verschwimmt der Pfeil mit ihr. */
/* ---------- Infrastruktur im Hintergrund ----------
   Schienen als Strichlinie: sie laufen oft unter der Strasse, und ein
   durchgezogener Strich behauptete eine Oberflaeche, die es nicht gibt.
   Die Punkte tragen einen Saum in der Planfarbe, damit sie sich vom
   Untergrund loesen, auf dem sie liegen. */
.hg-schiene {
  fill: none; stroke: var(--schrift-leise); stroke-width: 1.6;
  stroke-dasharray: 9 5; opacity: .55;
  vector-effect: non-scaling-stroke;
}
.hg-punkt circle {
  stroke: var(--plan); stroke-width: 1.5; paint-order: stroke;
  vector-effect: non-scaling-stroke;
}
.hg-haltestelle circle { fill: #4a7ec4; }
/* Notdienste rot, und kraeftiger als eine Haltestelle: wer sie sucht, sucht
   sie im Ernstfall. */
.hg-notdienst circle { fill: #c0392b; }

.streckenpfeil { pointer-events: none; }

/* Anfang und Ende. Sie nehmen den Zeiger an, damit ihre Sprechblase erscheint —
   anders als die Pfeile, die reine Auskunft sind und den Klick auf die Strecke
   darunter nicht abfangen duerfen. */
.streckenende circle, .streckenende rect {
  stroke: var(--plan); stroke-width: 2; paint-order: stroke;
  vector-effect: non-scaling-stroke;
}
.streckenpfeil path { stroke: var(--plan); stroke-width: 1.5; paint-order: stroke;
  vector-effect: non-scaling-stroke; }
.karte.zeichnet { cursor: crosshair; }

/* Die Karte nimmt Tasten entgegen und muss zeigen, wann sie sie bekommt.
   Nur :focus-visible — wer sie mit der Maus anfasst, hat den Rahmen nicht
   noetig und wuerde ihn als Fehler lesen. Innen liegend, weil ein Rahmen
   ausserhalb im Spaltenraster abgeschnitten wuerde. */
.karte:focus { outline: none; }
.karte:focus-visible { outline: 2px solid var(--betont); outline-offset: -2px; }

/* Griffe an den Stuetzpunkten. Der Eckgriff ist voll, der kleine dazwischen
   hohl — so ist ohne Beschriftung erkennbar, welcher was tut. */
/* Alle Masse hier sind Bildpunkte: die Griffgruppen tragen scale(m).
   Die Trefferflaeche ist mit 15 Punkten deutlich groesser als das Sichtbare —
   einen Griff von sieben Bildpunkten trifft niemand zuverlaessig. */

.griff { cursor: grab; }
.griff .griff-scheibe { fill: var(--feld); stroke: var(--betont); stroke-width: 2.5; }
.griff:hover .griff-scheibe { fill: var(--betont); }
.griff.griff-gezogen { cursor: grabbing; }
.griff.griff-gezogen .griff-scheibe { fill: var(--betont); }

/* Der Griff zum Einfuegen traegt ein Plus. Vorher war er ein blasser
   gestrichelter Kreis von sieben Bildpunkten — die Funktion gab es, gefunden
   hat sie niemand. */
.griff-neu { cursor: copy; }
.griff-neu .griff-scheibe {
  fill: var(--feld); stroke: var(--betont); stroke-width: 2; opacity: .9;
}
.griff-neu .griff-plus {
  stroke: var(--betont); stroke-width: 2; stroke-linecap: round; fill: none;
}
.griff-neu:hover .griff-scheibe { fill: var(--betont); opacity: 1; }
.griff-neu:hover .griff-plus { stroke: var(--feld); }

/* Das Minus zum Entfernen haengt am Eckgriff und steht sichtbar da wie das
   Plus. Erst zeigte es sich nur beim Schweben — das ist kein Mittelweg,
   sondern dieselbe Falle: mit einem Finger gibt es kein Schweben, und mit
   Zeiger findet es nur, wer zufaellig verweilt. Blasser und kleiner als der
   Griff, damit die Ecke die Hauptsache bleibt. */
.griff-weg { cursor: pointer; opacity: .85; }
.griff-weg .griff-scheibe { fill: var(--feld); stroke: var(--warnung); stroke-width: 2; }
.griff-weg .griff-strich {
  stroke: var(--warnung); stroke-width: 2; stroke-linecap: round; fill: none;
}
.griff-weg:hover { opacity: 1; }
.griff-weg:hover .griff-scheibe { fill: var(--warnung); }
.griff-weg:hover .griff-strich { stroke: var(--feld); }

/* Sagt, dass hier kein feiner Grund liegt. Unten mittig, damit es die
   Werkzeuge oben nicht verdeckt und beim Arbeiten nicht im Weg steht. */
.kartenluecke {
  position: absolute; z-index: 3;
  left: 50%; bottom: var(--raum-5); transform: translateX(-50%);
  max-width: min(30rem, calc(100% - 2rem));
  margin: 0; padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--feld); color: var(--schrift-leise);
  font-size: .8rem; line-height: 1.45;
  box-shadow: var(--schatten);
}
.kartenluecke code { font-size: .95em; color: var(--schrift); }

/* Bildkacheln eines Anbieters. Im dunklen Schema werden sie gedaempft und
   umgekehrt — sonst leuchtet eine helle Karte aus einer dunklen Oberflaeche
   heraus wie ein Fenster. */
.rasterkachel { image-rendering: auto; }
:root[data-theme="dark"] #lage-raster {
  filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9);
}

/* ---------- Wo ich stehe ----------
   Der Ring steht in Weltmassen: er IST die gemeldete Unsicherheit in Metern.
   Wer sie sieht, erkennt sofort, ob dem Punkt zu trauen ist — ein Punkt aus
   dem Mobilfunknetz kann hundert Meter danebenliegen. */
.standort { pointer-events: none; }
.standort-ring {
  fill: var(--betont); fill-opacity: .12;
  stroke: var(--betont); stroke-opacity: .5;
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.standort-punkt {
  fill: var(--betont);
  stroke: var(--feld); stroke-width: 2; vector-effect: non-scaling-stroke;
}

/* ---------- Die Nadel ----------
   Alle Masse hier sind Bildpunkte: die Markierungsgruppe traegt scale(m), und
   eine lokale Einheit entspricht damit genau einem Bildpunkt. */

.markierung { cursor: pointer; }
.markierung * { transition: none; }

/* Bodenschatten unter der Spitze. Er loest die Nadel vom Untergrund, ohne
   dass ein Weichzeichner noetig waere — der wuerde in Weltmassen rechnen. */
.markierung-schatten { fill: #000; opacity: .22; }

/* Heller Saum ringsum: er schneidet die Nadel vom Kartenbild frei, so wie
   ein Ausschnitt aus Papier. */
.markierung-koerper {
  stroke: var(--feld);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
/* Zweite Fassung derselben Form, nur mit dem Verlauf gefuellt: Schimmer oben,
   Schatten unten. Der Verlauf ist farbneutral und taugt fuer jede Kategorie. */
.markierung-tiefe { pointer-events: none; }

.markierung-symbol { color: #fff; pointer-events: none; }

/* Der Ring liegt bereit und wird erst bei Auswahl oder Fokus sichtbar. */
.markierung-ring {
  fill: none;
  stroke: var(--feld);
  stroke-width: 1.6;
  opacity: 0;
}

.markierung:hover .markierung-schatten { opacity: .3; }
.markierung:focus-visible { outline: none; }
.markierung:focus-visible .markierung-ring,
.ist-gewaehlt .markierung-ring { opacity: 1; }
.ist-gewaehlt .markierung-schatten { opacity: .32; }

/* Die Groesse der gewaehlten Nadel setzt das Skript ueber den Massstab der
   Gruppe; hier bleibt nur der Saum etwas kraeftiger. */
.ist-gewaehlt .markierung-koerper { stroke-width: 1.8; }
.markierung-name {
  fill: var(--schrift); font-weight: 600;
  paint-order: stroke; stroke: var(--plan); stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Werkzeuge ---------- */

.werkzeuge {
  position: absolute; top: var(--raum-3); right: var(--raum-3); z-index: 2;
  display: flex; gap: var(--raum-1);
}
.knopf {
  min-width: 2rem; height: 2rem; padding: 0 .5rem;
  border: 1px solid var(--rand); border-radius: 6px;
  background: var(--feld); color: var(--schrift);
  font: inherit; font-size: .9rem; line-height: 1; cursor: pointer;
  box-shadow: var(--schatten);
}
.knopf:hover { border-color: var(--betont); }
.knopf-weit { font-size: .8rem; }
.knopf-schema { font-size: .8rem; align-self: center; flex: none; }

.massstab {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 2;
  display: flex; align-items: center; gap: .45rem;
  color: var(--schrift-leise); font-size: .72rem; font-variant-numeric: tabular-nums;
}
.massstab-balken { display: block; height: .4rem; border: 1px solid var(--schrift-leise); border-top: 0; }

/* ---------- Einzelheiten ---------- */

.detail-leer { color: var(--schrift-leise); font-size: .9rem; }
.detail h2 { margin: 0 0 .1rem; font-size: 1.05rem; line-height: 1.3; }
.detail-art { margin: 0 0 .9rem; display: flex; align-items: center; gap: .45rem; color: var(--schrift-leise); font-size: .85rem; }
.detail p { margin: 0 0 .8rem; font-size: .9rem; }
.detail-lang { color: var(--schrift-leise); }
.detail dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; font-size: .875rem; }
.detail dt { color: var(--schrift-leise); min-width: 0; }
.detail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.detail-block { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
.detail-block h3 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--schrift-leise); }
.detail a { color: var(--betont); overflow-wrap: anywhere; }

/* ---------- Die Pflegetafel ----------
   Sie sass in der linken Spalte, zwischen Suche und Standliste — also dort,
   wo man Dinge FINDET, nicht wo man sie bearbeitet. Jetzt steht sie rechts an
   der Stelle der Lesetafel: ein Datensatz, eine Tafel. */
.pflegetafel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--feld);
  border-left: 1px solid var(--rand);
  overflow: hidden;   /* die Rolle sitzt innen, damit die Fussleiste steht */
}
.pflegetafel-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--polster-x);
  border-bottom: 1px solid var(--rand);
  flex: none;
  min-width: 0;
}
.pflegetafel-titel {
  margin: 0;
  font-size: .72rem; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--schrift-leise);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Traegt der Kopf einen Namen statt einer Rubrik, ist er auch einer: keine
   Versalien, keine Sperrung, volle Farbe. */
.pflegetafel-titel.ist-satz {
  font-size: .95rem; letter-spacing: -.01em;
  text-transform: none; color: var(--schrift);
}
.pflegetafel-kennung {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  padding: .1em var(--raum-1); border-radius: 4px;
  background: var(--plan); color: var(--schrift-leise);
}
.pflegetafel-kennung:empty { display: none; }

/* Wer angemeldet ist, gehoert nicht neben den Namen des Standes — das sind
   zwei ganz verschiedene Dinge. Also ans andere Ende und leise. */
.pflegetafel-kopf #pflege-konto {
  margin-left: auto; flex: none;
  font-size: .72rem; color: var(--schrift-leise);
}

/* Nur fuer Vorlesesoftware: sichtbar entfernt, aber vorhanden. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Setzt die Gattungen von den Standkategorien ab. Eine Flaeche ist keine
   Kategorie von Staenden; in einer ununterbrochenen Liste laese es sich so. */
.filter-trenner {
  height: 1px; margin: var(--raum-2) 0;
  background: var(--rand); list-style: none;
}

.feld-pflicht { color: var(--warnung); margin-left: .15em; }
.pflegetafel > #pflege {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1;
}
.pflege-formular { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Alles in der Tafel, was nicht das Formular ist: Hinweise, Zeichenleisten,
   das Warten auf einen Klick. Sie standen ohne jedes Polster am Rand, weil
   das Formular seines in seinen eigenen Teilen traegt. */
.pflege-flaeche {
  display: grid;
  gap: var(--raum-3);
  justify-items: start;
  align-content: start;
  padding: var(--raum-4) var(--polster-x);
  overflow-y: auto;
  min-height: 0;
}

/* ---------- Reiter ---------- */
.reiter-werk { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.reiter-leiste {
  display: flex; flex-wrap: wrap; gap: var(--raum-1);
  padding: var(--raum-3) var(--polster-x) 0;
  flex: none;
}
/* Umbrechen, nicht rollen. Einzeilig mit Rollbalken sah aufgeraeumter aus,
   versteckte aber zwei der fuenf Reiter (583 Bildpunkte Inhalt in 431
   sichtbaren) — und ein Bedienelement, das man nicht sieht, gibt es fuer den
   Benutzer nicht. Lieber eine zweite Zeile als ein verborgener Reiter.

   Damit es dabei kompakt bleibt, tragen die Reiter kurze Woerter und die Zahl
   nennt nur, WIEVIEL gepflegt ist — nicht auch noch, wieviel ginge. Wie viele
   Felder es gibt, sieht man beim Oeffnen. */
.reiter-leiste {
  flex-wrap: wrap;
  padding-bottom: var(--raum-3);
  border-bottom: 1px solid var(--rand);
}

.reiter {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--schrift-leise);
  font: inherit; font-size: .82rem; cursor: pointer;
  white-space: nowrap; flex: none;
}
.reiter:focus-visible { outline: 2px solid var(--betont); outline-offset: 1px; }
.reiter:hover { color: var(--schrift); background: var(--plan); }
.reiter.ist-hier {
  background: var(--betont); border-color: var(--betont);
  color: var(--feld); font-weight: 600;
}
/* Die Zahl sagt, wieviel im Reiter schon gepflegt ist — ohne sie muesste man
   jeden anklicken, um zu sehen, dass nichts drinsteht. */
.reiter-zahl {
  font-size: .7rem; font-variant-numeric: tabular-nums;
  padding: 0 var(--raum-1); border-radius: 999px;
  background: var(--plan); color: var(--schrift-leise);
}
.reiter.ist-hier .reiter-zahl { background: rgba(255,255,255,.22); color: var(--feld); }
.reiter-zahl { color: var(--betont); font-weight: 650; }
.reiter.ist-hier .reiter-zahl { color: var(--feld); }

.reiter-buehne { flex: 1; min-height: 0; overflow-y: auto; padding: var(--raum-4) var(--polster-x); }

/* Die Tafel muss selbst ein Raster sein. Die Luecke von .formular gilt nur
   dessen unmittelbaren Kindern — die Felder liegen aber eine Ebene tiefer und
   fielen deshalb voellig ohne Abstand aufeinander. Gemessen: 0 Bildpunkte
   zwischen jedem Feld und dem naechsten. */
.reiter-tafel { display: grid; gap: var(--raum-3); align-content: start; }


/* ---------- Fussleiste ----------
   Speichern steht fest am unteren Rand. Am Ende einer Rolle musste man erst
   dorthin scrollen, um zu sehen, ob man ueberhaupt etwas tun kann. */
.pflege-fuss {
  display: flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-3) var(--polster-x);
  border-top: 1px solid var(--rand);
  background: var(--feld);
  flex: none;
}
.pflege-fuss .knopf { margin-left: auto; }
.pflege-fuss .knopf + .knopf { margin-left: 0; }
.pflege-zustand {
  font-size: .78rem; color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.pflege-zustand.ist-offen { color: var(--warnung); font-weight: 650; }
/* Kurz nach dem Speichern: die Fassungsnummer hat sich geaendert, und dass
   das kein Zufall war, sagt die Farbe fuer zweieinhalb Sekunden. */
.pflege-zustand.ist-frisch { color: var(--betont); font-weight: 650; }

/* Was nicht rueckgaengig zu machen ist, liegt hinter einem Griff und nicht
   neben dem Speichern-Knopf. */
.pflege-gefahr { margin-top: var(--raum-2); border-top: 1px solid var(--rand); padding-top: var(--raum-3); }
.pflege-gefahr > summary {
  cursor: pointer; font-size: .78rem; color: var(--schrift-leise);
}
.pflege-gefahr > summary:hover { color: var(--warnung); }
.pflege-gefahr .knopf { margin-top: var(--raum-2); width: 100%; }

/* ---------- Werkzeuge auf der Karte ----------
   Was auf der Karte wirkt, wird auf der Karte bedient. */
.kartenwerkzeuge {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1);
  padding: var(--raum-1);
  background: var(--feld); border: 1px solid var(--rand);
  border-radius: 8px; box-shadow: var(--schatten);
}
.kartenwerkzeuge .knopf { font-size: .8rem; padding: var(--raum-1) var(--raum-2); }
.werkzeug-trenner {
  width: 1px; align-self: stretch; margin: var(--raum-1) 0;
  background: var(--rand);
}

/* ---------- Pflege: Mehrfachauswahl ----------
   Ein Stand traegt weit mehr Angaben, als auf einmal in eine Spalte passen.
   Aufgeklappt wird, was schon gepflegt ist; der Rest bleibt zu, ist aber da.
   Die Zusammenfassung nennt die Zahl, damit man nicht jeden Abschnitt oeffnen
   muss, um zu sehen, dass nichts drinsteht. */
.feld-geld { display: flex; align-items: center; gap: var(--raum-2); }
.feld-geld input { flex: 1; min-width: 0; }
.feld-einheit { font-size: .8rem; color: var(--schrift-leise); font-weight: 600; }

/* Ein Raster statt freiem Umbruch: bei freiem Umbruch riss ein langer Wert
   ("Handy, kontaktlos") mitten im Text um und sein Kaestchen stand allein. */
.feld-mehrfach {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-1) 0;
}
.feld-haken {
  display: grid; grid-template-columns: auto 1fr;
  align-items: start; gap: var(--raum-2);
  font-size: .85rem; font-weight: 400; cursor: pointer; line-height: 1.25;
}
.feld-haken input { margin: .2em 0 0; }

/* ---------- Eingebettet ----------
   Mit ?einbetten=1 steckt die Karte im Rahmen einer fremden Seite. Dort
   gehoert nichts hin, was diese Seite schon selbst hat oder nicht haben will:
   Titel, Laufzeit, Hinweistext, Anmeldung, Hell/Dunkel. Die Bereichsreiter
   bleiben — sie sind Navigation IN der Karte und anderswo nicht zu bekommen.

   Was verschwindet, entscheidet dieses Stilblatt und nicht der Quelltext.
   Sonst muesste an einem Dutzend Stellen ein "wenn eingebettet" stehen, und
   das naechste neue Stueck vergaesse es.

   Die Hoehe kommt vom Rahmen, nicht von 100vh: sonst waere die Karte so hoch
   wie das Fenster der einbettenden Seite statt so hoch wie ihr Rahmen. */
.eingebettet, .eingebettet body { height: 100%; }
.eingebettet .huelle { height: 100%; }
.eingebettet .kopf-titel,
.eingebettet .kopf-hinweis,
.eingebettet .kopf-knoepfe { display: none; }

/* Der Kopf schrumpft auf die Bereichsreiter zusammen. Sie traegt die
   Navigation IN der Karte und ist anderswo nicht zu bekommen. */
.eingebettet .kopf {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--rand);
}

/* Ohne Seitenspalte fuellt die Karte den Rahmen. */
.eingebettet:not(.mit-leiste) .seite,
.eingebettet:not(.mit-leiste) .detail { display: none; }

/* Und dann muss die Karte den Rahmen FUELLEN.
   Fuer schmale Fenster gilt `.karte-feld { height: 55vh; min-height: 17rem }` -
   richtig auf einem Telefon, wo unter der Karte Suche und Liste stehen. Im
   Rahmen steht darunter nichts, die Spalten sind ja ausgeblendet: gemessen in
   einem 414x430 grossen Rahmen war die Karte 272 hoch, darunter 99 px leere
   Flaeche. Auf duesseldorp.de sah das aus wie ein grauer Balken unter der
   Karte, und der Fehler schien bei der einbettenden Seite zu liegen.

   Zwei Klassen und eine Verneinung schlagen die eine Klasse der Medienregel,
   deshalb gilt das unabhaengig von der Reihenfolge. */
/* Die Pflegetafel gehoert nie in einen fremden Rahmen. Sie ist eine
   Bearbeitungsflaeche; eingebettet wird gezeigt, nicht gearbeitet. Sie stand
   dort als leerer Kasten unter der Karte - auf duesseldorp.de sah das aus wie
   ein grauer Balken, und der Verdacht fiel auf die einbettende Seite.
   Gemessen: 115 px in einem 430 px hohen Rahmen. */
.eingebettet .pflegetafel { display: none; }

/* Aus demselben Grund die Werkzeugreihe: wer eingebettet die Karte ansieht
   und nebenbei angemeldet ist, bekaeme "+ Stand" und "Flaeche" mitten in
   einem fremden Artikel. Der Dienst wiese ein Schreiben nicht ab - der Knopf
   gehoert trotzdem nicht dorthin. */
.eingebettet .kartenwerkzeuge { display: none; }

/* Und die Wahl der Veranstaltung. Ein Artikel bettet EINE Ausgabe ein; wer
   darin auf eine andere umschaltet, sieht etwas, das der Text nicht meint.
   Das ist eine Nebenwirkung davon, dass die Auswahl in die Navigation
   gewandert ist - vorher lag sie im Titelblock, und der ist eingebettet
   ohnehin ausgeblendet. */
.eingebettet .kopf-wahl { display: none; }

.eingebettet:not(.mit-leiste) .spalten { grid-template-rows: 1fr; }
.eingebettet:not(.mit-leiste) .karte-feld {
  /* auto, NICHT 100%: als Rasterkind loeste 100% gegen eine Zeile auf, die
     sich selbst nach dem Inhalt richtet - gemessen wurde die Karte dadurch
     128 px statt 272. Die Zeile bekommt oben 1fr, dann dehnt das Kind von
     selbst. */
  height: auto;
  min-height: 0;
}
.eingebettet:not(.mit-leiste) .spalten { grid-template-columns: 1fr; }

/* Mit Seitenspalte: dieselbe Aufteilung wie sonst, nur ohne Kopfwerk. */
.eingebettet.mit-leiste .spalten { min-height: 0; }

/* Schmales Fenster: eine Spalte. Die Karte gehoert dabei nach oben — stand sie
   hinter Filter und Standliste, war sie erst nach langem Scrollen zu sehen und
   die Seite wirkte, als gaebe es gar keine Karte. */
@media (max-width: 60rem) {
  .huelle { height: auto; overflow: visible; }

  /* ---------- Der Kopf auf dem Telefon ----------
     Gemessen waren es 242 px bei 812 px Fensterhoehe: 29,8 %, weg bevor die
     Karte anfing. Drei Spalten passen hier nicht nebeneinander, also zwei
     Reihen — aber knappe: Titel und Knoepfe oben, die Bereiche darunter.

     Die Laufzeit faellt weg. Sie ist zweitrangig, steht im Datensatz und
     kostete auf 375 px zwei volle Zeilen Umbruch. */
  .kopf { padding: .4rem .7rem; gap: .35rem .6rem; }
  /* Zwei Reihen, nicht drei: oben wer man ist und was man tut, darunter die
     Bereiche. Ohne das `order` faendet die Bereichsleiste — sie steht im
     Dokument vor den Knoepfen und beansprucht die volle Breite — eine eigene
     Reihe MITTEN drin, und die Knoepfe fielen in eine dritte. */
  .kopf-knoepfe { order: 0; }
  .bereichsnavigation { order: 1; flex: 1 0 100%; }
  /* Der Name kuerzt sich; ausgeschrieben nahm die Auswahl allein zwei
     Drittel der Breite und schob jede Marke in eine eigene Reihe.

     Ich hatte hier zuerst eine SCHIEBBARE Reihe gebaut - das spart Hoehe,
     widerspricht aber einer Lehre, die dieses Projekt schon bezahlt hat:
     eine scrollbare Leiste hatte zwei von fuenf Reitern versteckt und wurde
     deshalb zurueckgenommen. Ein Sprungziel, das man nicht sieht, gibt es
     nicht. Also umbrechen - nur mit weniger, das umbrechen muss. */
  .kopf-wahl { max-width: 10rem; }
  .kopf-zeile { display: none; }
  .kopf h1 { font-size: 1rem; }
  .sprung { font-size: .78rem; padding: .2rem .55rem; }
  .spalten { grid-template-columns: 1fr; }
  .karte-feld { order: 1; height: 55vh; min-height: 17rem; }

  /* ---------- Die Pflegetafel im schmalen Fenster ----------
     Sie kam hier ueberhaupt nicht vor und stand deshalb mit order 0 GANZ
     OBEN: wer die Karte auf dem Telefon oeffnete, bekam erst eine Wand aus
     Formularfeldern, 2945 Bildpunkte hoch, und die Karte darunter.

     Jetzt folgt sie der Karte — wer bearbeitet, arbeitet an dem, was oben im
     Bild steht. Suche und Liste ruecken dahinter. */
  .pflegetafel { order: 2; }
  .pflegt .seite { order: 3; }

  .pflegetafel {
    height: auto; overflow: visible;
    border: 0; border-top: 1px solid var(--rand);
  }
  /* Die Hoehenverteilung der drei Spalten gilt hier nicht: im Fluss darf
     alles seine eigene Hoehe haben. */
  .pflegetafel > #pflege,
  .pflege-formular,
  .reiter-werk { display: block; }
  .reiter-buehne { overflow: visible; }

  /* Speichern bleibt am unteren Rand kleben, statt am Ende einer
     dreitausend Bildpunkte langen Rolle zu warten. */
  .pflege-fuss {
    position: sticky; bottom: 0; z-index: 2;
    box-shadow: 0 -2px 8px rgba(0,0,0,.12);
  }

  /* ---------- Werkzeuge auf einer schmalen Karte ----------
     Umgebrochen nahmen sie zwei Reihen und einundzwanzig Prozent der
     Kartenhoehe — auf einem Telefon ist die Karte 447 Bildpunkte hoch, da
     zaehlt jede Reihe. Fuenf Woerter passen aber in keine Zeile von 375.

     Also EINE Reihe, die sich schieben laesst. Anders als bei den Reitern ist
     das hier vertretbar: der Knopf am Rand wird angeschnitten und zeigt damit
     selbst, dass es weitergeht, und Wischen ist auf einem Beruehrungsbildschirm
     die naheliegende Geste. Die drei haeufigsten stehen vorn. */
  .kartenwerkzeuge {
    left: var(--raum-2); right: var(--raum-2); top: var(--raum-2);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kartenwerkzeuge::-webkit-scrollbar { display: none; }
  .kartenwerkzeuge .knopf { flex: none; font-size: .8rem; }
  .werkzeug-trenner { flex: none; }

  /* Die Werkzeugreihe geht ueber die ganze Breite und lag damit genau auf den
     Zoomknoepfen — gemessen: sie ueberdeckte sie vollstaendig, mit hoeherer
     Lage, sodass sich auf dem Telefon gar nicht mehr zoomen liess. Sie
     wandern nach unten rechts, wo der Daumen hinreicht.

     "Wo nichts liegt" stand hier und war falsch: der Lizenzhinweis sitzt
     ebenfalls unten rechts. Gemessen bei 375 Bildpunkten lagen die Knoepfe
     bei 295–363, die Nennung bei 160–364 — der Umzug hat die eine
     Ueberdeckung gegen die naechste getauscht.

     Nebeneinander geht nicht: Massstab (85) + Nennung (203) + Knoepfe (68)
     sind 356 von 375 Punkten, ohne jeden Abstand. Also uebereinander. Der
     Abstand nach unten haelt die Zeile der Nennung frei (etwa 20 Punkte hoch,
     .55rem ueber dem Rand). */
  .werkzeuge { top: auto; bottom: 2.6rem; right: var(--raum-3); }

  /* Und der Abdeckungshinweis darueber, sonst verdeckt er sie: er liegt
     mittig, ist auf dieser Breite fast so breit wie die Karte und hat die
     hoehere Lage. Gemessen ragte er 10 Punkte in die Knopfspalte. */
  .kartenluecke { bottom: 6rem; }

  /* Die klebende Fussleiste liegt ueber dem Formular — ohne diesen Platz
     verschwaende sie das letzte Feld. */
  .reiter-buehne { padding-bottom: 4.5rem; }
  /* Suche und Liste direkt unter die Karte. Standen sie hinter den
     Einzelheiten, war das Suchfeld ganz unten und praktisch unauffindbar. */
  .seite { order: 2; }
  .detail { order: 3; }
  .seite, .detail {
    border: 0;
    border-top: 1px solid var(--rand);
    overflow: visible;
  }
}

/* ---------- Finger statt Zeiger ----------
   Gilt nach der Art des Zeigegeraets, nicht nach der Fensterbreite: auch ein
   grosses Tablet wird mit dem Finger bedient. */
@media (pointer: coarse) {
  /* Ein Ziel unter 44 Bildpunkten trifft man mit dem Finger nicht
     zuverlaessig. Die Reiter waren 30 hoch. */
  .reiter { min-height: 2.75rem; padding-left: var(--raum-3); padding-right: var(--raum-3); }
  .kartenwerkzeuge .knopf { min-height: 2.5rem; }

  /* Die Zoomknoepfe fielen unter dieselbe Regel und waren nicht erfasst: sie
     heissen .werkzeuge, nicht .kartenwerkzeuge. Gemessen 32x32 — die kleinsten
     Ziele der ganzen Ansicht, und die, die man auf der Karte am haeufigsten
     trifft. */
  .werkzeuge .knopf { min-width: 2.75rem; min-height: 2.75rem; }
  .klappgriff { height: 4rem; width: 1.5rem; }

  /* Der Kopf fiel unter dieselbe Regel und war davon ausgenommen: die
     Bereichsbadges waren 26 Bildpunkte hoch, der Schemaknopf 32. Das kostet
     Hoehe — die Kopfzeile waechst dadurch —, aber ein Sprungziel, das man
     beim Gehen dreimal antippen muss, ist keine Ersparnis. */
  .kopf .knopf { min-height: 2.75rem; }
  .kopf .knopf-symbol { width: 2.75rem; }
  /* Sprungmarken UND die Veranstaltungswahl. Die Wahl war nicht erfasst,
     weil sie .kopf-wahl heisst und nicht .sprung - gemessen stand sie mit
     27 px zwischen 44 px hohen Marken, also weder auf einer Linie noch mit
     dem Finger sicher zu treffen. Dasselbe Muster wie bei den Zoomknoepfen,
     die aus demselben Grund durch dieselbe Regel gefallen sind. */
  .sprung, .kopf-wahl { min-height: 2.75rem; }

  /* Sechzehn Bildpunkte, keinen weniger: iOS Safari zoomt die ganze Seite
     hinein, sobald ein Eingabefeld kleiner beschriftet ist — bei jedem
     Antippen, und wieder heraus muss man von Hand. */
  .feld input, .feld select, .feld textarea,
  .suchfeld input { font-size: 1rem; }
}

/* ---------- Hinweise ----------
   Die vierte Gattung: Text, der dauerhaft auf der Karte steht. Er soll
   lesbar sein, ohne die Karte darunter zuzudecken - deshalb ein Feld mit
   Deckkraft statt einer vollen Flaeche, und eine Umrandung, damit der Kasten
   auf hellem wie auf dunklem Untergrund eine Kante hat. */
.hinweis { pointer-events: none; }
.hinweis-feld {
  fill: color-mix(in srgb, var(--feld) 92%, transparent);
  stroke: var(--rand);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hinweis-titel {
  fill: var(--schrift);
  font-size: 13px;
  font-weight: 600;
}
.hinweis-satz {
  fill: var(--schrift-leise);
  font-size: 11.5px;
}
.hinweis-punkt {
  fill: var(--akzent);
  stroke: var(--feld);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Eine Warnung faellt auf - aber nur durch Farbe, nicht durch Groesse: sonst
   waere die Versuchung gross, alles zur Warnung zu erklaeren. */
.hinweis.ist-warnung .hinweis-feld { stroke: var(--warnung, #c0392b); stroke-width: 1.5; }
.hinweis.ist-warnung .hinweis-titel { fill: var(--warnung, #c0392b); }
.hinweis.ist-warnung .hinweis-punkt { fill: var(--warnung, #c0392b); }

/* Noch nicht veroeffentlicht oder ausserhalb der Gueltigkeit: nur Angemeldete
   sehen ihn ueberhaupt, und dann soll erkennbar sein, dass sonst niemand ihn
   sieht. Gestrichelt statt blass - blass liest sich wie "unwichtig". */
.hinweis.ist-entwurf .hinweis-feld { stroke-dasharray: 4 3; }

/* Der Punkt vor einem Hinweis in der Liste - dieselbe Sprache wie bei
   Flaeche und Strecke, damit die Gattung auf einen Blick erkennbar ist. */
.punkt-hinweis { background: var(--schrift-leise); border-radius: 2px; }
.punkt-hinweis.ist-warnung { background: var(--warnung, #c0392b); }

/* Ausserhalb der Bearbeitung faengt ein Hinweis KEINE Klicks - sonst laege
   der Textkasten wie ein Deckel ueber der Karte, und was darunter liegt,
   waere nicht mehr erreichbar. Im Bearbeiten wird er beweglich. */
.zieh-modus .hinweis { pointer-events: auto; cursor: grab; }
.zieh-modus .hinweis.wird-gezogen { cursor: grabbing; }
.zieh-modus .hinweis:hover .hinweis-feld { stroke-width: 2; }