/* ============================================================ Ride With Love – Trip-Planner Marken-Design. Tokens im :root steuern Farben/Fonts zentral. Fonts: Oswald (Listen/Etappen-Headlines), Work Sans (Text/H1). ============================================================ */ /* Self-hosted fonts — kein Google-Request, DSGVO-konform */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/oswald-400.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/oswald-500.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/oswald-600.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/oswald-700.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/work-sans-400.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/work-sans-500.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/work-sans-600.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/work-sans-700.woff2') format('woff2'); } /* Hanken Grotesk (Design-System v2, --ds-font) — eine Datei deckt Weight 400-800 ab (Google liefert für diesen Font ein Variable-Font-Subset, kein Fehler/Platzhalter). */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/hanken-grotesk.woff2') format('woff2'); } :root { --dark-green: #39421f; --park-marke: #0d2e52; /* §9: Kanon-Farbe der Parkplatz-Marke (rund, weißer Rand) — EINE Quelle für Karten-Marker UND Listen-Marke */ --cheesecake: #fffeee; --brown: #b9601c; --bg: #f5f3ec; --hover-bg: #eee9de; --ink: #1a1a1a; --muted: #6f6a5c; --line: #e3ddcf; --rail: #cfc8b6; --free: #4f7a2f; --paid: #b9601c; --pin-temp: #8f8a7d; /* Etappen-Pin temporär (noch keine Unterkunft) – ruhiges Grau */ --pin-fix: #39421f; /* Etappen-Pin fix (Unterkunft gesetzt) – dark-green */ --poi-water: #3b9eff; --poi-food: #f97316; --poi-ebike: #22c55e; --poi-repair: #8b5cf6; --poi-camp: #eab308; --danger: #b03030; --radius: 14px; --radius-sm: 10px; --list-head-h: 120px; --font-head: 'Oswald', sans-serif; --font-text: 'Work Sans', -apple-system, sans-serif; /* ============================================================ Design-System v2 (Canvas-Referenz „Ride_With_Love_Planner" v1_13) — Basis-Identität. ACHTUNG: additiv, unverdrahtet (Seam-Prinzip). Kein bestehender Token wird umbenannt/ersetzt; kein bestehendes CSS konsumiert diese Werte — verbaut wird erst in einem eigenen Folgeschritt. Bike-Service-Farbe & Co-Pilot-Ton bewusst NICHT aufgenommen — offene Punkte. POI-Trio & Trip-Pass-Gold folgen als Schritt 2, sobald ein Screen sie konsumiert. ============================================================ */ --ds-cream: #F2EDE1; --ds-cream-2: #FBF8F1; --ds-ink: #3C4222; --ds-green: #3A3F20; --ds-orange: #C2581F; /* Trip-Orange — exklusiv „dein Trip" */ --ds-orange-tint: #C2581F24; --ds-muted: #6E6B5C; /* Abseits-Kennzahl: färbt NUR den Zahlenwert einer "X m abseits der Route"-Kennzahl, nie den umgebenden Satztext. Gleicher Hex wie --ds-orange (bewusst identisch, aber semantisch eigener Token — keine Kopplung an Trip-Orange). */ --ds-abseits: #C2581F; --ds-line: rgba(60, 66, 34, .13); --ds-tint: rgba(194, 88, 31, .07); /* Co-Pilot-Ton — von new_tour.php nach:root promoted, weil die Hauptapp jetzt ein Co-Pilot-Element hat (Parkplatz-Popover-Hinweis). Nur Co-Pilot, nie Trip. */ --ds-copilot: #9E3F6D; --ds-copilot-2: #C15E8C; /* Trip-Pass-Gold — Schritt 2 (s. Kommentar oben), erster Konsument: t13 .tpbtn.gold / .tag-pass. */ --ds-gold: #E7C979; --ds-gold-2: #C99A3A; /* Terrain-Reiter (Wegbeschaffenheit), eigene Hex-Werte — dedizierte Tokens (Werte teils identisch zu ds-Tokens, aber eigene Semantik) */ --terr-grade-0: #3F6B2A; --terr-grade-5: #C99A3A; --terr-grade-10: #C2581F; --terr-grade-15: #A33417; --terr-s1: #1C4467; --terr-s2: #A33417; --terr-s3: #080605; --terr-hatch-light: #B4B2A9; --terr-hatch-dark: #9B998E; --terr-track: #F4F4F1; --terr-weg-1: #39421F; --terr-weg-2: #565A3C; --terr-weg-3: #6E6B5C; --terr-weg-4: #8A897B; --terr-weg-5: #9B998E; --terr-weg-6: #B4B2A9; --terr-weg-7: #C7C5BC; --ds-gold-ink: #3A2A08; /* Text auf Gold-Fläche */ --ds-gold-icon: #5a3d0a; /* Icon-Chip auf Gold-Fläche, eigener Ton (dunkler als -ink-muted) */ --ds-gold-ink-muted: #6b4e12; /* Sublabel/"Trip-Pass"-Tag-Text */ --ds-success: #3f6b2a; /* Trip-Pass gekauft/"Enthalten", erster Konsument: t13 .tpbtn.active */ --ds-success-tint: #bfe0a8; /* Sublabel-Ton auf --ds-success-Fläche */ /* Startseite: weicher Fließtext + vier Pastell-Chips der Feature-Kacheln (Fläche/Glyph). einziger Konsument: landing.css. */ --ds-text-soft: #5b5848; --ds-chip-water: #DCE7F5; --ds-chip-water-fg: #2F6DB5; --ds-chip-sand: #F1E3B6; --ds-chip-sand-fg: #9A7A1E; --ds-chip-leaf: #DDEBD2; /* Glyph: --ds-success */ --ds-chip-clay: #F5D9CC; /* Glyph: --ds-orange */ /* Ampel-Farben: EIN kanonisches Grün/Amber/Rot für jeden Ampel-Schreiber (kein Drift). Grün deckt sich mit --ds-success. Erster Verbraucher: Rad-Status-Abzeichen (.rs-* / .tr-bike). */ --ds-ampel-green: #3f6b2a; --ds-ampel-amber: #946512; --ds-ampel-red: #a3302a; /* Verkehrsmittel-Farben der Verbindungsliste (Handoff Bus+Bahn): Bahn blau, Bus braun — generisch, NICHT anbieter-spezifisch. */ --ds-mode-rail: #2a3a52; --ds-mode-bus: #7a6a3c; /* Verbindungsliste-Popover-Flächen (Handoff „Popover-Verbindung-waehlen"): übernommene Zeile + „Im Trip"-Schublade. */ --ds-taken-bg: #f7faf2; /* Zeilen-Tint „übernommen" (grünstichig hell) */ --ds-tray-bg: #eae5d6; /* „Im Trip"-Schublade */ --ds-foot-bg: #f3efe4; /* „Tickets buchen"-Leiste (Handoff .tr-foot Literal #F3EFE4) */ /* Anreise-Card Aktiv-Tag (root-Token): --anreise-aktiv-fg aliast --ds-success (identischer Wert #3f6b2a, keine Zweit-Quelle); --anreise-aktiv-bg tokenisiert das im File bereits mehrfach wiederholte rgba(91,140,62,α) ("#5B8C3E"-Familie, s. .mk-ok/.mk-pill/.mk-typetag-night) auf genau die geforderten 20%, statt eine 6. Roh-Wiederholung im Stylesheet anzulegen. */ --anreise-aktiv-fg: var(--ds-success); --anreise-aktiv-bg: rgba(91, 140, 62, .2); /* Roadbook-Bühne: dunkle Premium-Ebene als Gegenstück zur cremefarbenen Arbeitsebene. Nur unter body.rbs-dark konsumiert (Roadbook-Tab). Creme-Alpha-Werte = --ds-cream (#F2EDE1) als Alpha-Blend, s. Konvention oben. */ --rbs-stage-1: var(--ds-green); /* #3A3F20 Verlauf-Start */ --rbs-stage-2: #23261A; /* Verlauf-Ende */ --rbs-title: #ffffff; /* Titel, aktiver Tab */ --rbs-text: var(--ds-cream); /* Fließtext/Icons, Creme */ --rbs-kicker: #C9B79A; /* Kicker, Einheiten */ --rbs-glass-sub: #C9BFA6; /* Sublabel auf Glas-Button */ --rbs-line: rgba(242, 237, 225, .16); /* Trennlinien */ --rbs-badge-bg: rgba(242, 237, 225, .12); /* Badge-/Glas-Fläche */ --rbs-badge-line: rgba(242, 237, 225, .22); /* Badge-Rahmen */ --rbs-glass-bg: rgba(242, 237, 225, .10); --rbs-glass-line: rgba(242, 237, 225, .30); --rbs-glass-ic: rgba(242, 237, 225, .16); --rbs-tab-off: rgba(242, 237, 225, .50); /* inaktiver Tab-Text */ --ds-font: 'Hanken Grotesk', sans-serif; /* @font-face folgt in eigenem Mini-Schritt */ /* ── Map-POI Pin-Registry — eine Quelle je Pin-Typ ── */ --pin-parking: var(--park-marke); /* #0d2e52 — Parkplatz (unverändert) */ --pin-start: var(--ds-green); /* #3A3F20 — Start */ --pin-ziel: var(--ds-green); /* #3A3F20 — Ziel/Abreise (NEU: war orange) */ --pin-transfer: var(--ds-green); /* #3A3F20 — Umsteige-Pin (Leg-Geometrie), grün wie Start/Ziel */ --pin-water: #2F6A9E; --pin-food: #946512; --pin-charging: #3F6B2A; --pin-bikeshop: #7B4231; --pin-sleep: #4B3C7A; /* gemeinsame Übernachtungsfarbe: Hotel/Hütte/Camp/Overnighter */ --pin-peak: #A3302A; --pin-lift: #1F6B63; --pin-custom: #5C5647; --pin-stop: #f0c900; /* Haltestelle — gelbe Fläche (Zeichen 224). Benannte Zweifarb-Ausnahme: grünes "H" im Glyph gebacken, s. app.js PIN_REGISTRY.stop / */ /* Marker-Maße + Zustände */ --marker-dot-size: 30px; /* +15% ggü. 26px (Map-POI zu klein) */ --marker-icon-size: 15px; /* proportional mitgezogen (Ratio 0.5 zum Dot) */ --marker-ring: 2.5px; --marker-sel-scale: 1.38; --marker-sel-ring: rgba(20,22,16,.65); /* neutraler Auswahl-Ring, farb-unabhängig */ } * { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 0 80px 20px; /* luftige Ränder + 20px "Footer" unten in BG-Farbe */ background: var(--bg); color: var(--ink); font-family: var(--font-text); letter-spacing: -0.02em; } /* ---------- Headline-Typografie ---------- */ .modal-head h2 { font-family: var(--font-head); font-weight: 700; color: var(--brown); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } /* Shared Header v2 (Schritt 0, UI-Umzug — Design-Canvas Turn 13/14, v10-top/v10-nav-Optik). Gilt für ALLE Tabs (tour-title-bar/info-bar/tabnav sitzen außerhalb der Panels). */ h1.tour-title { font-family: var(--ds-font); font-weight: 800; color: var(--ds-ink); letter-spacing: -0.01em; font-size: 22px; margin: 0; /* kanonisches .v10-tname hat kein Margin — das alte 20px-Top-Margin ließ die Headline zu tief hängen */ } h3.poi-head { font-family: var(--font-head); font-weight: 400; color: var(--dark-green); letter-spacing: -0.02em; margin: 0; } /* ---------- Tour-Titel (H1, full width) + Sub-Headline (Etappen · km) ---------- */ .tour-title-bar { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 14px; background: var(--bg); margin: 20px 0 20px 0; } /* Trip-Badge (v10-top-Optik, Design-Canvas Turn 13/14) — Aktivitäts-Icon der aktiven Tour (via updateTitle() in app.js), keine feste Bedeutung je Tab/Screen. */ .v10-badge { width: 46px; height: 46px; border-radius: 13px; background: var(--ds-green); color: #fff; display: grid; place-items: center; flex: none; align-self: flex-start; margin-top: 5px; } .v10-badge svg { width: 23px; height: 23px; } .v10-badge:empty { display: none; } .v10-ttl { min-width: 0; } /* kanonisch bare — h1/subhead sind Blocks, brauchen keinen eigenen Flex-Kontext */ /* Canvas 10a-2: Map-Pin-Icon + „X Etappen · Y km" direkt unter dem H1. Werte 1:1 aus kanonischem .v10-troute — vorher ein NEGATIVES Top-Margin, das die Sub-Headline aktiv ins H1 zog. */ .tour-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; font-family: var(--ds-font); font-size: 12px; font-weight: 600; color: var(--ds-muted); } .tour-subhead svg { width: 13px; height: 13px; color: var(--ds-green); } .tour-subhead:empty { display: none; } /* Freemium-Signale im Subhead. Gold = Trip-Pass, Grün = Free. Vorlage 1:1, nur font-family: 'Hanken Grotesk' (nicht self-hosted) → var(--ds-font) für visuelle Konsistenz mit den Nachbar-Chips (.mt-chip). */ .tag-pass { display: inline-flex; align-items: center; gap: 5px; font: 800 9px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-gold-ink); background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-2)); border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; } /* Gold über bestehende --ds-gold*-Tokens */ .tag-pass svg { width: 10px; height: 10px; flex: none; stroke-width: 2.6; } /* Registry-Glyph hat 1.8 — bei 10px wirkt das heller als der 800er-Text */ .tag-free { display: inline-flex; align-items: center; gap: 5px; font: 800 9px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: #5c6b3f; background: rgba(91,140,62,.13); border: 1px solid rgba(91,140,62,.3); border-radius: 7px; padding: 4px 8px; } .tag-free::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #5B8C3E; flex: none; } .tag-free.dark { color: #CFE0BE; background: rgba(207,224,190,.14); border-color: rgba(207,224,190,.3); } /* BETA-VERSION-Tag in der Kopf-Kachelleiste — Bauform 1:1 von .tag-free/.tag-pass uebernommen (Versalien, 9px/800, gleiche Polsterung/Rundung), damit die Tag-Familie EINE Bauform behaelt; Rot ausschliesslich aus dem bestehenden --ds-ampel-red (kein neues Hex, kein neuer Token, ). Gefuellt statt getoent, weil das Tag eine Produkt-Aussage traegt und nicht als Ampel-Zustand einer Nachbar-Kachel gelesen werden darf. Kein ::before-Punkt (den fuehrt .tag-free als Frei-Indikator) — sonst lesen sich beide als dieselbe Zustands-Familie. */ .tag-beta { display: inline-flex; align-items: center; font: 800 9px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-cream); background: var(--ds-ampel-red); border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; white-space: nowrap; } /* ---------- v10-facts (Etappen · Zeitraum · Reisende · Aktivität) ---------- Byte-exakt aus dem echten Canvas-Markup übernommen App-Screens.html) — sitzt IM Header (.tour-title-bar), rechts von Titel/ Badge, nicht mehr als separate Zeile darunter. Facts-Umfang bewusst UNVERÄNDERT (4 statt der 2 Canvas-Beispiel-Facts): Etappen-Zähler und Aktivität bleiben erreichbar (kein stilles Entfernen von Funktionalität). */ .v10-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; flex: none; } .v10-facts:empty { display: none; } .v10-fact { display: inline-flex; align-items: center; gap: 10px; height: 46px; border: 1px solid var(--ds-line); border-radius: 13px; padding: 8px 13px; background: #fff; cursor: pointer; font-family: var(--ds-font); text-align: left; box-shadow: 0 1px 2px rgba(40,44,20,.05); transition: border-color .12s; } .v10-fact:hover { border-color: rgba(60,66,34,.3); } /* Read-only Variante (keine Bearbeitungs-Affordanz auf fixierten Werten) */ /* "noch offen"-Zustand (Canvas: gestrichelter Orange-Rahmen) — bisher nur beim Zeitraum ohne gesetztes Datum, da Reisende/Etappen/Aktivität immer einen Wert haben. rgba(194,88,31,..) = --ds-orange als Alpha-Blend (s. --ds-tint- Konvention weiter oben, CSS-Vars erlauben das nicht direkt aus var()). */ .v10-fact.pending { border-style: dashed; border-color: rgba(194,88,31,.4); background: var(--ds-tint); } .v10-fact.pending .v10-fic { background: rgba(194,88,31,.12); } .v10-fact.pending .v10-fval { color: var(--ds-orange); } /* "Datum setzen"-Button-Variante — noch OHNE Konsument im Code (aktuell zeigt der undatierte Zustand .v10-fact.pending). Bereitgestellt, Verortung/Wire-up ist offen. */ .v10-fic { width: 30px; height: 30px; border-radius: 9px; background: var(--ds-tint); color: var(--ds-orange); display: grid; place-items: center; flex: none; } .v10-fic svg { width: 16px; height: 16px; } .v10-fact > div { display: flex; flex-direction: column; min-width: 0; } .v10-flbl { font: 800 8.5px var(--ds-font); letter-spacing: .11em; text-transform: uppercase; color: var(--ds-orange); margin-bottom: 2px; } .v10-fval { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--ds-font); color: var(--ds-ink); } .v10-fval b { font-weight: 700; } /* "Reisende" zeigt zwei Icons INNERHALB des Werts (Zimmer + Personen, unverändert) — eigene Größenregel, da der Icon-Chip (.v10-fic) hier nur den Kartentyp markiert. */ .v10-fval .ic { width: 15px; height: 15px; flex: 0 0 15px; } .v10-fpen { color: var(--ds-muted); opacity: .5; margin-left: 2px; display: inline-flex; flex: none; } .v10-fpen svg { width: 14px; height: 14px; display: block; } /* ---------- v10-eck: Zeitraum + Reisende als EINE segmentierte Karte ---------- Design-Tool-Quelle (Screens A/B). Ersetzt die zwei einzelnen .v10-fact-Pills durch eine Karte mit Innentrenner; die Segmente behalten ihre onclick-Handler (Popover Zeitraum/Reisende). "pending" (kein Datum) sitzt auf der KARTE, färbt aber nur das erste Segment (Zeitraum) orange — Reisende hat immer einen echten Wert und darf nie als "noch offen" erscheinen. */ .v10-eck { display: inline-flex; align-items: stretch; background: #fff; border: 1px solid var(--ds-line); border-radius: 13px; box-shadow: 0 1px 2px rgba(40,44,20,.05); overflow: hidden; } .v10-eck .v10-fact { border: none; border-radius: 0; box-shadow: none; background: transparent; height: auto; } .v10-eck .v10-fact:hover { background: rgba(60,66,34,.045); } .v10-eck .v10-fact + .v10-fact { border-left: 1px solid var(--ds-line); } .v10-eck.pending { border-style: dashed; border-color: rgba(194,88,31,.4); background: var(--ds-tint); } .v10-eck.pending .v10-fact:hover { background: rgba(194,88,31,.05); } .v10-eck.pending .v10-fact + .v10-fact { border-left-color: rgba(194,88,31,.28); } .v10-eck.pending .v10-fact:first-child .v10-fic { background: rgba(194,88,31,.12); } .v10-eck.pending .v10-fact:first-child .v10-fval { color: var(--ds-orange); } /* Header-Speichern (nur Trip-Edit / Variante A) — ruft echtes savePlan(). Positive-only: grüne Bestätigung am Button nach Erfolg, nie ein "ungespeichert"- Signal. Der teilbare Plan-Token landet nach dem Save in der Adressleiste (history.replaceState) — kein separates Link-Panel (kein Mehrwert). */ .v10-savewrap { display: inline-flex; position: relative; } /* Höhe = Button (Pillen-Höhe); Status hängt absolut darunter, ohne die Zeile zu strecken */ .v10-save { display: inline-flex; align-items: center; gap: 8px; height: 46px; font: 800 12px var(--ds-font); color: #fff; background: var(--ds-orange); border: none; border-radius: 13px; padding: 0 16px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(194,88,31,.7); transition: filter .15s, transform .06s, background .15s; } .v10-save svg { width: 15px; height: 15px; } .v10-save:hover { filter: brightness(1.07); } .v10-save:active { transform: translateY(1px); } .v10-save.saved { background: var(--ds-success); box-shadow: 0 6px 16px -8px rgba(63,107,42,.7); } .v10-save:disabled { cursor: default; } .v10-save-spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: v10spin .7s linear infinite; } /* Ambienter Save-Status unter dem Button: „Speichere…" / „Gespeichert". Getrieben von Auto- UND manuellem Save (eine Wahrheit „ist der Stand gespeichert?"). Kein Fehlerzustand: scheitert der Save, bleibt es ehrlich auf „Speichere…" — nie ein falsches „Gespeichert". */ .autostat { position: absolute; top: 100%; right: 2px; margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ds-muted); white-space: nowrap; pointer-events: none; } .autostat-ic { display: inline-flex; color: var(--ds-success); } .autostat-ic svg { width: 13px; height: 13px; } .autostat-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid rgba(110,107,92,.3); border-top-color: var(--ds-muted); animation: v10spin .7s linear infinite; } @keyframes v10spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .v10-save-spin, .autostat-spin { animation: none; } } /* Gesamtkarte-Button — helle .tpbtn-Variante (Canvas: zwei .tpbtn.free-Varianten je nach Hintergrund, hier die helle für den weißen Header). Bewusst disabled (Baustein noch nicht gebaut). */ .tpbtn.free { background: #fff; border: 1px solid var(--ds-line); } /* height/padding jetzt aus .tpbtn-Basis (Reihen-Sync mit .v10-fact) */ .tpbtn.free > .ic { background: var(--ds-tint); color: var(--ds-green); } .tpbtn.free .lb { color: var(--ds-ink); } .tpbtn.free:disabled { cursor: default; opacity: .85; } /* Info-Popover */ .info-pop { position: fixed; z-index: 120; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.2); padding: 16px 18px; min-width: 250px; } .pop-title { font: 800 13px var(--ds-font); text-transform: none; color: var(--ink); margin-bottom: 10px; } .pop-sub { font: 500 11.5px var(--ds-font); color: var(--ds-muted); margin: -4px 0 12px; } .pop-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .pop-row span { flex: 1; } .pop-row .ic { width: 18px; height: 18px; color: var(--ink); flex: 0 0 18px; } .pop-row b { min-width: 22px; text-align: center; font-weight: 700; } .pop-step { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--dark-green); line-height: 1; } .pop-step:hover { background: var(--hover-bg); } .pop-actions { margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } /* Datums-Kalender im Popover */ .cal-head { display: flex; align-items: center; margin-bottom: 8px; } .cal-head .cal-spacer { flex: 1; } .cal-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); display: grid; place-items: center; cursor: pointer; position: relative; z-index: 1; } /* z-index: ganze Button-Flaeche als Klickziel ueber die -26px-ueberlappenden Monate heben */ .cal-nav:hover { background: var(--ds-cream); } .cal-nav svg { width: 14px; height: 14px; pointer-events: none; } /* Chevron zieht das Klickziel nicht an sich — Klick zaehlt immer als Button */ .cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: -26px; } .cal-title { font: 800 16px var(--ds-font); color: var(--ds-ink); text-align: center; margin: 0 0 10px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-wd span { font: 600 11px var(--ds-font); color: var(--ds-muted); text-align: center; padding-bottom: 4px; } .cal-empty { height: 32px; } .cal-day { height: 32px; display: grid; place-items: center; font: 600 13px var(--ds-font); color: var(--ds-ink); border: 0; background: transparent; border-radius: 8px; cursor: pointer; } .cal-day:hover:not(.rng) { background: var(--hover-bg); } .cal-day.rng { background: var(--ds-orange-tint); color: var(--ds-ink); border-radius: 0; } .cal-day.rng.rng-start, .cal-day.rng.rng-end { background: var(--ds-orange); color: #fff; } .cal-day.rng-start { border-radius: 8px 0 0 8px; } .cal-day.rng-end { border-radius: 0 8px 8px 0; } .cal-day.rng-start.rng-end { border-radius: 8px; } @media (max-width: 768px) { .cal-months { grid-template-columns: 1fr; } .cal-month:nth-child(2) { display: none; } } /* Info-Popover-Scope-Overrides: EIN geteiltes #infoPop (auch showInfoPop + Lösch-Dialog), Basis .info-pop bleibt unangetastet — Breite/Radius/Padding nur je Scope-Klasse. */ .info-pop.cal-pop { width: 508px; max-width: calc(100vw - 24px); padding: 18px 20px 16px; border-radius: 18px; } .info-pop.tmc-pop { width: 334px; max-width: calc(100vw - 24px); padding: 18px 20px 16px; border-radius: 18px; } /* Zeit-Picker (Uhrzeit-Popover, openTimePop) — Stunde/Minute-Doppelspalte, 5-Min-Raster */ .tmc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tmc-col { border: 1px solid var(--ds-line); border-radius: 12px; overflow: hidden; } .tmc-ch { font: 800 10px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); text-align: center; padding: 7px 0; background: var(--ds-cream); border-bottom: 1px solid var(--ds-line); } .tmc-scr { position: relative; height: 158px; overflow: auto; padding: 4px; } .tmc-scr::-webkit-scrollbar { width: 6px; } .tmc-scr::-webkit-scrollbar-thumb { background: rgba(60,66,34,.24); border-radius: 3px; } .tmc-o { display: block; width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 8px 0; font: 700 13px var(--ds-font); color: var(--ds-ink); text-align: center; cursor: pointer; } .tmc-o:hover { background: var(--hover-bg); } .tmc-o.on { background: var(--ds-orange); color: #fff; } /* ---------- Main: Liste | Map ---------- */ .main-row { flex: 1; min-height: 0; display: flex; column-gap: 44px; padding-top: 4px; } #content { flex: 1; overflow-y: auto; background: var(--bg); } #map { flex: 1; min-width: 320px; background: var(--hover-bg); /* ruhige Fläche vor dem Tile-Render, wird von der Karten-Canvas überdeckt */ position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.06); } /* Karten-Attribution — EINE Optik für alle Karten: kompakt („i"), durchgängige Textfarbe Ink, Links nicht abgesetzt */ .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a { color: var(--ds-ink); font-family: var(--ds-font); font-size: 11px; text-decoration: none; } .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(251,248,241,.9); } /* ---------- Listen-Header (sticky): Titel + Etappen-Tabs ---------- */ /* Tab-Navi lag bisher IN #content (nur linke Spalte von .main-row) und ging deshalb nie über die volle Breite. Jetzt eigenes Geschwister- Element VOR .main-row (planner.php) — spannt beide Spalten (Content + Karte). position:sticky/z-index waren nur für den Scroll INNERHALB von #content nötig (dessen einzigem Scroll-Container) und sind hier ohne Wirkung, deshalb entfernt. */ .tabnav { background: var(--bg); display: flex; gap: 26px; margin: 16px 0 20px 0; width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--ds-line); } .tabnav::-webkit-scrollbar { height: 0; } .tabnav .tab { flex: 0 0 auto; padding: 0 2px 12px; background: none; cursor: pointer; font-family: var(--ds-font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); border: none; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; } .tabnav .tab:hover { color: var(--ds-ink); } /* border-bottom statt box-shadow: .tabnav braucht overflow-x:auto fürs mobile Scrollen, wodurch overflow-y implizit ebenfalls "auto" wird (CSS-Spec: ein Overflow-Achse ≠ visible macht die andere ebenfalls non-visible) — ein box-shadow, das 2px AUSSERHALB der Button-Box liegt, wurde dadurch abgeschnitten. border-bottom zählt zur Box selbst und ist davon nicht betroffen. */ .tabnav .tab.active { color: var(--ds-ink); border-bottom-color: var(--ds-orange); } /* ---------- Etappen-Liste (Tourenverlauf) ---------- */ .content-body { padding-bottom: 70vh; } .etappe { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding-bottom: 24px; scroll-margin-top: var(--list-head-h); } /* Hover: nur die Box hebt sich ab + Bubble-Icon wechselt */ .etappe-box { padding: 8px 14px; border-radius: var(--radius); transition: background .12s; min-width: 0; } .etappe:hover .etappe-box { background: var(--hover-bg); } .etappe:hover .bubble img.normal { display: none; } .etappe:hover .bubble img.hover { display: block; } .etappe.active .etappe-box { background: var(--hover-bg); box-shadow: inset 0 0 0 1.5px var(--rail); } /* Etappen-Steuerung – nur bei Hover sichtbar */ /* ---------- POI-Gruppen (klappbar, default zu) ---------- */ .poi-group { margin-top: 12px; } .poi-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 16px; } .poi-head .poi-ic { display: inline-flex; flex: 0 0 15px; color: var(--brown); } .poi-head .poi-ic svg { width: 15px; height: 15px; } .poi-head::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 12px; transition: transform .15s ease; } .poi-group.collapsed .poi-head::after { transform: rotate(-90deg); } .poi-group.collapsed .poi-body { display: none; } .poi-body { padding: 10px 0 2px 0; } /* Boxen linksbündig mit dem POI-Icon */ .sec-placeholder { color: var(--muted); font-size: 13px; font-style: italic; } /* ---------- Frontend-Wirbelsäule Schritt 2: typisierte Tages-Chrome ---------- Additiv, eigener .tv-*-Namensraum. Bewusst NICHT .v10-* / .mob-* (Canvas-Verdrahtungsphase) und NICHT .etappe-* (geteilt mit Roadbook/Unterlagen, IST D11). Nur bestehende Tokens, kein neues Hex/kein neuer Token. Die fortlaufende Tagesnummer (.tv-daymark) sitzt additiv auch im .etappe-head der Etappen-Zeilen; die inerten Ruhetag/Transfertag- Zeilen (.tv-day) spiegeln das .etappe-Grid (34px 1fr), damit sie mit den Etappen fluchten. Der Ruhetag/Transfertag-Farbcode (blau/braun aus dem Canvas) ist noch nicht tokenisiert → Unterscheidung hier über Typ-Icon + T5-Tag, Farb-Differenzierung folgt der Verdrahtungsphase. */ .tv-day-box { padding: 8px 14px; border-radius: var(--radius); transition: background .12s; min-width: 0; } /* ---------- Frontend-Wirbelsäule Schritt 3: inerte Lese-Slots ---------- Daten-inerte Flächen (kein Fetch, kein DB-Zugriff, kein onclick) — reine Platzhalter, die Verdrahtung folgt in einer späteren Phase. Eigener .tv-slot-Namensraum, nur bestehende Tokens. Höhenprofil-Fläche löst bewusst KEINEN Roadbook-Live-Fetch aus (rein statisch). */ /* ═══════════════════════════════════════════════════════════════════════════ MUSTER. REIN OPTISCH. Eigener .mk-*-Namensraum, kollidiert mit nichts. Strukturfarben über die bestehenden --ds-*-Canvas-Tokens; die wenigen Canvas-Akzent-Hex (Im-Trip-Grün, Wasser/Einkehr/E-Bike) sind BEWUSST als Muster-Literale gesetzt und NICHT ins Produktions-Token-System übernommen (throwaway). Font: bestehendes Work Sans/ Oswald (Design-Font 'Hanken Grotesk' ist nicht self-hosted → nicht ladbar). Komplett entfernbar mit diesem Block + der musterStageCard()-Funktion + dem MUSTER-Block in showRoute. ═══════════════════════════════════════════════════════════════════════════ */ .mk-stage { width: 100%; margin: 30px 0; background: var(--ds-cream-2); border: 1px solid rgba(58,63,32,.7); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px -20px rgba(40,44,20,.5); font-family: var(--font-text); } /* volle Navigationsbreite; Border --ds-green 70% */ .mk-hd { display: flex; align-items: center; gap: 13px; padding: 13px 16px; background: rgba(207,200,182,.9); border-bottom: 1px solid var(--ds-line); } /* Kopf-Hintergrund #CFC8B6 (== --rail) 90% Deckkraft */ /* Karten dauerhaft aufgeklappt: der einzeln-einklappbare Zustand (Klapp-Flag, Collapsed-Klasse, Header-Chevron) wurde ersatzlos entfernt — jeder Header-Klick löste einen vollen musterTripSpine()-Neubau aus (Perf). Ein offenes Dropdown (Status-Tag bzw. Kebab) wird weiterhin per :has transient über die Nachbar-Karten gehoben (z-index:30) — sonst läge das Menü trotz z-index:20 hinter der Folge-Karte; nur bei offenem Menü aktiv. mk-mapfull liegt bei 300. */ .mk-stage:has(.mk-statustag.open) { position: relative; z-index: 30; } .mk-mark { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--ds-green); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 19px; margin-top: -4px; } .mk-rt { flex: 1; min-width: 0; } .mk-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--ds-ink); } .mk-date { font-size: 12px; color: var(--ds-muted); margin-top: 2px; } /* Kachelleiste im Karten-Kopf (analog .tour-subhead) — Datum/km/hm als .mt-chip-Kacheln. */ .mk-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; } .mk-body { display: grid; grid-template-columns: 2fr 1fr; height: 530px; } /* Content 2/3 · Karte 1/3; feste Kartenhöhe; Panel scrollt bei Überlauf */ .mk-left { padding: 15px 17px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; } /* Karten-Card-Layout: Kopf sitzt nur über der linken Spalte, die Karte wird ein Vollhöhen-Grid-Kind rechts (40 % Breite, bis zur oberen Border). Nur Karten-Cards (:has(.mk-map)) und NICHT im Vollbild (:not(.mk-mapfull-card) — dort gelten dessen eigene Flex-Overrides). Die Map spannt beide Grid-Reihen (Kopf + Body) → volle Höhe; ihre border-left läuft dadurch über alles. */ .mk-stage:has(.mk-map):not(.mk-mapfull-card) { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 530px; grid-template-areas: "hd map" "body map"; } .mk-stage:has(.mk-map):not(.mk-mapfull-card) > .mk-hd { grid-area: hd; } .mk-stage:has(.mk-map):not(.mk-mapfull-card) > .mk-body { grid-area: body; display: flex; flex-direction: column; height: auto; min-height: 0; } .mk-stage:has(.mk-map):not(.mk-mapfull-card) > .mk-body > .mk-left { flex: 1 1 auto; min-height: 0; } .mk-stage:has(.mk-map):not(.mk-mapfull-card) > .mk-map { grid-area: map; height: auto; } .mk-tabs { display: flex; gap: 6px; background: var(--ds-cream); border: 1px solid var(--ds-line); border-radius: 12px; padding: 5px; } .mk-tab { flex: 1; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--ds-muted); padding: 8px 6px; border-radius: 9px; white-space: nowrap; cursor: default; } .mk-tab svg, .mk-tab .ic { width: 15px; height: 15px; } .mk-tab.active { background: #fff; color: var(--ds-ink); box-shadow: 0 1px 3px rgba(40,44,20,.12); } .mk-tabbadge { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ds-green); color: #fff; font-size: 9px; font-weight: 700; } /* Schritt 6a Teil 2: Anreise-Aktiv-Tag — NUR am Tab, der die getroffene Anreise-Entscheidung trägt (arrivalCopilotVM().activeTag); rein anzeigend, nicht klickbar (§2/§11 „Aktiv"-Vokabular, eigener Ton — anderer Kontext als der grüne Meine-Trips-Bookmark-Tag .mt-triptag). */ .mk-tab-tag { font-family: var(--font-head); font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--anreise-aktiv-fg); background: var(--anreise-aktiv-bg); border-radius: 5px; padding: 2px 6px; white-space: nowrap; } /* Status-Tag-Control: wirksamer Anreise-Modus als Pille im .mk-subhead (sitzt neben .mt-chip, gleicher Container), Chevron öffnet ein Kontextmenü der drei Wahl-Optionen. Idiom exakt wie .mk-kebwrap/.mk-kebmenu — Klick auf .mk-st-btn toggelt .open am Wrapper (JS, unverändert), CSS zeigt/versteckt .mk-st-menu. Pille bleibt in JEDEM Modus System-Grau (--ds-line-Familie) — nur Icon+Label wechseln je mk-statustag-KIND, bewusst KEIN Farbwechsel je Modus arbeitet doppelt"; die grüne Aktiv-Farbe bleibt exklusiv .mk-tab-tag vorbehalten — anderes Konzept, aktiver TAB statt gewählter MODUS). Reusable-Naht: status-agnostisch benannt (mk-st-*), aktuell nur an der Anreise scharf geschaltet. */ .mk-statustag { position: relative; display: inline-flex; } .mk-st-btn { display: inline-flex; align-items: center; gap: 6px; appearance: none; -webkit-appearance: none; background: var(--ds-cream-2); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: 8px; padding: 5px 9px; font: 700 10.5px var(--ds-font); white-space: nowrap; cursor: pointer; } /* Normalschreibung (kein text-transform/letter-spacing) — Labels „Auto"/„Bus + Bahn" wie im Text; Chip-Look sonst wie .mt-chip (--ds-cream-2 + --ds-line-Border, B1) */ .mk-st-btn:hover { border-color: var(--ds-muted); } /* B5: KEIN gruener Fill mehr, Hover = 1px dunkelgrauer Border (--ds-muted, naechster Grau-Ton; ds-ink/-green sind gruen) */ .mk-st-ic, .mk-st-chev { display: inline-flex; align-items: center; } .mk-st-ic svg { width: 13px; height: 13px; display: block; } .mk-st-chev { color: var(--ds-muted); transition: transform .15s; } .mk-st-chev svg { width: 12px; height: 12px; display: block; } .mk-statustag.open .mk-st-chev { transform: rotate(180deg); } /* Menü — Look 1:1 .mk-kebmenu (weiße Karte, Radius, Schatten, gleicher z-index-Layer), aber zweizeilige Options-Zeilen statt Ein-Zeiler. left:0 statt kebmenu-typisch right:0: die Pille sitzt variabel im mk-subhead (nicht fix am Karten-Rand wie der Kebab) — links-verankert bleibt sicher innerhalb der Kartenbreite. */ .mk-st-menu { display: none; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 230px; background: #fff; border: 1px solid var(--ds-line); border-radius: 14px; box-shadow: 0 12px 30px -10px rgba(40,44,20,.35); padding: 6px; } .mk-statustag.open .mk-st-menu { display: flex; } .mk-st-opt { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; cursor: pointer; } .mk-st-opt:hover { background: var(--ds-cream); } /* Aktive Options-Zeile: dezenter Fill kein Trip-Orange, keine .mk-tab-tag-Aktiv-Grün-Doppelbelegung) + Punkt-Indikator statt Häkchen (kein zusätzliches Icon im Markup verfügbar). */ .mk-st-opt.active { background: var(--ds-cream); } .mk-st-opt.active::after { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink); margin-left: auto; } .mk-st-optic { flex: none; display: inline-flex; align-items: center; color: var(--ds-muted); } .mk-st-optic svg { width: 16px; height: 16px; display: block; } .mk-st-opttx { min-width: 0; } .mk-st-opttx b { display: block; font: 700 12.5px var(--ds-font); color: var(--ds-ink); } .mk-st-opttx small { display: block; font: 500 11px var(--ds-font); color: var(--ds-muted); margin-top: 1px; } /* Datums-Chip (Vortag/Folgetag): Menü-Überschrift + Häkchen auf der aktiven Option (Screenshot-SOLL); ersetzt die Punkt-Markierung (::after) des Transport-Tags, nur im dayshift-Chip. */ .mk-st-head { font: 700 10px var(--ds-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); padding: 6px 9px 4px; } .mk-statustag-dayshift .mk-st-menu { width: 260px; } .mk-statustag-dayshift .mk-st-opt.active::after { display: none; } .mk-st-optcheck { flex: none; margin-left: auto; display: inline-flex; align-items: center; color: var(--ds-ink); } .mk-st-optcheck svg { width: 16px; height: 16px; display: block; } .mk-panel { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* scrollt, wenn Inhalt höher als die feste Kartenhöhe */ .mk-lbl { font-family: var(--font-head); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); display: flex; align-items: center; gap: 8px; } .mk-ok { font-family: var(--font-head); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-success); background: rgba(91,140,62,.2); border-radius: 5px; padding: 3px 6px; } /* Muster-Akzent (Canvas), throwaway */ .mk-stay { display: flex; gap: 11px; padding: 13px; border-radius: 12px; border: 1px solid var(--ds-line); background: #fff; } .mk-stay.done { border-color: rgba(91,140,62,.5); background: rgba(91,140,62,.08); } /* Muster-Akzent (Canvas), throwaway */ .mk-stayic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(91,140,62,.16); color: var(--ds-success); display: grid; place-items: center; } .mk-stayic svg { width: 18px; height: 18px; } .mk-stayname { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--ds-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mk-pill { font-family: var(--font-head); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-success); background: rgba(91,140,62,.16); border-radius: 5px; padding: 3px 7px; } .mk-staymeta { font-size: 11.5px; color: var(--ds-muted); margin-top: 3px; } /* Affiliate-Link-Out — NUR Hotels (buchbar); Katalog-POIs bewusst ohne Link (Trip-Pass-Premium). Underline- Affordance ohne neues Icon/Token; Hover = Trip-Orange. */ /* Übernachtung-Reiter: Kategorie-Chip-Body als Spalte mit Abstand. */ .mk-uwbody { display: flex; flex-direction: column; gap: 12px; } /* Übernachtungs-Zeilen-Icon = echtes Map-PIN (Punkt 2, pinDotEl/.rpoi-dot) statt Glyph. */ .mk-stayic--pin { display: inline-flex; align-items: center; justify-content: center; } .mk-stayic--pin .rpoi-dot { position: static; transform: none; } /* Hotel-Zeile (one-size): Sterne, Review-Zeile mit Score-Pille, Anbieter, Preis, Buchen-CTA. */ .mk-stars { color: var(--ds-orange); font-size: 12px; letter-spacing: 1px; white-space: nowrap; } .mk-stayreview { font-size: 11.5px; color: var(--ds-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mk-reviewscore { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 7px; border-radius: 7px; background: var(--ds-green); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 12px; } .mk-staysrc { font-size: 11.5px; color: var(--ds-muted); margin-top: 6px; } .mk-staysrc b { color: var(--ds-ink); font-weight: 600; } .mk-stayfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .mk-stayprice { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ds-ink); } /* Buchen-CTA = Bestandsmuster .tr-book.prim; der Buchen-Button wird rechts ausgerichtet. Ausgegraut-Variante (kein Datum / nicht verfügbar) — Tokens wie sonst (--ds-line/--ds-muted). */ .mk-stayfoot .tr-book { margin-left: auto; } .tr-book.is-disabled, .tr-book:disabled { background: var(--ds-line); border-color: var(--ds-line); color: var(--ds-muted); cursor: not-allowed; pointer-events: none; } .tr-book.is-disabled svg, .tr-book:disabled svg { color: var(--ds-muted); } /* §8: Parkplatz-Karte in der Anreise-Sektion (Bauform .mk-stay). Marke §9 dunkelblau aus der gemeinsamen Quelle --park-marke (wie der Karten-Marker), Klassen-Chip, aufklappbarer §6-Text, Vehikel-Icon → Maps. */ .mk-park { align-items: flex-start; } .mk-park + .mk-park { margin-top: 10px; } .mk-parkic { border-radius: 50%; background: var(--park-marke); border: 2px solid #fff; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .mk-park-info { text-decoration: underline; cursor: pointer; color: var(--ds-muted); } .mk-park-reason { margin-top: 8px; font-size: 12px; color: var(--ds-ink); line-height: 1.5; } /* Baustein 3 (Sandbox-Transplantat abnahme_parken_v3_v3.html .beleg/blockquote/.ev, CSS Z.48-52/63-64): 4-Zeilen-Beleg im Info-Aufklapp. Klassen namespaced park-beleg-… und park-ev-… (Sandbox-.beleg/.ev generisch). Sandbox-Palette → Live-Tokens; Evidenz-Farbpaar rwl-designer-ratifiziert: Cross-Feature-Reuse --ds-mode-rail (offiziell) / --ds-mode-bus (Erfahrung) — non-Ampel, non-reserviert, Text --cheesecake. */ .park-beleg { background: var(--ds-cream-2); border: 1px solid var(--ds-line); border-radius: 6px; padding: 8px 10px; margin-top: 6px; } .park-beleg-head { font: 400 13px var(--ds-font); margin-bottom: 2px; } .park-beleg-date { color: var(--ds-muted); font-size: 11.5px; } .park-beleg blockquote { margin: 4px 0; padding: 4px 10px; border-left: 3px solid var(--ds-line); color: var(--ds-ink); font-size: 13px; } .park-beleg blockquote.de { border-left-color: var(--ds-mode-rail); } .park-beleg .src { font-size: 11.5px; color: var(--ds-mode-rail); word-break: break-all; } .park-ev { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--cheesecake); } .park-ev-offiziell { background: var(--ds-mode-rail); } .park-ev-erfahrung { background: var(--ds-mode-bus); } /* Baustein 4 (Sandbox-Transplantat .ob/.ob .reason, CSS Z.57-58): „Orts-breite Funde" (Typ-C, keine Fläche). Klassen namespaced .park-ob*; Sandbox-Palette → Live-Tokens. */ .mk-park-beleg { margin-top: 5px; } .mk-park-beleg a { color: var(--ds-ink); } .mk-park-r2 { margin-top: 5px; } .mk-park-foot { margin-top: 8px; font-size: 10.5px; color: var(--ds-muted); } .mk-park-nav { flex: none; margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ds-muted); border-radius: 9px; } .mk-park-nav:hover { color: var(--ds-ink); background: var(--hover-bg); } .mk-park-nav svg { width: 20px; height: 20px; } /* Design-Kanon „Definitionen"-Sektion t21: .btn.btn-add.poi — oranger, gestrichelter „POI hinzufügen"-Button. Farben via App-Tokens (--ds-orange == Design --orange, --ds-tint == --tint; rgba(194,88,31,α) = etablierte Orange-Alpha-Konvention der App). Schrift = --ds-font (Hanken Grotesk 800). */ .mk-park-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; min-height: 40px; padding: 9px 16px; font-family: var(--ds-font); font-weight: 800; font-size: 12px; color: var(--ds-orange); background: var(--ds-tint); border: 1px dashed rgba(194,88,31,.45); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .mk-park-add svg { width: 15px; height: 15px; } .mk-park-add:hover { border-color: var(--ds-orange); background: rgba(194,88,31,.12); } /* ── Hotel-Merkliste-Akkordeon .sandbox/lodging-merkliste/index.html) — NEUER Namensraum .mkh-*, bewusst GETRENNT von .mk-stay (oben, geteilt mit dem Parkplatz-Popover .mk-park + der generischen Merk-Liste hut/camp/overnighter, die byte-identisch bleibt). Nur Hotel-Merkzeilen (stayChosenListHtml cat==='hotel') nutzen dies. Pin/Sterne/Review/Meta/Preis reusen die bestehenden generischen Klassen (.mk-stayic--pin/.mk-stars/ .mk-stayreview/.mk-stayprice/.ds-abseits-num), die CTA-Fußleiste reused das Bestandsmuster .tr-foot/ .tr-book (§ Zeile ~1012) — nur der Card-Rahmen + die Statuspille sind neu. */ .mkh-row { border-radius: 12px; border: 1px solid var(--ds-line); background: #fff; margin-bottom: 10px; overflow: hidden; } .mkh-row:last-child { margin-bottom: 0; } .mkh-head { display: flex; align-items: center; gap: 11px; padding: 13px; cursor: pointer; user-select: none; } .mkh-headb { flex: 1; min-width: 0; } .mkh-name { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--ds-ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .mkh-statusline { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; } .mkh-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .mkh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; } .mkh-pill.ok { color: var(--ds-ampel-green); background: rgba(63,107,42,.12); } .mkh-pill.old { color: var(--ds-ampel-amber); background: rgba(148,101,18,.13); } .mkh-pill.no { color: var(--ds-ampel-red); background: rgba(163,48,42,.11); } .mkh-pill.unk { color: var(--ds-muted); background: rgba(110,107,92,.13); } /* Status-Tag „Daten veraltet" (Strang OSM-Auffrischung, Phase A). Gleiche Sprache wie die Stay22-Statuspille .mkh-pill.old, aber EIGENER Klassenname: mkh- ist Hotel-/Merklisten-scoped, dieses Tag gilt kategorieuebergreifend (POI, spaeter Parken/Bergbahn). KEIN neues Farb-Token — --ds-ampel-amber existiert bereits. Inline neben dem Namen, deshalb kleiner und ohne Punkt-Glyph. */ .ds-stale-tag { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .01em; padding: 1px 6px; border-radius: 999px; white-space: nowrap; vertical-align: middle; cursor: help; color: var(--ds-ampel-amber); background: rgba(148,101,18,.13); } /* Behauptungsklasse-Chip der Bergbahn-Betreiber-Infos: „Bestätigt" (sicher) / „Unsicher" (unsicher). Gleiche Bauform wie .ds-stale-tag, Ampel-Farben aus .mkh-pill.ok/.old — kein neues Farb-Token. Sitzt IM Label-Span (.mk-liftk) rechts neben dem Text. */ .ds-info-tag { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .01em; padding: 1px 6px; border-radius: 999px; white-space: nowrap; vertical-align: middle; cursor: help; } .ds-info-tag.ok { color: var(--ds-ampel-green); background: rgba(63,107,42,.12); } .ds-info-tag.unk { color: var(--ds-ampel-amber); background: rgba(148,101,18,.13); } /* Kosten-zum-Zielort in der Statusline: Pin + meta (km·hm orange via .ds-abseits-num, Satz gedämpft). Ersetzt die alte .mkh-substat-Kurzform. */ .mkh-cost { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--ds-muted); } .mkh-chev { flex: none; width: 20px; height: 20px; color: var(--ds-muted); transition: transform .16s ease; display: inline-flex; } .mkh-chev svg { width: 20px; height: 20px; display: block; } .mkh-row.open .mkh-chev { transform: rotate(180deg); } .mkh-body { display: none; padding: 0 13px 0; border-top: 1px solid var(--ds-line); } /* F1: kein Boden-Padding → Fuß-Leiste schließt bündig mit dem Karten-Rahmen ab */ .mkh-row.open .mkh-body { display: block; } .mkh-hint { font-size: 11.5px; color: var(--ds-ampel-amber); margin-top: 2px; } .mkh-hint.red { color: var(--ds-ampel-red); } .mkh-foot { display: flex; align-items: center; gap: 9px; margin: 12px -13px 0; padding: 12px 13px; border-top: 1px solid var(--ds-line); background: var(--ds-foot-bg); flex-wrap: wrap; } .mkh-foot .tr-book { margin-left: auto; } .mkh-foot b { color: var(--ds-ink); font-weight: 600; } /* Strang GPX-Edit: CTA im Fuß = .mk-park-add-Idiom, EINZEILIG wie der PDF-Trip-Pass-Button (.pk-hbtn.locked: Icon vorne, Text, Gold-Pill mit Schloss rechts), min. 230px, rechtsbündig; ein bestehender Buchen-CTA folgt rechts mit 25px Abstand. Gleiche Höhe wie .tr-book (32px). */ .mkh-foot .mk-park-add.ge-cta { width: auto; min-width: 230px; margin-top: 0; margin-left: auto; min-height: 32px; padding: 6px 12px; gap: 8px; line-height: 1.2; white-space: nowrap; } .mkh-foot .mk-park-add.ge-cta + .tr-book { margin-left: 25px; } .mkh-foot:has(.ge-cta) .tr-book { min-height: 32px; } .ge-cta .ge-cta-l { display: inline-flex; align-items: center; gap: 7px; } .ge-cta .pk-hbtn-tag { margin-left: 2px; } .mk-park-add.ge-cta.locked { color: var(--ds-ink); background: var(--ds-cream-2); border: 1px solid var(--ds-gold); } /* wie .pk-hbtn.locked */ .mk-park-add.ge-cta.locked:hover { border-color: var(--ds-gold-2); background: #fff; } .mk-park-add.ge-cta.locked .ge-cta-l svg { color: var(--ds-gold-icon); } /* F2: zweizeiliger Preis-Block (Betrag groß + Belegungs-Subline), rechtsbündig. Font = App-Grotesk (--font-text); der Design-Entwurf nennt 'Hanken Grotesk', das im Live-App-Stack NICHT geladen ist → App-Font statt Fallback. */ .mkh-price { margin-left: auto; text-align: right; line-height: 1.15; white-space: nowrap; } .mkh-price b { display: block; font: 800 19px var(--font-text); color: var(--ds-ink); } .mkh-price span { display: block; font: 600 10px var(--font-text); color: var(--ds-muted); } /* F5: Ausstattungs-Badges — Storno prominent grün+fett, Sofort-buchbar neutral. */ .mkh-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; } .mkh-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ds-line); background: var(--ds-cream-2); color: var(--ds-ink); } .mkh-badge svg { width: 12px; height: 12px; } .mkh-badge.free { color: var(--ds-ampel-green); border-color: rgba(63,107,42,.3); background: rgba(63,107,42,.08); font-weight: 700; } /* EXPANDED-Body: Zwei-Spalten-Kopf (Quadrat-Foto links, Icon-geführte Zeilen rechts: Bewertung/Standort/Quelle/Ausstattung) + volle Fuß-Leiste (Marke/Preis/CTA, unverändert .mkh-foot). Reused: .mk-reviewscore (Score-Pille), .ds-abseits-num (lodgingMetaHtml, orange). */ .mkh-top { display: flex; gap: 13px; margin-top: 11px; flex-wrap: wrap; } .mkh-info { flex: 1 1 190px; min-width: 170px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .mkh-irow { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--ds-muted); } .mkh-irow--rate { align-items: center; } .mkh-iic { flex: none; width: 15px; height: 15px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; color: var(--ds-muted); } .mkh-iic svg { width: 14px; height: 14px; } .mkh-itxt { flex: 1; min-width: 0; } .mkh-itxt b { color: var(--ds-ink); font-weight: 600; } /* Stufe 3 (Cherry): Bild-Banner (media.thumbnail, ≤24h) + Schraffur-Platzhalter. */ /* Platzhalter-Schraffur liegt immer im Container; .mkh-photoimg deckt sie als absolutes Overlay (onerror → weg). */ .mkh-photo { position: relative; margin: 11px 0 2px; height: 120px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 7px; background-color: var(--ds-cream-2); background-image: repeating-linear-gradient(-45deg, transparent 0 9px, var(--ds-line) 9px 10px); border: 1px solid var(--ds-line); } /* Quadrat-Variante (EXPANDED-Body-Redesign): feste Kachel links statt volle Breite oben, s. .mkh-top. */ .mkh-photo--sq { flex: 0 0 156px; width: 156px; height: 156px; margin: 0; } .mkh-photoimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mkh-phic { width: 30px; height: 30px; background: #fff; border-radius: 9px; display: grid; place-items: center; color: var(--ds-muted); } .mkh-phic svg { width: 17px; height: 17px; } .mkh-phtxt { font-size: 11px; color: var(--ds-muted); } @media (max-width: 480px) { .mkh-top { flex-direction: column; } .mkh-photo--sq { width: 100%; flex-basis: auto; height: 150px; } } /* ── Unterwegs-Panel: POI-Kategorie-Chips (Phase 2B, optisches Skelett). Nur bestehende Tokens. ── Chip = Kategorie-Glyph (in --pin-*-Kategoriefarbe, §4/§11) + Name + .upoi-badge-Zähler (In-Trip- Idiom). Einkehr ist ein Split-Chip mit zwei Segmenten (unterwegs/Zielort). Weiss = #fff wie .mk-stay. Editieren-Buttons nutzen das bestehende .mk-park-add-Idiom (oben). */ .mk-uw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; margin-bottom: 20px; } .mk-uwcat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--ds-line); background: #fff; font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--ds-ink); } .mk-uwic { display: inline-flex; flex: none; } .mk-uwic svg { width: 15px; height: 15px; } .mk-uwname { white-space: nowrap; } .mk-uwcat-water .mk-uwic { color: var(--pin-water); } .mk-uwcat-food .mk-uwic { color: var(--pin-food); } .mk-uwcat-charging .mk-uwic { color: var(--pin-charging); } .mk-uwcat-lift .mk-uwic { color: var(--pin-lift); } .mk-uwcat-custom .mk-uwic { color: var(--pin-custom); } .mk-uwcat-notruf .mk-uwic { color: var(--danger); } /* Notruf: bestehender --danger-Token, kein Count/Badge */ .mk-uwcat-netz .mk-uwic { } /* Netz (Mobilfunk-Vorsorge-Indikator, Phase 3): bewusst KEINE Icon-Einfärbung — Icon erbt --ds-ink */ /* Übernachtung-Reiter: vier Kategorien teilen die Übernachtungsfarbe --pin-sleep (System-Kanon). */ .mk-uwcat-hotel .mk-uwic, .mk-uwcat-hut .mk-uwic, .mk-uwcat-camp .mk-uwic, .mk-uwcat-overnighter .mk-uwic { color: var(--pin-sleep); } .mk-uwcat-split { gap: 11px; } /* mehr Abstand zwischen Name · Trennstrich · Segmenten */ .mk-uwcat-split .mk-uwname { padding-right: 12px; border-right: 1px solid var(--ds-line); } /* durchgehende Trennlinie zwischen den Segmenten (unterwegs | Zielort): volle Chip-Höhe via stretch + negativer Vertikal-Margin gegen das 7px-Chip-Padding. */ /* Leer-Zustand: gestrichelter Rand + gedämpftes Label; Icon behält die Kategoriefarbe, kein Badge. */ .mk-uwcat-empty { border-style: dashed; } .mk-uwcat-empty .mk-uwname { color: var(--ds-muted); } /* Hover/Active (Chip = Auswahl-Auslöser): Rand → Trip-Orange, Stil (solid/dashed) bleibt. */ .mk-uwcat:hover { border-color: var(--ds-orange); } .mk-uwcat.is-active { border-color: var(--ds-orange); } /* aktive Auswahl: oranger Rand bleibt */ .mk-uwcat[data-target] { cursor: pointer; } /* nur klickbare Chips/Sub-Chips (Einkehr-Kopf nicht) */ /* Reveal unter der Chip-Reihe: Listen-Platzhalter + genau EIN „… editieren"-Button der aktiven Auswahl. */ .mk-uwbody { display: flex; flex-direction: column; } .mk-uwbody:empty { display: none; } .mk-uwlist { display: flex; align-items: center; min-height: 64px; padding: 14px; border: 1px dashed var(--ds-line); border-radius: 12px; background: #fff; color: var(--ds-muted); font-size: 12px; } .mk-uwbody .mk-park-add { margin-top: 32px; } /* +20px ggü. dem 12px-Default */ /* Notruf-Reveal (Strang 2): statische Info-Liste je berührtem Land. Nur bestehende Tokens. */ /* Boxen-Optik wie .mk-uwrow (Border + BG + Innenabstand) — NUR im Notruf-Reveal, damit der geteilte mk-uwbody (Wasser/Einkehr/Eigene POI) unberührt bleibt. */ .mk-uwbody[data-target="notruf"] { border: 1px solid var(--ds-line); border-radius: 12px; background: #fff; padding: 12px 14px; } .nr-panel { display: flex; flex-direction: column; gap: 6px; } .nr-country { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ds-ink); margin-top: 10px; margin-left: 10px; } .nr-country:first-child { margin-top: 2px; } /* Länderflagge (public/country_flags.js) — rund (.fl-c) im Notruf-Länderkopf; .fl eckig, .fl-lg groß (Trip-Kopf, Seam). Innenrahmen: hält den weißen Rand (z. B. AT) gegen den Creme-Grund ab. */ .fl { display: inline-block; flex: none; width: 19px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(60,66,34,.16); } .fl svg { display: block; width: 100%; height: 100%; } .fl-c { width: 18px; height: 18px; border-radius: 50%; } .nr-item { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 3px 0; margin-left: 10px; } .nr-num { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--danger); flex: none; min-width: 42px; } .nr-lbl { font-weight: 600; font-size: 12.5px; color: var(--ds-ink); } .nr-hint { font-size: 12px; color: var(--ds-muted); } .nr-fallback { font-size: 12.5px; color: var(--ds-ink); padding: 3px 0; } .nr-fallback.nr-none { color: var(--ds-muted); } .nr-panel .pkc-copilot { margin: 14px 0 2px; } .nr-cop-li { margin-top: 4px; } /* kleine Abstände zwischen den zwei Co-Pilot-Punkten */ /* Netz-Reveal: Ampel-Hinweistext je Etappe, wiederverwendet die Terrain-Box-Form (.terr-box/.terr-box-hd/.terr-box-title, s. u.) OHNE die dortigen Regeln anzufassen. Nur additiv, eigener netz-*-Namensraum. */ .netz-panel { display: flex; flex-direction: column; } .netz-loading { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); padding: 3px 0; } .netz-badge { display: inline-flex; align-items: center; font: 700 10.5px var(--ds-font); color: #fff; border: 0; border-radius: 8px; padding: 5px 9px; white-space: nowrap; } .netz-badge.is-green { background: var(--ds-ampel-green); } .netz-badge.is-amber { background: var(--ds-ampel-amber); } .netz-badge.is-red { background: var(--ds-ampel-red); } .netz-text { font-family: var(--ds-font); font-weight: 500; font-size: 12px; color: var(--ds-ink); margin: 0; } /* Reveal-Liste „Wasserstellen": je vorausgewählter Wasserstelle ein Kennzahl-Block (km leg-relativ · hm=hm_ctx) + Registry-Pin + Name. Feste Spalten = Ruhe/Struktur. Bubble = .rpoi-dot (pinDotEl('water'), §4) auf volle Größe (--rpoi-scale:1 statt Map-0.74). Keine Buttons/Zusatztexte. Namenlos → „Wasserstelle" (im JS). */ .mk-uwwater { display: flex; flex-direction: column; gap: 9px; --rpoi-scale: 1; } .mk-uwrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ds-line); border-radius: 12px; background: #fff; } .mk-uwm { display: flex; gap: 10px; flex: none; } .mk-uwmc { display: flex; flex-direction: column; line-height: 1; } .mk-uwmc-km { width: 46px; } .mk-uwmc-hm { width: 52px; } .mk-uwnum { font: 600 14px var(--ds-font); color: var(--ds-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .mk-uwlbl { margin-top: 4px; font: 700 10px var(--ds-font); letter-spacing: .13em; text-transform: uppercase; color: var(--ds-muted); } .mk-uwmc-empty .mk-uwnum { color: var(--ds-muted); opacity: .4; } .mk-uwrn { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .mk-uwrnl { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Name + optionaler „Unsicher"-Tag */ .mk-uwrname { font: 600 14px var(--ds-font); color: var(--ds-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-uwrsub { font: 400 11.5px var(--ds-font); color: var(--ds-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-uwempty { font-size: 12px; color: var(--ds-muted); padding: 4px 2px; } /* Abseits-/Distanz-Kennzahl (nur der Zahlenwert, nie der Satz drumherum) — Code-Review-Nit: umbenannt von .dev (missverständlich "developer/debug") auf .ds-abseits-num. */ .ds-abseits-num { color: var(--ds-abseits); } /* Bergbahn-Reveal: eine Karte je gemerkter Bahn = POI-Zeile im Einkehr-Idiom + aufklappbare Detail-Box in Terrain-Optik. Row-Rahmen wandert in die Karte. */ .mk-liftitem { border: 1px solid var(--ds-line); border-radius: 12px; background: #fff; margin-bottom: 8px; overflow: hidden; --rpoi-scale: 1; } .mk-liftitem > .mk-uwrow { border: none; border-radius: 0; margin: 0; background: transparent; } .mk-liftchev { background: none; border: none; cursor: pointer; color: var(--ds-muted); padding: 4px; display: inline-flex; align-items: center; flex-shrink: 0; transition: transform .18s; } .mk-liftchev .ic { width: 18px; height: 18px; } /* .ic hat keine globale Größe — je Kontext setzen, sonst 0px/unsichtbar */ .mk-liftitem.open .mk-liftchev { transform: rotate(180deg); } .mk-liftdetail { display: none; padding: 2px 14px 12px; } .mk-liftitem.open .mk-liftdetail { display: block; } .mk-liftdt { font: 600 12.5px var(--ds-font); color: var(--ds-ink); padding-bottom: 4px; } .mk-liftkv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--ds-line); } .mk-liftk { color: var(--ds-muted); } .mk-liftv { font: 600 12.5px var(--ds-font); color: var(--ds-ink); font-variant-numeric: tabular-nums; text-align: right; } /* text-align: mehrzeilige Bergbahn-Infos bündig rechts */ /* Standard-Kostenzeile: inline Pin-Präfix vor „{Distanz} {hm} von {Bezugspunkt}"- Zeilen (Vorbild Übernachtung mkh-irow). Inline statt Flex-Block, damit bestehende Append-Ketten (Parken-Info, Fav-Koordinaten) und die einzeilige .mk-uwrsub-Ellipse unberührt bleiben. */ .ds-costpin { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--ds-muted); } .ds-costpin svg { width: 13px; height: 13px; } /* Tab-Umschaltung Etappen-Card: Content-Reiter klickbar; Höhenprofil-/Übernachtung-Platzhalter. */ .mk-tab[data-mktab] { cursor: pointer; } .mk-tabph { margin-top: 15px; display: flex; align-items: center; min-height: 64px; padding: 14px; border: 1px dashed var(--ds-line); border-radius: 12px; background: #fff; color: var(--ds-muted); font-size: 12px; } /* WIP-Banner (Muster-Raum): ersetzt den mk-park-add-Button im Shuttle-Reiter der Abreise-Karte Layout = Basis- Variante der Vorlage (horizontal, ohne Fuß-Note). Semantische Farben tokenisiert (--ds-ink/-muted/-line/-orange/-tint/-cream-2/-font); Schraffur rgba(60,66,34,.045) + Innenkante rgba(255,255,255,.7) als Spec-Literale (kein Token an diesem Alpha; die Schraffur teilt die --ds-line-RGB 60,66,34) — Idiom wie die throwaway-Literale in musterTransferCard/-RestCard und die Token-Schraffur in .mk-map. */ .mk-wip { position: relative; display: flex; align-items: center; gap: 13px; margin-top: 12px; border: 1px solid var(--ds-line); border-radius: 13px; padding: 13px 15px; overflow: hidden; background: repeating-linear-gradient(-45deg, rgba(60,66,34,.045) 0 6px, transparent 6px 13px), var(--ds-cream-2); } .mk-wip::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); pointer-events: none; } .mk-wip-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--ds-line); color: var(--ds-muted); } .mk-wip-ic svg { width: 17px; height: 17px; } .mk-wip-tx { flex: 1; min-width: 0; } .mk-wip-t { font: 700 13px var(--ds-font); color: var(--ds-ink); display: flex; align-items: center; gap: 8px; } .mk-wip-s { font: 500 11.5px var(--ds-font); color: var(--ds-muted); margin-top: 2px; } .mk-wip-tag { font: 800 8px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-orange); background: var(--ds-tint); border-radius: 4px; padding: 3px 5px; flex: none; } .mk-map { position: relative; display: grid; place-items: center; border-left: 1px solid var(--ds-line); background: repeating-linear-gradient(45deg, var(--ds-cream), var(--ds-cream) 10px, var(--ds-cream-2) 10px, var(--ds-cream-2) 20px); } .mk-map-note { font-family: var(--font-head); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); padding: 0 16px; text-align: center; } /* Start/Ziel-Marker (grüner Kreis + Flagge, wie new_tour.php .nt-cut-flag) — KEIN Tear-Drop, KEIN nummerierter Etappen-Marker. */ .mk-mapbubble { position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: var(--ds-green); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; } .mk-mapbubble svg { width: 15px; height: 15px; } /* Zoom-Icon unten rechts im Karten-Container. */ .mk-mzoom { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--ds-line); box-shadow: 0 1px 4px rgba(0,0,0,.15); display: grid; place-items: center; color: var(--ds-ink); } .mk-mzoom svg { width: 16px; height: 16px; } /* Live-Etappen-Karte (MapLibre pro Etappe, statisch). .mk-map-live = Mount-Punkt, .mk-map-canvas = MapLibre-Container (füllt die Kartenspalte). */ .mk-map-live { padding: 0; background: var(--ds-cream-2); } .mk-map-canvas { position: absolute; inset: 0; } /* Start/Ende-Bubble auf den Element-Karten läuft jetzt über die Map-POI Pin-Registry die frühere lokale Bubble-Klasse ist damit obsolet und entfernt. */ /* Lupe (Zoom-in) auf der Live-Karte → Element-Fullscreen. Reuse .mk-mzoom-Optik, aber klickbarer Button über dem Canvas. */ button.mk-mzoom.mk-lupe { z-index: 4; cursor: pointer; appearance: none; -webkit-appearance: none; padding: 0; font: inherit; } /* Element-Karte im Fullscreen-Overlay (Lupe) — pro Element. */ .mk-mapfull { position: fixed; inset: 0; z-index: 300; background: var(--ds-cream-2); } .mk-mapfull-mapwrap { position: absolute; inset: 0; z-index: 0; } .mk-mapfull-card { position: absolute; top: 24px; left: 24px; width: 380px; max-width: calc(100vw - 48px); height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; z-index: 2; box-shadow: 0 12px 40px rgba(0,0,0,.32); } /* feste Höhe, Kopf+Tabs gepinnt, Content scrollt */ .mk-mapfull-card .mk-hd { flex-shrink: 0; } /* Kopf gepinnt */ .mk-mapfull-card .mk-body { display: flex; flex-direction: column; height: auto; flex: 1 1 auto; min-height: 0; } /* kein Grid; füllt die Resthöhe */ .mk-mapfull-card .mk-map { display: none; } /* Karten-Zelle in der Card verborgen: die Karte lebt im Vollflächen-Wrap */ .mk-mapfull-card .mk-left { flex: 1 1 auto; min-height: 0; overflow: hidden; } .mk-mapfull-card .mk-notiz-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Notiz-Inhalt scrollt (mk-panel behält sein Basis-overflow-y:auto) */ /* ===== Terrain-Reiter (data-mkpanel="terrain") — Wegbeschaffenheit ===== */ .terr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .terr-box { background: #fff; border: 1px solid var(--ds-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; } .terr-box-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px solid var(--ds-line); } .terr-box-title { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; color: var(--ds-ink); } .terr-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--ds-font); color: #fff; background: var(--ds-orange); border: 0; border-radius: 8px; padding: 5px 9px; white-space: nowrap; } /* = gefülltes mt-chip (Trip-Header) */ .terr-row { padding: 4px 0; } .terr-row + .terr-row { border-top: 1px solid var(--ds-line); } .terr-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .terr-label { font-family: var(--ds-font); font-weight: 500; font-size: 12px; color: var(--ds-ink); } .terr-label .terr-sub { color: var(--ds-muted); } .terr-val { font-family: var(--ds-font); font-weight: 600; font-size: 12.5px; color: var(--ds-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .terr-bar { height: 4px; border-radius: 3px; background: var(--terr-track); margin-top: 4px; overflow: hidden; } .terr-bar > span { display: block; height: 100%; border-radius: 4px; } .terr-bar > span.hatch { background: repeating-linear-gradient(45deg, var(--terr-hatch-light) 0 6px, var(--terr-hatch-dark) 6px 12px); } .terr-row.zero .terr-label, .terr-row.zero .terr-val { color: var(--ds-muted); } .terr-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1.5px solid var(--rail); } .terr-foot-lbl { font-family: var(--ds-font); font-weight: 700; font-size: 10px; color: var(--ds-muted); letter-spacing: .04em; } .terr-foot-val { font-family: var(--ds-font); font-weight: 600; font-size: 12.5px; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .terr-empty { font-family: var(--font-head); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); padding: 10px; text-align: center; } /* Weg/Material-Balken ohne inline-Farbe → einheitliches Dunkelgrün (Rang-Verlauf abgelöst) */ .terr-bar > span:not([style*="background"]):not(.hatch) { background: var(--terr-weg-1); } /* Aufklappbare Rest-Zeilen (Top 4 + „+N weitere"): standardmäßig aus; .open → display:contents (hält die Zeilen im Fluss). NICHT das [hidden]-Attribut nutzen — display:contents würde es überschreiben und die Zeilen dauerhaft zeigen. */ .terr-rest { display: none; } .terr-rest.open { display: contents; } .terr-more { margin-top: 13px; margin-bottom: 20px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1px dashed rgba(60,66,34,.26); border-radius: 9px; padding: 8px 11px; font-family: var(--ds-font); font-weight: 700; font-size: 11px; color: var(--ds-muted); cursor: pointer; } .terr-more:hover { border-color: var(--ds-orange); color: var(--ds-orange); } /* Downhill-Coverage-Block: „Ohne techn. Einstufung" + Achse (eingestuft km · % der Abfahrt) */ .terr-cov { margin-top: 14px; margin-bottom: 20px; padding-top: 12px; border-top: 1px dashed rgba(60,66,34,.24); } .terr-cov-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; } .terr-cov-hd .terr-val { margin-left: auto; } .terr-cov-ax { display: flex; justify-content: space-between; margin-top: 5px; font-family: var(--ds-font); font-weight: 700; font-size: 9.5px; color: var(--ds-muted); } /* 2-zeilige Tabs NUR im Fullscreen (Icon über Label, ähnlich Screen), gepinnt */ .mk-mapfull-card .mk-tabs { flex-wrap: wrap; flex-shrink: 0; } .mk-mapfull-card .mk-tab { flex-direction: column; justify-content: flex-start; gap: 4px; white-space: normal; text-align: center; line-height: 1.15; padding: 9px 4px; } /* oben ausrichten: Badge-Tabs sonst zentriert höher als Tabs ohne Badge */ /* „Verkleinern"-Button oben rechts (schließt das Overlay) */ .mk-mapfull-close { position: absolute; top: 24px; right: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: 12px; padding: 10px 16px; font-family: var(--font-head); font-weight: 600; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.2); cursor: pointer; } .mk-mapfull-close:hover { background: var(--ds-cream); } .mk-mapfull-close svg { width: 18px; height: 18px; } /* ═══ Parkplatz-Wahl-Popover (Layer B) — Schritt 1: Grundgerüst ═══════════════════════ Fullscreen zweispaltiger Wähler: links Kandidatenliste + Fußtext, rechts die Karte. Struktur repliziert das Schnitt-Popover-Muster aus new_tour.php (dort seiten-lokal — hier eigenständig für die Planner-Welt neu aufgebaut, keine geteilte CSS-Quelle). §6: sofort wirksam → Schließen per „×" (die spätere „+"-Bindung wirkt folgenlos-sofort, kein hängender Commit → kein Abbrechen/Speichern-Fuß). Kandidaten-Zeilen + Marken-Kopplung folgen in Schritt 2/5; hier bleibt die Liste leer und die Karte trägt nur den Basis-Ausschnitt. */ .pkc-overlay { position: fixed; inset: 0; z-index: 15000; background: var(--ds-cream); display: flex; flex-direction: row; overflow: hidden; } /* 6b-2: listendominante Raumvariante (Verbindungs-Popover) — Rail breiter als Karte, statt umgekehrt. */ .pkc-overlay--list .pkc-rail { flex: 0 0 clamp(360px, 58%, 720px); } /* #1: Fläche = Basis-.pkc-rail (var(--ds-cream) #F2EDE1, wie Parkplatz-Popover) → weiße Karten poppen; nur die Rail-Breite (58%) weicht vom Parkplatz-Popover ab */ .pkc-overlay--list .pkc-map { flex: 1 1 40%; } /* Popover-Standard-Breite: FESTE Rail-Breite statt viewport-relativer clamp — ruhiges, stabiles Layout. Gilt als Standard für alle Popover auf der Basisklasse (Wasser, Parkplatz, künftige). Die list-dominante Variante (.pkc-overlay--list, Transit) überschreibt bewusst eigene Breite. */ .pkc-rail { flex: 0 0 420px; min-width: 0; background: var(--ds-cream); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ds-line); } .lift-pop .pkc-rail { flex: 0 0 clamp(480px, 52%, 720px); } /* Bergbahn-Popover: breitere Rail — Liftzeilen tragen mehr als POI-Zeilen; POI-Popover unberührt */ .pkc-hd { display: flex; align-items: flex-start; gap: 13px; padding: 20px 20px 6px; } /* Opt-in-Abstand unter dem Kopf: NUR die Popover, die die Klasse tragen (Wasser/ Einkehr/Laden + Eigene POI) — bewusst NICHT „Verbindung wählen"/„Parkplatz". Neue Popover tragen pkc-hd--gap selbst, wenn sie den Abstand wollen. */ .pkc-hd--gap { margin-bottom: 20px; } .pkc-hd-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--ds-green); color: #fff; display: grid; place-items: center; } .pkc-hd-ic svg { width: 20px; height: 20px; } .pkc-hdtx { min-width: 0; } .pkc-ttl { font: 800 19px/1.25 var(--ds-font); color: var(--ds-green); } .pkc-sub { font: 500 12.5px var(--ds-font); color: var(--ds-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkc-body { flex: 1; overflow-y: auto; padding: 14px 20px 8px; min-height: 0; } .pkc-list { display: flex; flex-direction: column; gap: 8px; } .pkc-empty { font: 500 13px/1.55 var(--ds-font); color: var(--ds-muted); padding: 18px 2px; } /* Umkreis-Stufe I-17 (Außenring): „weiter weg"-Sektion — eigene Überschrift, klar vom Kern getrennt. */ /* Baustein 1 (Sandbox-Transplantat abnahme_parken_v3_v3.html .lb/.card-foot): Lagebericht in der Co-Pilot-Box. Klassen namespaced .pkc-lb-* — Sandbox-.lb ist live von .tpbtn .lb belegt (bewusste Abweichung: Struktur 1:1, Name entkollidiert). Sandbox-Palette → Live-Tokens (--ds-*), kein neuer Hex/Token. */ /* #8: Co-Pilot-Hinweis über der Liste — nt-copilot-Look (aus new_tour.php nach app.css promoted, §11-Seam). Magenta-Squircle-Badge (--ds-copilot-Verlauf) + „!"-Glyph, Text darunter. */ .pkc-copilot { margin: 12px 20px 2px; } .nt-copilot { display: flex; gap: 12px; align-items: flex-start; background: rgba(158,63,109,.07); border: 1px solid rgba(158,63,109,.22); border-radius: 14px; padding: 12px 14px; } .nt-copilot-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, var(--ds-copilot), var(--ds-copilot-2)); color: #fff; display: grid; place-items: center; margin-top: 1px; } .nt-copilot-ic svg { width: 17px; height: 17px; } .nt-copilot-tx { flex: 1; min-width: 0; } .nt-copilot-sub { font: 500 12.5px/1.5 var(--ds-font); color: var(--ds-muted); } /* #9: „+"/Entfernen je Kandidatenzeile, rechtsbündig. Gebunden = weißer Haken auf Grün NICHT die §11-Orange-Auswahl. */ /* Selbst eingetragene Unterkunft (Owner-Go 2026-09-20, Sandbox .sandbox/lodging-manual abgenommen). NEU sind nur diese Bausteine — Zeile, Pin und Wahl-Knopf der eigenen Unterkunft sind .mk-stay/.pkc-bind wie bei jeder gefundenen. Keine Token, keine neuen Hex-Werte. */ .lmn-box { margin-top: 10px; } .lmn-add { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 14px; cursor: pointer; border: 1px dashed var(--ds-line); border-radius: 12px; background: #fff; color: var(--ds-green); font: 600 13px var(--ds-font); text-align: left; } .lmn-add:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .lmn-add svg { width: 17px; height: 17px; flex: none; } .lmn-form { border: 1px solid var(--ds-line); border-radius: 12px; background: #fff; padding: 14px; } .lmn-form h4 { font: 800 14px var(--ds-font); color: var(--ds-green); margin: 0 0 12px; } .lmn-f { margin-bottom: 11px; } .lmn-f label { display: block; font: 600 11.5px var(--ds-font); color: var(--ds-muted); margin-bottom: 4px; } .lmn-f input, .lmn-f select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--ds-line); border-radius: 9px; font: 500 13px var(--ds-font); color: var(--ds-ink); background: #fff; } .lmn-geo { display: flex; gap: 8px; align-items: stretch; } .lmn-geo input { flex: 1; min-width: 0; } .lmn-geo button, .lmn-setbtn { white-space: nowrap; border: 1px solid var(--ds-line); background: #fff; border-radius: 9px; padding: 9px 12px; font: 600 12px var(--ds-font); color: var(--ds-green); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .lmn-geo button:hover, .lmn-setbtn:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .lmn-setbtn.is-armed { border-color: var(--ds-orange); color: var(--ds-orange); } .lmn-geo button svg, .lmn-setbtn svg { width: 15px; height: 15px; flex: none; } .lmn-hint { display: flex; align-items: center; gap: 6px; font: 500 11.5px/1.5 var(--ds-font); color: var(--ds-muted); margin: 15px 0 11px; } .lmn-hint svg { width: 14px; height: 14px; flex: none; } .lmn-hint.ok { color: var(--ds-success); } .lmn-hint.bad { color: var(--danger); } .lmn-hint--intro { margin: 10px 0 20px; } /* Einstiegs-Hinweis unter dem Knopf; die engen Abstaende IM Formular bleiben am Feld darueber verankert */ .lmn-act { display: flex; gap: 9px; margin-top: 14px; } .lmn-save { flex: 1; border: 0; border-radius: 10px; background: var(--ds-green); color: #fff; padding: 11px; font: 700 13px var(--ds-font); cursor: pointer; } .lmn-cancel, .lmn-keep { border: 1px solid var(--ds-line); background: #fff; border-radius: 10px; padding: 11px 16px; font: 600 13px var(--ds-font); color: var(--ds-muted); cursor: pointer; } .lmn-keep { padding: 5px 11px; font-size: 11.5px; flex: none; } .lmn-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; padding: 2px 8px; border-radius: 999px; background: var(--ds-cream); color: var(--ds-green); font: 700 10.5px var(--ds-font); letter-spacing: .04em; } .lmn-badge svg { width: 12px; height: 12px; flex: none; } .lmn-own { border-color: var(--ds-orange); } .lmn-ownfoot { display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--ds-font); color: var(--ds-muted); margin: 6px 2px 10px; } .lmn-ownfoot--warn { color: var(--danger); } .lmn-ownfoot span { flex: 1; min-width: 0; } .lmn-edit { border: 1px solid var(--ds-line); background: #fff; border-radius: 8px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--ds-muted); flex: none; } .lmn-edit:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .lmn-edit svg { width: 14px; height: 14px; } .lmn-del { border: 1px solid var(--danger); background: var(--danger); color: #fff; border-radius: 8px; padding: 5px 11px; font: 700 11.5px var(--ds-font); cursor: pointer; flex: none; } .pkc-bind { flex: 0 0 auto; align-self: flex-start; margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ds-line); background: var(--ds-cream-2); color: var(--ds-green); display: grid; place-items: center; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .pkc-bind svg { width: 19px; height: 19px; } .pkc-bind:hover { border-color: var(--ds-green); background: #fff; } .pkc-bind.is-bound { color: #fff; background: var(--ds-green); border-color: var(--ds-green); } .pkc-bind[disabled] { opacity: .5; cursor: not-allowed; } /* Muster wie .upoi-setbtn[disabled] */ .pkc-bind[disabled]:hover { border-color: var(--ds-line); background: var(--ds-cream-2); } /* :hover greift auch auf disabled — sonst saehe der gesperrte Knopf aktiv aus */ /* Co-Pilot-Hinweis ueber der Eigene-POI-Liste. Die Box liegt IM .pkc-body (padding 14px 20px) — der 20px-Seitenrand von .pkc-copilot waere dort doppelt, deshalb hier auf 0, statt .pkc-copilot selbst anzufassen (die teilen sich mehrere Popover). */ .upoi-copilot { margin: 4px 0 12px; } /* Schritt 5: Zeile ↔ Marke gekoppelt. Fokussierte Zeile = Trip-Orange-Rahmen (aktive Auswahl, §11). */ .pkc-cand { cursor: pointer; } .pkc-cand.pkc-hl { border-color: var(--ds-orange); box-shadow: 0 0 0 1px var(--ds-orange); } /* Abseits-Subline im Popover mehrzeilig (feste Rail-Breite → kein Abschneiden). NUR Popover-Zeile (.pkc-cand) — die geteilte Basis .mk-uwrsub (Trip-Edit-Reveal) bleibt einzeilig/Ellipse unverändert. */ .pkc-cand .mk-uwrsub { white-space: normal; overflow: visible; text-overflow: clip; } /* Wasserstellen-Editier-Popover: 3-Filter-Leiste (Empfehlungen/Alternativen/Alle) — aktiv = oranger Rahmen OHNE Füllung (wie .mk-uwcat.is-active), analog dem Rezept oben (pkc-*). */ .uwp-filt { padding: 0 20px 10px; } .uwp-filt-lab { font: 500 12px var(--ds-font); color: var(--ds-muted); margin-bottom: 8px; } .uwp-chips { display: flex; gap: 9px; flex-wrap: wrap; } .uwp-chip { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); font: 600 12.5px var(--ds-font); cursor: pointer; transition: border-color .12s; } .uwp-chip:hover, .uwp-chip.on { border-color: var(--ds-orange); } .uwp-chip .n { color: var(--ds-muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 5px; } /* 6b-2: Verbindungs-Suchformular + Zeilen-/Hinweistext im Verbindungs-Popover (listendominant). */ .txc-search { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 10px; margin-top: 25px; } .txc-field { display: flex; flex-direction: column; gap: 3px; position: relative; } /* position: Anker für das Autosuggest-Dropdown (#1) */ .txc-field-row { display: flex; gap: 14px; } /* #4: Datum + Uhrzeit nebeneinander */ .txc-field-row .txc-field { flex: 1; } .txc-field label { font: 600 11px var(--ds-font); color: var(--ds-muted); } .txc-field input { font: 500 13px var(--ds-font); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: 8px; padding: 8px 10px; background: #fff; } .txc-field .txc-fixed { font: 600 13px var(--ds-font); color: var(--ds-ink); padding: 8px 10px; background: var(--ds-cream-2); border: 1px solid var(--ds-line); border-radius: 8px; } .txc-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 25px; font: 700 13px var(--ds-font); color: #fff; background: var(--ds-green); border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; } .txc-go svg { width: 15px; height: 15px; } /* Fix: LUCIDE-SVG hat keine Intrinsic-Größe → ohne Regel riesig; Muster wie .pkc-bind/.pkc-hd-ic svg */ .txc-go:hover { filter: brightness(1.05); } /* .txc-times/.txc-meta/.txc-slot entfielen mit #6 (reiche Zeile nutzt tb-* / tl-* aus planner.php) — Slots weg. */ .txc-hint { font: 500 12.5px var(--ds-font); color: var(--ds-muted); margin: 20px; } .txc-hint:empty { display: none; } /* kein Leerraum, sobald Treffer da sind */ /* #8: aufgenommene Verbindungen als Karten in der View-Bench (über „Verbindung editieren"). */ .txc-muster-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } /* View-Bench-Verbindungskarten sind read-only: Entfernen ausschließlich im Popover, daher kein .txc-muster-rm mehr. */ /* ═══ Verbindungsliste Bus + Bahn (.tr-* / .rs-*) — Design-Handoff „Verbindungsliste-Bus-Bahn.html", auf App-Tokens/var(--ds-font)/LUCIDE gemappt. Geteilt von Popover-Trefferliste UND View-Bench (kein Drift). Akkordeon: eine Karte offen (Klasse .open auf .tr-c). Karten-Abstand kommt vom Container (.pkc-list / .txc-muster-list, je gap:8px) — kein eigenes .tr-list-Wrapper nötig. */ .tr-c { background: #fff; border: 1px solid var(--ds-line); border-radius: 12px; overflow: hidden; flex: none; } /* flex:none: Karte behält ihre Höhe in Flex-Column-Listen (Schublade/View-Bench) — sonst Flex-Shrink → Clipping/kein Scroll */ .tr-c.open { border-color: var(--ds-orange); box-shadow: none; } /* aktive Auswahl (§11 „Orange trägt die Auswahl"): schlichter 1px-Orange-Rahmen („1px überall ok") — gleichmäßig, kein Ring/Inset/Subpixel-Zacken */ /* Popover: Aufnehmen-Steuer neben dem Kopf (View-Bench read-only → ohne). */ /* „+"-Aufnehmen = das bestehende Parkplatz-Steuer .pkc-bind (ein „+" für beide Popover, kein) Drift). Sitzt neben dem Kopf; im schmaleren Popover/Schublade greift das engere Zeilenraster. */ .tr-row { display: flex; align-items: stretch; } .tr-row .tr-hd { flex: 1; min-width: 0; grid-template-columns: 132px minmax(0,1fr) 96px 34px 16px; } .tr-row .pkc-bind { align-self: center; margin: 0 12px 0 2px; } /* Zeilen-Farbkonzept: KEIN Hover; „übernommen/is selected" = grüner Rand + Tint. */ .tr-c.in { border-color: rgba(63,107,42,.42); background: var(--ds-taken-bg); } .tr-c.in.open { border-color: rgba(63,107,42,.42); box-shadow: none; } /* im Trip (Zugehörigkeit, Grün §11) dominiert bei gleichzeitigem Fokus */ /* Kopf: Grid Zeit · Route/Sequenz · Dauer · Rad · Chevron. */ .tr-hd { display: grid; grid-template-columns: 146px minmax(0,1fr) 104px 34px 16px; align-items: center; column-gap: 14px; row-gap: 3px; padding: 13px 15px; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; } .tr-time { grid-area: 1/1; min-width: 0; } /* Reisetag über den Uhrzeiten (Abfahrtstag, .tr-day) — geteilt von SERP/Schublade/View-Bench über trConnCardHtml. Farbe #6E6B5C = var(--ds-muted), Font = var(--ds-font) (Karten-Familie), sonst wie die Vorlage. */ .tr-day { font: 800 9px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: 2px; } .tr-t1 { font: 800 14.5px var(--ds-font); color: var(--ds-ink); letter-spacing: -.01em; } .tr-t2 { grid-area: 2/1/3/3; display: flex; align-items: center; gap: 6px; min-width: 0; } .tr-t2-txt { font: 500 10.5px var(--ds-font); color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* „Datum weicht ab" — links in der tr-t2-Zeile (nur wenn Reisedatum ≠ Randelement-Datum). Orange-Tint, rein anzeigend. Ohne Badge bleibt die Zeile optisch unverändert (nur .tr-t2-txt). */ .tr-datum-weichtab { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 8.5px var(--ds-font); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--ds-tint); color: var(--ds-orange); } .tr-datum-weichtab svg { width: 11px; height: 11px; display: block; } .tr-seq { grid-area: 1/2; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; } .tr-g { width: 20px; height: 20px; border-radius: 6px; background: rgba(42,58,82,.09); color: var(--ds-mode-rail); display: grid; place-items: center; flex: none; } .tr-g.bus { background: rgba(122,106,60,.12); color: var(--ds-mode-bus); } .tr-g svg { width: 13px; height: 13px; } .tr-sep { width: 5px; height: 1px; background: rgba(60,66,34,.28); flex: none; } .tr-more { font: 700 10px var(--ds-font); color: var(--ds-muted); flex: none; } .tr-meta { grid-area: 1/3; min-width: 0; } .tr-dur { font: 800 13px var(--ds-font); color: var(--ds-ink); white-space: nowrap; } .tr-ums { font: 500 10.5px var(--ds-font); color: var(--ds-muted); margin-top: 2px; white-space: nowrap; } .tr-bikecol { grid-area: 1/4; min-width: 0; } .tr-bike { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; } .tr-bike svg { width: 16px; height: 16px; } .tr-bike.ok { background: rgba(63,107,42,.13); color: var(--ds-ampel-green); } .tr-bike.res { background: rgba(148,101,18,.14); color: var(--ds-ampel-amber); } .tr-bike.lim { background: rgba(163,48,42,.11); color: var(--ds-ampel-red); } /* Verdikt-Chip — Palette deckungsgleich mit .tr-bike (--ds-ampel-*), Typografie/Sizing deckungsgleich mit .mt-chip (dem app-weiten Chip-Referenzmaß, s. Kommentare an .mk-st-btn/.tag-pass) — kein neuer Font-Wert, kein neuer Token, ein Chip-System app-weit. Die Ampel-Farbregeln (.ok/.res/.lim) bleiben byte-identisch. */ .vd-chip { display: inline-flex; align-items: center; font: 700 10.5px var(--ds-font); padding: 5px 9px; border-radius: 8px; white-space: nowrap; } .vd-chip.ok { background: rgba(63,107,42,.13); color: var(--ds-ampel-green); } .vd-chip.res { background: rgba(148,101,18,.14); color: var(--ds-ampel-amber); } .vd-chip.lim { background: rgba(163,48,42,.11); color: var(--ds-ampel-red); } .tr-chev { grid-area: 1/5; color: var(--ds-muted); flex: none; justify-self: end; transition: transform .18s; display: inline-flex; } .tr-chev svg { width: 15px; height: 15px; display: block; } .tr-c.open .tr-chev { transform: rotate(180deg); } /* Schritt 3b: T4-Prozess-Tag „Abgelaufen" (Quellzustand, live aus row.ablauf_tag, nie persistiert, lib/status_tags.php). Prozess-Familie strukturell NIE in Warnfarbe → neutral/muted (var(--ds-line) Fläche + var(--ds-muted) Text; beide schon in dieser Komponente benutzt), keine reservierte Farbe (Orange/Gold/Grün). Sitzt in Zeile 2 / Spalte 3 (grid-area 2/3) — derselben Zeile wie .tr-t2 (Spalten 1–2); Spalte 3 ist dort ungenutzt. KEINE neue Grid-Spalte/-Zeile → Zeit/Sequenz/Meta/Rad/ Chevron bleiben unverändert (beide .tr-hd-Varianten). Höhe etwa auf .tr-t2-Niveau (sub-pixel- Differenz, von der Auto-Row/row-gap gefangen) → kein sichtbarer Layout-Sprung zwischen Karten mit/ohne Tag. justify-self:start = inhaltsbreit. */ .tr-abgelaufen { grid-area: 2/3; justify-self: start; align-self: center; white-space: nowrap; font: 700 8.5px var(--ds-font); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--ds-line); color: var(--ds-muted); } /* Corner-Indikator am Rad-Abzeichen — FORM trägt die Bedeutung (Kreis/Quadrat/Dreieck), Farbe nur Lesehilfe. */ .rs-cnr { position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; color: #fff; } .rs-cnr svg { width: 9px; height: 9px; } .rs-cnr.ok { background: var(--ds-ampel-green); } .rs-cnr.res { background: var(--ds-ampel-amber); border-radius: 3px; } .rs-cnr.lim { background: transparent; border: 0; width: 17px; height: 17px; right: -5px; bottom: -5px; color: var(--ds-ampel-red); } /* Dreieck = fill:currentColor (rot); inneres „!" ist im Glyph weiß */ .rs-cnr.lim svg { width: 17px; height: 17px; } /* Body: Leg-Timeline (aufgeklappt). */ .tr-body { display: none; border-top: 1px solid var(--ds-line); padding: 14px 16px 0; } .tr-c.open .tr-body { display: block; } .tr-leg { display: grid; grid-template-columns: 52px 18px 1fr; column-gap: 11px; } .tr-lt { font: 700 12px var(--ds-font); color: var(--ds-ink); padding-top: 1px; text-align: right; } .tr-rail { position: relative; display: flex; justify-content: center; } .tr-dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--ds-green); background: #fff; margin-top: 3px; z-index: 1; } .tr-line { position: absolute; top: 12px; bottom: -2px; width: 3px; border-radius: 2px; background: var(--ds-mode-rail); } .tr-line.bus { background: var(--ds-mode-bus); } .tr-line.walk { width: 0; border-left: 2px dotted rgba(60,66,34,.4); background: none; } .tr-lc { padding-bottom: 14px; min-width: 0; } .tr-st { font: 700 13.5px var(--ds-font); color: var(--ds-ink); } .tr-run { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; } .tr-badge { font: 800 10px var(--ds-font); color: #fff; background: var(--ds-mode-rail); border-radius: 5px; padding: 3px 6px; } .tr-badge.bus { background: var(--ds-mode-bus); } .tr-op { font: 500 11px var(--ds-font); color: var(--ds-muted); } .tr-bnote { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--ds-font); color: var(--ds-muted); margin-top: 5px; } .tr-bnote svg { width: 12px; height: 12px; } .tr-bnote.ok { color: var(--ds-ampel-green); } .tr-bnote.res { color: var(--ds-ampel-amber); } .tr-bnote.lim { color: var(--ds-ampel-red); } .tr-walk { font: 500 10.5px var(--ds-font); color: var(--ds-muted); padding: 0 0 13px; } /* Buchungs-Fuß: dynamische Anbieter-Buttons (primär orange). */ .tr-foot { display: flex; align-items: center; gap: 9px; margin: 2px -16px 0; padding: 13px 16px; border-top: 1px solid var(--ds-line); background: var(--ds-foot-bg); flex-wrap: wrap; } .tr-footl { font: 800 8.5px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); flex: 1; } .tr-book { display: inline-flex; align-items: center; gap: 7px; font: 700 11.5px var(--ds-font); color: var(--ds-ink); background: #fff; border: 1px solid rgba(60,66,34,.24); border-radius: 9px; padding: 8px 12px; cursor: pointer; text-decoration: none; } .tr-book:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .tr-book svg { width: 12px; height: 12px; color: var(--ds-muted); } .tr-book:hover svg { color: var(--ds-orange); } .tr-book.prim { background: var(--ds-orange); border-color: var(--ds-orange); color: #fff; } .tr-book.prim svg { color: rgba(255,255,255,.85); } .tr-book.prim:hover { filter: brightness(.92); color: #fff; } .tr-book.prim:hover svg { color: #fff; } /* [C] Ausgegrauter Buchen-Button gewinnt gegen .prim (höhere Spezifität + spätere Quelle) — sonst rendert disabled orange/aktiv. */ .tr-book.prim.is-disabled, .tr-book.prim:disabled { background: var(--ds-line); border-color: var(--ds-line); color: var(--ds-muted); filter: none; } .tr-book.prim.is-disabled svg, .tr-book.prim:disabled svg { color: var(--ds-muted); } /* Land-Buchungs-Weiche: primärer Buchen-Button = Bestandsmuster .tr-book.prim (unverändert — gleiche Größe/Icon/Label wie zuvor), darunter die kleinen Anbieter-Alternativen. Nur bw-rail/bw-alts sind neu; .tr-foot/.tr-book (geteilt mit Hotel/Übernachtung) bleiben unberührt. .tr-foot.bw stapelt den Fuß. */ /* Fuß ÜBERALL (Merkliste UND Popover-SERP) als ZEILE rechtsbündig — Label links, rechts der Buchen-Button mit rechtsbündiger „Auch buchen bei"-Subline (einziger Rest des ausgebauten Strangs GPX-Edit Anreise/Abreise). */ .tr-foot.bw { flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; } .tr-foot.bw .tr-footl { flex: 1; } .tr-foot.bw .bw-rail { align-items: flex-end; } .tr-foot.bw .bw-alts { justify-content: flex-end; } .bw-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .bw-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; font-size: 12px; color: var(--ds-muted); } .bw-altl { font-weight: 500; } .bw-alt { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--ds-font); color: var(--ds-ink); text-decoration: none; border-bottom: 1.5px solid var(--ds-line); padding: 1px; cursor: pointer; } .bw-alt:hover { color: var(--ds-orange); border-color: var(--ds-orange); } .bw-alt svg { width: 11px; height: 11px; opacity: .55; } /* ═══ Verbindungs-Popover-Rail (.pv-*) — Handoff „Popover-Verbindung-waehlen", auf App-Tokens gemappt. Übernimmt die Seiten-Struktur (Suche einklappbar · Treffer · „Im Trip"-Schublade) in die bestehende Vollbild-Schale (popBuildShell); Karte + Schließen bleiben unangetastet. */ /* Eingeklappte Suche nach der Suche (.pv-q, eine Zeile). */ .pv-q { display: flex; align-items: center; gap: 11px; margin: 20px; padding: 11px 13px; background: #fff; border: 1px solid var(--ds-line); border-radius: 12px; flex: none; } /* #2: 20px rundum */ .pv-qic { width: 15px; height: 15px; color: var(--ds-muted); flex: none; } .pv-qt { flex: 1; min-width: 0; } .pv-q1 { font: 700 12.5px var(--ds-font); color: var(--ds-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-q2 { font: 500 10.5px var(--ds-font); color: var(--ds-muted); margin-top: 2px; } .pv-qb { font: 700 11px var(--ds-font); color: var(--ds-orange); background: transparent; border: 0; cursor: pointer; flex: none; } .pv-qb:hover { text-decoration: underline; } /* Abschnittslabel „Treffer". */ .pv-secl { display: flex; align-items: center; gap: 8px; font: 800 8.5px var(--ds-font); letter-spacing: .11em; text-transform: uppercase; color: var(--ds-muted); padding: 14px 20px 8px; flex: none; } .pv-secr { margin-left: auto; text-transform: none; letter-spacing: normal; font: 600 10px var(--ds-font); color: var(--ds-muted); } /* Filter-Notiz rechts im „Treffer"-Label */ .pv-secx { color: var(--ds-orange); font-weight: 700; cursor: pointer; } .pv-secx:hover { text-decoration: underline; } /* Scrollende Trefferliste. */ .pv-scroll { overflow: auto; padding: 0 20px 12px; min-height: 0; flex: 1; } /* #8: Zeilenabstand 20px; aufgeklappte Zeile 30px nach unten (Detail-Abschluss deutlicher absetzen). */ .pv-scroll .tr-c { margin-bottom: 20px; } .pv-scroll .tr-c.open { margin-bottom: 30px; } .pv-empty { font: 500 11.5px var(--ds-font); color: var(--ds-muted); border: 1px dashed rgba(60,66,34,.28); border-radius: 11px; padding: 13px; text-align: center; } /* SOLL-Leerzustand (Handoff .pv-empty): zentrierter Text im gestrichelten Kasten statt linksbündigem Fließtext */ /* „Im Trip"-Schublade — abgesetzt, hier wird entfernt. */ .pv-tray { flex: none; margin-top: 25px; border-top: 2px solid var(--ds-green); background: var(--ds-tray-bg); padding: 14px 20px 16px; box-shadow: 0 -10px 20px -18px rgba(40,44,20,.7); } .pv-trayhd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pv-trayl { font: 800 9px var(--ds-font); letter-spacing: .11em; text-transform: uppercase; color: var(--ds-green); flex: 1; } .pv-traytgl { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--ds-font); color: var(--ds-green); background: transparent; border: 0; border-radius: 7px; padding: 4px 6px; cursor: pointer; flex: none; } .pv-traytgl:hover { background: rgba(60,66,34,.08); } .pv-traytgl svg { width: 13px; height: 13px; transition: transform .18s; } .pv-tray.col .pv-traytgl svg { transform: rotate(180deg); } .pv-traylist { max-height: 186px; overflow: auto; display: flex; flex-direction: column; gap: 8px; } .pv-tray.col .pv-traylist { display: none; } /* Gebundene Kandidatenmarke: NEUTRALER Ring um die Kategorie-Marke — farb-unabhängig, gilt für jede Pin-Farbe, nicht mehr nur --park-marke. Ring liegt auf .rpoi-inner — NIE ein transform auf .rpoi-dot (MapLibre positioniert darüber, s. .rpoi-inner-Regel). */ /* gebunden UND fokussiert: beide Signale koexistieren — 4-Klassen-Selektor schlägt die gleichspezifische .marker-hl-Regel (weiter unten im Sheet), sonst überschriebe deren box-shadow den Ring. transform:scale kommt weiter aus .rpoi-dot.marker-hl .rpoi-inner (andere Property). */ .pkc-map { flex: 1; min-width: 0; height: 100%; background: var(--ds-cream-2); } .pkc-close { position: absolute; top: 16px; right: 18px; z-index: 3; border: 0; background: #fff; color: var(--ds-muted); width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .pkc-close:hover { color: var(--ds-ink); } @media (max-width: 720px) { .pkc-overlay { flex-direction: column; } .pkc-rail { flex: 0 0 auto; max-height: 52%; border-right: 0; border-bottom: 1px solid var(--ds-line); } .pkc-map { flex: 1; } } /* Anreise/Abreise-Element + Tag-Typen (Transfer/Ruhetag) + Add-Buttons ). Alles throwaway, .mk-*-Raum. Tag-Typ-Farben (braun/blau) sind bewusste Muster-Literale (nicht ins Token-System übernommen — bekannte Restlücke rest=blau/transfer=braun). */ .mk-list { display: flex; flex-direction: column; gap: 20px; } .mk-mark-ic svg { width: 21px; height: 21px; } /* Flag-Glyph statt Nummer im grünen Marker */ .mk-mark-transfer { background: #8a6d3b; } /* Transfertag-Icon braun (throwaway) */ .mk-mark-rest { background: #4a6b9c; } /* Ruhetag-Icon blau (throwaway) */ .mk-body.mk-body-anreise { height: 530px; } /* Anreise/Abreise gleiche Höhe wie Etappe — selbe Breite/Höhe/Grundraster */ .mk-body.mk-body-solo { display: block; height: auto; min-height: 300px; } /* Transfer/Ruhetag: einspaltig, keine Karte */ .mk-typetag { font-family: var(--font-head); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; vertical-align: middle; } .mk-typetag-transfer { color: #8a6d3b; background: rgba(138,109,59,.15); } .mk-typetag-rest { color: #4a6b9c; background: rgba(74,107,156,.15); } .mk-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ds-orange); } /* ── Notiz-Box ────────────── Drei Zustände via Mode-Klasse: .mk-nb-locked (Free, 24A) · .mk-nb-resting (Trip-Pass, 24B) · .mk-nb-editing (Eingabe, 24C). Box im linken Content-Panel (Karte bleibt). Kanten-Farbsignal links: orange = Free/Eingabe, grün = gespeichert/ruhig. Tokens §11, Tag §14 — kein neues Hex (#fff wie .tpbtn.free; rgba() = Alpha-Blend eines Tokens, bestehende Konvention). Serif-Kursiv = SOLL (System-Serif). */ .mk-notiz-box { display: none; background: #fff; border: 1px solid var(--ds-line); border-left: 3px solid var(--ds-orange); border-radius: 14px; padding: 15px 17px; margin: 20px 0 0 0; flex: 0 1 auto; min-height: 0; overflow-y: auto; } /* scrollt bei Überlauf (Content-Boxen-Regel); flex-grow 0 = kurze Zustände bleiben content-hoch, langer Editier-Content schrumpft + scrollt intern */ .mk-stage.mk-notiz-open .mk-panel { display: none; } .mk-stage.mk-notiz-open .mk-notiz-box { display: block; } /* Schritt 6a Teil 2: der Anreise-Co-Pilot-Block sitzt (wie .mk-panel) zwischen Tabs und Notiz-Box — im Notiz-Modus soll die Notiz-Box den vollen Fokus haben, wie schon beim .mk-panel-Ausblenden. */ .mk-stage.mk-notiz-open .nt-copilot { display: none; } /* Anreise-Übernachtungs-Reiter (mkStayTab): eigenes Panel per CSS-Klasse ein-/ausblenden — Muster wie mk-notiz-open, ohne den Transport-View-Automaten zu berühren. Standard verborgen. */ .mk-staypanel { display: none; } .mk-stage.mk-stay-open .mk-panel { display: none; } .mk-stage.mk-stay-open .mk-notiz-box { display: none; } .mk-stage.mk-stay-open .nt-copilot { display: none; } .mk-stage.mk-stay-open .mk-staypanel { display: block; } .mk-stage.mk-notiz-open .mk-staypanel { display: none; } .mk-nb-resting { border-left-color: var(--ds-success); } .mk-nb-editing { border-left-color: var(--ds-orange); box-shadow: 0 0 0 3px rgba(194,88,31,.18); } .mk-nb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mk-nb-title { display: inline-flex; align-items: center; gap: 7px; font: 800 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-orange); } .mk-nb-title svg, .mk-nb-title .ic { width: 15px; height: 15px; } .mk-nb-pill { display: inline-flex; align-items: center; gap: 5px; font: 800 10px var(--ds-font); letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; } .mk-nb-pill svg, .mk-nb-pill .ic { width: 13px; height: 13px; } .mk-nb-pill-pass { color: var(--ds-gold-ink-muted); background: var(--ds-cream); border: 1px solid var(--ds-gold); } .mk-liftpill { cursor: pointer; } /* Bergbahn-Pill öffnet Trip-Pass-Popover */ .mk-nb-status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 800 10px var(--ds-font); letter-spacing: .04em; text-transform: uppercase; } .mk-nb-status svg, .mk-nb-status .ic { width: 13px; height: 13px; } .mk-nb-status-saved { color: var(--ds-success); } .mk-nb-status-dirty, .mk-nb-status-err { color: var(--ds-orange); } .mk-nb-ph, .mk-nb-text { font: italic 400 15px/1.55 Georgia, 'Times New Roman', serif; } .mk-nb-ph { color: var(--ds-muted); margin: 20px 0 30px; } .mk-nb-text { color: var(--ds-ink); cursor: text; margin: 20px 0 40px; } .mk-nb-ph-click { cursor: text; } .mk-nb-text ul, .mk-nb-text ol { margin: 6px 0; padding-left: 22px; } .mk-nb-div { height: 1px; background: var(--ds-line); margin: 0 0 30px; } .mk-nb-cta { display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer; border-radius: 12px; padding: 12px 15px; background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-2)); color: var(--ds-gold-ink); font: 800 12.5px var(--ds-font); margin-bottom: 15px; } .mk-nb-cta svg, .mk-nb-cta .ic { width: 16px; height: 16px; color: var(--ds-gold-icon); } .mk-nb-editbtn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); border-radius: 10px; padding: 9px 14px; font: 700 12.5px var(--ds-font); } .mk-nb-editbtn svg, .mk-nb-editbtn .ic { width: 15px; height: 15px; } .mk-nb-editfield { min-height: 88px; border: 1px solid var(--ds-line); border-radius: 10px; padding: 11px 13px; outline: none; font: italic 400 15px/1.55 Georgia, 'Times New Roman', serif; color: var(--ds-ink); margin-bottom: 10px; } .mk-nb-editfield:focus { border-color: var(--ds-orange); } .mk-nb-editfield ul, .mk-nb-editfield ol { margin: 6px 0; padding-left: 22px; } .mk-nb-editbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .mk-nb-tools { display: inline-flex; gap: 6px; } .mk-nb-tool { display: inline-grid; place-items: center; width: 32px; height: 30px; cursor: pointer; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); border-radius: 8px; } .mk-nb-tool svg, .mk-nb-tool .ic { width: 15px; height: 15px; } .mk-nb-count { font: 600 11px var(--ds-font); color: var(--ds-muted); } .mk-nb-actions { display: flex; gap: 9px; } .mk-nb-save { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: none; border-radius: 10px; padding: 10px 16px; background: var(--ds-success); color: #fff; font: 800 12.5px var(--ds-font); } .mk-nb-save svg, .mk-nb-save .ic { width: 15px; height: 15px; } .mk-nb-save:disabled { opacity: .6; cursor: default; } .mk-nb-cancel { cursor: pointer; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); border-radius: 10px; padding: 10px 16px; font: 700 12.5px var(--ds-font); } .mk-lbl-orange { color: var(--ds-orange); } .mk-lbl-orange svg { width: 13px; height: 13px; } .mk-conn { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--ds-line); background: #fff; } .mk-connic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--ds-tint); color: var(--ds-orange); display: grid; place-items: center; } .mk-connic svg { width: 18px; height: 18px; } .mk-connb { flex: 1; min-width: 0; font-size: 13px; color: var(--ds-ink); } .mk-connb b { font-family: var(--font-head); font-weight: 700; } .mk-connbtn { flex: none; font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--ds-orange); background: var(--ds-tint); border: 1px solid var(--ds-orange); border-radius: 9px; padding: 8px 14px; } .mk-mapbubble.mk-mapbubble-dest { left: 62%; top: 58%; background: var(--ds-orange); } /* Abreise-Ziel-Marker orange */ /* Transfertag: offener Zielort-Zustand (throwaway) */ .mk-open { font-family: var(--font-head); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-orange); background: var(--ds-tint); border-radius: 5px; padding: 3px 6px; } .mk-open-box { border: 1px solid var(--ds-orange); background: var(--ds-tint); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 13px; } .mk-open-hd { display: flex; gap: 12px; align-items: flex-start; } .mk-openic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ds-orange); color: #fff; display: grid; place-items: center; } .mk-openic svg { width: 20px; height: 20px; } .mk-open-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ds-ink); } .mk-open-sub { font-size: 12.5px; color: var(--ds-muted); margin-top: 2px; } .mk-openinput { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; padding: 12px 14px; color: var(--ds-muted); font-size: 13.5px; } .mk-openinput svg { width: 16px; height: 16px; flex: none; } .mk-or { display: flex; align-items: center; gap: 12px; color: var(--ds-muted); font-family: var(--font-head); font-size: 10px; letter-spacing: .1em; } .mk-or::before, .mk-or::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); } .mk-openmap { display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; padding: 13px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--ds-ink); } .mk-openmap svg { width: 17px; height: 17px; color: var(--ds-orange); } .mk-openwarn { display: flex; align-items: center; gap: 8px; color: var(--ds-muted); font-size: 12px; } .mk-openwarn svg { width: 15px; height: 15px; flex: none; color: var(--ds-orange); } @media (max-width: 820px) { .mk-stage:has(.mk-map):not(.mk-mapfull-card) { display: block; } .mk-body { grid-template-columns: 1fr; height: auto; } .mk-body.mk-body-anreise { height: auto; } .mk-left { overflow: visible; } .mk-panel { overflow: visible; } .mk-map { border-left: none; border-top: 1px solid var(--ds-line); min-height: 240px; } .mk-tabs { flex-wrap: wrap; } .mk-tab { flex: 1 1 40%; } } /* ---------- Laufrad (rb-spin; Roadbook-Statuszeile, Co-Pilot-Suche) ---------- */ .rb-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--rail); border-top-color: var(--dark-green); border-radius: 50%; animation: rb-spin .7s linear infinite; margin-right: 5px; vertical-align: middle; } @keyframes rb-spin { to { transform: rotate(360deg); } } /* Chart-Container */ /* ---------- „Unterlagen" – Abschnitte wie Tour/Planen, grüne Icon-Bubble, ohne Rail ---------- */ /* ---------- GPX-Import-Popover ---------- */ .gpx-intro { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 12px; } .gpx-drop { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg); padding: 26px 16px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; } .gpx-drop:hover { border-color: var(--rail); } .gpx-drop.drag { border-color: var(--dark-green); background: var(--hover-bg); } /* Drag-Over: dezent grün */ .gpx-drop .ic { width: 26px; height: 26px; color: var(--dark-green); } .gpx-drop-main { font-family: var(--font-head); font-weight: 600; margin-top: 6px; } .gpx-drop-sub { color: var(--muted); font-size: 13px; margin-top: 2px; } .gpx-drop-btn { color: var(--brown); font-weight: 600; text-decoration: underline; } .gpx-status { margin-top: 12px; } .gpx-status:empty { margin-top: 0; } .gpx-msg { font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm); margin-top: 6px; } .gpx-msg.ok { background: #eef4e6; color: #3f5320; } .gpx-msg.err { background: #f6e7e4; color: #9d2f2f; } .gpx-msg.warn { background: #fbeede; color: #8a4a12; } .gpx-list-head { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--muted); margin: 18px 0 4px; border-top: 1px solid var(--line); padding-top: 14px; } .gpx-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); } .gpx-row:last-child { border-bottom: none; } .gpx-row-ic { display: inline-flex; flex: 0 0 18px; color: var(--dark-green); } .gpx-row-ic .ic { width: 18px; height: 18px; } .gpx-row-name { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gpx-row-meta { color: var(--muted); font-size: 12px; flex: 0 0 auto; } .gpx-row-dem-failed { color: var(--danger); font-size: 12px; flex: 0 0 auto; cursor: pointer; text-decoration: underline; } .gpx-row-del { cursor: pointer; color: var(--muted); display: inline-flex; flex: 0 0 auto; padding: 2px; } .gpx-row-del:hover { color: var(--danger); } .gpx-row-del .ic { width: 16px; height: 16px; } .gpx-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; } .gpx-row-eye { cursor: pointer; color: var(--muted); display: inline-flex; flex: 0 0 auto; padding: 2px; } .gpx-row-eye:hover { color: var(--dark-green); } .gpx-row-eye .ic { width: 16px; height: 16px; } .gpx-row.is-hidden .gpx-row-ic, .gpx-row.is-hidden .gpx-row-name { opacity: .45; } #gpxModal .modal { max-height: 90vh; overflow-y: auto; } /* Popover scrollbar bei vielen Tracks */ /* Toast – kurzer, prominenter Hinweis (z.B. „Link kopiert") */ .toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(12px); background: var(--dark-green); color: var(--cheesecake); font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 30000; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Packliste ---------- Kopf mit Subline + Ghost-Buttons, Fortschrittszeile, zwei Spalten (CSS columns, Gruppen unteilbar), Kategorie-Zähler, Hover-Aktionen, Upsell-Kasten (gesperrt). Nur --ds-*-Tokens. */ .pk-actnote { background: var(--ds-tint); color: var(--ds-ink); border-radius: var(--radius-sm); padding: 8px 12px; font: 500 12px/1.5 var(--ds-font); margin-bottom: 12px; } .pk-head { align-items: flex-start; justify-content: space-between; padding-bottom: 18px; margin-bottom: 18px; } .pk-headtxt { display: flex; flex-direction: column; gap: 4px; } .pk-subline { font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); } .pk-hbtns { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .pk-hbtn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ds-line); color: var(--ds-ink); font: 700 13px var(--ds-font); cursor: pointer; } .pk-hbtn:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .pk-hbtn svg { width: 16px; height: 16px; } /* gesperrt: Creme-Fläche, goldener Rand, innen Pill mit Schloss. rgba(201,154,58,α) = --ds-gold-2 Alpha-Blend, rgba(231,201,121,α) = --ds-gold (Konvention). */ .pk-hbtn.locked { background: var(--ds-cream-2); border-color: rgba(201,154,58,.55); color: var(--ds-ink); } .pk-hbtn.locked > svg { color: var(--ds-gold-icon); } .pk-hbtn.locked:hover { border-color: var(--ds-gold-2); color: var(--ds-ink); } .pk-hbtn-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(231,201,121,.35); border: 1px solid rgba(201,154,58,.6); color: var(--ds-gold-ink-muted); font: 800 10px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; } .pk-hbtn-tag svg { width: 11px; height: 11px; } .pk-progress { display: flex; align-items: center; gap: 16px; margin: 25px 0; } .pk-progress-t { font: 700 14px var(--ds-font); color: var(--ds-ink); flex: none; } .pk-bar { flex: 0 1 300px; height: 5px; border-radius: 999px; background: var(--ds-line); overflow: hidden; } .pk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ds-success); } .pk-cols { column-count: 2; column-gap: 48px; } .pk-group { break-inside: avoid; margin-bottom: 26px; } .pk-cat { display: flex; align-items: center; gap: 8px; font: 800 11px var(--ds-font); text-transform: uppercase; letter-spacing: .1em; color: var(--ds-muted); padding-bottom: 8px; border-bottom: 1px solid var(--ds-line); margin-bottom: 2px; } .pk-cat-count { margin-left: auto; font: 600 12px var(--ds-font); letter-spacing: 0; text-transform: none; color: var(--ds-muted); } .pk-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-line); } .pk-box { flex: 0 0 auto; width: 20px; height: 20px; border: 1.6px solid var(--ds-line); border-radius: 50%; margin-top: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #fff; } .pk-box.on { background: var(--ds-success); border-color: var(--ds-success); } .pk-box .ic { width: 12px; height: 12px; } .pk-item:hover .pk-box:not(.on) { border-color: var(--ds-success); } .pk-label { flex: 1; font: 500 14px/1.4 var(--ds-font); color: var(--ds-ink); cursor: pointer; min-width: 0; } .pk-item.is-checked .pk-label { text-decoration: line-through; color: var(--ds-muted); } .pk-own { font: 600 10px var(--ds-font); color: var(--ds-orange); background: var(--ds-tint); padding: 1px 6px; border-radius: 999px; text-decoration: none; display: inline-block; } /* Klammer-Zusatz im Label kursiv abgesetzt */ .pk-hint { font-style: italic; font-weight: 400; color: var(--ds-muted); } /* „Je nach Übernachtung": eigene Fläche zwischen Basis-Kategorien und eigenen Einträgen; Kopf wie Kategorie-Zeile, Unterblöcke je Übernachtungsart mit STAY_CATS-Glyph. */ .pk-stay { margin: 30px 0 26px; } /* pk-sect: dieselbe Fläche für „Eigene Kategorie" und „Notizen" */ .pk-stay-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 800 11px var(--ds-font); text-transform: uppercase; letter-spacing: .1em; color: var(--ds-orange); padding-bottom: 8px; border-bottom: 1.5px solid var(--ds-orange); margin-bottom: 18px; } .pk-stay-sub { margin-left: auto; font: italic 400 12px var(--ds-font); letter-spacing: 0; text-transform: none; color: var(--ds-muted); } .pk-cat-ic { display: inline-flex; color: var(--ds-muted); } .pk-cat-ic .ic { width: 13px; height: 13px; } .pk-del { flex: 0 0 auto; cursor: pointer; color: var(--ds-muted); display: inline-flex; padding: 1px; opacity: 0; transition: opacity .12s; } .pk-item:hover .pk-del, .pk-note:hover .pk-del { opacity: 1; } .pk-del:hover { color: var(--danger); } .pk-del .ic { width: 15px; height: 15px; } .pk-hiddenbar { font: 500 12px var(--ds-font); color: var(--ds-muted); cursor: pointer; padding: 4px 0 10px; } .pk-hiddenbar:hover { color: var(--ds-orange); text-decoration: underline; } .pk-additem { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; } .pk-addbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ds-ink); border-radius: var(--radius-sm); padding: 10px 2px; font: 600 13px var(--ds-font); cursor: pointer; } .pk-addbtn svg { width: 14px; height: 14px; color: var(--ds-muted); } .pk-addbtn:hover { color: var(--ds-orange); } .pk-inline .pk-addbtn { border: 1px solid var(--ds-line); padding: 8px 12px; } .pk-note { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-line); } .pk-note-t { flex: 1; font: 500 14px/1.4 var(--ds-font); color: var(--ds-ink); } .pk-note::before { content: "\2022"; color: var(--ds-orange); flex: 0 0 auto; } .pk-inline { display: flex; gap: 8px; align-items: center; padding: 8px 0; } .pk-input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--ds-line); border-radius: 999px; font: inherit; font-size: 14px; } .pk-input:focus { outline: none; border-color: var(--ds-success); } /* edit icon (TP only, hover) */ .pk-edit { flex: 0 0 auto; cursor: pointer; color: var(--ds-muted); display: inline-flex; padding: 1px; opacity: 0; transition: opacity .12s; } .pk-item:hover .pk-edit { opacity: 1; } .pk-edit:hover { color: var(--ds-success); } .pk-edit .ic { width: 13px; height: 13px; } /* category header edit cursor (TP only) */ .pk-cat-edit { cursor: text; } .pk-cat-edit:hover { color: var(--ds-ink); } /* locked-group: Schloss + Stift als Paywall-Hint (Hover), Klick → Checkout */ .pk-locked-group { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--ds-muted); opacity: 0; transition: opacity .12s; } .pk-item:hover .pk-locked-group, .pk-note:hover .pk-locked-group { opacity: 1; } .pk-locked-group .ic { width: 14px; height: 14px; } /* Custom-Kategorie: Trash-Icon im editierbaren Header */ .pk-cat-del { display: inline-flex; cursor: pointer; color: var(--ds-muted); opacity: 0; transition: opacity .12s; padding: 1px; } .pk-cat-custom:hover .pk-cat-del { opacity: 1; } .pk-cat-del:hover { color: var(--danger); } .pk-cat-del .ic { width: 13px; height: 13px; } /* Zurücksetzen-Dialog, zentriertes Modal */ .pk-pop { width: min(520px, 94vw); padding: 28px 30px; } .pk-pop-title { font: 800 20px var(--ds-font); color: var(--ds-ink); margin-bottom: 14px; } .pk-pop-warn { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: var(--ds-tint); border: 1px solid rgba(194,88,31,.25); font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink); } /* rgba = --ds-orange Alpha-Blend (Konvention) */ .pk-pop-warn svg { width: 20px; height: 20px; flex: none; color: var(--ds-orange); margin-top: 1px; } .pk-pop-warn > span { min-width: 0; } .pk-pop-hl { display: block; font-weight: 700; margin-bottom: 4px; } /* Kasten-Überschrift: eigene Zeile, leicht abgesetzt */ /* Kontingent-Kasten im GPX-Tausch-Modal (Hinweis/Frühwarnung/Block, gleicher Container, nur Icon wechselt); Naht für spätere eigene Tönung. Abstand nach oben nur, wenn davor der sichtbare Rücksetz-Kasten steht (im Block-Zustand ist der ausgeblendet). */ .pk-pop-warn:not([hidden]) + .pk-pop-note { margin-top: 12px; } .pk-pop .pop-actions { gap: 10px; } .pk-pop-cancel { border: 1px solid var(--ds-line); border-radius: 12px; color: var(--ds-ink); padding: 12px 20px; font: 700 14px var(--ds-font); } .pk-pop .pk-pop-cancel:hover { text-decoration: none; border-color: var(--ds-orange); color: var(--ds-orange); } /* schlägt .btn-cancel:hover (Underline) */ .pk-pop-ok { display: inline-flex; align-items: center; gap: 8px; background: var(--ds-green); border-radius: 12px; padding: 12px 20px; font: 700 14px var(--ds-font); } .pk-pop-ok svg { width: 15px; height: 15px; } /* Upsell-Kasten (gesperrt): dunkle Bühne wie Roadbook (--rbs-*), CTA = .ul-rb-cta */ .pk-upsell { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(160deg, var(--rbs-stage-1), var(--rbs-stage-2)); color: var(--rbs-text); } .pk-upsell-ic { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--rbs-glass-bg); border: 1px solid var(--rbs-glass-line); color: var(--ds-gold); } .pk-upsell-ic svg { width: 22px; height: 22px; } .pk-upsell-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pk-upsell-t > b { font: 800 16px var(--ds-font); color: var(--rbs-title); } .pk-upsell-t > span { font: 500 13.5px/1.5 var(--ds-font); color: var(--rbs-kicker); } .pk-upsell-t > span b { color: var(--rbs-text); } .pk-upsell .pk-upsell-cta { width: auto; flex: none; padding: 14px 22px; font-size: 15px; } /* Spezifität > .ul-rb-cta (width:100%) */ @media (max-width: 1100px) { .pk-cols { column-count: 1; } .pk-upsell { flex-direction: column; align-items: stretch; } .pk-upsell .pk-upsell-cta { width: 100%; } } /* Trip-Pass-Popover — EIN Popover für alle Kauf-Einstiege. Nur die ID-gekapselte .tpw-Hülle weicht von der .modal-Basis ab (kein Padding, breiter, Kopf randlos); alle anderen Modale bleiben unverändert. Kopf = Roadbook-Bühne (--rbs-*), Chip/CTA = Gold-Tokens, Kacheln = Karten-Bauform (weiß + --ds-line, wie .v10-fact). Ersetzt .tp-modal-body/.tp-feature-list. */ #tpPaywallModal .modal.tpw { width: min(640px, 94vw); padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* Inhalt scrollt INNERHALB der 90vh-Hülle (overflow:hidden der Hülle schnitt Legal-Zeile/Margins ab); min-height:0 hebt das Flex-Item-Minimum auf, die gerundeten Kopf-Ecken bleiben erhalten. */ #tpPaywallModal #tpPaywallBody { overflow-y: auto; min-height: 0; } .tpw-head { position: relative; display: flex; gap: 20px; align-items: center; padding: 28px 30px 26px; background: linear-gradient(160deg, var(--rbs-stage-1), var(--rbs-stage-2)); color: var(--rbs-text); } .tpw-headtxt { flex: 1; min-width: 0; } .tpw-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: var(--rbs-title); display: grid; place-items: center; } /* Creme-Alpha wie --rbs-badge-bg-Konvention */ .tpw-x svg { width: 16px; height: 16px; } .tpw-x:hover { background: rgba(255,255,255,.24); } .tpw-kicker { display: inline-flex; align-items: center; gap: 12px; font: 800 11px var(--ds-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-gold); } .tpw-kic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(231,201,121,.14); color: var(--ds-gold); } /* --ds-gold als Alpha-Blend (Konvention s. .tpbtn.gold) */ .tpw-kic svg { width: 17px; height: 17px; } .tpw-h { font: 800 30px/1.15 var(--ds-font); color: var(--rbs-title); margin: 16px 0 12px; letter-spacing: -.01em; } .tpw-sub { font: 500 15px/1.5 var(--ds-font); color: var(--rbs-kicker); margin: 0; } .tpw-img { flex: none; width: 200px; max-width: 34%; height: auto; display: block; object-fit: contain; } .tpw-body { padding: 26px 30px 30px; background: var(--bg); } .tpw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tpw-tile { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--ds-line); border-radius: 14px; padding: 16px; } .tpw-tic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(63,107,42,.1); color: var(--ds-success); } /* --ds-success als Alpha-Blend */ .tpw-tic svg { width: 18px; height: 18px; } .tpw-tile > div > b { display: block; font: 800 14px/1.3 var(--ds-font); color: var(--ds-green); margin-bottom: 4px; } .tpw-tile > div > span { display: block; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); } /* nur der Text-Span, nicht der Icon-Chip .tpw-tic */ .tpw-fine { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--ds-line); font: 700 11px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-success); } .tpw-fine svg { width: 13px; height: 13px; } /* AGB-Einbeziehung + Widerrufs-Hinweis im Kaufpfad, unter dem Gold-CTA; Links im neuen Tab wie Footer */ .tpw-legal { margin: 14px 0 20px; text-align: center; font: 500 12px/1.5 var(--ds-font); color: var(--ds-muted); } .tpw-legal a { color: var(--ds-green); text-decoration: underline; text-underline-offset: 2px; } .tpw-cta { border-radius: 14px; } /* Basis .ul-rb-cta (Gold, 100 %, 17px) */ /* ---------- POI-Listeneinträge (Parken etc.) mit Hover ---------- */ .park-item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--rail); padding: 10px 12px; margin: 7px 0; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: background .12s, box-shadow .12s; } .park-item:hover { background: var(--hover-bg); } .park-item small { color: var(--muted); } .park-item.orange { border-left-color: var(--brown); } .park-item.rot { border-left-color: var(--danger); } .park-item.active { border-left-color: var(--brown); border-left-width: 5px; background: var(--hover-bg); box-shadow: 0 1px 6px rgba(0,0,0,.18); } .park-actions { float: right; display: inline-flex; gap: 10px; align-items: center; margin-left: 8px; } .park-act { cursor: pointer; color: var(--muted); display: inline-flex; } .park-act svg { width: 16px; height: 16px; } .park-act:hover { color: var(--brown); } .park-act.fav.is-fav, .park-act.fav.is-fav:hover { color: var(--brown); } .park-act.eye.is-on { color: var(--brown); } .park-act.eye.is-locked { pointer-events: none; opacity: 0.55; } .muted { color: var(--muted); font-size: 14px; } .muted.small { font-size: 12px; } .hint { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Lodging Sub-Filter-Chips (Bikepacker-Kategorien) */ /* ---------- Buttons ---------- */ button { font-family: var(--font-text); cursor: pointer; border: none; } .btn-add { background: var(--hover-bg); color: var(--dark-green); width: 100%; padding: 11px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; margin: 4px 0 18px; } .btn-add:hover:not(:disabled) { background: #e4dccb; } .btn-add:disabled { background: #ece9e0; color: #b3ad9e; cursor: not-allowed; } /* ---------- Edit-Popup (Start/Ziel) ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 21000; /* über Eingangstür (20000) */ background: rgba(20,22,12,.45); display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: #fff; border-radius: 22px; padding: 30px; width: min(560px, 94vw); box-shadow: 0 24px 70px rgba(0,0,0,.35); max-height: 90vh; overflow-y: auto; } /* Datums-/Reisende-Popover als zentrierte Modale */ .modal.pop-modal-cal { width: min(540px, 94vw); padding: 22px 24px; } .modal.pop-modal-rgc { width: min(360px, 94vw); padding: 22px 24px; } .modal.pop-modal-mt { width: min(420px, 94vw); padding: 22px 24px; } /* Meine Trips: Teilen/Löschen */ /* Beta-Feedback-Popover */ .modal.pop-modal-fb { width: min(420px, 94vw); padding: 22px 24px; } .pop-modal-fb .fb-note, .pop-modal-fb .fb-email { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--ds-line); border-radius: 10px; background: #fff; color: var(--ds-ink); font: 500 13.5px/1.4 var(--ds-font); resize: vertical; } .pop-modal-fb .fb-note:focus, .pop-modal-fb .fb-email:focus { outline: none; border-color: var(--ds-orange); } .pop-modal-fb .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Honeypot: für Menschen unsichtbar, Bots füllen es */ .pop-modal-fb .fb-err { color: var(--danger); font: 500 12.5px var(--ds-font); margin: -4px 0 6px; } /* Einstiegs-Widget als Popover: Kachel-Leiste .mt-strip im Modal, 2–3 Kacheln sichtbar, Rest scrollt mit dem Kanten-Schatten von .mt-stripwrap. Dauerhaft hängend. */ .modal.pop-modal-entrance { width: min(720px, 94vw); padding: 22px 24px; } /* Strang GPX-Edit: zentrierte Modale mit Karte. Track-Stile in der Karte = Etappenkarte (Halo #fffeee 6 / Orange 3.5); Genesis gestrichelt, gleiche Breite, kein Halo. */ .modal.pop-modal-ge { width: min(760px, 94vw); padding: 0; overflow: hidden; } .ge-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px 18px; } .ge-head .ge-hic { width: 52px; height: 52px; border-radius: 14px; background: var(--pin-sleep); color: #fff; display: grid; place-items: center; flex: none; } .ge-head .ge-hic svg { width: 26px; height: 26px; } .ge-head h2 { font: 600 24px/1.15 var(--font-head); margin: 0; color: var(--ds-ink); } .ge-head .ge-meta { font-size: 13.5px; color: var(--ds-muted); margin-top: 4px; } .ge-map { height: 380px; position: relative; } .ge-map #geMapEl { position: absolute; inset: 0; } .ge-legend { position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.94); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; box-shadow: 0 2px 10px rgba(0,0,0,.12); } .ge-legend div { display: flex; align-items: center; gap: 9px; margin: 4px 0; } .ge-legend .sw { width: 30px; height: 0; border-top: 3.5px solid var(--ds-orange); border-radius: 2px; } .ge-legend .sw.halo { box-shadow: 0 0 0 2px #fffeee; } .ge-legend .sw.gen { border-top: 3.5px dashed var(--ds-green); } .ge-legend b { font-weight: 600; margin-right: 4px; } .ge-legend span { color: var(--ds-muted); } .ge-body { padding: 20px 26px 26px; } .ge-fact { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--ds-line); background: var(--ds-cream-2); border-radius: 12px; padding: 14px 16px; } .ge-fact svg { width: 20px; height: 20px; color: var(--ds-orange); flex: none; margin-top: 2px; } .ge-fact.none svg { color: var(--ds-muted); } .ge-fact b { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; } .ge-fact p { margin: 0; font-size: 13px; color: var(--ds-muted); line-height: 1.45; } .ge-actions { display: flex; gap: 14px; margin-top: 22px; } .ge-actions .btn-save { flex: 1; justify-content: center; } .ge-actions .btn-cancel, .ge-actions .btn-danger-ghost { min-width: 200px; justify-content: center; } .ge-mk-hotel { width: 34px; height: 34px; border-radius: 50%; background: var(--pin-sleep); color: #fff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: grid; place-items: center; } .ge-mk-hotel svg { width: 17px; height: 17px; } .ge-mk-old { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ds-green); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .ge-mk-lbl { position: absolute; left: 22px; top: -6px; white-space: nowrap; background: #fff; border-radius: 8px; padding: 3px 8px; font: 600 12px var(--ds-font); color: var(--ds-ink); box-shadow: 0 1px 6px rgba(0,0,0,.2); } .pop-title-danger { color: var(--danger); } .cal-summary { font: 700 12.5px var(--ds-font); color: var(--ds-ink); margin-top: 10px; } /* GPX ↔ Etappen Assignment Widget (Gate Schritt 2) */ /* Inline Etappen-Dropdown in Unterlagen > GPX-Datei */ .gpx-row-stage { flex: 1; min-width: 0; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 12px; font-family: var(--font-text); background: #fff; color: var(--ink); cursor: pointer; } .gpx-row-stage:focus { outline: none; border-color: var(--dark-green); } /* „Perfekt"-Toast nach vollständigem Upload */ .gpx-perfect { margin-top: 10px; padding: 10px 14px; background: var(--hover-bg); border-left: 3px solid var(--dark-green); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--ink); } /* GPX-Import-Button gesperrt wenn Tracks vollständig */ .btn-add:disabled { opacity: .4; cursor: not-allowed; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .modal-head h2 { font-size: 26px; } .modal-close { cursor: pointer; color: var(--ink); display: inline-flex; padding: 4px; } .modal-close svg { width: 22px; height: 22px; } .modal label { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 13px; color: var(--ink); margin: 14px 0 6px; letter-spacing: -0.01em; } .modal input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; font-family: var(--font-text); } .modal input:focus { outline: none; border-color: var(--dark-green); } .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 26px; } .btn-save, .btn-danger, .btn-cancel { font: 800 15px var(--ds-font); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px; padding: 10px 25px; } .btn-save svg, .btn-danger svg, .btn-cancel svg { width: 15px; height: 15px; } .btn-cancel { background: var(--ds-cream-2); color: var(--ds-ink); border: 1px solid var(--ds-line); font-weight: 600; padding: 10px 18px; } .btn-cancel:hover { background: var(--ds-cream); } .btn-save { background: var(--ds-orange); color: #fff; } .btn-save:hover:not(:disabled) { filter: brightness(.9); } .btn-save:disabled { background: #bdc7b5; cursor: not-allowed; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(.9); } .btn-danger:disabled { background: #bdc7b5; cursor: not-allowed; } /* Ghost-Danger = System-Standard: weiße Fläche, Danger-Kontur/-Text, dieselbe Metrik wie .btn-save/.btn-cancel/.btn-danger (Höhe/Padding/Radius). Für „verwerfen"-Aktionen ohne Datenverlust. */ .btn-danger-ghost { font: 800 15px var(--ds-font); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px; padding: 10px 25px; background: #fff; color: var(--danger); border: 1px solid var(--danger); cursor: pointer; } .btn-danger-ghost:hover:not(:disabled) { background: rgba(176,48,48,.07); } /* --danger als Alpha-Blend (Konvention s. --ds-tint) */ .btn-danger-ghost:disabled { color: #bdc7b5; border-color: #bdc7b5; cursor: not-allowed; } .btn-danger-ghost svg { width: 15px; height: 15px; } .btn-conflict { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid rgba(176,48,48,.35); border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; } .btn-conflict svg { width: 16px; height: 16px; color: var(--danger); flex: none; } .btn-conflict .bc-t { font: 700 14px var(--ds-font); color: var(--ds-ink); } .btn-conflict .bc-c { font: 500 12px var(--ds-font); color: var(--danger); } /* ---------- Autocomplete (im Popup) ---------- */ .ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 110; background: #fff; border: 1px solid var(--line); border-radius: 0 0 16px 16px; margin-top: 2px; max-height: 230px; overflow-y: auto; box-shadow: 0 8px 18px rgba(0,0,0,.12); } .ac-item { padding: 11px 16px; font-size: 14px; cursor: pointer; } .ac-item:hover, .ac-item.active { background: var(--hover-bg); } .ac-item small { color: var(--muted); display: block; } .plan-msg { font-size: 13px; color: var(--dark-green); background: var(--hover-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px; word-break: break-word; } /* ---------- Map-Marker ---------- */ /* Etappen-Pins (Standard-Mapbox-Marker): nur das direkte svg skalieren */ /* aktiver Marker immer ganz vorne – !important schlägt den Inline-z-index der Lib */ .marker-hl { z-index: 9999 !important; } .marker-hl > svg { transform: scale(1.5); transition: transform .15s ease; } /* Route-POI-Marker: runde Chips, kategorie-farbig, zoom-skaliert via CSS-Variable --rpoi-scale WICHTIG: kein transform auf .rpoi-dot — MapLibre setzt style.transform direkt auf das Element für die Kartenpositionierung; ein CSS transform (auch !important) würde den Pin auf [0,0] verschieben. Scale kommt deshalb auf das Kind-Element .rpoi-inner. */ .rpoi-dot { width: var(--marker-dot-size); height: var(--marker-dot-size); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; /* Komponenten-Invariante: fixgroßer Kreis, nie stauchen. Als Flex-Kind (z. B. .mk-uwrow) würde ein langer Name/Subline die Breite drücken → border-radius:50% wird zur Ellipse („Ei"). Auf der Karte inert (MapLibre-Marker = position:absolute, kein Flex-Kind). */ } .rpoi-inner { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.4); border: var(--marker-ring) solid rgba(255,255,255,.88); transform: scale(var(--rpoi-scale, 0.74)); transform-origin: center center; transition: transform .15s ease, box-shadow .15s ease; color: var(--cheesecake); } .rpoi-inner svg { width: var(--marker-icon-size); height: var(--marker-icon-size); } .rpoi-dot.marker-hl .rpoi-inner { transform: scale(calc(var(--rpoi-scale, 0.74) * var(--marker-sel-scale))); box-shadow: 0 2px 9px rgba(0,0,0,.5); } /* Ghost/Hohl-Pin: NICHT-gewählte Kandidaten — reine Farbvariante, KEINE Geometrie hier (kein width/transform/scale). Füllung weiß (Zustands-Hook); Rand-FARBE + Glyph- Farbe kommen inline aus der Kategorie-Farbe (r.color, pinDotEl), da pro Kategorie verschieden — die Rand-BREITE bleibt unverändert --marker-ring, nur die Rand-Farbe wird inline überschrieben (weißer Ring → Kategorie-Ring). box-shadow (Außen-Halo) bleibt für Lesbarkeit auf hellen Kacheln erhalten. */ .rpoi-inner.ghost { background: #fff; } /* Etappen-Pin – Tropfenform, Spitze zeigt exakt auf den Ort (temporär=grau / fix=grün). WICHTIG: kein position auf .pin-marker, sonst überschreibt es MapLibres absolute → Pin driftet beim Zoom. */ /* POI-Popup auf der Karte */ .maplibregl-popup-content { border-radius: 12px; padding: 12px 28px 12px 14px; font-family: var(--font-text); } .maplibregl-popup-close-button { font-size: 18px; color: var(--muted); padding: 2px 7px; line-height: 1; } .maplibregl-popup-close-button:hover { color: var(--ink); background: none; } .poi-pop-meta { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); text-transform: uppercase; font-size: 12px; color: var(--brown); margin-bottom: 4px; } .poi-pop-meta .poi-pop-ic { display: inline-flex; color: var(--brown); } .poi-pop-meta .poi-pop-ic svg { width: 14px; height: 14px; } .poi-pop b { font-size: 15px; color: var(--ink); } .poi-pop-addr { color: var(--muted); font-size: 12px; margin-top: 2px; } .poi-pop-actions { display: flex; gap: 14px; margin-top: 9px; } .poi-pop-actions .park-act svg { width: 18px; height: 18px; } /* Mehrfach-Routen-Auswahl */ /* ============================================================ Mobile (≤768px): gestapelt – Karte oben (feste Höhe, scrollt mit), Liste darunter; das Dokument scrollt (kein innerer Scroll-Container). ============================================================ */ @media (max-width: 768px) { body { height: auto; min-height: 100vh; overflow: visible; padding: 0 16px 16px; } h1.tour-title { font-size: 26px; margin: 16px 0; } /* Spalten → gestapelt; Karte per order nach oben */ .main-row { flex-direction: column; column-gap: 0; padding-top: 0; } #map { order: -1; flex: none; height: 42vh; border-radius: 14px; margin-bottom: 16px; } .unterlagen-pane { order: -1; flex: none; height: 60vh; border-radius: 14px; margin-bottom: 16px; } #content { order: 0; flex: none; overflow: visible; } /* Listen-Header bleibt sticky am Viewport, sobald die Karte hochgescrollt ist */ .content-body { padding: 16px 0; padding-bottom: 18vh; } .etappe { scroll-margin-top: 100px; } /* Etappen-Steuerung ohne Hover erreichbar (Touch) */ /* Fact-Pills kompakter */ .v10-facts { gap: 8px; } .v10-fact { padding: 6px 10px; gap: 8px; } .v10-fic { width: 26px; height: 26px; } .v10-fic svg { width: 14px; height: 14px; } .v10-flbl { font-size: 8px; } .v10-fval { font-size: 12px; } /* Header-Speichern auf die kompakte Kartenhöhe (fic 26 + padding = 38px) synchronisieren */ .v10-save { height: 38px; padding: 0 13px; font-size: 11px; } .v10-save svg { width: 14px; height: 14px; } /* Popup fast vollflächig */ .modal { padding: 22px; border-radius: 18px; } #tpPaywallModal .modal.tpw { padding: 0; } .tpw-head { padding: 22px; } .tpw-img { display: none; } .tpw-h { font-size: 24px; } .tpw-body { padding: 20px 22px 22px; } .tpw-grid { grid-template-columns: 1fr; } .modal-head h2 { font-size: 22px; } /* Gate-Modal: Info-Cards 2×2-Grid statt flex-wrap */ } /* ---- Eigene POIs (GPX-Waypoint-Import) ---- */ .upoi-section { margin-top: 4px; } .upoi-section .ps-head { display: flex; align-items: center; gap: 6px; } .upoi-badge { background: var(--dark-green); color: var(--cheesecake); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 4px; flex-shrink: 0; } /* Netz-Bubble (Mobilfunk-Vorsorge-Indikator, Phase 3b): Vorab-Ampel-Punkt am Netz-Chip, OHNE Zahl/Text — Form nach .upoi-badge (Bubble-Höhe), aber rund statt Pill. [hidden] → display:none (kein Status/Nicht-ok, s. refreshUwNetzBadges). */ .netz-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 4px; flex: none; } .netz-dot[hidden] { display: none; } .netz-dot.is-green { background: var(--ds-ampel-green); } .netz-dot.is-amber { background: var(--ds-ampel-amber); } .netz-dot.is-red { background: var(--ds-ampel-red); } .upoi-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; border: 1.5px solid rgba(0,0,0,.15); } .upoi-cat { font-size: 12px; padding: 3px 6px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--body-text); max-width: 140px; cursor: pointer; appearance: auto; } .upoi-cat:focus { outline: none; border-color: var(--dark-green); } .park-act.upoi-del:hover { color: var(--danger) !important; } .upoi-missing-notice { background: #fdf3e4; border: 1px solid #e8c87a; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; } .upoi-miss-btn { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 12px; background: var(--dark-green); color: var(--cheesecake); cursor: pointer; font-size: 12px; font-weight: 600; } .upoi-miss-del { background: var(--danger); } .gpx-wpt-hint { color: #8a4a12; } /* Eigene POIs setzen — vier Zustaende, alle aus bestehenden Tokens, kein neuer Hex, kein neuer Token. Gilt ausschliesslich im Eigene-POI-Popover. Setz-Modus: Fadenkreuz ueber der Popover-Karte, solange .upoi-setmode am Overlay haengt (upoiSetModeStart/upoiSetModeStop setzen und entfernen es paarig). Die Karte von MapLibre rendert in ein canvas-Kind, deshalb beide Ebenen. */ .pkc-overlay.upoi-setmode .pkc-map, .pkc-overlay.upoi-setmode .pkc-map canvas { cursor: crosshair; } /* Breitere Rail NUR im Eigene-POI-Popover (.upoi-pop, gesetzt in openUserPoiPopover): die Zeile traegt hier Namensfeld, Kategorie-Dropdown, Papierkorb und den Trip-Schalter nebeneinander. Die Basis .pkc-rail (420px) teilen sich sechs Popover und bleibt unangetastet. clamp haelt sie auf schmalen Fenstern im Rahmen, damit die Karte daneben nicht verschwindet. */ .pkc-overlay.upoi-pop .pkc-rail { flex: 0 0 clamp(420px, 46%, 620px); } /* „Im Trip"-Schalter: KEIN eigener Zustand fuer dieses Popover — der Haken bleibt gruen gefuellt wie in allen anderen Popovern (.pkc-bind.is-bound, Zeile ~995). Die zwischenzeitlich erwogene helle Variante haette eine zweite Optik fuer denselben Schalter eingefuehrt; Konsistenz ueber alle Kategorien wiegt schwerer. Bewusst keine Regel an dieser Stelle. */ /* „x m abseits der Route" auch im Popover — gleiche Klasse wie in der Reveal-Liste (.mk-uwrsub), hier aber umbrechend statt einzeilig abgeschnitten: die Rail hat Platz. */ .pkc-overlay.upoi-pop .mk-uwrsub { white-space: normal; overflow: visible; margin-top: 4px; } .upoi-setbtn { margin-bottom: 10px; } .upoi-setbtn.is-armed { border-color: var(--ds-orange); color: var(--ds-orange); background: var(--ds-tint); } .upoi-setbtn[disabled] { opacity: .5; cursor: not-allowed; } /* Ziehbarer Pin: nur gesetzte POIs tragen .upoi-draggable (upoiMakeManualMarkersDraggable). */ .upoi-draggable { cursor: grab; } .upoi-draggable:active { cursor: grabbing; } /* Papierkorb in der Popover-Zeile. Armiert wird der Knopf zur Klartext-Rueckfrage — ein Tooltip waere auf Touch unsichtbar. Erbt Geometrie von .pkc-bind; is-armed (0,2,0) schlaegt sie. */ .upoi-del { color: var(--ds-muted); } .upoi-del:hover { color: var(--danger); } .upoi-del.is-armed { width: auto; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--ds-cream-2); background: var(--danger); border-color: var(--danger); } /* Eigene-POI-Editier-Popover — stilles Namensfeld + eigenes Kategorie-Dropdown. Nur bestehende Tokens/Idiome, kein neuer Hex. Notiz-Feld entfiel → die frühere .upoi-pop-*-Optik ist weg. .upoi-cat (unten) BLEIBT: lebt in der Trip-Edit-Etappenliste (renderUserPoisForStage) weiter. rgba(58,63,32,.)=--ds-green, rgba(60,66,34,.)=--ds-ink, rgba(20,22,16,.)=--marker-sel-ring-RGB — etablierte Alpha-Konventionen der App. */ /* Stilles Namensfeld: Rahmen + Stift DAUERHAFT (Affordanz), Klick → Eingabe mit grünem Ring. Text-Kante 10px links = identisch mit dem Dropdown-Trigger → Überschrift/Dropdown „in einer Flucht". */ .upoi-name { position: relative; } .upoi-name-view { display: flex; align-items: center; gap: 8px; font: 600 14px var(--ds-font); color: var(--ds-ink); padding: 5px 30px 5px 10px; border: 1.5px solid var(--ds-line); border-radius: 8px; cursor: text; min-height: 30px; } .upoi-name-view:hover { background: var(--ds-cream-2); } .upoi-name-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upoi-name-empty { color: var(--ds-muted); font-weight: 500; } .upoi-name-pen { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ds-muted); opacity: .7; pointer-events: none; display: flex; } .upoi-name-pen svg { width: 14px; height: 14px; } .upoi-name-input { display: block; width: 100%; font: 600 14px var(--ds-font); color: var(--ds-ink); padding: 5px 10px; border: 1.5px solid var(--ds-line); border-radius: 8px; background: #fff; } .upoi-name-input:focus { outline: none; border-color: var(--ds-green); box-shadow: 0 0 0 3px rgba(58,63,32,.16); } /* Eigenes Kategorie-Dropdown (ersetzt natives (gpxStageDropdownHtml(), Logik unverändert), nur als Chip mit eigenem Chevron gestylt statt Browser-Default-Optik. */ select.ul-sel { flex: 1; min-width: 160px; -webkit-appearance: none; appearance: none; background: var(--ds-cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 14px 14px; border: 1px solid var(--ds-line); border-radius: 9px; padding: 9px 32px 9px 12px; font: 600 12px var(--ds-font); color: var(--ds-ink); cursor: pointer; } select.ul-sel:focus { outline: none; border-color: var(--ds-orange); } .ul-gpxact { display: flex; gap: 10px; color: var(--ds-muted); flex: none; align-items: center; } .ul-gpxact svg { width: 17px; height: 17px; cursor: pointer; } .ul-gpxact svg:hover { color: var(--ds-orange); } .ul-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; } .ul-ghostbtn { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--ds-font); color: var(--ds-muted); background: transparent; border: 1px dashed rgba(60,66,34,.34); border-radius: 10px; padding: 10px 14px; cursor: pointer; } .ul-ghostbtn:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .ul-ghostbtn svg { width: 15px; height: 15px; } /* Trip-Pass Lock-Tag-Button — ersetzt die frühere .btn-crown-Optik an Premium-Aktionen. .gold = gesperrt ("Mit Trip-Pass"), .active = bereits gekauft ("Enthalten", grün, kein Upsell mehr). Icon bleibt die kontextuelle Aktions-Glyph (z.B. download) statt eines Krönchens — Konsistenz mit der unlocked-Variante derselben Aktion. */ .tpbtn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 15px; border-radius: 12px; border: none; cursor: pointer; } /* 46px = dieselbe Höhe wie .v10-fact */ .tpbtn > .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; } .tpbtn .ic svg { width: 15px; height: 15px; } /* Chip-Regeln oben per „> .ic" nur auf den span — Registry-SVGs tragen selbst class="ic" (zweiter Chip im Chip) */ .tpbtn .lb { font: 800 11.5px var(--ds-font); line-height: 1.1; text-align: left; } .tpbtn .lb small { display: block; font: 700 8px var(--ds-font); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; } .tpbtn.gold { background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-2)); color: var(--ds-gold-ink); } /* rgba(58,42,8,..) = --ds-gold-ink als Alpha-Blend — CSS-Vars unterstützen ohne color-mix() keine Alpha-Blends aus var(), s. --ds-orange/--ds-tint-Konvention weiter oben. */ .tpbtn.gold > .ic { background: rgba(58,42,8,.16); color: var(--ds-gold-icon); } .tpbtn.gold .lb small { color: var(--ds-gold-ink-muted); } .tpbtn.active { background: var(--ds-success); color: #fff; } .tpbtn.active > .ic { background: rgba(255,255,255,.18); color: #fff; } .tpbtn.active .lb small { color: var(--ds-success-tint); } /* ============================================================ Roadbook-Bühne body.rbs-dark wird AUSSCHLIESSLICH von switchTab() für den Roadbook-Tab (reisefavoriten) gesetzt; jeder andere Tab entfernt die Klasse. Alle Regeln hier sind mit dem Präfix gekapselt — ohne Klasse bleibt jeder Tab byte-gleich. Doppelte Absicherung: Optik greift nur bei Klasse (CSS) UND Tab-Zweig (JS). Tokens --rbs-* in :root. Kein bestehender Selektor wird umgeschrieben. ============================================================ */ /* Bühne = Seitenhintergrund, randlos über den Browser; die Kinder, die heute selbst --bg tragen (Kopf, Tab-Nav, Content), werden transparent. */ body.rbs-dark { background: linear-gradient(160deg, var(--rbs-stage-1), var(--rbs-stage-2)); color: var(--rbs-text); } body.rbs-dark .tour-title-bar, body.rbs-dark .tabnav, body.rbs-dark #content { background: transparent; } /* Kopf: Badge (Roadbook-Glyph auf Creme-Alpha) · Titel weiß · Subhead-Kicker */ body.rbs-dark .v10-badge { background: var(--rbs-badge-bg); border: 1px solid var(--rbs-badge-line); color: var(--rbs-text); } body.rbs-dark h1.tour-title { color: var(--rbs-title); } body.rbs-dark .tour-subhead { color: var(--rbs-kicker); font-size: 11px; } body.rbs-dark .tour-subhead svg { color: var(--rbs-text); } body.rbs-dark .rbs-kicker { font: 600 11px var(--ds-font); letter-spacing: .16em; text-transform: uppercase; color: var(--rbs-kicker); } /* Tab-Navigation: inaktiv Creme .5, aktiv weiß, Unterstrich bleibt --ds-orange (Systemtoken) */ body.rbs-dark .tabnav { border-bottom-color: var(--rbs-line); } body.rbs-dark .tabnav .tab { color: var(--rbs-tab-off); } body.rbs-dark .tabnav .tab:hover, body.rbs-dark .tabnav .tab.active { color: var(--rbs-title); } /* Buttons oben rechts: Basis (28px-Icon-Chip, 16px-Glyph, 1px-Rahmen) NUR auf der Bühne — die helle .tpbtn-Basis bleibt für Unterlagen-Tab unverändert (26/15). */ body.rbs-dark .main-row { margin-bottom: 30px; } /* nur Roadbook-Tab */ body.rbs-dark .tpbtn { border: 1px solid transparent; } body.rbs-dark .tpbtn > .ic { width: 28px; height: 28px; } body.rbs-dark .tpbtn .ic svg { width: 16px; height: 16px; } body.rbs-dark .tpbtn:hover { filter: brightness(1.08); } body.rbs-dark .tpbtn:disabled { opacity: 1; cursor: default; } /* Schritt 1: reine Anzeige, keine Ausgrau-Optik */ body.rbs-dark .tpbtn.gold .lb { color: var(--ds-gold-ink); } /* Free = Glas-Optik auf dunkler Bühne (ersetzt hier die helle #fff-Variante) */ body.rbs-dark .tpbtn.free { background: var(--rbs-glass-bg); border-color: var(--rbs-glass-line); color: var(--rbs-text); } body.rbs-dark .tpbtn.free > .ic { background: var(--rbs-glass-ic); color: var(--rbs-text); } body.rbs-dark .tpbtn.free .lb { color: var(--rbs-text); } body.rbs-dark .tpbtn.free .lb small { color: var(--rbs-glass-sub); } /* Roadbook-Gesamtkarte (Schritt 2): die geteilte #map hängt im .mk-mapfull-Overlay (bestehende Element-Vollbild-Klassen) — hier nur die #map-eigene Rand-/Radius-Optik neutralisieren und den Vergrößern-Knopf der Seitenkarte verbergen (das Overlay hat seinen eigenen Schließen-Button). */ .rbs-mapfull #map { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; } /* ── Roadbook-Etappenblatt ── Helles Blatt (--ds-cream-2) auf der dunklen Bühne; rechts der Karten-Slot (S5). Nur unter body.rbs-dark erreichbar; Mock-Hex-Werte sind durch Tokens ersetzt (Kicker/aktives Band-Segment = --ds-orange, erledigt = --ds-green, offen = --ds-line, Ink/Muted = --ds-ink/--ds-muted). */ /* Fold-Layout: das Raster füllt exakt die Resthöhe unter Kopf+Navi (#content ist bereits das Viewport-Scrollfenster) — Karte steht, das Blatt scrollt INNEN. Dafür wird die Container-Kette #content → .panel → .content-body → #reisefavoritenBody zur Flex-Spalte; das 70vh-Bodenpolster von .content-body entfällt hier. Alles nur unter body.rbs-dark. */ body.rbs-dark #content { display: flex; flex-direction: column; overflow-y: auto; } /* auto statt hidden: Footer unter dem Fold erreichbar */ body.rbs-dark #panel-reisefavoriten { flex: 0 0 100%; min-height: 0; display: flex; flex-direction: column; } /* = exakt die Bühnenhöhe (Fold); der Footer folgt darunter */ body.rbs-dark #panel-reisefavoriten .content-body, body.rbs-dark #reisefavoritenBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.rbs-dark #panel-reisefavoriten .content-body { padding-bottom: 0; } body.rbs-dark .rbs-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'nav map' 'sheet map'; gap: 0; margin-top: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); } body.rbs-dark .rbs-navbar { grid-area: nav; background: var(--ds-cream-2); color: var(--ds-ink); padding: 26px 28px 0; min-width: 0; } /* S9: Navi+Band eigenes Raster-Element; Desktop-Optik unverändert (Blatt darunter ohne Top-Padding) */ body.rbs-dark .rbs-sheet { grid-area: sheet; background: var(--ds-cream-2); color: var(--ds-ink); padding: 0 28px 30px; min-width: 0; min-height: 0; overflow-y: auto; } body.rbs-dark .rbs-mapslot { grid-area: map; } body.rbs-dark .rbs-falz-lbl { display: none; } body.rbs-dark .rbs-plabel { display: none; } /* Blatt-Fly beim Etappenwechsel (Mock: opacity .4s, transform .4s; raus nach oben, rein von unten) */ body.rbs-dark .rbs-fly { transition: opacity .4s, transform .4s; } body.rbs-dark .rbs-fly.rbs-out { opacity: 0; transform: translateY(-28px); } body.rbs-dark .rbs-fly.rbs-in { opacity: 0; transform: translateY(28px); transition: none; } body.rbs-dark .rbs-seg { transition: background .4s; } /* S6 vertikales Höhenprofil im Blatt (Sandbox-ratifiziert): bündig links mit dem Headline-Block, fix 650px hoch */ body.rbs-dark .rbs-prof { margin-top: 18px; } body.rbs-dark .rbs-prof svg { display: block; width: 100%; overflow: visible; } body.rbs-dark .rbs-plbl { font: 700 8.5px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; fill: var(--ds-muted); } /* S7 Falz-Chevron + Wegpunkte-Drawer — Mock: HELLES Glas (rgba(245,241,231,.74) + Blur, Ink-Text, Innenschatten, 300px, Slide .3s). vorher dunkles Glas (falsch). Creme-Alpha = --ds-cream-2 als Alpha-Blend (Konvention). */ body.rbs-dark .rbs-falz { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; width: 26px; height: 56px; border: none; border-radius: 0 12px 12px 0; background: var(--rbs-stage-2); color: var(--rbs-text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); } body.rbs-dark .rbs-falz svg { width: 15px; height: 15px; transition: transform .2s; } body.rbs-dark .rbs-falz.on svg { transform: rotate(180deg); } body.rbs-dark .rbs-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; max-width: 80%; z-index: 5; display: flex; flex-direction: column; overflow: hidden; background: rgba(251,248,241,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-right: 1px solid var(--ds-line); box-shadow: inset 22px 0 26px -20px rgba(20,20,10,.45); color: var(--ds-ink); transition: transform .3s, opacity .3s; } body.rbs-dark .rbs-drawer[hidden] { display: none; } /* [hidden] gewinnt gegen display:flex (Drawer stand dauerhaft offen) */ body.rbs-dark .rbs-drawer-h { padding: 26px 22px 8px 34px; font: 700 11px/1 var(--ds-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-muted); } body.rbs-dark .rbs-drawer-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 22px 8px 34px; } body.rbs-dark .rbs-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-line); } body.rbs-dark .rbs-rowpin { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--cheesecake); border: 2px solid #fff; } body.rbs-dark .rbs-rowpin svg { width: 13px; height: 13px; } body.rbs-dark .rbs-rowname { flex: 1 1 auto; min-width: 0; font: italic 400 15px/1.3 Georgia, 'Times New Roman', serif; color: var(--ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.rbs-dark .rbs-rowmeta { flex: none; font: 600 11px var(--ds-font); color: var(--ds-muted); } body.rbs-dark .rbs-drawer-foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 16px 34px; border-top: 1px solid var(--ds-line); } body.rbs-dark .rbs-edit { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 0; font: 800 11px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-orange); cursor: pointer; text-align: left; } body.rbs-dark .rbs-edit svg { width: 13px; height: 13px; } /* S8 Hover-Zustand (Klasse rbs-hl an Profil-Gruppe + Listenzeile; Karten-Pin nutzt den Registry-Ring .marker-hl) + Tooltip am Pin */ body.rbs-dark .rbs-pp { cursor: default; } /* Hover-Farbe = POI-Farbe (Mock hotColor; --rbs-c wird je Gruppe aus PIN_REGISTRY gesetzt), Punkt gefüllt mit weißem Rand */ body.rbs-dark .rbs-pp.rbs-hl line { stroke: var(--rbs-c, var(--ds-orange)); stroke-width: 1.5; } body.rbs-dark .rbs-pp.rbs-hl circle { fill: var(--rbs-c, var(--ds-orange)); stroke: #fff; } body.rbs-dark .rbs-ppi.rbs-hl > g > circle { stroke: var(--rbs-c, var(--ds-orange)); stroke-width: 3; } body.rbs-dark .rbs-row.rbs-hl { background: var(--ds-tint); box-shadow: 0 0 0 6px var(--ds-tint); border-radius: 6px; } /* ZWEI ABNEHMER: das Roadbook-Hinweisfenster (dunkle Karte, S8) UND der Unterwegs-Hover in Trip-Edit (helle Etappen-Mini-/Maxi-Karte, Klasse zusätzlich .uwh-tip). Wer diese Regel umfärbt, ändert BEIDE Flächen — bitte dort mitprüfen. Die Tokens sind bewusst global (nicht body.rbs-dark-gebunden), damit das Fenster auf hellem Grund gleich aussieht. */ .rbs-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); pointer-events: none; white-space: nowrap; background: var(--ds-cream-2); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: 10px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); font: 700 12px/1.25 var(--ds-font); z-index: 20; } .rbs-tip b { display: block; font: italic 400 13px Georgia, 'Times New Roman', serif; } .rbs-tip span { display: block; font: 600 10px var(--ds-font); color: var(--ds-muted); margin-top: 2px; } /* ── Unterwegs-Hover Trip-Edit — drei neue Regeln, keine bestehende geändert ── */ /* Randklemmung: oben kein Platz auf der Kartenfläche ⇒ Fenster unter den Pin. Die seitliche Verschiebung setzt uwhClamp() inline auf transform. */ .rbs-tip.below { bottom: auto; top: calc(100% + 8px); } /* Unsichtbarer Hover-Anker der gemerkten Bergbahn (kein Pin, sondern eine Linie): trägt NUR das Hinweisfenster auf der Linienmitte. Er wird ausschließlich aus der Liste heraus angesteuert, nie gehovert oder geklickt — deshalb 0x0 UND pointer-events:none, damit er auf der Karte garantiert nichts abfängt. Der Anker darf NIE Fläche/Optik bekommen. */ .uwh-anchor { width: 0; height: 0; pointer-events: none; } /* Markierung der Listenzeile beim Hover. Bewusst hell/warm statt der dunklen Roadbook-Variante (body.rbs-dark .rbs-row.rbs-hl) — die Etappen-Card ist eine helle Fläche. Bergbahn: bei aufgeklappter Zeile leuchtet der GANZE Block inkl. Detailkasten, deshalb die Regel auf .mk-liftitem und nicht auf dessen innerer .mk-uwrow. */ .mk-uwrow.uw-hl { background: var(--ds-tint); border-color: rgba(194,88,31,.45); } .mk-liftitem.uw-hl { background: var(--ds-tint); border-color: rgba(194,88,31,.45); } /* Nachzug: Parkplatz-Karte (Anreise, Reiter Auto) und Übernachtungs-Merkliste (Reiter Übernachtung) sind eigene Listen ausserhalb des Unterwegs-Reveals; ihre Karten-Pins antworteten bereits, die Zeilen waren stumm. GLEICHER Motor, nur das Schild fehlte. Diese Blöcke sind deutlich grösser als eine POI-Zeile (mehrzeilig, mit eigenen Bedienelementen). Bewusst DERSELBE Ton wie oben (--ds-tint, 7 % Deckung) — eine eigene, schwächere Variante wäre ein zweiter Zustand für dieselbe Bedeutung. Sollte die Fläche live zu wuchtig wirken, ist die Antwort ein anderer Wert HIER, an EINER Stelle für alle vier Selektoren — kein Sonderfall je Liste. */ .mk-stay.uw-hl, .mkh-row.uw-hl { background: var(--ds-tint); border-color: rgba(194,88,31,.45); } body.rbs-dark .rbs-pempty { font: italic 400 13px Georgia, 'Times New Roman', serif; color: var(--ds-muted); padding: 12px 0; } /* S5b Cluster-Zähler auf der Roadbook-Karte — bewusst KEIN Pin-Look (dunkelgrün+Zahl wurde) mit den alten Etappen-Bubbles verwechselt): Creme-Scheibe, grüner Ring, dunkle Zahl. Nur unter Zoom 11 sichtbar. */ .rbs-cluster { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--ds-cream-2); color: var(--ds-ink); font: 800 12px var(--ds-font); border: 2.5px solid var(--ds-green); box-shadow: 0 1px 5px rgba(0,0,0,.35); cursor: pointer; } body.rbs-dark .rbs-mapslot { position: relative; min-height: 0; background: var(--rbs-badge-bg); } /* S5a: hier hängt die live #map (Höhe = Raster) */ /* S5a: #map im Slot füllt ihn randlos; display:block !important gewinnt gegen die Inline-display:none- Hooks (MUSTER-Init/showRoute/setMapView), solange Karte im Slot UND Bühne aktiv — Tab-Verlassen hebt beides auf. */ body.rbs-dark .rbs-mapslot #map { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; } body.rbs-dark .rbs-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.rbs-dark .rbs-kicker { font: 700 11px var(--ds-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ds-muted); } body.rbs-dark .rbs-kicker b { color: var(--ds-orange); font-weight: 800; } body.rbs-dark .rbs-navbtns { display: flex; gap: 8px; } body.rbs-dark .rbs-navbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); display: grid; place-items: center; cursor: pointer; } body.rbs-dark .rbs-navbtn svg { width: 15px; height: 15px; } body.rbs-dark .rbs-navbtn:hover:not(:disabled) { background: var(--hover-bg); } body.rbs-dark .rbs-navbtn:disabled { opacity: .35; cursor: default; } body.rbs-dark .rbs-band { display: flex; gap: 6px; margin: 14px 0 22px; } body.rbs-dark .rbs-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--ds-line); } body.rbs-dark .rbs-seg.done { background: var(--ds-green); } body.rbs-dark .rbs-seg.on { background: var(--ds-orange); } body.rbs-dark .rbs-title { margin: 0; font: 800 24px/1.2 var(--ds-font); letter-spacing: -.01em; color: var(--ds-ink); text-transform: none; } body.rbs-dark .rbs-title svg { width: 20px; height: 20px; vertical-align: -3px; } body.rbs-dark .rbs-date { margin-top: 8px; font: italic 400 15px/1.4 Georgia, 'Times New Roman', serif; color: var(--ds-muted); } /* Serif-Kursiv = Notiz-Idiom (.mk-nb-text) */ body.rbs-dark .rbs-kpis { display: flex; gap: 22px; margin-top: 18px; padding: 16px 0 14px; border-top: 1.5px solid var(--ds-ink); border-bottom: 1px solid var(--ds-line); } body.rbs-dark .rbs-kpiv { display: flex; align-items: baseline; gap: 4px; font: 800 24px/1 var(--ds-font); color: var(--ds-ink); } body.rbs-dark .rbs-kpiv em { font: 700 11px var(--ds-font); font-style: normal; color: var(--ds-muted); } body.rbs-dark .rbs-kpiv svg { width: 16px; height: 16px; align-self: center; color: var(--ds-ink); } body.rbs-dark .rbs-kpil { margin-top: 5px; font: 700 8.5px var(--ds-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); } /* ── S9 Mobile: gestapelt Navi-Overlay auf Karte → Karte → Blatt (Profil = Scroll-Rückgrat), Seite scrollt (Karte nicht sticky, bewusst); Wegpunkte als Bottom-Sheet mit Pille; Fold-Regeln zurückgenommen. ── */ @media (max-width: 768px) { body.rbs-dark #content { display: block; overflow: visible; } body.rbs-dark #panel-reisefavoriten, body.rbs-dark #panel-reisefavoriten .content-body, body.rbs-dark #reisefavoritenBody { display: block; flex: none; min-height: auto; } body.rbs-dark #panel-reisefavoriten .content-body { padding-bottom: 0; } /* Pillen-Polster wandert in den Footer */ body.rbs-dark .site-footer { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } /* Footer über der fixen Wegpunkte-Pille erreichbar (Idiom .rbs-drawer-foot) */ body.rbs-dark .rbs-grid { flex: none; min-height: auto; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: 'map' 'sheet'; overflow: visible; border-radius: 16px; } body.rbs-dark .rbs-mapslot { height: 46vh; min-height: 280px; border-radius: 16px 16px 0 0; overflow: hidden; } body.rbs-dark .rbs-navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 7; background: linear-gradient(rgba(35,38,26,.62), rgba(35,38,26,0)); color: var(--rbs-title); padding: 12px 14px 14px; border-radius: 16px 16px 0 0; } body.rbs-dark .rbs-navbar .rbs-kicker { color: rgba(242,237,225,.85); } body.rbs-dark .rbs-navbar .rbs-kicker b { color: var(--ds-orange); } body.rbs-dark .rbs-navbar .rbs-navbtn { background: var(--rbs-glass-bg); border-color: var(--rbs-glass-line); color: var(--rbs-title); } body.rbs-dark .rbs-navbar .rbs-band { margin: 10px 0 0; } body.rbs-dark .rbs-navbar .rbs-seg { background: rgba(242,237,225,.35); } body.rbs-dark .rbs-sheet { overflow: visible; padding: 22px 20px 26px; border-radius: 0 0 16px 16px; } body.rbs-dark .rbs-prof svg { width: 100%; height: auto; } body.rbs-dark .rbs-ppi.rbs-hl .rbs-plabel { display: block; } body.rbs-dark .rbs-plname { font: italic 400 13px Georgia, 'Times New Roman', serif; fill: var(--ds-ink); } body.rbs-dark .rbs-plmeta { font: 700 9px var(--ds-font); fill: var(--ds-muted); } /* Pille + Bottom-Sheet */ body.rbs-dark .rbs-falz { position: fixed; left: 50%; right: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: auto; height: 46px; padding: 0 18px 0 20px; border-radius: 23px; z-index: 205; gap: 10px; display: inline-flex; align-items: center; font: 800 12px var(--ds-font); letter-spacing: .12em; text-transform: uppercase; } body.rbs-dark .rbs-falz-lbl { display: inline; } body.rbs-dark .rbs-falz-lbl b { color: var(--rbs-kicker); font-weight: 700; margin-left: 4px; } body.rbs-dark .rbs-falz svg { transform: rotate(-90deg); } body.rbs-dark .rbs-falz.on svg { transform: rotate(90deg); } body.rbs-dark .rbs-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; height: 70vh; z-index: 204; border-right: none; border-top: 1px solid var(--ds-line); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35); background: rgba(251,248,241,.96); } body.rbs-dark .rbs-drawer-h { padding: 18px 22px 8px 22px; } body.rbs-dark .rbs-drawer-list { padding: 0 22px 8px 22px; } body.rbs-dark .rbs-drawer-foot { padding: 12px 22px calc(74px + env(safe-area-inset-bottom)) 22px; } /* Fuß-Links über der Pille erreichbar */ body.rbs-lock { overflow: hidden; } /* Kopf: Titel volle Breite, Buttons als eigene Zeile darunter (Titel brach Wort für Wort) */ body.rbs-dark .tour-title-bar { flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 12px; } body.rbs-dark .tour-title-bar .v10-ttl { flex: 1 1 calc(100% - 60px); min-width: 0; } body.rbs-dark h1.tour-title { font-size: 20px; line-height: 1.2; margin: 0; } body.rbs-dark .tour-subhead { flex-wrap: nowrap; white-space: nowrap; } body.rbs-dark .v10-facts { flex: 1 1 100%; margin-left: 0; display: flex; flex-wrap: nowrap; gap: 8px; } body.rbs-dark .v10-facts .tpbtn { flex: 1 1 0; min-width: 0; padding: 0 12px; height: 42px; } body.rbs-dark .v10-facts .tpbtn .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }