@charset "UTF-8"; /* 2.20.38: Der Live-Server liefert CSS ohne charset - Sonderzeichen in content: deshalb als \XXXX-Codes (ASCII). */ /* VirtualMap – Oberflaeche. Dunkle Leisten wie die alte App, helle Karte. */ :root { --bar: #17325c; --bar2: #22447a; --line: #c9d3e0; --accent: #2176c1; --danger: #c81e1e; --panel: #f4f7fb; --text: #1b2733; --muted: #6b7a8c; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font: 14px/1.35 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--text); background: #0f1f3a; overflow: hidden; } button { font: inherit; cursor: pointer; } :root { --tb: 40px; } /* Groesse der Werkzeugknoepfe - Regler in den Eigenschaften (EINST.knopf) */ #app { height: 100%; display: grid; grid-template-columns: auto 1fr 300px; /* body.ohne-panel: rechte Spalte weg (Knopf in der Kopfleiste) */ grid-template-rows: 26px 48px 1fr; grid-template-areas: "kopf kopf kopf" "top top top" "tools view panel"; } /* Schmale Kopfleiste ueber der Werkzeugleiste: sehr dunkles Blau, kleine Schrift. */ #kopf { grid-area: kopf; background: #08122a; color: #dfe7f2; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 12px; overflow: hidden; } #kopf > * { flex: none; } #kopf .kopf-frei { flex: 1 1 auto; } /* ⚠ NICHTS DARF UMBRECHEN: Wird die Leiste zu schmal (Profil-Knopf, langer Dateiname), schrumpften die Knoepfe und ihr Text brach auf zwei Zeilen um - die Leiste sah zerlegt aus. Jetzt behalten alle Teile ihre Breite (flex: none, nowrap), lange Namen werden mit … gekuerzt, der Rest scrollt seitlich. */ #top { grid-area: top; background: var(--bar); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } #top::-webkit-scrollbar { display: none; } #top > * { flex: none; } /* EINE Spalte, IMMER (seit 2.17.2, vorher Umbruch in bis zu 4 Spalten am Desktop): reicht die Hoehe nicht, scrollt die Leiste senkrecht (Mausrad / Finger) - ohne sichtbare Scrollbar. Abstaende eng (2 px). */ #tools { grid-area: tools; background: #8a8f95; /* grau wie die alte Leiste */ display: flex; flex-flow: column nowrap; align-items: center; gap: 2px; padding: 4px 3px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; width: calc(var(--tb) + 6px); } #tools::-webkit-scrollbar { display: none; } #tools > * { flex: none; } @media (hover: none) and (pointer: coarse) { #tools { touch-action: pan-y; } } #viewport { grid-area: view; position: relative; overflow: hidden; background: #1b2a3a url(images/MapBase.png) center / cover no-repeat; cursor: grab; touch-action: none; } #viewport.mode-select { cursor: default; } .props .chk { display: inline-flex; align-items: center; gap: 4px; } .koord-block { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .koord-block b { display: block; color: var(--muted); font-weight: 600; margin-bottom: 3px; } .props .koord { display: grid; grid-template-columns: 44px 54px 8px 60px 8px 46px; gap: 3px 2px; align-items: center; } .props .koord input[type=number] { width: 52px; padding: 2px; } .props .koord select { padding: 1px; } .props input[type=text] { width: 100%; padding: 2px 4px; } #viewport.mode-kurs, #viewport.mode-ob, #viewport.mode-ok, #viewport.mode-linie, #viewport.mode-text, #viewport.mode-boot, #viewport.mode-wind, #viewport.mode-strom { cursor: crosshair; } /* Beim Zeichnen sind Objekte und Werkzeuge nicht anfassbar: ein Kurs darf auf einem OB oder unter dem Lineal beginnen, und der Zeiger bleibt das Fadenkreuz. */ #viewport.mode-kurs #obj, #viewport.mode-ob #obj, #viewport.mode-ok #obj, #viewport.mode-linie #obj, #viewport.mode-text #obj, #viewport.mode-text #werkzeuge, #viewport.mode-boot #obj, #viewport.mode-boot #werkzeuge, #viewport.mode-wind #obj, #viewport.mode-wind #werkzeuge, #viewport.mode-strom #obj, #viewport.mode-strom #werkzeuge, #viewport.mode-kurs #werkzeuge, #viewport.mode-ob #werkzeuge, #viewport.mode-ok #werkzeuge, #viewport.mode-linie #werkzeuge { pointer-events: none; } #viewport.panning { cursor: grabbing; } #panel { grid-area: panel; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; } body.ohne-panel #app { grid-template-columns: auto 1fr 0; } body.ohne-panel #panel { display: none; } /* Knopf Objektbaum ein/aus: schwebt rechts oben im Kartenbereich, halb ueber dem Rand zur rechten Spalte */ /* Schwebender Knopf "Objektbaum ein/aus" rechts oben in der Karte: Grafik images/openTree.png auf halbtransparentem Grau (19.09.) */ #btnPanel { position: absolute; right: 8px; top: 8px; z-index: 25; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(70,70,70,.55); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); } /* ✋ (2.20.11, nur Touch): unten rechts auf der Karte, gelb wenn an */ #btnHand { position: absolute; right: 10px; bottom: 10px; z-index: 25; width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: rgba(70,70,70,.55); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); touch-action: manipulation; } #btnHand[hidden] { display: none; } #btnHand.on { background: #ffd54a; border-color: #b8860b; box-shadow: 0 0 0 3px rgba(255,213,74,.45), 0 1px 4px rgba(0,0,0,.35); } #btnPanel:hover { background: rgba(70,70,70,.75); } #btnPanel.on { background: rgba(46,196,198,.7); } /* Baum sichtbar: tuerkis getoent */ #btnPanel img { display: block; width: 26px; height: auto; pointer-events: none; } /* Baum offen: der Knopf sitzt im Kopf der rechten Spalte (wird per JS dorthin verschoben) - kompakter, kein Schweben */ .panel-head #btnPanel { position: static; width: 30px; height: 26px; margin-left: 6px; border-radius: 6px; box-shadow: none; background: rgba(46,196,198,.9); } .panel-head #btnPanel img { width: 20px; } .brand { font-weight: 700; font-size: 14px; white-space: nowrap; } .brand .build { font-weight: 400; font-size: 11px; opacity: .7; margin-left: 4px; } .brand .prefix { font-weight: 700; font-size: 11px; color: #ffd54a; margin-left: 6px; letter-spacing: .04em; } /* app-cfg 'prefix', z. B. (BETA) */ #kopf .datei { font-weight: 500; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.14); display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #zuletztName { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .tb-field { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .95; } .tb-field select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid #9fb3cf; max-width: 220px; } .tb-group { display: flex; gap: 4px; align-items: center; } #top button { background: #fff; color: var(--text); border: 1px solid #b7c5d8; border-radius: 6px; padding: 2px 7px; font-size: 14px; line-height: 24px; white-space: nowrap; } /* Padding klein, Symbole groesser (19.09.) */ #top button:hover { background: #eaf1fa; } #top .eye-off, .fp-nav .eye-off { position: relative; display: inline-block; } /* auch im Fragenfenster (2.20.6) */ #top .eye-off::after, .fp-nav .eye-off::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #c81e1e; transform: rotate(-35deg); } #top button.zuletzt { background: #ffd54a; border-color: #e0b400; } #top button .tb-ico { height: 22px; width: auto; vertical-align: -6px; margin-right: 4px; } /* Nur Icons (Einstellung "Nur Icons": auto/an/aus, 19.09.): body.nur-icons blendet die Beschriftungen .tb-txt der oberen Leiste aus */ body.nur-icons #top .tb-txt { display: none; } body.nur-icons #top button .tb-ico { margin-right: 0; } body.nur-icons #top button { padding: 2px 6px; font-size: 17px; } /* nur Symbole: Emojis eine Stufe groesser */ body.nur-icons #top button .tb-ico { height: 24px; vertical-align: -6px; } .chip { display: inline-block; background: rgba(255,255,255,.14); border-radius: 12px; padding: 2px 9px; font-size: 12px; white-space: nowrap; } .chip.ok { background: #1f8f4a; } .chip.warn { background: #b8741a; } /* Lat/Long des Mauszeigers - sitzt in der Kopfleiste #kopf (26px) neben dem Dateinamen */ .pos { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: rgba(255,255,255,.14); padding: 1px 10px; border-radius: 10px; white-space: nowrap; line-height: 18px; } .pos .lbl { font-family: system-ui, sans-serif; font-size: 11px; opacity: .75; margin-right: 2px; } /* Alle Masse relativ zu --tb (Knopfbreite): Symbole, Boot, Zirkel schrumpfen und wachsen mit. */ .tool-btn { width: var(--tb); height: var(--tb); flex: none; border: 1px solid #55606c; background: #2f343b; color: #f2f5f8; border-radius: calc(var(--tb) * .16); box-shadow: 0 1px 2px rgba(0,0,0,.35); font-size: calc(var(--tb) * .42); line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; overflow: hidden; } .tool-btn .tool-ico { height: calc(var(--tb) * .55); width: auto; max-width: calc(var(--tb) - 6px); object-fit: contain; filter: drop-shadow(0 0 1px rgba(255,255,255,.7)); } .tool-btn .tool-svg { width: calc(var(--tb) * .7); height: calc(var(--tb) * .7); display: block; } .tool-btn .ico-boot { transform: rotate(-45deg); height: calc(var(--tb) * .3); width: auto; max-width: none; } /* Bug schraeg nach oben rechts: diagonal passt das lange Bild (87x25) in den Knopf */ .tool-btn .ico-zirkel { transform: rotate(90deg); height: calc(var(--tb) * .8); max-width: none; } /* Zirkel liegend */ .tool-btn .ico-weiss { filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,.6)); } /* schwarzes Icon -> weiss */ .tool-btn small { display: none; } /* nur Symbole - der Text steht im Tooltip */ .tool-btn:hover { background: #3e444d; } .tool-btn:active { background: #23272d; } .tool-btn.on { background: #2ec4c6; color: #0b2340; border-color: #1a9c9e; box-shadow: inset 0 0 0 2px #fff; } .tool-sep { width: var(--tb); height: 1px; background: rgba(0,0,0,.25); margin: 2px 0; } /* Gruppen-Ueberschrift in der Werkzeugleiste ("Objekte" / "Tools"): klein, hell, mit Linie darueber */ /* Schrift waechst/schrumpft mit der Knopfgroesse (--tb 40 px -> 8 px); "OBJEKTE" passt so immer in die Knopfbreite */ .tool-head { width: var(--tb); margin: 2px 0 0; padding-top: 3px; border-top: 1px solid rgba(0,0,0,.25); font-size: calc(var(--tb) * .2); font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-transform: uppercase; color: #f2f5f8; text-align: center; opacity: .85; } .hint { display: none; } /* Bedienhinweis vorerst weg */ /* ---- Welt: Karte + SVG + Werkzeuge, gemeinsam verschoben/gezoomt ---- */ /* ⚠ KEIN DAUERHAFTES will-change (2.20.35): als eigene GPU-Ebene braucht die ganze Karte (SKS 10686 x 7081) ~300 MB - ueber Chromes Budget: Teile blieben leer (Kachel-Loecher) und das Raster blieb in alter Groesse (unscharf). app.js setzt will-change nur WAEHREND Verschieben/Zoomen (ebeneAn) und nimmt es danach wieder weg (scharfMalen). */ #welt { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* Karte abdimmen (◐): die Karte wird ueber WEISS halb durchsichtig - Kurse, Texte, Werkzeuge bleiben kraeftig. Staerke = --dimm (EINST.dimm, Regler in den Eigenschaften). */ :root { --dimm: .5; } body.dimm #welt { background: #fff; } body.dimm #karte { opacity: var(--dimm); } #top button.on { background: #2ec4c6; color: #0b2340; border-color: #1a9c9e; } #karte { display: block; user-select: none; -webkit-user-drag: none; } /* Gekachelte Karte (2.20.18): statt #karte, gleiche Groesse; Kacheln liegen absolut im Raster (1 px Ueberlappung) */ #kacheln { position: relative; display: none; } /* Schiff faehrt eine Linie ab (2.20.34): liegt ueber den Objekten, nimmt keine Klicks */ .fahr-boot { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; user-select: none; max-width: none; z-index: 5; } #kacheln img { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; -webkit-user-drag: none; } /* 2.20.37: Kacheln erst ab Zoom > 1/ue (Klasse "fein" aus kachelStufe); ohne Uebersicht (kein .kachel-ue) immer */ #kacheln:has(.kachel-ue):not(.fein) img.kachel { display: none; } body.dimm #kacheln { opacity: var(--dimm); } #obj { position: absolute; left: 0; top: 0; overflow: visible; } #werkzeuge { position: absolute; left: 0; top: 0; } .lade { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(23,50,92,.9); color: #fff; padding: 10px 18px; border-radius: 8px; } /* Fenster "Karte" (liegt ueber der Karte, Messpunkte bleiben bedienbar) */ .tb-karte { font-weight: 600; position: relative; } /* Karte noch nicht vermessen (Chip sitzt seit 29.09.2026 im Kartenfenster): kleines ⚠ am Knopf */ .tb-karte.kal-fehlt::after { content: "\26A0"; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; background: #b8741a; color: #fff; font-size: 10px; text-align: center; } .kpanel-head .chip { margin-left: 8px; font-weight: 600; vertical-align: 1px; } .kpanel { position: absolute; left: 10px; top: 10px; width: 860px; max-width: calc(100% - 20px); background: #0e6f7f; color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 20; } .kpanel-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0b2340; border-radius: 10px 10px 0 0; font-weight: 700; } .kp-x { background: #fff; color: #123; border: 0; border-radius: 6px; width: 28px; height: 24px; cursor: pointer; font-weight: 700; } .kpanel-body { padding: 8px 12px 10px; } .kp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .kp-row .w { width: 52px; font-weight: 600; } .kp-row select, .kp-row input { font: inherit; padding: 3px 5px; border-radius: 5px; border: 1px solid #8fb; } .kp-row input[type=number] { width: 74px; } .kp-row button { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid #b7c5d8; background: #fff; color: #123; cursor: pointer; } .kp-row button.primary { background: #2176c1; color: #fff; border-color: #2176c1; } .kp-pt { min-width: 44px; font-weight: 700; } .kp-koord { padding: 3px 6px; border-radius: 6px; } .kp-koord.on { background: rgba(255,213,74,.18); } .kp-pix { min-width: 120px; } .kp-pt.on { background: #ffd54a !important; border-color: #e0b400 !important; } .kp-sep { flex: 0 0 12px; } .kp-radio { display: inline-flex; align-items: center; gap: 4px; } .kpanel .muted, .bpanel .muted, .fpanel .muted, .rpanel .muted { color: #f2f8fa; opacity: .92; } .boot-spur line.kueg-grund { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; } .boot-spur line.kueg { stroke: #1e5aa0; stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; } .boot-spur line.rwk { stroke: rgba(30,90,160,.5); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .boot-spur circle.start { fill: #1e5aa0; } /* Bild-Objekte (Boot/Wind/Strom) */ .o-boot image, .o-wind image, .o-strom image { -webkit-user-drag: none; } .handle.rot { fill: #2ec24b; } .handle.grs { fill: #6b7bd6; } .handle.zahn { fill: #444; stroke: #fff; } .bild-anz { fill: #fff; font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2px; pointer-events: none; } .o-boot .bild-anz { fill: #fff; } .o-boot .bild-anz:not(.mit) { fill: #fff; stroke: rgba(40,40,40,.9); stroke-width: 3px; } /* Fenster "Boot" */ .bpanel { position: absolute; right: 10px; top: 10px; width: 420px; max-width: calc(100% - 20px); background: #0e6f7f; color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 20; } .bpanel .kp-row .w { width: 56px; } .bpanel .kp-row .muted { color: #f2f8fa; } .wz .segel { position: absolute; -webkit-user-drag: none; pointer-events: none; } .wz .anzeige .zahn { cursor: pointer; margin-left: 6px; opacity: .85; } .wz .anzeige .zahn:hover { opacity: 1; } /* Fenster "Rechenturm" */ .rpanel[hidden] { display: none; } .rpanel { position: absolute; left: 10px; top: 10px; width: min(1000px, calc(100% - 20px)); max-height: calc(100% - 20px); background: #0e6f7f; color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 21; display: flex; flex-direction: column; } .rpanel-head { display: flex; align-items: center; gap: 6px; padding: 8px 44px 8px 12px; background: #0b2340; border-radius: 10px 10px 0 0; flex-wrap: wrap; position: relative; } .rpanel-head .kp-x { position: absolute; right: 10px; top: 8px; } .rpanel-head button { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid #b7c5d8; background: #fff; color: #123; cursor: pointer; } .rpanel-head .rt-titel { margin-left: auto; font-weight: 700; } .rpanel-head .rt-zoombtn { min-width: 30px; padding: 4px 6px; } .rpanel-body { flex: 1; overflow: auto; padding: 10px 12px; min-height: 200px; max-height: 70vh; touch-action: pan-x pan-y; } .rt-zoom { display: flex; flex-direction: column; gap: 10px; width: max-content; min-width: 100%; } /* zoom per CSS 'zoom' -> Scrollbalken passen sich an */ .rt-tuerme { overflow: visible; } .rt-tuerme { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; } .rt-labels, .rt-turm { display: grid; grid-auto-rows: 26px; gap: 1px; background: #fff; color: #123; border-radius: 6px; padding: 4px; } .rt-labels { grid-template-columns: 46px 52px; position: sticky; left: 0; z-index: 1; } .rt-labels .l1 { font-weight: 700; border: 1px solid #234; border-radius: 3px; padding: 0 4px; line-height: 24px; text-align: center; background: #fff; } .rt-labels .l2 { font-size: 10px; color: #345; line-height: 24px; text-align: center; } .rt-labels .grp-k { background: #fde9e5; } .rt-labels .grp-w { background: #e8e9f6; } .rt-labels .grp-p { background: #e6f5e6; } .rt-turm { grid-template-columns: 56px; } .rt-turm input { width: 100%; height: 24px; box-sizing: border-box; border: 1px solid #234; border-radius: 3px; padding: 0 4px; font: inherit; font-size: 13px; } .rt-turm input.titel { font-weight: 700; background: #eef; } .rt-turm.on { outline: 3px solid #ffd54a; } .rt-turm .fuss { font-size: 10px; color: #345; line-height: 24px; text-align: center; cursor: pointer; } .rt-dev { background: #fff; color: #123; border-radius: 6px; padding: 6px; overflow-x: auto; } .rt-dev table { border-collapse: collapse; font-size: 11px; } .rt-dev th { font-weight: 700; padding: 1px 4px; border: 1px solid #234; text-align: center; white-space: nowrap; } .rt-dev td { padding: 0; border: 1px solid #234; } .rt-dev td input { width: 30px; height: 20px; border: 0; text-align: center; font: inherit; font-size: 11px; box-sizing: border-box; } .rt-dev .k { color: #900; } .rt-dev .leer { padding: 6px; color: #678; } /* Fenster "Frage" */ .fpanel[hidden] { display: none; } /* display:flex unten wuerde sonst hidden ueberstimmen */ .fpanel { position: absolute; left: 10px; top: 10px; width: 360px; max-height: calc(100% - 20px); background: #0e6f7f; color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 19; display: flex; flex-direction: column; } .fpanel-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #0b2340; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 15px; } .fpanel-head .fp-layer { flex: 1; font-weight: 400; font-size: 12px; opacity: .8; } .fp-nav { display: flex; align-items: center; gap: 4px; padding: 6px 10px; flex-wrap: wrap; } .fp-nav button { min-width: 30px; height: 26px; border: 1px solid #b7c5d8; background: #fff; color: #123; border-radius: 6px; cursor: pointer; font-weight: 700; } .fp-nav button.danger { color: #c81e1e; } /* Löschen rechtsbündig mit Abstand (2.20.6) - auch wenn die Zeile umbricht, bleibt es am rechten Rand */ .fp-nav .fp-del { margin-left: auto; } /* 2.20.7: 🗑 in der OBEREN Zeile rechts - das Titelfeld steht immer in einer eigenen Zeile darunter (order + volle Breite). Im Markup steht der Titel vor 🗑; ohne das rutschte 🗑 neben das Titelfeld in die zweite Zeile. */ .fp-nav .fp-name { order: 2; flex: 1 1 100%; } /* Diashow-Knöpfe in einer eigenen Zeile zwischen den Blätter-Knöpfen (mit 🗑 rechts) und dem Titel - sonst wurde die obere Zeile zu voll und 🗑 rutschte nach unten. Der Trenner davor entfällt (eigene Zeile). */ .fp-nav .fp-dia { order: 1; flex: 1 1 100%; } .fp-nav .fp-dia-sep { display: none; } /* Diashow im Fragenfenster (2.20.0) */ .fp-dia { display: inline-flex; align-items: center; gap: 3px; } .fp-nav button.fp-dia-weiter { background: #1e5aa0; color: #fff; border-color: #1e5aa0; min-width: 38px; } .fp-dia-nr { font-size: 12px; color: #fff; font-weight: 600; min-width: 34px; font-variant-numeric: tabular-nums; } /* hell auf dem Petrol-Hintergrund (2.20.7) */ /* Grau, wenn der Schritt nichts bewirkt (alles schon sichtbar bzw. noch nichts gezeigt) - 2.20.3 */ .fp-nav .fp-dia button:disabled { opacity: .35; cursor: default; } /* Eigenschaften „Lösung zeichnen" aus (2.20.6): keine Diashow-Knöpfe, das Auge blendet den Layer wie früher ein/aus */ #fragePanel.ohne-dia .fp-dia, #fragePanel.ohne-dia .fp-dia-sep { display: none; } .fp-nav .fp-name { display: flex; align-items: center; gap: 4px; flex: 1; font-size: 12px; } .fp-nav .fp-name input { flex: 1; min-width: 80px; padding: 3px 5px; border-radius: 5px; border: 1px solid #8fb; } .fp-tools { display: flex; gap: 4px; align-items: center; padding: 0 10px 4px; } .fp-tools button { width: 30px; height: 24px; border: 1px solid #b7c5d8; background: #fff; color: #123; border-radius: 5px; cursor: pointer; font-size: 12px; } .fp-tools .muted { margin-left: auto; color: #cfe; } .fp-text { margin: 0 10px; background: #fff; color: #123; border-radius: 6px; padding: 8px 10px; min-height: 180px; max-height: 40vh; overflow-y: auto; outline: none; font-size: calc(14px * var(--fp-z, 1)); line-height: 1.4; } /* Textgroesse im Fragenfenster (2.20.40): A- / A+, Strg+Mausrad, zwei Finger - Variable --fp-z an #fragePanel */ .fp-zoom { display: inline-flex; gap: 2px; margin-left: auto; } #fragePanel { touch-action: pan-y; } /* 2.20.40: zwei Finger = Textgroesse (eigene Geste), senkrecht wischen scrollt */ .fp-zoom button { font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; } .fp-zoom button:hover { background: rgba(255,255,255,.22); } .fp-text:focus { box-shadow: 0 0 0 2px #ffd54a; } .fp-antwort-kopf { padding: 8px 10px 2px; } .fp-antwort-kopf input { width: 100%; padding: 3px 6px; border-radius: 5px; border: 1px solid #8fb; font-weight: 700; } .fp-antwort { margin: 0 10px; min-height: 90px; border-radius: 6px; border: 0; padding: 8px 10px; font: inherit; font-size: calc(14px * var(--fp-z, 1)); resize: vertical; } .fp-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 10px; } /* Haekchen "Loesungen anzeigen" aus (2.20.4): Antwort-Ueberschrift und Antwort ausblenden (der Inhalt bleibt). */ #fragePanel.ohne-loesung .fp-antwort-kopf, #fragePanel.ohne-loesung .fp-antwort { display: none; } .fp-nr { font-weight: 700; } /* 2.20.11: Handy/Tablet - Fragenfenster schmaeler und niedriger, damit die Karte daneben sichtbar bleibt */ @media (pointer: coarse) { .fpanel { width: clamp(220px, 44vw, 300px); max-width: calc(100% - 20px); } .fp-text { min-height: 90px; max-height: 30vh; font-size: calc(13px * var(--fp-z, 1)); padding: 6px 8px; } .fp-antwort { min-height: 56px; } .fpanel-head { padding: 6px 10px; font-size: 14px; } } @media (pointer: coarse) and (max-width: 520px) { .fpanel { width: calc(100% - 20px); max-height: 55%; } /* Handy hochkant: volle Breite, dafuer nur die obere Haelfte */ } /* Messpunkte auf der Karte */ .mess-mark circle.ring { fill: rgba(90,90,90,.35); stroke: #2a2aff; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: move; } .mess-mark.on circle.ring { stroke: #ffb300; stroke-width: 2.5; } .mess-mark circle.mitte { fill: #fff; stroke: #222; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; } .mess-mark line { stroke: rgba(40,40,40,.7); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; } .mess-mark text { fill: #0b2340; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; } .mess-mark.ohne circle.ring { stroke-dasharray: 5 4; } /* Objekte im SVG */ /* Kurse/Linien OHNE Weichzeichnung (crispEdges): 1 = exakt ein Pixel, 2 = exakt zwei - wie die alte Flash-App. Weichgezeichnet verschmieren 1 und 2 px auf fast dieselbe Breite. */ .o-kurs line, .o-linie line { stroke: var(--o-col, #9f0808); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; } .o-kurs line.halo, .o-linie line.halo, .o-kurs line.hit, .o-linie line.hit { shape-rendering: auto; } /* 27.09.2026: crispEdges NUR auf hochaufloesenden Schirmen (DPR >= 1,5). Bei 100 % Windows-Skalierung ist eine Treppenstufe ein ganzes Bildschirmpixel - schraege Kurse sahen sichtbar kantig aus (gemeldet an einem zweiten PC; am ersten mit hoher Skalierung unsichtbar). Dort wird geglaettet; 2 px bleibt erkennbar kraeftiger. */ @media not all and (min-resolution: 1.5dppx) { .o-kurs line, .o-linie line { shape-rendering: auto; } } .o-kurs line.halo, .o-linie line.halo { stroke: rgba(33,118,193,.75); stroke-linecap: round; } .o-linie:hover line:not(.hit) { filter: drop-shadow(0 0 2px rgba(33,118,193,.7)); } .o-kurs text, .o-ob text { fill: var(--o-col, #9f0808); font-family: system-ui, sans-serif; font-weight: 500; user-select: none; } .o-ob text, .o-ok text, .o-kurs .kurs-lbl text { paint-order: stroke; stroke: rgba(255,255,255,.7); stroke-width: 2px; stroke-linejoin: round; } .o-kurs .lbl-bg, .o-ob .lbl-bg, .o-ok .lbl-bg { fill: rgba(255, 255, 255, .9); stroke: none; } .o-ob circle.ring { fill: none; stroke: var(--o-col, #000); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .o-ok circle.punkt { fill: #19c43a; stroke: var(--o-col, #000); stroke-width: 1; vector-effect: non-scaling-stroke; } .o-ok line.strich { stroke: var(--o-col, #000); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .o-ok text { fill: var(--o-col, #000); font-family: system-ui, sans-serif; font-weight: 500; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; user-select: none; } .o-ok.sel circle.punkt { stroke: var(--accent); stroke-width: 3; } .o-text text { fill: var(--o-col, #000); font-family: system-ui, sans-serif; font-weight: 500; paint-order: stroke; stroke: rgba(255,255,255,.7); stroke-width: 2px; stroke-linejoin: round; user-select: none; cursor: move; } .o-text.sel text { text-decoration: underline; } .o-text .drehgriff { fill: #2ec24b; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; } .o-ob line.kreuz { stroke: var(--o-col, #000); stroke-width: 1; vector-effect: non-scaling-stroke; } .o-ob.sel circle.ring { stroke: var(--accent); stroke-width: 3; } .handle { fill: #fff; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; } /* Greifbereich um Linien: 30 Bildschirm-px breit (unabhaengig vom Zoom), Zeiger zeigt Verschieben */ .hit { stroke: transparent; stroke-width: 30; vector-effect: non-scaling-stroke; cursor: move; fill: none; } /* 2.20.21: `.o-linie line` ist spezifischer als `.hit` und faerbte die Klick-Linie ein - bei strichlierter Hilfslinie stand sie als duenne Linie in den Luecken. Nur die FARBE: Breite/Klickflaeche bleiben wie bisher (transparent zaehlt fuer pointer-events wie gemalt). */ .o-linie line.hit { stroke: transparent; } /* 2.20.41 TREFFERFLAECHE: `.o-kurs line, .o-linie line { stroke-width: 1 }` ist spezifischer als `.hit { stroke-width: 30 }` - die Klick-Linie war dadurch nur 1 Bildschirm-px breit ("man muss die Linie sehr genau treffen"). Jetzt mit gleicher Spezifitaet gezielt: 16 px (Maus), 28 px bei Finger-Bedienung. Bewusst nicht breiter: eng liegende Peilungen an einem Ort blieben sonst kaum einzeln waehlbar. Farbe transparent (zaehlt fuer pointer-events wie gemalt). */ .o-kurs line.hit, .o-linie line.hit { stroke: transparent; stroke-width: 16; } @media (pointer: coarse) { .o-kurs line.hit, .o-linie line.hit { stroke-width: 28; } } .o-kurs:hover line:not(.hit) { filter: drop-shadow(0 0 2px rgba(33,118,193,.7)); } .tmp line { stroke: var(--accent); stroke-dasharray: 6 4; stroke-width: 2; vector-effect: non-scaling-stroke; } /* Werkzeuge */ .wz { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; will-change: transform; } .wz img.body { display: block; -webkit-user-drag: none; cursor: move; } .wz .scheibe { position: absolute; -webkit-user-drag: none; cursor: grab; } .wz .griff { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: translate(-50%, -50%); cursor: grab; box-sizing: border-box; } .wz .griff.drehen { background: #2ec24b; } .wz .griff.groesse { background: #6b7bd6; } .wz .griff.zahn { background: #444; color: #fff; text-align: center; cursor: pointer; } .wz .griff img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 62%; height: 62%; object-fit: contain; pointer-events: none; } .wz .griff.groesse img { filter: invert(1); } .wz .griff.drehen img { width: 70%; } .wz .anzeige[hidden] { display: none; } .wz .anzeige { position: absolute; background: rgba(70,70,70,.92); color: #fff; font: 700 13px/1 system-ui, sans-serif; padding: 5px 8px; border-radius: 4px; white-space: nowrap; display: flex; gap: 10px; align-items: center; } .wz .anzeige .rot { color: #ff6b6b; } .wz .anzeige.mitdrehen { background: transparent; padding: 0; gap: 2.2em; color: #111; font-weight: 700; line-height: 1; } .wz .anzeige.mitdrehen .rot { color: #d40000; } /* Tool-Wind/-Strom wie der Pfeil im Layer (.bild-anz: weiss, Kontur rgba(0,0,0,.6)), 27.09.2026 */ .wz-wind .anzeige.mitdrehen, .wz-strom .anzeige.mitdrehen { color: #fff; -webkit-text-stroke: .1em rgba(0,0,0,.6); paint-order: stroke fill; text-shadow: none; pointer-events: none; } .wz .anzeige.mitdrehen .txt { display: flex; gap: 2.2em; } .wz-portland .anzeige.mitdrehen .txt { gap: .8em; } /* Portland: "Grad: 84 N 006°" bleibt im Feld vor dem roten Pfeil */ .wz-portland .anzeige.p-nord { background: rgba(255,255,255,.92); padding: .15em .35em; border-radius: .2em; } /* N-Hinweis ueber der Gitterlinie lesbar */ .wz .x.frei { position: absolute; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 15%; background: rgba(60,60,60,.9); color: #fff; font-size: 13px; cursor: pointer; transform: translate(-50%,-50%); box-sizing: border-box; } .wz .anzeige .x { cursor: pointer; opacity: .8; margin-left: 4px; } .wz .anzeige .x:hover { opacity: 1; } /* Layer-Leiste + Baum */ .layer-bar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); } .layer-bar input { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; } .layer-bar button { width: 32px; border: 1px solid var(--line); background: #fff; border-radius: 6px; } #objList li.layer { font-weight: 600; background: #e9eef5; margin-top: 3px; } #objList li.layer.aktiv .lbl::after { content: " \25CF"; color: var(--accent); font-size: 9px; vertical-align: middle; } #objList li.layer.sel { background: var(--accent); color: #fff; } #objList li.layer.sel .lbl::after { color: #fff; } #objList li .auf { width: 12px; color: var(--muted); } #objList li .cnt { font-size: 11px; color: var(--muted); background: #fff; border-radius: 10px; padding: 0 6px; } #objList li.layer.sel .cnt { color: var(--accent); } #objList li.obj { padding-left: 26px; } #objList li.layer.fix { background: #dfe7f1; color: #17325c; } #objList li.fixobj { padding-left: 26px; color: #17325c; } #objList li.fixobj.sel { background: var(--accent); color: #fff; } #objList li .st { font-size: 11px; color: var(--muted); } #objList li.sel .st { color: #e8eef6; } .props table.dev td { text-align: right; padding: 1px 6px; font-variant-numeric: tabular-nums; } .props table.dev th { text-align: right; padding: 1px 6px; color: var(--muted); font-weight: 600; } /* Zirkel */ .wz-zirkel img.schenkel { position: absolute; -webkit-user-drag: none; cursor: default; } #viewport.zk-grabbing, #viewport.zk-grabbing * { cursor: grabbing !important; } .wz-zirkel .griff.zk { background: #2ec24b; } .wz-zirkel .griff.groesse { background: #6b7bd6; } /* 2.20.46 Ritzen: grau = aus, rot leuchtend = an (Abschlagen zeichnet einen Bogen) */ .wz-zirkel .griff.ritzen { background: #5d6b7a; color: #fff; text-align: center; font-weight: 700; cursor: pointer; } .wz-zirkel .griff.ritzen.an { background: #e0262d; box-shadow: 0 0 0 3px rgba(224,38,45,.35), 0 1px 4px rgba(0,0,0,.5); } .o-kreis path.hit { stroke: transparent; stroke-width: 16; fill: none; } @media (pointer: coarse) { .o-kreis path.hit { stroke-width: 28; } } .wz-zirkel .nadel { position: absolute; border-radius: 50%; transform: translate(-50%,-50%); } .wz-zirkel .nadel.gruen { background: #19c43a; box-shadow: 0 0 0 1px #fff; pointer-events: none; } .wz-zirkel .nadel.rot { background: #e0262d; box-shadow: 0 0 0 1px #fff; pointer-events: none; z-index: 2; } .wz-zirkel img.schenkel.gelb { filter: sepia(1) saturate(9) hue-rotate(8deg) brightness(1.15); pointer-events: none; } .wz-zirkel .anzeige.zk { background: transparent; color: #111; padding: 0; font-weight: 700; letter-spacing: .02em; white-space: nowrap; pointer-events: none; text-shadow: 0 0 .12em #fff, 0 0 .25em #fff; } /* Objektliste */ .panel-head { padding: 8px 10px; font-weight: 700; background: #e3eaf3; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .panel-head .chip { background: #cfdae8; color: var(--text); } .panel-btns { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); } .panel-btns button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 0; } .panel-btns button.danger { color: var(--danger); } #objList { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 120px; } #objList li { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; } #objList li:hover { background: #e8eef6; } #objList li.sel { background: var(--accent); color: #fff; } #objList li .ico { width: 18px; text-align: center; } #objList li .ico .tree-ico { height: 16px; width: auto; max-width: 22px; object-fit: contain; vertical-align: -3px; } #objList li .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #objList li .eye { opacity: .6; } /* ▶ Schiff fahren lassen (2.20.36) - Kurs/Hilfslinie in der Objektliste */ #objList li .fahr { cursor: pointer; padding: 0 5px; margin-right: 2px; color: #1d6fa5; opacity: .75; font-size: .9em; } #objList li .fahr:hover { opacity: 1; transform: scale(1.15); } #objList li.hidden .lbl { opacity: .45; text-decoration: line-through; } .props { padding: 8px 10px; font-size: 12px; max-height: 48%; overflow-y: auto; } .props table { border-collapse: collapse; width: 100%; } .props td { padding: 2px 4px; vertical-align: top; } .props td:first-child { color: var(--muted); white-space: nowrap; } .props .farben { display: flex; flex-wrap: wrap; gap: 4px; } .props .farben button, .props .farbe-frei { width: 22px; height: 22px; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 0 0 1px #b7c5d8; cursor: pointer; padding: 0; } .props .farben button.on { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.1); } .props .farbe-frei { display: inline-block; cursor: default; } .muted { color: var(--muted); } .small { font-size: 12px; } /* Dialoge */ dialog { border: 0; border-radius: 10px; padding: 18px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.4); min-width: 340px; } dialog::backdrop { background: rgba(0,0,0,.35); } dialog h3 { margin: 0 0 12px; } dialog label.chk { display: flex; align-items: center; gap: 8px; font-weight: 600; } dialog .row { display: flex; align-items: center; gap: 6px; margin: 6px 0; } dialog .row .w { width: 60px; color: var(--muted); } dialog input[type=number] { width: 78px; padding: 4px; } dialog input[type=text] { flex: 1; padding: 5px; } dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 14px 0 0; } dialog button { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--line); background: #fff; } dialog button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .dliste { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; } .dliste li { padding: 6px 10px; cursor: pointer; display: flex; justify-content: space-between; } .dliste li:hover, .dliste li.sel { background: #e8eef6; } .dliste li .del { color: var(--danger); } .dliste:empty { display: none; } /* Kurzmeldung (Speichern/Laden) */ #toast { position: fixed; left: 50%; top: 64px; transform: translate(-50%, -10px); background: #1f8f4a; color: #fff; padding: 9px 18px; border-radius: 8px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; } #toast.zeig { opacity: 1; transform: translate(-50%, 0); } /* ================= Anmeldung (SSO ueber WordPress, wie VST20) ================= */ /* "lokal": auffaellig mit Absicht - der Entwicklungszugang ist keine Anmeldung. */ .konto-dev { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: #b8860b; color: #1a1400; } .konto-dev[hidden] { display: none; } /* "online": echte WordPress-Anmeldung - gruen, Gegenstueck zu "lokal". */ .konto-online { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: #1f8f4a; color: #eaffef; } .konto-online[hidden] { display: none; } .konto-wrap { position: relative; flex: 0 0 auto; } /* Handbuch-Knopf "?" rechts in der Kopfleiste (27.09.2026, Optik wie VST20 .kopf-hilfe) - ein , kein