/* GyWem Aviation — Theme nach dem Logo: tiefes Marineblau, Silber, Gold-Akzent. */ :root { --navy-900: #0b1430; --navy-800: #0d1b3e; --navy-700: #122150; --navy-600: #1a2a5e; --silver: #c8d2e8; --silver-dim: #8a97b8; --gold: #f5b301; --gold-dim: #c8930a; --gold-ink: #1a1300; /* Schriftfarbe AUF Gold-Flächen (je Theme hell/dunkel) */ --text: #e8ecf5; --muted: #9aa7c7; --border: #243463; --danger: #ff6b6b; --ok: #5fd29a; --radius: 10px; --sidebar-w: 240px; /* Karten-Bedienelemente (Navaids/Lufträume/Ebenen-Ausklappmenüs): halbtransparentes Panel + Akzentfarbe. */ --map-ctl-bg: rgba(11,20,48,0.92); --map-ctl-accent: #7fd0ff; --hero-glow: #16264f; /* dekorativer Radial-/Login-Schimmer — färbt je Theme mit */ } /* Heller Modus: am Airline-Vorbild GETÖNTE helle Flächen statt reinem Weiß (Nutzervorgabe 2026-07-23) — GyWem Aviation: sanftes, marineblau getöntes Creme-Blau + dunkle Schrift. (GyWem-DARK bleibt unberührt.) */ :root[data-theme="light"] { --navy-900: #e7edf8; --navy-800: #f3f7fd; --navy-700: #dee7f5; --navy-600: #cfdbef; --silver: #2a3550; --silver-dim: #5d6a86; --gold: #c8930a; --gold-dim: #9a7008; /* FALLE: NICHT var(--navy-700) — das ist im Hellmodus selbst hell (#dee7f5) → helle Schrift auf hellem Grund. Feste dunkle Marineblau-Schrift (wie die anderen Theme-Light-Blöcke); Lufthansa/'aviation' erbt diesen Basis-Block als sein Hellmodus. */ --text: #16203a; --muted: #5d6a86; --border: #c2d0e6; /* Heller Modus: helles Panel + kräftigeres Blau (auf Hell lesbar) + dunkles Ebenen-Icon. */ --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #1c6aa8; --hero-glow: #dbe6f5; } /* ===== Farb-Themes (data-palette am ) — je Theme Dark-Block + Light-Block (2 Attribute → gewinnt über den Default-Light-Block). Status-/Datenfarben (--danger/--ok/Charts) bleiben bewusst neutral (vom Basis-:root geerbt), damit „Grün=gut/Rot=schlecht" in jedem Theme gleich bleibt. „aviation" braucht keinen Block (= Basis-:root). ===== */ /* Cathay Pacific — Dunkelgrün + Jade (Brushwing) */ :root[data-palette="cathaypacific"] { --navy-900: #06251f; --navy-800: #0a3128; --navy-700: #0e3d31; --navy-600: #164e40; --silver: #c4e6db; --silver-dim: #7fae9f; --gold: #2fbf9e; --gold-dim: #1c8f75; --text: #e6f5f0; --muted: #8fb8ac; --border: #14463a; --map-ctl-bg: rgba(6,37,31,0.92); --map-ctl-accent: #2fbf9e; --hero-glow: #0f4436; } :root[data-palette="cathaypacific"][data-theme="light"] { --navy-900: #e1f1eb; --navy-800: #f0f9f5; --navy-700: #d5ebe1; --navy-600: #c3e1d5; --silver: #08302a; --silver-dim: #47705f; --gold: #0f766e; --gold-dim: #0b5a54; --gold-ink: #ffffff; --text: #08302a; --muted: #47705f; --border: #b6dbce; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #0f766e; --hero-glow: #d6ece4; } /* Qantas — Anthrazit + Kangaroo-Rot */ :root[data-palette="qantas"] { --navy-900: #191113; --navy-800: #22181a; --navy-700: #2c2023; --navy-600: #3a2a2e; --silver: #e6d3d5; --silver-dim: #ab9294; --gold: #e40000; --gold-dim: #b00000; --gold-ink: #ffffff; --text: #f6e9e9; --muted: #b39a9c; --border: #3a2a2d; --map-ctl-bg: rgba(25,17,19,0.92); --map-ctl-accent: #e40000; --hero-glow: #38181c; } :root[data-palette="qantas"][data-theme="light"] { --navy-900: #f6e7e6; --navy-800: #fdf4f3; --navy-700: #efdad8; --navy-600: #e8cbc9; --silver: #2a0f10; --silver-dim: #7a5556; --gold: #c1121f; --gold-dim: #97121b; --gold-ink: #ffffff; --text: #2a0f10; --muted: #7a5556; --border: #e5c3c1; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #c1121f; --hero-glow: #f5d9d7; } /* Qatar Airways — Bordeaux + Silber (Oryx) */ :root[data-palette="qatar"] { --navy-900: #29091a; --navy-800: #350f23; --navy-700: #43152d; --navy-600: #571f3c; --silver: #e6cfda; --silver-dim: #b593a3; --gold: #c39ba8; --gold-dim: #9a7181; --text: #f3e8ee; --muted: #c0a1af; --border: #4a1c37; --map-ctl-bg: rgba(41,9,26,0.92); --map-ctl-accent: #c39ba8; --hero-glow: #451934; } :root[data-palette="qatar"][data-theme="light"] { --navy-900: #f2e5ed; --navy-800: #fbf3f7; --navy-700: #ebd8e4; --navy-600: #e1cad8; --silver: #29091a; --silver-dim: #7a556a; --gold: #6b1b3f; --gold-dim: #531431; --gold-ink: #ffffff; --text: #29091a; --muted: #7a556a; --border: #dcc1d1; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #6b1b3f; --hero-glow: #f2d9e6; } /* Singapore Airlines — Mitternachtsblau + Batik-Gold */ :root[data-palette="singaporeairlines"] { --navy-900: #0a1526; --navy-800: #0f1e35; --navy-700: #152845; --navy-600: #1e3559; --silver: #cdd8ea; --silver-dim: #8496b0; --gold: #d4a537; --gold-dim: #a67f22; --text: #eaf0fa; --muted: #93a3bd; --border: #1c3358; --map-ctl-bg: rgba(10,21,38,0.92); --map-ctl-accent: #d4a537; --hero-glow: #12294c; } :root[data-palette="singaporeairlines"][data-theme="light"] { --navy-900: #eaeff8; --navy-800: #f5f8fd; --navy-700: #dfe8f4; --navy-600: #d0ddf0; --silver: #0a1526; --silver-dim: #4c5c7a; --gold: #94711d; --gold-dim: #745914; --gold-ink: #ffffff; --text: #0a1526; --muted: #4c5c7a; --border: #c5d3ea; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #94711d; --hero-glow: #dce6f5; } /* Air New Zealand — Schwarz/Anthrazit + Silber (Key bleibt „graphite" für Bestandsnutzer) */ :root[data-palette="graphite"] { --navy-900: #16181b; --navy-800: #1d2024; --navy-700: #24282e; --navy-600: #2f353d; --silver: #d3dae4; --silver-dim: #98a3b2; --gold: #8fa9c9; --gold-dim: #5a6b82; --text: #eef1f5; --muted: #99a3b2; --border: #333a43; --map-ctl-bg: rgba(22,24,27,0.92); --map-ctl-accent: #8fa9c9; --hero-glow: #2a2f36; } :root[data-palette="graphite"][data-theme="light"] { --navy-900: #e8ecf0; --navy-800: #f5f7fa; --navy-700: #e0e5eb; --navy-600: #d3dae2; --silver: #1c2430; --silver-dim: #55606f; --gold: #4a5568; --gold-dim: #333a43; --gold-ink: #ffffff; --text: #1c2430; --muted: #55606f; --border: #c7cfd9; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #4a5568; --hero-glow: #dde3ea; } /* ===== Airline-Themes (Look großer Fluggesellschaften) ===== */ /* Lufthansa — tiefes Marineblau + Kranich-Gelb */ /* easyJet — Orange + Anthrazit (ersetzt das alte Lufthansa-Theme; dessen Look lebt unter dem umbenannten „Lufthansa"-Theme mit key 'aviation' weiter) */ :root[data-palette="easyjet"] { --navy-900: #1b1b1f; --navy-800: #232329; --navy-700: #2c2c34; --navy-600: #383841; --silver: #d9dbe1; --silver-dim: #9a9da8; --gold: #ff6600; --gold-dim: #cc5200; --text: #f2f2f5; --muted: #a3a6b1; --border: #3c3c46; --map-ctl-bg: rgba(27,27,31,0.92); --map-ctl-accent: #ff6600; --hero-glow: #33241a; } :root[data-palette="easyjet"][data-theme="light"] { --navy-900: #f7efe6; --navy-800: #fdf8f1; --navy-700: #f1e3d3; --navy-600: #ebd8c4; --silver: #1d1d22; --silver-dim: #5b5b64; --gold: #e05500; --gold-dim: #b34400; --gold-ink: #ffffff; --text: #1d1d22; --muted: #5b5b64; --border: #e6d2bc; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #e05500; --hero-glow: #f3e2d3; } /* British Airways — Midnight-Navy + Speedmarque-Rot */ :root[data-palette="britishairways"] { --navy-900: #041226; --navy-800: #071c38; --navy-700: #0c2648; --navy-600: #12335a; --silver: #cfd9ea; --silver-dim: #8593ab; --gold: #ef4b56; --gold-dim: #c62b36; --gold-ink: #ffffff; --text: #e9eef7; --muted: #94a2bd; --border: #1a3055; --map-ctl-bg: rgba(4,18,38,0.92); --map-ctl-accent: #ef4b56; --hero-glow: #12294a; } :root[data-palette="britishairways"][data-theme="light"] { --navy-900: #e8eef7; --navy-800: #f4f7fc; --navy-700: #dee7f3; --navy-600: #cedbed; --silver: #0a1e3a; --silver-dim: #4d5c76; --gold: #c1121f; --gold-dim: #97121b; --gold-ink: #ffffff; --text: #0a1e3a; --muted: #4d5c76; --border: #c3d2e7; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #c1121f; --hero-glow: #dde6f3; } /* Emirates — Bordeauxrot + Gold */ :root[data-palette="emirates"] { --navy-900: #1c0708; --navy-800: #290b0d; --navy-700: #380f12; --navy-600: #4a171b; --silver: #ecdac9; --silver-dim: #bfa088; --gold: #d9b25b; --gold-dim: #a9833a; --text: #f7ece4; --muted: #cba898; --border: #4d1f22; --map-ctl-bg: rgba(28,7,8,0.92); --map-ctl-accent: #d9b25b; --hero-glow: #451418; } :root[data-palette="emirates"][data-theme="light"] { --navy-900: #f7eae0; --navy-800: #fdf6ef; --navy-700: #f1dcce; --navy-600: #ead0bd; --silver: #3a1416; --silver-dim: #7a5a52; --gold: #9c7a2e; --gold-dim: #7d611f; --gold-ink: #ffffff; --text: #3a1416; --muted: #7a5a52; --border: #e6cbb6; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #9c7a2e; --hero-glow: #f5ddd0; } /* KLM — Königsblau + Azur */ :root[data-palette="klm"] { --navy-900: #04121f; --navy-800: #071e33; --navy-700: #0b2843; --navy-600: #123557; --silver: #c6dcee; --silver-dim: #7ea0bb; --gold: #2fa8e0; --gold-dim: #1785b5; --text: #e6f1fa; --muted: #90adc6; --border: #163a5a; --map-ctl-bg: rgba(4,18,31,0.92); --map-ctl-accent: #2fa8e0; --hero-glow: #103a5c; } :root[data-palette="klm"][data-theme="light"] { --navy-900: #e5f0fa; --navy-800: #f2f8fe; --navy-700: #daebf7; --navy-600: #c8dff1; --silver: #08263f; --silver-dim: #4a6480; --gold: #0284c7; --gold-dim: #026aa0; --gold-ink: #ffffff; --text: #08263f; --muted: #4a6480; --border: #bdd6ec; --map-ctl-bg: rgba(255,255,255,0.95); --map-ctl-accent: #0284c7; --hero-glow: #d7e8f5; } * { box-sizing: border-box; } /* Das hidden-Attribut muss zuverlässig ausblenden — sonst überschreibt eine explizite display-Regel (z.B. display:grid) die UA-Regel [hidden]{display:none}. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--navy-900); overflow: hidden; } button { font-family: inherit; cursor: pointer; } input { font-family: inherit; } h1, h2, h3 { font-weight: 600; } /* ===== Login ===== */ .login-screen { height: 100vh; height: 100dvh; overflow-y: auto; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, var(--hero-glow) 0%, var(--navy-900) 60%); } .login-card { width: 360px; padding: 32px 28px 28px; background: color-mix(in srgb, var(--navy-800) 90%, transparent); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); text-align: center; } .login-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--border); } .login-card h1 { margin: 14px 0 2px; font-size: 22px; } .subtitle { margin: 0 0 18px; color: var(--muted); font-size: 13px; } #login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; } label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } input { padding: 10px 12px; background: var(--navy-800); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; } input:focus { border-color: var(--gold); } button { padding: 11px 14px; background: var(--gold); color: var(--gold-ink); border: none; border-radius: 8px; font-weight: 600; font-size: 14px; } button:hover { background: var(--gold-dim); } button.secondary { background: var(--navy-600); color: var(--text); border: 1px solid var(--border); } button.secondary:hover { background: var(--navy-700); } /* Deaktivierte Buttons (z. B. Theorieprüfung mit noch offenen Voraussetzungen) ausgrauen. */ button:disabled, button:disabled:hover { background: var(--navy-600) !important; color: var(--muted) !important; cursor: not-allowed !important; opacity: 0.55; border: 1px solid var(--border); } .error { color: var(--danger); font-size: 13px; margin: 4px 0 0; } .ok-text { color: var(--ok); font-size: 13px; } /* ===== App-Layout ===== */ /* Grid-Zeile auf genau die Fensterhöhe klemmen (minmax(0,1fr)), damit Sidebar und Content ihren Inhalt INTERN scrollen (statt die Seite zu überlaufen). 100dvh = sichtbare Höhe auf iPad/Safari (sonst wird unten etwas abgeschnitten); 100vh als Fallback. */ .app-screen { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; } .sidebar { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; min-height: 0; /* erlaubt dem inneren Menü, zu scrollen */ } /* Logo oben ZENTRIERT + größer, „GyWem Aviation" und „Virtual Airline" mittig darunter (Nutzervorgabe 2026-07-22). */ .brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 6px 16px; border-bottom: 1px solid var(--border); } .brand-logo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border); } .brand-text { display: flex; flex-direction: column; align-items: center; } .brand-name { font-weight: 700; font-size: 17px; } .brand-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; } /* Menü scrollt per Touch, falls es (z. B. im Querformat) nicht ganz passt — ohne sichtbare Scrollleiste. min-height:0 ist nötig, damit overflow im Flex-Container greift. */ /* Globale, theme-treue Scrollleisten (App-Fenster/Browser-Body + ALLE scrollbaren Container, die keine speziellere Regel haben). Nutzt die Theme-Variablen, passt sich also automatisch dem gewählten Theme an. */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 45%, var(--border)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } html, body { scrollbar-color: var(--border) transparent; } /* Schlanke, dezente Scrollleiste, damit das Menü bei vielen Einträgen sichtbar scrollbar ist. */ .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-track { background: transparent; } .nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .nav:hover::-webkit-scrollbar-thumb { background: var(--navy-600); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; color: var(--silver-dim); font-size: 14px; text-align: left; width: 100%; } .nav-item:hover { background: var(--navy-700); color: var(--text); } .nav-item.active { background: var(--navy-600); color: var(--text); box-shadow: inset 3px 0 0 var(--gold); } .nav-item .ico { width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .nav-item .nav-label { flex: 1 1 auto; min-width: 0; } .nav-item .nav-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); transition: color .12s; } .nav-item:hover .nav-caret, .nav-item.active .nav-caret { color: var(--gold); } /* Akkordeon in der Smartphone-Schublade: Gruppen klappen ihre Untermenüs direkt im Menü auf (buildNav rendert sie nur im Phone-Layout). Pfeil dreht sich beim Aufklappen. */ .nav-group { display: flex; flex-direction: column; } .nav-group .nav-caret { transition: transform .15s; } .nav-group.open > .nav-item .nav-caret { transform: rotate(90deg); color: var(--gold); } .nav-sub { display: none; flex-direction: column; gap: 2px; padding: 2px 0 6px 14px; border-left: 2px solid var(--border); margin-left: 14px; } .nav-group.open .nav-sub { display: flex; } .nav-subitem { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px; background: transparent; border: none; border-radius: 8px; color: var(--silver-dim); font-size: 14px; text-align: left; width: 100%; } .nav-subitem:hover { background: var(--navy-700); color: var(--text); } .nav-subitem.active { background: var(--navy-600); color: var(--text); box-shadow: inset 3px 0 0 var(--gold); } .nav-subitem .ico { width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } /* Flyout-Untermenü neben der Seitenleiste (Hover/Tap) */ .nav-flyout { position: fixed; z-index: 1200; display: none; min-width: 224px; max-width: 320px; max-height: 80vh; overflow-y: auto; padding: 6px; background: var(--navy-800); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,0.55); } .nav-flyout.open { display: block; } .nav-flyout::-webkit-scrollbar { width: 7px; } .nav-flyout::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .flyout-group-head { padding: 7px 12px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border); color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .flyout-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; background: transparent; border: none; border-radius: 8px; color: var(--silver-dim); font-size: 14px; cursor: pointer; } .flyout-item:hover { background: var(--navy-700); color: var(--text); } .flyout-item.active { background: var(--navy-600); color: var(--text); box-shadow: inset 3px 0 0 var(--gold); } .flyout-item .ico { width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; flex: 0 0 auto; } /* MSFS-Statusanzeige (über der Linie zum Benutzerbereich) */ .sim-status { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); } .sim-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; } .sim-dot.green { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; } .sim-dot.orange { background: #f5a623; box-shadow: 0 0 6px #f5a623; } .sim-dot.red { background: #e7563f; box-shadow: 0 0 6px #e7563f; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--border); margin-top: 8px; border-radius: 8px; cursor: pointer; transition: background 0.12s; } .user-chip:hover { background: var(--navy-600); } .user-chip.active { background: var(--navy-600); } .user-chip.active .user-name { color: var(--gold); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-600); border: 1px solid var(--border); display: grid; place-items: center; font-size: 14px; color: var(--gold); } .user-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; } .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--muted); } /* Hell-/Dunkelmodus-Schalter rechts in der Benutzerkachel. */ .theme-toggle { flex-shrink: 0; display: inline-flex; align-items: center; background: transparent; border: none; padding: 2px; } .theme-track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); transition: background 0.15s; } .theme-knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); transition: transform 0.15s; display: grid; place-items: center; font-size: 10px; } .theme-knob::after { content: "🌙"; font-size: 10px; } :root[data-theme="light"] .theme-knob { transform: translateX(18px); } :root[data-theme="light"] .theme-knob::after { content: "☀️"; } .logout-btn { width: 100%; margin-top: 10px; padding: 10px; background: var(--navy-600); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; } .logout-btn:hover { background: #5a1f2a; border-color: var(--danger); color: #ffd7d7; } /* ===== Content ===== */ /* overflow-anchor: none — Chromes Scroll-Verankerung „korrigiert" die Scrollposition bei DOM-Änderungen und ließ die Seite u. a. beim Ziehen im Einrichten-Editor mitwandern. Die App verwaltet ihre Scrollpositionen selbst (preserveScroll/furnishKeepScroll); die Automatik stört hier nur. */ .content { padding: 28px 32px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overflow-anchor: none; } /* „Greifen & Scrollen": während der Zieh-Geste kein Text markieren + Greif-Cursor. */ .content.drag-scrolling-y { cursor: grabbing; user-select: none; -webkit-user-select: none; } /* Hamburger + Menü-Backdrop: nur auf Smartphones (siehe Media-Query unten) sichtbar. */ .nav-toggle { display: none; } .nav-backdrop { display: none; } /* --- Menüleiste anheften / automatisch ausblenden (Desktop + Browser ≥ 681px, Nutzervorgabe 2026-07-24) --- Auto-Hide: die Leiste wird zum Overlay und verschwindet nach links, der Inhalt nutzt die volle Fensterbreite; Maus an den linken Rand (oder auf die Leiste) blendet sie ein; ein „Spielraum"-Timer hält sie beim Wechsel in die Untermenüs offen. Das Pin-Symbol oben links schaltet dauerhaft-gezeigt <-> Auto-Hide um. */ .sidebar-pin { display: none; position: fixed; top: 8px; left: 8px; z-index: 1300; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--border); background: color-mix(in srgb, var(--navy-800) 84%, transparent); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sidebar-pin:hover { border-color: var(--gold); } .sidebar-edge { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 22px; z-index: 1200; } @media (min-width: 681px) { .sidebar-pin { display: inline-flex; } .app-screen.sidebar-autohide { grid-template-columns: 1fr; } .app-screen.sidebar-autohide .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .18s ease; z-index: 1250; box-shadow: 5px 0 26px rgba(0,0,0,.5); } .app-screen.sidebar-autohide.sidebar-peek .sidebar { transform: translateX(0); } .app-screen.sidebar-autohide .sidebar-edge { display: block; } /* Im Auto-Hide etwas Platz oben, damit das Pin-Symbol das Logo nicht überdeckt, wenn die Leiste offen ist. */ .app-screen.sidebar-autohide .brand { padding-left: 30px; } } /* ===== Smartphones (≤ 680 px): Seitenmenü wird zur Schublade, Inhalt nutzt die volle Breite ===== */ /* Auf Tablets (≥ 768 px) bleibt das feste 240-px-Menü — dort ist genug Platz. */ @media (max-width: 680px) { .app-screen { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 300px); z-index: 1400; transform: translateX(-100%); transition: transform .22s ease; will-change: transform; box-shadow: 6px 0 30px rgba(0, 0, 0, .5); } .app-screen.nav-open .sidebar { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(4, 8, 20, .55); z-index: 1350; opacity: 0; pointer-events: none; transition: opacity .2s; } .app-screen.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 1360; width: 44px; height: 44px; border-radius: 10px; font-size: 22px; line-height: 1; background: var(--navy-700); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); cursor: pointer; } /* Inhalt: kompaktere Ränder + Platz oben für den Hamburger; seitliche Safe-Areas (Notch im Querformat). */ .content { padding: 14px 13px; padding-top: calc(60px + env(safe-area-inset-top)); padding-left: calc(13px + env(safe-area-inset-left)); padding-right: calc(13px + env(safe-area-inset-right)); } .page-head { padding: 16px 16px; margin-bottom: 16px; } .page-head h2 { font-size: 21px; } .card { padding: 15px; } .kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; } .kpi { padding: 12px; } .kpi .value { font-size: 19px; } .map { height: 300px; } /* ALLE Tabellen horizontal wischbar machen, statt das Layout zu sprengen (Nutzervorgabe 2026-08-18: Spalten bleiben erhalten, seitlich wischen — kein Informationsverlust). */ .content table, .modal-card table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Tabellen in einem eigenen Scroll-Wickel (.table-scroll) scrollen ÜBER den Wickel — die Tabelle selbst bleibt eine Tabelle, sonst schöbe man zwei ineinanderliegende Scroller. */ .table-scroll table { display: table; } /* Nichts darf die Seitenbreite sprengen: Medien schrumpfen mit (Klassen-Größen gewinnen weiterhin). AUSNAHME Leaflet-Karten: Marker-Bilder (Flugzeuge, Pkw, …) und Overlay-Canvas tragen ihre exakte Pixelgröße als width/height-Attribut — height:auto/max-width verzerrte sie (Nutzerbefund 2026-08-19). */ .content img:not(.leaflet-container *):not(.map *), .content canvas:not(.leaflet-container *):not(.map *), .content video { max-width: 100%; height: auto; } /* Finger-taugliche Bedienelemente: 16px in Eingabefeldern verhindert außerdem den automatischen iOS-Zoom beim Antippen; Knöpfe bekommen eine Mindest-Trefferhöhe. */ input, select, textarea { font-size: 16px; } select { padding: 10px 10px; } button { min-height: 42px; } .theme-toggle { min-height: 0; } /* der kleine Tag/Nacht-Schalter bleibt kompakt */ /* Karten-Bedienung bleibt kompakt: die Chip-Knöpfe über den Karten (Routen/NPC/Pkw/Fokus …) und alle Leaflet-eigenen Bedienelemente behalten ihr schlankes Design (Nutzerbefund 2026-08-19). */ .ap-focus-btn, .leaflet-container button { min-height: 0; } /* Formularzeilen: untereinander statt gequetscht nebeneinander. */ .form-row label { min-width: 100%; } .form-row button { flex: 1 1 auto; } /* Schubladen-Menü: größere Ziele. */ .nav-item { padding: 13px 12px; min-height: 46px; font-size: 15px; } /* Modals nahezu vollflächig. */ .modal-overlay { padding: 10px; } .modal-card { max-width: 100%; padding: 18px; } } .page-head { position: relative; margin-bottom: 22px; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .page-head .eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; font-weight: 600; } .page-head h2 { margin: 0 0 4px; font-size: 30px; overflow-wrap: anywhere; } .page-head p { margin: 0; color: var(--muted); font-size: 14px; } /* Umbruch erlauben, damit lange Titel (z. B. „Administrator") und die Kennzahlen-Boxen sich auf schmalen Bildschirmen (iPad) nicht überlappen, sondern bei Platzmangel umbrechen. */ .page-head.with-stats { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; } .page-head-main { min-width: 0; flex: 1 1 auto; } .page-head-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; } .page-head-stats { display: flex; gap: 18px 28px; justify-content: flex-end; flex-wrap: wrap; } /* Bei knapper Breite rücken die Kacheln zusammen und ihre Beschriftung bricht nicht mehr um, damit die Reihe geschlossen bleibt statt eine zweite aufzumachen. Zusammen mit der Fenster-Mindestbreite (1280, siehe desktop/main.js) passt so auch die längste Aufstellung des CEO in eine Zeile. */ @media (max-width: 1500px) { .page-head-stats { gap: 12px 16px; } .page-head-stats .phs-lbl { letter-spacing: 0.4px; white-space: nowrap; } } .page-head-stats .phs { text-align: right; } .page-head-stats .phs-val { font-size: 24px; font-weight: 700; color: var(--gold); } .page-head-stats .phs-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .page-head-extra { display: flex; flex-direction: column; gap: 2px; } /* Schmale Bildschirme (iPad-Hochformat, kleine Fenster): Titel oben, Kennzahlen darunter, links ausgerichtet und kompakter — so bleibt alles lesbar und nichts überlappt. */ @media (max-width: 820px) { .page-head.with-stats { align-items: flex-start; } .page-head-main { flex-basis: 100%; } .page-head-side { width: 100%; } .page-head-stats { justify-content: flex-start; } .page-head-stats .phs { text-align: left; } .page-head h2 { font-size: 24px; } .page-head-stats .phs-val { font-size: 20px; } } /* Back-Link sitzt jetzt unter der Kopf-Box */ .link-back { display: inline-block; margin: -8px 0 14px; } .card { background: var(--navy-800); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } .card h3 { margin: 0 0 14px; font-size: 15px; color: var(--silver); } .placeholder { color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; text-align: center; } .placeholder .big-ico { font-size: 40px; opacity: 0.7; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--navy-600); border: 1px solid var(--border); font-size: 11px; color: var(--muted); } .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .form-row label { flex: 1; min-width: 160px; } .form-row button { flex: 0 0 auto; } .form-col { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } .form-col label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .form-col input { width: 100%; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 500; font-size: 12px; } select { padding: 7px 8px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 6px; color: var(--text); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kpi { background: var(--navy-700); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .kpi .label { font-size: 12px; color: var(--muted); } .kpi .value { font-size: 22px; font-weight: 700; margin-top: 4px; } .kpi .value.gold { color: var(--gold); } /* Live-Karte */ .map { height: 380px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; } .leaflet-container { background: var(--navy-900); } /* Kein Fokus-Kasten um angeklickte Strecken/Marker. */ .leaflet-interactive:focus, path.leaflet-interactive:focus, .leaflet-container:focus { outline: none; } /* Höhen-Leuchten (ADS-B-Farbcode): jedes Flugzeug leuchtet in seiner Flughöhen-Farbe (--alt-glow, live gesetzt). Ohne gesetzte Variable = transparent = nur der Basis-Schatten. Umschalter „Höhenfarbe" (Body- Klasse alt-glow-off) schaltet Spur + Leuchten gemeinsam. */ .plane-marker { text-align: center; filter: drop-shadow(0 0 2px rgba(0,0,0,0.85)) drop-shadow(0 0 6px var(--alt-glow, transparent)) drop-shadow(0 0 3px var(--alt-glow, transparent)); } .plane-marker .plane-rot { display: grid; place-items: center; transform-origin: 50% 50%; } .plane-marker .plane-rot svg { display: block; } /* Rotierbarer Icon-Kern (Flugzeug/Auto) — der Marker-Animator dreht ihn pro Frame flüssig mit. */ .rot-wrap { transform-origin: 50% 50%; will-change: transform; } /* Personal-Filterleiste (Verfügbarkeit/Hub/Standort) — kompakt nebeneinander. */ .staff-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .staff-filt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted, #9fb3cc); } .staff-filt select { font: inherit; } /* Inline-Textbutton, der wie ein Link aussieht (z. B. „zurückbeordern" im Crew-Profil). */ .linklike { background: none; border: none; padding: 0; color: var(--accent, #7fd0ff); cursor: pointer; font: inherit; text-decoration: underline; } .linklike:disabled { opacity: 0.5; cursor: default; } /* Höhen-Farblegende (Kartensteuerung rechts): Skala aus altitudeColor-Swatches. Färbt die geflogene Spur. */ .altlgd-scale { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; } .altlgd-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); white-space: nowrap; } .altlgd-sw { width: 15px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45); flex: none; } .gv-marker { filter: drop-shadow(0 0 2px rgba(0,0,0,0.75)); } .gv-marker img { pointer-events: none; } .gv-speed { color: var(--muted); font-size: 11px; } /* Topdown-Foto-Marker eines Flugmusters (statt gelbem Vektor-Icon). */ .plane-img { filter: drop-shadow(0 0 2px rgba(0,0,0,0.7)) drop-shadow(0 0 6px var(--alt-glow, transparent)) drop-shadow(0 0 3px var(--alt-glow, transparent)); } .plane-img.plane-own { z-index: 1000 !important; } .plane-img img { pointer-events: none; } /* Eigener Flug auf der kombinierten „Aktiver Flug"-Karte: nach vorne holen (Leuchten kommt aus --alt-glow). */ .plane-marker.plane-own { z-index: 1000 !important; } /* Höhenfarbe AUS: nur Basis-Schatten; eigenes Flugzeug wieder GOLDEN hervorgehoben (Kennzeichnung „du"). */ body.alt-glow-off .plane-marker { filter: drop-shadow(0 0 2px rgba(0,0,0,0.85)); } body.alt-glow-off .plane-img { filter: drop-shadow(0 0 2px rgba(0,0,0,0.7)); } body.alt-glow-off .plane-marker.plane-own, body.alt-glow-off .plane-img.plane-own { filter: drop-shadow(0 0 5px rgba(245,179,1,0.95)); } /* Dunkles Theme für Leaflet-Tooltips/Popups der Live-Karte */ .leaflet-tooltip { background: var(--navy-700); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.5); font-size: 12px; } .leaflet-tooltip-left::before { border-left-color: var(--border); } .leaflet-tooltip-right::before { border-right-color: var(--border); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--navy-700); color: var(--text); border: 1px solid var(--border); } .leaflet-popup-content { margin: 10px 12px; font-size: 13px; } .leaflet-popup-content .map-popup strong { color: var(--gold); } .leaflet-popup-close-button { color: var(--muted) !important; } /* Ebenen-Umschalter (Standard/Topografisch/Satellit) im Dark-Theme der App. Das Umschalt-Icon kommt als Inline-SVG (das Leaflet-Standardbild layers.png liegt nicht im vendor-Ordner → ohne Override bliebe der Knopf leer). */ /* Layer-Menü (oben rechts) im Theme — transluzent + Blur wie die Zoom-Knöpfe, damit es über jeder Karte lesbar bleibt; theme-abhängiges Icon (Nutzervorgabe 2026-07-24). */ .leaflet-control-layers { background: rgba(14,20,32,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); border: 1px solid var(--border) !important; border-radius: 9px; box-shadow: 0 2px 10px rgba(0,0,0,0.45); } .leaflet-control-layers-toggle { background-color: rgba(14,20,32,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 9px; width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ebf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5 12 2'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important; } .leaflet-control-layers-expanded { padding: 8px 10px; } .leaflet-control-layers label { font-size: 13px; display: flex; align-items: center; gap: 7px; margin: 3px 0; cursor: pointer; color: var(--text); } .leaflet-control-layers-selector { accent-color: var(--gold); } .leaflet-control-layers-separator { border-top: 1px solid var(--border); margin: 6px -2px; } :root[data-theme="light"] .leaflet-control-layers, :root[data-theme="light"] .leaflet-control-layers-toggle { background: rgba(255,255,255,.88); color: #1a2230; } :root[data-theme="light"] .leaflet-control-layers-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5 12 2'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important; } /* Karten-Zoom (+/-): ans Theme angepasst, aber TRANSLUZENT mit Blur, damit die Knöpfe über jeder Karte lesbar bleiben (Nutzervorgabe 2026-07-24 — GUI-Farbe + dynamische Anpassung an den Kartenhintergrund). */ .leaflet-control-zoom { border: none !important; box-shadow: 0 2px 10px rgba(0,0,0,.45); border-radius: 9px; overflow: hidden; } .leaflet-control-zoom a { background: rgba(14,20,32,.72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: var(--text); border-color: var(--border) !important; width: 30px; height: 30px; line-height: 30px; font-size: 19px; font-weight: 700; transition: background .15s, color .15s; } .leaflet-control-zoom a:hover { background: rgba(14,20,32,.92); color: var(--gold); } .leaflet-control-zoom a.leaflet-disabled { opacity: .45; } :root[data-theme="light"] .leaflet-control-zoom a { background: rgba(255,255,255,.8); color: #1a2230; } :root[data-theme="light"] .leaflet-control-zoom a:hover { background: rgba(255,255,255,.96); color: var(--gold); } /* Zahlen-Eingabefelder: eigene themenfarbene ▲▼ statt der nicht umfärbbaren nativen Spinner (Nutzervorgabe). */ .num-stepper { display: inline-flex; vertical-align: middle; max-width: 100%; } .num-stepper > input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .num-stepper > input[type="number"]::-webkit-inner-spin-button, .num-stepper > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .num-stepper-btns { display: flex; flex-direction: column; margin-left: -1px; flex: 0 0 auto; } .num-step { flex: 1 1 0; width: 18px; min-height: 9px; padding: 0; border: 1px solid var(--border); background: var(--navy-700); color: var(--muted); font-size: 7px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; } .num-step-up { border-radius: 0 6px 0 0; border-bottom-width: 0; } .num-step-down { border-radius: 0 0 6px 0; } .num-step:hover { background: var(--gold); color: #10131a; } .num-step:active { filter: brightness(.9); } /* Flughafen-Geometrie-Editor */ .ageo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .ageo-icao { width: 90px; text-transform: uppercase; letter-spacing: 1px; } .ageo-sep { flex: 0 0 1px; align-self: stretch; background: var(--border); margin: 0 2px; } .ageo-tools { display: inline-flex; gap: 4px; flex-wrap: wrap; } .ageo-tools button { padding: 6px 9px; font-size: 12px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); border-radius: 7px; } .ageo-tools button.active { background: var(--gold); color: #1b1400; border-color: var(--gold); font-weight: 700; } .ageo-size { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; } .ageo-park.sel svg polygon { stroke: #fff; } .ageo-park.ageo-cargo::after { content: '📦'; position: absolute; top: -8px; right: -10px; font-size: 12px; text-shadow: 0 0 2px #000; pointer-events: none; } .ageo-park.ageo-gate::before { content: '🛫'; position: absolute; top: -9px; left: -10px; font-size: 12px; text-shadow: 0 0 2px #000; pointer-events: none; } .ageo-pop { min-width: 160px; display: flex; flex-direction: column; gap: 6px; } .ageo-pop label { font-size: 12px; display: flex; align-items: center; gap: 6px; } .ageo-pop .danger { background: var(--danger); color: #fff; border: none; border-radius: 6px; padding: 5px 8px; cursor: pointer; } .ageo-pop-name { width: 100%; } .ageo-nato { color: #7fd0ff; font-weight: 600; } .ageo-rwylbl { color: #ffe08a; font-weight: 800; font-size: 11px; text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; pointer-events: none; } .ageo-legend { margin: 6px 0 10px; font-size: 12px; } .ageo-legend summary { cursor: pointer; color: var(--gold); font-weight: 600; } .ageo-legend ul { margin: 6px 0 4px 18px; padding: 0; line-height: 1.5; } /* Heller Modus: das Ebenen-Ausklapp-Icon (Topografisch/Satellit …) braucht einen dunklen Strich, sonst unsichtbar. */ :root[data-theme="light"] .leaflet-control-layers-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316203a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 22 8.5 12 15 2 8.5 12 2'/%3E%3Cpolyline points='2 15.5 12 22 22 15.5'/%3E%3C/svg%3E") !important; } /* Flüge-Menü (zwei Spalten: Auswahl-Karten + Streckenkarte) */ .fluege-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; align-items: start; } .fluege-col { display: flex; flex-direction: column; } .fluege-col .card { margin-bottom: 16px; } .card label { display: block; font-size: 12px; color: var(--muted); } .card label.mt, .card .mt { margin-top: 10px; } .card select { width: 100%; margin-top: 6px; } button.full { width: 100%; } .muted-note { color: var(--muted); font-size: 13px; } @media (max-width: 1100px) { .fluege-grid { grid-template-columns: 1fr; } } /* Flüge: Flugart-Tabs + Hero-Kopf je Tab */ .fluege-tabs { margin-bottom: 12px; } .fluege-hero { display: flex; align-items: center; gap: 16px; padding: 15px 18px; margin-bottom: 16px; border: 1px solid var(--border); border-left: 4px solid var(--fh-accent, var(--gold)); border-radius: var(--radius); background: var(--navy-800); position: relative; overflow: hidden; } .fluege-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--fh-accent, var(--gold)) 0%, transparent 22%); opacity: 0.08; } .fluege-hero .fh-icon { flex: 0 0 auto; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 14px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1.5px var(--fh-accent, var(--gold)); } .fluege-hero .fh-body { flex: 1 1 auto; min-width: 0; } .fluege-hero .fh-title { font-size: 18px; font-weight: 700; color: var(--text); } .fluege-hero .fh-desc { margin-top: 3px; font-size: 13px; color: var(--muted); } .fluege-hero .fh-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; } .fluege-hero .fh-badge { font-size: 11px; font-weight: 600; color: var(--text); background: var(--navy-600); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; max-width: 320px; } .fluege-hero .fh-stat { font-size: 12px; color: var(--muted); } .hero-pax { --fh-accent: #f5b301; } .hero-cargo { --fh-accent: #7fd0ff; } .hero-training { --fh-accent: #5fd29a; } .hero-check { --fh-accent: #b9c4dc; } .hero-sonder { --fh-accent: #b98cff; } .hero-scenic { --fh-accent: #c08af5; } .hero-charter { --fh-accent: #8a97b8; } /* Chancen & Risiken (Geschäftschancen-Entscheidungen) */ .chance-card .chance-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: 13px; } .chance-card .chance-stats > span { color: var(--muted); } .chance-card .chance-stats strong { color: var(--text); font-variant-numeric: tabular-nums; } .chance-pos { color: var(--ok); } .chance-pos strong, strong.chance-pos { color: var(--ok); } .chance-neg { color: #e06c6c; } .chance-neg strong, strong.chance-neg { color: #e06c6c; } .chance-mods { display: flex; flex-wrap: wrap; gap: 8px; } .chance-mod { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ok); background: rgba(95,210,154,0.12); font-size: 12px; } /* Saison-Tag an Strecken (Profil + aktueller Faktor) */ .season-tag { background: rgba(122,162,255,0.14); border-color: #7aa2ff; color: var(--text); } /* Rundflug (Sightseeing): Sehenswürdigkeiten-Chips + Info */ .scenic-info { display: flex; flex-direction: column; gap: 4px; } .scenic-wps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; } .scenic-wp-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .scenic-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: rgba(192,138,245,0.14); border: 1px solid #c08af5; color: var(--text); } .scenic-chip .scwp-del { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .scenic-chip .scwp-del:hover { color: #e06c6c; } /* Ziehbarer, nummerierter Wegpunkt-Marker auf der Rundflug-Karte (Linksklick ziehen, Rechtsklick entfernt). */ .scenic-wp-marker { background: transparent; border: none; cursor: grab; } .scenic-wp-marker span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #c08af5; color: #1a1330; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45); font-size: 11px; font-weight: 700; } .scenic-wp-marker:active { cursor: grabbing; } @media (max-width: 700px) { .fluege-hero { flex-wrap: wrap; } .fluege-hero .fh-side { align-items: flex-start; text-align: left; } } /* Admin-Kachelmenü */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .tile { text-align: left; background: var(--navy-800); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; color: var(--text); display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.05s; } .tile:hover { border-color: var(--gold); background: var(--navy-700); } .tile:active { transform: translateY(1px); } .tile-ico { font-size: 26px; } .tile-title { font-size: 15px; font-weight: 600; } .tile-desc { font-size: 12px; color: var(--muted); line-height: 1.4; } .link-back { background: transparent; color: var(--silver-dim); border: none; padding: 0 0 12px; font-size: 13px; } .link-back:hover { color: var(--gold); background: transparent; } /* ===== Benutzerverwaltung (Admin) ===== */ /* Anlegen-Karte */ .user-create .uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .user-create .uc-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .user-create .uc-grid input, .user-create .uc-grid select { padding: 9px 10px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; width: 100%; } .user-create .uc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; } .user-create .uc-foot p { margin: 0; flex: 1; min-width: 160px; } .user-create .uc-foot button { padding: 10px 20px; } /* Such-/Filterleiste */ .user-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .user-search { position: relative; flex: 1; min-width: 200px; } .user-search .us-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.7; pointer-events: none; } .user-search input { width: 100%; padding: 9px 12px 9px 34px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 13px; } .user-filter { display: flex; gap: 8px; flex-wrap: wrap; } .uf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 600; } .uf-chip:hover { background: var(--navy-600); color: var(--text); } .uf-chip.active { background: var(--navy-600); color: var(--text); border-color: var(--rc, var(--gold)); box-shadow: inset 0 0 0 1px var(--rc, var(--gold)); } .uf-chip .uf-n { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--navy-900); color: var(--muted); } .uf-chip.active .uf-n { color: var(--rc, var(--gold)); } /* Benutzer-Karten (Roster) */ .user-roster { display: flex; flex-direction: column; gap: 10px; } .ur-card { background: var(--navy-700); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s; } .ur-card[open] { border-color: var(--gold-dim); } .ur-card:hover { border-color: var(--silver-dim); } .ur-sum { display: flex; align-items: center; gap: 16px; padding: 12px 16px; cursor: pointer; list-style: none; } .ur-sum::-webkit-details-marker { display: none; } .ur-portrait { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--navy-900); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--rc, var(--border)); } .ur-portrait .avatar-svg { width: 100%; height: 100%; display: block; } .ur-initials { font-size: 17px; font-weight: 700; color: var(--rc, var(--gold)); } .ur-idblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 150px; } .ur-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ur-login { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; } .ur-tag-main { background: rgba(245,179,1,0.16); color: var(--gold); border: 1px solid rgba(245,179,1,0.4); } .ur-tag-you { background: var(--navy-600); color: var(--silver-dim); border: 1px solid var(--border); } .ur-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 1 auto; } .ur-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--navy-800); color: var(--muted); } .ur-role { color: var(--rc, var(--text)); border-color: var(--rc, var(--border)); background: color-mix(in srgb, var(--rc, var(--navy-600)) 14%, var(--navy-800)); } .ur-lic { color: var(--silver); } .ur-fi { color: var(--ok); border-color: rgba(95,210,154,0.4); background: rgba(95,210,154,0.12); } .ur-metrics { display: flex; gap: 20px; margin-left: auto; flex: 0 0 auto; } .ur-metric { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; min-width: 56px; } .urm-val { font-size: 13px; font-weight: 700; } .urm-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .ur-repcol { align-items: stretch; min-width: 70px; } .ur-repcol .urm-lbl { text-align: right; } .urm-bar { height: 6px; border-radius: 999px; background: var(--navy-900); overflow: hidden; border: 1px solid var(--border); } .urm-bar i { display: block; height: 100%; border-radius: 999px; } .ur-status { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .ur-status.on { background: var(--ok); box-shadow: 0 0 6px rgba(95,210,154,0.8); } .ur-status.off { background: var(--silver-dim); opacity: 0.5; } .ur-chev { color: var(--muted); font-size: 13px; transition: transform 0.15s; flex: 0 0 auto; } .ur-card[open] .ur-chev { transform: rotate(90deg); color: var(--gold); } .ur-edit { padding: 4px 16px 18px; border-top: 1px solid var(--border); } .ur-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; margin-top: 14px; } .ur-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .ur-form input, .ur-form select { padding: 8px 9px; background: var(--navy-800); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 13px; width: 100%; } .ur-actfield { grid-column: 1 / -1; } .ur-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding-top: 2px; } .ur-toggle input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; } .ur-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; } .ur-actions button:first-child { padding: 9px 22px; } /* Gelöschte Benutzer */ .del-summary { cursor: pointer; font-weight: 600; } .del-list { display: flex; flex-direction: column; gap: 8px; } .del-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 9px; flex-wrap: wrap; } .del-info { min-width: 0; } @media (max-width: 900px) { .ur-metrics { width: 100%; order: 5; margin-left: 0; justify-content: flex-start; gap: 24px; } .ur-metric { align-items: flex-start; } .ur-repcol .urm-lbl { text-align: left; } } /* Strecken / Hubs */ button.mini { padding: 4px 9px; font-size: 13px; } /* Flotte: Zustandsbalken */ .cond-row { display: flex; gap: 8px; } .cond { display: flex; align-items: center; gap: 4px; } .cond-lbl { font-size: 10px; color: var(--muted); width: 10px; } .cond-track { position: relative; width: 44px; height: 7px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .cond-fill { height: 100%; } /* Vorschau: projizierter Gesundheits-Zuwachs (nach der geplanten Arbeit) als gestreiftes grünes Segment. */ .cond-gain { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(74,222,128,.6) 0 3px, rgba(74,222,128,.22) 3px 6px); border-left: 1px solid var(--ok); } /* Analytics-Dashboards */ .an-bars { display: flex; flex-direction: column; gap: 12px; } .an-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .an-bar-label { font-weight: 600; } .an-bar-val { font-variant-numeric: tabular-nums; font-weight: 700; } .an-bar-val.pos { color: var(--ok); } .an-bar-val.neg { color: var(--danger); } .an-bar-track { height: 9px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .an-bar-track span { display: block; height: 100%; border-radius: 5px; } .an-bar-track span.pos { background: var(--ok); } .an-bar-track span.neg { background: var(--danger); } .an-bar-sub { font-size: 12px; color: var(--muted); margin-top: 3px; } .an-utils { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 4px; } .an-util { display: flex; align-items: center; gap: 10px; } .an-util-lbl { flex: 0 0 56px; font-size: 13px; color: var(--muted); } .an-util-track { flex: 1; height: 9px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .an-util-track span { display: block; height: 100%; border-radius: 5px; } .an-util-val { flex: 0 0 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; } .an-rings { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 10px 0; } .an-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; } .an-table { width: 100%; border-collapse: collapse; } .an-table th, .an-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .an-table th { color: var(--muted); font-weight: 600; font-size: 13px; } .an-hubhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .an-h4 { margin: 12px 0 4px; font-size: 14px; color: var(--muted); } .an-satrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .an-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; background: var(--navy-900); } .ac-thumb { width: 52px; height: 34px; border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; object-fit: cover; } /* Gebrauchtmarkt: Kopfzeile mit Musterbild + Titel; Detail-Modal mit größerem Musterbild. */ .mkt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mkt-head .ac-thumb { width: 72px; height: 46px; flex: 0 0 auto; } .ac-detail-photo { margin: 8px 0; } .ac-detail-photo img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--navy-900); } .badge-ok { background: rgba(95,210,154,0.15); color: var(--ok); border-color: rgba(95,210,154,0.4); } .badge-warn { background: rgba(245,179,1,0.15); color: var(--gold); border-color: rgba(245,179,1,0.4); } .badge-bad { background: rgba(255,107,107,0.15); color: var(--danger); border-color: rgba(255,107,107,0.45); } .badge-info { background: rgba(78,161,255,0.15); color: var(--accent, #38bdf8); border-color: rgba(78,161,255,0.4); } .cf-fin { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .cf-fin summary { cursor: pointer; font-weight: 600; } .cf-fin-toggle { display: inline-flex; align-items: center; gap: 6px; } .cf-fin-body label { display: block; margin-top: 6px; } .btn-action { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: var(--gold-ink); border: none; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(245,179,1,0.25); } .btn-action:hover { filter: brightness(1.08); } .ac-photo { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--navy-900); } .cond-detail { display: flex; flex-direction: column; gap: 8px; } .cond-line { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; } .cond-line .cond-track { width: 100%; height: 9px; } .insp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .insp-row > span:first-child { width: 130px; } /* Kauf & Verkauf */ .acc { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } /* „Meine Flugzeuge" — immersive Flottenkarte */ .fz-card { background: linear-gradient(180deg, var(--navy-700), var(--navy-800, var(--navy-700))); } .fz-hero { display: flex; align-items: center; gap: 14px; } .fz-thumb .ac-thumb { width: 92px; height: 58px; border-radius: 8px; } .fz-hero-main { flex: 1 1 auto; min-width: 0; } .fz-reg { font-size: 22px; font-weight: 800; letter-spacing: .5px; } .fz-type { font-size: 13px; } .fz-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .fz-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--border); white-space: nowrap; } .fz-badge-ok { color: #5fd29a; border-color: rgba(95,210,154,.4); } .fz-badge-warn { color: #f5b301; border-color: rgba(245,179,1,.4); } .fz-badge-bad { color: #e8736b; border-color: rgba(232,115,107,.4); } .fz-ring { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .fz-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--navy-700); } .fz-ring span { position: relative; font-weight: 800; font-size: 16px; } .fz-ring small { position: relative; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .fz-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin-top: 14px; } .fz-gauge-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); gap: 8px; } .fz-gauge-head span:last-child { color: var(--text, #e8eefc); font-weight: 600; } .fz-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; } .fz-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s; } .fz-cbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 14px; margin-top: 12px; } .fz-cbar { display: flex; align-items: center; gap: 6px; font-size: 11px; } .fz-cbar-l { flex: 0 0 auto; color: var(--muted); min-width: 66px; } .fz-cbar-track { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .fz-cbar-fill { display: block; height: 100%; } .fz-cbar-v { flex: 0 0 auto; font-weight: 600; min-width: 34px; text-align: right; } .fz-findings { margin-top: 12px; padding: 12px; border-radius: var(--radius); background: rgba(245,179,1,.08); border: 1px solid rgba(245,179,1,.28); } .fz-finding { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; } .fz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .fz-fuel-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .fz-fuel-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .fz-fuel-opt span:nth-child(2) { flex: 1 1 auto; } .fz-fuel-locked { opacity: .5; cursor: not-allowed; } /* Verlinkte Crew unter der Flugkarte + Crew-Kurzprofil-Modal */ .crew-link-group { margin-top: 8px; } .crew-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .crew-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--navy-700); cursor: pointer; transition: border-color .15s, transform .1s; } .crew-link:hover { border-color: var(--gold); transform: translateY(-1px); } .crew-link-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; } .crew-link-av svg { width: 100%; height: 100%; } .crew-link-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .crew-link-name { font-weight: 600; font-size: 13px; } .crew-modal { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 10px; } .crew-modal-av { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--navy-700); border: 1px solid var(--border); } /* Hochgeladenes Foto randlos zeigen (Nutzervorgabe): kein Rahmen/Hintergrund, sonst wirkt das Bild „eingerahmt". Zusätzlich (Nutzerbefund 2026-08-12): Der Kasten war QUADRATISCH (120×120), das Porträt-SVG aber hochkant (viewBox 200×330) — links/rechts füllte avExtBg den Letterbox-Rand dunkelblau („blauer Rahmen"). Der Foto-Kasten übernimmt deshalb das Seitenverhältnis des Bildes, sodass nur das Bild selbst zu sehen ist. */ .crew-modal-av.is-photo { border: none; background: none; height: auto; aspect-ratio: 200 / 330; } .crew-modal-av svg { width: 100%; height: 100%; } .crew-modal-meta { flex: 1 1 auto; min-width: 0; } .crew-modal-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; } .crew-modal-bar > span:first-child { min-width: 92px; color: var(--muted); } .crew-modal-bar .apc-bar { flex: 1 1 auto; } /* Piloten-Charakterbogen (D&D-Stil) + Talente */ .cs-sheet { background: linear-gradient(180deg, rgba(245,179,1,.05), var(--navy-700)); } .cs-head { display: flex; gap: 16px; align-items: center; } .cs-portrait { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--navy-800, var(--navy-700)); border: 2px solid var(--gold); } .cs-portrait svg { width: 100%; height: 100%; } .cs-ident { flex: 1 1 auto; min-width: 0; } .cs-name { font-size: 24px; font-weight: 800; letter-spacing: .5px; } .cs-class { color: var(--gold); font-weight: 700; margin: 2px 0; } .cs-lvl { font-size: 12px; color: var(--muted); } .cs-xp { margin-top: 6px; max-width: 340px; } .cs-abilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; align-items: start; } .cs-ability { position: relative; text-align: center; padding: 12px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--navy-700); } .cs-ab-label { font-size: 12px; color: var(--muted); } .cs-ab-score { font-size: 30px; font-weight: 800; line-height: 1.1; } .cs-ab-max { font-size: 13px; color: var(--muted); font-weight: 600; } .cs-ab-sub { font-size: 11px; color: var(--muted); overflow-wrap: break-word; hyphens: auto; } .cs-ab-label { overflow-wrap: break-word; hyphens: auto; } .cs-ab-plus { position: absolute; top: 6px; right: 6px; } /* Auf-/zuklappbares Erklärfeld je Attribut (touch-freundlich, nicht nur Hover-Tooltip). */ .cs-ab-info { margin-top: 7px; } .cs-ab-info summary { cursor: pointer; font-size: 10.5px; color: var(--gold); list-style: none; user-select: none; } .cs-ab-info summary::-webkit-details-marker { display: none; } .cs-ab-info summary::before { content: 'ⓘ '; } .cs-ab-info[open] summary::before { content: '▾ '; } /* Info-Text im Blocksatz mit automatischer Silbentrennung (lang="de") — lange Wörter brechen um statt über den Rand zu ragen (Nutzervorgabe 2026-07-22). */ .cs-ab-info p { text-align: justify; hyphens: auto; overflow-wrap: break-word; font-size: 11px; color: var(--muted); line-height: 1.4; margin: 6px 0 0; } .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; } .feat-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--navy-700); } .feat-grid-pick .feat-card { cursor: pointer; transition: border-color .15s, transform .1s; } .feat-grid-pick .feat-card:hover { border-color: var(--gold); transform: translateY(-1px); } .feat-ico { font-size: 26px; flex: 0 0 auto; line-height: 1; } .feat-body { flex: 1 1 auto; min-width: 0; } .feat-name { font-weight: 700; } .feat-eff { font-size: 11px; color: var(--gold); margin-top: 4px; } .feat-pick { align-self: center; color: var(--gold); font-weight: 700; font-size: 12px; white-space: nowrap; } /* Personal-Charakterbogen: Kategorie-Blöcke + Merkmals-Chips */ .cs-charblock { margin-top: 10px; } .cs-charcat { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } /* Gestufte Merkmale (I–III) + Bindungen (Score-Balken) im Charakterbogen */ .cs-pips { font-size: 9px; letter-spacing: 1px; color: #f5b301; vertical-align: middle; } .cs-bonds { display: flex; flex-direction: column; gap: 8px; } .cs-bond { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.02); } .cs-bond-good { border-left: 3px solid #5fd29a; } .cs-bond-bad { border-left: 3px solid #e8736b; } .cs-bond-head { font-size: 13px; } .cs-bond-ico { font-size: 15px; } .cs-bond-scale { position: relative; height: 6px; margin: 5px 0; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .cs-bond-fill { position: absolute; top: 0; bottom: 0; } .cs-bond-fill.cs-bond-pos { left: 50%; background: linear-gradient(90deg, #5fd29a, #3bd07a); } .cs-bond-fill.cs-bond-neg { right: 50%; background: linear-gradient(90deg, #e8736b, #d9463a); } /* Freund/Feind-Hinweis auf den Crew-Auswahl-Kacheln */ .apc-bond { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; } .apc-bond-friend { color: #eafff3; background: rgba(95,210,154,.22); } .apc-bond-foe { color: #ffecec; background: rgba(232,115,107,.22); } .apc-tile.apc-friend { border-color: rgba(95,210,154,.55); } .apc-tile.apc-foe { border-color: rgba(232,115,107,.55); } .char-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .char-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.06); } .char-chip.char-trait { border-color: rgba(95,210,154,.5); } .char-chip.char-ideal { border-color: rgba(127,208,255,.5); } .char-chip.char-bond { border-color: rgba(245,179,1,.5); } .char-chip.char-flaw { border-color: rgba(232,115,107,.5); } /* Personal-Detail: Charakterbogen links, Fähigkeiten rechts daneben */ .staff-cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .staff-cs-cols > .card { margin: 0; } @media (max-width: 900px) { .staff-cs-cols { grid-template-columns: 1fr; } } /* Mechaniker-Auswahl im Wartungspanel */ .mech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; } .mech-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mech-chips .char-chip { font-size: 10px; padding: 1px 6px; } /* Wartungsaufträge */ .job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; } .job-card { background: var(--navy-700); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .job-title { font-weight: 600; } .job-meta { font-size: 12px; color: var(--muted); } .pool-row { background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; } .pool-row > summary { padding: 10px 12px; display: grid; grid-template-columns: 1.4fr 1.4fr 0.8fr; gap: 10px; align-items: center; font-size: 13px; } .pool-row > summary { cursor: pointer; list-style: none; } .pool-row > summary::-webkit-details-marker { display: none; } .pool-label { display: flex; align-items: center; gap: 6px; } .pool-caret { display: inline-block; width: 10px; flex: none; font-size: 9px; color: var(--muted); transition: transform 0.15s; } .pool-caret::before { content: '▶'; } .pool-row[open] > summary .pool-caret { transform: rotate(90deg); } .pool-row > summary > span:last-child { text-align: right; } .pool-comp { padding: 4px 12px 10px 28px; display: flex; flex-direction: column; gap: 4px; } .pool-comp-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } .pool-comp-row > span:last-child { color: var(--text); } /* Prognostizierte P&L je Flugstunde (CEO-Kostenüberblick) */ .pnl-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .pnl-group { display: flex; flex-direction: column; gap: 5px; } .pnl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; font-size: 13.5px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .pnl-group .pool-comp-row, .pnl-group .pool-row { margin-left: 8px; } .pnl-result { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; margin-top: 2px; } .pnl-result strong { font-size: 17px; } .pnl-result.pos { background: rgba(95,210,154,0.12); border-color: var(--ok); } .pnl-result.pos strong { color: var(--ok); } .pnl-result.neg { background: rgba(255,107,107,0.12); border-color: var(--danger); } .pnl-result.neg strong { color: var(--danger); } /* Bestenlisten */ /* Gruppen-Filter (Chips) */ .lb-groupchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .lb-chip { background: var(--navy-700); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; } .lb-chip:hover { border-color: var(--gold); } .lb-chip.active { background: var(--gold); color: var(--navy-900); border-color: var(--gold); font-weight: 600; } /* Spotlight-Karte (Podium der gewählten Kategorie) */ .lb-spotlight { border-top: 3px solid var(--lb-accent, var(--gold)); } .lb-sp-head { display: flex; align-items: center; gap: 10px; } .lb-sp-head h3 { margin: 0; flex: 1; } .lb-sp-ico { font-size: 22px; } .lb-sp-count { color: var(--muted); font-size: 12px; white-space: nowrap; } /* Podium: 2. links · 1. Mitte · 3. rechts; gestaffelte Sockelhöhe */ .lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin: 14px 0; } .lb-pedestal { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; } .lb-pedestal.empty { opacity: 0.4; } .lb-ped-face { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--navy-900); border: 3px solid var(--border); } .lb-pedestal.gold .lb-ped-face { width: 76px; height: 76px; border-color: #f5b301; } .lb-pedestal.silver .lb-ped-face { border-color: #c9d2dc; } .lb-pedestal.bronze .lb-ped-face { border-color: #cd7f32; } .lb-ped-face .avatar-svg { width: 100%; height: 100%; } .lb-ped-name { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-ped-val { font-size: 13px; font-weight: 700; color: var(--gold); } .lb-ped-base { width: 100%; border-radius: 8px 8px 0 0; background: var(--navy-700); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-top: 2px; } .lb-pedestal.gold .lb-ped-base { height: 66px; background: linear-gradient(180deg, rgba(245,179,1,.25), var(--navy-700)); } .lb-pedestal.silver .lb-ped-base { height: 46px; } .lb-pedestal.bronze .lb-ped-base { height: 32px; } .lb-mine-pod .lb-ped-name { color: var(--gold); } /* Eigene Platzierung (immer sichtbar, auch außerhalb der Top 10) */ .lb-mine { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--navy-600); outline: 1px solid var(--lb-accent, var(--gold)); font-weight: 600; } .lb-mine .lb-pos { text-align: center; } .lb-mine .lb-val { color: var(--gold); font-weight: 700; } .lb-mine-none { display: block; text-align: center; color: var(--muted); font-weight: 400; } /* Liste (Ränge 4–10) */ .lb-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .lb-row { display: grid; grid-template-columns: 28px 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--navy-700); font-size: 14px; } .lb-row .lb-pos { font-size: 16px; text-align: center; color: var(--muted); } .lb-face { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--navy-900); border: 1px solid var(--border); } .lb-face .avatar-svg { width: 100%; height: 100%; } .lb-row .lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-row .lb-val { font-weight: 700; color: var(--gold); } .lb-me { outline: 1px solid var(--gold); background: var(--navy-600); } .lb-me .lb-name { color: var(--gold); } /* Wettbewerbe */ .wb-section { margin: 22px 0 8px; } .wb-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--navy-600); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .wb-tag.wb-on { background: rgba(95,210,154,0.16); border-color: var(--ok); color: var(--ok); } .wb-tag.wb-soon { background: rgba(245,179,1,0.16); border-color: var(--gold); color: var(--gold); } .wb-tag.wb-end { background: var(--navy-600); border-color: var(--border); color: var(--muted); } .wb-tag.wb-done { background: rgba(122,162,255,0.16); border-color: #7aa2ff; color: #7aa2ff; } .wb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .wb-chip { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; background: var(--navy-900); } .wb-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .wb-row { display: grid; grid-template-columns: 28px 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--navy-700); font-size: 14px; } .wb-row .wb-pos { font-size: 16px; text-align: center; color: var(--muted); } .wb-face { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--navy-900); border: 1px solid var(--border); } .wb-face .avatar-svg { width: 100%; height: 100%; } .wb-row .wb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-row .wb-val { font-weight: 700; color: var(--gold); } .wb-row.wb-me { outline: 1px solid var(--gold); background: var(--navy-600); } .wb-row.wb-me .wb-name { color: var(--gold); } .wb-mine { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: var(--navy-600); outline: 1px solid var(--gold); font-size: 14px; } .wb-mine .wb-pos { text-align: center; color: var(--gold); } .wb-mine .wb-val { font-weight: 700; color: var(--gold); } .wb-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .wb-check { display: flex; align-items: center; gap: 8px; } .wb-auto { margin-top: 8px; font-size: 11px; opacity: 0.85; } /* Gestaffelte Preise je Platz (Admin-Formular) */ .wb-prizes { margin-top: 12px; } .wb-prizes-h { margin: 0 0 8px 0; font-size: 13px; } .wb-prize-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 5px 0; } .wb-prize-rk { flex: 0 0 96px; font-size: 13px; } .wb-prize-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .wb-prize-row input { width: 110px; } /* Wettbewerbs-Sieger (Ergebnisseite) */ .wb-winners-h { margin: 12px 0 6px; font-size: 13px; color: var(--gold); } .wb-winners { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .wb-winner { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--navy-800); border: 1px solid var(--border); border-radius: 8px; } .wb-winner.wb-me { border-color: var(--gold); } .wb-winner .wb-medal { flex: 0 0 auto; font-size: 15px; } .wb-winner .wb-face { flex: 0 0 24px; width: 24px; height: 24px; } .wb-winner .wb-face svg { width: 100%; height: 100%; } .wb-winner .wb-name { flex: 1; font-size: 13px; } .wb-winner .wb-prize { flex: 0 0 auto; color: var(--gold); font-weight: 700; font-size: 12px; } .coop-goal { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--navy-700); } .coop-goal.coop-reached { border-color: var(--ok); background: rgba(95,210,154,0.10); } .coop-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; flex-wrap: wrap; } .coop-status { font-weight: 700; } .coop-goal.coop-reached .coop-status { color: var(--ok); } .coop-num { color: var(--muted); font-variant-numeric: tabular-nums; } .coop-bar { height: 12px; border-radius: 7px; background: var(--navy-900); overflow: hidden; } .coop-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-dim)); transition: width .4s ease; } .coop-goal.coop-reached .coop-fill { background: linear-gradient(90deg, var(--ok), #3fb98a); } .coop-contrib { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .coop-contrib-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--navy-700); font-size: 14px; } .coop-contrib-row .wb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coop-contrib-row .wb-val { font-weight: 700; color: var(--gold); } .coop-contrib-row.wb-me { outline: 1px solid var(--gold); background: var(--navy-600); } .coop-contrib-row.wb-me .wb-name { color: var(--gold); } /* Wirtschaftslage / Marktklima-Widget */ .market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .market-cell { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--navy-700); text-align: center; } .market-cell.market-good { border-color: var(--ok); } .market-cell.market-bad { border-color: #e06c6c; } .market-ico { font-size: 22px; line-height: 1; } .market-val { font-size: 18px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; } .market-lbl { font-size: 13px; } .market-sub { font-size: 11px; } .market-up, .market-down, .market-flat { color: var(--muted); } @media (max-width: 560px) { .market-grid { grid-template-columns: 1fr; } } /* Lehrer-Dashboard */ .ld-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ld-table th, .ld-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .ld-table th { color: var(--gold); font-size: 12px; white-space: nowrap; } .ld-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ld-name { display: flex; align-items: center; gap: 8px; min-width: 150px; } .ld-face { flex: 0 0 28px; width: 28px; height: 28px; } .ld-face svg { width: 100%; height: 100%; } .ld-hints { display: flex; flex-wrap: wrap; gap: 4px; min-width: 180px; } .ld-hint { display: inline-block; background: rgba(245,179,1,0.14); color: var(--gold); border: 1px solid rgba(245,179,1,0.4); border-radius: 10px; padding: 1px 8px; font-size: 11px; } /* Bis zu drei Favoriten-Spotlights oben — nebeneinander, umbrechend auf schmalen Fenstern. */ .lb-spotlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; margin-bottom: 8px; } /* „Alle Wertungen": auf-/zuklappbar, standard zu. */ .lb-allcard { margin-top: 22px; } .lb-all-sum { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .lb-all-sum::-webkit-details-marker { display: none; } .lb-all-sum::before { content: '▸'; font-size: .8em; opacity: .7; transition: transform .15s; } .lb-allcard[open] > .lb-all-sum::before { transform: rotate(90deg); } /* Admin-Feinkalibrierung der Symbolgröße (Rechtsklick auf ein Live-Karten-Symbol) — an GUI + Karte angepasst. */ .icon-scale-popup .leaflet-popup-content-wrapper { background: var(--navy-800, #141c2e); color: var(--text, #e7edf7); border: 1px solid var(--border, #2b3a5a); border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.45); } .icon-scale-popup .leaflet-popup-tip { background: var(--navy-800, #141c2e); border: 1px solid var(--border, #2b3a5a); } .icon-scale-popup .leaflet-popup-content { margin: 10px 12px; } .icon-scale-popup a.leaflet-popup-close-button { color: var(--muted, #8a97b8); } .icon-scale-ctl { display: flex; flex-direction: column; gap: 7px; min-width: 150px; text-align: center; } .icon-scale-ctl .isc-title { font-size: 12px; color: var(--muted, #8a97b8); } .icon-scale-ctl .isc-key { display: block; color: var(--text, #e7edf7); font-weight: 700; word-break: break-all; } .icon-scale-ctl .isc-row { display: flex; align-items: center; justify-content: center; gap: 12px; } .icon-scale-ctl .isc-arrow { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border, #2b3a5a); background: var(--navy-700, #1b2740); color: var(--gold, #f5b301); font-size: 16px; line-height: 1; cursor: pointer; } .icon-scale-ctl .isc-arrow:hover { background: var(--navy-600, #223052); } .icon-scale-ctl .isc-val { min-width: 52px; font-weight: 700; font-variant-numeric: tabular-nums; } .icon-scale-ctl .isc-reset { border: 1px solid var(--border, #2b3a5a); background: transparent; color: var(--text, #e7edf7); border-radius: 8px; padding: 5px 8px; cursor: pointer; font: inherit; } .icon-scale-ctl .isc-reset:hover { background: var(--navy-700, #1b2740); } .icon-scale-ctl .isc-hint { font-size: 10.5px; color: var(--muted, #8a97b8); } .icon-scale-ctl .isc-zoom { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--gold, #f5b301); } /* Admin-Bewertungshistorie: Filter-/Suchleiste + auf-/zuklappbare Kategorien. */ .arh-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .arh-f-lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .arh-filter input, .arh-filter select { background: var(--navy-800); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 6px 9px; font: inherit; } .arh-cat > summary { cursor: pointer; font-weight: 600; list-style: none; } .arh-cat > summary::-webkit-details-marker { display: none; } .arh-cat > summary::before { content: '▸'; display: inline-block; margin-right: 6px; opacity: .7; transition: transform .15s; } .arh-cat[open] > summary::before { transform: rotate(90deg); } /* Debriefing-Graphen: schwebender Zeit-Tooltip rechts vom Cursor — nur Text, sonst durchsichtig. */ /* Schwebender Debriefing-Tooltip: Zeile 1 = Zeit, darunter der Wert des beruehrten Graphen. Mehrzeilig, daher line-height statt eines reinen Einzeilers (Nutzervorgabe 2026-07-27). */ .dbf-hover-time { position: fixed; z-index: 9999; pointer-events: none; display: none; transform: translateY(-50%); color: var(--gold, #f5b301); font-weight: 700; font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; white-space: nowrap; } /* Zufriedenheits-Tagestrend: schwebender Tooltip (durchsichtig bis auf Text) + sortierbare Dashboard-Spalten. */ .sat-hover-tip { position: fixed; z-index: 9999; pointer-events: none; display: none; transform: translateY(-50%); color: var(--text, #e7edf7); font-size: 12px; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; white-space: nowrap; } .sat-hover-tip b { color: var(--gold, #f5b301); } .sat-chart { cursor: crosshair; } .an-table thead th .sort-ind { color: var(--gold, #f5b301); font-size: 10px; } /* Lounge-Shop-Effekt-Chips: Hover zeigt die Erklärung (cursor:help signalisiert den Tooltip). */ .lnf-eff-chip { cursor: help; white-space: nowrap; } .lnf-eff-chip + .lnf-eff-chip { margin-left: 6px; } .lb-fav { cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); } .lb-fav.on { color: var(--gold); } .lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } /* Gleiche Maße für leere und gefüllte Karten: der Karteninhalt hat immer die Höhe von ~3 Mini-Zeilen. */ .lb-card .lb-mini { min-height: 82px; } .lb-card .lb-empty { min-height: 82px; margin-top: 10px; padding: 8px; justify-content: center; font-size: 13px; gap: 6px; } @media (max-width: 1100px) { .lb-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .lb-grid { grid-template-columns: 1fr; } } .lb-card { cursor: pointer; border-left: 3px solid var(--lb-accent, transparent); transition: transform .08s ease, box-shadow .12s ease; } .lb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); } .lb-card.lb-active { outline: 2px solid var(--lb-accent, var(--gold)); } .lb-card.lb-dragging { opacity: 0.5; outline: 2px dashed var(--gold); } .lb-head { display: flex; align-items: center; gap: 8px; } .lb-head h3 { margin: 0; flex: 1; font-size: 15px; } .lb-ico { font-size: 18px; } .lb-drag { color: var(--muted); cursor: grab; user-select: none; font-size: 14px; letter-spacing: -2px; } .lb-mechip { background: var(--navy-700); border: 1px solid var(--border); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .lb-mini { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .lb-mini-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 6px; } .lb-mini-row.lb-me { background: var(--navy-600); outline: 1px solid var(--gold); } .lb-mini-pos { text-align: center; color: var(--muted); } .lb-mini-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-mini-val { font-weight: 700; color: var(--gold); } .lb-mini-row.lb-me .lb-mini-name { color: var(--gold); } /* Wunschliste */ .wish-note { background: var(--navy-700); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--muted); margin-bottom: 16px; } .wish-mine { border-left: 3px solid var(--gold); } .wish-mine-title { font-size: 16px; font-weight: 700; color: var(--gold); margin: 4px 0; } .wish-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .wish-card { padding: 12px 14px; transition: background 0.2s ease; } .wish-card.wish-own { outline: 1px solid var(--gold); } .wish-row { display: flex; align-items: center; gap: 12px; } .wish-rank { flex: 0 0 auto; min-width: 24px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .wish-vote { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; } .wish-vote:hover:not(:disabled) { border-color: var(--gold); } .wish-vote.voted { background: var(--gold); color: var(--navy-900); border-color: var(--gold); font-weight: 700; } .wish-vote:disabled { opacity: 0.45; cursor: not-allowed; } .wish-votes { font-variant-numeric: tabular-nums; } .wish-main { flex: 1 1 auto; min-width: 0; } .wish-title { font-weight: 600; cursor: pointer; } .wish-title:hover { color: var(--gold); } .wish-tag, .wish-author { font-size: 12px; color: var(--muted); font-weight: 400; } .wish-tag { margin-left: 6px; } .wish-desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .wish-fulfilled { margin-top: 18px; } .wish-fulfilled summary { cursor: pointer; color: var(--muted); } .wish-fulfilled .wish-card { opacity: 0.7; } /* ===== Mitgestalten: Reiter, Eingabekarten, Fehlerberichte ===== */ .fb-tabs .bank-tab { display: inline-flex; align-items: center; gap: 6px; } .fb-tab-ico { font-size: 15px; } /* Gemeinsame, graphisch aufgewertete Eingabekarte (Wunsch + Fehler) */ .compose-card { border-top: 3px solid var(--gold); } .bug-compose { border-top-color: #e8743b; } .compose-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .compose-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--navy-700); border: 1px solid var(--border); } .compose-head h3 { margin: 0; } .compose-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; } .compose-field { margin-bottom: 14px; } .compose-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .compose-field .opt { font-weight: 400; color: var(--muted); } .compose-field input[type="text"], .compose-field textarea { width: 100%; box-sizing: border-box; } .char-count { text-align: right; font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; } .compose-submit { font-weight: 700; } /* Bereichs-Auswahl als Icon-Chips */ .bug-area-grid { display: flex; flex-wrap: wrap; gap: 8px; } .bug-area-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--navy-700); color: var(--text); cursor: pointer; font-size: 13px; transition: border-color 0.15s ease, background 0.15s ease; } .bug-area-chip:hover { border-color: var(--gold); } .bug-area-chip.active { background: var(--gold); color: var(--navy-900); border-color: var(--gold); font-weight: 700; } .bac-ico { font-size: 15px; } /* Schweregrad als segmentierte Auswahl mit Farbpunkt */ .bug-sev { display: flex; flex-wrap: wrap; gap: 8px; } .bug-sev-opt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--navy-700); color: var(--text); cursor: pointer; font-size: 13px; } .bug-sev-opt:hover { border-color: var(--gold); } .bug-sev-opt.active { border-color: var(--gold); background: var(--navy-600); font-weight: 700; box-shadow: inset 0 0 0 1px var(--gold); } .sev-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; } .bug-sev-desc { margin-top: 8px; font-size: 12px; color: var(--muted); min-height: 16px; } /* Auto-Kontext-Chips */ .bug-ctx-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; } .ctx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--navy-700); border: 1px dashed var(--border); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .ctx-note { font-size: 11px; color: var(--muted); } /* Fehlerliste + Karten */ .bug-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .bug-card { padding: 12px 14px; transition: background 0.2s ease; } .bug-card.bug-own { outline: 1px solid var(--gold); } .bug-card.bug-done { opacity: 0.72; } .bug-row { display: flex; align-items: flex-start; gap: 12px; } .bug-metoo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; } .bug-metoo:hover:not(:disabled) { border-color: var(--gold); } .bug-metoo.on { background: var(--gold); color: var(--navy-900); border-color: var(--gold); font-weight: 700; } .bug-metoo:disabled { opacity: 0.45; cursor: not-allowed; } .bug-metoo-n { font-variant-numeric: tabular-nums; } .bug-main { flex: 1 1 auto; min-width: 0; } .bug-title { font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; } .bug-title:hover { color: var(--gold); } .bug-sev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .bug-tag { font-size: 12px; color: var(--muted); font-weight: 400; } .bug-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px; } .bug-area-tag { font-size: 12px; color: var(--muted); } .bug-reporter { font-size: 12px; color: var(--muted); } .bug-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); } .bug-status.bs-open { color: #e0a32e; border-color: #e0a32e; } .bug-status.bs-progress { color: #5b8def; border-color: #5b8def; } .bug-status.bs-resolved { color: #3fbf7f; border-color: #3fbf7f; } .bug-status.bs-wontfix { color: var(--muted); } .bug-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .bug-detail-block { margin-bottom: 8px; } .bug-detail-block .bdl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 2px; } .bug-detail-block p { margin: 0; } .bug-detail-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .bug-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .bug-admin-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .bug-status-sel { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--navy-700); color: var(--text); font-size: 13px; } /* Avatar + Shop */ .avatar-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .avatar-layout { grid-template-columns: 1fr; } } .avatar-stage { text-align: center; } .avatar-stage h3 { margin: 0 0 12px; } /* ===== Avatar — Bühne, Pilotenkarte, Menü-Kacheln ===== */ /* Breite und Seitenverhaeltnis kommen vom ausgeruesteten Hintergrund (avatarStage setzt --stage-w und aspect-ratio inline). Ohne Hintergrund bleibt es beim Hochformat 200x330 der Shop-Bilder. */ .av-stage { position: relative; width: var(--stage-w, 200px); max-width: 100%; margin: 0 auto; aspect-ratio: 200 / 330; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--navy-700); } .av-stage-fig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .av-stage-fig .avatar-svg { display: block; width: 100%; height: 100%; } /* Pilotenkarte (Hero) */ .av-hero { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 22px; align-items: center; } @media (max-width: 760px) { .av-hero { grid-template-columns: 1fr; } } .av-figure { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* In der Pilotenkarte gelten eine Hoehen- UND eine Breitenschranke (damit die Karte nicht kippt). Beide verrechnet `avatarStage` in --stage-w, die Hoehe folgt allein aus aspect-ratio. Wuerde das CSS hier zusaetzlich eine feste Hoehe setzen, schnitte die Breitenschranke das Seitenverhaeltnis an und der Kasten stuende breiter als das Bild darin (dunkle Raender, Nutzerbefund 2026-07-31). */ .av-hero .av-stage { width: var(--stage-w, 200px); height: auto; } .av-nameplate { text-align: center; } .av-nameplate strong { display: block; font-size: 18px; } .av-nameplate span { font-size: 13px; color: var(--muted); } .av-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .av-info .fit-mini { margin-top: 0; align-self: center; } .av-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; } .av-stat { background: var(--navy-700); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: center; } .av-stat-val { font-size: 18px; font-weight: 800; color: var(--gold); } .av-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; } .av-sec { margin: 6px 0 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Menü-Kacheln */ .av-tiles { margin-top: 4px; } .av-tile { align-items: flex-start; } .av-tile-ico { font-size: 26px; } .av-tile-status { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--gold); background: rgba(245,179,1,0.12); border-radius: 999px; padding: 3px 10px; align-self: flex-start; } .av-side { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } /* ===== Überblicksseiten der Sammel-Hauptmenüs ===== */ .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .ov-card { position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 18px 18px 16px; min-height: 150px; background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-900) 80%); border: 1px solid var(--border); border-left: 3px solid var(--accent, var(--gold)); border-radius: 14px; color: var(--text); transition: transform .12s ease, border-color .15s, box-shadow .15s; } button.ov-card { cursor: pointer; } button.ov-card:hover { transform: translateY(-3px); border-color: var(--accent, var(--gold)); box-shadow: 0 10px 26px rgba(0,0,0,.35); } .ov-card-ico { font-size: 30px; line-height: 1; } .ov-card-title { font-size: 16px; font-weight: 700; } .ov-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .ov-card-status { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent, var(--gold)); background: color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent); border-radius: 999px; padding: 4px 11px; } .ov-card-go { position: absolute; right: 16px; bottom: 14px; font-size: 12px; font-weight: 600; color: var(--accent, var(--gold)); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; } button.ov-card:hover .ov-card-go { opacity: 1; transform: none; } .ov-card.ov-locked { opacity: .55; border-left-color: var(--border); } .ov-card.ov-locked .ov-card-lock { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; } .av-side details > summary { cursor: pointer; font-weight: 600; } .av-ap-group { margin-bottom: 14px; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; } .shop-card { background: var(--navy-700); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; } .shop-card.equipped { border-color: var(--gold); } .shop-prev { width: 84px; height: 134px; background: var(--navy-900); border-radius: 8px; overflow: hidden; display: grid; place-items: center; } .shop-prev .avatar-svg { display: block; width: 100%; height: 100%; } .shop-name { font-size: 13px; font-weight: 600; } .shop-price { font-size: 13px; color: var(--gold); font-weight: 600; } .shop-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .mini.danger { background: #5a1f2a; border-color: var(--danger); color: #ffd7d7; } .user-avatar { overflow: hidden; } .user-avatar .avatar-svg { width: 100%; height: auto; transform: scale(2.5); transform-origin: 50% 11%; } /* Cockpit-Dashboard */ .cockpit-top { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; } @media (max-width: 900px) { .cockpit-top { grid-template-columns: 1fr; } } .cockpit-avatar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .cockpit-avatar .avatar-svg { width: 150px; max-width: 100%; height: auto; } .cockpit-avatar .fit-mini { margin-top: 0; } /* Cockpit-Nahaufnahme (statt Ganzkörper): Form rund/quadratisch/rechteckig. */ .cp-head { overflow: hidden; background: var(--navy-700); } .cp-head .avatar-svg { width: 100% !important; height: 100% !important; display: block; } .cp-head-round { width: 150px; height: 150px; border-radius: 50%; } .cp-head-square { width: 150px; height: 150px; border-radius: 14px; } .cp-head-rect { width: 150px; height: 188px; border-radius: 14px; } /* Crop-Editor-Hintergrund für gezeichnete Avatare (kein Foto). */ .av-crop-avatar { position: absolute; inset: 0; } .av-crop-avatar .avatar-svg { width: 100%; height: 100%; display: block; } .av-cockpit-pref { margin-top: 12px; } .av-shape-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; } .av-shape-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; } .cockpit-kpis { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .cockpit-kpis { grid-template-columns: repeat(2, 1fr); } } .cockpit-mid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-bottom: 16px; align-items: stretch; } @media (max-width: 900px) { .cockpit-mid { grid-template-columns: 1fr; } } .cockpit-side { display: flex; flex-direction: column; gap: 16px; } /* Charter-Freigabe-Schaltfläche im Cockpit (unter den Statistiken): auffälliger, klickbarer Balken. */ .cp-charters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .cp-charter { display: flex; align-items: center; gap: 14px; cursor: pointer; border-left: 4px solid var(--gold); transition: background .12s, border-color .12s, transform .06s; } .cp-charter:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); } .cp-charter:active { transform: translateY(1px); } .cp-charter-ico { font-size: 26px; line-height: 1; } .cp-charter-txt { flex: 1 1 auto; min-width: 0; } .cp-charter-cta { flex: 0 0 auto; font-weight: 700; color: var(--gold); white-space: nowrap; } @media (max-width: 640px) { .cp-charter-cta { display: none; } } /* Die Live-Karten-Karte füllt ihre (im Grid auf die Seiten-Spalte gestreckte) Höhe: h3 fest, Karte wächst mit, damit unter der Karte kein Leerraum bleibt, wenn die „Aktiven Flüge" den Kasten nach unten vergrößern. */ .cockpit-mid > .card:first-child { display: flex; flex-direction: column; } .cockpit-mid .cockpit-map { flex: 1 1 auto; height: auto; min-height: 320px; } .cockpit-map { height: 320px; } .active-flights { display: flex; flex-direction: column; gap: 8px; } .af-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; } /* Klickbar: Karte zentriert + verfolgt den Flug; die verfolgte Zeile ist golden markiert. */ .af-row[data-flight] { cursor: pointer; transition: border-color .12s, background .12s; } .af-row[data-flight]:hover { border-color: rgba(245, 179, 1, 0.55); } /* Vorgemerkter Sofortstart: beschlossener Flug, aber noch am Boden (Crew reist an) — gestrichelter Rahmen und leicht zurückgenommen, damit er sich von wirklich fliegenden Maschinen unterscheidet. */ .af-row.af-pending { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 7%, var(--navy-700)); cursor: default; } /* Turnaround: anklickbar wie ein fliegender Flug — der Klick springt an den Flugplatz und zeigt die Crew. */ .af-row.af-turnaround[data-turn-lat] { cursor: pointer; transition: border-color .12s, background .12s; } .af-row.af-turnaround[data-turn-lat]:hover { border-color: rgba(245, 179, 1, 0.55); } /* Auto-Überführung nach Umleitung: der Einsatzplan holt eine gestrandete Maschine ab. Eigener Farbton (dasselbe Orange wie die Überführungs-Karte im Offlineflug-Angebot), damit die Zeile nicht mit einem vorgemerkten Plan-Start verwechselt wird. */ .af-row.af-autoferry { border-color: color-mix(in srgb, #ff8a5c 55%, var(--border)); background: color-mix(in srgb, #ff8a5c 8%, var(--navy-700)); } .af-row.af-autoferry .af-ferry-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; } .af-row.af-follow { border-color: #f5b301; background: rgba(245, 179, 1, 0.10); box-shadow: 0 0 0 1px rgba(245, 179, 1, 0.35) inset; } .af-phase { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); } .af-phase.ph-boarding { background: rgba(154,167,199,0.18); color: var(--muted); } .af-phase.ph-preflight { background: rgba(122,162,255,0.18); color: #7aa2ff; border-color: rgba(122,162,255,0.4); } .af-phase.ph-taxi { background: rgba(245,179,1,0.16); color: var(--gold); border-color: rgba(245,179,1,0.4); } .af-phase.ph-air { background: rgba(95,210,154,0.18); color: var(--ok); border-color: rgba(95,210,154,0.4); } .af-phase.ph-landed { background: rgba(200,210,232,0.16); color: var(--silver); } /* Alle Gesichter einer Zeile in EINEM Rasterfeld (mehrköpfige Einsatzplan-Crew: PIC + SIC/Kabine). Ohne diese Klammer rutschte das zweite Gesicht in die Textspalte und der Textblock in eine 30 px schmale Zeile darunter (Nutzerbefund 2026-07-31). Leichte Überlappung — wie gestapelte Profilbilder. */ .af-faces { display: flex; align-items: center; } .af-faces .af-face + .af-face { margin-left: -9px; } .af-face { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--navy-900); border: 1px solid var(--border); } .af-face .avatar-svg { width: 100%; height: auto; transform: scale(2.5); transform-origin: 50% 11%; } /* Echter Nahaufnahme-Crop (buildAvatarSvg mit {head:true}) ist bereits auf den Kopf zugeschnitten — die Legacy-scale(2.5)-Kopfnäherung (für Ganzkörper-Avatare ohne Crop) darf ihn NICHT zusätzlich zoomen, sonst wird der obere Rand der Nahaufnahme abgeschnitten. Gilt für Benutzerkachel + Aktive-Flüge-Liste. */ .user-avatar .avatar-svg.avatar-head, .af-face .avatar-svg.avatar-head { transform: none; width: 100%; height: 100%; } .af-main { display: flex; flex-direction: column; min-width: 0; } .af-main strong { font-size: 14px; } .af-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .af-line1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .af-line1 strong { font-size: 14px; } .af-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; } .af-pilot { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Zusatz am Zeilenende (Anreise-/Abfertigungs-Restzeit): rechtsbündig und EINZEILIG — als normaler Fließtext brach er in der schmalen Cockpit-Spalte über drei Zeilen um. */ .af-line2 .af-sub { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; } .af-eta { font-size: 13px; text-align: right; white-space: nowrap; line-height: 1.3; } /* ===== 10-Sterne-Flugbewertung ===== */ .star-rating { position: relative; display: inline-block; font-size: 26px; line-height: 1; letter-spacing: 2px; } .star-rating .star-bg { color: var(--navy-600); } .star-rating .star-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--gold); } .fr-stars { text-align: center; } .fr-stars .fr-stars-num { font-size: 20px; font-weight: 800; color: var(--gold); margin-top: 6px; } /* Woraus die Sterne bestehen — direkt unter der Zahl, damit die Note nicht unerklärt dasteht. */ .fr-stars .fr-stars-sub { font-size: 11px; margin-top: 4px; line-height: 1.5; } .fr-stars .fr-stars-sub strong { color: var(--gold); } /* Anklickbare Flugzeilen im Cockpit */ .cp-flights .cp-flight-row { cursor: pointer; } .cp-flights .cp-flight-row:hover { background: var(--navy-700); } .cp-star { color: var(--gold); } /* ===== Pilot Logbook ===== */ .lb2-card { padding: 12px; } .lb2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lb2-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; } /* Spalteninhalte stehen MITTIG unter ihrer Überschrift (Nutzervorgabe 2026-07-29) — Ausnahme sind nur die querlaufenden Banner-Zeilen (Meilensteine, Wartungsmarken, Übertrag-/Summenlabel). */ .lb2-table th, .lb2-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; vertical-align: middle; } .lb2-table thead th { position: sticky; top: 0; z-index: 1; } .lb2-grp th { background: var(--navy-700); color: var(--gold); text-align: center; font-size: 12px; border-bottom: 1px solid var(--border); } .lb2-sub th { background: var(--navy-700); color: var(--muted); text-align: center; font-size: 11px; font-weight: 600; } .lb2-cls { min-width: 56px; } .lb2-row { cursor: pointer; } .lb2-row:hover { background: var(--navy-700); } .lb2-date { font-variant-numeric: tabular-nums; } .lb2-acft { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .lb2-acft .lb2-type { font-weight: 700; } .lb2-acft .lb2-reg { font-size: 11px; color: var(--muted); } /* „Von/Nach" und „Start/Landung": beide Zeilen gleich groß, gleich formatiert und NICHT fett (Nutzervorgabe 2026-07-25) — vorher stand die erste Zeile fett und größer über einer kleinen grauen. */ .lb2-ap { font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; } .lb2-block { display: block; font-weight: 400; font-size: inherit; letter-spacing: 0; color: inherit; font-variant-numeric: tabular-nums; margin-top: 2px; } .lb2-time { text-align: center; font-variant-numeric: tabular-nums; } .lb2-num { text-align: center; font-variant-numeric: tabular-nums; } .lb2-pilot { white-space: normal; min-width: 150px; text-align: center; } .lb2-pilot .lb2-person { display: block; line-height: 1.25; } .lb2-pilot .lb2-fi { color: var(--muted); font-size: 12px; } .lb2-act { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .5px; } .lb2-rmk { white-space: normal; max-width: 220px; } .lb2-rmk-input { width: 180px; max-width: 100%; font-size: 12px; padding: 4px 6px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 6px; color: var(--text); } .lb2-rmk-input.error { border-color: var(--danger); } .lb2-total td { font-weight: 800; background: var(--navy-700); border-top: 2px solid var(--gold); border-bottom: none; } /* Übertrag der Vorseiten: bewusst kleiner/zurückhaltender als die Summenzeile — er ist Kontext, kein Ergebnis. */ .lb2-carry td { font-size: 11px; font-weight: 600; padding: 4px 9px; color: var(--muted); background: var(--navy-700); border-bottom: 1px solid var(--gold); } /* Die querlaufenden Label-Zellen (colspan) bleiben linksbündig — sie sind Fließtext, keine Spalte. */ .lb2-carry td:first-child, .lb2-total td:first-child { text-align: left; } .lb2-carry td:first-child { font-style: italic; } /* Ausbildung → Praxis: Fortschrittsbalken zu Solo-Freigabe und Checkflug-Zulassung. */ .ausb-prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .ausb-prog-block { background: var(--navy-800); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .ausb-prog-block.done { border-color: var(--ok); } .ausb-prog-block h4 { margin: 0 0 10px; font-size: 14px; } .ausb-prog-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; } .ausb-prog-lbl { color: var(--muted); } .ausb-prog-row.done .ausb-prog-lbl { color: var(--ok); font-weight: 700; } .ausb-prog-track { height: 7px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .ausb-prog-fill { display: block; height: 100%; background: var(--gold); } .ausb-prog-row.done .ausb-prog-fill { background: var(--ok); } .ausb-prog-val { font-weight: 700; white-space: nowrap; } .ausb-prog-note { margin: 0 0 8px; font-size: 11px; } .ausb-refresh > summary { cursor: pointer; font-weight: 700; } /* Pilotenlogbuch: Meilenstein-Marken (Solo-Freigabe, bestandener Checkflug) quer über die Tabelle. */ .lb2-mile td { font-size: 12px; padding: 6px 9px; white-space: normal; text-align: left; border-left: 3px solid var(--ok); background: rgba(60, 190, 130, 0.12); } .lb2-mile-check td { border-left-color: var(--gold); background: rgba(226, 179, 74, 0.14); } .lb2-mile-tag { font-weight: 800; margin-right: 12px; } .lb2-mile-sub { color: var(--muted); margin-right: 12px; } /* Flugzeug-Logbuch: Wartungs-/Inspektionsmarken laufen als abgesetzte Zeile zwischen den Flügen mit. */ .acl-maint td { background: rgba(122, 162, 255, 0.10); border-left: 3px solid #7aa2ff; font-size: 12px; padding: 6px 9px; white-space: normal; text-align: left; } .acl-maint.acl-insp td { background: rgba(226, 179, 74, 0.12); border-left-color: var(--gold); } .aclm-tag { font-weight: 800; margin-right: 10px; } .acl-maint .aclm-when, .acl-maint .aclm-who, .acl-maint .aclm-h, .acl-maint .aclm-next { margin-right: 12px; color: var(--muted); } .acl-maint .aclm-next { color: var(--gold); font-weight: 700; } /* Übertrag aus dem Vorbesitzer-Logbuch (gebraucht gekauft) — ältester Eintrag, zurückhaltend. */ .acl-prev td { background: rgba(160, 170, 200, 0.10); border-left: 3px solid var(--muted); border-top: 2px solid var(--border); font-size: 12px; padding: 6px 9px; white-space: normal; text-align: left; font-style: italic; } .acl-prev .aclm-when, .acl-prev .aclm-who, .acl-prev .aclm-h { margin-right: 12px; color: var(--muted); } .acl-duebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; } .acl-due-h { font-weight: 800; margin-right: 4px; } .acl-due { font-size: 12px; color: var(--muted); background: var(--navy-800); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .acl-due.warn { border-color: var(--gold); color: var(--gold); } .acl-due.bad { border-color: var(--danger); color: var(--danger); } /* Seitenwahl: Zahlen ABSTEIGEND (neueste Seite links), Seite 1 trägt die ältesten Flüge. */ .lb2-pages .lb2-pagenums { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .lb2-pnum { min-width: 26px; padding: 3px 6px; font-size: 12px; } .lb2-pnum.active { background: var(--gold); color: var(--navy-900); font-weight: 800; } /* ===== Fluglehrer-Mechanik ===== */ /* Rundes Kopf-Portrait */ .av-portrait { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--navy-900); border: 1px solid var(--border); flex: 0 0 auto; } .av-portrait .avatar-head { display: block; } /* Auswahl-Liste der Fluglehrer */ .instr-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; } .instr-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; } .instr-card:hover { border-color: var(--gold); } .instr-card.selected { border-color: var(--gold); background: rgba(245,179,1,0.10); box-shadow: inset 0 0 0 1px var(--gold); } .instr-info { display: flex; flex-direction: column; min-width: 0; } .instr-info strong { font-size: 14px; } .instr-meta { font-size: 12px; color: var(--muted); } .instr-solo-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; flex: 0 0 auto; } .fd-instr-label { display: block; font-weight: 600; margin-top: 8px; } /* Flugdetails: Typ-Badge, Schritt-Anleitung, Bewertungs-Chips */ .fd-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; } .fd-badge { font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); } .fd-badge-training { background: rgba(95, 210, 154, 0.15); border-color: rgba(95, 210, 154, 0.5); color: var(--ok); } .fd-badge-checkride { background: rgba(245, 179, 1, 0.15); border-color: rgba(245, 179, 1, 0.5); color: var(--gold); } .fd-badge-commercial { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); color: #7fb0ff; } .fd-badge-sub { font-size: 12px; color: var(--muted); } .fd-guide ol.fd-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; } .fd-steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; } .fd-steps li::before { content: counter(step); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1a1206; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .fd-crit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .fd-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); color: var(--silver); cursor: default; } /* FAQ-Seite: Suchfeld + Themen-Akkordeons */ .faq-search { width: 100%; max-width: 440px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--navy-900); color: var(--text); font-size: 14px; } .faq-search:focus { outline: none; border-color: var(--gold); } .faq-item { border-top: 1px solid var(--border); } .faq-item:first-of-type { border-top: none; } .faq-item > summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; font-weight: 600; font-size: 15px; color: var(--text); } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::before { content: '▸'; color: var(--gold); flex: 0 0 auto; transition: transform .15s ease; } .faq-item[open] > summary::before { transform: rotate(90deg); } .faq-item[open] > summary { color: var(--gold); } .faq-a { padding: 0 0 14px 24px; color: var(--muted); font-size: 14px; line-height: 1.6; } .faq-a b { color: var(--silver); font-weight: 600; } /* Aufklappbare Themenkategorie (per Default zu) */ .faq-cat { margin-bottom: 12px; } .faq-cat-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .faq-cat-sum::-webkit-details-marker { display: none; } .faq-cat-title { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .faq-cat-title::before { content: '▸'; color: var(--gold); transition: transform .15s ease; display: inline-block; } .faq-cat[open] > .faq-cat-sum .faq-cat-title::before { transform: rotate(90deg); } .faq-cat-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } .faq-cat-body { margin-top: 6px; } /* Interaktive Sterne-Eingabe */ .star-input { display: inline-flex; gap: 2px; } .star-in { background: none; border: none; padding: 0 1px; font-size: 22px; line-height: 1; color: var(--navy-600); cursor: pointer; } .star-in.on { color: var(--gold); } .star-in:hover { color: var(--gold); } /* Bewertungs-/Dossier-Pop-ups */ .dossier-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; } .dossier-fb { background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; } .dossier-rate { display: inline-block; margin-right: 8px; color: var(--gold); font-size: 12px; } .dossier-avg { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 15px; } .dossier-avg .dossier-rate { font-size: 15px; margin-right: 0; } .dossier-details > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; } .dossier-details[open] > summary { color: var(--gold); margin-bottom: 4px; } .asp-grid { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; } .asp-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .asp-row .asp-lbl { font-size: 13px; font-weight: 600; } .asp-row .asp-comment { grid-column: 1/-1; font-size: 12px; padding: 5px 8px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 6px; color: var(--text); } /* ---- Selbsteinschätzung (neugestaltet) ---- */ .sa-scale { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px 12px; margin: 6px 0 12px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 9px; font-size: 11.5px; color: var(--muted); } .sa-scale-item b { color: var(--gold); font-weight: 700; letter-spacing: -1px; } .sa-grid { display: flex; flex-direction: column; gap: 10px; } .sa-aspect { padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(180deg, rgba(127,208,255,.04), rgba(127,208,255,0)); } .sa-aspect-head { display: flex; align-items: flex-start; gap: 11px; } .sa-aspect-ico { font-size: 20px; line-height: 1.1; flex: 0 0 auto; } .sa-aspect-titles { flex: 1 1 auto; min-width: 0; } .sa-aspect-lbl { font-size: 14px; font-weight: 700; color: var(--text); } .sa-aspect-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; } .sa-aspect-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; } .sa-aspect-rate .star-input .star-in { font-size: 25px; } .sa-aspect-rate .sa-note { flex: 1 1 160px; min-width: 120px; font-size: 12px; padding: 6px 9px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 7px; color: var(--text); } .sa-reflect-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } .sa-reflect-lbl { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); } .sa-reflect-ta { width: 100%; box-sizing: border-box; margin-top: 5px; font-size: 12.5px; padding: 8px 10px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 8px; color: var(--text); resize: vertical; font-family: inherit; } .solo-grant { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--gold); background: rgba(245,179,1,0.10); border-radius: 8px; font-size: 13px; } .lic-chips { display: flex; gap: 10px; flex-wrap: wrap; } .lic-chip { padding: 7px 16px; border-radius: 20px; background: var(--navy-700); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; } .lic-chip.earned { background: rgba(245,179,1,0.16); border-color: var(--gold); color: var(--gold); } .tx-neg { color: var(--danger); } .tx-pos { color: var(--ok); } /* Streckennachfrage */ .demand-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .demand-bar label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .demand-bar select { min-width: 220px; } .demand-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); } .demand-legend span { display: flex; align-items: center; gap: 6px; } .dl-line { display: inline-block; width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; } .dl-line.dl-hub { border-top-color: #f5b301; } .dl-line.dl-spoke { border-top-color: #7fd0ff; } /* Verlegung & Transport */ .tf-assign { display: flex; align-items: center; gap: 8px; } .tf-hub { width: auto !important; min-width: 150px; margin-top: 0 !important; } .ac-search { position: relative; min-width: 250px; } .ac-row { display: flex; align-items: center; gap: 8px; } .transport-input { flex: 1; min-width: 150px; } /* IN DER TABELLE darf die Bedienspalte SCHRUMPFEN (Nutzerbefund 2026-07-31: „der Text ragt über die Kastengröße hinaus" — Eingabefeld „Transport zu Flughafen" und der Knopf standen rechts über der Karte). Ursache: `min-width: 250px` bzw. 150px sind MINDESTbreiten; eine Tabellenspalte kann darunter nicht schrumpfen, also wurde die ganze Tabelle breiter als die umgebende Karte und lief rechts heraus. In der Tabelle bricht die Zeile deshalb um (Knopf rutscht unter das Feld) und das Feld darf schmaler werden. KEIN Scroll-Container drumherum: `overflow-x` würde auch vertikal klippen und die absolut positionierte Vorschlagsliste (.ac-suggest) abschneiden. */ td .ac-search { min-width: 0; max-width: 100%; } td .ac-row { flex-wrap: wrap; } td .ac-row .transport-input { flex: 1 1 130px; min-width: 110px; } /* schmal genug, aber noch bedienbar */ td .ac-row button { flex: 0 0 auto; } td .transport-preview { overflow-wrap: anywhere; } td .tf-assign { flex-wrap: wrap; } td .tf-hub { min-width: 110px; max-width: 100%; } .ac-suggest { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 4px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,0.55); } .ac-suggest.open { display: block; } .ac-item { padding: 8px 10px; cursor: pointer; font-size: 13px; } .ac-item:hover { background: var(--navy-600); } .ac-item strong { color: var(--gold); } .ac-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); } .transport-preview { display: block; margin-top: 6px; font-size: 12px; } .transport-preview.ok { color: var(--text); } .transport-preview.ok strong { color: var(--gold); }/* Such-Autocomplete in Karten (Hub erstellen / Flugzeugmuster) */ .hub-search { max-width: 460px; margin-bottom: 12px; } .hub-search .transport-input { width: 100%; } @keyframes rowflash { from { background: rgba(245,179,1,0.32); } to { background: transparent; } } /* Modal (Flugergebnis u. a.) */ .modal-overlay { position: fixed; inset: 0; background: rgba(6, 10, 20, 0.72); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 1000; padding: 20px; } .modal-card { width: 100%; max-width: 420px; background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; } /* Unauffaelliger Scrollbalken fuer lange Pop-ups (z. B. Fluglehrer-Dossier). */ .modal-card::-webkit-scrollbar { width: 9px; } .modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 6px; } .modal-card::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); } .modal-card::-webkit-scrollbar-track { background: transparent; } .modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .modal-head h3 { margin: 0; font-size: 20px; } .modal-head .modal-ico { font-size: 30px; line-height: 1; } .modal-head.ok h3 { color: var(--ok); } .modal-head.warn h3 { color: var(--gold); } .fr-list { display: flex; flex-direction: column; gap: 2px; } .fr-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; } .fr-row:nth-child(odd) { background: rgba(255,255,255,0.03); } .fr-row > span:first-child { color: var(--muted); } .fr-row > span:last-child { text-align: right; } /* Werte rechtsbündig — auch bei mehrzeiligen (z. B. Präzision) */ .fr-row .fr-pos { color: var(--ok); font-weight: 600; } .fr-row .fr-neg { color: var(--danger); } /* Ereignislog (Offlineflug): drei Spalten — Ereignis | Beschreibung | Folgen. FALLE (Nutzerbefund 2026-07-29): `1.4fr` heißt in Wahrheit `minmax(auto, 1.4fr)`, und `auto` als MINIMUM ist die min-content-Breite. Ein langer Text ohne Umbruchstelle zieht die Spalte deshalb über den Container hinaus — im Debriefing-Popup ragte die Folgen-Spalte aus Tabelle UND Fenster heraus. Jede Spur bekommt darum ein Minimum von 0 (bzw. eine kleine feste Untergrenze) und darf umbrechen. */ .ev-row { display: grid; grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.4fr) minmax(90px, 0.8fr); gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; align-items: start; } .ev-row > span { min-width: 0; overflow-wrap: anywhere; } .ev-row:nth-child(even) { background: rgba(255,255,255,0.03); } .ev-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 2px; } .ev-name { font-weight: 600; } .ev-desc { color: var(--muted); } .ev-cons { text-align: right; color: var(--muted); } /* Jede Wirkung eine eigene Zeile — genau so war die Folgen-Spalte gedacht (apEventsHtml zerlegt sie dafür an Kommas/Mittelpunkten). Ohne diese Regel liefen die Teile inline weiter und machten die Spalte breit. */ .ev-cons > span { display: block; } /* Schmale Fenster: die drei Spalten untereinander statt gequetscht nebeneinander. */ @media (max-width: 620px) { .ev-row { grid-template-columns: 1fr; gap: 2px; } .ev-row .ev-cons { text-align: left; } .ev-head { display: none; } } /* Dasselbe im SCHMALEN Behälter: Das Autopilot-Debriefing ist ein normales Fenster (max. 420 px breit) — drei Spalten wären dort auch ohne Überlauf gequetscht. Dort stehen Ereignis, Beschreibung und Folgen deshalb untereinander, mit einer feinen Trennlinie zwischen den Einträgen. */ .ev-narrow .ev-row { grid-template-columns: 1fr; gap: 2px; padding: 7px 8px; } .ev-narrow .ev-cons { text-align: left; } .ev-narrow .ev-head { display: none; } .ev-narrow .ev-row + .ev-row { border-top: 1px solid var(--border); border-radius: 0; } .ev-pos .ev-cons { color: var(--ok); } .ev-neg .ev-cons { color: var(--danger); } /* Flug-Debriefing: Inline-SVG-Telemetriekurven (Höhe/Speed/VS/G/Querlage) mit Hover-Fadenkreuz. */ .dbf-card .kpis { margin: 8px 0 4px; } .dbf-readout { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; margin: 8px 0 6px; min-height: 18px; } .dbf-charts { display: flex; flex-direction: column; gap: 14px; cursor: crosshair; } .dbf-chart-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 3px; } .dbf-chart-head .dbf-unit { color: var(--muted); } .dbf-chart-head .dbf-range { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; } .dbf-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .dbf-svg { width: 100%; height: 120px; display: block; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; } .dbf-svg * { vector-effect: non-scaling-stroke; } .dbf-line { fill: none; stroke-width: 1.6px; } .dbf-base { stroke: var(--muted); stroke-width: 1px; stroke-dasharray: 3 4; opacity: 0.5; } .dbf-ground { fill: rgba(138,160,198,0.12); } .dbf-evt { stroke-width: 1.4px; opacity: 0.85; } .dbf-to { stroke: var(--ok); } .dbf-ld { stroke: var(--danger); } .dbf-cross { stroke: var(--text); stroke-width: 1px; opacity: 0.75; pointer-events: none; } .dbf-timeaxis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .dbf-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 8px; } .dbf-legend i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; } .dbf-legend .ln { width: 16px; border-top: 2px solid; display: inline-block; } .dbf-legend .dbf-sw { width: 14px; height: 10px; border-radius: 2px; background: rgba(138,160,198,0.30); display: inline-block; } .fr-warn { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(245,179,1,0.10); border: 1px solid rgba(245,179,1,0.4); } .fr-warn strong { color: var(--gold); } .fr-warn p { margin: 6px 0 0; } .modal-actions { display: flex; gap: 10px; margin-top: 18px; } .modal-accept, .modal-reject { flex: 1; padding: 11px; border-radius: 9px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); cursor: pointer; } .modal-accept { background: linear-gradient(180deg, #2e9e6b, #23805a); border-color: var(--ok); color: #fff; } .modal-accept:hover { filter: brightness(1.08); } .modal-reject { background: var(--navy-600); color: #ffd7d7; border-color: var(--danger); } .modal-reject:hover { background: #5a1f2a; } .charter-note { background: rgba(127,208,255,0.1); border: 1px solid rgba(127,208,255,0.4); border-radius: 8px; padding: 10px 12px; margin-top: 12px; } .charter-btn { margin-top: 14px; background: linear-gradient(180deg, var(--gold), var(--gold-dim)); color: var(--gold-ink); font-weight: 700; border: none; } .charter-btn:hover { filter: brightness(1.06); } .lk-go { color: var(--gold); font-weight: 600; } .row-gap { display: flex; gap: 10px; flex-wrap: wrap; } .row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } /* Hinweiszeile des Einrichten-Editors: sitzt zwischen Überschrift und Kontostand und darf die beiden nicht verdrängen — sie schrumpft und kürzt notfalls mit „…". flashMsg setzt className neu, die Gestaltung hängt darum an der ID. */ .fur-head { flex-wrap: wrap; } #fur-hint { flex: 1 1 160px; min-width: 0; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .cf-slider { margin: 10px 0; } .cf-slider label { display: block; margin-bottom: 4px; font-size: 13px; } .cf-slider input[type="range"] { width: 100%; } .cf-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #0b1220; vertical-align: middle; margin-right: 2px; } .cf-acct, #cf-acct { margin-top: 6px; } .cf-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .cf-photo { margin: 0 0 12px; } .cf-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--navy-900); } .cf-photo figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; } .cf-plane { display: flex; justify-content: center; background: var(--navy-900); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 6px; } .cf-plane svg { width: 100%; max-width: 560px; height: auto; } /* Optionale Komfort-Ausstattung im Konfigurations-/Umrüstungsmenü */ .eq-root { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--navy-900); padding: 8px 12px; } .eq-root > summary, .eq-cat > summary { cursor: pointer; font-weight: 600; font-size: 13px; list-style: none; padding: 4px 0; } .eq-root > summary::-webkit-details-marker, .eq-cat > summary::-webkit-details-marker { display: none; } .eq-root > summary::before, .eq-cat > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; } .eq-root[open] > summary::before, .eq-cat[open] > summary::before { transform: rotate(90deg); } .eq-cat-count { color: var(--gold); font-weight: 600; font-size: 12px; margin-left: 4px; } .eq-hint { margin: 4px 0 8px 0; } .eq-cat { border-top: 1px solid var(--border); padding: 2px 0; } .eq-cat > summary { font-weight: 500; color: var(--text); } .eq-cat-body { padding: 4px 0 8px 18px; } .eq-item { padding: 6px 0; border-bottom: 1px dashed var(--border); } .eq-item:last-child { border-bottom: none; } .eq-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .eq-name { font-size: 13px; font-weight: 600; } .eq-cost { font-size: 11px; white-space: nowrap; } .eq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .eq-chip { font-size: 12px; padding: 3px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--navy-600); color: var(--muted); cursor: pointer; } .eq-chip:hover { border-color: var(--gold); } .eq-chip.on { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; } .eq-chip.on::before { content: '✓ '; } /* Komfort-Balken je Reiseklasse */ .comfort-box { margin-top: 10px; } .comfort-h { margin: 0 0 6px 0; font-size: 13px; } .entertainment-h { margin-top: 12px; } .comfort-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; } .comfort-lbl { flex: 0 0 130px; font-size: 12px; } .comfort-track { flex: 1; height: 12px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .comfort-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .15s; } .comfort-val { flex: 0 0 88px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; } .danger-text { color: var(--danger); } /* Nur Checkbox + Text sind klickbar — NICHT die ganze Zeile (Nutzervorgabe 2026-07-22): das Label schrumpft auf seinen Inhalt (fit-content), statt die volle Breite einzunehmen. */ .check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; width: fit-content; max-width: 100%; } .check-row input { width: 16px; height: 16px; } .invest-list { margin: 6px 0 0 0; padding-left: 18px; line-height: 1.7; } .section-h { margin: 18px 0 8px 0; } .bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .loan-card .loan-head { font-size: 14px; } .loan-card.taken { border-left: 4px solid var(--ok); } /* Bankkonto: Einnahmen/Ausgaben nebeneinander (light & dark über CSS-Variablen) */ .fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .fin-grid { grid-template-columns: 1fr; } } .fin-col .fin-total { font-size: 22px; font-weight: 700; margin: 4px 0 10px 0; } .fin-col > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .fin-col > summary::-webkit-details-marker { display: none; } .fin-col > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; } .fin-col[open] > summary::before { transform: rotate(90deg); } .fin-col .fin-head { font-weight: 600; font-size: 15px; } /* Zeitraum-Umschalter über den Einnahmen-/Ausgaben-Kästen — eine schmale Chip-Reihe, die umbricht. */ .fin-range { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 10px; } .fin-range-lbl { font-size: 12px; color: var(--muted); margin-right: 4px; } .fin-range-btn { padding: 3px 9px; font-size: 12px; } .fin-range-btn.active { background: var(--gold); color: var(--navy-900); font-weight: 800; } .fin-range-tag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--navy-800); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; } .fin-col .fin-body { margin-top: 8px; } .bank-tabs.sub { margin-bottom: 10px; } .stock-card { margin-bottom: 12px; } .stock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .stock-price { font-variant-numeric: tabular-nums; font-weight: 600; } .stock-svg { width: 100%; height: 110px; display: block; background: var(--navy-900); border: 1px solid var(--border); border-radius: 8px; } .stock-real { margin-top: 2px; } .stock-tf { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px 0; } .tf-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--navy-900); color: var(--muted); cursor: pointer; font-size: 12px; } .tf-btn.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; } .stock-chart { position: relative; margin-top: 8px; } .stock-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gold); display: none; pointer-events: none; } .stock-tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--navy-600); border: 1px solid var(--gold); border-radius: 6px; padding: 4px 8px; font-size: 11px; white-space: nowrap; display: none; pointer-events: none; } /* Aktienliste (Trade-Republic-Stil) */ .stk-search { width: 100%; box-sizing: border-box; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--navy-900); color: var(--text); } .stock-list { display: flex; flex-direction: column; gap: 6px; } .stock-row { display: grid; grid-template-columns: 1fr 120px 130px; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; } .stock-row:hover { border-color: var(--gold); } .sr-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .sr-name-txt { display: flex; flex-direction: column; min-width: 0; } .sr-name-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-name .muted-note { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dist-badge { flex: 0 0 auto; display: inline-block; width: auto; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 6px; border-radius: 999px; line-height: 1.5; } .dist-badge.b-acc { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .dist-badge.b-dist { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); } .stock-etf-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .stock-etf-meta b { color: var(--text); font-weight: 600; } .etf-info { margin: 8px 0 12px; padding: 12px 14px; } .etf-info > summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; } .etf-info > summary::-webkit-details-marker { display: none; } .etf-info > summary::before { content: '▸ '; color: var(--muted); } .etf-info[open] > summary::before { content: '▾ '; } .etf-info p { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .etf-info b { color: var(--text); } .etf-info ul { margin: 6px 0 2px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; } .etf-info li { color: var(--muted); font-size: 13px; line-height: 1.4; } .etf-info .dist-badge { margin-right: 4px; } /* Sparen & Festgeld */ .sv-acct { margin-bottom: 10px; } .sv-acct-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .sv-acct-val { font-size: 22px; font-weight: 700; color: var(--gold); margin: 4px 0; } .sv-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .sv-actions button { flex: 0 0 auto; } .sv-acct .link-like { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 6px 0 0; font-size: 12px; cursor: pointer; } .sv-acct-msg:empty { display: none; } .sv-cond { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 14px; } .sv-proscons { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 4px; } .sv-pros, .sv-cons { list-style: none; padding: 0; margin: 0; font-size: 13px; display: flex; flex-direction: column; gap: 3px; } .sv-pros li::before { content: '✔ '; color: var(--ok); } .sv-cons li::before { content: '✘ '; color: var(--danger); } .sv-pros li, .sv-cons li { color: var(--muted); } .sv-kind-toggle { display: flex; gap: 8px; margin: 10px 0; } .sv-kind { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--navy-700); color: var(--text); cursor: pointer; } .sv-kind.active { border-color: var(--gold); color: var(--gold); font-weight: 600; } /* Airwork-Übungsauswahl im Fluglehrer-Pop-up */ .airwork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .airwork-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; } .airwork-opt span:first-of-type { flex: 1; } .airwork-opt input { flex: 0 0 auto; } .airwork-crit { flex: 1 1 100%; font-size: 11px; color: var(--muted, #8aa0b3); } /* Instruktor-Briefing: „Worauf achten" / Checkflug-Prüfungspunkte. */ .brief-list { margin: 6px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .brief-list li { line-height: 1.35; } /* Checkflug-Syllabus (Schüler-Detail) + Live-Prüfungs-Checkliste (Fluglehrer). */ .syllabus-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .syllabus-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; } .syllabus-list li.done { opacity: 0.85; } .syllabus-list .syl-mark { flex: 0 0 auto; } .sv-cr-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.35; cursor: pointer; } .sv-cr-row.done { background: rgba(95,210,154,.1); border-color: rgba(95,210,154,.4); } .sv-cr-row input { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; cursor: pointer; } @media (max-width: 560px) { .airwork-grid { grid-template-columns: 1fr; } } /* Cockpit-Kennzahlen anklickbar (Aufschlüsselung öffnen) */ .phs.phs-link { cursor: pointer; border-radius: 8px; transition: background 0.12s; padding: 2px 6px; margin: -2px -6px; } .phs.phs-link:hover { background: rgba(245,179,1,0.10); } .phs.phs-link:hover .phs-val { color: var(--gold); } /* Reputations-/Bewertungs-Aufschlüsselung */ .rep-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .rep-hero-side { flex: 1 1 280px; min-width: 240px; } .rep-hero-side p { margin: 0 0 8px; } .rep-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .rep-stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--navy-900); border: 1px solid var(--border); } .rep-stack span { display: block; height: 100%; } .rep-stack-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); } .rep-stack-legend span { display: inline-flex; align-items: center; gap: 6px; } .rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .rep-comp { margin: 0; } .rep-comp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rep-comp-top strong { flex: 1; } .rep-weight { font-size: 11px; color: var(--muted); background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } .rep-comp-bar { height: 10px; border-radius: 999px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; } .rep-comp-bar span { display: block; height: 100%; border-radius: 999px; } .rep-comp-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 6px 0; flex-wrap: wrap; } /* Teilsäulen einer Reputations-Komponente (z. B. Betriebsqualität: Pünktlichkeit/Sicherheit/Wartung) */ .rep-sub { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; } /* Kein starres 3-Spalten-Raster mehr: In der schmalen Ruf-Karte schrumpfte die letzte Spalte gegen 0 und `overflow-wrap: anywhere` brach „50 % · 12 Flüge" in EINZELNE BUCHSTABEN je Zeile. Jetzt fließen die drei Teile und brechen nur an Leerzeichen — Beschriftung und Prozentwert bleiben je auf einer Zeile. */ .rep-sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; } .rep-sub-lbl { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; min-width: 0; white-space: nowrap; } .rep-sub-bar { height: 7px; flex: 1 1 70px; min-width: 60px; } .rep-sub-val { flex: 0 1 auto; margin-left: auto; text-align: right; color: var(--muted); min-width: 0; } .rep-sub-val strong { white-space: nowrap; } .rep-sub-row.rep-comp-unproven { opacity: 0.55; } .rep-flights { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 6px; overflow-x: auto; } .rep-flight { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 22px; height: 100%; } .rep-flight-bar { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; background: var(--navy-900); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .rep-flight-bar span { display: block; width: 100%; border-radius: 5px 5px 0 0; transition: height 0.3s; } .rep-flight-lbl { font-size: 10px; color: var(--muted); } .pay-scale { margin: 10px 0; } .pay-scale-bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--danger), var(--gold), var(--ok)); } .pay-scale-bar i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--navy-800); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,0.5); } .pay-scale-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; } /* Flugnoten-Aufschlüsselung (Flugdetail) */ .sp-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } /* Jede sp-Zeile ist ein EIGENES Grid — mit `minmax(120px, …)` und `auto` richteten sich die Spalten deshalb nach dem Inhalt der jeweiligen Zeile aus, und die Balken von „Pünktlichkeit"/„Regeltreue" begannen sichtbar versetzt zu denen von „Landung"/„Sanftheit". `minmax(0, …)` nimmt der Spalte das inhaltsabhängige Minimum, die feste Zahlenspalte den variablen Rand rechts: alle Balken fluchten. */ .sp-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 2fr 52px; align-items: center; gap: 12px; font-size: 13px; } .sp-row > :first-child { min-width: 0; overflow-wrap: anywhere; } .sp-row > strong { text-align: right; font-variant-numeric: tabular-nums; } .sp-bar { height: 9px; border-radius: 999px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; } .sp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--ok)); } @media (max-width: 560px) { .sp-row { grid-template-columns: minmax(0, 1fr) 52px; } .sp-row .sp-bar { grid-column: 1 / -1; } } /* Detailebene eines Notenfaktors (Landung/Anflug/Konfiguration): das Urteil in Klartext, darunter die Kriterien im Ampel-Raster. Bündig unter dem Faktor eingerückt — dieselbe Kante wie sp-landing-detail. */ .sp-detail { margin: -3px 0 8px 8px; padding-left: 10px; border-left: 2px solid var(--border, #2a3550); } .sp-detail-head { font-size: 12px; margin-bottom: 5px; } .sp-detail-head b { color: var(--gold); } .sp-detail .ap-row { grid-template-columns: 12px 132px 1fr 62px auto; } .ap-notes-list { display: flex; flex-direction: column; gap: 2px; } .ap-note { font-size: 12px; line-height: 1.5; } @media (max-width: 720px) { .sp-detail .ap-row { grid-template-columns: 12px 1fr 62px; } } .rep-explain-card > summary { cursor: pointer; font-weight: 600; } .rep-explain { margin-top: 10px; line-height: 1.6; } .rep-explain ul { padding-left: 20px; } .rep-explain li { margin: 5px 0; } /* Kerosin-Kurschart (Sachwerte & Spezial) */ .fuel-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; flex-wrap: wrap; } .fuel-price { font-size: 22px; font-weight: 700; color: var(--gold); } .fuel-chart-foot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; } /* Pilotenkredite (Airline-Investitionen) */ .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .pl-card { margin: 0; } .pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pl-who { display: flex; align-items: center; gap: 11px; min-width: 0; } .pl-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-600); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--gold); } .pl-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .pl-badge.pl-active { background: rgba(95,210,154,0.14); color: var(--ok); border-color: rgba(95,210,154,0.4); } .pl-badge.pl-wait { background: rgba(245,179,1,0.14); color: var(--gold); border-color: rgba(245,179,1,0.4); } .pl-badge.pl-done { background: var(--navy-600); color: var(--silver-dim); } .pl-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; } .pl-fig { background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .pl-fig-v { font-size: 15px; font-weight: 700; } .pl-fig-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; } .pl-prog-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .pl-bar { height: 9px; border-radius: 999px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; margin-bottom: 6px; } .pl-bar span { display: block; height: 100%; border-radius: 999px; transition: width 0.3s; } .pl-next { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; } /* Aktien-Handelspanel: Modus-Umschalter (€-Betrag / Stückzahl), Schnellwahl, Stück-Verkauf */ /* Handels-Panel: eigene, spezifischere Layout-Regeln (das globale .sv-actions weiter unten macht sonst eine volle Spalte → übermäßig breites Eingabefeld). Kompakte Zeile: Eingabefeld gedeckelt + Knopf daneben. */ .trade-panel .sv-actions { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .trade-panel .sv-actions input[type="number"] { flex: 0 1 200px; max-width: 220px; min-width: 120px; padding: 9px 12px; border-radius: 9px; font-size: 15px; text-align: right; } .trade-panel .sv-actions button { flex: 0 0 auto; } .trade-modes { display: inline-flex; gap: 4px; margin: 6px 0 12px; padding: 3px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 999px; } .trade-mode { padding: 6px 16px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; } .trade-mode:hover { background: var(--navy-700); color: var(--text); } .trade-mode.active { background: var(--gold); color: var(--gold-ink); } .trade-quick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .trade-qadd { padding: 4px 11px; font-size: 13px; background: var(--navy-700); color: var(--text); border: 1px solid var(--border); border-radius: 999px; } .trade-qadd:hover { border-color: var(--gold); color: var(--gold); background: var(--navy-700); } .trade-sell-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .trade-sell-box .sv-actions input[type="number"] { flex: 1 1 90px; min-width: 80px; } /* ===== Sparen & Festgeld — Neugestaltung (Konto-Karten) ===== */ .sv2-kpis { margin-bottom: 16px; } .sv2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; } .sv2-acct { display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--border); } .sv2-acct.tg { border-top-color: #5fd29a; } .sv2-acct.fg { border-top-color: #7aa2ff; } .sv2-primary { border-top-color: var(--gold); outline: 1px solid rgba(245,179,1,0.35); } .sv2-acct-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .sv2-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); color: var(--muted); } .sv2-badge.tg { color: #5fd29a; } .sv2-badge.fg { color: #7aa2ff; } .sv2-badge.primary { color: var(--gold); background: rgba(245,179,1,0.14); border-color: var(--gold); } .sv2-bank { font-weight: 600; } .sv2-bal { font-size: 22px; font-weight: 800; } .sv2-bal.gold { color: var(--gold); } .sv2-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .sv2-mat { margin-top: 8px; } .sv2-matbar { height: 8px; border-radius: 6px; background: var(--navy-700); border: 1px solid var(--border); overflow: hidden; margin-bottom: 4px; } .sv2-matbar span { display: block; height: 100%; background: #7aa2ff; border-radius: 6px 0 0 6px; } .sv2-open { margin-top: 10px; } /* ===== Bankkonto — einheitliche KPI-Bänder & Kategoriebalken ===== */ /* Bankkonto-Kennzahlenreihe: breitere Mindestkacheln, damit die 6 Kacheln bei der Mindestgröße des Appfensters in ZWEI Reihen umbrechen (Saldo rutscht in Reihe 2) und bei weitem Fenster in einer Reihe stehen (Nutzervorgabe 2026-07-23). */ .bk-kpis { margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } /* Bankkonto-Kacheln + Einnahmen/Ausgaben-Kopfzeilen zentriert (Nutzer-Vorgabe 2026-07-23). */ .bk-kpis .kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .bk-kpis .kpi .label { text-align: center; } .fin-income > summary, .fin-expense > summary { justify-content: center; } .bk-finrow { padding: 7px 0; } .bk-finrow-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .bk-finbar { height: 6px; border-radius: 4px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; margin-top: 4px; } .bk-finbar span { display: block; height: 100%; border-radius: 4px; } .bk-finbar .pos { background: var(--ok); } .bk-finbar .neg { background: var(--danger); } /* ===== Portfolio — Donut-Kreisdiagramm der Depotaufteilung ===== */ .pf-chart-card { margin-bottom: 16px; } .pf-chart { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .pf-donut { width: 168px; height: 168px; flex: 0 0 auto; } .pf-donut circle { transition: stroke-width .15s ease; } .pf-donut circle:hover { stroke-width: 25; } .pf-donut-top { fill: var(--gold, #f5b301); font-size: 17px; font-weight: 700; } .pf-donut-sub { fill: var(--muted, #9fb0c8); font-size: 11px; } .pf-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 8px; } .pf-legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; } .pf-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .pf-leg-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-leg-amt { color: var(--muted); white-space: nowrap; font-size: 13px; } .pf-leg-pct { font-weight: 600; color: var(--text); min-width: 38px; text-align: right; } @media (max-width: 420px) { .pf-chart { justify-content: center; } } /* Wiederkehrende Ausgaben */ .fin-recurring { margin-top: 12px; } .fin-recurring > summary { cursor: pointer; } .rec-group { margin-top: 8px; } .rec-rhythm { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 6px 0 2px; } /* Erste-Tagesgeld-CTA */ .cta-card { border: 1px solid var(--gold); margin-bottom: 12px; } .cta-card strong { display: block; margin-bottom: 4px; } /* Staatsanleihen */ .bond-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--navy-700); margin-bottom: 8px; } .bond-flag { flex: 0 0 auto; display: inline-flex; } .flagimg { width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); display: inline-block; vertical-align: middle; } .bond-name .flagimg { margin-right: 7px; } .bond-row .sr-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .bond-row .sr-price { text-align: right; font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; } .bond-row .sr-chg { font-weight: 400; } .bond-terms { flex-wrap: wrap; } .bond-term { flex: 1 1 auto; min-width: 80px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--navy-700); color: var(--text); cursor: pointer; } .bond-term.active { border-color: var(--gold); color: var(--gold); font-weight: 600; } .bond-hold { margin-bottom: 8px; } #bond-country { width: 100%; } .diff-tile.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } /* Wohnort-Suche */ .home-suggest { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 220px; overflow-y: auto; } .home-sug-item { text-align: left; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; } .home-sug-item:hover { border-color: var(--gold); } /* Karten-Standortwahl (Wohnort-Widget + Zuhause-Markt): kompakte Leaflet-Karte mit klickbarem Marker. */ .loc-pick-map { height: 280px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: crosshair; } .diff-tile .muted-note { margin-top: 6px; } .stock-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 22%; overflow: hidden; display: inline-flex; } .stock-ico svg { width: 100%; height: 100%; display: block; } .stock-head-name { display: flex; align-items: center; gap: 10px; } /* „Beliebt" — 2 Reihen à 5 */ .market-section-static { margin: 16px 0 8px 0; } .popular-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 8px; } .popular-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: center; } .popular-card:hover { border-color: var(--gold); } .popular-card .stock-ico { width: 34px; height: 34px; font-size: 13px; } .pc-name { font-size: 11px; font-weight: 600; line-height: 1.15; } .pc-chg { font-size: 11px; } @media (max-width: 640px) { .popular-grid { grid-template-columns: repeat(3, 1fr); } } .sr-spark .stock-svg { height: 36px; border: none; background: transparent; } .sr-price { text-align: right; font-variant-numeric: tabular-nums; } .sr-chg { display: block; font-size: 12px; } .stock-chart.big .stock-svg { height: 200px; } .stock-row.compact { grid-template-columns: 1fr 130px; } @media (max-width: 560px) { .stock-row { grid-template-columns: 1fr 80px; } .sr-spark { display: none; } } /* Portfolio-Kopf */ .pf-head .pf-value { font-size: 30px; font-weight: 700; margin: 2px 0; } /* Aktienmarkt: anklickbare Abschnitte + Filter */ .market-section { cursor: pointer; margin: 16px 0 8px 0; } .market-section:hover { color: var(--gold); } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .filter-chip { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--navy-900); color: var(--text); cursor: pointer; font-size: 13px; } .filter-chip.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; } .filter-clear { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--navy-600); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; font-size: 15px; } /* Filter-Bottom-Sheet (von unten, Hintergrund bleibt sichtbar) */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; } .filter-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 70vh; overflow-y: auto; background: var(--navy-700, var(--navy-600)); border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; padding: 14px 16px 20px; box-shadow: 0 -8px 24px rgba(0,0,0,.4); animation: sheetUp .2s ease-out; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .sheet-close { background: var(--gold); color: #1a1a1a; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-weight: 600; } .sheet-opts { display: flex; flex-wrap: wrap; gap: 8px; } .sheet-opt { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--navy-900); color: var(--text); cursor: pointer; font-size: 13px; } .sheet-opt.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; } .sheet-opt.active::before { content: '✓ '; } .fin-income { border-top: 3px solid var(--ok); } .fin-expense { border-top: 3px solid var(--danger); } .fin-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .fin-row:last-child { border-bottom: none; } .ok-text { color: var(--ok); } /* Slider-Label + Kredit-Vorschau */ .slider-label { display: block; margin: 12px 0 4px 0; font-size: 13px; } .slider-label input[type="range"] { width: 100%; margin-top: 6px; } .loan-quote { font-size: 13px; margin: 6px 0; min-height: 18px; } /* Banken: Reiter + Angebote */ .bank-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .bank-tab { padding: 8px 16px; border-radius: 8px 8px 0 0; border: 1px solid var(--border); background: var(--navy-900); color: var(--muted); cursor: pointer; font-size: 14px; } .bank-tab.active { background: var(--navy-600); color: var(--text); border-bottom-color: var(--navy-600); font-weight: 600; } .bank-tab-head { margin-bottom: 12px; } .bank-offer .offer-head { display: flex; align-items: baseline; gap: 8px; } .bank-offer .offer-amt { font-size: 22px; font-weight: 700; } .danger-btn { background: var(--danger); color: #fff; border: none; } .danger-btn:hover { filter: brightness(1.1); } /* Auto-Update-Hinweisleiste (unten rechts) */ .update-bar { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: var(--navy-600); border: 1px solid var(--gold); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; align-items: center; gap: 10px; } .efb-bar { bottom: 70px; border-color: var(--accent, #4ea1ff); } /* Client-Version: steht seit 2026-07-20 unten rechts IM Kopfkasten des Benutzerkontos statt dauerhaft unten links über der Oberfläche. */ /* Überschrift und rechte Randangabe (Client-Version) in EINER Zeile — die Version bekommt so keine eigene Zeile mehr und sitzt auf Höhe des Titels statt unten in der Ecke. */ .page-head-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } /* Kleines Werkzeug oben rechts im Kopfkasten (z. B. die Feierabend-Heimfahrt-Grenze). */ .page-head-tool { position: absolute; right: 22px; top: 18px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .page-head-tool select { font-size: 12px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--navy-900); color: var(--text); } @media (max-width: 700px) { .page-head-tool { position: static; margin-top: 10px; justify-content: flex-start; } } .page-head-version { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; user-select: text; white-space: nowrap; } /* Ausstattungs-Zustand & Wartung */ .eqm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .eqm-row { display: flex; align-items: center; gap: 10px; } .eqm-name { flex: 1 1 auto; font-size: 13px; } .eqm-row .cond-track { flex: 0 0 120px; } .eqm-val { flex: 0 0 44px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; } .eq-cond-mini { font-size: 11px; margin-top: 3px; text-align: center; } .cfg-sum-row { padding: 2px 0; } .table-scroll { overflow-x: auto; } .fd-left { display: flex; flex-direction: column; gap: 16px; } .cf-seat { cursor: pointer; } .cf-seat:hover { stroke: #ff6b6b; stroke-width: 2; } rect.seat-hl { stroke: #ff6b6b; stroke-width: 2.6; } tr.pax-hl { outline: 2px solid var(--gold); background: var(--navy-600); } .info-table { width: 100%; border-collapse: collapse; font-size: 13px; } .info-table td { padding: 5px 4px; border-bottom: 1px solid var(--border); } .info-table td:last-child { text-align: right; font-weight: 600; } /* Varianten-Auswahl im Kaufmenü: Vergleichstabelle + Hervorhebung der gewählten Baureihe. */ .info-table th { padding: 5px 4px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 600; color: var(--muted); } .info-table th:last-child { text-align: right; } .cf-variant-info { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .cf-variant-info summary { cursor: pointer; font-weight: 600; } .cf-variant-info tr.cfv-cur td { background: rgba(245, 179, 1, 0.08); } .cf-variant-info tr.cfv-cur td:first-child { box-shadow: inset 3px 0 0 var(--gold); } /* Livery-Box rechts neben dem Sitzplan (Kauf/Umrüstung): Dropdown + großes Symbol darunter. */ .cf-plane-row { display: flex; gap: 14px; align-items: stretch; } .cf-plane-row .cf-plane { flex: 1; min-width: 0; } .cf-livery-box { width: 176px; flex: none; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px; } .cf-livery-box label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; } .cf-livery-box select { max-width: 118px; } .cf-livery-box img { width: 132px; height: 132px; object-fit: contain; } /* Flugplatz-Punkte der Hub-Karte (zoomabhängig): groß = kräftig, klein = dezent. */ .apt-dot { border-radius: 50%; border: 1px solid #0b1220; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } .apt-large { background: #f5b301; } .apt-medium { background: #6fb0c9; } .apt-small { background: #7a8699; opacity: 0.85; } /* Untergruppen-Kopfzeile (ceo/neo bzw. Passagier/Frachter) in der Vergleichstabelle. */ .cf-variant-info tr.cfv-group td { padding-top: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } /* Strecken-Filtersystem: sauber sortiertes Filterpanel (Suche + Feld-Raster mit beschrifteten Feldern). */ .route-filters { background: var(--navy-900); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .route-filters .rf-row { display: flex; gap: 10px; align-items: center; } .route-filters .rf-search-row { margin-bottom: 12px; } .route-filters .rf-input { flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 9px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); font-size: 14px; } /* Schmaleres Suchfeld, damit Hersteller/Kategorie/Sortieren in EINE Reihe passen (Nutzervorgabe 2026-07-23). */ .route-filters .rf-input.rf-input-slim { flex: 1 1 180px; min-width: 130px; } .route-filters .rf-reset { flex: 0 0 auto; } .route-filters .rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; } .route-filters .rf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .route-filters .rf-field > span { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); } .route-filters .rf-field select, .route-filters .rf-field input { padding: 8px 10px; border-radius: 8px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); font-size: 13px; width: 100%; } .route-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .route-tab { padding: 8px 16px; background: var(--navy-600); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; } .route-tab:hover { color: var(--text); } .route-tab.active { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); } .spare-svg { display: block; } .spare-emoji { display: inline-block; text-align: center; } /* Teile-Shop. */ .spare-shop-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .spare-sysfilter { display: inline-flex; gap: 6px; flex-wrap: wrap; } .spare-sysbtn { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--navy-700); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; } .spare-sysbtn:hover { color: var(--text); } .spare-sysbtn.active { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); } .spare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; } .spare-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--navy-800); border: 1px solid var(--border); border-top: 4px solid var(--sys, var(--border)); } .spare-card-img { align-self: center; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sys, #888) 12%, transparent); border-radius: 14px; } .spare-card-name { font-weight: 700; font-size: 14px; text-align: center; } .spare-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .spare-badge { background: color-mix(in srgb, var(--sys, #888) 22%, transparent); color: var(--text); border-radius: 999px; padding: 2px 9px; font-weight: 600; } .spare-card-buy { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); } .spare-card-buy > strong { color: var(--gold); } .spare-buyrow { display: inline-flex; gap: 6px; align-items: center; } .spare-qty { width: 48px; padding: 6px 6px; border-radius: 7px; background: var(--navy-700); border: 1px solid var(--border); color: var(--text); text-align: center; } .weight-panel { margin-top: 14px; padding: 12px; background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; } .weight-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 8px 0 6px; } .weight-fill { height: 100%; border-radius: 6px; transition: width .2s ease; } .weight-table { width: 100%; border-collapse: collapse; font-size: 13px; } .weight-table td { padding: 3px 0; } .weight-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .weight-table .weight-sum td { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 700; } .weight-table .wt-sub { color: var(--muted); padding-left: 14px; font-size: 12px; } .wt-over { color: var(--danger); font-weight: 700; } .simbrief-panel { border-color: var(--gold); } /* Treibstoff-Regelverstoß-Warnung (aktiver Flug + Auswertung) */ .fuel-warn-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #ffd9d9; background: rgba(255,107,107,0.16); border: 1px solid var(--danger); } /* Charter-Rückflug: Sim-/Offline-Wahl im Popup. */ .charter-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } /* Verschleißteile-Fällig-Karte (Werkstätten). */ .ws-wearcard { margin-top: 14px; } .ws-wear-ac { padding: 8px 0; border-top: 1px solid var(--border); } .ws-wear-ac:first-of-type { border-top: 0; } .ws-wear-reg { font-weight: 600; margin-bottom: 4px; } .ws-wear-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; flex-wrap: wrap; } .ws-wear-lbl { flex: 0 0 190px; } .ws-wear-bar { flex: 1 1 90px; height: 7px; border-radius: 4px; background: var(--navy-900); overflow: hidden; min-width: 80px; } .ws-wear-bar > span { display: block; height: 100%; background: var(--gold); } .ws-wear-over .ws-wear-bar > span { background: var(--danger); } .ws-wear-pct { flex: 0 0 78px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } .ws-wear-over .ws-wear-pct { color: var(--danger); font-weight: 600; } /* Aktiver Flug: Treibstoff + Zuladung nebeneinander in EINEM Kästchen (bricht bei schmalem Fenster um). */ .load-cols { display: flex; flex-wrap: wrap; gap: 8px 20px; } .load-col { flex: 1 1 220px; min-width: 0; } .load-col h4 { margin: 0 0 6px; font-size: 15px; } .load-col + .load-col { border-left: 1px solid var(--border); padding-left: 20px; } @media (max-width: 560px) { .load-col + .load-col { border-left: 0; padding-left: 0; } } /* Treibstoff-Auswahl (Training/Checkflug): Tank-Füllstand + Slider */ /* Schalter „Treibstoff und Zuladung schreiben" in den Flugdetails — nur bei Narrow-/Wide-body sichtbar. */ .fd-inject { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .fd-inject input { margin-top: 3px; flex: 0 0 auto; } .fd-inject > span { display: block; } .fd-inject .muted-note { display: block; margin-top: 3px; } .fd-fuel-sel { margin-top: 14px; padding: 12px 14px; background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; } .fd-fuel-sel #fd-fuel-read { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; } .fuel-gauge { height: 14px; border-radius: 7px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 9px 0 8px; border: 1px solid var(--border); } .fuel-gauge-fill { height: 100%; background: linear-gradient(90deg, #5fd29a, #f5b301); transition: width 0.05s linear; } /* Reserve: die Tankuhr wird rot, damit der leere Tank auffaellt, bevor er die Fahrt verlaengert. */ .fuel-gauge-fill.low { background: linear-gradient(90deg, #d9534f, #f0894a); } .fd-fuel-sel input[type=range] { width: 100%; accent-color: var(--gold); } .fn-input { display: flex; align-items: stretch; margin-top: 6px; } .fn-input .fn-prefix { display: flex; align-items: center; padding: 0 10px; background: var(--navy-600); border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; color: var(--gold); font-weight: 700; } .fn-input input { border-radius: 0 8px 8px 0; flex: 1; } .cr-profile { width: 100%; height: 90px; background: var(--navy-900); border: 1px solid var(--border); border-radius: 8px; margin: 4px 0 12px; } .adminshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .adminshop-card { background: var(--navy-700); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; } .adminshop-role { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); width: 100%; } .adminshop-role select { font-size: 12px; } .adminshop-name { font-size: 13px; font-weight: 600; } .adminshop-price { display: flex; align-items: stretch; width: 100%; } .adminshop-price .fn-prefix { display: flex; align-items: center; padding: 0 8px; background: var(--navy-600); border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; color: var(--gold); font-weight: 700; } .adminshop-price input { border-radius: 0 8px 8px 0; flex: 1; min-width: 0; } .pax-details > summary { cursor: pointer; padding: 6px 0; } .pax-details[open] > summary { margin-bottom: 8px; } /* Aufklappbare Theorie-Lizenzabschnitte */ .theory-lic > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; padding: 2px 0; } .theory-lic > summary::-webkit-details-marker { display: none; } .theory-lic > summary::before { content: '▸'; color: var(--gold); transition: transform 0.15s; } .theory-lic[open] > summary::before { transform: rotate(90deg); } .theory-lic .theory-lic-title { font-weight: 700; font-size: 1.05rem; flex: 1; } .theory-lic-body { margin-top: 12px; } /* Admin: aufklappbare Theorie-Themen + Frage-Editor */ .theory-admin-cat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; } .theory-admin-cat > summary { cursor: pointer; font-weight: 600; list-style: none; } .theory-admin-cat > summary::-webkit-details-marker { display: none; } .theory-admin-cat > summary::before { content: '▸'; color: var(--gold); margin-right: 8px; } .theory-admin-cat[open] > summary::before { content: '▾'; } .theory-admin-cat-body { margin-top: 10px; } .theory-q-item { border-top: 1px solid var(--border); padding: 6px 0; } .theory-q-item > summary { cursor: pointer; font-size: 13px; } .theory-q-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .theory-q-edit label { display: flex; flex-direction: column; font-size: 12px; gap: 3px; } .theory-q-edit .row-gap { grid-column: 1/-1; display: flex; gap: 8px; } /* METAR-Wetterbox (Start/Ziel) */ .metar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .metar-grid { grid-template-columns: 1fr; } } .metar-col { background: var(--navy-600); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .metar-head { font-weight: 600; margin-bottom: 8px; } .metar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .metar-chip { background: var(--navy-700); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 12px; } .metar-raw { margin-top: 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--muted); word-break: break-word; } /* Aufklappbare „Kosten / Flugstunde"-Transaktionszeile */ tr.tx-hourly { cursor: pointer; } tr.tx-hourly:hover { background: var(--navy-700); } .tx-caret { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--gold); border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-right: 7px; vertical-align: middle; transition: transform 0.15s; } tr.tx-hourly.open .tx-caret { transform: rotate(90deg); } .tx-detail-box { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 4px; } .tx-detail-row { display: grid; grid-template-columns: 1.6fr 1fr 0.6fr; gap: 10px; font-size: 13px; } .pax-table { width: 100%; } .pax-table th { font-size: 12px; } .pax-table td { font-size: 13px; } .pax-purpose { font-size: 12px; color: var(--muted, #94a3b8); white-space: nowrap; } .pax-itin { white-space: nowrap; } .pax-arrow { color: var(--accent, #38bdf8); font-weight: 700; padding: 0 2px; } .pax-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .pax-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--navy-600, rgba(148,163,184,0.14)); color: var(--muted, #94a3b8); white-space: nowrap; } .pax-badge.pax-loyal { background: rgba(245,179,1,0.16); color: #f5b301; } /* Investitionen — „Anlage kaufen" (Sachwerte): Karten-Auswahl + Projektion */ .aia-budget { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } .aia-budget strong { font-size:1.15rem; color:var(--gold); } .aia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; } .aia-card { text-align:left; background:var(--panel,#0e1c38); border:1.5px solid rgba(255,255,255,.10); border-radius:12px; padding:10px 11px; cursor:pointer; transition:border-color .15s, transform .1s, box-shadow .15s; color:inherit; } .aia-card:hover { border-color:rgba(127,208,255,.55); transform:translateY(-1px); } .aia-card.sel { border-color:var(--gold,#f5b301); box-shadow:0 0 0 1px var(--gold,#f5b301) inset; } .aia-card-top { display:flex; align-items:center; gap:7px; } .aia-card-top .aia-ic { font-size:1.25rem; } .aia-card-top .aia-nm { font-weight:600; flex:1; line-height:1.15; } .aia-risk { font-size:.68rem; padding:2px 7px; border-radius:999px; color:var(--rc,#8aa0c6); background:color-mix(in srgb, var(--rc,#8aa0c6) 18%, transparent); border:1px solid color-mix(in srgb, var(--rc,#8aa0c6) 45%, transparent); white-space:nowrap; } .aia-fc { margin:7px 0 5px; } .aia-metarow { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; gap:8px; } .aia-volwrap { display:flex; align-items:center; gap:5px; color:var(--muted,#8aa0c6); } .aia-vol { display:inline-block; width:46px; height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .aia-vol span { display:block; height:100%; } .aia-blurb { margin-top:6px; font-size:.74rem; line-height:1.25; } .aia-buybox { margin-top:12px; } .aia-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .aia-chip { padding:4px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); cursor:pointer; font-size:.8rem; } .aia-chip:hover { border-color:var(--gold,#f5b301); } .aia-proj { background:rgba(127,208,255,.06); border:1px solid rgba(127,208,255,.18); border-radius:10px; padding:10px 12px; margin:8px 0; } .aia-proj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .aia-proj-l { font-size:.72rem; color:var(--muted,#8aa0c6); } .aia-proj-v { font-weight:600; font-size:1.02rem; } tr.pax-noshow { opacity: 0.5; } tr.pax-removed { opacity: 0.6; text-decoration: line-through; background: rgba(255,107,107,.10); } tr.pax-removed td:first-child { text-decoration: none; } .ev-tag.ev-bad { background: rgba(255,107,107,.18); color: #ff6b6b; } /* Passagierzufriedenheit im Flugbericht */ .fr-pax-pn { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; } .fr-voices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .fr-voice { font-style: italic; font-size: 13px; } .inbox-item .review-text { font-style: italic; margin: 4px 0; } /* Passagier-Bewertungs-Feed (Airline) */ .review-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .review-item { padding: 8px 10px; border-radius: 8px; background: var(--panel-2, rgba(148,163,184,0.08)); } .review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; } .review-stars { color: #f59e0b; letter-spacing: 1px; } .review-text { font-size: 13px; margin-top: 3px; } /* Theorie / Prüfung */ .theory-cats { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .quiz-q { font-size: 16px; font-weight: 600; margin: 0 0 14px; } .quiz-choices { display: flex; flex-direction: column; gap: 8px; } /* Bild links neben Frage + Antworten. Die Bildspalte wird durch align-items:stretch auf die Höhe des Frageblocks gezogen → das Bild skaliert dynamisch mit dem Platzbedarf von Frage und Antworten. */ .quiz-layout { display: flex; gap: 16px; align-items: stretch; } .quiz-layout .quiz-body { flex: 1 1 auto; min-width: 0; } .quiz-figure { flex: 0 0 auto; max-width: 44%; min-height: 130px; display: flex; align-items: flex-start; justify-content: center; } .quiz-figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: #fff; cursor: zoom-in; transition: filter 0.12s; } .quiz-figure img:hover { filter: brightness(1.05); } @media (max-width: 760px) { .quiz-layout { flex-direction: column; } .quiz-figure { max-width: 100%; min-height: 0; } .quiz-figure img { max-height: 240px; } } /* Vollbild-Lightbox für vergrößerte Fragebilder. */ .lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(4,8,20,0.9); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.15s; cursor: zoom-out; } .lightbox.open { opacity: 1; } .lightbox-img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,0.6); background: #fff; } .lightbox-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.3); font-size: 20px; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: rgba(0,0,0,0.8); } /* Admin: Bildauswahl (URL/Upload) je Theoriefrage. */ .qimg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .qimg-preview img { max-height: 70px; max-width: 150px; border-radius: 6px; border: 1px solid var(--border); background: #fff; vertical-align: middle; } .quiz-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-align: left; padding: 11px 14px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 14px; } /* Antwort-Feedback INLINE in der jeweiligen Antwortzeile (statt separater Box) — kompakt, nur die gewählte Zeile bekommt es; die übrigen Zeilen bleiben unverändert groß. */ .quiz-fb-inline { flex-basis: 100%; margin-left: 38px; font-size: 12.5px; line-height: 1.3; font-weight: 400; } .quiz-fb-inline strong { font-weight: 700; margin-right: 4px; } .quiz-choice:hover:not(:disabled) { border-color: var(--gold); } .quiz-letter { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--navy-600); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .quiz-text { flex: 1 1 auto; } .quiz-choice.correct { background: rgba(95,210,154,0.18); border-color: var(--ok); color: var(--ok); } .quiz-choice.correct .quiz-letter { background: var(--ok); color: #08311d; border-color: var(--ok); } .quiz-choice.wrong { background: rgba(214,90,90,0.18); border-color: var(--danger); color: #ffd7d7; } .quiz-choice.wrong .quiz-letter { background: var(--danger); color: #2a0000; border-color: var(--danger); } /* Trainings-Kopf: Fortschritt + Punktestand */ .quiz-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; } .quiz-count { color: var(--muted); } .quiz-score { font-weight: 700; color: var(--gold); } .quiz-prog { height: 7px; border-radius: 5px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px; } .quiz-prog > span { display: block; height: 100%; background: var(--gold); border-radius: 5px; transition: width .25s ease; } .exam-q { padding: 12px 0; border-bottom: 1px solid var(--border); } .exam-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .exam-opt { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; padding: 9px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; } .exam-opt:hover { border-color: var(--gold); } .exam-opt:has(input:checked) { border-color: var(--gold); background: rgba(245,179,1,0.10); } .exam-bar { margin-bottom: 14px; position: sticky; top: 0; background: var(--navy-800, var(--navy-700)); padding: 8px 0; z-index: 1; } .exam-bar > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .exam-result { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border); flex-wrap: wrap; } .exam-result.pass { background: rgba(95,210,154,0.14); border-color: var(--ok); } .exam-result.fail { background: rgba(214,90,90,0.14); border-color: var(--danger); } .exam-result-text { flex: 1 1 200px; } .exam-result-banner { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .exam-review { display: flex; flex-direction: column; gap: 8px; } .exam-rev { padding: 10px 12px; border-radius: 8px; border-left: 3px solid var(--border); background: var(--navy-700); } .exam-rev.ok { border-left-color: var(--ok); } .exam-rev.bad { border-left-color: var(--danger); } .theory-hint { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; margin: 4px 0 14px; border: 1px solid var(--border); background: var(--navy-700); } .theory-hint.ok { border-color: var(--ok); background: rgba(95,210,154,0.12); } .theory-hint.todo { border-color: var(--gold); background: rgba(245,179,1,0.10); } .theory-hint .th-ico { font-size: 22px; line-height: 1; } .theory-hint .th-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .theory-hint .th-text strong { font-size: 14px; } .theory-hint .th-text span { font-size: 12px; color: var(--muted); } /* ===== Theorie — neues Visual-System (Ring, Lernpfad, Karten, Verlauf) ===== */ button.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } button.ghost:hover { background: var(--navy-700); } /* Fortschrittsring */ .th-ring-val { fill: var(--text); font-size: 20px; font-weight: 700; } .th-ring-sub { fill: var(--muted); font-size: 11px; } /* Lizenz-Skilltree (zweispurig: Tragfläche / Hubschrauber) */ .skt-card { margin-bottom: 16px; } .skt-root { display: flex; justify-content: center; margin: 6px 0 2px; } .skt-rootnode { cursor: default; } .skt-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } @media (max-width: 720px) { .skt-tracks { grid-template-columns: 1fr; } } .skt-col { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .skt-col-head { text-align: center; font-weight: 700; font-size: 14px; color: var(--text); padding: 6px 0; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .skt-node { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-align: left; } .skt-link { align-self: center; width: 2px; height: 14px; background: var(--border); } .skt-ico { font-weight: 700; } .skt-name { font-weight: 700; font-size: 14px; } .skt-meta { font-size: 12px; color: var(--muted); } .skt-state { font-size: 11px; color: var(--muted); } .skt-earned { border-color: var(--ok); } .skt-earned .skt-ico { color: var(--ok); } .skt-available { border-color: var(--gold); cursor: pointer; } .skt-available:hover { background: var(--navy-600); } .skt-available .skt-ico, .skt-available .skt-state { color: var(--gold); } .skt-locked { opacity: 0.5; } /* Lizenz-Chips nach Spur gruppiert */ .lic-tracks { display: flex; flex-direction: column; gap: 8px; } .lic-track { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lic-track-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); min-width: 78px; } /* ===== Skills-Menü (XP, Level & Skilltrees) ===== */ /* Tree-Auswahlleiste (9 Bereiche) */ .skl-treebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } .skl-treecard { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-align: left; position: relative; transition: border-color .15s, background .15s; } .skl-treecard:hover { background: var(--navy-600); } .skl-treecard.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .skl-tc-ring { flex: 0 0 auto; color: var(--accent); } .skl-tc-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .skl-tc-ico { font-size: 16px; } .skl-tc-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skl-free { position: absolute; top: 6px; right: 6px; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); } /* Kopf des gewählten Trees */ .skl-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; border-left: 3px solid var(--accent); } .skl-head-ring { flex: 0 0 auto; color: var(--accent); } .skl-head-info { flex: 1 1 auto; min-width: 0; } .skl-head-info h3 { margin: 0 0 2px; } .skl-head-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .skl-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); color: var(--muted); } .skl-chip strong { color: var(--gold); } .skl-reset { flex: 0 0 auto; align-self: flex-start; } /* Verzweigungsgitter */ .skl-treewrap { overflow-x: auto; } .skl-tree { display: flex; flex-direction: column; align-items: center; position: relative; } .skl-edges { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; } .skl-tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; position: relative; z-index: 1; } .skl-tier-link { width: 2px; height: 18px; position: relative; z-index: 1; } .skl-node { width: 168px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 12px 11px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-align: center; transition: transform .12s, border-color .15s, background .15s; } .skl-node-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy-900); border: 1px solid var(--border); color: var(--muted); } .skl-node-ico svg { width: 26px; height: 26px; } .skl-node-name { font-size: 13px; font-weight: 700; line-height: 1.15; } .skl-node-eff { font-size: 11.5px; color: var(--muted); } .skl-node-sub { font-size: 10.5px; color: var(--muted); opacity: .85; } .skl-pips { display: flex; gap: 3px; } .skl-pip { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border); background: transparent; } .skl-pip.on { background: var(--accent); border-color: var(--accent); } /* Zustände */ .skl-locked { opacity: .5; } .skl-available { border-color: var(--accent); cursor: pointer; } .skl-available:hover { transform: translateY(-2px); background: var(--navy-600); } .skl-available .skl-node-ico { color: var(--accent); border-color: var(--accent); } .skl-available .skl-node-sub { color: var(--accent); } .skl-owned { border-color: var(--accent); } .skl-owned .skl-node-ico { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--navy-900)); } .skl-owned.skl-available:hover { transform: translateY(-2px); } .skl-maxed { border-color: var(--ok); } .skl-maxed .skl-node-ico { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--navy-900)); } .skl-maxed .skl-node-sub { color: var(--ok); } /* Level-Up-Toast */ .skl-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; } .skl-toast-item { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: var(--navy-700); border: 1px solid var(--gold); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: sklToastIn .3s ease; } .skl-toast-ico { font-size: 22px; } .skl-toast-txt strong { color: var(--gold); } .skl-toast-txt span { display: block; font-size: 12px; color: var(--muted); } @keyframes sklToastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } } /* Lizenzkarte: Ring im Summary + Info-Chips */ .theory-lic-sum { align-items: center; } .th-lic-ring { flex: 0 0 auto; display: inline-flex; } .th-lic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .th-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--navy-700); border: 1px solid var(--border); color: var(--muted); } .th-chip strong { color: var(--text); } /* Kategorie-Zeile mit Trefferquoten-Balken */ .th-cat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 8px; } .th-cat-info { flex: 1 1 auto; min-width: 0; } .th-catbar { height: 6px; border-radius: 4px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; margin: 6px 0 4px; } .th-catbar > span { display: block; height: 100%; border-radius: 4px; } .th-cat-meta { font-size: 12px; color: var(--muted); } .th-exam-cta { width: 100%; margin-top: 6px; } /* Prüfungsverlauf als Karten */ .th-hist { display: flex; flex-direction: column; gap: 8px; } .th-hist-item { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid var(--border); background: var(--navy-700); } .th-hist-item.pass { border-left-color: var(--ok); } .th-hist-item.fail { border-left-color: var(--danger); } .th-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .th-hist-bar { height: 7px; border-radius: 5px; background: var(--navy-900); border: 1px solid var(--border); overflow: hidden; } .th-hist-bar > span { display: block; height: 100%; } .th-hist-item.pass .th-hist-bar > span { background: var(--ok); } .th-hist-item.fail .th-hist-bar > span { background: var(--danger); } .th-hist-side { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .th-hist-pct { font-size: 13px; font-weight: 600; } @media (max-width: 560px) { .th-hist-item { grid-template-columns: 1fr auto; } .th-hist-bar { display: none; } } /* Abschluss-/Ergebnis-Screen */ .th-finish { text-align: center; } .th-finish-msg { font-size: 15px; margin: 14px 0 18px; } .th-finish-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .theory-admin-cat { padding: 8px 0; border-bottom: 1px solid var(--border); } .theory-admin-cat h4 { margin: 0 0 6px; } /* Events */ .ev-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--navy-600); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .ev-tag.ev-on { background: rgba(95,210,154,0.16); border-color: var(--ok); color: var(--ok); } .ev-tag.ev-soon { background: rgba(245,179,1,0.16); border-color: var(--gold); color: var(--gold); } .ev-tag.ev-off { background: var(--navy-600); border-color: var(--border); color: var(--muted); } .route-link { color: var(--gold); text-decoration: none; font-weight: 600; } .route-link:hover { text-decoration: underline; } .hub-marker { font-size: 18px; text-align: center; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); } .hub-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } /* Strecken-Menü (Karte links, Karten-Liste rechts) */ .strecken-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } .route-cards { display: flex; flex-direction: column; gap: 12px; } .route-tile { width: 100%; } @media (max-width: 1100px) { .strecken-grid { grid-template-columns: 1fr; } } /* Neue Strecke erstellen */ /* Start-/Ziel-Hub mit Tausch-Button (für Rückfluglinien) */ .hub-pair { display: flex; gap: 10px; align-items: flex-end; } .hub-pair label { flex: 1; min-width: 0; } .hub-swap { flex: 0 0 auto; width: 38px; height: 34px; padding: 0; margin-bottom: 1px; display: grid; place-items: center; font-size: 17px; line-height: 1; background: var(--navy-600); color: var(--gold); border: 1px solid var(--border); border-radius: 8px; } .hub-swap:hover:not(:disabled) { background: var(--navy-700); border-color: var(--gold); } .hub-swap:active:not(:disabled) { transform: translateY(1px); } .hub-swap:disabled { opacity: 0.4; } .create-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .form-grid input[type="range"] { margin-top: 6px; } @media (max-width: 1100px) { .create-grid { grid-template-columns: 1fr; } } /* Hub-Boxen (anklickbar) */ .hub-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .hub-box { text-align: left; background: var(--navy-700); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; color: var(--text); display: flex; flex-direction: column; gap: 8px; } .hub-box:hover { border-color: var(--gold); } .hub-box-head { font-size: 14px; } .hub-slot-row { display: flex; gap: 14px; } .hub-slot-row > div { font-size: 14px; font-weight: 600; } /* Hub-Gesamtbewertung (Pax/Fracht) als Note-Badges */ .hub-ratings { display: flex; gap: 6px; flex-wrap: wrap; } .hub-rating { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--navy-600, rgba(148,163,184,0.14)); white-space: nowrap; } .hub-rating b { font-size: 12px; } .hub-grade-A { color: #5fd29a; border-color: rgba(95,210,154,0.45); } .hub-grade-B { color: #86efac; } .hub-grade-C { color: #fcd34d; } .hub-grade-D { color: #fb923c; } .hub-grade-E { color: #f87171; } .hub-rating.hub-grade-na { color: var(--muted); } /* Hero-Bewertungspanels (Übersicht-Tab) */ .hub-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; } .hub-hero-card { background: var(--navy-800, var(--navy-700)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; } .hub-hero-card.hub-grade-A { border-color: rgba(95,210,154,0.45); } .hub-hero-card.hub-grade-E { border-color: rgba(248,113,113,0.4); } .hub-hero-label { font-size: 13px; color: var(--muted); } .hub-hero-grade { font-size: 42px; font-weight: 800; line-height: 1.15; } .hub-hero-card.hub-grade-A .hub-hero-grade { color: #5fd29a; } .hub-hero-card.hub-grade-B .hub-hero-grade { color: #86efac; } .hub-hero-card.hub-grade-C .hub-hero-grade { color: #fcd34d; } .hub-hero-card.hub-grade-D .hub-hero-grade { color: #fb923c; } .hub-hero-card.hub-grade-E .hub-hero-grade { color: #f87171; } .hub-hero-card.hub-grade-na .hub-hero-grade { color: var(--muted); } .hub-hero-stars { color: #f5b301; letter-spacing: 2px; font-size: 15px; } #hub-tabs { margin-bottom: 12px; flex-wrap: wrap; } @media (max-width: 700px) { .hub-hero { grid-template-columns: 1fr; } } .fac-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } /* „mini secondary" ist die neutrale Klein-Aktion (🔍 Details, Zurück, …). Die frühere GLOBALE Rot-Färbung (var(--danger)) stand versehentlich unscoped in der Facility-Sektion und färbte jeden dieser Knöpfe GUI-weit rot (Nutzerbericht 2026-07-22). Destruktives nutzt .mini.danger. */ button.mini.secondary { background: color-mix(in srgb, var(--navy-600) 82%, transparent); color: var(--text); border: 1px solid var(--border); border-radius: 8px; transition: border-color .12s, color .12s, background .12s; } button.mini.secondary:hover { background: var(--navy-700); border-color: #f5b301; color: #ffd75e; } /* Hub-Ausbauten-Registry (Ausstattung/Personal/Komfort/Sicherheit) */ .upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .upg-item { background: var(--navy-700); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; } .upg-item.upg-owned { border-color: rgba(95, 210, 154, 0.5); background: rgba(95, 210, 154, 0.08); } .upg-item.fac-disabled { opacity: 0.5; } .upg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .upg-ico { font-size: 18px; } /* Hub-Zustandswerte-Dashboard */ .hs-list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; } /* Balken (1fr, darf schrumpfen via min-width:0) + rechter Wert (nimmt seine Textbreite, bricht auf schmalen Fenstern um) — so ragt der Text (z. B. „≤ 12 t/Flug (…)") nie über den Kasten hinaus. */ .hs-row { display: grid; grid-template-columns: minmax(84px, 130px) minmax(24px, 1fr) minmax(0, max-content); align-items: center; gap: 10px; font-size: 13px; } .hs-bar { height: 10px; border-radius: 6px; background: var(--navy-600, rgba(148,163,184,0.18)); overflow: hidden; min-width: 0; } .hs-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #5fd29a); } .hs-row > strong { justify-self: end; text-align: right; min-width: 0; overflow-wrap: anywhere; } .fr-hubevents { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--navy-700, rgba(148,163,184,0.08)); } @media (max-width: 900px) { .hs-row { grid-template-columns: minmax(72px, 110px) minmax(20px, 1fr) minmax(0, max-content); } } .milestone { display: flex; gap: 12px; align-items: flex-start; } .milestone .ms-icon { font-size: 28px; line-height: 1; } .milestone.todo { opacity: 0.72; } .milestone.done { border-color: var(--gold-dim); } .fr-milestones { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--gold-dim); border-radius: var(--radius); background: rgba(245, 179, 1, 0.08); text-align: center; } .fr-milestones strong { color: var(--gold); display: block; margin-bottom: 4px; } .fr-pattern { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--navy-700); text-align: left; } .fr-pattern strong { color: var(--silver); display: block; margin-bottom: 6px; } .fr-pattern .muted-note { line-height: 1.5; } /* Fitness-Balken */ .fit-bar { height: 14px; border-radius: 8px; background: var(--navy-700); border: 1px solid var(--border); overflow: hidden; margin: 6px 0 4px; } .fit-fill { height: 100%; border-radius: 8px 0 0 8px; transition: width 0.3s ease; } .fit-fill.ok { background: var(--ok); } .fit-fill.warn { background: var(--gold); } .fit-fill.bad { background: var(--danger); } /* ===== Gesundheit & Fitness — Neugestaltung (Ringe + Karten) ===== */ .fit2-hero { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: 20px; align-items: center; } @media (max-width: 760px) { .fit2-hero { grid-template-columns: 1fr; } } .fit2-leftcol { display: flex; flex-direction: column; align-items: center; gap: 14px; } .fit2-rings { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } /* Erholungsboden-Aufschlüsselung unter dem Fitnessring. */ .fit2-rest { width: 100%; max-width: 260px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--panel, #1a2230) 60%, transparent); } .fit2-rest-regen { font-size: .92rem; text-align: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .fit2-rest-regen.busy { color: var(--muted, #9aa); } .fit2-rest-break { display: flex; flex-direction: column; gap: 3px; } .fit2-rest-row { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; } .fit2-rest-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .fit2-rest-row.total { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); font-weight: 700; } .fit2-rest-row.total span:last-child { color: var(--gold); } .fit2-rest-cap { margin-top: 6px; text-align: center; } .fit2-ringbox { display: flex; flex-direction: column; align-items: center; gap: 4px; } .fit2-gauge { width: 130px; height: 130px; } .fit2-gauge-val { fill: var(--text); font-size: 30px; font-weight: 800; text-anchor: middle; } .fit2-gauge-sub { fill: var(--muted); font-size: 13px; text-anchor: middle; } .fit2-status { font-weight: 700; font-size: 13px; } .fit2-status.ok { color: var(--ok); } .fit2-status.warn { color: var(--gold); } .fit2-status.bad { color: var(--danger); } .fit2-effect h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .fit2-pulse { display: inline-flex; width: 22px; height: 22px; color: var(--gold); } .fit2-pulse svg { width: 100%; height: 100%; } .fit2-eff-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fit2-eff-tile { background: var(--navy-700); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .fit2-eff-label { font-size: 12px; color: var(--muted); } .fit2-eff-val { font-size: 18px; font-weight: 800; } .fit2-eff-val.up { color: var(--ok); } .fit2-eff-val.down { color: var(--danger); } .fit2-eff-range { font-size: 11px; color: var(--muted); } .fit2-curve { width: 100%; height: 96px; margin-top: 10px; } .fit2-curve .fit2-zero { stroke: var(--border); stroke-dasharray: 3 4; } .fit2-curve .fit2-line { fill: none; stroke-width: 2.4; } .fit2-curve .fit2-line.pay { stroke: var(--gold); } .fit2-curve .fit2-line.rep { stroke: #7aa2ff; } .fit2-curve .fit2-mark { stroke: var(--muted); stroke-dasharray: 2 3; } .fit2-curve .fit2-pt.pay { fill: var(--gold); } .fit2-curve .fit2-pt.rep { fill: #7aa2ff; } .fit2-legend { display: flex; gap: 14px; font-size: 12px; margin-top: 2px; } .fit2-legend .pay { color: var(--gold); } .fit2-legend .rep { color: #7aa2ff; } .fit2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; } /* Fitness-Aktivitätskarten sind