/* ══════════════════════════════════════════════════════════════════════════════ ui-neu.css — „Karte als Bühne", geteilte Stilquelle (Sept. 2026). ERZEUGT aus tools/ui-neu.build.mjs — nicht von Hand ändern, sondern dort und neu bauen. Gilt für jede Seite mit ; die Landing-Page lädt die Datei nicht. Maßstab: Bühne 36–44 px · Panel 32 px · Chips 26 px · Badge 24 px. Radius 999 für Klickbares, 8 px für Flächen. Kappen 66 % Deckung. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ──────────────────────────────────────────────────────────────────── */ html[data-neu] { --neu-r: 8px; --neu-cap-alpha: .66; --neu-nav: 62px; --c0: #0A9E8A; --cN: #B9E4BF; --bc0: #0A9E8A; --bcN: #B9E4BF; --b0: rgba(10,158,138,0.13); --bN: rgba(185,228,191,0.16); } /* ── Kopfzeile: Marke · Glaskapsel · Konto ───────────────────────────────────── */ html[data-neu] .app-nav { position: sticky; top: 0; z-index: 60; max-width: none; min-height: 62px; padding: 8px 18px; gap: 18px; /* feste Höhe — nie aus einer Messung, sonst Rückkopplung */ /* Drei Spuren: Marke · Kapsel · Konto. Die Außenspuren sind gleich breit, solange beide Platz haben → die Kapsel sitzt exakt in der Seitenmitte; wird eine Seite breiter (Konto angemeldet, lange Marke), wächst nur deren Spur. Rasterspuren überlappen nie (Martin: „mittig, nie etwas verdecken"). */ display: grid; grid-template-columns: minmax(max-content, 1fr) max-content minmax(max-content, 1fr); align-items: center; background: rgba(4,9,20,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; box-shadow: 0 12px 34px rgba(0,0,0,0.45); } /* Volle Breite auch dort, wo die Seite ihren Inhalt zentriert (body/.page-wrap mit max-width): die Leiste zieht sich per negativem Rand bis an die Viewport-Kanten; --sbw (Scrollbalken-Breite) setzt ui-neu.js, damit unter Windows nichts unter dem Balken verschwindet. */ html[data-neu] .app-nav { width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2); box-sizing: border-box; } /* KEIN overflow-x: clip auf : das blockiert die Weitergabe von body{overflow-x:hidden} an den Viewport — dann wird der Body selbst zum Clip-Kasten und schneidet die randlose Leiste an seiner 1200-px-Spalte ab, sticky bricht und die Scroll-Sperren (body.style.overflow='hidden') greifen nicht (Befund 07.09.2026: Planer/Entdecken/Dashboard zeigten die Leiste nur über der Spalte, Marke unsichtbar). Stattdessen auf dem Body: der Wert wandert auf den Viewport (kein Quer-Scroll), der Body selbst bleibt sichtbar. */ html[data-neu] body { overflow-x: hidden; } /* Die Leiste sitzt auf JEDER Seite bündig oben (kein Body-Innenabstand darüber — about/presse/api tragen data-section="risk" und fielen früher durch die Ausnahme); der Abstand wandert als margin-bottom unter sie. Die Karte (data-section="risk") setzt selbst padding 0 und braucht keinen Abstand unter der Leiste. */ html[data-neu] body { padding-top: 0 !important; } html[data-neu] body:not([data-section="risk"]) .app-nav { margin-bottom: 16px; } html[data-neu] .app-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(61,224,255,0.45) 25%, rgba(123,92,255,0.45) 75%, transparent 100%); } /* Spurenbelegung: Marke links, Kapsel mittig, Konto rechts; unter 1305 px eigene Zeile, s. u. */ html[data-neu] .app-nav .app-brand { justify-self: start; } html[data-neu] .app-nav .app-sub-nav-wrap { justify-self: center; padding: 0; margin: 0; width: auto; flex: none; min-width: 0; } html[data-neu] .app-nav .app-nav-actions { justify-self: end; margin: 0; flex-wrap: nowrap; position: relative; z-index: 3; } html[data-neu] #user-menu { z-index: 90; } html[data-neu] .app-brand:hover { filter: none; } html[data-neu] .app-brand .brand-riskmap { filter: none; } html[data-neu] .app-nav #sub-nav { display: inline-flex; align-items: center; gap: 2px; margin: 0 !important; padding: 4px !important; border-radius: 999px !important; background: rgba(255,255,255,0.055) !important; border-color: transparent !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; } html[data-neu] #sub-nav .sn-item { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 13px !important; border-radius: 999px !important; background: transparent; color: var(--text2); font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } html[data-neu] #sub-nav .sn-item svg { position: static; width: 15px; height: 15px; margin: 0; flex: none; color: currentColor; opacity: .85; transition: opacity .18s ease; } html[data-neu] #sub-nav .sn-item:hover { background: rgba(255,255,255,0.08); color: var(--text); transform: none; } html[data-neu] #sub-nav .sn-item:hover svg { opacity: 1; } html[data-neu] #sub-nav .sn-item.active { background: linear-gradient(90deg, var(--accent), var(--royal)); color: #041018; box-shadow: 0 6px 18px rgba(61,224,255,0.28), inset 0 1px 0 rgba(255,255,255,0.35); } html[data-neu] #sub-nav .sn-item.active svg { opacity: 1; } html[data-neu] #sub-nav .sn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html[data-neu] #sub-nav .sn-spacer { display: none; } html[data-neu] #sub-nav .sn-badge { display: inline-flex !important; align-items: center; margin: 0 4px 0 6px; height: 24px; padding: 0 10px 0 9px; gap: 6px; border-radius: 999px !important; background: rgba(10,158,138,0.14); color: #7EE8D6; font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } html[data-neu] #sub-nav .sn-badge .sn-dot { width: 5px; height: 5px; } /* Konto rechts: Anmelden als Kappen-Pille, Haus und Avatar als Kreise */ html[data-neu] .app-nav-actions button, html[data-neu] .app-nav-actions a { border-radius: 999px !important; border-color: transparent !important; } /* riskmap.html rendert #auth-btn statisch, die App-Seiten lassen auth-shell.js .as-login/.as-user-btn rendern — beide gleich */ html[data-neu] #auth-btn, html[data-neu] .as-login { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 56px 0 14px !important; box-sizing: border-box; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--text) !important; background: rgba(255,255,255,0.085) !important; border: 1px solid transparent !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } html[data-neu] #auth-btn:hover, html[data-neu] .as-login:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important; background: rgba(255,255,255,0.14) !important; color: var(--text) !important; } html[data-neu] #auth-btn svg, html[data-neu] .as-login svg { display: none; } html[data-neu] #auth-btn::after, html[data-neu] .as-login::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; margin: 0; background: var(--accent); opacity: var(--neu-cap-alpha); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; transition: width .18s ease; } html[data-neu] #auth-btn:hover::after, html[data-neu] .as-login:hover::after { width: 48px; } html[data-neu] #auth-btn::before, html[data-neu] .as-login::before { content: ''; position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; z-index: 1; pointer-events: none; display: block; background-color: #041018; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } html[data-neu] #guest-home-link, html[data-neu] #user-btn, html[data-neu] .as-user-btn { width: 36px; height: 36px; background-color: rgba(255,255,255,0.085); border-color: transparent !important; } html[data-neu] #guest-home-link:hover, html[data-neu] #user-btn:hover { background-color: rgba(255,255,255,0.14); } html[data-neu] .as-menu, html[data-neu] #user-menu { z-index: 90; border-color: transparent; } @media (max-width: 1304px) { /* Eine Zeile reicht nicht für Marke 251 px · Kapsel 770 px · Konto 195 px MIT mittiger Kapsel (2 × 263 + 770 + Ränder): die Kapsel bekommt ihre eigene Zeile — mittig, solange sie passt, sonst scrollt sie von links */ html[data-neu] .app-nav { display: flex; flex-wrap: wrap; row-gap: 6px; } html[data-neu] .app-nav .app-sub-nav-wrap { order: 3; width: 100%; max-width: none; flex: 1 0 100%; margin: 0; display: flex; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: none; padding: 0 0 2px; } html[data-neu] .app-nav .app-nav-actions { margin-left: auto; } html[data-neu] .app-nav .app-sub-nav-wrap::-webkit-scrollbar { display: none; } html[data-neu] .app-nav #sub-nav { width: max-content; margin: 0 auto !important; } } @media (max-width: 900px) { html[data-neu] .app-nav { padding: 6px 10px; row-gap: 4px; } html[data-neu] #sub-nav .sn-item { flex: 0 0 auto; height: 30px; padding: 0 13px 0 11px !important; font-size: 10px !important; gap: 6px; } html[data-neu] #sub-nav .sn-item svg { width: 13px; height: 13px; } } @media (max-width: 640px) { html[data-neu] #sub-nav .sn-badge { display: none !important; } /* Handy: die Kapsel ist breiter als die Zeile und scrollt — die rechte Kante blendet als Hinweis aus */ html[data-neu] .app-nav .app-sub-nav-wrap { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } } /* ── Kopfzeilen-Adapter: Länder-/Feature-Seiten (header.seo-topbar) und Rechtstexte (header.neu-bar) tragen dieselbe Leiste — Markup bleibt (keine neuen Links), nur der Stil. ───────────────────── */ html[data-neu] .seo-topbar, html[data-neu] header.neu-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px; min-height: 62px; box-sizing: border-box; width: calc(100vw - var(--sbw, 0px)); margin: 0 calc(50% - 50vw + var(--sbw, 0px) / 2) 16px; padding: 8px 18px; border: 0; border-radius: 0; background: rgba(4,9,20,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,0.45); } html[data-neu] .seo-topbar::after, html[data-neu] header.neu-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(61,224,255,0.45) 25%, rgba(123,92,255,0.45) 75%, transparent 100%); } html[data-neu] .seo-section-strip { display: none; } html[data-neu] .seo-topbar .seo-brand { font-family: var(--font-brand, 'Unbounded', sans-serif); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; } html[data-neu] .seo-topbar .seo-top-cta { margin-left: auto; } html[data-neu] header.neu-bar { align-items: center; } html[data-neu] header.neu-bar .logo-mark { width: 32px; height: 32px; border-radius: 10px; } html[data-neu] header.neu-bar h1 { margin: 0; font-size: 17px; line-height: 1.1; } html[data-neu] header.neu-bar h1 a { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text); text-decoration: none; } html[data-neu] header.neu-bar .sub { font-size: 10px; letter-spacing: .12em; opacity: .7; margin-left: 4px; } /* Rechtstexte stapeln „Travel / RiskMap" zweizeilig mit Trennbalken — in der Leiste wird das eine Zeile mit Punkt */ html[data-neu] header.neu-bar .logo-text-wrap { flex-direction: row; align-items: center; gap: 12px; } html[data-neu] header.neu-bar .brand-main { flex-direction: row; align-items: baseline; gap: 6px; filter: none; } html[data-neu] header.neu-bar .brand-line { font-size: 17px; line-height: 1; } html[data-neu] header.neu-bar .brand-sep { display: inline-block; align-self: center; width: 4px; height: 4px; margin: 0 2px; border-radius: 50%; background: #FFB454; } @media (max-width: 640px) { html[data-neu] .seo-topbar, html[data-neu] header.neu-bar { padding: 6px 12px; gap: 10px; } html[data-neu] header.neu-bar .sub { display: none; } } /* ── Knopf-Familie „Kappen-Pill" ───────────────────────────────────────────────── .kp Sekundär: dunkle Pille, farbige Kappe rechts mit Icon (data-ico) .kp.kp-primary Primär: dieselbe Pille mit getönter Fläche (einmal je Ansicht) .kp.kp-sm Panel-Maßstab 32 px .kp.kp-chip Chip 26 px, Kappe trägt .kp-count .kp.kp-ico Kreis-Icon 36 px .kp.kp-ghost Text ohne Kappe Farbe der Kappe: data-cap="teal|mint|gold|violet|orange|red|sky" (Standard: Akzent) */ html[data-neu] .kp { --kp-cap: var(--accent); --kp-ink: #041018; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 56px 0 14px; box-sizing: border-box; border: 0; border-radius: 999px; background: rgba(255,255,255,0.085); color: var(--text); font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; overflow: hidden; user-select: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } html[data-neu] .kp:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); background: rgba(255,255,255,0.14); color: var(--text); } html[data-neu] .kp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html[data-neu] .kp:disabled, html[data-neu] .kp[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; box-shadow: none; } html[data-neu] .kp::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: var(--kp-cap); opacity: var(--neu-cap-alpha); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; transition: width .18s ease; } html[data-neu] .kp:hover::after { width: 48px; } html[data-neu] .kp::before { content: ''; position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; z-index: 1; pointer-events: none; display: block; background-color: var(--kp-ink); -webkit-mask: var(--kp-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E")) center / contain no-repeat; mask: var(--kp-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E")) center / contain no-repeat; } html[data-neu] .kp svg { display: none; } /* alte Inline-Icons weichen der Kappe */ html[data-neu] .kp-primary { background: linear-gradient(90deg, rgba(61,224,255,0.16), rgba(123,92,255,0.16)) !important; } html[data-neu] .kp-primary:hover { background: linear-gradient(90deg, rgba(61,224,255,0.26), rgba(123,92,255,0.26)) !important; } html[data-neu] .kp-sm { height: 32px; padding: 0 42px 0 12px; font-size: 10px !important; letter-spacing: .06em; } html[data-neu] .kp-sm::after { width: 34px; } html[data-neu] .kp-sm:hover::after { width: 37px; } html[data-neu] .kp-sm::before { width: 14px; height: 14px; margin: -7px 0 0; right: 9px; } html[data-neu] .kp-ico { width: 36px; height: 36px; padding: 0; justify-content: center; } html[data-neu] .kp-ico::after { display: none; } html[data-neu] .kp-ico::before { position: static; margin: 0; background-color: var(--text2); } html[data-neu] .kp-ico:hover::before { background-color: var(--accent); } html[data-neu] .kp-ico.kp-sm { width: 32px; height: 32px; } html[data-neu] .kp-ghost { background: transparent; color: var(--text3); padding: 0 14px; } html[data-neu] .kp-ghost::after, html[data-neu] .kp-ghost::before { display: none; } html[data-neu] .kp-ghost:hover { background: rgba(255,255,255,0.07); color: var(--text); box-shadow: none; transform: none; } html[data-neu] .kp-block { width: 100%; justify-content: flex-start; } /* Groß und farbstark (Dashboard-Karten, Martin: „mehr Farbe, groß"): 48 px, Körper in der Kappenfarbe getönt mit weichem Ring, Kappe fast deckend, Icon 20 px — für EINE Hauptaktion je Fläche, nicht für Listen */ html[data-neu] .kp-lg { height: 48px; padding: 0 76px 0 18px; font-size: 13px !important; letter-spacing: .1em; } html[data-neu] .kp-lg::after { width: 60px; clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%); } html[data-neu] .kp-lg:hover::after { width: 64px; } html[data-neu] .kp-lg::before { width: 20px; height: 20px; margin: -10px 0 0; right: 19px; } html[data-neu] .kp-tint { background: linear-gradient(90deg, color-mix(in srgb, var(--kp-cap) 24%, transparent), color-mix(in srgb, var(--kp-cap) 9%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-cap) 38%, transparent); } html[data-neu] .kp-tint:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--kp-cap) 32%, transparent), color-mix(in srgb, var(--kp-cap) 14%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-cap) 55%, transparent), 0 10px 28px color-mix(in srgb, var(--kp-cap) 35%, transparent); } html[data-neu] .kp-tint::after { opacity: .92; } html[data-neu] .kp-chip { height: 26px; padding: 0 44px 0 9px; font-size: 9.5px !important; letter-spacing: .05em; background: rgba(10,16,34,0.82); } html[data-neu] .kp-chip::after { width: 34px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); } html[data-neu] .kp-chip:hover::after { width: 38px; } html[data-neu] .kp-chip::before { display: none; } html[data-neu] .kp-chip .kp-count { position: absolute; right: 0; top: 0; bottom: 0; width: 34px; padding-left: 5px; box-sizing: border-box; z-index: 1; display: grid; place-items: center; color: var(--kp-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-neu] .kp-chip.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-cap) 70%, transparent); background: rgba(20,28,54,0.94); } html[data-neu] .kp.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-cap) 70%, transparent); } html[data-neu] [data-cap="teal"] { --kp-cap: var(--c0, #0A9E8A); --kp-ink: #fff; } html[data-neu] [data-cap="mint"] { --kp-cap: var(--cN, #B9E4BF); --kp-ink: #041018; } html[data-neu] [data-cap="gold"] { --kp-cap: #F3C969; --kp-ink: #2a1e00; } html[data-neu] [data-cap="violet"] { --kp-cap: #A78BFA; --kp-ink: #160b2e; } html[data-neu] [data-cap="orange"] { --kp-cap: var(--c2, #E2732B); --kp-ink: #041018; } html[data-neu] [data-cap="red"] { --kp-cap: var(--c3, #CE2350); --kp-ink: #fff; } html[data-neu] [data-cap="sky"] { --kp-cap: var(--accent, #3DE0FF); --kp-ink: #041018; } html[data-neu] [data-cap="royal"] { --kp-cap: var(--royal, #7B5CFF); --kp-ink: #fff; } /* Bereichskappen: tragen auf jeder Seite die echte Bereichsfarbe aus tokens.css (sky/royal folgen dem Seitenakzent) */ html[data-neu] [data-cap="risk"] { --kp-cap: var(--risk, #3DE0FF); --kp-ink: #041018; } html[data-neu] [data-cap="planner"] { --kp-cap: var(--planner, #7B5CFF); --kp-ink: #fff; } html[data-neu] [data-cap="journal"] { --kp-cap: var(--journal, #F4B740); --kp-ink: #2a1e00; } html[data-neu] [data-ico="x"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="share"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M7%2017%2017%207M7%207h10v10%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="star"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m12%202%203.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="starFill"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m12%202%203.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="plane"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="swap"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M8%203%204%207l4%204M4%207h16M16%2021l4-4-4-4M20%2017H4%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="flag"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M4%2022V4a1%201%200%200%201%201-1h11l-1%204%201%204H5%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="user"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="chev"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="back"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="plus"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="print"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M6%209V3h12v6M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%227%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="bell"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M18%208a6%206%200%200%200-12%200c0%207-3%209-3%209h18s-3-2-3-9M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="check"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="link"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.5%201.5M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207L12%2019%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="clock"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="home"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%2011l9-8%209%208M5%2010v10h5v-6h4v6h5V10%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="search"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="pen"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2020h9M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="trash"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M6%206l1%2014h10l1-14%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="calendar"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="download"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%203v12M6%2011l6%206%206-6M4%2021h16%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="map"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%204l-6%202v14l6-2%206%202%206-2V4l-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v16M15%206v16%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="sparkle"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%203v4M12%2017v4M3%2012h4M17%2012h4%22%2F%3E%3Cpath%20d%3D%22M12%207c.6%202.6%202.4%204.4%205%205-2.6.6-4.4%202.4-5%205-.6-2.6-2.4-4.4-5-5%202.6-.6%204.4-2.4%205-5z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="compass"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m15.5%208.5-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="sun"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.93%204.93l1.41%201.41M17.66%2017.66l1.41%201.41M2%2012h2M20%2012h2M4.93%2019.07l1.41-1.41M17.66%206.34l1.41-1.41%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="briefcase"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%2021V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16M2%2013h20%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="users"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="tree"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%203%207%2010h3l-4%206h12l-4-6h3z%22%2F%3E%3Cpath%20d%3D%22M12%2016v5%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="snowflake"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.93%204.93l14.14%2014.14M19.07%204.93%204.93%2019.07%22%2F%3E%3Cpath%20d%3D%22M12%202l-2%202M12%202l2%202M12%2022l-2-2M12%2022l2-2M2%2012l2-2M2%2012l2%202M22%2012l-2-2M22%2012l-2%202%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="building"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h2M14%206h2M8%2010h2M14%2010h2M8%2014h2M14%2014h2%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="music"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%2018V5l12-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="heart"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2020.5%204.9%2013.4A4.6%204.6%200%200%201%2011.4%206.9L12%207.5l.6-.6a4.6%204.6%200%200%201%206.5%206.5z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="globe"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="mail"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="settings"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22%2F%3E%3C%2Fsvg%3E"); } html[data-neu] [data-ico="logout"] { --kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2017l5-5-5-5M15%2012H3M21%203v18%22%2F%3E%3C%2Fsvg%3E"); } /* ── Alt-Klassen der Seiten auf die Familie abgebildet (Planer, Journal, Entdecken, Profil, Dashboard, Länderseiten) — dasselbe Bild ohne Markup-Umbau: Primär = getönte Pille mit Kappe, Sekundär/Ghost = Pille ohne Kappe, Chips = Pille mit weichem Ring, Tabs = Glaskapsel wie die Bereiche. ─────────── */ /* Überlange Wörter in Überschriften (z. B. „Sicherheitshinweise" auf 375 px) brechen statt zu überlaufen */ html[data-neu] h1 { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } /* erst Trennstrich (lang="de"), Notfall: harter Umbruch */ html[data-neu] .btn-primary, html[data-neu] .tw-btn-primary, html[data-neu] .onb-btn-primary, html[data-neu] .share-btn, html[data-neu] .seo-cta-primary, html[data-neu] .feat-cta-primary, html[data-neu] .wz-btn-primary, html[data-neu] .wz-sugg-pick, html[data-neu] .dn-btn-primary, html[data-neu] #donate-btn { --kp-cap: var(--accent); --kp-ink: #041018; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; height: 36px; min-height: 36px; padding: 0 56px 0 14px !important; box-sizing: border-box; border: 0 !important; border-radius: 999px !important; overflow: hidden; color: var(--text) !important; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: linear-gradient(90deg, rgba(61,224,255,0.16), rgba(123,92,255,0.16)) !important; box-shadow: none !important; filter: none !important; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } html[data-neu] .btn-primary:hover, html[data-neu] .tw-btn-primary:hover, html[data-neu] .onb-btn-primary:hover, html[data-neu] .share-btn:hover, html[data-neu] .seo-cta-primary:hover, html[data-neu] .feat-cta-primary:hover, html[data-neu] .wz-btn-primary:hover, html[data-neu] .wz-sugg-pick:hover, html[data-neu] .dn-btn-primary:hover, html[data-neu] #donate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important; background: linear-gradient(90deg, rgba(61,224,255,0.26), rgba(123,92,255,0.26)) !important; filter: none !important; } html[data-neu] .btn-primary::after, html[data-neu] .tw-btn-primary::after, html[data-neu] .onb-btn-primary::after, html[data-neu] .share-btn::after, html[data-neu] .seo-cta-primary::after, html[data-neu] .feat-cta-primary::after, html[data-neu] .wz-btn-primary::after, html[data-neu] .wz-sugg-pick::after, html[data-neu] .dn-btn-primary::after, html[data-neu] #donate-btn::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: var(--kp-cap); opacity: var(--neu-cap-alpha); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; transition: width .18s ease; } html[data-neu] .btn-primary:hover::after, html[data-neu] .tw-btn-primary:hover::after, html[data-neu] .onb-btn-primary:hover::after, html[data-neu] .share-btn:hover::after, html[data-neu] .seo-cta-primary:hover::after, html[data-neu] .feat-cta-primary:hover::after, html[data-neu] .wz-btn-primary:hover::after, html[data-neu] .wz-sugg-pick:hover::after, html[data-neu] .dn-btn-primary:hover::after, html[data-neu] #donate-btn:hover::after { width: 48px; } html[data-neu] .btn-primary::before, html[data-neu] .tw-btn-primary::before, html[data-neu] .onb-btn-primary::before, html[data-neu] .share-btn::before, html[data-neu] .seo-cta-primary::before, html[data-neu] .feat-cta-primary::before, html[data-neu] .wz-btn-primary::before, html[data-neu] .wz-sugg-pick::before, html[data-neu] .dn-btn-primary::before, html[data-neu] #donate-btn::before { content: ''; position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; z-index: 1; pointer-events: none; display: block; background-color: var(--kp-ink); -webkit-mask: var(--kp-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E")) center / contain no-repeat; mask: var(--kp-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E")) center / contain no-repeat; } html[data-neu] .btn-primary > svg, html[data-neu] .tw-btn-primary > svg, html[data-neu] .onb-btn-primary > svg, html[data-neu] .share-btn > svg { display: none; } html[data-neu] .share-btn { --kp-cap: #F3C969; --kp-ink: #2a1e00; } html[data-neu] .btn-primary:disabled, html[data-neu] .tw-btn-primary:disabled { opacity: .5; cursor: default; transform: none; } /* Sekundär / Ghost */ html[data-neu] .btn-ghost, html[data-neu] .wz-btn-ghost, html[data-neu] .wz-back, html[data-neu] .dn-btn-ghost, html[data-neu] .tw-btn-ghost, html[data-neu] .onb-btn-ghost, html[data-neu] .tw-btn-back, html[data-neu] .tw-btn-sub, html[data-neu] .btn:not(.btn-primary):not(.btn-danger), html[data-neu] .btn-small, html[data-neu] .btn-danger, html[data-neu] .seo-cta-secondary, html[data-neu] .feat-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 14px !important; box-sizing: border-box; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,0.085) !important; color: var(--text) !important; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: none !important; filter: none !important; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease; } html[data-neu] .btn-ghost:hover, html[data-neu] .wz-btn-ghost:hover, html[data-neu] .wz-back:hover, html[data-neu] .dn-btn-ghost:hover, html[data-neu] .tw-btn-ghost:hover, html[data-neu] .onb-btn-ghost:hover, html[data-neu] .tw-btn-back:hover, html[data-neu] .tw-btn-sub:hover, html[data-neu] .btn:not(.btn-primary):not(.btn-danger):hover, html[data-neu] .btn-small:hover { background: rgba(255,255,255,0.14) !important; color: var(--text) !important; } html[data-neu] .onb-btn-ghost, html[data-neu] .tw-btn-sub { background: transparent !important; color: var(--text3) !important; } html[data-neu] .btn-danger { background: rgba(206,35,80,0.18) !important; color: #FF9CB4 !important; } html[data-neu] .btn-danger:hover { background: rgba(206,35,80,0.28) !important; } html[data-neu] .btn-small { height: 30px; min-height: 30px; font-size: 10px !important; padding: 0 12px !important; } /* Chips (Auswahl): eine Pille, die beim Wählen einen Haken einschiebt — Einfach- wie Mehrfachauswahl, auf allen Seiten (.chip Planer/Profil, .theme-chip, .wz-chip KI-Wizard). Kachel-Variante .chip-tile: Symbol (data-ico auf .ct-ico), Titel, Untertitel, Haken-Plakette oben rechts — für die Kernentscheidungen (Zweck, Reisende, Reiseart). Schrift ist die Textschrift in Satzschrift, nicht mehr Mono in Versalien. */ html[data-neu] .chips { display: flex; flex-wrap: wrap; gap: 8px; } html[data-neu] .chip, html[data-neu] .theme-chip, html[data-neu] .wz-chip { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px !important; box-sizing: border-box; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,0.065) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09) !important; color: var(--text2) !important; font-family: var(--font) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, box-shadow .15s, color .15s; } html[data-neu] .chip::before, html[data-neu] .theme-chip::before, html[data-neu] .wz-chip::before { content: ''; width: 0; height: 14px; margin-right: 0; flex: none; opacity: 0; background-color: var(--planner-2, #9B7FFF); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transition: width .18s ease, margin .18s ease, opacity .15s; } html[data-neu] .chip:hover, html[data-neu] .theme-chip:hover, html[data-neu] .wz-chip:hover { background: rgba(255,255,255,0.11) !important; color: var(--text) !important; } html[data-neu] .chip:focus-visible, html[data-neu] .theme-chip:focus-visible, html[data-neu] .wz-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html[data-neu] .chip.active, html[data-neu] .chip[aria-pressed="true"], html[data-neu] .theme-chip.active, html[data-neu] .wz-chip.active { background: linear-gradient(90deg, color-mix(in srgb, var(--planner, #7B5CFF) 26%, transparent), color-mix(in srgb, var(--planner, #7B5CFF) 12%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--planner, #7B5CFF) 62%, transparent) !important; color: var(--text) !important; } html[data-neu] .chip.active::before, html[data-neu] .chip[aria-pressed="true"]::before, html[data-neu] .theme-chip.active::before, html[data-neu] .wz-chip.active::before { width: 14px; margin-right: 7px; opacity: 1; } /* Kacheln */ html[data-neu] .chips-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } html[data-neu] .chip-tile { height: auto; display: grid !important; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 3px; padding: 12px 34px 12px 14px !important; border-radius: 14px !important; text-align: left; white-space: normal; } html[data-neu] .chip-tile::before { display: none; } html[data-neu] .chip-tile .ct-ico { width: 20px; height: 20px; margin-bottom: 5px; background-color: var(--planner-2, #9B7FFF); -webkit-mask: var(--kp-ico) center / contain no-repeat; mask: var(--kp-ico) center / contain no-repeat; opacity: .8; transition: opacity .15s; } html[data-neu] .chip-tile.active .ct-ico { opacity: 1; } html[data-neu] .chip-tile .ct-label { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; } html[data-neu] .chip-tile .ct-sub { font-size: 11px; font-weight: 500; color: var(--text3); line-height: 1.3; } html[data-neu] .chip-tile::after { content: ''; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'12'%20fill%3D'%237B5CFF'%2F%3E%3Cpath%20d%3D'M7%2012.5l3.2%203.2L17%209'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; } html[data-neu] .chip-tile.active::after { opacity: 1; transform: scale(1); } @media (max-width: 560px) { html[data-neu] .chips-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-neu] .chip:not(.chip-tile), html[data-neu] .theme-chip, html[data-neu] .wz-chip { height: 34px; padding: 0 12px !important; font-size: 12px !important; } } /* Wizard (wizard.html) und Spenden-Widget (donate.js): eigene Kappenfarben — Planer-Violett bzw. Spenden-Rosé; Labels tragen data-ico (chev/sparkle/check/heart), alte Inline-SVGs weichen der Kappe. */ html[data-neu] .wz-btn-primary, html[data-neu] .wz-sugg-pick { --kp-cap: var(--planner, #7B5CFF); --kp-ink: #fff; } html[data-neu] .wz-btn-primary > svg, html[data-neu] .wz-sugg-pick > svg, html[data-neu] .dn-btn-primary > svg, html[data-neu] #donate-btn > svg { display: none; } html[data-neu] .wz-btn-primary:disabled, html[data-neu] .wz-btn-ghost:disabled, html[data-neu] .dn-btn-primary:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none !important; } html[data-neu] .wz-nav { gap: 10px; } html[data-neu] .wz-chip { --accent: var(--planner, #7B5CFF); } html[data-neu] .dn-btn-primary, html[data-neu] #donate-btn { --kp-cap: #FF6B8B; --kp-ink: #2a0a12; } html[data-neu] .dn-btn-primary { background: linear-gradient(90deg, rgba(255,107,139,0.20), rgba(255,107,139,0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255,107,139,0.35) !important; } html[data-neu] .dn-btn-primary:hover { background: linear-gradient(90deg, rgba(255,107,139,0.30), rgba(255,107,139,0.14)) !important; box-shadow: inset 0 0 0 1px rgba(255,107,139,0.55), 0 10px 26px rgba(255,107,139,0.25) !important; } html[data-neu] #donate-btn { position: fixed; bottom: 18px; right: 18px; z-index: 300; opacity: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(11,22,44,0.85) !important; box-shadow: inset 0 0 0 1px rgba(255,107,139,0.35), 0 6px 18px rgba(0,0,0,0.35) !important; } html[data-neu] #donate-btn:hover { background: rgba(255,107,139,0.16) !important; box-shadow: inset 0 0 0 1px rgba(255,107,139,0.6), 0 10px 26px rgba(255,107,139,0.25) !important; } /* Schwebender Spenden-Knopf, Karten und Banner im Panel-Maßstab 32 px (Martin: „Unterstützen ist zu groß“) */ html[data-neu] #donate-btn, html[data-neu] .dn-card .dn-btn-primary, html[data-neu] .dn-banner .dn-btn-primary { height: 32px; min-height: 32px; padding: 0 42px 0 12px !important; font-size: 10px !important; letter-spacing: .06em; } html[data-neu] #donate-btn::after, html[data-neu] .dn-card .dn-btn-primary::after, html[data-neu] .dn-banner .dn-btn-primary::after { width: 34px; } html[data-neu] #donate-btn:hover::after { width: 37px; } html[data-neu] #donate-btn::before, html[data-neu] .dn-card .dn-btn-primary::before, html[data-neu] .dn-banner .dn-btn-primary::before { width: 14px; height: 14px; margin: -7px 0 0; right: 9px; } html[data-neu] .dn-card .dn-btn-ghost, html[data-neu] .dn-banner .dn-btn-ghost { height: 32px; min-height: 32px; padding: 0 12px !important; font-size: 10px !important; } html[data-neu] .dn-close, html[data-neu] .dn-card-x, html[data-neu] .dn-banner-x { width: 30px; height: 30px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,0.07) !important; color: var(--text2) !important; font-size: 16px !important; line-height: 1; } html[data-neu] .dn-close:hover, html[data-neu] .dn-card-x:hover, html[data-neu] .dn-banner-x:hover { background: rgba(255,255,255,0.14) !important; color: var(--text) !important; } html[data-neu] .dn-close { top: 12px; right: 12px; } html[data-neu] .dn-qr-mark { font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; font-size: 10px !important; color: var(--text3) !important; text-decoration: none !important; } /* ── Marke K1 „Orbit" + Signatur B „Bahn unter dem Wort" (Martin 07.09.2026): Kopfzeile aller Seiten, Rechtstexte, Länderseiten. Das Licht wandert langsam über den vorderen Bogen (offset-path im gedrehten Bahn-System, kein Skript) und steht bei reduzierter Bewegung still; die Bahn unter dem ganzen Namen und das Licht am Ende sind Pseudo-Elemente ohne Inhalt — der Name bleibt Text im Link (Punkt mit aria-hidden), SEO/GEO unverändert. */ html[data-neu] .app-brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; } html[data-neu] .app-brand-mark svg { display: block; width: 100%; height: 100%; } html[data-neu] .abm-globe .abm-light { transform: none; offset-path: path('M2 32 A30 11 0 0 0 62 32'); offset-rotate: 0deg; offset-distance: 75%; } @media (prefers-reduced-motion: no-preference) { html[data-neu] .abm-globe .abm-light { animation: abm-orbit 9s ease-in-out infinite; } } @keyframes abm-orbit { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } html[data-neu] .app-brand .brand-dot { color: var(--gold, #FFD278); } html[data-neu] .app-brand-text, html[data-neu] .seo-brand-name { position: relative; display: inline-block; line-height: 1.1; } html[data-neu] header.neu-bar .brand-main { position: relative; display: inline-flex; line-height: 1.1; } /* bleibt Zeile (Travel · RiskMap), nur mit Bahn darunter */ html[data-neu] .app-brand-text::after, html[data-neu] .seo-brand-name::after, html[data-neu] header.neu-bar .brand-main::after { content: ''; position: absolute; left: .04em; right: .36em; bottom: -.22em; height: .07em; border-radius: 1em; background: linear-gradient(90deg, var(--accent, #3DE0FF), var(--gold, #FFD278)); opacity: .9; pointer-events: none; } html[data-neu] .app-brand-text::before, html[data-neu] .seo-brand-name::before, html[data-neu] header.neu-bar .brand-main::before { content: ''; position: absolute; right: .2em; bottom: -.31em; width: .25em; height: .25em; border-radius: 50%; background: #EAFBFF; box-shadow: 0 0 .35em var(--accent, #3DE0FF); pointer-events: none; } html[data-neu] header.neu-bar .logo-mark { width: 34px !important; height: 34px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; display: inline-grid; place-items: center; } html[data-neu] header.neu-bar .logo-mark svg { width: 34px; height: 34px; display: block; } html[data-neu] .seo-topbar .seo-brand img { width: 32px; height: 32px; } /* Google-Knopf im Anmelde-Dialog der Karte (riskmap.html #auth-modal) — dieselbe Regel wie auf der Landing */ html[data-neu] #auth-modal #tr-google-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: flex-start !important; gap: 10px; width: 100%; min-height: 0; height: 44px; box-sizing: border-box; padding: 0 66px 0 16px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,0.085) !important; color: var(--text) !important; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } html[data-neu] #auth-modal #tr-google-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; } html[data-neu] #auth-modal #tr-google-btn::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 54px; background: #fff; clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; transition: width .18s ease; } html[data-neu] #auth-modal #tr-google-btn:hover:not(:disabled)::after { width: 58px; } html[data-neu] #auth-modal #tr-google-btn .tr-g { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; pointer-events: none; } html[data-neu] #auth-modal #tr-google-btn .tr-g svg { width: 20px !important; height: 20px !important; } html[data-neu] #auth-modal #tr-google-btn:disabled { opacity: .55; cursor: default; transform: none; } html[data-neu] #auth-modal #auth-submit { background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #3DE0FF) 26%, transparent), color-mix(in srgb, #7B5CFF 16%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3DE0FF) 42%, transparent) !important; } html[data-neu] #auth-modal #auth-submit:hover:not(:disabled) { background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #3DE0FF) 36%, transparent), color-mix(in srgb, #7B5CFF 24%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3DE0FF) 60%, transparent), 0 10px 26px color-mix(in srgb, var(--accent, #3DE0FF) 32%, transparent) !important; } html[data-neu] #auth-modal #auth-submit::after { opacity: .92; } html[data-neu] #auth-modal #auth-tabs { display: flex; gap: 3px; padding: 4px !important; margin: 18px 0 20px; border-radius: 999px !important; border: 0 !important; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #3DE0FF) 14%, transparent), color-mix(in srgb, #7B5CFF 12%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3DE0FF) 30%, transparent) !important; } html[data-neu] #auth-modal #auth-tabs button { flex: 1; height: 34px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: color-mix(in srgb, var(--accent, #3DE0FF) 70%, #fff) !important; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } html[data-neu] #auth-modal #auth-tabs button:hover { background: color-mix(in srgb, var(--accent, #3DE0FF) 16%, transparent) !important; color: var(--text) !important; } html[data-neu] #auth-modal #auth-tabs button.active { background: linear-gradient(90deg, var(--accent, #3DE0FF), #7B5CFF) !important; color: #041018 !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #3DE0FF) 38%, transparent), inset 0 1px 0 rgba(255,255,255,0.35) !important; } /* Tabs (Journal): Glaskapsel wie die Bereiche, aktiv = Akzent-Pille */ html[data-neu] .tabs { display: inline-flex; gap: 2px; padding: 4px !important; border-radius: 999px !important; background: rgba(255,255,255,0.055) !important; border: 0 !important; box-shadow: none !important; } html[data-neu] .tabs .tab { height: 34px; padding: 0 16px !important; border-radius: 999px !important; font-family: var(--font) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--text2); background: transparent; box-shadow: none !important; } html[data-neu] .tabs .tab:hover { background: rgba(255,255,255,0.08); color: var(--text); } html[data-neu] .tabs .tab.active { background: var(--accent) !important; color: #041018 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important; } /* Kreis-Icons */ html[data-neu] .modal-close, html[data-neu] .stop-icon-btn, html[data-neu] .tab-btn-icon, html[data-neu] .td-add-btn { border-radius: 999px !important; border-color: transparent !important; background: rgba(255,255,255,0.085); } html[data-neu] .modal-close:hover, html[data-neu] .stop-icon-btn:hover, html[data-neu] .tab-btn-icon:hover, html[data-neu] .td-add-btn:hover { background: rgba(255,255,255,0.14); } @media (prefers-reduced-motion: reduce) { html[data-neu] .kp, html[data-neu] .kp::after, html[data-neu] #auth-btn, html[data-neu] #auth-btn::after, html[data-neu] #sub-nav .sn-item { transition: none; } html[data-neu] .kp:hover, html[data-neu] #auth-btn:hover { transform: none; } }