/* toolbar.css — die eine Werkzeugleiste für 2D und 3D (siehe toolbar.js). * * Formsprache bewusst übernommen und nicht neu erfunden: * Glas + Blaugrau .............. #hud / #toolbar in webmap/static/index.html * Goldener Griffbalken ......... #hud::before am Handy (index.html @640px) * Grünes „✓ Fertig" ............ #toolbar .tb-done * Blauer Zusatz-Knopf .......... #toolbar .tb-extra * Bottom-Sheet + Safe-Area ..... #marker-picker-modal (index.html:463) * * Am Handy (≤760px, deckt 2D-640 und 3D-760 ab) dockt die Leiste unten an und * ERSETZT das HUD. Am Desktop schwebt sie als Kapsel mittig unten. * * Die 3D-Ansicht hat eine eigene, kühlere Palette und setzt in revier3d/index.html * bereits --ruid-*-override für ui-dialog.js. Hier läuft es genauso über * --rt-*-override, damit es keine zweite Stylesheet-Fassung braucht. */ .rt { position: fixed; z-index: 100000; /* über Karte und HUD, unter __revierUI-Dialogen (100001+) */ box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.4; color: var(--rt-ink-override, #e6ecf5); background: var(--rt-surface-override, linear-gradient(180deg, rgba(20,26,39,.94), rgba(9,13,21,.96))); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--rt-line-override, rgba(255,255,255,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px rgba(0,0,0,.5); user-select: none; overscroll-behavior: contain; } .rt[hidden] { display: none; } /* Werkzeug aktiv → HUD räumt das Feld. Gilt für BEIDE Ansichten: 2D nutzt #hud, 3D .hud. Bewusst hier und nicht in den beiden index.html — so bleibt das Ein-/Ausblenden an einer Stelle und kann nicht auseinanderlaufen. Nur am Handy: dort konkurrieren Leiste und HUD wirklich um den Platz. Am Desktop ist Platz genug, und das pauschale Ausblenden kostete bei jedem Werkzeugwechsel zwei Extra-Taps — von „📏 Messen" zu „📍 Marker" musste man erst ✕ drücken, damit das HUD zurückkommt. Das ist der häufigste Handgriff beim Revierbegang. (30.07.2026) */ @media (max-width: 760px) { body.tool-aktiv #hud, body.tool-aktiv .hud { display: none !important; } } /* ── Desktop: schwebende Kapsel mittig, ÜBER dem HUD (09.08.2026) ──────────── Vorher bottom:18px (HUD war oben). HUD jetzt unten → Werkzeugleiste stackt via --hud-h (revier3d/src/main.js:layoutToolWidgets, auf allen Viewports). In 2D gibt es keine .hud-Element mit der Klasse .hud, sondern #hud — die Variable wird dort von app.js gesetzt (siehe Kommentar unten). */ @media (min-width: 761px) { /* OBEN mittig statt unten (11.08.2026, t0mi: die Leiste stand bei Messen, Gebieten, Pirschweg und Einsehbarkeit mitten im Bild). Sie schwebte ueber dem HUD und lag damit genau dort, wo man beim Zeichnen hinsieht. Oben ist der Streifen frei: links endet das Anzeige-Menue bei etwa 238 px, rechts steht seit dem Navigations-Umbau nichts mehr (die Pillen-Saeule ist weg). 620 px mittig heisst linke Kante bei 1024 px Fenster rund 202 px — knapp, deshalb weiter unten eine schmalere Stufe. */ .rt { left: 50%; top: calc(var(--trialbar-h, 0px) + 14px); bottom: auto; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); border-radius: 15px; padding: 12px 14px; } .rt-griff { display: none; } } @media (min-width: 761px) and (max-width: 1100px) { /* Schmaler Desktop: 620 px mittig kaemen dem Anzeige-Menue zu nahe. */ .rt { width: min(480px, calc(100vw - 260px)); } } /* ── Handy: angedocktes Bottom-Sheet ──────────────────────────────────────── */ @media (max-width: 760px) { .rt { left: 0; right: 0; bottom: 0; border-radius: 20px 20px 0 0; border-bottom: 0; border-color: rgba(255,207,122,.5); padding: 6px 12px max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 32px rgba(0,0,0,.62), 0 -1px 16px rgba(255,207,122,.14); max-height: 82vh; max-height: 82dvh; /* dvh: echte Höhe trotz Safari-Toolbar */ } /* Griffbalken in Gold wie am HUD — „hier ist unten, hier greifst du an". */ .rt-griff { flex: 0 0 auto; width: 64px; height: 6px; margin: 5px auto 2px; border-radius: 4px; background: rgba(255,207,122,.78); } /* iOS-Mindest-Tapfläche. Das sind die Knöpfe, die man beim Zeichnen trifft. */ .rt-done, .rt-extra, .rt-undo, .rt-x, .rt-knopf { min-height: 46px; } .rt-chip, .rt-kachel { min-height: 60px; } .rt-name, .rt-emoji { min-height: 46px; font-size: 16px; } /* 16px = iOS zoomt nicht rein */ } /* ── Kopfzeile ────────────────────────────────────────────────────────────── */ .rt-kopf { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .rt-icon { font-size: 17px; line-height: 1; flex: 0 0 auto; } .rt-titel { font-weight: 600; font-size: 14px; color: #f0f4fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Live-Wert (4,2 ha · 312 m · ↑ 47 m) — ersetzt die alte Statuspille #measure-info */ .rt-stat { margin-left: auto; font-variant-numeric: tabular-nums; color: #ffe08a; font-weight: 600; white-space: nowrap; } .rt-stat[hidden] { display: none; } .rt-x { flex: 0 0 auto; margin-left: 6px; min-width: 38px; appearance: none; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.07); color: #cbd5e3; font-size: 15px; cursor: pointer; padding: 6px 10px; font-family: inherit; } .rt-x:hover { background: rgba(255,255,255,.16); color: #fff; } .rt-hint { flex: 0 0 auto; color: #a9b6c8; font-size: 12.5px; } .rt-hint[hidden] { display: none; } /* blitz(): kurze Rückmeldung in der Leiste statt eines Popups */ .rt-hint.rt-blitz { color: #ffd08a; font-weight: 600; } /* ── Ergebnisblock (setWerteBlock) ───────────────────────────────────────────── Was frueher als Karte in der Bildschirmmitte stand (#measure-result, „Fertig"- Knopf, Werkzeug danach aus), steht jetzt hier. Deshalb darf er auch im Kompakt-Modus NICHT verschwinden: er ist das Ergebnis, nicht die Bedienung. */ .rt-werte { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .rt-werte[hidden] { display: none; } .rt-werte-z { display: flex; align-items: baseline; gap: 8px; } .rt-werte-l { color: #a9b6c8; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-werte-v { margin-left: auto; color: #ffe08a; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .rt-werte-haupt .rt-werte-v { font-size: 19px; } /* ── Typ-Streifen ─────────────────────────────────────────────────────────── */ .rt-typenzeile { display: flex; align-items: stretch; gap: 6px; flex: 0 0 auto; min-width: 0; } .rt-typenzeile[hidden] { display: none; } .rt-streifen { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0; padding: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .rt-streifen::-webkit-scrollbar { height: 4px; } .rt-streifen::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; } .rt-mehr { flex: 0 0 auto; min-width: 40px; appearance: none; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.07); color: #cbd5e3; cursor: pointer; font-size: 15px; font-family: inherit; } .rt-mehr[hidden] { display: none; } .rt-mehr:hover { background: rgba(255,255,255,.16); color: #fff; } .rt-chip, .rt-kachel { appearance: none; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.06); color: #c8d2e0; padding: 6px 7px; touch-action: manipulation; transition: background .15s, border-color .15s, color .15s; } .rt-chip { flex: 0 0 auto; width: 72px; scroll-snap-align: start; } .rt-chip:hover, .rt-kachel:hover { background: rgba(255,255,255,.14); color: #fff; } /* Gewählter Typ in Gold — dieselbe Sprache wie ein aktiver HUD-Knopf (#hud button.on) */ .rt-chip[aria-selected="true"], .rt-kachel[aria-selected="true"] { background: rgba(201,180,88,.26); border-color: rgba(201,180,88,.62); color: #f7efcb; box-shadow: inset 0 0 0 1px rgba(201,180,88,.2); } .rt-ic { font-size: 21px; line-height: 1; } /* JEDES Bild im Icon-Slot begrenzen, nicht nur img.typ-ico: die Icon-Bauer der App liefern unterschiedliche Klassen (MarkerTypes.iconHtml → .typ-ico, main.js zoneIconHtml → .fb-ico). Mit dem engeren Selektor blieben die 3D-Gebietsicons ungebremst und machten aus 60-px-Kacheln 234-px-Kacheln — die Leiste war dann 463 px hoch und lag ueber der halben Karte. Die Leiste darf nicht davon abhaengen, wie der Aufrufer seine Bilder nennt. */ .rt-ic img { width: 24px !important; height: 24px !important; max-width: 24px; object-fit: contain; vertical-align: 0 !important; } .rt-lbl { font-size: 10.5px; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Ausgeklapptes Vollraster — im SELBEN Sheet, kein zweites Popup ────────── */ .rt-raster-huelle { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 0; } .rt-raster-huelle[hidden] { display: none; } .rt-suche { flex: 0 0 auto; box-sizing: border-box; width: 100%; appearance: none; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); color: #e6ecf5; font-family: inherit; font-size: 13px; padding: 9px 11px; } .rt-suche::placeholder { color: #7f8da0; } .rt-kats { display: flex; gap: 6px; overflow-x: auto; flex: 0 0 auto; padding-bottom: 2px; } .rt-kats[hidden] { display: none; } .rt-kat { flex: 0 0 auto; appearance: none; cursor: pointer; font-family: inherit; font-size: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); color: #b9c5d5; padding: 7px 12px; white-space: nowrap; touch-action: manipulation; } .rt-kat.on { background: rgba(201,180,88,.24); border-color: rgba(201,180,88,.55); color: #f4ecc4; } /* Nur das Raster scrollt — Kopfzeile, Suche, Kategorien und Aktionen bleiben stehen. Genau der Fix, der am 29.07. schon für den Marker-Picker nötig war. */ .rt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; max-height: 40vh; padding: 2px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rt-kachel { width: auto; min-width: 0; } .rt-leer { grid-column: 1 / -1; color: #8f9db0; text-align: center; padding: 14px 0; font-size: 12.5px; } /* ── Emoji + Name ─────────────────────────────────────────────────────────── */ .rt-felder { display: flex; gap: 7px; flex: 0 0 auto; } .rt-felder[hidden] { display: none; } .rt-emoji, .rt-name { appearance: none; box-sizing: border-box; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); color: #e6ecf5; font-family: inherit; font-size: 13px; padding: 9px 11px; } .rt-emoji { flex: 0 0 auto; width: 62px; text-align: center; font-size: 18px; } .rt-name { flex: 1 1 auto; min-width: 0; } .rt-emoji[hidden], .rt-name[hidden] { display: none; } .rt-emoji::placeholder, .rt-name::placeholder { color: #7f8da0; } .rt-emoji:focus, .rt-name:focus, .rt-suche:focus { outline: none; border-color: rgba(201,180,88,.6); box-shadow: 0 0 0 2px rgba(201,180,88,.18); } /* ── Aktionszeile ─────────────────────────────────────────────────────────── */ .rt-aktionen { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .rt-undo, .rt-extra, .rt-done { appearance: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 9px 14px; touch-action: manipulation; } .rt-undo { flex: 0 0 auto; min-width: 46px; border: 1px solid rgba(230,236,245,.3); background: rgba(230,236,245,.12); color: #e6ecf5; } .rt-undo:hover:not(:disabled) { background: rgba(230,236,245,.22); } .rt-extra { flex: 0 1 auto; border: 1px solid rgba(43,127,255,.55); background: rgba(43,127,255,.24); color: #cfe0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-extra:hover:not(:disabled) { background: rgba(43,127,255,.36); color: #fff; } .rt-done { flex: 1 1 auto; margin-left: auto; border: 1px solid rgba(127,168,105,.55); background: rgba(127,168,105,.28); color: #dcecc9; } .rt-done:hover:not(:disabled) { background: rgba(127,168,105,.42); color: #fff; } .rt-undo[hidden], .rt-extra[hidden], .rt-done[hidden] { display: none; } /* ── Kompakte Zusatzknoepfe (📷 Foto, 📍 Standort) ───────────────────────────── Sie sitzen in derselben Zeile wie „✓ Fertig" und sind bewusst nur Icon: die Leiste soll durch sie NICHT hoeher werden, sie deckt am Handy ohnehin schon ein Drittel der Karte ab. Dieselbe 46-px-Tapflaeche wie die uebrigen Knoepfe. */ .rt-knoepfe { display: inline-flex; gap: 7px; flex: 0 0 auto; } .rt-knoepfe[hidden] { display: none; } .rt-knopf { position: relative; flex: 0 0 auto; min-width: 46px; appearance: none; cursor: pointer; font-family: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.07); color: #cbd5e3; padding: 6px 8px; touch-action: manipulation; transition: background .15s, border-color .15s; } .rt-knopf:hover:not(:disabled) { background: rgba(255,255,255,.16); } .rt-knopf:disabled { opacity: .45; cursor: default; } .rt-knopf-ic { font-size: 19px; line-height: 1; } /* „an" = es haengt schon etwas dran (Fotos ausgewaehlt) — gleiche Goldsprache wie ein aktiver HUD-Knopf, damit man es beim Zeichnen aus dem Augenwinkel sieht. */ .rt-knopf.rt-knopf-an { background: rgba(201,180,88,.26); border-color: rgba(201,180,88,.62); color: #f7efcb; } .rt-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; box-sizing: border-box; background: #c9b458; color: #1a1408; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; } .rt-badge[hidden] { display: none; } /* Mit Zusatzknoepfen darf „✓ Fertig" schrumpfen, statt die Zeile umbrechen zu lassen. */ .rt-aktionen .rt-knoepfe + .rt-extra + .rt-done { min-width: 0; } .rt-undo:disabled, .rt-extra:disabled, .rt-done:disabled { opacity: .45; cursor: default; } @media (prefers-reduced-motion: reduce) { .rt-chip, .rt-kachel, .rt-x, .rt-mehr { transition: none; } } /* ── Kompakt-Modus: die Leiste zieht sich zusammen, sobald gezeichnet wird ────── Ausgeklappt ist sie knapp 290 px hoch. Beim Marker-Setzen ist das richtig (man waehlt ja gerade), beim Zeichnen einer Flaeche nicht: dort liegt sie ueber genau dem Stueck Karte, das man umfahren will — und der zweite Finger (Kamera bewegen) landet auf ihr statt auf der Karte. Typ-Streifen, Raster und Felder gehen deshalb weg, sobald der erste Strich beginnt. Die gewaehlte Art rueckt sichtbar in die Kopfzeile, damit klar bleibt, WAS man zeichnet. */ .rt.rt-kompakt .rt-typenzeile, .rt.rt-kompakt .rt-raster-huelle, .rt.rt-kompakt .rt-felder, .rt.rt-kompakt .rt-hint { display: none; } /* Der Art-Chip ist ein KNOPF: antippen klappt die Typenzeile wieder auf, ohne den Kompakt-Modus zu verlassen (siehe typZeileUmschalten in toolbar.js). Vorher war die gewaehlte Art nach dem ersten Strich unwiderruflich — falsch gewaehlt hiess loeschen und neu zeichnen. `appearance`/`font-family` sind Pflicht, seit es ein