/* * app.css — konsolidierte Stylesheets (vormals app.css + map.css). * * Reihenfolge: zuerst die Karteneditor-Regeln (ehem. map.css), dann die * Backend-Regeln (ehem. app.css) — entspricht der frueheren Ladereihenfolge in * default.php (map vor app), damit das Backend bei Ueberlappungen weiterhin die * app-Regeln gewinnen laesst. * * Layout-Konflikte: Backend-Regeln (.app-shell/.main-area/.left-sidebar/ * .r-panel/kbd/.pending-downgrade-banner) sind auf `.app-backend` gescoped * (Klasse am des default-Layouts). Der Karteneditor (kein .app-backend) * behaelt die ungescopten 3-Spalten-Regeln. */ .hidden { display: none !important; } /* Flaggen-Emoji-Webfont: liefert nur die Regional-Indicator-Glyphen (Länder- flaggen). Chrome/Edge unter Windows haben keine Flaggen im System-Emoji-Font und zeigen sonst nur die Buchstaben (DE/EN). unicode-range beschränkt die Schrift strikt auf die Flaggen-Codepoints, sie beeinflusst keinen anderen Text. */ @font-face { font-family: 'Twemoji Country Flags'; src: url('../font/twemoji-country-flags.woff2') format('woff2'); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0020-E007F; font-display: swap; } /* ── DESIGN TOKENS (Wieseneditor Palette) ────────────────────────────────── */ :root { --bg: #f2ede3; --ink: #2c2416; --ink-muted: rgba(44, 36, 22, 0.45); --ink-faint: rgba(44, 36, 22, 0.2); --green: #3a7d44; --green-soft: rgba(58, 125, 68, 0.1); --green-mid: rgba(58, 125, 68, 0.22); --blue: #1e40af; --blue-soft: rgba(30, 64, 175, 0.08); --blue-mid: rgba(30, 64, 175, 0.25); --amber: #b07c1a; --red: #c0392b; --red-soft: rgba(192, 57, 43, 0.08); --border: rgba(160, 140, 100, 0.28); --border-strong:rgba(160, 140, 100, 0.45); --panel: rgba(242, 237, 227, 0.98); --panel-2: rgba(235, 228, 214, 0.6); --shadow: 0 2px 16px rgba(60, 40, 10, 0.1); --shadow-lg: 0 6px 32px rgba(60, 40, 10, 0.13); --trans: cubic-bezier(0.32, 0.72, 0, 1); --radius: 18px; --radius-sm: 10px; --sidebar-left: 312px; --nav-rail: 50px; --sidebar-right:360px; } /* ── RESET ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100dvh; overflow: hidden; background: var(--bg); font-family: 'Twemoji Country Flags', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── LAYOUT ──────────────────────────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: var(--sidebar-left) minmax(0, 1fr) var(--sidebar-right); gap: 12px; height: 100dvh; padding: 12px; transition: grid-template-columns 0.2s ease; } .app-shell.left-collapsed { /* !important nötig, weil theme-red.css `.app-shell.theme-red` mit gleicher Specificity (0,2,0) `--sidebar-left: 322px` setzt und in der Lade- Reihenfolge SPÄTER kommt — würde sonst gewinnen und die Sidebar bliebe trotz Collapsed-Klasse breit. */ --sidebar-left: var(--nav-rail) !important; } .app-shell.left-collapsed .objects-panel { display: none; } /* Bei schmalen Viewports (z.B. iPad in Landscape mit ~1180px innerhalb des Layouts knapp): rechte Leiste mit Hilfetext / Read-/Edit-Panel ausblenden, solange nichts selektiert ist. JS toggelt `right-collapsed` je nachdem, ob das Hilfe-Panel oder ein konkretes Panel (Read/Edit/Create/Draw) aktiv ist. Über 1190px greift die Media-Query nicht — Layout bleibt wie zuvor. */ @media (max-width: 1189px) { .app-shell.right-collapsed { --sidebar-right: 0px; } .app-shell.right-collapsed .right-sidebar { display: none; } } .left-sidebar-collapse { position: absolute; top: 50%; right: -11px; transform: translateY(-50%); width: 22px; height: 48px; border-radius: 11px; background: var(--panel); border: 2px solid var(--blue); color: var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; box-shadow: var(--shadow); transition: background .14s; padding: 0; } .left-sidebar-collapse:hover { background: var(--panel-2); } .left-sidebar-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; } .app-shell.left-collapsed .left-sidebar-collapse svg { transform: rotate(180deg); } /* ── SIDEBARS ────────────────────────────────────────────────────────────── */ .sidebar { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-height: 0; } /* ── LEFT SIDEBAR ────────────────────────────────────────────────────────── */ .left-sidebar { position: relative; z-index: 40; display: grid; grid-template-columns: var(--nav-rail) 1fr; min-height: 0; overflow: visible; border-radius: var(--radius) 0 0 var(--radius); } .nav-rail { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 6px; /* Padding minimal horizontal, damit das Item bei nur 50px Rail-Breite trotzdem groessere Icons aufnehmen kann als das urspruengliche 40px- Item mit 8px-Padding. */ padding: 10px 3px; border-right: 1px solid var(--border); /* Minimal dunkler als var(--panel-2) — Rail soll sich vom Hauptpanel dezent abheben ohne harten Kontrast. */ background: rgba(228, 220, 206, 0.85); align-items: center; border-radius: var(--radius) 0 0 var(--radius); } .nav-item-wrap { position: relative; } .nav-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; text-decoration: none; transition: background .14s, color .14s, border-color .14s; flex-shrink: 0; } .nav-item-spacer { flex: 1; } /* Zarte Trennlinie zwischen Account- und Logout-Button. Schmal (~70 % der Rail-Innenbreite), dezent in --border, leichtes vertikales Padding damit sie nicht direkt an den Buttons klebt. */ .nav-item-divider { width: 70%; height: 1px; background: var(--border); margin: 6px auto; flex-shrink: 0; } .nav-item svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* OSM-Import-Eintrag: monochrome OpenStreetMap-Lupe (gleicher Stroke-Stil wie die uebrigen Rail-Icons) mit "OSM"-Label darunter. Vertikaler Stack statt einzelnem Icon; Icon und Label erben currentColor und faerben sich daher bei Hover/Active wie die uebrigen Eintraege gruen. */ .nav-osm { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; } /* Echtes OSM-Logo als CSS-Maske: das (schwarze) Quell-SVG dient nur als Form, die Flaeche wird ueber background-color in currentColor gefuellt — so faerbt sich das Logo bei Hover/Active automatisch gruen wie die anderen Icons. Etwas kleiner als die 26px-Standard-Icons, damit Logo + Label in den 40px hohen Eintrag passen. */ .nav-osm .nav-osm-mark { width: 22px; height: 22px; background-color: currentColor; -webkit-mask: url('../img/osm-logo.svg') center / contain no-repeat; mask: url('../img/osm-logo.svg') center / contain no-repeat; } .nav-osm-label { font-size: 7px; font-weight: 700; letter-spacing: .05em; } /* Account-Avatar: Initialen-Kreis statt Personen-Icon. Erbt currentColor wie die uebrigen Icons, damit die Hover/Active-Faerbung (--ink-muted -> --green) automatisch greift; transparenter Fill passt zum Outline-Look der Nav. */ .nav-avatar { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1.6px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1; } .nav-item:hover { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } .nav-item.is-active { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } /* Bei abgelaufenem Trial gesperrte Rail-Eintraege: ausgegraut und nicht anklickbar (als gerendert). Hover hebt sie nicht hervor; das Popout bleibt ueber den .nav-item-wrap weiterhin sichtbar. */ .nav-item.is-disabled { opacity: .4; cursor: not-allowed; } .nav-item.is-disabled:hover { background: transparent; color: var(--ink-muted); border-color: transparent; } /* ── Nav Popout ── */ .nav-popout { position: fixed; left: 0; width: 480px; background: #f0e8fa; border: 1px solid #c4a3d9; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px 12px; pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; z-index: 9999; } .nav-popout::before { content: ''; position: absolute; left: -6px; top: 14px; transform: rotate(45deg); width: 10px; height: 10px; background: #f0e8fa; border-left: 1px solid #c4a3d9; border-bottom: 1px solid #c4a3d9; } .nav-item-wrap:hover .nav-popout, .nav-popout.is-visible { opacity: 1; pointer-events: auto; transform: translateX(0); } .nav-popout-title { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: .95rem; font-weight: 600; color: #5a2d7a; margin-bottom: 4px; } .nav-popout-body { font-size: .82rem; color: #6b4585; line-height: 1.4; } .nav-popout-body p { margin: 0 0 8px; } .nav-popout-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; } .nav-popout-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .nav-popout-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid #c4a3d9; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; color: #9a7ab5; letter-spacing: .06em; text-transform: uppercase; } /* ── HELP-System (Tooltip + Popout) ─────────────────────────────────────── */ /* Singleton-Elemente am Body, position:fixed → unabhaengig von Vorfahren- overflow:hidden. JS positioniert beim Hover/Focus, opacity-Transition fuer smoothen Auftritt. */ /* Tooltip — kompakte dunkle Bubble (Pendant zur fruehen .has-tooltip::after). Nur body-Inhalt, kein title/footer. */ .help-tooltip { position: fixed; display: none; max-width: 280px; background: var(--ink, #1f2937); color: #fff; padding: 8px 12px; border-radius: var(--radius-sm); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.45; font-weight: 500; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 9999; } .help-tooltip.is-visible { display: block; opacity: 1; } /* Popout — groesseres Lila-Panel (Pendant zur .nav-popout, jetzt wiederverwendbar via data-help). Drei Slots, leere werden via .is-empty komplett ausgeblendet (display:none), damit kein Whitespace bleibt wenn z.B. footer fehlt. */ .help-popout { position: fixed; display: none; width: 360px; max-width: calc(100vw - 24px); /* Bordeaux-Schema passend zu Theme-Red. Wash auf cremig-warmem Rosé, Bordeaux nur in Border + Akzenten — Body bleibt dunkler Warmton für gute Lesbarkeit (statt full-bordeaux-text). */ background: #fdf3f2; border: 2px solid rgba(168, 58, 54, 0.55); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px 12px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 9999; } .help-popout.is-visible { display: block; opacity: 1; } .help-popout-title { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: .95rem; font-weight: 600; color: #a83a36; margin-bottom: 4px; } .help-popout-title.is-empty { display: none; } .help-popout-body { font-size: .85rem; color: #3a1f1d; line-height: 1.45; } /* Sichtbare Leerzeilen zwischen Absätzen — Browser-Default kollabiert sonst die top/bottom-margins so eng, dass mehrere

wie zusammengeklebt wirken. */ .help-popout-body p { margin: 0 0 0.7rem 0; } .help-popout-body p:last-child { margin-bottom: 0; } .help-popout-body.is-empty { display: none; } .help-popout-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(168, 58, 54, 0.25); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; color: rgba(168, 58, 54, 0.7); letter-spacing: .06em; text-transform: uppercase; } .help-popout-footer.is-empty { display: none; } /* Fragezeichen-Icon das beim Hover den Help-Tooltip anzeigt. Wird neben Form-Labels (font-size 9.5px) platziert (siehe formGroup() / helpIcon() in form-helpers.js). Klein gehalten, damit es zur Label-Schrift passt. Klasse heisst .help-tip-icon (nicht .help-icon — Letzteres ist schon fuer eine andere 32px-Komponente in der Help-Section vergeben). */ .help-tip-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 3px; width: 13px; height: 13px; border-radius: 50%; color: var(--ink-muted); background: transparent; cursor: help; transition: color 0.12s, background 0.12s; } .help-tip-icon:hover, .help-tip-icon:focus { color: #5a2d7a; background: #f0e8fa; outline: none; } .help-tip-icon svg { display: block; width: 13px; height: 13px; } /* Print-Wizard: deutlich größere Help-Icons (+~40%) — die print-checkbox- * Schrift ist .9rem (deutlich größer als die 9.5px-Form-Labels), 9×9px- * Standard-Icons wirken da verloren. */ .print-checkbox .help-tip-icon, .print-checkbox .help-tip-icon svg { width: 13px; height: 13px; } /* ── OBJECTS PANEL ───────────────────────────────────────────────────────── */ .objects-panel { display: flex; flex-direction: column; padding: 14px 14px 0; min-height: 0; overflow: hidden; } .objects-panel > .panel-header { margin-top: 6px; } .panel-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-shrink: 0; } .r-panel-header-fixed { align-items: center; min-height: 52px; } .btn-deselect { margin-left: auto; flex-shrink: 0; height: 30px; padding: 0 10px; font-size: 11px; } /* Batch-Einstieg im Read-Panel-Header: rechtsbündig, oben auf der Eyebrow-Zeile, kompakt + abgesetzt von den Aktions-Buttons (Bearbeiten/Duplizieren/Löschen). */ #batchFromObjBtn { margin-left: auto; align-self: flex-start; flex-shrink: 0; height: 30px; padding: 0 10px; font-size: 11px; white-space: nowrap; } .panel-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .meta, .hint { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; color: var(--ink-muted); letter-spacing: .04em; } .search-wrap { position: relative; flex-shrink: 0; margin-bottom: 10px; } .search-input { width: 100%; padding: 7px 28px 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.5); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 11px; color: var(--ink); outline: none; transition: border-color .14s, box-shadow .14s; } .search-input::placeholder { color: var(--ink-muted); } .search-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 5px; background: transparent; color: var(--ink-muted); cursor: pointer; transition: color .12s, background .12s; } .search-clear:hover { color: var(--ink); background: rgba(160,140,100,.15); } .search-clear svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; } .object-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .object-group-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 0; width: 100%; text-align: left; background: var(--bg); border-top: none; border-left: none; border-right: none; position: sticky; z-index: 5; cursor: default; transition: background .15s, padding .15s, opacity .15s; border-radius: 0; } .object-group-header.stuck-away { border-bottom-color: transparent; box-shadow: 0 1px 0 0 var(--bg); color: var(--ink-muted); } .object-group-header.stuck-away .group-label, .object-group-header.is-collapsed .group-label { opacity: 0.45; cursor: pointer; } .object-group-header.stuck-away .group-header-right, .object-group-header.is-collapsed .group-header-right { opacity: 0.3; } .group-header-right { display: flex; align-items: center; gap: 16px; } .group-chevron { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-muted); transition: transform .2s; flex-shrink: 0; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); } .group-chevron:hover { background: rgba(0,0,0,.06); } .group-chevron.collapsed { transform: rotate(-90deg); } .group-visibility-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; border: none; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--radius-sm); transition: color .15s, background .15s; } .group-visibility-btn:hover { background: rgba(0,0,0,.06); color: var(--ink); } .group-visibility-btn svg { width: 20px; height: 20px; } .group-visibility-btn .eye-closed { display: none; } .group-visibility-btn.hidden-state .eye-open { display: none; } .group-visibility-btn.hidden-state .eye-closed { display: block; } .group-visibility-btn.hidden-state { color: var(--red); opacity: 0.7; } .group-label-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--radius-sm); font: 600 10px/1 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; letter-spacing: .03em; transition: color .15s, background .15s, opacity .15s; opacity: 0.45; } .group-label-btn:hover { background: rgba(0,0,0,.06); color: var(--ink); } .group-label-btn.is-on { opacity: 1; color: var(--ink); } .object-group-list { display: flex; flex-direction: column; } .object-group-list.collapsed { display: none; } .group-label { display: flex; align-items: center; gap: 8px; flex: 1; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); } .group-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .group-count { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; color: var(--ink-muted); } .object-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; transition: background .12s; } .object-item { cursor: pointer; } .object-item:hover { background: rgba(160, 140, 100, 0.08); } .object-item.active { background: var(--green-soft); border: 2px solid var(--green); padding: 6px; } .layer-toggle-label-group { display: inline-flex; align-items: center; gap: 8px; } .layer-toggle-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 14px; padding: 0 5px; border-radius: 7px; background: #e67e22; color: #fff; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.02em; } .object-zoom-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; margin-left: auto; } .object-zoom-btn:hover { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } .object-zoom-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .object-list.is-locked { pointer-events: none; } .object-list.is-locked .object-item { opacity: 0.38; cursor: not-allowed; pointer-events: auto; } .object-list.is-locked .object-item:hover { background: transparent; } .object-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .object-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .object-item-name { font-size: .88rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.3; color: var(--ink); } .object-item-sub { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9.5px; color: var(--ink-muted); } .object-no-geo { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; color: var(--amber); margin-top: 1px; } .empty-group { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; color: var(--ink-muted); padding: 8px 8px; font-style: italic; } /* Statische Gruppe (Gestaltungs-Tab: grass/asphalt/gravel/water) — nicht klappbar. */ .object-group-header--static { cursor: default; } .object-group-header--static .group-label { cursor: default; opacity: 1; } /* Drag-Handle (SortableJS) in sortierbaren Items */ .drag-handle { display: flex; align-items: center; justify-content: center; width: 18px; height: 24px; color: var(--ink-muted); cursor: grab; opacity: 0.4; flex-shrink: 0; transition: opacity .12s, color .12s; } .drag-handle:hover { opacity: 1; color: var(--ink); } .drag-handle:active { cursor: grabbing; } .object-item--sortable:hover .drag-handle { opacity: 0.75; } /* SortableJS Ghost (Original-Platz während Drag) */ .sortable-ghost { opacity: 0.35; background: var(--green-soft) !important; border: 1px dashed var(--green-mid); } /* ── MAIN AREA ───────────────────────────────────────────────────────────── */ .main-area { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 0; } /* Mit anstehendem Downgrade-Banner: drei Reihen (Banner + Topbar + Map), damit die Map-Shell weiterhin den Rest der Höhe füllt (1fr). */ .main-area:has(> .pending-downgrade-banner) { grid-template-rows: auto auto 1fr; } .topbar { position: relative; /* Anker für das mittig positionierte „Sammel-Link"-Tool */ display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 14px; min-height: 54px; height: 54px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); flex-wrap: nowrap; overflow: hidden; } /* „Sammel-Link"-Tool exakt mittig in der Topbar (unabhängig von links/rechts). */ .topbar-center-tool { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .topbar-center-tool.hidden { display: none; } /* ── Edge length & angle labels ── */ .edge-label { background: rgba(44, 36, 22, .45); color: #fff; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; } /* ── New object type chooser ── */ .new-object-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 12px 18px; } .new-object-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; text-align: center; } .new-object-card:hover { border-color: var(--green-mid); box-shadow: 0 2px 8px rgba(0,0,0,.08); background: var(--green-soft); } .new-object-card svg { width: 32px; height: 32px; stroke: var(--ink-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; } .new-object-card:hover svg { stroke: var(--green); } .new-object-card-label { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: .92rem; font-weight: 600; color: var(--ink); } .new-object-card-hint { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; } /* ── New-Object-Dialog: Sektionen ── */ .new-object-sections { display: flex; flex-direction: column; gap: 16px; padding: 12px 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .new-object-section { padding-top: 14px; border-top: 1px solid var(--border); } .new-object-section:first-child { padding-top: 4px; border-top: none; } .new-object-section-title { margin: 0 0 10px; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--ink); } .new-object-section-examples { font-weight: 400; color: var(--ink-muted); } /* Tile-Layout (neu): pro Option eine Karte mit gestapeltem Inhalt (Title / Body / Animation / Button). Tile-Breite ist fix (336 px) — der Dialog wird per JS in dialogs.js auf "Anzahl × 336 + Gaps + Padding" gesetzt, sodass Tiles bei jeder Typenwahl gleich breit aussehen. justify-content:center fängt schmale Viewports ab (1 Tile mittig). Wert MUSS mit TILE_W in dialogs.js sizeDialogToTileCount() synchron sein. */ .new-object-tiles { display: grid; grid-template-columns: repeat(auto-fit, 336px); gap: 16px; justify-content: center; } .new-object-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); /* cursor:default — nur der Button im Tile ist klickbar, Tile-Hover dient ausschließlich der GIF-Preview (PNG/GIF-Swap in dialogs.js). */ cursor: default; transition: border-color .15s, box-shadow .15s, background .15s; } .new-object-tile:hover { border-color: var(--green-mid); background: var(--green-soft); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .new-object-tile-title { margin: 0; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); } .new-object-tile-body { font-size: .85rem; line-height: 1.45; color: var(--ink-muted); min-height: 2.6em; /* gleicht Höhen aus, damit GIFs/Buttons nebeneinander fluchten */ } .new-object-tile-anim { position: relative; aspect-ratio: 16 / 9; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .new-object-tile-anim img { width: 100%; height: 100%; object-fit: contain; display: block; } .new-object-tile-anim.is-missing img { display: none; } .new-object-tile-anim.is-missing::after { content: 'Anleitung folgt …'; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 11px; color: var(--ink-muted); text-align: center; padding: 0 12px; } .new-object-tile-anim.is-missing[data-hint]:not([data-hint=""])::after { content: 'Anleitung folgt … (' attr(data-hint) ')'; } .new-object-tile-btn { margin-top: auto; /* Button heftet sich an den unteren Rand */ justify-content: center; } /* Way-Tile: zwei nebeneinander gestellte Inline-SVG-Icons (Fussgaenger/Auto) statt animiertem GIF — eines davon ggf. mit roter Diagonale ueberlagert. */ .way-tile-icons { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; } .way-tile-icon { width: 56px; height: 56px; color: var(--ink); } .way-tile-icon.is-crossed { color: var(--ink-muted); } /* Zeilenlayout (Legacy, vor Tile-Refactor) — bleibt fürs Erste, falls noch irgendwo gerendert. Kann später weg, wenn alle Render-Pfade auf Tiles laufen. */ .new-object-section-rows { display: flex; flex-direction: column; gap: 6px; } .new-object-row { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; } .new-object-row-explain { font-size: .85rem; color: var(--ink-muted); line-height: 1.45; } .new-object-row-explain-title { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 3px; } .new-object-row-explain-body { font-size: .8rem; color: var(--ink-muted); line-height: 1.4; } /* Cards in Sektionen: schlank + dezent grün als Default, Hover verstärkt */ .new-object-sections .new-object-card { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; padding: 8px 10px; gap: 10px; background: var(--green-soft); border-color: var(--green-mid); } .new-object-sections .new-object-card svg { width: 22px; height: 22px; flex-shrink: 0; } .new-object-sections .new-object-card-label { font-size: .86rem; } .new-object-sections .new-object-card:hover { background: var(--green-mid); border-color: var(--green); box-shadow: 0 2px 10px var(--green-mid); } @media (max-width: 640px) { .new-object-row { grid-template-columns: 1fr; gap: 6px; } } .angle-label { background: rgba(39, 104, 55, .45); color: #fff; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 9px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; } .arrow-hint { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } #rotateHint { display: contents; } #rotateHint.hidden { display: none !important; } .arrow-hint.hidden { display: none !important; } .arrow-keys { display: flex; align-items: center; gap: 3px; } /* Klickbarer Keycap — mit 3D-Schatten, Hover + Press-Animation */ .kbd-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel-2); box-shadow: 0 2px 0 var(--border-strong); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1; padding: 0 8px; cursor: pointer; transition: background .1s, transform .08s, box-shadow .08s; /* iPad/Touch: Long-Press auf den Button selektiert sonst den Buchstaben (Text-Selection-Highlight). Beides unterdrücken — der Button funktioniert auch über Pointer-Events, ohne Selection. */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* Info-Keycap — dezent, flach, nicht klickbar. Markiert eine Taste als Info-Hinweis. */ kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; border-radius: 4px; border: 1px dashed var(--border); background: transparent; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; color: inherit; line-height: 1; padding: 0 6px; cursor: default; opacity: 0.85; } .kbd-btn:hover { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } .kbd-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--border-strong); } .arrow-hint-text { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; color: var(--ink-muted); white-space: nowrap; } .arrow-hint-sep { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; color: var(--ink-faint); } .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .topbar-btn { height: 30px; padding: 0 12px; font-size: 11px; } .topbar-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; } .mode-toggle { display: flex; gap: 0; } .mode-toggle-btn { flex: 1; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--border); background: var(--panel); color: var(--ink-muted); cursor: pointer; transition: all .12s; } .mode-toggle-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .mode-toggle-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; } .mode-toggle-btn.active { background: var(--green); color: #fff; border-color: var(--green); } .mode-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .help-text { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; font-size: .95rem; color: var(--ink-muted); line-height: 1.6; } .help-text > p { font-style: italic; } .help-section { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); } .help-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--green-soft); border: 1px solid var(--green-mid); color: var(--green); } .help-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .help-section strong { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .help-section p { margin: 0; font-size: .88rem; } /* ── Service-Teaser im Help-Panel (rechte Spalte, Default-Hilfetext) ── Visuell wie die .help-section-Boxen darunter — gleiche border, padding, typografie — aber ohne Icon-Flex-Layout. */ .help-cta-teaser { margin: 4px 0 18px; padding: 12px; background: var(--panel-2); border: 2px solid var(--red); border-radius: var(--radius-sm); } .help-cta-teaser-title { display: block; margin: 0 0 2px; font-size: .95rem; font-weight: 600; color: var(--red); font-family: inherit; } .help-cta-teaser-text { margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.45; } .help-cta-teaser-text a { color: var(--red); font-weight: 600; word-break: break-word; } /* ── MAP ─────────────────────────────────────────────────────────────────── */ .map-shell { position: relative; min-height: 0; height: 100%; } .map-toolbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; background: rgba(30, 30, 30, 0.88); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); } .map-toolbar.hidden { display: none !important; } .map-toolbar-row { display: flex; align-items: center; gap: 8px; } .map-toolbar-hints { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; color: rgba(255, 255, 255, 0.55); gap: 4px; flex-direction: column; align-items: flex-start; } .map-toolbar-hints span.hidden { display: none !important; } .map-toolbar .kbd-btn { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); color: #fff; } .map-toolbar .kbd-btn:hover { background: var(--green); color: #fff; border-color: var(--green); } .map-toolbar .arrow-hint-text { color: rgba(255, 255, 255, 0.7); } .map-toolbar kbd { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.4); box-shadow: none; color: rgba(255, 255, 255, 0.85); } .map-toolbar-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.2); } .map-toolbar-row.hidden { display: none !important; } /* Snap-Toggle im HUD: breiter als eine Keycap, optisch wie ein Button */ .kbd-btn--toggle { padding: 0 12px; min-width: auto; font: 500 11px/1 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; letter-spacing: 0.02em; } .snap-btn-label { white-space: nowrap; } .kbd-btn > kbd { margin-left: 8px; } .kbd-btn--toggle.is-off { background: rgba(192, 57, 43, 0.75) !important; border-color: rgba(192, 57, 43, 0.9) !important; } .kbd-btn--toggle.is-off:hover { background: rgba(192, 57, 43, 0.9) !important; } .kbd-btn--toggle.is-suspended { outline: 1px dashed rgba(255, 255, 255, 0.6); outline-offset: 1px; } .map-float-col { position: absolute; top: 12px; left: 12px; z-index: 20; display: flex; flex-direction: column; gap: 7px; } .float-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--ink-muted); cursor: pointer; box-shadow: var(--shadow); transition: background .12s, color .12s, border-color .12s; } .float-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .float-btn:hover { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } .float-btn.active { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); } .topbar-layer-toggle { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .map-layer-btn { padding: 0 11px; height: 30px; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 500; background: transparent; border: none; color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } .map-layer-btn:hover { background: rgba(160,140,100,.1); color: var(--ink); } .map-layer-btn.active { background: var(--green-soft); color: var(--green); } /* Hilfskarte-Dropdown: Toggle-Button mit Chevron + abklappbares Menü. Ersetzt die fünf einzelnen Layer-Buttons in der Topbar — spart Breite. */ .hilfskarte-dropdown { position: relative; flex-shrink: 0; } .hilfskarte-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } /* Wenn die Dropdown in einem .btn-with-help-Wrapper sitzt (Toggle + Info-Icon gemeinsam gerahmt), liefert der Wrapper den Rahmen — der eigene Border vom Toggle entfällt, sonst entsteht ein doppelter Rahmen. */ .btn-with-help .hilfskarte-toggle { border: none; border-radius: 0; } .hilfskarte-chevron { transition: transform .15s; flex-shrink: 0; } .hilfskarte-toggle[aria-expanded="true"] .hilfskarte-chevron { transform: rotate(180deg); } .hilfskarte-menu { /* fixed statt absolute: die .topbar hat overflow: hidden, sonst wird das darunter aufgehende Menü abgeschnitten. Positionierung erfolgt aus dem JS via Toggle-Bounding-Rect beim Öffnen. */ position: fixed; z-index: 1500; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; } .hilfskarte-menu.hidden { display: none; } .hilfskarte-menu .map-layer-btn { border-right: none; border-bottom: 1px solid var(--border); text-align: left; width: 100%; } .hilfskarte-menu .map-layer-btn:last-child { border-bottom: none; } /* Kombiniertes "Hilfskarte + Hintergrund"-Pulldown: zwei Sektionen mit Section-Titles + ein Footer-Block für den Opacity-Slider. Section-Title sitzt in einem leicht abgesetzten Header-Streifen, Buttons darunter ohne eigenen Top-Border (sonst doppelte Trennlinie). Schriftgröße hier etwas größer als der Default (11.5 statt 9 px), damit das Info-Icon daneben Luft hat. */ .map-layers-menu .layer-toggle-section-title { padding: 12px 14px 8px; font-size: 11.5px; background: var(--panel-2); border-top: 1px solid var(--border); } /* Bottom-Border vom Title weg, wenn KEIN Help-Block folgt — Items darunter setzen den Trenner via Background-Wechsel. Wenn Help folgt, bringt der Help-Block selbst den Bottom-Border mit. */ .map-layers-menu .layer-toggle-section-title:not(:has(+ .layer-toggle-section-help)) { border-bottom: 1px solid var(--border); } .map-layers-menu .layer-toggle-section-title:first-child { border-top: none; padding-top: 10px; } /* Beschreibungstext direkt unter einem Section-Title. Sitzt im selben abgesetzten Header-Streifen wie der Title — ohne Top-Border (sonst Doppel- Trennlinie), dafür Bottom-Border um sich klar von den Items darunter abzusetzen. */ .map-layers-menu .layer-toggle-section-help { padding: 0 14px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); } /* Mehrere Absätze: sichtbare Leerzeile zwischen den

-Blöcken; letzter Absatz ohne Bottom-Margin damit der Padding-Reset des Containers wirkt. */ .map-layers-menu .layer-toggle-section-help p { margin: 0 0 0.6rem 0; } .map-layers-menu .layer-toggle-section-help p:last-child { margin-bottom: 0; } /* Inline-Links im Hilfetext: bordeauxrot + dezent unterstrichen, damit sie sich klar vom gedämpften Fließtext (--ink-muted) abheben. */ .map-layers-menu .layer-toggle-section-help a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } .map-layers-menu .layer-toggle-section-help a:hover { color: #7a2a28; } /* Section-Title mit Info-Icon: Text links, Icon rechts. Icon ist ein kleiner Bordeaux-Kreis mit "i" — title-Attribut liefert den Hover-Text. */ .section-title-with-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .section-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font: 600 10px/1 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-style: italic; text-transform: none; letter-spacing: 0; cursor: help; flex-shrink: 0; } .section-info-icon:hover { background: #7a2a28; } /* Letzter Item-Button vor einer Section-Title oder vor dem Footer braucht keinen eigenen Border (der Section-Title bringt seinen Top-Border mit). */ .map-layers-menu .map-layer-btn + .layer-toggle-section-title { border-top: none; } .map-layers-menu-footer { padding: 8px 14px; border-top: 1px solid var(--border); background: var(--panel-2); } /* Topbar-Pulldown "Hintergrundbild wechseln" — wiederverwendet das Hilfskarte- Menu-Pattern, mit Check-Icon links für den aktuell aktivierten Eintrag. Hoehe gegenueber den uebrigen .map-layer-btn-Eintraegen verdoppelt, damit der Stilname + die Datum-Zweitzeile lockerer sitzen. */ /* Pulldown nie höher als der Viewport — sonst rutscht der Transparenz-Slider (Footer) bei langer Bild-Liste nach unten aus dem sichtbaren Bereich. Das Menü ist bereits flex-column; nur die Bild-Liste (#overlayBgMenu) scrollt, Titel/Hilfe/Footer bleiben fest sichtbar. 64 px Reserve = Topbar + Luft. */ #mapLayersMenu.hilfskarte-menu { max-height: calc(100vh - 64px); } #mapLayersMenu #bgSection { display: flex; flex-direction: column; min-height: 0; /* erlaubt der Liste darin zu schrumpfen/scrollen */ flex: 1 1 auto; } #overlayBgMenu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .overlay-bg-item { display: flex !important; align-items: center; gap: 8px; padding: 10px 11px 10px 28px !important; height: auto !important; min-height: 60px; position: relative; } .overlay-bg-item .overlay-bg-check { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--green); display: none; } .overlay-bg-item.is-active .overlay-bg-check { display: inline-flex; } .overlay-bg-item.is-active { background: var(--green-soft); color: var(--green); } /* Zwei separate Marker im Preview-Only-Picker: - .is-live = was die Live-Karte (Frontend + Widget) tatsächlich zeigt; markiert ausschließlich über das Text-Suffix "(Live-Karte)". - .is-editor = was der User aktuell im Editor sieht (Preview-Auswahl); zartrosa Hintergrund + bordeauxroter Text, einheitlich mit dem aktiven Hilfskarte-Item (.map-layer-btn.active). */ .overlay-bg-item.is-editor { background: var(--green-soft); color: var(--green); } .overlay-bg-live-suffix { color: var(--green); font-weight: 600; margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } /* Klartext-Suffix beim aktiven Pulldown-Eintrag — dezent, damit der Stil- name optisch dominant bleibt aber der Live-Karte-Hinweis sofort lesbar ist. */ .overlay-bg-active-suffix { color: var(--ink-muted); font-weight: 400; margin-left: 4px; } /* Zweizeiliger Pulldown-Eintrag: Stilname oben, Generierungs-Datum klein darunter. Brichst die Single-Span-Annahme von .map-layer-btn auf, daher eigener flex-column-Container. Datum nur im aufgeklappten Zustand — das Toggle-Label oben bleibt einzeilig (style_name only). */ .overlay-bg-content { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .overlay-bg-name { display: block; } .overlay-bg-date { display: block; font-size: 10px; color: var(--ink-muted); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 400; } /* Activate-Overlay-Button neben dem Pulldown — Status-Button mit zwei States: disabled = das angezeigte Bild ist auch das in der Live-Karte verwendete (gegraut, kein Hover, neutraler Text) enabled = ein anderes Bild wird gerade nur lokal angezeigt → Klick persistiert es als neues Live-Bild (grüne Akzentfarbe). */ #btnActivateOverlay { /* Override für .map-layer-btn — soll als handlungsoffene Button-Form wirken, nicht wie ein Tab/Layer-Switcher. */ white-space: nowrap; } #btnActivateOverlay:disabled { cursor: default; opacity: 0.55; background: transparent !important; color: var(--ink-muted); } #btnActivateOverlay:not(:disabled) { background: var(--green-soft); color: var(--green); font-weight: 600; } #btnActivateOverlay:not(:disabled):hover { background: var(--green-mid); } /* Hilfe-Pattern: kleines Fragezeichen-Icon-Button + ausklappbare Hilfe-Bubble. Wiederverwendbar überall im Admin via data-help-target="". Blaue Konvention (--blue-soft / --blue-mid) — passt zu .draw-hint. */ .help-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--blue-mid); background: var(--blue-soft); color: var(--blue); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; margin-left: 6px; padding: 0; transition: background .14s, border-color .14s, color .14s; } .help-icon-btn:hover { background: rgba(30, 64, 175, 0.15); border-color: var(--blue); } .help-icon-btn[aria-expanded="true"] { background: var(--blue); color: #fff; border-color: var(--blue); } /* Wrapper, der einen Button + sein Hilfe-Icon visuell als eine Einheit darstellt: gemeinsamer Rahmen, das ?-Icon liegt INNERHALB des Rahmens. Beide Kinder verlieren ihre eigenen Rahmen/Margins. */ .btn-with-help { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); margin-left: 6px; overflow: hidden; flex-shrink: 0; } .btn-with-help .map-layer-btn { margin-left: 0; /* knapper rechts: das Icon sitzt direkt daneben — die Pipe (border-left auf .help-icon-btn) trennt visuell. */ padding-right: 8px; } .btn-with-help .help-icon-btn { margin-left: 0; width: 22px; height: 28px; border: none; /* Pipe als interner Trennstrich zwischen Button-Text und Info-Icon. */ border-left: 1px solid var(--border-strong); border-radius: 0; /* Default-Hintergrund = vorheriger Hover-Tint, hebt das Icon im Wrapper hervor. */ background: var(--blue-soft); color: var(--blue); /* Kursiv damit das "i" als Info-Glyph erkennbar ist (statt nur Buchstabe). */ font-style: italic; font-weight: 700; font-size: 13px; } .btn-with-help .help-icon-btn:hover { background: rgba(30, 64, 175, 0.18); } .btn-with-help .help-icon-btn[aria-expanded="true"] { background: var(--blue); color: #fff; } .help-bubble { /* fixed: escape jeglichem ancestor overflow:hidden (z.B. .topbar). Position wird beim Öffnen aus dem Trigger-Bounding-Rect berechnet (siehe setupHelpToggles in app.js). */ position: fixed; z-index: 1500; max-width: 360px; padding: 14px 16px; /* Layer: blauer Tint über opakem Panel-Background. --blue-soft alleine wäre nur 8% opacity, dann scheint die Karte durch und macht den Text unlesbar. So wirkt das Bubble blau-getönt, bleibt aber definitiv deckend. */ background: linear-gradient(var(--blue-soft), var(--blue-soft)), var(--panel); border: 1px solid var(--blue-mid); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .92rem; line-height: 1.55; color: var(--ink); font-weight: 500; /* Texte können \n / Absätze enthalten — pre-line rendert sie als sichtbare Absätze ohne dass im HTML
/

stehen muss. */ white-space: pre-line; } /* Pfeil-Indikator nach oben, zeigt zum Trigger-Icon. Trick: gedrehtes Quadrat mit den gleichen oberen Ecken wie das Bubble (Border + Tint-Background), die untere Hälfte sitzt unter dem Bubble und ist verdeckt. CSS-Variable --arrow-left wird in JS gesetzt, damit der Pfeil exakt unter dem Trigger sitzt. */ .help-bubble::after { content: ''; position: absolute; top: -7px; left: var(--arrow-left, 50%); width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(var(--blue-soft), var(--blue-soft)), var(--panel); border-top: 1px solid var(--blue-mid); border-left: 1px solid var(--blue-mid); } .help-bubble.hidden { display: none; } /* Optionale Headline am Anfang des Hilfe-Texts. Im Markup direkt als erstes Kind setzen — keine Whitespace-/Newline davor (wegen pre-line). */ .help-bubble-title { display: block; margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid var(--blue-mid); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--blue); line-height: 1.3; } .compass-btn { margin-top: 4px; } .compass-btn svg { transition: transform .25s cubic-bezier(0.32,0.72,0,1); } .map { width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); box-shadow: var(--shadow-lg); } /* OpenLayers overrides */ .ol-viewport, .ol-layers, .ol-layer, .ol-canvas { border-radius: var(--radius); } .ol-control { background: var(--panel) !important; border-radius: 10px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } .ol-control button { background: transparent !important; color: var(--ink-muted) !important; border-radius: 7px !important; width: 28px !important; height: 28px !important; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important; font-size: 14px !important; transition: background .12s, color .12s !important; } .ol-control button:hover { background: var(--green-soft) !important; color: var(--green) !important; } .ol-attribution { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important; font-size: 9px !important; } /* ── RIGHT SIDEBAR ───────────────────────────────────────────────────────── */ .right-sidebar { display: flex; flex-direction: column; position: relative; } .r-panel { display: flex; flex-direction: column; flex: 1; padding: 16px; gap: 12px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .r-panel.hidden { display: none !important; } /* Kurzes Hintergrund-Flash beim Eintritt in den Edit-Mode — visuelles Feedback fürs Aktivieren via Click-Again-to-Edit. --green-mid ist theme-aware (im Theme-Red zur Bordeaux-Variante gemapped). Klasse wird in panels.js nach showPanel('panelEdit') gesetzt + per animationend wieder entfernt. */ @keyframes rPanelFlash { 0% { background-color: var(--green-mid); } 100% { background-color: transparent; } } .r-panel.panel-flash-edit { animation: rPanelFlash 2s ease-out; } .r-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-right: 10px; display: flex; flex-direction: column; gap: 13px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .form-error { display: none; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 10.5px; color: var(--red); background: var(--red-soft); border: 1px solid rgba(192,57,43,.25); border-radius: var(--radius-sm); padding: 7px 10px; flex-shrink: 0; line-height: 1.5; } .form-error:not(.hidden) { display: block; } .r-panel-footer { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; border-top: 1px solid var(--border); } .r-panel-footer .btn { flex: 1; } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .btn { height: 34px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--ink-muted); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background .14s, color .14s, border-color .14s, transform .08s; white-space: nowrap; /* Wenn .btn auf einem sitzt, sonst greift home.css's globaler `a { text-decoration: underline }` und der Anchor-Button bekommt einen Underline den der