:root {
  --text: #18201c;
  --leise: #5f6b66;
  --linie: #e1e6e3;
  --flaeche: #f3f5f4;
  --karte-bg: #ffffff;
  --seite-bg: #eef1ef;
  --akzent: #16794a;
  --akzent-dunkel: #0f5c37;
  --dunkel: #16241d;
  --warnung: #b3261e;
  --tour: #ff0099;
  --zubringer: #6a1b9a;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(16, 24, 20, .06), 0 2px 8px rgba(16, 24, 20, .06);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--seite-bg);
}

body { display: flex; }

button, input { font: inherit; color: inherit; }

/* ---------- Seitenleiste ---------- */

#seite {
  width: 380px;
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--seite-bg);
  border-right: 1px solid var(--linie);
  z-index: 1001;
}

.inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}

#karte { flex: 1; height: 100%; position: relative; }  /* Bezugsrahmen für Leaflet, sonst verrutscht die Karte nach dem Wechsel vom Handy- zum Breitbild-Layout */
#karte.leaflet-container { background: #fff; }

.griff { display: none; }

.kopf {
  padding: 14px 12px 12px;
  background: var(--dunkel);
  color: #fff;
}
.marke { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
h1 { font-size: 17px; margin: 0; letter-spacing: .01em; }

.suchbox { position: relative; }
#suche { display: flex; background: #fff; border-radius: 10px; overflow: hidden; }
#suche input {
  flex: 1; min-width: 0; border: 0; padding: 9px 12px; outline: none; color: var(--text); background: transparent;
}
.icon-knopf { border: 0; background: transparent; color: var(--leise); padding: 0 12px; cursor: pointer; }
.icon-knopf:hover { color: var(--text); }

#vorschlaege {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000;
  list-style: none; margin: 0; padding: 4px 0;
  background: #fff; color: var(--text); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-height: 340px; overflow-y: auto;
}
#vorschlaege li { padding: 7px 12px; cursor: pointer; }
#vorschlaege li span { display: block; font-size: 11px; color: var(--leise); }
#vorschlaege li:hover, #vorschlaege li.aktiv { background: var(--flaeche); }

/* ---------- Blöcke ---------- */

.block {
  background: var(--karte-bg);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 12px 14px 14px;
  margin-top: 12px;
}

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 0 0 10px; }
h3 { font-size: 13px; margin: 14px 0 6px; }

details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary h2, details > summary h3 { margin: 0; }
details > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise);
  transform: rotate(45deg); transition: transform .15s;
}
details[open] > summary::after { transform: rotate(-135deg); }
details.block[open] > summary { margin-bottom: 10px; }
.unterblock { margin-top: 12px; }
.unterblock[open] > summary { margin-bottom: 6px; }

.status-text { font-size: 12px; color: var(--leise); margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.hinweis { color: var(--leise); font-size: 12px; margin: 8px 0 0; }
.anleitung { margin: 0 0 10px; }
small { color: var(--leise); }

/* ---------- Knöpfe und Felder ---------- */

button {
  padding: 7px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
button:hover { border-color: #c4ccc8; }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button.haupt:hover { background: var(--akzent-dunkel); }
button:disabled { opacity: .5; cursor: default; }
button.mini { padding: 1px 7px; font-size: 12px; border-radius: 7px; }
.text-knopf { border: 0; background: none; color: var(--akzent); padding: 0; font-size: 12px; font-weight: 600; }
.text-knopf:hover { text-decoration: underline; }

input[type=number], #tour-name {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 9px; background: #fff;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Filter als ruhige Liste mit Schaltern */
.filterliste { margin-bottom: 8px; }
.filtergruppe { font-size: 11px; color: var(--leise); margin: 10px 0 2px; }
.filtergruppe:first-child { margin-top: 0; }
.filterzeile {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px;
  border: 0; border-top: 1px solid var(--linie); border-radius: 0; background: none; text-align: left;
}
.filtergruppe + .filterzeile { border-top: 0; }
.filterzeile:hover { background: var(--flaeche); }
.filtername { flex: 1; font-size: 14px; }
.filterzeile .anzahl { font-size: 12px; color: var(--leise); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.filterzeile[aria-checked="false"] .symbol, .filterzeile[aria-checked="false"] .filtername { opacity: .4; }
.mini-schalter { flex: none; width: 30px; height: 18px; border-radius: 9px; background: #cfd6d2; position: relative; transition: background .15s; }
.mini-schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.filterzeile[aria-checked="true"] .mini-schalter { background: var(--akzent); }
.filterzeile[aria-checked="true"] .mini-schalter::after { transform: translateX(12px); }

/* Schalter statt Häkchen */
.schalter { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter .spur {
  flex: none; width: 34px; height: 20px; border-radius: 10px; background: #cfd6d2; position: relative; transition: background .15s;
}
.schalter .spur::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.schalter input:checked + .spur { background: var(--akzent); }
.schalter input:checked + .spur::after { transform: translateX(14px); }
.schalter input:focus-visible + .spur { outline: 2px solid var(--akzent); outline-offset: 2px; }

.schalter-zeile { display: flex; align-items: center; gap: 6px; }
.schalter-zeile.aus { opacity: .45; }
.schalter-zeile.aus .schalter { cursor: default; }
.feld-titel { display: flex; align-items: center; gap: 4px; }
.titel-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.titel-zeile h2, .titel-zeile h3 { margin: 0; }
.info-knopf {
  flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid #c4ccc8; background: #fff; color: var(--leise);
  font: italic 600 11px/16px Georgia, serif; text-align: center;
}
.info-knopf[aria-expanded="true"] { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.info-text { margin: -2px 0 4px 44px; font-size: 12px; color: var(--leise); }

.regler { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--leise); }
.regler input { flex: 1; accent-color: var(--akzent); }
#deckkraft-wert { width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

.umschalter { display: flex; background: var(--flaeche); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.umschalter button { flex: 1; border: 0; background: transparent; border-radius: 8px; color: var(--leise); }
.umschalter button.aktiv { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--schatten); }

.zuruecksetzen-zeile { display: flex; justify-content: flex-end; margin-top: 8px; }
.rand-knopf {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px;
  border: 1px solid #c4ccc8; border-radius: 8px; background: #fff; color: var(--text);
}
.rand-knopf span { font-size: 14px; line-height: 1; }
.rand-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.vorgaben-kopf {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 12px; color: var(--leise); font-weight: 600;
}
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.feld { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--leise); }
.eingabe { position: relative; }
.eingabe input { padding-right: 28px; color: var(--text); }
.eingabe em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--leise); }

/* Tour als Zeitstrahl */
.zeitstrahl { position: relative; margin: 2px 0 10px; }
.zeitstrahl::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--linie); }
.halt, #stationen li { position: relative; display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.punkttext { flex: 1; min-width: 0; font-size: 13px; }
#stationen { list-style: none; margin: 0; padding: 0; }
#stationen .trailzeile { display: flex; align-items: center; gap: 9px; width: 100%; }
#stationen .stationssymbol {
  flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--linie);
}
#stationen .trailname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
#stationen button { padding: 0 6px; font-size: 12px; border-radius: 6px; }

.punkt {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .3);
  color: #fff; font-weight: 700; font-size: 11px; position: relative; z-index: 1;
}
.punkt.start { background: var(--akzent); }
.punkt.ziel { background: var(--warnung); }
.punkt.zwischen { background: var(--zubringer); border-radius: 6px; }
.punkt.hoehe { background: #e8833a; font-size: 10px; }
.leaflet-marker-icon.punkt { width: 26px !important; height: 26px !important; font-size: 12px; }

/* ---------- Ergebnis ---------- */

.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kennzahlen div { background: var(--flaeche); border-radius: 10px; padding: 8px 10px; }
.kennzahlen b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kennzahlen span { font-size: 11px; color: var(--leise); }

#e-pruefung { margin: 10px 0 4px; font-weight: 600; }
#e-pruefung.ok { color: var(--akzent); }
#e-pruefung.warnung { color: var(--warnung); }

.meldung { background: #fff7e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 12px; }
.meldung.warnung { background: #fdecea; border-color: #f2b8b5; }
.meldung button { display: block; margin-top: 6px; font-size: 12px; }

.profil { position: relative; height: 90px; background: var(--flaeche); border-radius: 10px; margin-top: 10px; }
.profil svg { width: 100%; height: 100%; display: block; }
.profil .flaeche { fill: #ffd1eb; }
.profil .linie { fill: none; stroke: var(--tour); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
#profil-max, #profil-min { position: absolute; left: 8px; font-size: 11px; color: var(--leise); }
#profil-max { top: 4px; }
#profil-min { bottom: 4px; }
.legende { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: var(--tour); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc; vertical-align: middle; margin-right: 6px; }

#e-trails-summe { margin: 0 0 4px; }
#e-trails { list-style: none; margin: 0; padding: 0; }
#e-trails li {
  display: grid; grid-template-columns: 20px 18px 1fr auto; gap: 7px; align-items: start;
  padding: 5px 6px; border-radius: 8px; cursor: pointer;
}
#e-trails li:hover { background: var(--flaeche); }
/* kleines Hm-Symbol am Ende jeder Zeile: öffnet die Höhenkurve des Trails */
.hm-knopf {
  align-self: center; display: flex; align-items: center; gap: 3px; padding: 2px 6px;
  border: 1px solid #c4ccc8; border-radius: 7px; background: #fff; color: var(--leise);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.hm-knopf svg { display: block; }
.hm-knopf:hover { color: var(--text); border-color: var(--leise); }
.hm-knopf[aria-expanded="true"] { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }

/* Höhenkurve eines Trails als kleines Fenster über der Karte */
.hm-fenster {
  position: fixed; left: 396px; bottom: 24px; z-index: 1100; width: 320px;
  background: var(--karte-bg); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  padding: 10px 12px 12px;
}
.hm-fenster[hidden] { display: none; }
.hm-kopf { display: flex; align-items: center; gap: 7px; }
.hm-kopf b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hm-werte { margin: 2px 0 0; }
/* Raster: Höhen links neben der Kurve (oben höchster, unten tiefster Punkt), km darunter */
.hm-raster { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 6px; margin-top: 8px; }
.hm-kurve { grid-column: 2; grid-row: 1 / 3; height: 120px; background: var(--flaeche); border-radius: 8px; overflow: hidden; }
.hm-kurve svg { width: 100%; height: 100%; display: block; }
.hm-kurve .linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hm-kurve .flaeche { opacity: .18; }
.hm-achse { font-size: 11px; color: var(--leise); font-variant-numeric: tabular-nums; text-align: right; }
#hmf-hoch { grid-column: 1; grid-row: 1; }
#hmf-tief { grid-column: 1; grid-row: 2; align-self: end; }
.hm-achse.km { grid-column: 2; grid-row: 3; display: flex; justify-content: space-between; margin-top: 2px; }
#e-trails .nr { font-size: 12px; font-weight: 700; color: var(--leise); text-align: right; }
#e-trails .symbol { margin-top: 2px; }
#e-trails .name { font-size: 13px; }
#e-trails .werte { display: block; font-size: 11px; color: var(--leise); }
#e-trails .auto { font-size: 10px; color: var(--leise); border: 1px solid var(--linie); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

.anteil { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 6px; font-size: 12px; padding: 1px 0; }
.balken { height: 8px; background: var(--flaeche); border-radius: 4px; overflow: hidden; }
.balken i { display: block; height: 100%; }
.anteil b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

#e-zeilen { margin: 0; padding-left: 18px; font-size: 12px; }
#e-zeilen li { padding: 1px 0; }

.sichern { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.sichern .titel-zeile { margin-bottom: 8px; }
.speichern { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 6px; }
.speichern [hidden] { display: none; }
.speichern button { min-width: 0; padding: 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

/* Gespeicherte Touren: Ordner, Reihenfolge per Ziehen oder ⋯-Menü */
.touren-werkzeug { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.touren-werkzeug .hinweis { margin: 0; }
.ordner { margin-bottom: 6px; }
.ordner-kopf { display: flex; align-items: center; gap: 6px; border-radius: 9px; }
.ordner-kopf.ziel-hover { background: #e3f1e9; box-shadow: inset 0 0 0 1px var(--akzent); }
.ordner-auf {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border: 0; background: var(--flaeche); border-radius: 9px; text-align: left; color: var(--text);
}
.ordner-auf .ordner-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordner-auf .anzahl { font-size: 12px; color: var(--leise); }
.ordner-auf::after {
  content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(-45deg); transition: transform .15s;
}
.ordner-auf[aria-expanded="true"]::after { transform: rotate(45deg); }
.ordner-menue, .tour-menue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 2px; }
.ordner-menue[hidden], .tour-menue[hidden] { display: none; }
.ohne-titel { font-size: 11px; color: var(--leise); margin: 10px 0 2px; }
.namensfeld { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--akzent); border-radius: 8px; }

.tourliste { list-style: none; margin: 2px 0 0; padding: 0 0 0 6px; min-height: 8px; }
.tourliste:empty::after { content: "Touren hierher ziehen"; display: block; padding: 6px 8px; font-size: 12px; color: var(--leise); border: 1px dashed var(--linie); border-radius: 8px; }
.tourliste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 4px;
  border-top: 1px solid var(--linie); background: var(--karte-bg); cursor: grab;
}
.tourliste li:first-child { border-top: 0; }
.tourliste li.zieht { opacity: .45; }
.ziehgriff { color: #b3bcb7; font-size: 12px; letter-spacing: -2px; cursor: grab; user-select: none; }
.tour-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tour-text b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-text .info { font-size: 11px; color: var(--leise); }
.mini-link { font-size: 12px; color: var(--akzent); }
.tourliste li.gezeigt { background: #fdeaf5; border-radius: 8px; }
.tourliste li.gezeigt [data-a="zeigen"] { background: #ff0099; border-color: #ff0099; color: #fff; }
.tour-menue .menue-zeile { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tour-menue .menue-zeile label { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tour-menue .loeschen { margin-left: auto; color: var(--warnung); border-color: #f2b8b5; }
.tour-menue .rueckfrage { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; background: #fdecea; border: 1px solid #f2b8b5; border-radius: 8px; color: var(--warnung); }
.tour-menue .rueckfrage[hidden] { display: none; }
.tour-menue .rueckfrage .knoepfe { display: flex; gap: 6px; margin-left: auto; }
.tour-menue .rueckfrage .ja { background: var(--warnung); border-color: var(--warnung); color: #fff; }
.tour-menue .menue-status { flex-basis: 100%; }
.tour-menue { flex-basis: 100%; padding-left: 18px; font-size: 12px; color: var(--leise); }
.tour-menue select, #tour-ordner { padding: 4px 6px; border: 1px solid var(--linie); border-radius: 7px; background: #fff; font-size: 12px; }

.speichern-ziel { display: flex; gap: 6px; }
.speichern-ziel #tour-name { margin-top: 0; flex: 1; min-width: 0; }
#tour-ordner { max-width: 45%; font-size: 13px; padding: 6px 8px; border-radius: 9px; }

/* Spass: Bier-Knopf mit aufsteigender Kohlensäure, ohne eigene Box */
.spass { margin: 4px 0 8px; }
.bier-knopf {
  position: relative; overflow: hidden; width: 100%; min-height: 78px;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 2px solid #d99a00; border-radius: 14px; color: #5a3500;
  background: linear-gradient(180deg, #ffd23f 0%, #f7b500 60%, #e8a200 100%);
  box-shadow: 0 2px 6px rgba(150, 100, 0, .25);
}
.bier-knopf:hover { border-color: #b97f00; }
.bier-knopf[aria-pressed="true"] {
  border-color: #7a4a00; box-shadow: inset 0 0 0 2px #fff6d6, 0 0 0 3px rgba(247, 181, 0, .35);
}
.bier-glas, .breze, .bier-text { position: relative; z-index: 1; flex: none; }
.bier-text { flex: 1; display: flex; flex-direction: column; text-align: left; }
.bier-text b { font-size: 22px; letter-spacing: .02em; }
.bier-text small { font-size: 12px; color: #6b4300; }
.blasen { position: absolute; inset: 0; pointer-events: none; }
.blasen i {
  position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .75); box-shadow: inset -1px -1px 0 rgba(200, 140, 0, .35);
  animation: aufsteigen 3.4s linear infinite;
}
.blasen i:nth-child(1) { left: 8%; animation-delay: 0s; }
.blasen i:nth-child(2) { left: 18%; width: 4px; height: 4px; animation-delay: 1.1s; animation-duration: 2.8s; }
.blasen i:nth-child(3) { left: 29%; animation-delay: 2.2s; }
.blasen i:nth-child(4) { left: 38%; width: 3px; height: 3px; animation-delay: .6s; animation-duration: 2.5s; }
.blasen i:nth-child(5) { left: 47%; width: 5px; height: 5px; animation-delay: 1.7s; }
.blasen i:nth-child(6) { left: 56%; animation-delay: 2.9s; animation-duration: 3.8s; }
.blasen i:nth-child(7) { left: 64%; width: 4px; height: 4px; animation-delay: .3s; }
.blasen i:nth-child(8) { left: 73%; animation-delay: 1.4s; animation-duration: 3s; }
.blasen i:nth-child(9) { left: 82%; width: 3px; height: 3px; animation-delay: 2.5s; animation-duration: 2.6s; }
.blasen i:nth-child(10) { left: 91%; width: 5px; height: 5px; animation-delay: .9s; }
@keyframes aufsteigen {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(2px, -45px); }
  90% { opacity: .9; }
  100% { transform: translate(-1px, -92px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .blasen i { animation: none; opacity: 0; } }

.bier-marker { background: none; border: 0; }
.bier-marker div {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #d99a00;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Untere Leiste: immer sichtbar */
.aktionen {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--karte-bg);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -2px 10px rgba(16, 24, 20, .05);
}
.aktionen .status-text:empty { display: none; }
.aktionen .status-text { margin-bottom: 8px; }
.knoepfe { display: flex; gap: 8px; }
.knoepfe .haupt { flex: 1; padding: 10px 12px; font-size: 15px; }

/* Ladeanzeige mitten auf der Karte (Desktop: rechts neben dem Planer) */
.lade {
  position: fixed; z-index: 1200; left: calc(380px + (100vw - 380px) / 2); top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 18px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  font-size: 14px; font-weight: 600; color: var(--text); pointer-events: none;
  width: max-content; white-space: nowrap;
}
.lade[hidden] { display: none; }
.kreisel {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #ffd1eb; border-top-color: var(--tour); animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
/* kleiner Kreisel auch in der Statuszeile unten, z. B. wenn der Planer auf dem Handy offen ist */
#tour-status.laedt { display: flex; align-items: center; gap: 8px; }
#tour-status.laedt::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #ffd1eb; border-top-color: var(--tour); animation: drehen .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .kreisel, #tour-status.laedt::before { animation-duration: 2.4s; } }

/* ---------- Karte: Popups und Marker ---------- */

.popup { min-width: 180px; }
.popup b { font-size: 14px; }
.popup .zeile-symbol { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.popup button { margin-top: 8px; width: 100%; }
.popup .drei { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.popup .drei button { margin-top: 0; }
.popup .koordinaten { display: block; color: var(--leise); font-size: 11px; }
.popup .untertitel { display: block; color: var(--leise); font-size: 11px; margin-top: 2px; }

.nummer {
  background: #fff; border: 2px solid var(--text); border-radius: 50%;
  width: 22px !important; height: 22px !important; line-height: 18px; text-align: center; font-weight: 700; font-size: 12px;
}
.pfeil, .trail-symbol { background: none; border: 0; }
.pfeil div { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.trail-symbol svg { display: block; opacity: .75; }
.symbol { flex: none; display: block; }

/* ---------- Handy: Planer als ausklappbares Blatt über der Karte ---------- */

@media (max-width: 760px) {
  body { display: block; }
  #karte { position: fixed; inset: 0; height: auto; }
  /* Planer als Blatt unten: zugeklappt nur Griff und «Tour berechnen», offen fast ganze Höhe */
  #seite {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    border-right: 0; border-radius: 16px 16px 0 0; overflow: hidden;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .2);
  }
  #seite.offen { height: 88vh; height: 88dvh; }
  #seite:not(.offen) .kopf, #seite:not(.offen) .inhalt, #seite:not(.offen) #leeren { display: none; }
  .lade { left: 50%; top: calc((100dvh - var(--blatt, 90px)) / 2); }
  .hm-fenster { left: 12px; right: 12px; top: 12px; bottom: auto; width: auto; }
  .griff {
    display: flex; justify-content: center; align-items: center; height: 28px; padding: 0;
    border: 0; border-radius: 0; background: var(--dunkel); flex: none;
  }
  .griff span { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
  .kopf { padding-top: 4px; }
  .marke { margin-bottom: 6px; }
  .marke > svg, .marke h1 { display: none; }  /* nur die Kontozeile bleibt */
  .leaflet-bottom { bottom: var(--blatt, 90px); }
}

/* ---------- Anmelden ---------- */

body.login-seite {
  display: flex; align-items: center; justify-content: center; min-height: 100%;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--dunkel);
}
.login-karte {
  width: 100%; max-width: 360px; background: var(--karte-bg); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); padding: 20px 20px 18px;
}
.login-karte .marke { margin-bottom: 14px; }
.login-karte h1 { font-size: 20px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form[hidden] { display: none; }
.login-form h2 { margin: 0; }
.login-form .hinweis { margin: 0; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--leise); }
.login-form input {
  padding: 10px 11px; border: 1px solid var(--linie); border-radius: 9px; background: #fff; font-size: 16px; color: var(--text);
}
.login-form button { margin-top: 4px; padding: 10px 12px; font-size: 15px; }
.login-meldung { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: var(--warnung); }

/* angemeldeter Zugang oben rechts in der Kopfzeile */
.konto { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c9d4ce; }
.konto[hidden] { display: none; }
.konto .text-knopf { color: #fff; }

/* ---------- Zugänge (nur Admin) ---------- */

.zugangsliste { list-style: none; margin: 0 0 10px; padding: 0; }
.zugangsliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 2px; border-top: 1px solid var(--linie); }
.zugangsliste li:first-child { border-top: 0; }
.zugangsliste .wer { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zugangsliste .wer b { font-size: 13px; }
.zugangsliste .wer span { font-size: 11px; color: var(--leise); }
.rolle { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; background: var(--flaeche); color: var(--leise); }
.rolle.admin { background: #e3f1e9; color: var(--akzent-dunkel); }
.zugangsliste .loeschen { color: var(--warnung); border-color: #f2b8b5; }
.zugangsliste .rueckfrage { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  background: #fdecea; border: 1px solid #f2b8b5; border-radius: 8px; color: var(--warnung); font-size: 12px; }
.zugangsliste .rueckfrage[hidden] { display: none; }
.zugangsliste .rueckfrage .knoepfe { display: flex; gap: 6px; margin-left: auto; }
.zugangsliste .rueckfrage .ja { background: var(--warnung); border-color: var(--warnung); color: #fff; }
.einladen { display: flex; gap: 6px; }
.einladen input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 9px; background: #fff; }
.einladen-link { margin-top: 8px; padding: 8px 10px; background: #e3f1e9; border-radius: 9px; font-size: 12px; }
.einladen-link[hidden] { display: none; }
.einladen-link p { margin: 0 0 6px; }
.einladen-link .zeile { display: flex; gap: 6px; }
.einladen-link input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #b9dcc8; border-radius: 7px; background: #fff; font-size: 12px; }