:root { --grund: #070510; --grund-2: #0a0816; --flaeche: #100d1c; --flaeche-2: #171426; --flaeche-3: #201c31; --neon-v: 140 120 255; --neon-c: 76 197 197; --glut-o: 245 145 43; --glut-v: 120 90 255; --linie: rgb(var(--neon-v) / 0.12); --linie-hell: rgb(var(--neon-v) / 0.22); --schrift: #ECEEF2; --schrift-2: #AAB2BF; --schrift-3: #6C7585; --muted-text: rgba(228,220,248,.8); --orange: #FF9F43; --orange-hell:#FFB86B; --orange-weich: rgba(255,159,67,0.12); --glut: rgba(255,140,40,0.35); --auf-orange: #1A1206; --gruen: #46C98B; --rot: #E15757; --gelb: #E6C34A; --rund: 12px; --rund-gross: 18px; } :root[data-galaxy-ton="mono"] { --grund: #08080a; --grund-2: #0c0c0f; --flaeche: #131316; --flaeche-2: #1a1a1e; --flaeche-3: #232327; --schrift: #f5f5f7; --schrift-2: #a9abb3; --schrift-3: #6b6d75; --akzent: #f5f5f7; --akzent-cyan: #e6e6ea; --neon-v: 230 230 236; --neon-c: 230 230 236; --glut-v: 230 230 236; --glut-o: 230 230 236; --orange: #f5f5f7; --orange-hell: #ffffff; --auf-orange: #08080a; --glut: rgba(255,255,255,0.14); --linie: rgba(255,255,255,0.10); --linie-hell: rgba(255,255,255,0.20); --muted-text: rgba(185,188,196,.85); --scroll-thumb: rgba(255,255,255,.22); --auswahl: rgba(255,255,255,.22); --linie-eins: rgba(255,255,255,.10); } :root[data-galaxy-ton="mono"] body, html:root[data-galaxy-ton="mono"] { background-color: #08080a !important; } :root[data-galaxy-ton="mono"] .rahmen::before, :root[data-galaxy-ton="mono"] .rahmen::after, :root[data-galaxy-ton="mono"] .wolke { filter: grayscale(1) brightness(.62) !important; } :root[data-galaxy-ton="mono"] .k-atom, :root[data-galaxy-ton="mono"] .atom, :root[data-galaxy-ton="mono"] .sperre-raute, :root[data-galaxy-ton="mono"] .boot-atom-svg, :root[data-galaxy-ton="mono"] .marke-atom, :root[data-galaxy-ton="mono"] .w-raute { filter: grayscale(1) brightness(1.12) contrast(1.02) !important; } :root[data-galaxy-ton="mono"] .sperre-knopf { background: #f5f5f7 !important; color: #08080a !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 10px 30px -14px rgba(0,0,0,.7) !important; } :root[data-galaxy-ton="mono"] { --p-violett-hell: #ebebf0; --p-violett: #ebebf0; --p-violett-hell-2: #ebebf0; --p-violett-2: #e8e8ee; --p-violett-a30: rgba(205,207,214,.30); --p-violett-a10: rgba(205,207,214,.10); --p-violett-a16: rgba(205,207,214,.16); --p-violett-a20: rgba(205,207,214,.2); --p-violett-3: #dcdce2; --p-violett-a22: rgba(205,207,214,.22); --p-violett-2-a22: rgba(205,207,214,.22); --p-violett-hell-3: #ebebf0; --p-violett-hell-4: #ebebf0; --p-violett-hell-5: #ebebf0; --p-violett-dunkel: #78787e; --p-violett-dunkel-2: #78787e; --p-violett-a50: rgba(205,207,214,.5); --p-violett-a60: rgba(205,207,214,.6); --p-violett-a70: rgba(205,207,214,.7); --p-violett-a14: rgba(205,207,214,.14); --p-violett-hell-6: #ebebf0; --p-pink: #e8e8ee; --p-violett-hell-a10: rgba(205,207,214,.10); --p-pink-hell: #ebebf0; --p-violett-hell-a62: rgba(205,207,214,.62); --p-pink-a08: rgba(205,207,214,.08); --p-violett-dunkel-3: #78787e; --p-violett-dunkel-4: #78787e; --p-violett-a18: rgba(205,207,214,.18); --p-violett-2-a16: rgba(205,207,214,.16); --p-violett-hell-7: #ebebf0; --p-pink-a18: rgba(205,207,214,.18); --p-violett-2-a60: rgba(205,207,214,.6); --p-violett-a06: rgba(205,207,214,.06); --p-violett-a12: rgba(205,207,214,.12); --p-pink-a12: rgba(205,207,214,.12); --p-pink-hell-2: #ebebf0; --p-pink-2: #ebebf0; --p-pink-hell-a55: rgba(205,207,214,.55); --p-violett-4: #e9e9ef; --p-violett-hell-a20: rgba(205,207,214,.20); --p-violett-hell-a14: rgba(205,207,214,.14); --p-violett-hell-a55: rgba(205,207,214,.55); --p-violett-hell-a70: rgba(205,207,214,.7); --p-violett-hell-a18: rgba(205,207,214,.18); --p-pink-a16: rgba(205,207,214,.16); --p-violett-dunkel-5: #78787e; } :is(#k-system, :root)[data-galaxy-ton="mono"] :is(.br-cta, .us-primaer, .db-akt, .db-akt.fa, .db-akt.hr, .sv-tat, .cc-start, .bk-jetzt, .brain-save, .us-neu, .ro-los, .wa-jetzt, .pt-add, .fr-ja, .e-knopf, .n-knopf, .osw-knopf), :root[data-galaxy-ton="mono"] .g-reiter.an, :root[data-galaxy-ton="mono"] .db-tab.an, :root[data-galaxy-ton="mono"] #monGruppe .db-akt { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #f5f5f7 !important; box-shadow: none !important; } :root[data-galaxy-ton="mono"] .pz-gut, :root[data-galaxy-ton="mono"] .pz-ok, :root[data-galaxy-ton="mono"] .db-health, :root[data-galaxy-ton="mono"] .health-chip { filter: grayscale(.85); } :root[data-galaxy-ton="mono"] #seite .klein.abschnitt, :root[data-galaxy-ton="mono"] #seite .wahl-block .klein, :root[data-galaxy-ton="mono"] .einst-titel, :root[data-galaxy-ton="mono"] .reiter.reiter-kanal .rk-sym { color: #c9cbd3 !important; } :root[data-galaxy-ton="mono"] .us-link, :root[data-galaxy-ton="mono"] .aend-hash, :root[data-galaxy-ton="mono"] .wz .wz-zeichen { color: #d7d9e0 !important; } :root[data-galaxy-ton="mono"] .us-zeile.an, :root[data-galaxy-ton="mono"] .us-rolle.an, :root[data-galaxy-ton="mono"] .us-chip.an, :root[data-galaxy-ton="mono"] .us-zeile:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.22) !important; } :root[data-galaxy-ton="mono"] .kurz-link { color: #e6e6ea !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; } :root[data-galaxy-ton="mono"] .board-wort.w0, :root[data-galaxy-ton="mono"] .board-wort.w1, :root[data-galaxy-ton="mono"] .leit-health.h0, :root[data-galaxy-ton="mono"] .leit-health.h1 { color: #d7d9e0 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; text-shadow: none !important; box-shadow: none !important; } :root[data-galaxy-ton="mono"] .board-status { background: rgba(255,255,255,.05) !important; color: #c9cbd3 !important; box-shadow: none !important; } :root { --p-weiss: #fff; --p-cyan: #4cc5c5; --p-weiss-a05: rgba(255,255,255,.05); --p-orange: #ff9f43; --p-schwarz: #000; --p-weiss-a04: rgba(255,255,255,.04); --p-rot: #e15757; --p-violett-hell: #efe6ff; --p-schwarz-a50: rgba(0,0,0,0.5); --p-blau: #5b8def; --p-violett: #b77bff; --p-violett-hell-2: #b9a8ff; --p-gruen: #46c98b; --p-violett-2: #a06bff; --p-violett-a30: rgba(124,92,255,.30); --p-schwarz-a55: rgba(0,0,0,0.55); --p-weiss-a03: rgba(255,255,255,0.03); --p-weiss-a08: rgba(255,255,255,.08); --p-weiss-a85: rgba(255,255,255,.85); --p-blau-hell: #e9ecf5; --p-violett-a10: rgba(124,92,255,.10); --p-weiss-a80: rgba(255,255,255,.8); --p-blau-hell-2: #f4f6fa; --p-violett-a16: rgba(124,92,255,.16); --p-violett-a20: rgba(160,130,255,.2); --p-schwarz-a45: rgba(0,0,0,0.45); --p-weiss-a06: rgba(255,255,255,.06); --p-weiss-a95: rgba(255,255,255,.95); --p-weiss-a90: rgba(255,255,255,.9); --p-weiss-a75: rgba(255,255,255,.75); --p-gruen-2: #39d98a; --p-orange-2: #ffb84d; --p-violett-3: #7c5cff; --p-violett-a22: rgba(160,130,255,.22); --p-violett-2-a22: rgba(124,92,255,.22); --p-gruen-3: #46e0a0; --p-violett-hell-3: #f6efff; --p-violett-hell-4: #f3eaff; --p-schwarz-a25: rgba(0,0,0,.25); --p-weiss-a02: rgba(255,255,255,.02); --p-rot-2: #ff5a5a; --p-violett-hell-5: #f1eefc; --p-orange-3: #c9911a; --p-weiss-a50: rgba(255,255,255,.5); --p-weiss-a60: rgba(255,255,255,.6); --p-weiss-a10: rgba(255,255,255,.1); --p-blau-hell-a90: rgba(210,225,255,.9); --p-weiss-a55: rgba(255,255,255,.55); --p-violett-dunkel: #0b0720; --p-violett-dunkel-2: #070518; --p-violett-a50: rgba(160,130,255,.5); --p-violett-a60: rgba(124,92,255,.6); --p-violett-a70: rgba(124,92,255,.7); --p-violett-a14: rgba(124,92,255,.14); --p-violett-hell-6: #e6dcfa; --p-pink: #ff7ad0; --p-violett-hell-a10: rgba(225,170,255,.10); --p-pink-hell: #ffd6f2; --p-violett-hell-a62: rgba(230,215,250,.62); --p-pink-a08: rgba(215,123,198,.08); --p-rot-a12: rgba(225,87,87,0.12); --p-rot-a07: rgba(225,87,87,0.07); --p-gruen-a45: rgba(70,201,139,0.45); --p-orange-a60: rgba(255,159,67,.6); --p-cyan-a08: rgb(var(--neon-c) / .08); --p-orange-a30: rgba(255,159,67,.3); --p-rot-3: #ff6b6b; --p-weiss-a14: rgba(255,255,255,.14); --p-blau-dunkel: #05060b; --p-schwarz-a60: rgba(0,0,0,.6); --p-orange-hell-a85: rgba(255,236,210,.85); --p-blau-hell-a85: rgba(200,220,255,.85); --p-blau-hell-2-a85: rgba(230,235,255,.85); --p-blau-hell-a80: rgba(210,225,255,.8); --p-blau-hell-2-a80: rgba(230,235,255,.8); --p-orange-hell-a95: rgba(255,244,224,.95); --p-weiss-a045: rgba(255,255,255,.045); --p-rot-hell: #ffb3b3; --p-violett-dunkel-3: #0a0714; --p-violett-dunkel-4: #030109; --p-gruen-a60: rgba(57,217,138,.6); --p-gruen-4: #7ef0b4; --p-violett-a18: rgba(124,92,255,.18); --p-violett-2-a16: rgba(160,130,255,.16); --p-violett-hell-7: #d9d2ff; --p-pink-a18: rgba(214,107,196,.18); --p-violett-2-a60: rgba(160,130,255,.6); --p-violett-a06: rgba(124,92,255,.06); --p-violett-a12: rgba(124,92,255,.12); --p-pink-a12: rgba(214,107,196,.12); --p-pink-hell-2: #ffb3ec; --p-pink-2: #ff8ad8; --p-pink-hell-a55: rgba(255,150,220,.55); --p-violett-4: #8a7dff; --p-violett-hell-a20: rgba(225,170,255,.20); --p-violett-hell-a14: rgba(225,170,255,.14); --p-gruen-5: #8ff0c6; --p-violett-hell-a55: rgba(230,215,250,.55); --p-violett-hell-a70: rgba(230,215,250,.7); --p-violett-hell-a18: rgba(185,168,255,.18); --p-pink-a16: rgba(215,123,198,.16); --p-violett-dunkel-5: #030209; --p-weiss-a07: rgba(255,255,255,.07); } * { box-sizing: border-box; margin: 0; padding: 0; } :root { --sichtbar: 100dvh; } body { color: var(--schrift); height: 100vh; height: 100dvh; height: var(--sichtbar); overflow: hidden; -webkit-font-smoothing: antialiased; } .rahmen { display: flex; height: 100vh; height: 100dvh; height: var(--sichtbar); } .seite { flex-shrink: 0; display: flex; flex-direction: column; } .marke { display: flex; align-items: center; } .klein { text-transform: uppercase; } .wahl-block { padding: 0 2px; } .wahl-huelle { position: relative; margin-top: 7px; } .wahl-huelle select { width: 100%; appearance: none; color: var(--schrift); font-family: inherit; cursor: pointer; } .wahl-huelle select:focus { outline-offset: 1px; } .wahl-pfeil { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--schrift-3); pointer-events: none; font-size: 12px; } .dienste { display: flex; flex-direction: column; } .dienst { display: flex; align-items: center; gap: 9px; } .punkt { border-radius: 99px; background: var(--schrift-3); flex-shrink: 0; } .punkt.laeuft { background: var(--gruen); } .punkt.aus { background: var(--rot); } .punkt.pruefe { background: var(--orange); animation: pulsieren 1s ease-in-out infinite; } @keyframes pulsieren { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .dienst-name { flex: 1; color: var(--schrift-2); } .dienst-wert { color: var(--schrift-3); font-size: 11.5px; } .aktionen { display: flex; flex-direction: column; } .aktion .laeuft-punkt { width: 6px; height: 6px; border-radius: 99px; background: var(--gruen); flex-shrink: 0; } .seite-fuss { border-top: 1px solid var(--linie); } .fuss-knopf { width: 100%; font-family: inherit; cursor: pointer; } .mitte { text-align: center; padding-top: 9px; } .haupt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .reiterleiste { display: flex; align-items: stretch; overflow-x: auto; min-height: 44px; margin-right: 52px; } .reiterleiste::-webkit-scrollbar { height: 0; } .reiter-leer { color: var(--schrift-3); font-size: 12.5px; padding: 10px 8px; } .reiter { display: flex; align-items: center; gap: 8px; color: var(--schrift-2); cursor: pointer; white-space: nowrap; position: relative; top: 1px; } .reiter:hover { color: var(--schrift); } .reiter.aktiv { color: var(--schrift); border-color: var(--linie); } .reiter .r-punkt { border-radius: 99px; flex-shrink: 0; } .reiter .r-zu { background: none; border: none; color: var(--schrift-3); cursor: pointer; padding: 1px 3px; border-radius: 4px; font-size: 14px; line-height: 1; } .reiter .r-zu:hover { background: var(--rot); color: var(--p-weiss); } .buehne { flex: 1; position: relative; background: var(--grund); overflow: hidden; } .terminal-huelle { position: absolute; inset: 0; display: none; } .terminal-huelle.sichtbar { display: block; } .term-wand { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; cursor: not-allowed; background: color-mix(in srgb, var(--flaeche) 48%, transparent); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } .term-wand .tw-box { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 16px 22px; border-radius: 14px; max-width: 82%; background: color-mix(in srgb, var(--flaeche-2) 90%, transparent); border: 1px solid var(--linie); box-shadow: 0 8px 30px -10px var(--p-schwarz-a55); } .term-wand .tw-schloss { font-size: 22px; opacity: .9; } .term-wand .tw-txt { font-weight: 600; color: var(--schrift); font-size: 14px; } .term-wand .tw-klein { font-size: 11px; color: var(--schrift-3); } .ans-ende { position: absolute; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--flaeche-2); color: var(--orange); border: 1px solid var(--linie-hell); font-size: 19px; line-height: 1; font-weight: 700; box-shadow: 0 6px 18px var(--p-schwarz-a45); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, background .14s ease, color .14s ease; } .ans-ende:hover { background: var(--orange); color: var(--flaeche); } .ans-ende.zeig { opacity: 1; pointer-events: auto; transform: translateY(0); } .willkommen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--schrift-2); padding: 24px; } .w-raute { font-size: 46px; color: var(--orange); } .w-tipps { color: var(--schrift-3); } .hinweis { position: fixed; left: 50%; transform: translateX(-50%) translateY(80px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } .hinweis.zeig { opacity: 1; transform: translateX(-50%) translateY(0); } ::-webkit-scrollbar-track { background: transparent; } .marke-atom { filter: drop-shadow(0 2px 3px var(--p-schwarz-a50)) drop-shadow(0 0 11px rgb(var(--glut-o) / 0.45)) drop-shadow(0 -1px 1px rgba(255,255,255,0.22)); } .w-raute { animation: atmen 2.4s ease-in-out infinite; } @keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .sperre-raute, .w-raute { animation: none; } } .atom { position: relative; margin: 0 auto; flex-shrink: 0; } .atom::before, .atom::after { position: absolute; left: 50%; top: 46%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); } .atom::before { animation: teilchenflug 3.6s linear infinite; } .atom::after { animation: teilchenflug 5.2s linear infinite reverse; background: #FFD49A; box-shadow: 0 0 8px #FFB866; } @keyframes teilchenflug { from { transform: rotate(0) translateX(52px) rotate(0); } to { transform: rotate(360deg) translateX(52px) rotate(-360deg); } } .marke-atom::before, .marke-atom::after { display: none; } @media (prefers-reduced-motion: reduce) { .atom::before, .atom::after { animation: none; } } @keyframes glimmen { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } } .atom .klein { animation: glimmen 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .atom .klein { animation: none; } } .sperre { z-index: 500; } .sperre-raute { font-size: 40px; color: var(--orange); margin-bottom: 14px; } .sperre-karte h1 { margin-bottom: 6px; } .sperre-karte input { text-align: center; letter-spacing: 3px; font-family: inherit; outline: none; margin-bottom: 11px; -webkit-text-fill-color: var(--p-weiss); } .sperre-karte input::placeholder { letter-spacing: 0.5px; font-size: 14.5px; } .sperre-karte input:-webkit-autofill, .sperre-karte input:-webkit-autofill:focus { -webkit-text-fill-color: var(--p-weiss); caret-color: var(--p-weiss); } .sperre-fehler { font-weight: 600; margin-bottom: 10px; } .sperre-knopf { font-family: inherit; } .analyse { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: calc(26px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom)); } .analyse.offen { display: flex; } .analyse-karte { width: 100%; max-width: 660px; max-height: 86dvh; display: flex; flex-direction: column; } .analyse-kopf { display: flex; align-items: center; justify-content: space-between; } .analyse-zu { width: 44px; height: 44px; font-size: 20px; cursor: pointer; line-height: 1; } .analyse-zu:hover { background: var(--rot); color: var(--p-weiss); } .analyse-inhalt { overflow-y: auto; } .analyse-laedt { color: var(--schrift-3); text-align: center; padding: 40px 0; } .a-titel { text-transform: uppercase; color: var(--schrift-3); font-weight: 700; } .sperre-karte input[type="email"] { font-size: 16px; letter-spacing: 0; text-align: left; } .sperre-karte input[type="password"] { font-size: 17px; letter-spacing: 4px; } .warn-punkt { margin-left: auto; min-width: 20px; height: 20px; border-radius: 99px; background: var(--rot); color: var(--p-weiss); font-size: 11.5px; font-weight: 800; display: none; align-items: center; justify-content: center; padding: 0 6px; } .warn-punkt.zeig { display: flex; } .s-eintrag { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 13px; } .s-eintrag:last-child { border-bottom: none; } .s-art { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; background: var(--schrift-3); } .s-art.gut { background: var(--gruen); } .s-art.warn { background: var(--orange); } .s-art.rot { background: var(--rot); } .s-haupt { flex: 1; min-width: 0; } .s-titel { font-weight: 700; color: var(--schrift); } .s-detail { color: var(--schrift-3); font-size: 11.5px; margin-top: 2px; } .s-zeit { color: var(--schrift-3); font-size: 11.5px; white-space: nowrap; flex-shrink: 0; } .s-frei { padding: 6px 12px; font-family: inherit; cursor: pointer; } .s-form { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; } .s-form input { background: var(--flaeche-2); border: 1.5px solid var(--linie); border-radius: 9px; color: var(--schrift); padding: 11px 13px; font-size: 15px; font-family: inherit; outline: none; } .s-form input:focus { border-color: var(--orange); } .s-form button { border-radius: 9px; padding: 11px; font-size: 14.5px; font-family: inherit; cursor: pointer; } .menue-knopf { display: none; } .seite-schatten { display: none; } .benachr-atom { position: fixed; z-index: 121; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--flaeche); border: 1px solid var(--linie); color: var(--schrift-2); cursor: pointer; box-shadow: var(--schatten-s), inset 0 1px 0 var(--p-weiss-a06); transition: border-color .15s ease-out, color .15s ease-out, transform .12s; } .benachr-atom svg { width: 23px; height: 23px; display: block; } @media (hover: hover) and (pointer: fine) { .benachr-atom:hover { border-color: rgb(var(--neon-c) / .5); color: rgb(var(--neon-c)); } } .benachr-atom:active { transform: translateY(1px); } .benachr-atom .warn-punkt { position: absolute; top: 5px; right: 5px; } @media (max-width: 820px) { .menue-knopf { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 120; width: 42px; height: 42px; border-radius: 11px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--schrift); font-size: 19px; cursor: pointer; } .seite { position: fixed; top: 0; bottom: 0; left: 0; z-index: 130; transform: translateX(-100%); transition: transform .22s ease; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 8px 0 30px var(--p-schwarz-a50); } .seite.offen { transform: translateX(0); } .seite-schatten { position: fixed; inset: 0; z-index: 125; background: var(--p-schwarz-a55); } .seite-schatten.zeig { display: block; } .reiter { max-width: 165px; font-size: 12.5px; } .buehne { padding: 0; } .terminal-huelle { padding: 6px 2px 2px 6px; } .willkommen h1 { font-size: 20px; } .willkommen p { font-size: 13.5px; } .w-tipps { display: none; } .analyse-karte { max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); } .sperre-karte { padding: 30px 24px; } .sperre-karte input { font-size: 16px; } } .atom { width: 100%; height: 100%; display: block; overflow: visible; } .marke-atom { flex-shrink: 0; } .w-raute { width: 92px; height: 92px; margin: 0 auto; } @keyframes kreisen { to { transform: rotate(360deg); } } .analyse-karte.breit { max-width: 760px; } .leitstand-karte { max-width: 1180px; } .leit-takt { color: var(--schrift-3); font-size: 12px; font-weight: 400; margin-left: 6px; } .leit-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .leit-feld { background: var(--flaeche-2); border: 1px solid var(--linie); border-top: 3px solid var(--feldfarbe, var(--orange)); border-radius: 12px; padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 12px; } .leit-kopf { display: flex; align-items: center; gap: 9px; } .leit-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--schrift-3); } .leit-punkt.gut { background: var(--gruen); box-shadow: 0 0 7px var(--gruen); } .leit-punkt.schlecht { background: var(--rot); box-shadow: 0 0 7px var(--rot); } .leit-name { font-weight: 650; font-size: 15px; color: var(--schrift); } .leit-wo { color: var(--schrift-3); font-size: 11.5px; margin-left: auto; text-align: right; } .leit-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .leit-wert { background: var(--flaeche-3); border-radius: 8px; padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .leit-wert .zahl { font-size: 15px; font-weight: 650; color: var(--schrift); font-variant-numeric: tabular-nums; white-space: nowrap; } .leit-wert .zahl.warnt { color: var(--orange-hell); } .leit-wert .zahl.schlecht { color: var(--rot); } .leit-wert .marke { font-size: 10px; color: var(--schrift-3); text-transform: uppercase; letter-spacing: 0.4px; } .leit-dienste { display: flex; flex-wrap: wrap; gap: 6px; } .leit-dienst { display: inline-flex; align-items: center; gap: 5px; background: var(--flaeche-3); border-radius: 20px; padding: 3px 9px 3px 7px; font-size: 11.5px; color: var(--schrift-2); } .leit-dienst::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--schrift-3); } .leit-dienst.gut::before { background: var(--gruen); } .leit-dienst.schlecht::before { background: var(--rot); } .leit-graphen { display: flex; flex-direction: column; gap: 9px; } .leit-graph { display: flex; flex-direction: column; gap: 3px; } .leit-graph-kopf { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--schrift-3); } .leit-graph-kopf b { color: var(--schrift-2); font-weight: 600; font-variant-numeric: tabular-nums; } .leit-graph canvas { width: 100%; height: 38px; display: block; border-radius: 5px; background: var(--flaeche-3); } .leit-weg { color: var(--schrift-3); font-size: 12px; text-align: center; padding: 14px 0; } .bk-projekt { border: 1px solid var(--linie); border-left: 3px solid var(--feldfarbe, var(--orange)); border-radius: 11px; padding: 13px 14px; margin-bottom: 12px; background: var(--flaeche-2); } .bk-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bk-name { font-weight: 650; font-size: 15px; color: var(--schrift); } .bk-zusammen { color: var(--schrift-3); font-size: 12px; } .bk-jetzt { margin-left: auto; border: none; cursor: pointer; background: var(--feldfarbe, var(--orange)); color: var(--auf-orange); font-weight: 650; font-size: 13px; border-radius: 8px; padding: 8px 13px; } .bk-jetzt:disabled { opacity: 0.55; cursor: default; } .bk-jetzt.laedt { color: transparent; position: relative; } .bk-jetzt.laedt::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid rgba(20,23,30,0.4); border-top-color: var(--auf-orange); border-radius: 50%; animation: dreh 0.7s linear infinite; } @keyframes dreh { to { transform: rotate(360deg); } } .bk-liste { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; } .bk-stand { display: flex; align-items: center; gap: 8px; background: var(--flaeche-3); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; } .bk-stand .zeit { color: var(--schrift); font-variant-numeric: tabular-nums; } .bk-stand .gr { color: var(--schrift-3); } .bk-stand .tat { display: flex; gap: 5px; } .bk-tat { border: 1px solid var(--linie-hell); background: transparent; color: var(--schrift-2); border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; } .bk-tat:hover { background: var(--flaeche); color: var(--schrift); } .bk-tat.gefahr:hover { background: var(--rot); color: var(--p-weiss); border-color: var(--rot); } .bk-leer { color: var(--schrift-3); font-size: 12px; padding: 4px 0 2px; } .pn-leer { color: var(--schrift-3); font-size: 12.5px; padding: 6px 0; } .arch-zeile { padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 13px; } .arch-zeile:last-child { border-bottom: 0; } .arch-zeile .klein { color: var(--schrift-3); margin-top: 2px; } .sd-ampel { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; } .sd-trend { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .sd-trend .s-art { width: 11px; height: 11px; border-radius: 3px; } .st-aktion { margin: 2px 0 10px 22px; } html:not([data-serverip="an"]) #wzOrt { display: none; } .ki-loop { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--schrift-3); } .ki-loop .s-art { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .wk-ziele { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 8px; } .wk-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; } .wk-takt { display: flex; align-items: center; gap: 8px; font-size: 13px; } .wk-takt input { font: inherit; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift); padding: 3px 6px; width: 60px; } .ro-oben { display: flex; justify-content: flex-end; margin-bottom: 12px; } .ro-verteilen { border: 1px solid var(--linie-hell); background: transparent; color: var(--schrift-2); border-radius: 8px; padding: 8px 13px; font-size: 12.5px; cursor: pointer; } .ro-verteilen:hover { background: var(--flaeche-3); color: var(--schrift); } .ro-projekt { border: 1px solid var(--linie); border-left: 3px solid var(--feldfarbe, var(--orange)); border-radius: 11px; padding: 13px 14px; margin-bottom: 12px; background: var(--flaeche-2); } .ro-kopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; } .ro-name { font-weight: 650; font-size: 15px; color: var(--schrift); } .ro-wo { color: var(--schrift-3); font-size: 11.5px; } .ro-schritte { display: flex; flex-wrap: wrap; gap: 8px; } .ro-schritt { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--linie-hell); border-radius: 9px; padding: 9px 11px; background: var(--flaeche-3); min-width: 130px; } .ro-schritt .titel { font-size: 13px; color: var(--schrift); font-weight: 600; } .ro-schritt .letzt { font-size: 10.5px; color: var(--schrift-3); } .ro-schritt .letzt.gut { color: var(--gruen); } .ro-schritt .letzt.schlecht { color: var(--rot); } .ro-los { margin-top: 4px; border: none; cursor: pointer; background: var(--feldfarbe, var(--orange)); color: var(--auf-orange); font-weight: 650; font-size: 12px; border-radius: 7px; padding: 6px 10px; } .ro-los:disabled { opacity: 0.55; cursor: default; } .ro-los.warnung { background: transparent; color: var(--orange-hell); border: 1px solid var(--orange-hell); } .ro-git { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--schrift-3); } .ro-git-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .ro-git-text.warn { color: var(--orange-hell); } .ro-git code { font-size: 11.5px; color: var(--schrift-2); } .ro-ausgabe { margin-top: 10px; display: none; background: #0B0D11; border: 1px solid var(--linie); border-radius: 8px; padding: 9px 11px; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--schrift-2); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; } .ro-ausgabe.zeig { display: block; } .ro-ausgabe .kopf { color: var(--schrift-3); margin-bottom: 5px; } .ro-ausgabe .kopf.gut { color: var(--gruen); } .ro-ausgabe .kopf.schlecht { color: var(--rot); } .fr-abschnitt { font-size: 12px; color: var(--schrift-3); text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 8px; } .komm-falt { border-top: 1px solid var(--linie); margin-top: 10px; } #tlP-postfach > .komm-falt:first-of-type { border-top: none; margin-top: 4px; } .worker-idle { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 10px; border: 1px solid var(--glas-rand); border-radius: 10px; background: var(--p-weiss-a04); font-size: 13px; color: var(--schrift-2); } .wi-ring { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--akzent) calc(var(--p,0) * 1%), var(--linie) 0); box-shadow: 0 0 0 1px var(--glas-rand) inset; } .wi-text b { color: var(--schrift); font-weight: 700; } .komm-falt > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 2px; margin: 0; } .komm-falt > summary::-webkit-details-marker { display: none; } .komm-falt > summary::before { content: "\25B8"; color: var(--schrift-3); font-size: 11px; transition: transform .15s ease; flex: 0 0 auto; } .komm-falt[open] > summary::before { transform: rotate(90deg); } .fr-leer { color: var(--schrift-3); font-size: 12.5px; padding: 6px 0 14px; } .fr-eintrag { border: 1px solid var(--linie); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; background: var(--flaeche-2); } .fr-eintrag.offen { border-left: 3px solid var(--orange); } .fr-e-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fr-proj { font-size: 11px; color: var(--schrift-3); background: var(--flaeche-3); border-radius: 5px; padding: 2px 7px; } .fr-titel { font-weight: 600; font-size: 14px; color: var(--schrift); } .fr-zeit { margin-left: auto; font-size: 11px; color: var(--schrift-3); } .fr-text { font-size: 12.5px; color: var(--schrift-2); margin-top: 5px; white-space: pre-wrap; word-break: break-word; } .fr-tat { display: flex; gap: 7px; margin-top: 10px; } .fr-ja, .fr-nein { border: none; cursor: pointer; border-radius: 7px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; } .fr-ja { background: var(--gruen); color: #10231a; } .fr-nein { background: transparent; color: var(--rot); border: 1px solid var(--rot); } .fr-stand { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px; } .fr-stand.erlaubt { color: var(--gruen); background: rgba(70,201,139,0.12); } .fr-stand.abgelehnt { color: var(--rot); background: var(--p-rot-a12); } .fr-stand.info { color: var(--schrift-3); background: var(--flaeche-3); } .fr-schluessel { margin-top: 8px; } .fr-key { display: flex; align-items: center; gap: 8px; background: var(--flaeche-3); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12px; } .fr-key .kname { color: var(--schrift); font-weight: 600; min-width: 90px; } .fr-key code { color: var(--schrift-2); font-family: ui-monospace, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .fr-key .ktat { display: flex; gap: 5px; } .fr-kbtn { border: 1px solid var(--linie-hell); background: transparent; color: var(--schrift-2); border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer; white-space: nowrap; } .fr-kbtn:hover { background: var(--flaeche); color: var(--schrift); } .e-projekt { padding: 15px 16px; margin-bottom: 11px; } .e-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; } .e-farbe { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15); } .e-name { font-weight: 700; font-size: 15.5px; flex: 1; } .e-adresse { color: var(--schrift-3); } .e-werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; } .e-knopf { padding: 7px 12px; font-family: inherit; cursor: pointer; } .e-knopf.gefahr:hover { border-color: var(--rot); color: var(--rot); } .e-feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; } .e-feld label { text-transform: uppercase; color: var(--schrift-3); font-weight: 700; } .e-feld input, .e-feld textarea, .e-feld select { border: 1.5px solid var(--linie); color: var(--schrift); padding: 11px 13px; font-size: 14.5px; font-family: inherit; outline: none; width: 100%; } .e-feld textarea { min-height: 130px; resize: vertical; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.55; } .e-feld input:focus, .e-feld textarea:focus { border-color: var(--orange); } .e-hilfe { color: var(--schrift-3); font-size: 11.5px; line-height: 1.55; } .e-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } @media (max-width: 560px) { .e-zwei { grid-template-columns: 1fr; } } .e-ergebnis { border-radius: 9px; padding: 10px 13px; font-size: 13px; margin-top: 9px; line-height: 1.55; } .e-ergebnis.gut { background: rgba(95,169,126,0.12); border: 1px solid var(--gruen); color: var(--gruen); } .e-ergebnis.rot { background: rgba(201,100,90,0.12); border: 1px solid var(--rot); color: var(--rot); } .e-ergebnis.warn { background: rgba(224,138,60,0.10); border: 1px solid var(--orange); color: var(--orange); } .e-ergebnis pre { white-space: pre-wrap; word-break: break-word; margin-top: 6px; font-size: 11.5px; opacity: 0.85; } .k-atom { position: absolute; background-image: url("/atom.svg"); background-size: contain; background-repeat: no-repeat; will-change: transform; } @keyframes treiben { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(22px, -26px) rotate(90deg); } 50% { transform: translate(-14px, -44px) rotate(180deg); } 75% { transform: translate(-26px, -18px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } } @keyframes atmenLeise { 0%,100% { opacity: 0.13; } 50% { opacity: 0.32; } } .k-atom { animation: treiben linear infinite, atmenLeise ease-in-out infinite; } .a1 { width: 74px; height: 74px; left: 8%; top: 16%; animation-duration: 34s, 7s; } .a2 { width: 46px; height: 46px; left: 78%; top: 12%; animation-duration: 27s, 9s; animation-direction: reverse, normal; } .a3 { width: 112px; height: 112px; left: 70%; top: 62%; animation-duration: 44s, 11s; } .a4 { width: 34px; height: 34px; left: 20%; top: 74%; animation-duration: 23s, 6s; animation-direction: reverse, normal; } .a5 { width: 58px; height: 58px; left: 46%; top: 8%; animation-duration: 38s, 8s; } .a6 { width: 28px; height: 28px; left: 88%; top: 40%; animation-duration: 21s, 10s; } .a7 { width: 88px; height: 88px; left: 4%; top: 50%; animation-duration: 41s, 12s; animation-direction: reverse, normal; } @media (prefers-reduced-motion: reduce) { .k-atom { animation: none; } } @media (max-width: 620px) { .a3, .a7 { display: none; } } .werkzeuge { display: none; gap: 10px; min-height: 40px; position: relative; } .werkzeuge.zeig { display: flex; } .ki-status { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 12px; color: var(--schrift-2); white-space: nowrap; } .ki-status[hidden] { display: none; } .ki-lampe { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--schrift-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--schrift-3) 25%, transparent); } .ki-lampe.bereit { background: var(--gruen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 25%, transparent), 0 0 7px var(--gruen); } .ki-lampe.arbeitet{ background: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 28%, transparent); animation: kiPuls 1.3s ease-in-out infinite; } .ki-lampe.wartet { background: var(--rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 28%, transparent), 0 0 7px var(--rot); } @keyframes kiPuls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.35); } } .ki-zustand { font-weight: 600; } .ki-todos { font: inherit; font-size: 11.5px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--gx-rand-leise); background: var(--gx-flaeche); color: var(--schrift-2); cursor: pointer; } .ki-todos:hover { border-color: var(--akzent); color: var(--schrift); } .ki-update { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: color-mix(in srgb, var(--rot) 18%, transparent); color: var(--rot); font-weight: 600; cursor: pointer; border: 1px solid color-mix(in srgb, var(--rot) 30%, transparent); font: inherit; font-size: 11px; } .ki-update:active { transform: scale(.96); } .tele-proj { border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--flaeche-2); } .tele-proj h4 { margin: 0 0 6px; font-size: 14px; } .tele-geo { font-size: 12px; color: var(--schrift-2); margin-bottom: 10px; } .tele-sp { margin-bottom: 10px; } .tele-titel { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--schrift-3); margin-bottom: 4px; } .tele-zeile { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12.5px; } .tele-was { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tele-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--flaeche-3, var(--p-weiss-a06)); overflow: hidden; } .tele-bar > span { display: block; height: 100%; background: var(--akzent); border-radius: 4px; } .tele-n { flex: 0 0 auto; color: var(--schrift-2); min-width: 2em; text-align: right; } .tele-konto { font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--linie); } .tele-konto:first-child { border-top: 0; } .tele-ips { font-size: 11px; color: var(--schrift-3); margin-top: 2px; } .ki-update[hidden], .ki-todos[hidden] { display: none; } .ki-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--akzent) 12%, transparent); } .ki-fortschritt[hidden] { display: none; } .ki-fortschritt::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--akzent) 60%, transparent) 14%, transparent 28%); background-size: 220px 100%; animation: kiLauf 2.1s linear infinite; } @keyframes kiLauf { to { background-position: 220px 0; } } @media (prefers-reduced-motion: reduce) { .ki-fortschritt::before { animation-duration: 4.5s; } } .terminal-huelle.sichtbar { box-shadow: inset 0 0 0 1px var(--gx-rand-leise), inset 0 0 30px -18px var(--akzent); border-radius: 12px; } .wz-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .wz-knoepfe { display: flex; gap: 5px; flex-shrink: 0; } .wz { cursor: pointer; white-space: nowrap; } .wz { display: inline-flex; align-items: center; gap: 6px; } .wz-zeichen { font-size: 13px; line-height: 1; flex-shrink: 0; } svg.wz-zeichen { width: 15px; height: 15px; display: block; } @media (max-width: 620px) { .wz-titel { display: none; } .wz-knoepfe { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .wz-knoepfe::-webkit-scrollbar { display: none; } .wz-wort { display: none; } .wz { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 6px; justify-content: center; scroll-snap-align: start; } #wzNeu { margin-left: 2px; } .wz-zeichen { font-size: 16px; } svg.wz-zeichen { width: 20px; height: 20px; } } .terminal-huelle { padding: 12px 6px 6px 14px; } .terminal-huelle .xterm .xterm-accessibility, .terminal-huelle .xterm .xterm-accessibility-tree { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .terminal-huelle .xterm .xterm-rows, .terminal-huelle .xterm .xterm-screen { -webkit-user-select: text; user-select: text; } .xterm .xterm-viewport::-webkit-scrollbar { width: 8px; } .xterm .xterm-viewport::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 99px; } body { font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "tnum"; letter-spacing: -0.005em; } .klein { font-size: 10.5px; letter-spacing: 1.5px; color: var(--schrift-3); font-weight: 700; } .abschnitt { padding: 20px 6px 9px; font-size: 12.5px; letter-spacing: 1.2px; color: var(--schrift-2); } .wahl-huelle select { font-weight: 600; transition: border-color var(--uebergang), box-shadow var(--uebergang); } .wahl-huelle select:hover { border-color: var(--linie-hell); } .wahl-huelle select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-weich); } .dienst { transition: border-color var(--uebergang); } .dienst:hover { border-color: var(--linie); } .punkt { width: 7px; height: 7px; } .punkt.laeuft { box-shadow: 0 0 8px var(--gruen), 0 0 2px var(--gruen); } .punkt.aus { box-shadow: 0 0 7px rgba(255,90,78,0.55); } .dienst-wert { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; } .aktion .laeuft-punkt { box-shadow: 0 0 7px var(--gruen); } .reiterleiste { padding: 8px 10px 0; gap: 4px; } .reiter { border: 1px solid var(--linie); border-bottom: none; padding: 9px 12px 9px 14px; font-size: 12.5px; } .reiter:hover { background: var(--flaeche-2); } .reiter.aktiv { padding-top: 8px; } .reiter .r-punkt { width: 6px; height: 6px; } .werkzeuge { padding: 8px 12px 8px 16px; } .wz-titel { font-size: 11.5px; letter-spacing: 0.4px; font-family: "Cascadia Mono", Consolas, monospace; } .willkommen h1 { text-transform: uppercase; margin-left: 10px; } kbd { background: var(--flaeche-2); border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 6px; padding: 3px 7px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; } .sperre-karte h1 { text-transform: uppercase; margin-left: 9px; } .sperre-karte p { margin-bottom: 26px; } .sperre-karte input:-webkit-autofill, .sperre-karte input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #0B0C0F inset; } .sperre-knopf { text-transform: uppercase; } .analyse-kopf { font-size: 15px; font-weight: 700; padding: 18px 22px; } .analyse-zu { border-radius: 9px; transition: background var(--uebergang) ease-out, color var(--uebergang) ease-out, transform 120ms cubic-bezier(.2,0,0,1); } .a-titel { font-size: 10.5px; letter-spacing: 1.5px; margin: 22px 0 11px; } .e-projekt { background: var(--flaeche-2); border: 1px solid var(--linie); transition: border-color var(--uebergang); } .e-projekt:hover { border-color: var(--linie-hell); } .e-name { letter-spacing: 0.2px; } .e-adresse { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11.5px; } .e-knopf.haupt { border-color: transparent; } .e-feld input, .e-feld textarea, .e-feld select { background: var(--grund); border-radius: 10px; transition: border-color var(--uebergang), box-shadow var(--uebergang); } .e-feld input:focus, .e-feld textarea:focus { box-shadow: 0 0 0 3px var(--orange-weich); } .e-feld label { font-size: 10.5px; letter-spacing: 1.3px; } .hinweis { border-left: 3px solid var(--orange); padding: 12px 20px; font-size: 13px; font-weight: 600; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--schrift-3); } .dienste { padding: 12px 2px 2px; gap: 5px; } .fuss-knopf { padding: 8px; } .w-tipps { margin-top: 18px; font-size: 12px; line-height: 1.7; } .w-tipps div { color: var(--schrift-3); } .u-feld { border: 2px dashed var(--linie-hell); border-radius: 16px; padding: 34px 22px; text-align: center; cursor: pointer; transition: border-color var(--uebergang), background var(--uebergang); background: var(--flaeche-2); } .u-feld:hover, .u-feld.drueber { border-color: var(--orange); background: var(--orange-weich); } .u-pfeil { font-size: 34px; margin-bottom: 10px; } .u-haupt { font-size: 15px; font-weight: 700; margin-bottom: 5px; } .u-neben { font-size: 12.5px; color: var(--schrift-3); line-height: 1.6; } .u-datei { display: flex; align-items: center; gap: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); padding: 13px 15px; margin-top: 11px; } .u-datei .u-name { flex: 1; font-weight: 600; font-size: 14px; word-break: break-all; } .u-datei .u-groesse { color: var(--schrift-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .u-fortschritt { height: 5px; background: var(--linie); border-radius: 99px; overflow: hidden; margin-top: 12px; } .u-fortschritt span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-hell)); border-radius: 99px; transition: width .2s; } .u-protokoll { background: #050608; border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin-top: 14px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.65; color: var(--schrift-2); max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .u-protokoll .gut { color: var(--gruen); } .u-protokoll .rot { color: var(--rot); } .u-protokoll .warn { color: var(--gelb); } :root { --radius: 12px; --radius-sm: 8px; --radius-xs: 5px; --schatten-s: 0 1px 3px rgba(0,0,0,0.4); --schatten-m: 0 4px 16px rgba(0,0,0,0.5); --schatten-l: 0 8px 40px rgba(0,0,0,0.6); --uebergang: .15s ease; --seite-breite: 210px; } .seite { width: var(--seite-breite); background: #141414; border-right: 1px solid var(--linie); padding: 0 10px 10px; } .marke { flex-direction: column; gap: 4px; margin: 0 -10px 8px; } .marke-text { font-weight: 300; text-transform: uppercase; color: var(--orange); } .aktion, .analyse-knopf { letter-spacing: 0.3px; box-shadow: inset 0 1px 0 var(--p-weiss-a03), 0 1px 2px rgba(0,0,0,0.18); white-space: nowrap; } .aktionen { gap: 3px; } .dienst { border-radius: var(--radius-sm); background: var(--flaeche-2); border: 1px solid var(--linie); padding: 7px 11px; font-size: 11.5px; box-shadow: var(--schatten-s); } .wahl-huelle select { border-radius: var(--radius-sm); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-s); font-size: 12.5px; padding: 9px 30px 9px 12px; } .wahl-huelle select option { background: var(--grund); color: var(--schrift); } .wz, .e-knopf, .s-frei, .fuss-knopf { border: 1px solid var(--linie); background: var(--flaeche); color: var(--schrift-2); font-size: 11.5px; font-weight: 500; box-shadow: var(--schatten-s), inset 0 1px 0 var(--p-weiss-a06); transition: background var(--uebergang) ease-out, box-shadow var(--uebergang) ease-out, transform 120ms cubic-bezier(.2,0,0,1); } .wz:hover, .e-knopf:hover, .s-frei:hover, .fuss-knopf:hover { background: var(--flaeche-3); color: var(--schrift); border-color: var(--linie-hell); box-shadow: var(--schatten-m), inset 0 1px 0 var(--p-weiss-a08); transform: translateY(-1px); } .wz:active, .e-knopf:active { transform: translateY(1px); box-shadow: var(--schatten-s); } .e-knopf.haupt, .sperre-knopf, .s-form button { background: var(--gx-verlauf); color: var(--auf-orange); border: 1px solid var(--orange); font-weight: 600; box-shadow: 0 12px 34px -12px var(--glut), 0 2px 8px var(--orange-weich), inset 0 1px 0 var(--p-weiss-a50); transition: background var(--uebergang) ease-out, box-shadow var(--uebergang) ease-out, transform 120ms cubic-bezier(.2,0,0,1); } .e-knopf.haupt:hover, .sperre-knopf:hover, .s-form button:hover { background: linear-gradient(135deg, var(--orange-hell) 0%, var(--orange) 100%); box-shadow: 0 18px 46px -12px var(--glut), inset 0 1px 0 var(--p-weiss-a50); transform: translateY(-1px); } .e-knopf.haupt:active, .sperre-knopf:active, .s-form button:active { transform: translateY(1px); box-shadow: 0 6px 18px -10px var(--glut), inset 0 1px 0 var(--p-weiss-a50); } .e-knopf.gefahr { background: var(--p-rot-a12); } .e-knopf.gefahr:hover { background: rgba(225,87,87,0.20); box-shadow: 0 2px 8px rgba(225,87,87,0.2); } .e-projekt, .u-datei { border-radius: var(--radius); box-shadow: var(--schatten-s); } .e-feld input, .e-feld textarea { border-radius: var(--radius-sm); background: var(--grund); border: 1px solid var(--linie); } .reiter { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .hinweis { border-radius: var(--radius); } .aktionen-huelle { position: relative; flex: 0 0 auto; min-height: 0; display: block; } .aktionen { overflow: visible; padding-bottom: 6px; } .aktionen-huelle::after { content: ""; position: absolute; left: 0; right: 6px; bottom: 0; height: 22px; background: linear-gradient(transparent, #141414); pointer-events: none; } html:not([data-thema]) .aktionen-huelle::after { background: linear-gradient(transparent, #12141A); } .update-balken { position: fixed; left: 50%; transform: translateX(-50%); top: calc(58px + env(safe-area-inset-top)); z-index: 900; width: min(520px, calc(100vw - 20px)); display: flex; align-items: center; gap: 12px; border: 1px solid var(--orange); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 16px 40px var(--p-schwarz-a50), inset 0 1px 0 var(--p-weiss-a05); border-radius: 14px; padding: 11px 10px 11px 14px; color: var(--schrift); animation: ubRunter .3s cubic-bezier(.2,.9,.3,1.2); } @keyframes ubRunter { from { opacity: 0; transform: translate(-50%, -16px) } } .update-balken .ub-atom { flex-shrink: 0; width: 26px; height: 26px; color: var(--orange); display: flex; animation: ubDreh 9s linear infinite; } .update-balken .ub-atom svg { width: 100%; height: 100%; } @keyframes ubDreh { to { transform: rotate(360deg) } } .update-balken .ub-text { flex: 1; min-width: 0; line-height: 1.35; } .update-balken .ub-titel { font-weight: 700; font-size: 13.5px; color: var(--orange); letter-spacing: .3px; text-transform: uppercase; overflow-wrap: break-word; } .update-balken .ub-klein { font-size: 12.5px; color: var(--schrift-2); } .update-balken .ub-knopf { flex-shrink: 0; min-height: 40px; padding: 0 15px; border: 1px solid var(--orange); border-radius: 10px; cursor: pointer; background: var(--orange-weich); color: var(--orange); font-weight: 700; font-size: 13px; font-family: inherit; transition: background .14s, color .14s; } .update-balken .ub-knopf:hover { background: var(--orange); color: var(--grund); } .update-balken .ub-spaeter { flex-shrink: 0; width: 32px; min-height: 40px; background: none; border: none; cursor: pointer; color: var(--schrift-3); font-size: 19px; line-height: 1; } .update-balken .ub-spaeter:hover { color: var(--schrift); } @media (max-width: 820px) { .update-balken { top: calc(58px + env(safe-area-inset-top)); } .update-balken .ub-klein { display: none; } } @media (prefers-reduced-motion: reduce) { .update-balken, .update-balken .ub-atom { animation: none } } .sammel-lampe { margin-left: auto; width: 10px; height: 10px; border-radius: 99px; background: var(--schrift-3); flex-shrink: 0; } .sammel-lampe.laeuft { background: var(--gruen); box-shadow: 0 0 8px var(--gruen); } .sammel-lampe.aus { background: var(--rot); box-shadow: 0 0 8px var(--rot); } .sammel-lampe.pruefe { background: var(--orange); animation: pulsieren 1.4s ease-in-out infinite; } .merk-zeile { padding: 8px 2px; min-height: 44px; user-select: none; } .merk-zeile input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; accent-color: var(--orange); } .merk-zeile:hover { color: var(--schrift); } .aktion-gross { border: 1px solid var(--orange); } :root { --eintrag-hoehe: 44px; --eintrag-schrift: 14px; } .aktion, .analyse-knopf, .werkzeuge-kopf { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: var(--eintrag-hoehe); padding: 10px 12px; font-size: var(--eintrag-schrift); font-weight: 500; font-family: inherit; text-align: left; border-radius: 10px; border: 1px solid transparent; background: var(--flaeche-2); color: var(--schrift-2); cursor: pointer; position: relative; transition: background .14s, color .14s, border-color .14s; } .aktion .sym, .analyse-knopf .sym, .werkzeuge-kopf .sym { width: 20px; min-width: 20px; text-align: center; font-size: 14px; flex-shrink: 0; } .aktion:hover, .analyse-knopf:hover, .werkzeuge-kopf:hover { background: var(--flaeche-2); border-color: var(--linie); color: var(--schrift); } .aktion.aktiv { background: var(--orange-weich); border-color: rgba(234,43,31,.28); color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); } .aktion.aktiv .sym { filter: none; } .aktion-gross { padding: 10px 12px; min-height: var(--eintrag-hoehe); color: var(--orange); background: var(--orange-weich); border-color: rgba(234,43,31,.28); box-shadow: inset 3px 0 0 var(--orange); margin-bottom: 10px; } .aktion-gross::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px; border-bottom: 1px solid var(--linie); } .aktion-gross:hover { background: var(--orange); color: var(--grund); } .aktion-gross .sym { font-size: 14px; } .werkzeuge-kopf { margin-top: 6px; border-top: 1px solid transparent; border-radius: 10px; padding-top: 10px; color: var(--schrift-2); } .werkzeuge-kopf .werkzeuge-pfeil { margin-left: auto; font-size: 11px; color: var(--schrift-3); } .werkzeuge-kopf.offen { color: var(--schrift); } .werkzeuge-fach { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; border-left: 1px solid var(--linie); } .werkzeuge-fach .aktion { background: none; } .werkzeuge-fach .aktion:hover { background: var(--flaeche-2); } .analyse-knopf { margin-top: 8px; } .analyse-knopf:first-of-type { margin-top: 12px; } .aktion > span:not(.sym):not(.laeuft-punkt):not(.stern), .analyse-knopf > span:not(.sym):not(.warn-punkt):not(.sammel-lampe), .werkzeuge-kopf > span:not(.sym):not(.werkzeuge-pfeil):not(.laeuft-punkt) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .aktion .sym-bild { width: 17px; height: 17px; display: inline-block; vertical-align: middle; object-fit: contain; flex-shrink: 0; } .aktion-gross .sym-bild { width: 21px; height: 21px; } .einfuege-huelle { position: fixed; inset: 0; z-index: 400; background: var(--p-schwarz-a55); display: flex; align-items: flex-start; justify-content: center; padding: 12px; max-height: var(--sichtbar); overflow: auto; } .einfuege-kasten { background: var(--flaeche); border: 1px solid var(--linie, #2A2F3A); border-radius: 14px; width: min(680px, 100%); padding: 14px; box-shadow: 0 18px 50px var(--p-schwarz-a50); } .einfuege-kopf { font-weight: 700; font-size: 14px; color: var(--schrift); margin-bottom: 10px; } .einfuege-kasten textarea { width: 100%; background: var(--grund); color: var(--schrift); border: 1px solid var(--linie, #2A2F3A); border-radius: 10px; padding: 11px 12px; font-size: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.45; resize: vertical; outline: none; } .einfuege-kasten textarea:focus { border-color: var(--akzent, var(--p-orange)); } .einfuege-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .wz-haupt { background: var(--akzent, var(--p-orange)) !important; color: #17181C !important; font-weight: 700; } .einfuege-hinweis { color: var(--gedaempft, #8C93A1); font-size: 12px; margin-top: 8px; line-height: 1.5; } .wz-ort { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; font-size: 12px; line-height: 1.3; font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace; color: var(--schrift-2); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--linie); background: var(--flaeche-2); } .wz-ort:empty { display: none; } .wz-ort .wo-ist { color: var(--schrift); font-weight: 600; } .wz-ort .wo-soll { color: var(--schrift-3); } .wz-ort .wo-marke { font-weight: 700; white-space: nowrap; } .wz-ort.stutzt { border-color: rgba(230,195,74,0.45); background: rgba(230,195,74,0.10); color: var(--gelb); } .wz-ort.stutzt .wo-marke { color: var(--gelb); } .wz-ort.warnt { border-color: var(--rot); background: rgba(225,87,87,0.14); color: var(--rot); } .wz-ort.warnt .wo-marke { color: var(--rot); } .wz-ort.warnt .wo-soll { color: rgba(225,87,87,0.75); text-decoration: line-through; } .wz-ort.warnt .wo-ist { color: var(--p-weiss); } .werkzeuge.abweichung { border-bottom-color: var(--rot); box-shadow: inset 0 -2px 0 var(--rot); } .werkzeuge.stutzig { border-bottom-color: rgba(230,195,74,0.5); } .reiter.warnt { border-color: var(--rot); color: var(--rot); } .reiter.warnt.aktiv { border-top-color: var(--rot); } .reiter .r-warn { color: var(--rot); margin-right: 5px; font-weight: 700; } .reiter { touch-action: none; } .reiter.zieht { z-index: 5; opacity: 0.94; cursor: grabbing; box-shadow: 0 10px 22px -8px rgba(0,0,0,0.75); border-color: var(--orange); } body.reiter-zug { cursor: grabbing; } body.reiter-zug .reiter * { pointer-events: none; } .ampel-ort { font-size: 11.5px; line-height: 1.4; margin: 0 0 8px; color: var(--schrift-3); font-family: "Cascadia Mono", Consolas, monospace; } .ampel-ort:empty { display: none; } .ampel-ort.warnt { color: var(--rot); font-weight: 600; background: var(--p-rot-a12); border: 1px solid rgba(225,87,87,0.4); border-radius: 7px; padding: 6px 9px; } .ue-zeile { border: 1px solid var(--linie); border-left: 3px solid var(--schrift-3); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: var(--flaeche); } .ue-zeile.gut { border-left-color: var(--gruen); } .ue-zeile.stutzt { border-left-color: var(--gelb); } .ue-zeile.warnt { border-left-color: var(--rot); background: var(--p-rot-a07); } .ue-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .ue-name { font-size: 13.5px; font-weight: 700; color: var(--schrift); border-left: 3px solid; padding-left: 8px; } .ue-marke { font-size: 11.5px; font-weight: 700; white-space: nowrap; } .ue-zeile.gut .ue-marke { color: var(--gruen); } .ue-zeile.stutzt .ue-marke { color: var(--gelb); } .ue-zeile.warnt .ue-marke { color: var(--rot); } .ue-sitzung { margin-left: auto; font-size: 11px; color: var(--schrift-3); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .ue-sitzung.an { color: var(--gruen); border-color: var(--p-gruen-a45); } .ue-paar { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 12.5px; } .ue-was { flex: 0 0 84px; color: var(--schrift-3); font-size: 11.5px; } .ue-wert { min-width: 0; word-break: break-all; color: var(--schrift); font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace; } .ue-adr { display: block; color: var(--schrift-3); font-size: 11px; margin-top: 2px; } .ue-adr.weg { color: var(--gelb); } .ue-leer { color: var(--schrift-3); font-style: italic; font-family: inherit; } @media (max-width: 620px) { .werkzeuge { flex-wrap: wrap; gap: 6px; } .wz-ort { display: flex; order: -1; width: 100%; font-size: 11.5px; padding: 4px 8px; } .ki-status:not([hidden]) { order: -1; width: 100%; margin-left: 0; flex-wrap: wrap; white-space: normal; } .ue-was { flex-basis: 72px; } .ue-sitzung { margin-left: 0; } } .reiter .r-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .reiter .r-kuerzel { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.7px; color: var(--schrift-3); border: 1px solid var(--linie); border-radius: 5px; padding: 1px 5px; line-height: 1.5; font-family: "Cascadia Mono", Consolas, monospace; } .reiter.aktiv .r-kuerzel { color: var(--orange); border-color: rgba(255,159,67,0.45); } .reiter.warnt .r-kuerzel { color: var(--rot); border-color: rgba(225,87,87,0.55); } .reiter { max-width: 200px; } @media (max-width: 620px) { .reiter { max-width: 150px; } } .werkzeuge { align-items: center; } .wz-ort { flex-wrap: nowrap; overflow: hidden; } .wz-ort .wo-ist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wz-ort .wo-soll { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wz-ort .wo-ip { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 700; color: var(--schrift); background: var(--flaeche-3); border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; } .wz-ort .wo-ip.warnt { background: var(--rot); color: var(--p-weiss); } @media (max-width: 820px) { .reiterleiste { padding-top: calc(8px + env(safe-area-inset-top)); padding-left: calc(60px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); background: var(--grund-2); } .menue-knopf { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); } .seite { padding-left: env(safe-area-inset-left); } .reiter { min-height: 44px; } .reiterleiste { min-height: calc(52px + env(safe-area-inset-top)); } .reiterleiste::after { content: ""; flex: 0 0 24px; } } .tastenleiste { display: none; flex: 0 0 auto; gap: 5px; padding: 4px 8px calc(3px + env(safe-area-inset-bottom)); padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tastenleiste::-webkit-scrollbar { height: 0; } .tastenleiste.zeig { display: flex; } .taste { flex: 0 0 auto; min-width: 40px; min-height: 36px; padding: 0 10px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; color: var(--schrift); font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--uebergang), border-color var(--uebergang); } .taste:hover { border-color: var(--orange); color: var(--orange); } .taste.gedrueckt { background: var(--orange); border-color: var(--orange); color: var(--auf-orange); transform: translateY(1px); } @media (min-width: 821px) { .taste { min-height: 34px; min-width: 40px; font-size: 13px; } .tastenleiste { padding-top: 6px; padding-bottom: 6px; } } @media (max-width: 820px) { body.tastatur-offen .reiterleiste, body.tastatur-offen .werkzeuge { display: none; } body.tastatur-offen .buehne { padding-top: env(safe-area-inset-top); } body.tastatur-offen .menue-knopf { display: none; } body.tastatur-offen .tastenleiste { padding-top: 3px; padding-bottom: 3px; } body.tastatur-offen .taste { min-height: 34px; } body.tastatur-offen .terminal-huelle { padding: 2px 2px 0 4px; } } .n-karte { border: 1px solid var(--linie); border-left: 3px solid var(--gruen); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--flaeche); } .n-karte.gesperrt { border-left-color: var(--rot); background: rgba(225,87,87,0.06); } .n-karte.neu { border-left-color: var(--orange); } .n-kopf { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; } .n-name { font-size: 14px; font-weight: 700; color: var(--schrift); } .n-kennung { font-size: 11.5px; color: var(--schrift-3); font-family: "Cascadia Mono", Consolas, monospace; } .n-mail { font-size: 11.5px; color: var(--schrift-3); margin-left: auto; word-break: break-all; } .n-marke { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .n-marke.chef { color: var(--orange); border: 1px solid rgba(255,159,67,0.45); } .n-marke.sperr { color: var(--p-weiss); background: var(--rot); } .n-zeile, .n-geraete { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 12.5px; flex-wrap: wrap; } .n-was { flex: 0 0 74px; color: var(--schrift-3); font-size: 11.5px; } .n-wert { color: var(--schrift); font-family: "Cascadia Mono", Consolas, monospace; word-break: break-all; } .n-leer { color: var(--schrift-3); font-style: italic; } .n-geraet { font-size: 11.5px; color: var(--schrift-2); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 9px; font-family: "Cascadia Mono", Consolas, monospace; } .n-geraet.diese { color: var(--gruen); border-color: var(--p-gruen-a45); } .n-rechte { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 5px; } .n-recht { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); cursor: pointer; } .n-recht.fest { opacity: .65; cursor: default; } .n-projekt { border-left: 3px solid; padding-left: 8px; color: var(--schrift); font-weight: 600; } .n-cc { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--schrift-3); white-space: nowrap; } .n-recht input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); flex-shrink: 0; } .n-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; } .n-knopf { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift-2); padding: 8px 13px; font-size: 12.5px; font-family: inherit; cursor: pointer; min-height: 40px; } .n-knopf:disabled { opacity: .4; cursor: default; } .n-knopf.gefahr:hover { border-color: var(--rot); color: var(--rot); } .n-knopf.haupt { background: var(--orange); border-color: var(--orange); color: var(--auf-orange); font-weight: 700; } .n-formular { display: flex; flex-direction: column; gap: 7px; } .n-formular input { background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift); padding: 10px 11px; font-size: 16px; font-family: inherit; } .n-formular input:focus { border-color: var(--orange); outline: none; } .n-hinweis { color: var(--rot); font-size: 12.5px; margin-top: 7px; min-height: 1em; } .s-wer { font-weight: 700; margin-right: 7px; } @media (max-width: 620px) { .n-mail { margin-left: 0; width: 100%; } .n-cc { margin-left: 0; width: 100%; } .n-was { flex-basis: 100%; } } .m-zustand { border: 1px solid var(--linie); border-left: 3px solid var(--schrift-3); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--flaeche); } .m-zustand.gut { border-left-color: var(--gruen); } .m-zustand.stutzt { border-left-color: var(--gelb); } .m-zustand.warnt { border-left-color: var(--rot); background: var(--p-rot-a07); } .m-kopf { font-size: 14px; font-weight: 700; color: var(--schrift); margin-bottom: 5px; } .m-text { font-size: 12.5px; line-height: 1.55; color: var(--schrift-2); } .m-arten { display: flex; flex-direction: column; gap: 6px; } .m-art { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; border: 1px solid var(--linie); border-radius: 9px; padding: 9px 11px; background: var(--grund); cursor: pointer; } .m-art input { width: 18px; height: 18px; accent-color: var(--orange); grid-row: span 2; } .m-art input:disabled { opacity: .4; } .m-titel { font-size: 13px; font-weight: 600; color: var(--schrift); } .m-was { font-size: 11.5px; color: var(--schrift-3); line-height: 1.45; } .suchleiste { display: none; align-items: center; gap: 7px; padding: 7px 10px; background: var(--flaeche); border-bottom: 1px solid var(--linie); } .suchleiste.zeig { display: flex; } #suchFeld { flex: 1; min-width: 0; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift); padding: 8px 11px; font-size: 16px; font-family: inherit; } #suchFeld:focus { border-color: var(--orange); outline: none; } .such-stand { font-size: 11.5px; color: var(--gelb); white-space: nowrap; } .such-knopf { flex-shrink: 0; min-width: 40px; min-height: 40px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift-2); font-size: 15px; font-family: inherit; cursor: pointer; } .such-knopf:hover { border-color: var(--orange); color: var(--orange); } @media (max-width: 820px) { body.tastatur-offen .suchleiste { display: none; } } .d-pfad { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--schrift-3); background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; word-break: break-all; } .d-liste { display: flex; flex-direction: column; gap: 4px; } .d-zeile { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%; min-height: 46px; padding: 8px 11px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px; color: var(--schrift); font-family: inherit; font-size: 13px; cursor: pointer; } .d-zeile:hover:not(:disabled) { border-color: var(--orange); } .d-zeile:disabled { opacity: .5; cursor: default; } .d-zeile.hoch { color: var(--schrift-3); } .d-zeile.laedt { border-color: var(--orange); color: var(--orange); } .d-zeichen { color: var(--orange); font-size: 14px; text-align: center; } .d-zeile.hoch .d-zeichen { color: var(--schrift-3); } .d-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-family: "Cascadia Mono", Consolas, monospace; } .d-klein { font-size: 11px; color: var(--schrift-3); white-space: nowrap; } @media (max-width: 620px) { .d-zeile { grid-template-columns: 20px 1fr; } .d-klein { grid-column: 2; } } .aktion-titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--schrift-3); padding: 10px 4px 5px; } .favoriten-block { border: 1px solid var(--orange-weich, rgba(255,159,67,0.25)); background: var(--orange-weich, rgba(255,159,67,0.06)); border-radius: 12px; margin-bottom: 10px; } .favoriten-titel { color: var(--orange-hell); display: flex; align-items: center; gap: 5px; } .favoriten-titel .fav-stern { font-size: 12px; } .favoriten-block .aktion { background: transparent; } .favoriten-block .aktion:hover { background: var(--flaeche-2); } .aktion { position: relative; } .stern { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--schrift-3); font-size: 15px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--uebergang), background var(--uebergang); } .stern:hover { background: var(--flaeche-2); color: var(--orange); } .stern.an { color: var(--orange); } .reiter, .taste, .aktion, .wz, .such-knopf, .n-knopf, .d-zeile, .analyse-knopf, .fuss-knopf, .stern, .r-zu { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } button, a, [role="button"], input, select, textarea, label, .analyse-knopf, .aktion, .wz, .k, .sz-knopf, .fuss-knopf, .g-reiter, .reiter, .cc-btn, .n-knopf, .sv-mini, .db-tab, .osw-knopf, .pt-mv, .pt-check { touch-action: manipulation; } html, body { overscroll-behavior: none; background: var(--p-violett-dunkel-5); } :root { color-scheme: dark; } .analyse-inhalt, .aktionen, .d-liste, .reiterleiste { -webkit-overflow-scrolling: touch; } @media (max-width: 820px) { body:not(.tasten-an) .buehne { padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 820px) { .e-feld textarea, .e-feld input, .n-formular input, #suchFeld { font-size: 16px; } } .hinweis { bottom: calc(20px + env(safe-area-inset-bottom) + var(--tasten-hoehe, 0px)); max-width: min(92vw, 560px); text-align: left; } :root { --tasten-hoehe: 0px; } body.tasten-an { --tasten-hoehe: 58px; } @media (max-width: 820px) { .hinweis { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 10px 16px; border-radius: 16px; } .hinweis button { margin-left: 4px !important; } } @media (max-width: 900px) and (orientation: landscape) { .buehne, .werkzeuge, .suchleiste { padding-left: max(var(--rand-links, 12px), env(safe-area-inset-left)); padding-right: max(var(--rand-rechts, 12px), env(safe-area-inset-right)); } .terminal-huelle { padding-left: 4px; padding-right: 4px; } .werkzeuge { flex-wrap: nowrap; } .wz-ort { order: 0; width: auto; flex: 0 1 auto; } .wz-titel { display: none; } .reiterleiste { min-height: calc(42px + env(safe-area-inset-top)); padding-top: calc(5px + env(safe-area-inset-top)); } .reiter { min-height: 38px; } .taste { min-height: 38px; } .tastenleiste { padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); } } .aktion { padding-right: 44px; } .aktion .stern { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-left: 0; width: 32px; height: 32px; } .aktion-gross .stern { width: 32px; height: 32px; font-size: 15px; } .aktion .laeuft-punkt { margin-left: auto; margin-right: 2px; } .aktion .laeuft-punkt + .stern { margin-left: 0; } .aktion > span:not(.sym):not(.laeuft-punkt):not(.stern) { flex: 1 1 auto; min-width: 0; } .aktion, .aktion-gross, .werkzeuge-kopf, .werkzeuge-fach .aktion { font-size: var(--eintrag-schrift); font-weight: 500; } .aktion.aktiv, .aktion-gross { font-weight: 600; } .werkzeuge-fach { padding-left: 6px; margin-left: 8px; } .aktion-gross { font-weight: 500; } .aktion.aktiv { font-weight: 600; } .adr { border: 1px solid var(--linie); border-left: 3px solid var(--linie-hell); border-radius: 10px; margin-bottom: 6px; background: var(--flaeche); overflow: hidden; } .adr.auffaellig { border-left-color: var(--gelb); } .adr.gesperrt { border-left-color: var(--rot); background: var(--p-rot-a07); } .adr.eigene { border-left-color: var(--gruen); } .adr-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; min-height: 46px; padding: 9px 12px; background: none; border: none; color: var(--schrift); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; } .adr-kopf:hover { background: var(--flaeche-2); } .adr-ip { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 600; word-break: break-all; } .adr-marke { font-size: 11px; color: var(--schrift-3); border: 1px solid var(--linie); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .adr-marke.fehl { color: var(--gelb); border-color: rgba(230,195,74,0.45); } .adr-marke.eigen { color: var(--gruen); border-color: var(--p-gruen-a45); } .adr.gesperrt .adr-marke { color: var(--rot); border-color: rgba(225,87,87,0.5); } .adr-pfeil { margin-left: auto; color: var(--schrift-3); font-size: 11px; } .adr-fach { padding: 4px 12px 12px; border-top: 1px solid var(--linie); } .adr-zeile { display: flex; gap: 10px; padding: 4px 0; font-size: 12.5px; flex-wrap: wrap; } .adr-was { flex: 0 0 66px; color: var(--schrift-3); font-size: 11.5px; } .adr-wert { color: var(--schrift); min-width: 0; word-break: break-word; } .adr-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; } .adr-hinweis { font-size: 12px; color: var(--schrift-3); align-self: center; } @media (max-width: 620px) { .adr-was { flex-basis: 100%; } } .audit-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .audit-wahl, .audit-suche { background: var(--flaeche-3); border: 1px solid var(--linie-hell); color: var(--schrift); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: 12.5px; } .audit-suche { flex: 1; min-width: 120px; } .audit-e { border-bottom: 1px solid var(--linie); padding: 8px 2px 8px 10px; border-left: 2px solid transparent; } .audit-e-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .audit-art { font-weight: 650; font-size: 13px; } .audit-konto { font-size: 11.5px; color: var(--schrift-2); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 6px; padding: 1px 7px; white-space: nowrap; } .audit-konto.unbekannt { color: var(--rot); border-color: var(--rot); } .audit-e-kopf .audit-zeit { margin-left: auto; } .audit-zeit { font-size: 11.5px; color: var(--schrift-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .audit-e-text { font-size: 12px; color: var(--schrift-2); margin-top: 3px; word-break: break-word; } .audit-ip { color: var(--schrift-3); } .audit-e.warn { border-left-color: var(--rot); background: color-mix(in srgb, var(--rot) 7%, transparent); } .audit-e.warn .audit-art { color: var(--rot); } .audit-tag { position: sticky; top: 0; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--schrift-3); background: var(--flaeche-2); padding: 6px 10px; margin: 10px 0 2px; border-radius: 6px; } .audit-summe { font-size: 12px; color: var(--schrift-2); padding: 4px 2px 8px; } .audit-summe-warn { color: var(--rot); } .fr-sammel { display: flex; gap: 8px; margin-bottom: 12px; } .fr-regel { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 12.5px; } .fr-regel span { flex: 1; color: var(--schrift-2); } .fr-gut { color: var(--gruen); } .fr-schlecht { color: var(--rot); } .fr-regel-neu { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .fr-regel-neu select { background: var(--flaeche-3); border: 1px solid var(--linie-hell); color: var(--schrift); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: 12.5px; } .bk-konfig { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--linie); font-size: 12px; color: var(--schrift-3); } .bk-konfig label { display: inline-flex; align-items: center; gap: 5px; } .bk-konfig select, .bk-konfig input { background: var(--flaeche-3); border: 1px solid var(--linie-hell); color: var(--schrift); border-radius: 6px; padding: 5px 7px; font-family: inherit; font-size: 12px; } .bk-konfig input { width: 52px; } #seite .analyse-knopf, #aktionen .aktion, #aktionen .werkzeuge-kopf { min-height: 34px; padding: 6px 10px; font-size: 13px; gap: 9px; border-radius: 8px; } #seite .analyse-knopf .sym, #aktionen .aktion .sym, #aktionen .werkzeuge-kopf .sym { font-size: 14px; } #aktionen .aktion .sym-bild { width: 17px; height: 17px; } #aktionen .aktion { padding-right: 36px; } #aktionen .aktion .stern { width: 26px; height: 26px; font-size: 13px; right: 5px; } #aktionen .aktion .laeuft-punkt { margin-right: 4px; } #aktionen .aktion-gross { min-height: 38px; } #aktionen .aktion-gross .sym-bild { width: 19px; height: 19px; } .favoriten-block { padding: 2px 6px 5px; } .favoriten-titel { padding-top: 5px; font-size: 10px; } .schnellzugriff { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 2px; } .schnellzugriff:empty { display: none; } .sz-knopf { display: flex; align-items: center; gap: 9px; width: 100%; background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift); font-family: inherit; font-size: 12.5px; padding: 7px 10px; cursor: pointer; text-align: left; position: relative; } .sz-knopf:hover { background: var(--flaeche); border-color: var(--linie-hell); } .sz-knopf .sym { font-size: 14px; } .sz-knopf .warn-punkt { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); margin: 0; } .status-unter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .status-link { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche-3); border: 1px solid var(--linie-hell); border-radius: 8px; color: var(--schrift); font-family: inherit; font-size: 12.5px; padding: 8px 12px; cursor: pointer; } .status-link:hover { background: var(--flaeche); } .leiste-hinweis { color: var(--schrift-3); font-size: 12.5px; margin-bottom: 12px; } .leiste-zeile { display: flex; align-items: center; gap: 9px; padding: 8px 4px; min-height: 40px; color: var(--schrift-2); font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--linie); } .leiste-zeile input { width: 18px; height: 18px; } .leiste-zeile .sym { font-size: 15px; } #aktionen .aktion, #aktionen .werkzeuge-kopf { white-space: normal; } #aktionen .aktion > span:not(.sym):not(.laeuft-punkt):not(.stern), #aktionen .werkzeuge-kopf > span:not(.sym):not(.werkzeuge-pfeil):not(.laeuft-punkt) { white-space: normal; line-height: 1.15; overflow: visible; text-overflow: clip; } .nu-abschnitt { font-size: 11px; color: var(--schrift-3); text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 8px; } .nu-tabelle { overflow-x: auto; } .nu-tabelle table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .nu-tabelle th, .nu-tabelle td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--linie); } .nu-tabelle th { color: var(--schrift-3); font-weight: 600; font-size: 11px; } .nu-p { text-align: center; } .nu-nutzer { color: var(--schrift); white-space: nowrap; } .nu-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--schrift-3); margin-right: 6px; } .nu-punkt.on { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); } .nu-verw { font-size: 9.5px; color: var(--orange-hell); border: 1px solid var(--orange-weich); border-radius: 4px; padding: 1px 5px; } .nu-mail { font-size: 10.5px; color: var(--schrift-3); margin-left: 13px; } .nu-zelle { text-align: center; } .nu-ja { color: var(--gruen); font-weight: 700; } .nu-akt { color: var(--schrift-3); font-size: 11.5px; white-space: nowrap; } .nu-app { padding: 8px 0; border-bottom: 1px solid var(--linie); } .nu-app-name { font-weight: 650; color: var(--schrift); } .nu-app-zahl { color: var(--schrift-3); font-size: 12px; margin-left: 8px; } .nu-app-liste { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .nu-chip { background: var(--flaeche-3); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; color: var(--schrift-2); } .nu-chip.gesperrt { color: var(--rot); text-decoration: line-through; } .eingang-oben { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .eingang-oben #leisteKnopf { flex: 1; } .menue-sort { border: 1px solid var(--linie-hell); background: transparent; color: var(--schrift-2); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; font-family: inherit; } .menue-sort.an { background: var(--orange-weich); color: var(--orange-hell); border-color: var(--orange-hell); } #menueListe.sortieren .analyse-knopf { padding-right: 66px; } .sort-pfeile { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; } .sort-pf { width: 26px; height: 26px; border: 1px solid var(--linie-hell); background: var(--flaeche-3); color: var(--schrift); border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; } .sort-pf:disabled { opacity: 0.3; cursor: default; } .sort-pf:hover:not(:disabled) { background: var(--orange-weich); color: var(--orange-hell); } #aktionen .aktion-gross, #aktionen .aktion-gross > span:not(.sym):not(.laeuft-punkt):not(.stern) { white-space: nowrap; } .aktion-titel.coding { color: var(--gruen); display: flex; align-items: center; gap: 5px; } .analyse-zurueck { background: var(--flaeche-2); border: 1px solid var(--linie-hell); color: var(--schrift-2); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit; margin-right: auto; } .analyse-zurueck:hover { background: var(--flaeche-3); color: var(--schrift); } #seite .werkzeuge-fach { margin-left: 8px; padding-left: 6px; border-left: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } #seite .werkzeuge-fach .aktion { min-height: 30px; padding: 5px 9px; font-size: 12px; gap: 8px; border-radius: 7px; white-space: normal; background: transparent; border: 1px solid transparent; } #seite .werkzeuge-fach .aktion:hover { background: var(--flaeche-2); } #seite .werkzeuge-fach .aktion .sym { font-size: 13px; } #seite .werkzeuge-fach .aktion > span:not(.sym) { white-space: normal; line-height: 1.15; } #statusKopf { font-size: 13px; } #statusKopf .werkzeuge-pfeil { margin-left: auto; font-size: 11px; } #statusKopf .sammel-lampe { flex-shrink: 0; } .wa-hinweis { background: var(--flaeche-3); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--schrift-2); margin-bottom: 14px; } .wa-projekt { border: 1px solid var(--linie); border-left: 3px solid var(--feldfarbe, var(--orange)); border-radius: 11px; padding: 13px 14px; margin-bottom: 12px; background: var(--flaeche-2); } .wa-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wa-name { font-weight: 650; font-size: 15px; color: var(--schrift); } .wa-plan { display: inline-flex; align-items: center; gap: 6px; color: var(--schrift-2); font-size: 12.5px; } .wa-plan input[type="time"] { background: var(--flaeche-3); border: 1px solid var(--linie-hell); color: var(--schrift); border-radius: 6px; padding: 4px 7px; font-family: inherit; } .wa-jetzt { margin-left: auto; border: none; cursor: pointer; background: var(--feldfarbe, var(--orange)); color: var(--auf-orange); font-weight: 650; font-size: 13px; border-radius: 8px; padding: 8px 13px; } .wa-jetzt:disabled { opacity: 0.55; } .wa-letzter { margin-top: 8px; font-size: 12px; color: var(--schrift-3); } .wa-schritte { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .wa-schritt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--schrift-2); } .wa-schritt .wa-z { width: 16px; text-align: center; color: var(--schrift-3); } .wa-schritt.gut .wa-z { color: var(--gruen); } .wa-schritt.schlecht .wa-z { color: var(--rot); } .wa-schritt .wa-info { color: var(--schrift-3); margin-left: auto; font-size: 11px; } .wa-aufpasser { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--linie); font-size: 12px; color: var(--schrift-2); cursor: pointer; } .wa-aufpasser input { margin-top: 1px; flex-shrink: 0; } #serverPanel .analyse-inhalt { display: flex; flex-direction: column; gap: 4px; } .sv-karte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .sv-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sv-host { color: var(--schrift-2); font-size: 12.5px; font-family: ui-monospace, monospace; } .sv-abz-reihe { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .sv-abz { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--schrift-2); } .sv-abz.gut { color: var(--gruen); border-color: rgba(70,201,139,0.4); } .sv-abz.offen { color: var(--gelb); border-color: rgba(230,195,74,0.4); } .sv-abz.hier { color: var(--orange-hell); border-color: var(--orange-weich); } .sv-knopfreihe { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; } .sv-mini { font: inherit; font-size: 13px; cursor: pointer; background: var(--orange-weich); color: var(--orange-hell); border: 1px solid var(--orange-weich); border-radius: 8px; padding: 6px 12px; } .sv-mini:hover { background: var(--orange); color: var(--auf-orange); } .sv-mini.rot { background: transparent; color: var(--rot); border-color: rgba(225,87,87,0.4); } .sv-mini.rot:hover { background: rgba(225,87,87,0.15); } .sv-mini:disabled { opacity: 0.6; cursor: default; } .sv-block { margin: 4px 0 14px; } .sv-block > summary { cursor: pointer; color: var(--orange-hell); padding: 8px 2px; user-select: none; } .sv-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; } .sv-eingabe { font: inherit; background: var(--flaeche-2); color: var(--schrift); border: 1px solid var(--linie-hell); border-radius: 9px; width: 100%; } .sv-eingabe:focus { outline: none; border-color: var(--orange); } select.sv-eingabe { appearance: none; } .sv-farbe { display: flex; align-items: center; gap: 10px; color: var(--schrift-2); } .sv-farbe input[type=color] { width: 44px; height: 32px; border: none; background: none; padding: 0; cursor: pointer; } .sv-tat { font: inherit; cursor: pointer; margin-top: 2px; background: var(--orange); color: var(--auf-orange); border: none; border-radius: 9px; font-weight: 600; } .sv-tat:hover { filter: brightness(1.08); } .sv-hinweis { color: var(--schrift-2); font-size: 12.5px; } .sv-fehler { color: var(--rot); font-size: 13px; min-height: 1px; } .sv-leer { color: var(--schrift-2); padding: 8px 2px; } .sv-log { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 12.5px; background: #0F1115; color: #C6D0DA; border: 1px solid var(--linie); border-radius: 9px; padding: 10px 12px; margin-top: 8px; max-height: 320px; overflow: auto; } .adr-marke.ruhig { background: transparent; color: var(--schrift-3); border: 1px solid var(--linie); } .adr-proto { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; } .apz { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; padding: 5px 8px; border-radius: 7px; background: var(--flaeche); border: 1px solid var(--linie); } .apz-zeit { color: var(--schrift-3); min-width: 66px; } .apz-art { font-weight: 600; } .apz-art.fehlversuch { color: var(--gelb); } .apz-art.abgewiesen-gesperrt { color: var(--rot); } .apz-art.pruefung { color: var(--schrift-3); } .apz-art.anmeldung { color: var(--gruen); } .apz-pfad { font-family: ui-monospace, monospace; color: var(--schrift-2); } .apz-ua { color: var(--schrift-2); font-family: ui-monospace, monospace; word-break: break-all; } .apz-ua.blass { color: var(--schrift-3); font-style: italic; } .apz-nr { color: var(--schrift-3); margin-left: auto; font-family: ui-monospace, monospace; } #vaultPanel .analyse-inhalt { display: flex; flex-direction: column; gap: 10px; } .v-hinweis { color: var(--schrift-2); font-size: 13px; line-height: 1.5; } .v-wert { font-family: ui-monospace, monospace; resize: vertical; } .v-2fa { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 12px; text-align: center; } .v-2fa-label { color: var(--schrift-3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .v-secret { display: block; font-size: 17px; letter-spacing: 2px; margin: 6px 0; word-break: break-all; color: var(--orange-hell); } .v-otpauth { color: var(--orange-hell); font-size: 13px; } .v-kopf { display: flex; align-items: center; justify-content: space-between; } .v-zahl { color: var(--schrift-2); font-size: 13px; } .v-gruppe { margin-bottom: 12px; } .v-gruppe-titel { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--schrift-3); margin: 6px 2px; } .v-eintrag { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .v-e-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .v-e-titel { font-weight: 600; font-size: 14.5px; } .v-e-art { color: var(--schrift-3); font-size: 12px; } .v-e-user { font-size: 12px; font-weight: 600; color: var(--akzent-cyan, var(--p-cyan)); background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 30%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .v-e-sub { color: var(--schrift-3); font-size: 12px; margin-top: 2px; } .v-suche { margin: 0 0 10px; } .v-e-tat { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .v-e-wert { margin-top: 8px; padding: 8px 10px; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; white-space: pre-wrap; } .v-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--schrift-2); cursor: pointer; } .v-check input { width: 16px; height: 16px; } .v-blass { color: var(--schrift-3); } .v-kopf-tat { display: flex; gap: 6px; flex-wrap: wrap; } .rueck-filter { display: flex; gap: 6px; margin-bottom: 10px; } .rf-tab { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: var(--flaeche-2); color: var(--schrift-2); border: 1px solid var(--linie); } .rf-tab.aktiv { background: var(--orange-weich); color: var(--orange-hell); border-color: var(--orange-weich); } .rf-bulk { color: var(--akzent-cyan, var(--p-cyan)) !important; border-color: color-mix(in srgb, var(--p-cyan) 42%, transparent) !important; font-weight: 600; margin-left: auto; } .rueck-eintrag { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .rueck-eintrag.erledigt { opacity: 0.6; } .re-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .re-art { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; } .re-art.fehler { background: rgba(225,87,87,0.16); color: var(--rot); } .re-art.hinweis { background: rgba(106,159,216,0.16); color: var(--blau, #6A9FD8); } .re-wer { font-weight: 600; } .re-anzahl { color: var(--gelb); font-size: 12px; } .re-zeit { color: var(--schrift-3); font-size: 12px; margin-left: auto; } .re-status { color: var(--schrift-3); font-size: 12px; font-style: italic; } .re-text { margin: 6px 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .re-geraet { color: var(--schrift-3); font-size: 11.5px; font-family: ui-monospace, monospace; word-break: break-all; } .re-tat { display: flex; gap: 6px; margin-top: 8px; } #menueListe .klein.abschnitt.kat-kopf { cursor: pointer; user-select: none; } #menueListe .klein.abschnitt.kat-kopf::after { content: "▾"; float: right; color: var(--schrift-2); font-weight: 700; font-size: 11px; } #menueListe .klein.abschnitt.kat-kopf.kat-zu::after { content: "▸"; } #menueListe .falt-weg { display: none !important; } #menueListe .klein.abschnitt.kat-kopf.kat-zu.kat-warn::before { content: "●"; float: right; color: var(--rot); margin-left: 8px; font-size: 11px; line-height: inherit; } .gruppe-reiter { display: flex; padding: 0 4px 10px; margin-bottom: 12px; } .gruppe-reiter[hidden] { display: none !important; } .gruppe-reiter .g-reiter { font-weight: 600; cursor: pointer; white-space: nowrap; } .gruppe-reiter .g-reiter .sym { margin-right: 4px; } .gruppe-reiter .g-reiter.an { background: var(--orange); color: var(--auf-orange); border-color: var(--orange); font-weight: 700; } .gruppe-koerper .g-pane { display: none; } .gruppe-koerper .g-pane.an { display: block; } #warnInhalt .warn-fehlt { padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; background: var(--flaeche-3); border: 1px solid var(--orange); } #warnInhalt .warn-projekte { display: grid; gap: 12px; } .warn-karte { border: 1px solid var(--linie); border-radius: 12px; padding: 12px; background: var(--flaeche-2); } .warn-karte .wk-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .wk-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; } .wk-badge.gruen { background: var(--gruen); color: var(--p-weiss); } .wk-badge.rot { background: var(--rot); color: var(--p-weiss); } .wk-badge.grau { background: var(--flaeche-3); color: var(--schrift-2); } .wk-kopf .wk-zeit { margin-left: auto; color: var(--schrift-3); font-size: 11.5px; } .warn-karte .wk-zeile { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .wz.mini { padding: 5px 10px; font-size: 12px; } .wz.mini.gefahr { color: var(--rot); border-color: var(--rot); } .wk-snippet { background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; font-size: 11.5px; overflow-x: auto; white-space: pre; margin: 0 0 8px; } .wk-msgs { display: grid; gap: 6px; } .warn-msg { border-left: 3px solid var(--linie); padding: 4px 0 4px 9px; font-size: 12.5px; } .warn-msg.ist-warnung { border-left-color: var(--rot); } .warn-msg .wm-zeit { color: var(--schrift-3); font-size: 11px; margin-right: 6px; } .warn-msg .wm-text { color: var(--schrift-2); font-size: 12px; margin-top: 2px; } .warn-leer { color: var(--schrift-3); font-size: 12px; font-style: italic; } #warnInhalt .warn-push-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .wv-liste { display: grid; gap: 6px; } .vb-ampel { font-size: 12px; font-weight: 700; white-space: nowrap; } .vb-ampel.gruen { color: var(--gruen); } .vb-ampel.rot { color: var(--rot); } .vb-ampel.grau { color: var(--schrift-3); } .vb-ampel.gelb { color: var(--gelb, var(--p-orange-3)); } .vb-verdikt { font-size: 12.5px; color: var(--schrift-2); background: var(--feld, rgba(127,127,127,.08)); border-left: 3px solid var(--gruen); padding: 6px 9px; border-radius: 5px; margin: 4px 0 8px; } .vbg-warn { color: var(--gelb, var(--p-orange-3)); font-weight: 700; cursor: help; } .vbg-zeile { display: flex; align-items: center; gap: 10px; width: 100%; } .vbg-detail { font-size: 11px; color: var(--schrift-3); margin-top: 2px; padding-left: 2px; word-break: break-word; } .vbg-update { color: var(--gelb, var(--p-orange-3)); font-weight: 600; } .vb-updinfo { font-size: 11px; color: var(--gelb, var(--p-orange-3)); } .gz-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; flex-wrap: wrap; } .gz-kopf > span:first-child { font-weight: 600; } .gz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .gz-karte { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: var(--feld, rgba(127,127,127,.04)); } .gz-titel { font-size: 13.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gz-titel .vb-ampel { margin-left: auto; } .gz-gitter { display: flex; flex-direction: column; gap: 3px; } .gz-z { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; } .gz-k { color: var(--schrift-3); flex: 0 0 auto; } .gz-v { color: var(--schrift-2); text-align: right; word-break: break-word; } .gz-akt { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; } .wz.gefahr { color: var(--rot); border-color: var(--rot); } .vb-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; } .vb-tabelle th { text-align: left; color: var(--schrift-3); font-weight: 600; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--linie); } .vb-tabelle td { padding: 8px; border-bottom: 1px solid var(--linie); } .vb-tabelle td.vb-num { text-align: right; color: var(--schrift-2); } .vb-hinweis { font-size: 12.5px; color: var(--schrift-2); background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; } .vb-info-karte { border: 1px solid var(--linie); border-radius: 12px; padding: 12px; background: var(--flaeche-2); } .vb-feld { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 12.5px; color: var(--schrift-2); } .vb-feld > span { flex: 0 0 108px; } .vb-feld input, .vb-feld select { flex: 1 1 auto; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--schrift); font-size: 13px; min-width: 0; } #sitzInhalt .sz-oben { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; } #sitzInhalt .sz-liste { display: grid; gap: 12px; } .sz-server { border: 1px solid var(--linie); border-radius: 12px; padding: 12px; background: var(--flaeche-2); } .sz-server .sz-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sz-server .sz-host { color: var(--schrift-3); font-size: 12px; } .sz-server .sz-stat { color: var(--schrift-2); font-size: 12px; margin: 6px 0 10px; } .sz-server .sz-fehler { color: var(--rot); font-size: 12.5px; margin-top: 4px; } .sz-sessions { display: grid; gap: 6px; } .sz-sess { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-left: 3px solid var(--linie); padding: 4px 0 4px 9px; } .sz-sess-info { flex: 1 1 auto; min-width: 0; font-size: 13px; } .sz-sess .sz-meta { color: var(--schrift-3); font-size: 11.5px; margin-left: 4px; } .sz-tun { display: flex; gap: 6px; flex-shrink: 0; } .sz-top { color: var(--schrift-3); font-size: 11.5px; margin-top: 10px; } #sitzInhalt .sz-monitor { padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; } #sitzInhalt .sz-monitor.ruhig { border-color: var(--gruen); } #sitzInhalt .sz-monitor.aktiv { border-color: var(--rot); } .sz-logsuche { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; } .sz-logsuche .sz-unit { flex: 1 1 200px; min-width: 120px; padding: 6px 9px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--schrift); font-size: 12.5px; } .sz-werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); } .sz-werkzeuge .sz-unit { flex: 0 1 160px; min-width: 90px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--schrift); font-size: 12px; } .sz-ausgabe { margin-top: 8px; background: var(--flaeche-3); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; font-size: 11px; line-height: 1.45; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .leit-fuss { margin-top: 9px; } .leit-neustart { width: 100%; padding: 6px 10px; border: 1px solid var(--linie); background: transparent; color: var(--schrift-3); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 550; transition: border-color .15s, color .15s; } .leit-neustart:hover { border-color: var(--rot); color: var(--rot); } .rw-overlay { position: fixed; inset: 0; background: var(--p-schwarz-a50); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 300; } .rw-overlay.offen { display: flex; } .rw-box { width: min(520px, 92vw); background: var(--flaeche-2); border: 1px solid var(--linie-hell); border-radius: 14px; box-shadow: 0 20px 60px var(--p-schwarz-a50); overflow: hidden; } .rw-feld { width: 100%; box-sizing: border-box; padding: 14px 16px; background: transparent; border: none; border-bottom: 1px solid var(--linie); color: var(--schrift); font-size: 16px; outline: none; } .rw-liste { max-height: 52vh; overflow-y: auto; } .rw-zeile { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; } .rw-zeile.an, .rw-zeile:hover { background: var(--flaeche-3); } .rw-label { flex: 1; color: var(--schrift); font-size: 14px; } .rw-zeile.aktiv .rw-label { font-weight: 650; } .rw-jetzt { font-size: 11px; color: var(--schrift-3); } .rw-leer { padding: 18px 16px; color: var(--schrift-3); text-align: center; font-size: 13px; } .rw-fuss { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--linie); color: var(--schrift-3); font-size: 11.5px; } .rw-fuss b { color: var(--schrift-2, var(--schrift)); font-weight: 650; } @keyframes oxRein { from { opacity: 0; } to { opacity: 1; } } @keyframes oxKarteRein { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } .analyse.offen { animation: oxRein 0.16s ease; } .rw-overlay.offen { animation: oxRein 0.13s ease; } .rw-overlay.offen .rw-box { animation: oxKarteRein 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); } .rw-zeile.zu .rw-label { opacity: 0.82; } .rw-neu { font-size: 11px; color: var(--schrift-3); opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .analyse.offen, .analyse.offen .analyse-karte, .rw-overlay.offen, .rw-overlay.offen .rw-box { animation: none; } } .reiter { transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } @media (prefers-reduced-motion: reduce) { .reiter { transition: none; } } .update-balken.warnung { border-color: var(--rot); } .update-balken.warnung .ub-atom { animation: none; color: var(--rot); font-size: 22px; align-items: center; justify-content: center; } .vb-diagnose { margin: 4px 0 12px; } .vb-diag-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; } .vb-geraet { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 7px 10px; border: 1px solid var(--linie); border-radius: 9px; margin-bottom: 5px; font-size: 12.5px; } .vbg-name { font-weight: 600; } .vbg-nutzer { font-weight: 400; color: var(--schrift-3); margin-left: 6px; } .vbg-zeit { color: var(--schrift-3); margin-left: auto; } .vb-nachzustell { margin: 4px 0 8px; padding: 7px 10px; border: 1px solid var(--orange); border-radius: 9px; background: var(--flaeche-2); color: var(--orange); font-size: 12.5px; } .leit-waechter { margin-bottom: 14px; } .lw-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; } .lw-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; } .lw-tabelle th { color: var(--schrift-3); font-weight: 500; padding: 4px 6px; text-align: center; font-size: 11px; } .lw-tabelle td { padding: 5px 6px; text-align: center; } .lw-name { text-align: left !important; font-weight: 600; color: var(--schrift); white-space: nowrap; } .lw-punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; } .vb-stat { margin: 6px 0 12px; } .vb-stat-kopf { font-size: 12px; color: var(--schrift-2, var(--schrift)); margin-bottom: 6px; } .vb-stat-balken { display: flex; align-items: flex-end; gap: 8px; height: 48px; } .vbs-tag { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; } .vbs-saeule { width: 14px; background: var(--rot); border-radius: 3px 3px 0 0; display: flex; flex-direction: column-reverse; overflow: hidden; } .vbs-ok { width: 100%; background: var(--gruen); } .vbs-l { font-size: 10px; color: var(--schrift-3); } .nu-app-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .nu-app-nutzer { display: flex; flex-direction: column; gap: 4px; } .nu-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 8px; font-size: 12.5px; } .nu-nutzer2 { flex: 1; font-weight: 550; color: var(--schrift); } .nu-stat { color: var(--schrift-3); font-size: 11.5px; } .nu-stat.gesperrt { color: var(--rot); font-weight: 650; } .nu-stat.leer { opacity: .5; } .nu-schalt.frei { border-color: var(--gruen); color: var(--gruen); } .nu-feed { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 9px; padding: 6px 8px; } .nu-ev { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 0; } .nu-ev.warn .nu-ev-was { color: var(--rot); } .nu-ev-zeit { color: var(--schrift-3); flex: 0 0 auto; font-size: 11px; min-width: 68px; } .nu-ev-wer { font-weight: 600; color: var(--schrift); flex: 0 0 auto; } .nu-ev-was { color: var(--schrift-2, var(--schrift-3)); } .boot { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 50% at 12% 8%, var(--nebel-i), transparent 60%), radial-gradient(55% 45% at 90% 92%, var(--nebel-m), transparent 62%), radial-gradient(150% 120% at 50% 0%, var(--p-violett-dunkel-3) 0%, #070510 55%, var(--p-violett-dunkel-5) 100%); transition: opacity .55s ease; will-change: opacity; transform: translateZ(0); backface-visibility: hidden; } .boot.weg { opacity: 0; pointer-events: none; } .boot-mitte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; } .boot-atom { margin-bottom: 20px; display: grid; place-items: center; } .boot-atom::before { content: ""; position: absolute; border-radius: 50%; animation: bootHalo 2.4s ease-in-out infinite; } .boot-atom-svg { position: relative; animation: bootEinschweben .7s cubic-bezier(.2,.8,.2,1) both; } .boot-atom::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgb(var(--neon-c) / .5); -webkit-mask: none; animation: bootDreh 9s linear infinite; } @keyframes bootDreh { to { transform: rotate(360deg); } } @keyframes bootHalo { 0%,100% { transform: scale(.95); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes bootEinschweben { from { transform: scale(.6) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } } .boot-unter { margin-top: 6px; font-size: 12px; color: var(--schrift-3); font-family: "Cascadia Mono",monospace; min-height: 16px; } .boot-balken { margin-top: 22px; width: min(320px, 78vw); height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; } .boot-balken > span { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--p-cyan), var(--orange)); box-shadow: 0 0 10px var(--p-orange-a60); transform: scaleX(0); transform-origin: left center; will-change: transform; transition: transform .45s cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce) { .boot-atom::before, .boot-atom::after, .boot-atom-svg { animation: none; } .boot-atom-svg animateMotion { display: none; } .boot { transition: opacity .2s ease; } .boot.weg { transform: none; } } .willk { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 20%, var(--flaeche) 0%, var(--grund-2) 46%, var(--grund) 100%); overflow: hidden; transition: opacity .5s ease, transform .5s ease; } .willk.weg { opacity: 0; transform: scale(1.05); pointer-events: none; } .willk-gitter { position: absolute; inset: -2px; background-image: linear-gradient(var(--p-cyan-a08) 1px, transparent 1px), linear-gradient(90deg, var(--p-cyan-a08) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(70% 60% at 50% 42%, var(--p-schwarz) 0%, transparent 80%); -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, var(--p-schwarz) 0%, transparent 80%); } .willk-karte { position: relative; z-index: 1; text-align: center; padding: 30px 34px; border-radius: 18px; background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche)); border: 1px solid var(--linie); box-shadow: 0 24px 70px var(--p-schwarz-a50), 0 0 40px rgba(255,159,67,.08); width: min(380px, 88vw); animation: willkRein .5s cubic-bezier(.2,.8,.2,1) both; } @keyframes willkRein { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .willk-marke { font-family: "Cascadia Mono","JetBrains Mono",Consolas,monospace; font-size: 12px; letter-spacing: .48em; text-indent: .48em; color: var(--schrift-3); margin-bottom: 14px; } .willk-gruss { font-size: 25px; font-weight: 700; color: var(--schrift); text-shadow: 0 0 18px rgba(255,159,67,.28); } .willk-sub { font-size: 12.5px; color: var(--schrift-3); margin-top: 5px; font-family: "Cascadia Mono",monospace; min-height: 16px; } .willk-checks { margin: 18px 0 6px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .willk-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--schrift-2); font-family: "Cascadia Mono",monospace; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; } .willk-check.da { opacity: 1; transform: none; } .willk-check .wc-sym { width: 18px; text-align: center; } .willk-check.ok .wc-sym { color: var(--gruen); } .willk-check.warn .wc-sym { color: var(--orange); } .willk-check.warn { color: var(--orange); } .willk-check .wc-text { flex: 1; } .willk-fort { margin-top: 18px; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; } .willk-fort > span { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--p-cyan), var(--orange)); box-shadow: 0 0 10px var(--p-orange-a60); } @media (prefers-reduced-motion: reduce) { .willk, .willk-karte, .willk-check { transition: none; animation: none; } .willk.weg { transform: none; } } .bus-stat { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; } .bus-block { margin-bottom: 16px; } .bus-titel { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--schrift-3); margin-bottom: 8px; font-family: "Cascadia Mono", monospace; } .bus-neuregel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; } .bus-neuregel select, .bus-neuregel input { background: var(--flaeche-2); color: var(--schrift); border: 1px solid var(--linie); border-radius: 7px; padding: 6px 8px; font-size: 13px; } .bus-neuregel input { width: 140px; } .bus-erl { display: flex; align-items: center; gap: 5px; color: var(--schrift-2); } .bus-regeln { display: flex; flex-direction: column; gap: 6px; } .bus-regel { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--linie); border-radius: 8px; font-size: 13px; font-family: "Cascadia Mono", monospace; } .bus-regel.erlaubt { border-left: 3px solid var(--gruen); } .bus-regel.verbot { border-left: 3px solid var(--rot); } .bus-regel .br-pfeil { font-weight: 600; } .bus-regel .br-art { color: var(--schrift-3); } .bus-regel .br-ent { margin-left: auto; font-size: 12px; } .bus-regel.erlaubt .br-ent { color: var(--gruen); } .bus-regel.verbot .br-ent { color: var(--rot); } .bus-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; } .bus-tab th { text-align: left; color: var(--schrift-3); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--linie); font-size: 11px; } .bus-tab td { padding: 5px 8px; border-bottom: 1px solid var(--linie); } .bus-status { font-family: "Cascadia Mono", monospace; font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--flaeche-2); } .bus-z.offen .bus-status { color: var(--orange); } .bus-z.zugestellt .bus-status { color: var(--gruen); } .bus-z.abgelaufen .bus-status { color: var(--schrift-3); } .bus-keys { display: flex; flex-direction: column; gap: 6px; } .bus-key { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .bus-key .bk-name { flex: 0 0 130px; font-weight: 600; } .bus-key .bk-code { flex: 1; color: var(--schrift-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root { --akzent-cyan: #4CC5C5; } .analyse-karte { position: relative; overflow: hidden; } .analyse-karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; } .analyse-knopf { transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; position: relative; } .analyse-knopf:hover { border-color: color-mix(in srgb, var(--akzent-cyan) 55%, var(--linie)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent-cyan) 30%, transparent), 0 6px 18px var(--p-schwarz-a25); } .reiter.aktiv, .reiter.an { position: relative; } .reiter.aktiv::after, .reiter.an::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--akzent-cyan)); box-shadow: 0 0 8px rgba(255,159,67,.5); } @media (prefers-reduced-motion: reduce) { .analyse-knopf, .wz, .sperre-knopf { transition: none; } } .n-online { color: var(--gruen); font-weight: 600; } .boot-gruss { margin-top: 20px; min-height: 46px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .boot-gruss .bg-hallo { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--p-violett-hell-2) 70%, var(--schrift-3)); } .boot-gruss .bg-name { font-size: 34px; font-weight: 600; letter-spacing: -0.3px; color: #f6f4ff; } .boot .willk-checks { margin-top: 12px; width: min(320px, 78vw); } .reiterleiste { position: relative; } .reiterleiste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--akzent-cyan) 45%, transparent), transparent); pointer-events: none; } .n-kap { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font-size: 11.5px; color: var(--schrift-3); } .terminal-huelle.sichtbar::after { bottom: 4px; right: 4px; border-bottom: 2px solid var(--orange, var(--p-orange)); border-right: 2px solid var(--orange, var(--p-orange)); border-bottom-right-radius: 4px; box-shadow: 2px 2px 10px var(--p-orange-a30); } .leit-prozesse { margin: 6px 0 2px; } .leit-proz-kopf { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--schrift-3); margin-bottom: 3px; font-family: "Cascadia Mono", monospace; } .leit-proz { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-family: "Cascadia Mono", monospace; padding: 1px 0; } .leit-proz .lp-name { flex: 1; color: var(--schrift-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leit-proz .lp-cpu { flex: 0 0 46px; text-align: right; color: var(--schrift-3); } .leit-proz .lp-cpu.warnt { color: var(--gelb, #E6C34A); } .leit-proz .lp-cpu.schlecht { color: var(--rot); } .leit-proz .lp-mem { flex: 0 0 42px; text-align: right; color: var(--schrift-3); } .bus-gespraech { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; } .bus-gespr { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-family: "Cascadia Mono", monospace; padding: 3px 6px; border-radius: 6px; } .bus-gespr.raus { background: color-mix(in srgb, var(--orange) 8%, transparent); } .bus-gespr.rein { background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 8%, transparent); } .bus-gespr .bg-wer { color: var(--schrift-3); flex: 0 0 auto; font-weight: 600; } .bus-gespr .bg-art { color: var(--schrift-3); flex: 0 0 auto; } .bus-gespr .bg-text { flex: 1; color: var(--schrift); word-break: break-word; } .bus-gespr .bg-zeit { color: var(--schrift-3); flex: 0 0 auto; font-size: 10.5px; } #einstellungen #menueListe .klein.abschnitt { position: relative; margin-top: 16px; } #einstellungen #menueListe .klein.abschnitt::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--orange), var(--akzent-cyan, var(--p-cyan))); box-shadow: 0 0 7px rgb(var(--neon-c) / .5); } #einstellungen #menueListe .analyse-knopf { display: flex; align-items: center; gap: 10px; border-left: 2px solid transparent; transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease; } #einstellungen #menueListe .analyse-knopf[hidden] { display: none !important; } #einstellungen #menueListe .analyse-knopf:hover { border-left-color: var(--akzent-cyan, var(--p-cyan)); transform: translateX(2px); } #einstellungen #menueListe .analyse-knopf .sym { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 12%, var(--flaeche-2)); color: var(--orange); font-size: 14px; box-shadow: inset 0 0 0 1px var(--linie); } .reiter.aktiv { border-radius: 7px 7px 0 0; } .reiter:hover:not(.aktiv) { background: color-mix(in srgb, var(--schrift) 5%, transparent); border-radius: 7px 7px 0 0; } .menu-suche { width: 100%; margin: 10px 0 4px; padding: 9px 11px; border-radius: 9px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--schrift); font-size: 13px; box-sizing: border-box; } .menu-suche:focus { outline: none; border-color: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 55%, var(--linie)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 30%, transparent); } #menueListe.sucht .falt-weg { display: flex !important; } #menueListe.sucht .such-weg { display: none !important; } .insp-kopf { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; font-family: "Cascadia Mono", monospace; } .insp-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .insp-block { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: var(--feld, rgba(127,127,127,.04)); } .insp-titel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-cyan, var(--p-cyan)); margin-bottom: 8px; font-family: "Cascadia Mono", monospace; } .insp-liste { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; } .insp-z { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-family: "Cascadia Mono", monospace; } .insp-z .iz-n { color: var(--orange); flex: 0 0 44px; text-align: right; } .insp-z .iz-ip { color: var(--schrift-2); word-break: break-all; } .insp-z .ip-cpu { flex: 0 0 46px; text-align: right; color: var(--schrift-3); } .insp-z .ip-cpu.warnt { color: var(--gelb, #E6C34A); } .insp-z .ip-cpu.schlecht { color: var(--rot); } .insp-z .ip-mem { flex: 0 0 42px; text-align: right; color: var(--schrift-3); } .insp-z .ip-user { flex: 0 0 72px; color: var(--akzent-cyan, var(--p-cyan)); overflow: hidden; text-overflow: ellipsis; } .insp-z .ip-comm { flex: 1; color: var(--schrift); overflow: hidden; text-overflow: ellipsis; } .insp-ports { display: flex; flex-wrap: wrap; gap: 5px; } .insp-port { font-family: "Cascadia Mono", monospace; font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--flaeche-2); color: var(--schrift-2); border: 1px solid var(--linie); } .insp-mono { font-family: "Cascadia Mono", monospace; font-size: 11px; color: var(--schrift-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leit-inspekt { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 12px; } .leit-inspekt:hover { border-color: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 55%, var(--linie)); color: var(--schrift); } .insp-auto { margin: 0 0 12px; padding: 8px 11px; border-radius: 8px; font-size: 12px; font-family: "Cascadia Mono", monospace; color: var(--schrift-2); background: color-mix(in srgb, var(--orange) 10%, transparent); border-left: 3px solid var(--orange); } .boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(125% 100% at 50% 46%, transparent 52%, var(--p-schwarz-a50) 100%); } @keyframes bootTitel { 0%,100% { text-shadow: 0 0 18px rgba(120,160,210,.38), 0 0 2px var(--p-weiss-a50); } 50% { text-shadow: 0 0 30px rgba(150,190,230,.6), 0 0 60px rgba(90,120,180,.28), 0 0 2px var(--p-weiss-a60); } } .boot-gruss .bg-name { text-shadow: 0 0 20px rgba(150,130,240,.45), 0 0 40px rgba(120,90,220,.28), 0 1px 0 var(--p-schwarz-a50); } @media (prefers-reduced-motion: reduce) { .boot-marke { animation: none !important; } } .boot-atom { position: relative; overflow: visible; transform: perspective(760px) rotateX(10deg); } @media (prefers-reduced-motion: reduce) { .boot-atom { transform: none; } } .bl-kopf { font-size: 13px; } .bl-liste { display: flex; flex-direction: column; gap: 6px; } .bl-e { border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; border-left: 3px solid var(--linie); } .bl-art { font-family: "Cascadia Mono", monospace; font-size: 11px; color: var(--schrift-3); text-transform: uppercase; } .bl-titel { font-weight: 600; font-size: 13px; flex: 1; min-width: 120px; } .bl-status { font-size: 11px; font-family: "Cascadia Mono", monospace; } .bl-status.gut { color: var(--gruen); } .bl-status.schlecht { color: var(--rot); } .bl-status.grau { color: var(--schrift-3); } .bl-zeit { font-size: 11px; color: var(--schrift-3); } .bl-text { font-size: 12px; color: var(--schrift-2); margin-top: 3px; word-break: break-word; } .bl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .bl-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .bl-tab { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer; } .bl-tab.an { background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 18%, var(--flaeche-2)); border-color: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 55%, var(--linie)); color: var(--schrift); } .bl-info { font-size: 11px; color: var(--schrift-3); margin-left: auto; } .bl-tag { font-size: 10.5px; letter-spacing: .06em; color: var(--schrift-3); text-transform: uppercase; font-family: "Cascadia Mono", monospace; margin: 10px 0 5px; } .bl-e.erledigt { opacity: .5; } .bl-e-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bl-ok { margin-left: auto; background: none; border: 1px solid var(--linie); color: var(--gruen); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 13px; flex-shrink: 0; } .bl-ok:hover { background: var(--gruen); color: #06231a; } .bl-e.bl-navi { cursor: pointer; } .bl-e.bl-navi:hover { border-color: var(--akzent-cyan, var(--p-cyan)); } .bl-pfeil { margin-left: auto; color: var(--schrift-3); font-size: 15px; font-weight: 700; flex-shrink: 0; } .bl-e.bl-navi:hover .bl-pfeil { color: var(--akzent-cyan, var(--p-cyan)); } .farb-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; } .farb-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); background: var(--f); cursor: pointer; padding: 0; transition: transform .12s ease, box-shadow .12s ease; } .farb-swatch:hover { transform: scale(1.12); } .farb-swatch.an { border-color: var(--p-weiss); box-shadow: 0 0 0 2px var(--f), 0 0 10px var(--f); } .farb-eigen { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--linie); cursor: pointer; } .farb-eigen input[type="color"] { width: 40px; height: 40px; margin: -7px; border: none; background: none; cursor: pointer; } .design-opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--schrift-2); margin: 4px 0 8px; } html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .wolke { opacity: .5; } .k-atom { opacity: .10 !important; filter: drop-shadow(0 0 10px rgba(140,110,220,.4)); } @media (prefers-reduced-motion: reduce) { .sperre .k-atom { animation: none; } } .leit-wartung { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 12px; margin-left: 6px; } .leit-wartung:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--linie)); color: var(--schrift); } .fa-e { border: 1px solid var(--linie); border-left: 3px solid var(--akzent-cyan, var(--p-cyan)); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; } .fa-kopf { display: flex; align-items: center; gap: 8px; } .fa-id { font-family: "Cascadia Mono", monospace; font-size: 11px; color: var(--akzent-cyan, var(--p-cyan)); } .fa-zeit { font-size: 11px; color: var(--schrift-3); } .fa-kopf .wz.mini { margin-left: 0; } .fa-kopf .fa-weg { margin-left: auto; } .fa-frage { font-weight: 600; margin-top: 6px; font-size: 13.5px; color: var(--schrift); } .fa-antwort { margin-top: 5px; font-size: 13px; color: var(--schrift-2); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .pt-projekt { border: 1px solid var(--linie); border-left: 3px solid var(--pf, var(--orange)); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .pt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pt-name { font-weight: 650; } .pt-zahl { font-size: 11px; color: var(--schrift-3); } .pt-play { margin-left: auto; } .pt-alle-leiste { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 10px; } .pt-alle-leiste .pt-los-alle { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; padding: 11px 14px; line-height: 1; } .pt-alle-leiste .pt-los-glyph { font-size: 11px; line-height: 1; display: inline-flex; transform: translateY(0.5px); } .pt-alle-leiste .pt-auto-notiz { font-size: 11px; color: var(--schrift-3); text-align: center; } .pt-liste { display: flex; flex-direction: column; gap: 4px; } .pt-item { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; } .pt-item:not(.st-pruefung) .pt-text { cursor: pointer; } .pt-kopf { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pt-item.auf .pt-kopf { -webkit-line-clamp: unset; display: block; } .pt-besch { display: none; color: var(--schrift-3); font-size: 12px; margin-top: 3px; } .pt-item.auf .pt-besch { display: block; } .pt-item.erledigt .pt-text { text-decoration: line-through; color: var(--schrift-3); } .pt-check, .pt-mv { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex-shrink: 0; font-size: 13px; } .pt-mv.gefahr:hover { border-color: var(--rot); color: var(--rot); } .pt-text { flex: 1; min-width: 0; word-break: break-word; } .pt-mv[data-tat="abnehmen"], :root[data-zeiger="grob"] .pt-mv[data-tat="abnehmen"] { width: auto; min-width: 26px; padding: 0 10px; font-size: 12px; white-space: nowrap; } .pt-mv.gut { border-color: var(--gruen); color: var(--gruen); } .pt-mv.gut:hover { background: color-mix(in srgb, var(--gruen) 14%, transparent); } .pt-status { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; border: 1px solid var(--linie); } .pt-gesendet { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--p-gruen); vertical-align: middle; white-space: nowrap; } .pt-sent { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--akzent-cyan, var(--p-cyan)); background: color-mix(in srgb, var(--p-cyan) 14%, transparent); padding: 1px 6px; border-radius: 6px; white-space: nowrap; } .pt-status.s-pruef { color: var(--gelb); border-color: color-mix(in srgb, var(--gelb) 45%, transparent); background: color-mix(in srgb, var(--gelb) 12%, transparent); } .pt-status.s-ok { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 45%, transparent); background: color-mix(in srgb, var(--gruen) 12%, transparent); } .pt-status.s-ab { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, transparent); background: color-mix(in srgb, var(--rot) 12%, transparent); } .pt-nachweis { font-size: 11px; color: var(--schrift-3); margin-top: 3px; word-break: break-word; line-height: 1.35; } .pt-nachweis.pt-grund { color: var(--rot); } .pt-pruefblock { border: 1px solid color-mix(in srgb, var(--gelb) 35%, transparent); border-radius: 9px; padding: 7px 9px; margin-bottom: 9px; background: color-mix(in srgb, var(--gelb) 6%, transparent); } .pt-blocktitel { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gelb); margin-bottom: 5px; } .pt-item.st-pruefung { align-items: flex-start; flex-wrap: wrap; } .pt-item.st-pruefung .pt-text, .pt-item.st-pruefung .pt-titel { text-decoration: none !important; color: var(--schrift) !important; } .pt-item.st-pruefung .pt-text { flex: 1 1 100%; } .pt-item.st-pruefung .pt-mv { margin-top: 4px; } .pt-neu { margin-top: 8px; } .pt-eingabe { flex: 1; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--schrift); border-radius: 7px; padding: 7px 9px; font-size: 13px; } @media (max-width: 500px) { html, body { max-width: 100vw; overflow-x: hidden; } .analyse { padding: 0; align-items: stretch; justify-content: flex-start; } .analyse-karte, .analyse-karte.breit { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 0; box-sizing: border-box; } .analyse-karte, .analyse-karte.breit { display: flex; flex-direction: column; } .analyse-kopf { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; padding: calc(10px + max(env(safe-area-inset-top), 46px)) 16px 10px; } .gruppe-reiter { flex: 0 0 auto; } .gruppe-koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .analyse-inhalt { max-width: 100%; flex: 1 1 auto; min-height: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .leit-werte { grid-template-columns: repeat(2, 1fr); } .gz-liste, .insp-gitter { grid-template-columns: 1fr; } .farb-wahl { gap: 6px; } .gruppe-reiter, .bl-kopf, .bl-tabs, .fa-kopf, .bus-stat, .insp-kopf, .leit-fuss, .leit-kopf, .n-kopf, .n-knoepfe, .n-recht, .n-cc, .gz-akt, .bus-neuregel, .pt-kopf, .pt-neu { flex-wrap: wrap; } .bus-tab, .nu-tabelle { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .leit-wert .zahl, .gz-v, .bl-titel, .fa-frage, .insp-z .ip-comm, .bus-key .bk-code { white-space: normal; word-break: break-word; } .leit-name, .n-name, .bl-titel { min-width: 0; } } .pt-archiv { margin-top: 12px; border-top: 1px solid var(--linie); } .pt-archiv > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 4px; font-size: 12.5px; font-weight: 600; color: var(--schrift-2); } .pt-archiv > summary::-webkit-details-marker { display: none; } .pt-archiv > summary::before { content: "\25B8"; color: var(--schrift-3); font-size: 11px; flex: 0 0 auto; transition: transform .15s ease; } .pt-archiv[open] > summary::before { transform: rotate(90deg); } .pt-archiv:not(.pt-marek) .pt-item .pt-text { color: var(--schrift-3); text-decoration: line-through; } .pt-marek .pt-item .pt-text { text-decoration: none; } .au-block-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--schrift-3); margin: 16px 0 6px; } .au-liste { display: flex; flex-direction: column; gap: 8px; } .au-item { display: flex; align-items: flex-start; gap: 8px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px; font-size: 13px; } .au-item.erledigt .au-titel, .au-item.erledigt .au-mehr { text-decoration: line-through; color: var(--schrift-3); } .au-check { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 6px; width: 26px; height: 26px; min-width: 26px; cursor: pointer; font-size: 14px; flex-shrink: 0; font-family: inherit; } .au-text { flex: 1; min-width: 0; word-break: break-word; } .au-titel { display: block; } .au-mehr { color: var(--schrift-2); margin-top: 3px; font-size: 12.5px; line-height: 1.45; } .au-meta { color: var(--schrift-3); font-size: 11.5px; margin-top: 4px; } .au-akt { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; } .au-zuschieb { font: inherit; font-size: 12px; background: var(--flaeche-3); color: var(--schrift-2); border: 1px solid var(--linie); border-radius: 8px; padding: 4px 6px; color-scheme: dark; max-width: 120px; } .au-mv { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex-shrink: 0; font-family: inherit; } .au-mv.gefahr:hover { border-color: var(--rot); color: var(--rot); } .au-pop { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 20px) 20px max(env(safe-area-inset-bottom), 20px); background: var(--p-schwarz-a50); } .pk-text { padding: 2px 2px 4px; font-size: 14.5px; line-height: 1.5; color: var(--schrift-2); } #pkPopBody .us-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } #pkPopBody .ap-fuss { margin-top: 14px; } .ap-karte { background: var(--grund); border: 1px solid var(--linie); border-radius: 16px; padding: 18px; width: 100%; max-width: 440px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px var(--p-schwarz-a45); } .ap-kopf { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .ap-liste { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; -webkit-overflow-scrolling: touch; } .ap-item { display: flex; align-items: flex-start; gap: 8px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px; font-size: 13px; } .ap-item.erledigt .au-text { text-decoration: line-through; color: var(--schrift-3); } #startPopInhalt { display: flex; flex-direction: column; gap: 0; } #startPopInhalt .sp-kopf { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--schrift-3); margin: 12px 2px 2px; } #startPopInhalt .sp-zeile { display: flex; align-items: baseline; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--linie); } #startPopInhalt .sp-zeile:last-child { border-bottom: 0; } #startPopInhalt .sp-titel { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #startPopInhalt .sp-datum { flex: 0 0 auto; font-size: 11px; color: var(--schrift-3); } #startPopInhalt .sp-klick { cursor: pointer; } #startPopInhalt .sp-pfeil { flex: 0 0 auto; color: var(--schrift-3); font-size: 11px; transition: transform .15s ease; } #startPopInhalt .sp-offen .sp-pfeil { transform: rotate(90deg); } #startPopInhalt .sp-offen .sp-titel { white-space: normal; overflow: visible; text-overflow: clip; } #startPopInhalt .sp-detail { padding: 4px 4px 8px; } #startPopInhalt .sp-detail .tb-abschnitt { margin-top: 6px; } #startPopInhalt .sp-detail .dw-titel { font-size: 12px; color: var(--schrift-2); margin-bottom: 2px; } @keyframes hinweisPuls { 0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 60%, transparent), 0 0 16px -2px var(--akzent); } 100% { box-shadow: 0 0 0 0 transparent; } } .hinweis-puls { animation: hinweisPuls 1.5s ease-out; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .hinweis-puls { animation: none; } } #startPopInhalt .sp-bericht .sp-sub { flex: 0 0 auto; font-size: 11.5px; color: var(--schrift-2); } #startPopInhalt .sp-bericht .sp-titel { font-weight: 600; } #startPopInhalt .sp-bericht::before { content: ""; align-self: center; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 99px; background: var(--gruen); } #startPopInhalt .sp-bericht.acht::before { background: var(--gelb); } .ap-fuss { display: flex; gap: 10px; margin-top: 16px; justify-content: space-between; align-items: center; } .ap-fuss .k { font: inherit; transition: transform 140ms cubic-bezier(0.23,1,0.32,1); } .ap-fuss .k:active { transform: scale(0.97); } @media (max-width: 480px) { .ap-fuss { flex-direction: column-reverse; align-items: stretch; gap: 8px; } .ap-fuss .k { width: 100%; justify-content: center; } } .pt-badge { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 20px; font-size: 10px; font-weight: 700; margin-left: 4px; } .gruppe-reiter .g-reiter { border-top: 2px solid transparent; } .gruppe-reiter .g-reiter.an { border-top-color: var(--pf, var(--akzent-cyan, var(--p-cyan))); } .fa-topf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fa-topf select { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--schrift); border-radius: 7px; padding: 5px 8px; } .fa-e.erledigt { opacity: .55; } .fa-check { background: none; border: 1px solid var(--linie); color: var(--gruen); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; } .fa-loesung { margin-top: 6px; } .fa-loesung summary { cursor: pointer; font-size: 12px; color: var(--akzent-cyan, var(--p-cyan)); } .pt-tag { display: inline-block; padding: 1px 7px; border-radius: 20px; background: var(--pf, var(--orange)); color: #12141A; font-size: 10.5px; font-weight: 700; flex-shrink: 0; } .leit-oswartung{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0;padding:.5rem .6rem;border:1px solid rgba(255,180,60,.35);border-radius:10px;background:rgba(255,170,50,.07)} .leit-oswartung .osw-text{font-size:11.5px;flex:1 1 auto;min-width:8rem} .leit-oswartung .osw-text.warnt{color:#ffb43c} .leit-oswartung .osw-text.gut{color:var(--akzent-cyan,var(--p-cyan))} .leit-oswartung .osw-text.schlecht{color:var(--p-rot-3)} .osw-knopf{font:inherit;font-size:11px;padding:.34rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:var(--p-weiss-a06);color:inherit;cursor:pointer;white-space:nowrap} .osw-knopf.stark{border-color:rgba(255,150,50,.6);background:rgba(255,150,50,.16);color:#ffcf9e} .osw-knopf.stark:hover{background:rgba(255,150,50,.28)} @media(max-width:500px){.leit-oswartung .osw-knopf{flex:1 1 100%}} .brain-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem} .brain-tab{font:inherit;font-size:12px;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:var(--p-weiss-a05);color:inherit;cursor:pointer} .brain-tab.an{border-color:var(--akzent,var(--p-orange));background:color-mix(in srgb,var(--akzent,var(--p-orange)) 22%,transparent);color:var(--p-weiss)} .brain-hint{font-size:11px;opacity:.72;margin:.3rem 0 .7rem;line-height:1.4} .brain-hint code{background:var(--p-weiss-a08);padding:.05rem .3rem;border-radius:5px;font-size:.9em} .brain-block{margin:0 0 10px;padding:12px 14px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2)} .brain-block-kopf{font-weight:600;margin-bottom:.4rem;font-size:12.5px} .brain-ta{width:100%;box-sizing:border-box;font:inherit;font-size:11.5px;line-height:1.45;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--p-weiss-a14);background:var(--p-schwarz-a25);color:inherit;resize:vertical} .brain-zeile{display:flex;align-items:center;gap:.6rem;margin-top:.45rem} .brain-save{font:inherit;font-size:11px;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--akzent,var(--p-orange));background:color-mix(in srgb,var(--akzent,var(--p-orange)) 18%,transparent);color:var(--p-weiss);cursor:pointer} .brain-status{font-size:11px;opacity:.85} .brain-neu{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .9rem} .brain-neu select,.brain-neu input{font:inherit;font-size:11.5px;padding:.4rem .55rem;border-radius:8px;border:1px solid var(--p-weiss-a14);background:var(--p-schwarz-a25);color:inherit} .brain-neu #brGelWas{flex:1 1 14rem} .brain-neu button{font:inherit;font-size:11.5px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--akzent,var(--p-orange));background:color-mix(in srgb,var(--akzent,var(--p-orange)) 18%,transparent);color:var(--p-weiss);cursor:pointer} .brain-gel{margin:.5rem 0;padding:.6rem .7rem;border:1px solid var(--p-weiss-a10);border-radius:10px;background:var(--p-weiss-a03)} .bg-kopf{display:flex;align-items:center;gap:.5rem;font-size:10.5px;opacity:.8;margin-bottom:.3rem} .bg-proj{background:var(--p-weiss-a10);padding:.05rem .45rem;border-radius:999px} .bg-zeit{margin-left:auto} .bg-weg{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;opacity:.6} .bg-weg:hover{opacity:1} .bg-was{font-size:12.5px;line-height:1.4} .bg-zu{font-size:11px;opacity:.82;margin-top:.25rem} .brain-patch{margin:.4rem 0;padding:.5rem .7rem;border-left:2px solid var(--akzent,var(--p-orange));background:var(--p-weiss-a03);border-radius:0 8px 8px 0} .bp-kopf{display:flex;gap:.6rem;font-size:10px;opacity:.7} .bp-hash{font-family:ui-monospace,monospace} .bp-titel{font-size:12px;margin-top:.15rem} .bp-mehr{margin-top:.3rem;font-size:11px} .bp-mehr pre{white-space:pre-wrap;word-break:break-word;background:var(--p-schwarz-a25);padding:.5rem;border-radius:7px;font-size:10.5px;overflow-x:auto} @media(max-width:500px){.brain-neu select,.brain-neu input,.brain-neu button{flex:1 1 100%}} .wz.an{color:var(--akzent,var(--p-orange));background:color-mix(in srgb,var(--akzent,var(--p-orange)) 20%,transparent);border-radius:10px} .cc-hinweis{font-size:11.5px;opacity:.75;line-height:1.45;margin-bottom:.9rem} .cc-schnell{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem} .cc-btn{font:inherit;font-size:11.5px;padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:var(--p-weiss-a06);color:inherit;cursor:pointer} .cc-feld{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.6rem 0} .cc-feld label{font-size:12px} .cc-feld input[type=range]{flex:1 1 12rem;max-width:60%} .cc-feld select{font:inherit;font-size:11.5px;padding:.35rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:var(--p-schwarz-a25);color:inherit} .cc-check{display:flex;align-items:center;gap:.5rem;font-size:12px;margin:.55rem 0} .pt-titel{font-weight:700;margin-right:.15rem} .pt-eingabe-titel{flex:0 0 40%;min-width:8rem;font:inherit;font-size:12px;padding:.4rem .55rem;border-radius:8px 0 0 8px;border:1px solid var(--p-weiss-a14);background:rgba(0,0,0,.22);color:inherit} .pt-neu{display:flex;flex-wrap:wrap;gap:.3rem} @media(max-width:500px){.pt-eingabe-titel{flex:1 1 100%;border-radius:8px}} html:not([data-thema]) body { background: radial-gradient(1200px 820px at 10% -12%, rgba(120,92,220,.16), transparent 60%), radial-gradient(980px 720px at 108% 6%, rgba(58,186,204,.12), transparent 55%), radial-gradient(760px 900px at 50% 122%, rgba(150,72,190,.10), transparent 60%), #07080D; } :root[data-galaxy-ton="mono"] body { background: var(--grund) !important; } html:not([data-thema]) .seite { background: radial-gradient(130% 42% at 50% -6%, color-mix(in srgb, var(--akzent, var(--p-orange)) 12%, transparent), transparent 70%), linear-gradient(180deg, #0b0e18 0%, #070810 62%, var(--p-blau-dunkel) 100%); border-right: 1px solid color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 16%, var(--linie)); } .marke-text { text-shadow: 0 0 12px var(--glut), 0 0 22px rgb(var(--neon-c) / .22); } .marke { border-bottom: 1px solid color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 18%, var(--linie)); } #seite .klein.abschnitt { letter-spacing: 1.4px; font-weight: 700; opacity: .95; } #seite .analyse-knopf { border: 1px solid transparent; border-radius: 10px; transition: background .15s, box-shadow .15s, border-color .15s; } html:not([data-thema]) .analyse-karte { background: linear-gradient(180deg, rgb(var(--neon-c) / .045), transparent 32%), linear-gradient(180deg, #0c0f15, #080a10); border: 1px solid rgb(var(--neon-c) / .12); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgb(var(--neon-c) / .09); } .analyse-inhalt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .analyse-inhalt select, .analyse-inhalt textarea { border-radius: 9px; color: var(--schrift); transition: border-color .15s, box-shadow .15s; } .analyse-inhalt input:not([type=checkbox]):not([type=radio]):focus, .analyse-inhalt select:focus, .analyse-inhalt textarea:focus { outline: none; border-color: var(--akzent-cyan, var(--p-cyan)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 18%, transparent); } .gruppe-reiter { gap: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--akzent-cyan,var(--p-cyan)) 14%, transparent); padding-bottom: .5rem; } .g-reiter:hover { border-color: color-mix(in srgb, var(--akzent-cyan,var(--p-cyan)) 40%, transparent); } .analyse-inhalt table { border-collapse: collapse; width: 100%; } .analyse-inhalt th, .analyse-inhalt td { border-bottom: 1px solid color-mix(in srgb, var(--akzent-cyan,var(--p-cyan)) 10%, var(--linie)); } .analyse-inhalt thead th { color: var(--akzent-cyan, var(--p-cyan)); font-weight: 600; letter-spacing: .3px; } .analyse-inhalt::-webkit-scrollbar-thumb, .analyse-karte ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--akzent-cyan,#4CC5C5) 35%, var(--linie)); } #seite .farb-wahl { gap: 8px; padding: 8px 4px 4px; } #seite .design-opt { display: flex; align-items: center; gap: .5rem; font-size: 12.5px; opacity: .9; margin-top: 6px; } .einst-block{margin:0 0 12px;padding:12px 14px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2)} .einst-titel{font-weight:700;font-size:13px;margin-bottom:.6rem;color:var(--akzent-cyan,var(--p-cyan))} .einst-unter{font-weight:650;font-size:12px;margin:0 0 .5rem;color:var(--schrift-2);letter-spacing:.02em} .einst-zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .einst-label{font-size:12px;opacity:.9} .einst-klein{font-size:11px;opacity:.7} .einst-block .farb-wahl{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .einst-block .design-opt{display:flex;align-items:center;gap:.5rem;font-size:12px;margin-top:.7rem} .np-marken{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.9rem} .np-mail{margin-left:auto;font-size:11.5px;opacity:.75} .np-block{margin:0 0 10px;padding:12px 14px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche-2)} .np-titel{font-weight:700;font-size:12.5px;color:var(--akzent-cyan,var(--p-cyan));margin-bottom:.55rem} .np-recht{display:flex;align-items:center;gap:.5rem;margin:.25rem 0;font-size:12px} .np-klein{font-size:11px;opacity:.72} .np-zeile{font-size:12px;margin:.25rem 0} .np-online{color:var(--gruen,var(--p-gruen))} .np-geraet{padding:.5rem .6rem;margin:.4rem 0;border:1px solid var(--linie);border-radius:10px;background:rgba(0,0,0,.18);position:relative} .np-geraet.arch{opacity:.6} .np-g-haupt{font-size:12.5px} .np-tag{font-size:10px;background:color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 22%,transparent);color:var(--akzent-cyan,var(--p-cyan));padding:.03rem .35rem;border-radius:999px;vertical-align:middle} .np-arch{margin-top:.35rem;font:inherit;font-size:10.5px;padding:.28rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:var(--p-weiss-a06);color:inherit;cursor:pointer} .np-archiv{margin-top:.6rem} .np-archiv summary{cursor:pointer;font-size:11.5px;opacity:.8} :root { font-size: 14px; } .analyse-inhalt { padding: 14px 16px 18px; } .analyse-kopf { padding-bottom: 12px; } .gruppe-reiter { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gruppe-reiter::-webkit-scrollbar { height: 5px; } .gruppe-reiter::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--akzent-cyan,#4CC5C5) 35%, var(--linie)); border-radius: 99px; } .gruppe-reiter .g-reiter { flex: 0 0 auto; min-width: 0; padding: 6px 12px; font-size: 12px; border-radius: 8px; } #seite .analyse-knopf { padding-top: 7px; padding-bottom: 7px; } .ios-install{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);z-index:600;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:11px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(20,24,38,.98),rgba(10,12,20,.98));border:1px solid color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 40%,var(--linie-hell));box-shadow:0 12px 40px var(--p-schwarz-a60),0 0 0 1px color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 12%,transparent);opacity:0;transition:opacity .3s ease,transform .3s ease} .ios-install.zeig{opacity:1;transform:translateX(-50%) translateY(0)} .ios-i-txt{font-size:12.5px;line-height:1.35;color:var(--schrift)} .ios-i-txt b{color:var(--akzent-cyan,var(--p-cyan))} .ios-i-zu{flex:0 0 auto;background:var(--p-weiss-a08);border:none;color:var(--schrift-2);width:28px;height:28px;border-radius:8px;font-size:16px;cursor:pointer} .ios-i-zu:hover{background:var(--rot);color:var(--p-weiss)} .cc-diag-block{margin-top:1rem;padding:.7rem .8rem;border:1px solid color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 14%,var(--linie-hell));border-radius:12px;background:var(--p-weiss-a02)} .cc-diag-kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem} .cc-diag-summe{font-size:11px;opacity:.7;margin-bottom:.4rem} .cc-diag-leer{font-size:11px;opacity:.6} .cc-diag-z{display:flex;gap:.6rem;font-size:11px;padding:.22rem 0;border-bottom:1px solid var(--p-weiss-a05)} .cd-zeit{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums} .cd-txt{flex:1;word-break:break-word} .cc-diag-z.zu-bad .cd-txt{color:#ff8a8a} .cc-diag-z.auf .cd-txt{color:var(--gruen,var(--p-gruen))} .ag-hinweis{font-size:11px;opacity:.75;line-height:1.45;margin-bottom:.9rem} .ag-hinweis code{background:var(--p-weiss-a08);padding:.05rem .3rem;border-radius:5px} .ag-karte{margin:0 0 10px;padding:12px 14px;border:1px solid var(--linie);border-left:3px solid var(--pf,var(--akzent-cyan,var(--p-cyan)));border-radius:10px;background:var(--flaeche-2)} .ag-kopf{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .ag-punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor} .ag-punkt.gruen{background:var(--gruen,var(--p-gruen));color:var(--gruen,var(--p-gruen))} .ag-punkt.rot{background:var(--rot,var(--p-rot));color:var(--rot,var(--p-rot))} .ag-punkt.grau{background:var(--schrift-3);color:transparent;box-shadow:none} .ag-zustand{font-size:10.5px;padding:.05rem .5rem;border-radius:999px;background:var(--p-weiss-a08)} .ag-zustand.gruen{color:var(--gruen,var(--p-gruen))} .ag-zustand.rot{color:var(--rot,var(--p-rot))} .ag-zeit{margin-left:auto;font-size:10.5px;opacity:.65} .ag-metriken{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem} .ag-m{font-size:10.5px;background:var(--p-weiss-a05);padding:.15rem .5rem;border-radius:7px} .ag-m b{color:var(--akzent-cyan,var(--p-cyan));font-weight:600} .ag-build,.ag-klein{font-size:10.5px;opacity:.72;margin-top:.4rem;word-break:break-word} .ag-klein.gut{color:var(--gruen,var(--p-gruen));opacity:.85} .ag-fehler-kopf{font-size:10.5px;color:var(--rot,var(--p-rot));margin-top:.5rem;font-weight:600} .ag-fehler{font-size:10.5px;font-family:ui-monospace,monospace;background:rgba(225,87,87,.08);border-radius:6px;padding:.25rem .4rem;margin-top:.25rem;word-break:break-word} .bl-e{background:var(--p-weiss-a02);transition:border-color .15s,background .15s} .bl-e:hover{background:var(--p-weiss-a05)} .bl-e.warn{border-left-color:var(--orange);box-shadow:inset 0 0 18px rgba(255,159,67,.06)} .bl-e.sicher,.bl-e.warnung{border-left-color:var(--akzent-cyan,var(--p-cyan))} .bl-titel{text-shadow:0 0 10px rgb(var(--neon-c) / .12)} .hinweis{background:linear-gradient(180deg,rgba(20,24,38,.98),rgba(10,12,20,.98))!important;border:1px solid color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 40%,var(--linie-hell))!important;box-shadow:0 12px 40px var(--p-schwarz-a60),0 0 0 1px color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 12%,transparent)!important;color:var(--schrift)!important} .leit-agent{display:flex;align-items:center;gap:6px;margin:2px 0 6px;font-size:11px} .la-punkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 6px currentColor} .la-punkt.gruen{background:var(--gruen,var(--p-gruen));color:var(--gruen,var(--p-gruen))} .la-punkt.rot{background:var(--rot,var(--p-rot));color:var(--rot,var(--p-rot))} .la-punkt.grau{background:var(--schrift-3);color:transparent;box-shadow:none} .la-txt{color:var(--schrift-2)} .la-fehler{color:var(--rot,var(--p-rot))} .ag-build b{color:var(--akzent-cyan,var(--p-cyan));font-family:ui-monospace,monospace} .ag-dreck{color:var(--orange,var(--p-orange))} .bl-regeln{margin:0 0 10px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 16%,var(--linie));border-radius:8px;background:var(--p-weiss-a02);font-size:12px} .bl-regeln summary{cursor:pointer;color:var(--akzent-cyan,var(--p-cyan))} .bl-regel-txt{margin-top:6px;line-height:1.5;opacity:.85} .seite{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .seite::-webkit-scrollbar{width:6px} .seite::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--akzent-cyan,#4CC5C5) 30%,var(--linie));border-radius:99px} @media(max-width:500px){.seite{padding-bottom:calc(16px + env(safe-area-inset-bottom))}} #seite .analyse-knopf, #einstellungen #menueListe .analyse-knopf { white-space: normal; line-height: 1.25; height: auto; min-height: 40px; } @media(max-width:500px){ .gruppe-reiter{padding-top:8px;padding-left:12px;padding-right:12px} .analyse-zu{flex:0 0 auto;width:40px;height:40px} .analyse-kopf > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } .gz-archiv{margin-top:10px} .gz-archiv summary{cursor:pointer;font-size:12px;color:var(--schrift-3);padding:4px 0} .gz-karte.arch{opacity:.6} .cc-oeffnen{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem} .cc-start{font:inherit;font-size:12.5px;font-weight:600;padding:.55rem 1.1rem;border-radius:10px;border:1px solid var(--akzent-cyan,var(--p-cyan));background:color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 20%,transparent);color:var(--p-weiss);cursor:pointer} .cc-start:hover{background:color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 32%,transparent)} .sperre { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 24px) 20px max(env(safe-area-inset-bottom), 24px) !important; } .sperre::before, .sperre::after { content:""; position:absolute; inset:-60%; z-index:0; pointer-events:none; background-repeat:repeat; } .sperre::before { background-image: radial-gradient(1.7px 1.7px at 18% 22%, var(--p-weiss-a95), transparent 60%), radial-gradient(1.3px 1.3px at 62% 12%, var(--p-blau-hell-a90), transparent 60%), radial-gradient(1.1px 1.1px at 82% 46%, var(--p-orange-hell-a85), transparent 60%), radial-gradient(1.6px 1.6px at 34% 68%, var(--p-weiss-a90), transparent 60%), radial-gradient(1.2px 1.2px at 72% 82%, var(--p-blau-hell-a85), transparent 60%), radial-gradient(1.1px 1.1px at 10% 88%, var(--p-weiss-a80), transparent 60%), radial-gradient(1.3px 1.3px at 48% 40%, var(--p-blau-hell-2-a85), transparent 60%), radial-gradient(1px 1px at 28% 8%, var(--p-weiss-a80), transparent 60%), radial-gradient(1px 1px at 90% 18%, var(--p-blau-hell-a80), transparent 60%), radial-gradient(1px 1px at 6% 54%, var(--p-weiss-a75), transparent 60%), radial-gradient(1px 1px at 52% 90%, var(--p-blau-hell-2-a80), transparent 60%), radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 66% 58%, rgba(200,220,255,.72), transparent 60%), radial-gradient(2px 2px at 78% 30%, var(--p-orange-hell-a95), transparent 55%), radial-gradient(3px 3px at 22% 26%, var(--p-weiss), transparent 52%), radial-gradient(2.6px 2.6px at 58% 40%, rgba(230,240,255,1), transparent 54%), radial-gradient(2.4px 2.4px at 86% 62%, rgba(255,235,250,.98), transparent 54%); background-size: 118px 118px; animation: sternDrift 160s linear infinite; } .sperre::after { background-image: radial-gradient(1.2px 1.2px at 26% 34%, var(--p-weiss-a75), transparent 60%), radial-gradient(1.2px 1.2px at 76% 24%, rgba(190,210,255,.65), transparent 60%), radial-gradient(1px 1px at 54% 74%, var(--p-weiss-a60), transparent 60%), radial-gradient(1px 1px at 14% 58%, rgba(210,220,255,.55), transparent 60%), radial-gradient(1.4px 1.4px at 90% 66%, rgba(255,240,215,.7), transparent 58%), radial-gradient(1px 1px at 40% 14%, var(--p-weiss-a60), transparent 60%), radial-gradient(1px 1px at 64% 90%, rgba(200,215,255,.6), transparent 60%), radial-gradient(1px 1px at 6% 22%, var(--p-weiss-a55), transparent 60%), radial-gradient(2px 2px at 30% 60%, rgba(190,220,255,.85), transparent 55%); background-size: 150px 150px; animation: sternDrift 90s linear infinite reverse; } .wolke { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(30% 26% at 30% 40%, rgba(180,190,255,.20), rgba(150,120,240,.10) 45%, transparent 70%), radial-gradient(22% 18% at 66% 56%, rgba(255,220,245,.14), transparent 66%), radial-gradient(70% 60% at 50% 48%, rgba(90,70,170,.10), transparent 72%); } .sperre-karte { z-index: 3; } .wolke::before { content: ""; position: absolute; left: -35%; right: -35%; top: 34%; height: 52%; transform: rotate(-21deg); transform-origin: center; filter: blur(7px); animation: galaxieSchweben 60s ease-in-out infinite alternate; } @keyframes galaxieSchweben { from { transform: rotate(-21deg) scale(1); } to { transform: rotate(-18deg) scale(1.06); } } .wolke::after { content: ""; position: absolute; left: -35%; right: -35%; top: 34%; height: 52%; transform: rotate(-21deg); transform-origin: center; -webkit-mask-image: radial-gradient(60% 120% at 50% 50%, var(--p-schwarz) 55%, transparent 78%); mask-image: radial-gradient(60% 120% at 50% 50%, var(--p-schwarz) 55%, transparent 78%); background-image: radial-gradient(1px 1px at 8% 40%, var(--p-weiss-a95), transparent 60%), radial-gradient(1px 1px at 16% 62%, rgba(220,230,255,.9), transparent 60%), radial-gradient(1px 1px at 24% 48%, var(--p-weiss-a85), transparent 60%), radial-gradient(1px 1px at 33% 58%, rgba(255,244,224,.9), transparent 60%), radial-gradient(1px 1px at 42% 44%, var(--p-weiss-a90), transparent 60%), radial-gradient(1px 1px at 51% 56%, var(--p-blau-hell-a90), transparent 60%), radial-gradient(1px 1px at 60% 46%, var(--p-weiss-a85), transparent 60%), radial-gradient(1px 1px at 69% 58%, var(--p-weiss-a90), transparent 60%), radial-gradient(1px 1px at 78% 48%, rgba(220,230,255,.85), transparent 60%), radial-gradient(1px 1px at 87% 60%, rgba(255,244,224,.9), transparent 60%), radial-gradient(1px 1px at 94% 44%, var(--p-weiss-a85), transparent 60%); background-size: 90px 70px; animation: sternDrift 200s linear infinite; } .sperre-karte { max-width: 400px; margin: 0 auto; } .sperre-raute { width: 188px !important; height: 188px !important; position: relative; filter: drop-shadow(0 0 26px rgba(255,159,67,.40)) drop-shadow(0 0 56px rgba(120,160,215,.32)) !important; } .sperre-raute .atom { width: 100%; height: 100%; display: block; } #sperreTitel { margin: 0 0 4px !important; text-align: center; text-transform: none; font-size: 38px !important; font-weight: 600 !important; letter-spacing: -0.6px; color: var(--p-blau-hell-2) !important; -webkit-text-fill-color: var(--p-blau-hell-2); text-shadow: 0 1px 0 var(--p-schwarz-a50), 0 2px 14px var(--p-schwarz-a45); } #sperreText { text-align: center; color: var(--schrift-3) !important; font-size: 13px !important; letter-spacing: .02em; margin: 0 0 24px !important; } .sperre-karte input[type="email"], .sperre-karte input[type="password"], .sperre-karte input[type="text"] { width: 100%; display: block; margin: 0 0 12px; box-sizing: border-box; background: var(--p-weiss-a045) !important; color: var(--schrift) !important; border: 1px solid var(--p-weiss-a10) !important; border-radius: 13px !important; padding: 14px 15px !important; font-size: 16px !important; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } .merk-zeile { cursor: pointer; } .sperre-fehler { min-height: 0; text-align: center; } .sperre-fehler:not(:empty) { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--rot) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 40%, transparent); } .sperre-knopf { margin-top: 16px !important; } .sperre-knopf:hover { transform: translateY(-1px); } .sperre-fuss { text-align: center; line-height: 1.6; } .sperre-passkey { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--schrift-2); background: transparent; border: 1px solid color-mix(in srgb, var(--schrift-3) 45%, transparent); border-radius: 12px; cursor: pointer; } .sperre-passkey:hover { color: var(--schrift); border-color: var(--schrift-3); } .sperre-passkey:disabled { opacity: 0.55; cursor: default; } .us-pk { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--schrift-3) 20%, transparent); } .us-pk > div { min-width: 0; overflow-wrap: anywhere; } .us-pk small { display: block; color: var(--schrift-3); font-size: 11.5px; margin-top: 2px; } @keyframes sternDrift { from { transform: translate(0,0); } to { transform: translate(-300px,-300px); } } @media (prefers-reduced-motion: reduce) { .sperre::before, .sperre::after, .wolke::after { animation: none; } } #monP-ueberblick .status-unter { display: none; } .np-aktionen{margin:.2rem 0 1rem} .np-force-ab{font:inherit;font-size:12px;padding:.5rem 1rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--rot,var(--p-rot)) 50%,transparent);background:color-mix(in srgb,var(--rot,var(--p-rot)) 14%,transparent);color:var(--p-rot-hell);cursor:pointer} .np-force-ab:hover{background:color-mix(in srgb,var(--rot,var(--p-rot)) 26%,transparent);color:var(--p-weiss)} #abmeldenKnopf{color:var(--p-rot-hell)} #abmeldenKnopf:hover{background:var(--rot,var(--p-rot));color:var(--p-weiss)} #seite .analyse-knopf .sym, #einstellungen .analyse-knopf .sym, #seite .aktion .sym, #seite .sz-knopf .sym, .gruppe-reiter .g-reiter .sym { display: none !important; } #seite .analyse-knopf::before, #einstellungen .analyse-knopf::before, #seite .aktion::before, #seite .sz-knopf::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-right: 10px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--schrift-3) 80%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--schrift-3) 90%, transparent) 0 1.6px, transparent 2.2px); opacity: .55; transition: opacity .15s, border-color .15s; } #seite .analyse-knopf:hover::before, #seite .analyse-knopf.aktiv::before, #einstellungen .analyse-knopf:hover::before { opacity: 1; border-color: var(--akzent-cyan, var(--p-cyan)); } .gruppe-reiter .g-reiter { padding-left: 12px; padding-right: 12px; } .bk-tat { font: inherit !important; font-size: 11.5px !important; } .bk-stand { flex-wrap: wrap; } .bk-stand .tat { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } @media(max-width:500px){ .bk-stand .tat { margin-left: 0; width: 100%; justify-content: flex-start; } .bk-tat { flex: 1 1 auto; text-align: center; } } button, input, select, textarea, .wz, .aktion, .bk-tat, .n-knopf, .sv-mini, .cc-btn, .brain-tab, .g-reiter, .osw-knopf, .np-arch, .np-force-ab, .fuss-knopf, .analyse-zu { font-family: inherit; } .sv-eingabe { font-size: 13.5px !important; padding: 8px 10px !important; } .sv-tat { font-size: 13.5px !important; padding: 9px 13px !important; } .sv-block > summary { font-size: 13px; } .sv-farbe { font-size: 13px; } .sv-kopf b { font-size: 14px; } .wg-z{font-size:12px;padding:3px 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .wg-pkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .wg-pkt.gut{background:var(--gruen,var(--p-gruen))} .wg-pkt.schlecht{background:var(--rot,var(--p-rot))} .sz-konsole{margin:0 0 10px} .sz-konsole .wz.mini{font-size:12.5px;padding:7px 12px} .wz, .e-knopf, .fuss-knopf, .s-frei, .n-knopf, .bk-tat, .leit-wartung, .sv-mini, .sv-tat, .osw-knopf, .cc-btn, .np-arch, .cc-start, .np-force-ab, #abmeldenKnopf, .status-link { border-radius: 10px; } .osw-knopf, .cc-btn, .np-arch { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--schrift-2); } .osw-knopf:hover, .cc-btn:hover, .np-arch:hover { background: var(--flaeche); color: var(--schrift); border-color: color-mix(in srgb, var(--orange) 45%, var(--linie)); } .einst-titel, .np-titel, .brain-block-kopf, .ag-name { font-size: 14px; font-weight: 700; } .bk-konfig input, .e-feld textarea, .vb-feld input, .bus-neuregel input, .pt-eingabe, .brain-neu input, .cc-feld select, .pt-eingabe-titel { font-size: 13px; } .boot { overflow: hidden; } .boot::before, .boot::after { content:""; position:absolute; inset:-60%; z-index:0; pointer-events:none; background-repeat:repeat; } .boot::before { background-image: radial-gradient(1.7px 1.7px at 18% 22%, var(--p-weiss-a95), transparent 60%), radial-gradient(1.3px 1.3px at 62% 12%, var(--p-blau-hell-a90), transparent 60%), radial-gradient(1.1px 1.1px at 82% 46%, var(--p-orange-hell-a85), transparent 60%), radial-gradient(1.6px 1.6px at 34% 68%, var(--p-weiss-a90), transparent 60%), radial-gradient(1.2px 1.2px at 72% 82%, var(--p-blau-hell-a85), transparent 60%), radial-gradient(1.1px 1.1px at 10% 88%, var(--p-weiss-a80), transparent 60%), radial-gradient(1.3px 1.3px at 48% 40%, var(--p-blau-hell-2-a85), transparent 60%), radial-gradient(1px 1px at 28% 8%, var(--p-weiss-a80), transparent 60%), radial-gradient(1px 1px at 90% 18%, var(--p-blau-hell-a80), transparent 60%), radial-gradient(1px 1px at 6% 54%, var(--p-weiss-a75), transparent 60%), radial-gradient(1px 1px at 52% 90%, var(--p-blau-hell-2-a80), transparent 60%), radial-gradient(2px 2px at 78% 30%, var(--p-orange-hell-a95), transparent 55%); background-size: 130px 130px; animation: sternDrift 160s linear infinite; opacity: .78; } .boot::after { background-image: radial-gradient(1.2px 1.2px at 26% 34%, var(--p-weiss-a75), transparent 60%), radial-gradient(1.2px 1.2px at 76% 24%, rgba(190,210,255,.65), transparent 60%), radial-gradient(1px 1px at 54% 74%, var(--p-weiss-a60), transparent 60%), radial-gradient(1px 1px at 14% 58%, rgba(210,220,255,.55), transparent 60%), radial-gradient(1.4px 1.4px at 90% 66%, rgba(255,240,215,.7), transparent 58%), radial-gradient(2px 2px at 30% 60%, rgba(190,220,255,.85), transparent 55%); background-size: 150px 150px; animation: sternDrift 90s linear infinite reverse; opacity: .5; } .boot-partikel { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: block !important; background: radial-gradient(30% 26% at 32% 42%, rgba(180,190,255,.18), rgba(150,120,240,.09) 45%, transparent 70%), radial-gradient(22% 18% at 66% 56%, rgba(255,220,245,.12), transparent 66%), radial-gradient(70% 60% at 50% 48%, rgba(90,70,170,.09), transparent 72%); } .boot-partikel::before { content:""; position:absolute; left:-35%; right:-35%; top:34%; height:52%; transform: rotate(-21deg); transform-origin:center; background: radial-gradient(46% 120% at 20% 50%, rgba(118,88,240,.32), transparent 70%), radial-gradient(30% 90% at 40% 50%, rgba(90,180,210,.15), transparent 72%), radial-gradient(50% 120% at 60% 50%, rgba(214,118,198,.26), transparent 72%), radial-gradient(44% 110% at 84% 52%, rgba(230,150,205,.20), transparent 74%), radial-gradient(20% 70% at 32% 48%, rgba(240,235,255,.20), transparent 70%); filter: blur(7px); opacity:.98; animation: galaxieSchweben 60s ease-in-out infinite alternate; } .boot-partikel::after { content:""; position:absolute; left:-35%; right:-35%; top:34%; height:52%; transform: rotate(-21deg); transform-origin:center; -webkit-mask-image: radial-gradient(60% 120% at 50% 50%, var(--p-schwarz) 55%, transparent 78%); mask-image: radial-gradient(60% 120% at 50% 50%, var(--p-schwarz) 55%, transparent 78%); background-image: radial-gradient(1px 1px at 8% 40%, var(--p-weiss-a95), transparent 60%), radial-gradient(1px 1px at 24% 48%, var(--p-weiss-a85), transparent 60%), radial-gradient(1px 1px at 42% 44%, var(--p-weiss-a90), transparent 60%), radial-gradient(1px 1px at 60% 46%, var(--p-weiss-a85), transparent 60%), radial-gradient(1px 1px at 78% 48%, rgba(220,230,255,.85), transparent 60%), radial-gradient(1px 1px at 94% 44%, var(--p-weiss-a85), transparent 60%); background-size: 90px 70px; opacity:.85; animation: sternDrift 200s linear infinite; } .boot-mitte { position: relative; z-index: 2; } .boot-atom::after { display: none !important; } .boot-marke { font-family: inherit !important; font-size: 34px !important; font-weight: 600 !important; letter-spacing: -0.5px !important; text-indent: 0 !important; text-transform: none !important; color: var(--p-blau-hell-2) !important; -webkit-text-fill-color: var(--p-blau-hell-2) !important; background: none !important; filter: none !important; animation: none !important; text-shadow: 0 1px 0 var(--p-schwarz-a50), 0 2px 14px var(--p-schwarz-a45) !important; } @media (prefers-reduced-motion: reduce) { .boot::before, .boot::after, .boot-partikel::before, .boot-partikel::after { animation: none !important; } } @media (max-width: 820px) { #seite { padding-top: calc(14px + max(env(safe-area-inset-top), 46px)) !important; padding-left: calc(16px + env(safe-area-inset-left)) !important; padding-right: 16px !important; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; } #seite .marke { margin-left: calc(-16px - env(safe-area-inset-left)); margin-right: -16px; } } .leiste-ordnung { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .leiste-ord-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; } .leiste-ord-zeile .lo-titel { flex: 1 1 auto; min-width: 0; } .leiste-ord-zeile .sort-pfeile { display: inline-flex; gap: 4px; flex: 0 0 auto; } .leiste-ord-zeile .sort-pf { width: 30px; height: 30px; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--schrift-2); cursor: pointer; } .leiste-ord-zeile .sort-pf:disabled { opacity: .35; cursor: default; } .leiste-ord-zeile .sort-pf:hover:not(:disabled) { border-color: color-mix(in srgb, var(--orange) 45%, var(--linie)); color: var(--schrift); } :root { --glas: linear-gradient(180deg, rgba(20,18,30,.82), rgba(11,11,18,.88)); --glas-rand: rgba(255,255,255,.08); --nebel-i: rgba(104,74,224,.10); --nebel-m: rgba(210,110,196,.08); } .rahmen { background: radial-gradient(60% 50% at 12% 8%, var(--nebel-i), transparent 60%), radial-gradient(55% 45% at 90% 92%, var(--nebel-m), transparent 62%), radial-gradient(150% 120% at 50% 0%, var(--p-violett-dunkel-3) 0%, #070510 55%, var(--p-violett-dunkel-5) 100%); } @media (min-width: 821px) { #seite { background: radial-gradient(600px 500px at 20% 0%, var(--p-violett-a16), transparent 60%), radial-gradient(500px 480px at 80% 108%, rgba(40,200,200,.12), transparent 60%), linear-gradient(180deg, rgba(12,10,28,.62), rgba(7,6,16,.70)) !important; border-right: 1px solid var(--glas-rand) !important; backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); } } .analyse { background: rgba(4,3,10,.72) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .analyse-karte { background: var(--glas) !important; border: 1px solid var(--glas-rand) !important; border-radius: 20px !important; backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05); } .n-karte, .sv-karte, .gz-karte, .pt-projekt, .brain-block, .einst-block, .np-block, .ag-karte, .bk-projekt, .leit-feld, .fa-e, .wg-z { background: rgba(255,255,255,.035) !important; border-color: var(--glas-rand) !important; } .analyse-inhalt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .analyse-inhalt select, .analyse-inhalt textarea { background: rgba(6,6,14,.6) !important; border: 1px solid var(--glas-rand) !important; } .analyse-kopf { background: linear-gradient(180deg, rgba(120,90,220,.10), transparent) !important; border-bottom: 1px solid var(--glas-rand) !important; } .gruppe-reiter .g-reiter.an, .g-reiter.an { box-shadow: 0 0 14px rgba(160,107,255,.22) !important; } @media (max-width: 500px) { .analyse-karte { border-radius: 0 !important; backdrop-filter: blur(6px); } .analyse-kopf { background: rgba(10,9,16,.92) !important; } } .reiterleiste { border-bottom: 1px solid var(--glas-rand) !important; } .reiter { background: var(--p-weiss-a03) !important; border-color: var(--glas-rand) !important; } .analyse-kopf { text-transform: none !important; letter-spacing: normal !important; } .analyse-kopf > span:first-child { font-family: inherit !important; text-transform: none !important; letter-spacing: -0.2px !important; font-size: 18px !important; font-weight: 650 !important; color: var(--p-blau-hell-2) !important; text-shadow: none !important; } @media (max-width: 500px) { .analyse-kopf > span:first-child { font-size: 16px !important; } } #einstellungen .analyse-inhalt { padding: 18px 18px 26px; } #einstellungen .einst-block { border-radius: 16px !important; padding: 16px 16px 18px !important; margin: 0 0 14px !important; } #einstellungen .einst-titel { font-family: inherit !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--p-violett-hell-2) 65%, var(--schrift-3)) !important; display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; } #einstellungen .einst-titel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--p-violett-2)); box-shadow: 0 0 8px rgba(160,107,255,.5); flex: 0 0 auto; } #einstellungen .farb-wahl { gap: 10px !important; } #einstellungen .farb-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--f); border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: transform .12s, box-shadow .15s; } #einstellungen .farb-swatch:hover { transform: scale(1.12); } #einstellungen .farb-swatch.an { box-shadow: 0 0 0 2px var(--grund-2), 0 0 0 4px var(--f), 0 0 12px var(--f); } #einstellungen .design-opt { font-size: 13.5px !important; margin-top: 14px !important; color: var(--schrift-2); } #einstellungen .menu-suche { width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 11px 14px !important; border-radius: 12px !important; background: rgba(6,6,14,.55) !important; border: 1px solid var(--glas-rand) !important; font-size: 14px !important; } #einstellungen .einst-klein { font-size: 12.5px; color: var(--schrift-3); line-height: 1.55; } #einstellungen .eingang-oben { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } #einstellungen .eingang-oben #leisteKnopf { flex: 1 1 auto; margin: 0 !important; padding: 10px 12px !important; font-size: 13px !important; font-weight: 550 !important; border-radius: 12px !important; background: var(--p-weiss-a04) !important; border: 1px solid var(--glas-rand) !important; min-height: 0 !important; } #einstellungen .eingang-oben .menue-sort { flex: 0 0 auto; margin: 0 !important; padding: 10px 12px !important; font-size: 12.5px !important; border-radius: 12px !important; background: var(--p-weiss-a04) !important; border: 1px solid var(--glas-rand) !important; color: var(--schrift-2) !important; } #einstellungen #menueListe .analyse-knopf { width: 100%; box-sizing: border-box; margin: 0 0 8px !important; padding: 12px 14px 12px 12px !important; font-size: 14px !important; font-weight: 550 !important; border-radius: 12px !important; background: var(--p-weiss-a04) !important; border: 1px solid var(--glas-rand) !important; min-height: 0 !important; } #einstellungen #menueListe .analyse-knopf:hover { background: color-mix(in srgb, var(--p-violett-2) 12%, var(--p-weiss-a04)) !important; border-color: color-mix(in srgb, var(--p-violett-2) 45%, var(--glas-rand)) !important; } #einstellungen #menueListe .klein.abschnitt { font-family: inherit !important; text-transform: uppercase !important; letter-spacing: .06em !important; font-size: 12.5px !important; font-weight: 800 !important; color: var(--schrift) !important; margin: 20px 0 8px !important; padding-left: 2px !important; } #einstellungen #menueListe .klein.abschnitt::before { display: none !important; } .analyse-inhalt .leit-feld, .analyse-inhalt .gz-karte, .analyse-inhalt .sz-server, .analyse-inhalt .sz-sess, .analyse-inhalt .bk-stand, .analyse-inhalt .insp-z, .analyse-inhalt .n-cc, .analyse-inhalt .vb-feld, .analyse-inhalt .gz-liste > * { background: var(--p-weiss-a04) !important; border-color: var(--glas-rand) !important; } .analyse-inhalt .nu-chip, .analyse-inhalt .fr-proj, .analyse-inhalt .fr-stand, .analyse-inhalt .n-recht, .analyse-inhalt .sv-farbe, .analyse-inhalt .leit-wert { background: var(--p-weiss-a05) !important; border: 1px solid var(--glas-rand) !important; } .analyse-inhalt .sv-abz.gut { background: color-mix(in srgb, var(--gruen) 14%, transparent) !important; } .analyse-inhalt .sv-abz.offen { background: color-mix(in srgb, var(--gelb) 14%, transparent) !important; } .analyse-inhalt .leit-graph canvas { background: rgba(6,6,14,.5) !important; } .analyse-inhalt .bus-key .bk-code { background: rgba(6,6,14,.5) !important; border: 1px solid var(--glas-rand) !important; } #seite .sz-knopf { background: var(--p-weiss-a04) !important; border: 1px solid var(--glas-rand) !important; border-radius: 10px !important; } #seite .sz-knopf:hover { background: color-mix(in srgb, var(--p-violett-2) 12%, var(--p-weiss-a04)) !important; border-color: color-mix(in srgb, var(--p-violett-2) 45%, var(--glas-rand)) !important; } #aktionen .aktion { border: 1px solid transparent; border-radius: 10px; } #aktionen .aktion:hover { background: var(--p-weiss-a05) !important; border-color: var(--glas-rand) !important; color: var(--schrift) !important; } #aktionen .aktion.aktiv { background: color-mix(in srgb, var(--orange) 16%, transparent) !important; border-color: color-mix(in srgb, var(--orange) 45%, transparent) !important; color: var(--orange) !important; } .boot-balken-huelle { position: relative; width: min(320px, 78vw); margin: 26px auto 6px; } .boot-balken-huelle .boot-balken { width: 100%; margin: 0; position: relative; z-index: 1; } .analyse-karte > .analyse-kopf { flex: 0 0 auto; } .analyse-karte > .analyse-inhalt { flex: 1 1 auto; min-height: 0; } .analyse-karte > .gruppe-reiter { flex: 0 0 auto; } .analyse-karte > .gruppe-koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #waechterBox .wg-kopf { font-size: 13px; padding: 9px 12px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--glas-rand); } #waechterBox .wg-kopf.gut { background: color-mix(in srgb, var(--gruen) 12%, transparent); } #waechterBox .wg-kopf.gut b { color: var(--gruen); } #waechterBox .wg-kopf.schlecht { background: color-mix(in srgb, var(--rot) 14%, transparent); } #waechterBox .wg-kopf.schlecht b { color: var(--rot); } #waechterBox .wg-z { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid color-mix(in srgb, var(--glas-rand) 60%, transparent); flex-wrap: wrap; } #waechterBox .wg-name { font-weight: 600; color: var(--schrift); min-width: 130px; } #waechterBox .wg-info { color: var(--schrift-3); font-size: 12px; margin-left: auto; } #waechterBox .wg-fehler { color: var(--rot); font-size: 12px; width: 100%; } #einstellungen .einst-block { background: rgba(255,255,255,.055) !important; border: 1px solid var(--glas-rand) !important; } #einstellungen .einst-titel { cursor: pointer; user-select: none; justify-content: flex-start; } #einstellungen .einst-titel::after { content: "✦"; margin-left: auto; font-size: 13px; color: var(--p-violett-hell-2); transition: transform .18s ease; transform: rotate(0deg); } #einstellungen .einst-block.zu > *:not(.einst-titel) { display: none !important; } #einstellungen .einst-block.zu { padding-bottom: 14px !important; } .haupt { background: transparent !important; } .gruppe-koerper .g-pane > .analyse-inhalt, .gruppe-koerper .g-pane > [id$="Inhalt"] { background: var(--p-weiss-a045); border: 1px solid var(--glas-rand); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; } @media (max-width: 500px) { .gruppe-koerper .g-pane > .analyse-inhalt, .gruppe-koerper .g-pane > [id$="Inhalt"] { border-radius: 12px; padding: 12px 12px; } } .seg-wahl { display: inline-flex; gap: 4px; background: var(--p-weiss-a04); border: 1px solid var(--glas-rand); border-radius: 10px; padding: 3px; } .seg-wahl button { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; border: none; background: transparent; color: var(--schrift-2); cursor: pointer; } .seg-wahl button.an { background: color-mix(in srgb, var(--p-violett-2) 24%, transparent); color: var(--p-blau-hell-2); } html[data-galaxy="aus"] .rahmen { background: linear-gradient(180deg, var(--p-violett-dunkel-3) 0%, #06060c 60%, #040309 100%) !important; } html[data-galaxy="aus"] .sperre::before, html[data-galaxy="aus"] .sperre::after, html[data-galaxy="aus"] .wolke::before, html[data-galaxy="aus"] .wolke::after, html[data-galaxy="aus"] .buehne::before, html[data-galaxy="aus"] .buehne::after { display: none !important; } html[data-galaxy="aus"] .wolke { background: none !important; } html[data-galaxy="dezent"] .rahmen { filter: none; } html[data-galaxy="dezent"] .wolke::before { opacity: .5 !important; } html[data-galaxy="dezent"] .buehne::before { opacity: .25 !important; } html[data-galaxy="dezent"] .buehne::after { opacity: .2 !important; } html[data-galaxy="aus"] .boot::before, html[data-galaxy="aus"] .boot::after, html[data-galaxy="aus"] .boot-partikel::before, html[data-galaxy="aus"] .boot-partikel::after { display: none !important; } html[data-galaxy="aus"] #seite { background: linear-gradient(180deg, rgba(14,12,22,.98) 0%, rgba(9,8,15,.99) 62%, var(--p-blau-dunkel) 100%) !important; } html[data-galaxy="dezent"] .boot::before { opacity: .4 !important; } html[data-galaxy="dezent"] .boot::after { opacity: .3 !important; } html[data-galaxy="dezent"] .sperre::before { opacity: .4 !important; } html[data-galaxy="dezent"] .sperre::after { opacity: .3 !important; } html[data-sterne="wenig"] .sperre::before, html[data-sterne="wenig"] .boot::before { opacity: .35 !important; } html[data-sterne="wenig"] .sperre::after, html[data-sterne="wenig"] .boot::after { opacity: .25 !important; } html[data-sterne="wenig"] .buehne::before, html[data-sterne="wenig"] .buehne::after { display: none !important; } html[data-sterne="viel"] .sperre::before, html[data-sterne="viel"] .boot::before { background-size: 90px 90px !important; opacity: .9 !important; } html[data-sterne="viel"] .sperre::after, html[data-sterne="viel"] .boot::after { background-size: 62px 62px !important; opacity: .8 !important; } #einstellungen .einst-block .einst-zeile { margin-top: 12px; } #einstellungen .einst-block .einst-zeile:first-of-type { margin-top: 0; } .seg-wahl { flex-wrap: wrap; } #seite { background: radial-gradient(120% 30% at 50% -4%, rgba(160,107,255,.16), transparent 70%), radial-gradient(90% 22% at 20% 108%, rgba(210,110,196,.10), transparent 72%), radial-gradient(1.2px 1.2px at 22% 12%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 68% 26%, rgba(200,215,255,.30), transparent 60%), radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.25), transparent 60%), radial-gradient(1px 1px at 82% 74%, rgba(255,236,210,.28), transparent 60%), linear-gradient(180deg, rgba(14,12,22,.98) 0%, rgba(9,8,15,.99) 62%, var(--p-blau-dunkel) 100%) !important; background-size: auto, auto, 220px 220px, 220px 220px, 220px 220px, 220px 220px, auto !important; border-right: 1px solid var(--glas-rand) !important; } .terminal-huelle { box-shadow: inset 0 0 60px rgba(120,90,220,.10), inset 0 0 120px rgba(9,8,15,.5); } .reiterleiste { background: linear-gradient(180deg, rgba(20,15,34,.9), rgba(10,9,16,.75)) !important; } .werkzeuge { background: linear-gradient(180deg, rgba(20,15,34,.9), rgba(10,9,16,.6)) !important; border-bottom: 1px solid var(--glas-rand) !important; } .boot-atom { width: 180px !important; height: 180px !important; } .boot-atom-svg { width: 180px !important; height: 180px !important; filter: drop-shadow(0 0 28px var(--p-orange-a60)) drop-shadow(0 0 60px rgba(120,160,215,.42)) !important; } .boot-atom::before { width: 170% !important; height: 170% !important; background: radial-gradient(circle, var(--p-orange-a30), rgba(120,160,215,.15) 46%, transparent 66%) !important; } @media (max-width: 500px) { .boot-atom, .boot-atom-svg { width: 150px !important; height: 150px !important; } } .leit-health { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--glas-rand); white-space: nowrap; } .leit-health.h0 { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 14%, transparent); border-color: color-mix(in srgb, var(--gruen) 40%, transparent); } .leit-health.h1 { color: var(--gelb); background: color-mix(in srgb, var(--gelb) 14%, transparent); border-color: color-mix(in srgb, var(--gelb) 40%, transparent); } .leit-health.h2 { color: var(--rot); background: color-mix(in srgb, var(--rot) 16%, transparent); border-color: color-mix(in srgb, var(--rot) 45%, transparent); } .sperre { background: radial-gradient(50% 46% at 16% 24%, rgba(104,74,224,.36), transparent 60%), radial-gradient(40% 38% at 34% 18%, rgba(60,120,255,.24), transparent 58%), radial-gradient(46% 42% at 82% 40%, rgba(70,200,200,.18), transparent 60%), radial-gradient(56% 46% at 80% 76%, rgba(220,110,196,.30), transparent 62%), radial-gradient(40% 34% at 58% 60%, rgba(255,180,90,.16), transparent 62%), radial-gradient(180% 150% at 50% 6%, var(--p-violett-dunkel) 0%, var(--p-violett-dunkel-2) 50%, var(--p-violett-dunkel-4) 100%) !important; } .boot { background: radial-gradient(50% 46% at 18% 24%, rgba(104,74,224,.34), transparent 60%), radial-gradient(44% 40% at 78% 40%, rgba(70,200,200,.16), transparent 60%), radial-gradient(56% 46% at 82% 76%, rgba(220,110,196,.28), transparent 62%), radial-gradient(40% 34% at 56% 58%, rgba(255,180,90,.15), transparent 62%), radial-gradient(180% 150% at 50% 6%, var(--p-violett-dunkel) 0%, var(--p-violett-dunkel-2) 50%, var(--p-violett-dunkel-4) 100%) !important; } @media (prefers-reduced-motion: reduce) { .buehne { animation: none; } } .hb-box { background: var(--p-weiss-a045); border: 1px solid var(--glas-rand); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; } .db-wartet { background: linear-gradient(120deg, var(--p-violett-a12), transparent); border: 1px solid var(--p-violett-hell-a20); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; } .db-wartet[hidden] { display: none !important; } .db-wartet-kopf { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--p-violett-hell-2); } .hb-box.ruhig { color: var(--gruen); } .hb-box.ruhig b { color: var(--gruen); } .hb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 14px; } .hb-score { color: var(--schrift-3); font-size: 12.5px; font-weight: 600; } .hb-taten { display: flex; flex-wrap: wrap; gap: 8px; } .hb-tat { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 9px 14px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 16%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); color: var(--orange); } .hb-tat:hover { background: color-mix(in srgb, var(--orange) 28%, transparent); color: var(--p-weiss); } .db-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; } .db-karte { border-radius: 12px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 3px; } .db-karte .db-zahl { font-size: 22px; font-weight: 700; color: var(--p-blau-hell-2); line-height: 1; } .db-karte .db-marke { font-size: 11px; color: var(--schrift-3); letter-spacing: .02em; } .gz-karte.ist-haupt { border-color: color-mix(in srgb, var(--orange) 55%, var(--glas-rand)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 40%, transparent); } .gz-haupt-badge { font-size: 11px; font-weight: 700; color: var(--auf-orange); background: var(--orange); border-radius: 999px; padding: 2px 9px; } .gz-dieses { font-size: 11px; color: var(--akzent-cyan, var(--p-cyan)); font-weight: 600; } .grenzen-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .grenz-z { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--schrift-2); } .grenz-z input { width: 80px; text-align: right; } .grenzen-fuss { display: flex; gap: 8px; margin-top: 10px; } .boards-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 16px} @media(max-width:640px){.boards-gitter{grid-template-columns:1fr}} .board{position:relative;text-align:left;display:flex;flex-direction:column;gap:10px; padding:14px 15px;border-radius:16px;cursor:pointer;font:inherit;color:var(--text,var(--p-blau-hell)); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease} .board::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:16px 0 0 16px; background:var(--pf,var(--p-orange));opacity:.85} .board:hover,.board:focus-visible{transform:translateY(-2px);border-color:var(--pf,var(--p-orange)); box-shadow:0 14px 34px rgba(0,0,0,.42);outline:none} .board.h2{border-color:rgba(255,90,90,.45)} .board-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px} .board-name{font-size:15px;font-weight:650;letter-spacing:.2px} .board-status{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.85} .board-punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .st-zeile{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:7px;border:1px solid var(--linie);border-left:3px solid var(--pf,var(--p-blau));border-radius:10px} .st-name{flex:1 1 auto;min-width:0;font-weight:650} .st-wort{font-size:12px;color:var(--schrift-3);white-space:nowrap} .st-wort.w2{color:var(--rot)}.st-wort.w1{color:var(--orange)}.st-wort.w0{color:var(--gruen)} .au-toggle-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .au-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 10px;border:1px solid var(--linie);border-radius:10px;margin-bottom:7px} .au-auto{font-size:10px;font-weight:600;color:var(--p-gruen);border:1px solid var(--p-gruen-a45);border-radius:999px;padding:0 6px;vertical-align:middle} .au-info{min-width:0;flex:1 1 auto} .au-tun{display:flex;gap:6px;flex-shrink:0} #aufnahmeToggle.an{color:var(--rot);border-color:var(--rot)} .fw-status{font-size:.9rem;margin-bottom:10px} .fw-gruen{color:var(--p-gruen);font-weight:600} .fw-rot{color:var(--p-rot);font-weight:600} .fw-dl{margin-bottom:12px} .fw-schritte{display:flex;flex-direction:column;gap:7px} .fw-schritt{padding:9px 10px;border:1px solid var(--linie);border-radius:10px;font-size:.9rem;line-height:1.45} .fw-hinweis{margin-top:4px} .fw-unter{font-weight:650;font-size:12px;margin:16px 0 .5rem;color:var(--schrift-2);letter-spacing:.02em} .fw-geraet{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:9px 10px;border:1px solid var(--linie);border-radius:10px;margin-bottom:7px;font-size:.92rem} .fw-geraet .fw-seit{margin-left:auto} .fw-feld{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap} .fw-feld-k{font-size:11px;color:var(--schrift-3);min-width:92px} .fw-feld code{font-size:12px;background:var(--p-weiss-a03);border:1px solid var(--linie);border-radius:6px;padding:2px 7px;word-break:break-all} .fw-feld .fw-key{flex:1 1 180px} .fw-feld .wz{margin-left:auto} #aufnahmenPlay{max-height:50vh;overflow:auto;margin-top:10px} .board-punkt.gut{background:var(--p-gruen-2);box-shadow:0 0 8px var(--p-gruen-a60)} .board-punkt.schlecht{background:var(--p-rot-2);box-shadow:0 0 8px rgba(255,90,90,.6)} .board-last{display:flex;flex-direction:column;gap:7px} .bl-metrik{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:8px;font-size:11px} .bl-l{opacity:.7} .bl-w{text-align:right;opacity:.9;font-variant-numeric:tabular-nums} .bl-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden} .bl-bar i{display:block;height:100%;border-radius:6px;transition:width .3s ease} .bl-bar i.gut{background:linear-gradient(90deg,#2fa06a,var(--p-gruen-2))} .bl-bar i.warn{background:linear-gradient(90deg,#c9902a,var(--p-orange-2))} .bl-bar i.schlecht{background:linear-gradient(90deg,#c0392b,var(--p-rot-2))} .board-auff{font-size:11px;color:var(--orange);opacity:.9;margin-top:4px} .bl-trend{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;font-size:11px;margin-top:2px} .bl-spark{width:100%;height:20px;opacity:.85} .board-punkt.warn{background:var(--p-orange-2);box-shadow:0 0 8px rgba(255,184,77,.6)} .board-wort{font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:999px;white-space:nowrap; background:rgba(57,217,138,.16);color:var(--p-gruen-4);border:1px solid rgba(57,217,138,.3)} .board-wort.w1{background:rgba(255,184,77,.16);border-color:rgba(255,184,77,.32)} .board-wort.w2{background:rgba(255,90,90,.18);border-color:rgba(255,90,90,.36)} .board-rat{display:flex;flex-direction:column;gap:9px;margin-top:2px;padding-top:11px; border-top:1px solid var(--glas-rand,var(--p-weiss-a10))} .br-hinweis{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.35;color:#ffd9a0} .br-warn{flex:0 0 auto;width:17px;height:17px;border-radius:50%;background:var(--p-orange-2);color:#2a1c00; font-weight:800;font-size:10px;line-height:17px;text-align:center} .br-cta{align-self:flex-start;font:inherit;font-size:12px;font-weight:600;cursor:pointer; padding:8px 14px;border-radius:11px;color:var(--p-weiss);border:1px solid rgba(255,255,255,.18); background:linear-gradient(120deg,var(--pf,var(--p-violett-3)),#c05cff); box-shadow:0 6px 18px rgba(120,80,255,.30);transition:transform .12s ease,box-shadow .12s ease} .br-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(120,80,255,.42)} .br-tat{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .board-rat-nurterm{padding-top:11px} .db-gesamt{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:14px 16px;margin:0 0 14px;border-radius:16px;box-shadow:0 8px 26px rgba(0,0,0,.28)} .db-gesamt.h1{background:linear-gradient(120deg,rgba(255,184,77,.16),transparent 72%)} .db-gesamt.h2{background:linear-gradient(120deg,rgba(255,90,90,.18),transparent 72%);border-color:rgba(255,90,90,.32)} .dbg-l{display:flex;align-items:center;gap:11px} .dbg-l b{font-size:14px} .dbg-punkt{width:12px;height:12px;border-radius:50%;flex:0 0 auto} .dbg-punkt.gut{background:var(--p-gruen-2);box-shadow:0 0 10px rgba(57,217,138,.7)} .dbg-punkt.warn{background:var(--p-orange-2);box-shadow:0 0 10px rgba(255,184,77,.7)} .dbg-punkt.schlecht{background:var(--p-rot-2);box-shadow:0 0 10px rgba(255,90,90,.7)} .dbg-sub{display:block;font-size:11px;opacity:.7;margin-top:1px} body{ background: radial-gradient(1200px 820px at 10% -12%, var(--p-violett-a30), transparent 60%), radial-gradient(1000px 720px at 108% 4%, rgba(255,92,200,.24), transparent 58%), radial-gradient(1100px 900px at 82% 118%, rgba(40,200,200,.22), transparent 60%), radial-gradient(820px 720px at -8% 108%, rgba(255,176,64,.16), transparent 60%), #06060f !important; } :root[data-galaxy="dezent"] body{ background: radial-gradient(1200px 820px at 10% -12%, var(--p-violett-a16), transparent 60%), radial-gradient(1000px 720px at 108% 4%, rgba(255,92,200,.12), transparent 58%), radial-gradient(1100px 900px at 82% 118%, rgba(40,200,200,.10), transparent 60%), #06060f !important; } :root[data-galaxy="aus"] body{ background: var(--grund, #07080D) !important; } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.75; background-repeat:no-repeat; background-image: radial-gradient(1.5px 1.5px at 6% 12%, var(--p-weiss), transparent), radial-gradient(1.3px 1.3px at 14% 42%, #dfe6ff, transparent), radial-gradient(1.4px 1.4px at 22% 74%, var(--p-weiss), transparent), radial-gradient(1.2px 1.2px at 9% 88%, #ffe6c8, transparent), radial-gradient(1.5px 1.5px at 31% 22%, var(--p-weiss), transparent), radial-gradient(1.2px 1.2px at 38% 58%, #e6fbff, transparent), radial-gradient(1.3px 1.3px at 46% 8%, var(--p-weiss), transparent), radial-gradient(1.4px 1.4px at 52% 84%, #f0e6ff, transparent), radial-gradient(1.2px 1.2px at 60% 34%, var(--p-weiss), transparent), radial-gradient(1.5px 1.5px at 67% 66%, #dfe6ff, transparent), radial-gradient(1.3px 1.3px at 74% 16%, var(--p-weiss), transparent), radial-gradient(1.2px 1.2px at 81% 48%, #ffe6c8, transparent), radial-gradient(1.4px 1.4px at 88% 78%, var(--p-weiss), transparent), radial-gradient(1.3px 1.3px at 94% 28%, #e6fbff, transparent), radial-gradient(1.2px 1.2px at 97% 62%, var(--p-weiss), transparent), radial-gradient(1px 1px at 3% 55%, #cfd6ff, transparent), radial-gradient(1px 1px at 27% 95%, var(--p-weiss), transparent), radial-gradient(1px 1px at 43% 40%, var(--p-weiss), transparent), radial-gradient(1px 1px at 58% 12%, #ffeede, transparent), radial-gradient(1px 1px at 71% 92%, var(--p-weiss), transparent), radial-gradient(1px 1px at 85% 6%, #eee6ff, transparent), radial-gradient(1px 1px at 92% 44%, var(--p-weiss), transparent); } :root[data-galaxy="aus"] body::after{ display:none; } html[data-sterne="wenig"] body::after{ opacity:.35; } html[data-sterne="viel"] body::after{ opacity:1; } .analyse-kopf,.gruppe-reiter{background-image:linear-gradient(120deg,var(--p-violett-a10),rgba(90,141,239,.05))} .terminal-huelle .xterm, .terminal-huelle .xterm .xterm-viewport{ background: transparent !important; } .analyse-karte{ box-shadow: 0 22px 60px var(--p-schwarz-a45), 0 0 0 1px var(--glas-rand,var(--p-violett-a22)), 0 0 40px -12px rgba(124,92,255,.4) !important; } .analyse-karte::before{ opacity: .9 !important; height: 2px !important; } .gruppe-koerper, .einst-block, .db-karte, .leit-feld{ background-image: linear-gradient(150deg, rgba(124,92,255,.07), rgba(40,200,200,.04)) !important; } .analyse-knopf:hover, .aktion:hover, .sz-knopf:hover, .werkzeuge-kopf:hover{ background-image: linear-gradient(120deg, var(--p-violett-a18), rgba(214,107,196,.10)) !important; border-color: var(--p-violett-a50) !important; box-shadow: 0 0 0 1px rgba(160,130,255,.28), 0 8px 22px -10px var(--p-violett-a60) !important; } .analyse-knopf.aktiv, .aktion.aktiv{ background-image: linear-gradient(120deg, rgba(124,92,255,.24), rgb(var(--neon-c) / .12)) !important; } .leit-health.h0,.board-wort.w0{ box-shadow: 0 0 14px -4px rgba(57,217,138,.7); } .leit-health.h1,.board-wort.w1{ box-shadow: 0 0 14px -4px rgba(255,184,77,.7); } .leit-health.h2,.board-wort.w2{ box-shadow: 0 0 14px -4px rgba(255,90,90,.7); } ::-webkit-scrollbar-thumb{ background: var(--scroll-thumb, linear-gradient(180deg,#7c5cff,#c05cff)) !important; border-radius: 8px; } ::selection{ background: var(--auswahl, rgba(160,107,255,.34)); color:#fff; } :root[data-galaxy="aus"] .analyse-karte{ background-image:none; box-shadow: 0 22px 60px var(--p-schwarz-a45), 0 0 0 1px var(--linie); } :root[data-galaxy="dezent"] .analyse-karte{ box-shadow: 0 22px 60px var(--p-schwarz-a45), 0 0 0 1px var(--glas-rand,var(--p-violett-2-a16)); } .reiterleiste, .werkzeuge{ background: radial-gradient(640px 220px at 10% 0%, rgba(124,92,255,.24), transparent 70%), radial-gradient(640px 220px at 92% 0%, rgba(214,107,196,.17), transparent 70%), radial-gradient(700px 260px at 55% 130%, rgba(40,200,200,.12), transparent 70%), linear-gradient(180deg, rgba(10,9,26,.92), rgba(7,6,16,.84)) !important; border-bottom: 1px solid var(--glas-rand,var(--p-violett-a22)) !important; } .reiter.aktiv{ background: color-mix(in srgb, var(--p-violett-2) 18%, transparent) !important; border-top: 2px solid var(--orange) !important; box-shadow: 0 -6px 20px -8px rgba(160,107,255,.6) !important; } .wz-titel, #wzTitel{ color: var(--p-violett-hell-7); } .dbg-mitte{flex:1 1 220px;min-width:180px} .dbg-empf{display:inline-block;font-size:12px;line-height:1.4;color:#ffe6bd; padding:7px 12px;border-radius:11px; background:linear-gradient(120deg,rgba(255,184,77,.14),var(--p-violett-a10)); border:1px solid rgba(255,184,77,.26)} .dbg-empf b{color:var(--p-weiss)} .ip-herkunft{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.02em; padding:1px 7px;margin-left:2px;border-radius:999px;vertical-align:middle;white-space:nowrap; color:#a9c7ff;background:rgba(90,141,239,.14);border:1px solid rgba(120,150,255,.22)} .kurz-eingabe{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px; color:var(--text,var(--p-blau-hell));background:var(--p-weiss-a04); border:1px solid var(--glas-rand,var(--p-violett-a22));border-radius:12px;padding:10px 12px;resize:vertical; word-break:break-all} .kurz-eingabe:focus{outline:none;border-color:var(--akzent-cyan,var(--p-cyan))} .kurz-link{display:inline-block;font-size:14px;font-weight:650;color:#a9c7ff;word-break:break-all; padding:6px 10px;border-radius:10px;background:rgba(90,141,239,.14);border:1px solid rgba(120,150,255,.28);text-decoration:none} .kurz-link:hover{border-color:var(--akzent-cyan,var(--p-cyan))} .db-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .db-tab{font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:7px 14px;border-radius:999px; color:var(--text,var(--p-blau-hell));background:var(--p-weiss-a05);border:1px solid var(--glas-rand,var(--p-violett-a20)); transition:background .14s,border-color .14s,transform .1s} .db-tab:hover{border-color:var(--akzent-cyan,var(--p-cyan))} .db-tab.an{background:linear-gradient(120deg,var(--p-violett-a30),var(--p-pink-a18));border-color:var(--p-violett-2-a60);box-shadow:0 6px 16px -8px var(--p-violett-a60)} .db-aktionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 8px} .db-akt{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:11px 12px;border-radius:13px;transition:transform .12s,box-shadow .12s} .db-akt:hover{transform:translateY(-1px)} .db-akt.fa{color:#241800} .db-akt.hr{color:#04231a} .db-scope{font-size:11.5px;opacity:.8;margin:0 0 12px} .db-scope b{color:var(--p-violett-hell-7)} #leitWaechter[data-scope]:not([data-scope="alle"]) .boards-gitter .board{display:none} #leitWaechter[data-scope]:not([data-scope="alle"]) .boards-gitter .board.scope-an{display:flex} .db-sek{margin:0 0 12px;border:1px solid var(--glas-rand,var(--p-violett-2-a16));border-radius:16px;overflow:hidden; background:linear-gradient(150deg,var(--p-violett-a06),rgba(40,200,200,.03))} .db-sek-kopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit; cursor:pointer;padding:11px 14px;color:var(--text,var(--p-blau-hell));background:transparent;border:0;text-align:left} .db-sek-titel{font-weight:650;font-size:13.5px} .db-sek-pfeil{opacity:.7;transition:transform .18s ease} .db-sek-koerper{padding:12px 14px 14px} .db-sek.zu .db-sek-koerper{display:none} .db-fehler{margin:0 0 12px;border:1px solid var(--p-orange-a30);border-radius:16px;padding:12px 14px; background:linear-gradient(150deg,rgba(255,159,67,.10),var(--p-violett-a06))} .db-fehler-kopf{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-bottom:8px} .db-fehler-ok{color:var(--p-gruen-4);font-weight:600} .db-fb{padding:8px 0;border-top:1px solid var(--glas-rand,var(--p-weiss-a08))} .db-fb:first-of-type{border-top:0} .db-fb-name{font-weight:650;margin-bottom:3px} .db-fb-tag{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--p-rot-2);color:var(--p-weiss);vertical-align:middle} .db-fb-z,.db-fb-w{font-size:12px;opacity:.9;line-height:1.4} .db-fb-l{opacity:.7} .db-fb-w{color:#ffd9a0} .db-fb-zeit{opacity:.6;font-size:10.5px} .db-akt, .db-tab, .cc-btn, .sperre-knopf, .br-cta, .hb-tat, .analyse-knopf, .aktion, .sz-knopf, .wz, .n-knopf, .g-reiter, .db-sek-kopf, .adr-kopf { transition: transform 120ms cubic-bezier(.2,0,0,1), background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, opacity 140ms ease-out; } .db-akt:active, .db-tab:active, .cc-btn:active, .sperre-knopf:active, .br-cta:active, .hb-tat:active, .analyse-knopf:active, .aktion:active, .sz-knopf:active, .wz:active, .n-knopf:active, .g-reiter:active { transform: scale(.97); } :focus-visible { outline: 2px solid var(--akzent-cyan,var(--p-cyan)); outline-offset: 2px; border-radius: 8px; } .db-tab, .g-reiter, .reiter { font: inherit; letter-spacing: .1px; } @media (prefers-reduced-motion: reduce){ .db-akt:active, .db-tab:active, .cc-btn:active, .sperre-knopf:active, .br-cta:active, .hb-tat:active, .analyse-knopf:active, .aktion:active, .sz-knopf:active, .wz:active, .n-knopf:active, .g-reiter:active { transform: none; } } .hinweis { z-index: 600 !important; } .hinweis button { pointer-events: auto !important; min-height: 42px; padding: 9px 18px; font-size: 13.5px; } .sperre-karte{ width: min(400px, 92vw); padding: 40px 32px 30px !important; text-align: center; border-radius: 22px !important; background: linear-gradient(180deg, var(--p-weiss-a06), var(--p-weiss-a02)), rgba(12,10,28,.74) !important; border: 1px solid var(--glas-rand, var(--p-violett-a22)) !important; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); } .sperre-raute{ width: 92px; height: 92px; margin: 0 auto 18px !important; } .sperre-karte h1{ font-weight: 680 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; margin: 0 0 4px !important; color: var(--text, var(--p-violett-hell-5)) !important; } .sperre-karte p{ font-size: 13.5px !important; color: var(--schrift-2, #a9a6c0) !important; letter-spacing: .3px !important; margin: 0 0 26px !important; } .sperre-karte input{ width: 100%; box-sizing: border-box; font: inherit; font-size: 16px !important; padding: 14px 16px !important; margin: 0 0 12px !important; border-radius: 14px !important; color: var(--text, var(--p-violett-hell-5)) !important; border: 1px solid var(--glas-rand, var(--p-violett-a20)) !important; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out !important; } .sperre-karte input::placeholder{ color: var(--schrift-3, #7b7896) !important; } .sperre-karte input:focus{ outline: none !important; border-color: var(--akzent-cyan, var(--p-cyan)) !important; box-shadow: 0 0 0 3px rgb(var(--neon-c) / .18) !important; background: var(--p-weiss-a07) !important; } .merk-zeile{ display: flex; align-items: center; gap: 9px; justify-content: center; margin: 4px 0 18px !important; font-size: 13px; color: var(--schrift-2, #a9a6c0); } .merk-zeile input{ width: auto !important; margin: 0 !important; accent-color: var(--orange, var(--p-orange)); } .sperre-fehler{ color: #ff9a9a !important; font-size: 13px; margin: 0 0 12px; } .sperre-fehler:empty{ display: none; } .sperre-knopf{ width: 100%; font: inherit; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em; padding: 15px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer; transition: transform 120ms cubic-bezier(.2,0,0,1), box-shadow 140ms ease-out, filter 140ms ease-out !important; } .sperre-knopf:active{ transform: scale(.98) !important; } .sperre-knopf:disabled{ opacity: .5 !important; box-shadow: none !important; cursor: default; } .sperre-fuss{ margin-top: 14px; font-size: 12px; color: var(--schrift-3, #7b7896); } #kanal .kanal-kopf{ padding:10px 14px; } #kanal .kanal-kopf .kanal-titel{ font-size:15px; font-weight:600; } .kanal-tabs{ flex:0 0 auto; display:flex; gap:7px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px; min-height:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .kanal-tabs::-webkit-scrollbar{ display:none; } .kanal-chip{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:500; padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; color:var(--schrift-2,var(--p-violett-hell-5)); background:var(--p-weiss-a05); border:1px solid var(--glas-rand,var(--p-violett-a20)); transition:background .15s ease,border-color .15s ease,color .15s ease; } .kanal-chip:active{ transform:scale(.97); } .kanal-chip.an{ color:var(--schrift); background:color-mix(in srgb,var(--akzent-cyan,var(--p-cyan)) 20%,transparent); border-color:var(--akzent-cyan,var(--p-cyan)); } .kc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; } .kanal-an{ display:inline-flex; align-items:center; white-space:nowrap; font-size:12px; font-weight:600; color:var(--schrift-3,var(--p-violett-hell-5)); opacity:.85; align-self:center; } .forum-praesenz{ flex:0 0 auto; display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px; min-height:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; align-items:center; } .forum-praesenz:empty{ display:none; } .forum-praesenz::-webkit-scrollbar{ display:none; } .fp-zahl{ flex:0 0 auto; font-size:11px; font-weight:600; color:var(--schrift-3,var(--p-violett-hell-5)); opacity:.7; padding-right:2px; } .fp-nutzer{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500; padding:5px 11px 5px 5px; border-radius:999px; cursor:pointer; white-space:nowrap; color:var(--schrift-2,var(--p-violett-hell-5)); background:var(--p-weiss-a05); border:1px solid var(--glas-rand,var(--p-violett-a20)); } .fp-nutzer:active{ transform:scale(.97); } .fp-nutzer.on{ color:var(--schrift); } .fp-av{ position:relative; width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--p-weiss); background:var(--av,var(--p-blau)); } .fp-dot{ position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--grau); border:2px solid var(--karten-grund); box-sizing:content-box; } .fp-nutzer.on .fp-dot{ background:var(--gruen); box-shadow:0 0 6px -1px var(--gruen); } .fp-nutzer:not(.on){ opacity:.6; } .kanal-chat{ display:flex; flex-direction:column; overflow-y:auto; } .kb{ border-radius:14px; } .kb-kopf{ opacity:.6; margin-bottom:3px; } .kb-text{ font-size:12.5px; line-height:1.4; white-space:pre-wrap; word-break:break-word; } .kanal-senden{ display:flex; gap:8px; margin-top:12px; } .kanal-senden input{ flex:1; box-sizing:border-box; font:inherit; font-size:16px; padding:11px 13px; border-radius:12px; background:var(--p-weiss-a05); border:1px solid var(--glas-rand,var(--p-violett-a20)); color:var(--text,var(--p-violett-hell-5)); } .kanal-senden input:focus{ outline:none; border-color:var(--akzent-cyan,var(--p-cyan)); box-shadow:0 0 0 3px rgb(var(--neon-c) / .16); } @keyframes loginKarteRein { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes loginKindRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .sperre-karte{ animation: loginKarteRein .55s cubic-bezier(.16,1,.3,1) both; } .sperre-raute{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .06s both; } .sperre-karte h1{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .12s both; } .sperre-karte p{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .16s both; } .sperre-karte input{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .20s both; } .merk-zeile{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .26s both; } .sperre-knopf{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .30s both; } .sperre-karte input:focus{ transform: translateY(-1px); } .sperre-knopf{ position: relative; overflow: hidden; } .sperre-knopf::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform: translateX(-120%); transition: transform .6s ease; } .sperre-knopf:hover::after{ transform: translateX(120%); } @media (prefers-reduced-motion: reduce){ .sperre-karte, .sperre-raute, .sperre-karte h1, .sperre-karte p, .sperre-karte input, .merk-zeile, .sperre-knopf { animation: none !important; } .sperre-karte input:focus{ transform: none; } .sperre-knopf::after{ display:none; } } .kanal-ziel{ font: inherit; font-size: 13px; padding: 10px 10px; border-radius: 12px; color: var(--text,var(--p-violett-hell-5)); background: var(--p-weiss-a05); border: 1px solid var(--glas-rand,var(--p-violett-a20)); } .kanal-ziel:focus{ outline:none; border-color: var(--akzent-cyan,var(--p-cyan)); } #seite .analyse-knopf, #seite .aktion, #seite .sz-knopf, #einstellungen #menueListe .analyse-knopf, #einstellungen .einst-block .analyse-knopf { background: linear-gradient(120deg, var(--p-violett-a12), rgba(90,141,239,.06)) !important; border: 1px solid var(--glas-rand, var(--p-violett-a20)) !important; color: var(--text, var(--p-blau-hell)) !important; } #seite .analyse-knopf:hover, #seite .aktion:hover, #seite .sz-knopf:hover, #einstellungen .analyse-knopf:hover { background: linear-gradient(120deg, var(--p-violett-2-a22), var(--p-pink-a12)) !important; border-color: var(--p-violett-a50) !important; } #seite .analyse-knopf.aktiv, #seite .aktion.aktiv, #einstellungen .analyse-knopf.aktiv { background: linear-gradient(120deg, var(--p-violett-a30), var(--p-pink-a18)) !important; border-color: var(--p-violett-2-a60) !important; color: var(--p-weiss) !important; } .gruppe-reiter .g-reiter { background: linear-gradient(120deg, var(--p-violett-a10), rgba(90,141,239,.05)) !important; border: 1px solid var(--glas-rand, rgba(160,130,255,.18)) !important; color: var(--text, var(--p-blau-hell)) !important; } .gruppe-reiter .g-reiter:hover { border-color: var(--p-violett-a50) !important; } .gruppe-reiter .g-reiter.an, .g-reiter.an { background: linear-gradient(120deg, rgba(124,92,255,.32), var(--p-pink-a18)) !important; color: var(--p-weiss) !important; border-color: var(--p-violett-2-a60) !important; font-weight: 700 !important; } .willkommen{ text-align:center; animation: loginKarteRein .55s cubic-bezier(.16,1,.3,1) both; } .willkommen .w-raute{ animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .06s both; } .willkommen h1{ font-size:34px !important; font-weight:680 !important; letter-spacing:-.02em !important; margin:12px 0 6px !important; color:var(--text,var(--p-violett-hell-5)) !important; animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .12s both; } .willkommen p{ font-size:14.5px !important; line-height:1.6 !important; margin:0 auto 22px !important; max-width:440px; animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .18s both; } .w-tipps{ display:flex; flex-direction:column; gap:9px; align-items:center; animation: loginKindRein .5s cubic-bezier(.16,1,.3,1) .24s both; } .w-tipps > div{ font-size:12.5px; color:var(--schrift-3,#8b88a6); display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; } .w-tipps kbd{ font-family:"Cascadia Mono","JetBrains Mono",Consolas,monospace; font-size:11px; padding:3px 8px; border-radius:7px; background:var(--p-weiss-a06); border:1px solid var(--glas-rand,var(--p-violett-a22)); color:var(--text,var(--p-blau-hell)); box-shadow:0 1px 0 rgba(0,0,0,.3); line-height:1; } @media (prefers-reduced-motion: reduce){ .willkommen, .willkommen .w-raute, .willkommen h1, .willkommen p, .w-tipps{ animation:none !important; } } .wahl-block.wahl-trenner{ margin-top:12px; padding-top:12px; border-top:1px solid var(--glas-rand,var(--p-violett-2-a16)); } .reiter.reiter-kanal{ display:flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer; font:inherit; font-weight:600; color:var(--p-weiss) !important; padding:0 14px; border-radius:10px 10px 0 0; background:linear-gradient(120deg,var(--p-violett-a30),rgba(214,107,196,.16)) !important; border:1px solid rgba(160,130,255,.4) !important; border-bottom:none !important; } .reiter.reiter-kanal:hover{ border-color:var(--akzent-cyan,var(--p-cyan)) !important; } .reiter.reiter-kanal .rk-sym{ color:#c9a8f0; } .reiter.reiter-kanal:active{ transform: scale(.97); } .dw-kopf{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .dw-stat{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; border:1px solid var(--glas-rand,var(--p-violett-a22)); } .dw-stat.gut{ color:var(--p-gruen-4); background:rgba(57,217,138,.14); border-color:rgba(57,217,138,.3); } .dw-stat.warn{ color:#ffcf8a; background:rgba(255,184,77,.14); border-color:rgba(255,184,77,.3); } .dw-titel{ font-size:11.5px; opacity:.7; margin:12px 0 6px; } .dw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 12px; } .dw-item{ display:flex; align-items:center; gap:8px; font-size:12px; } .dw-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .dw-dot.gut{ background:var(--p-gruen-2); box-shadow:0 0 6px var(--p-gruen-a60); } .dw-dot.schlecht{ background:var(--p-rot-2); box-shadow:0 0 6px rgba(255,90,90,.6); } .tastenleiste .taste{ flex:1 1 0; min-height:48px; font-size:17px; font-weight:600; border-radius:12px; } .kb-grp.mein{ align-items:flex-end; } .kb-grp.fremd{ align-items:flex-start; } .kb-grp .kb-kopf{ font-size:10px; opacity:.6; margin:0 6px 2px; } .kb-grp .kb{ max-width:100%; } .kb-grp .kb + .kb{ border-radius:16px 16px 5px 16px; } .kb .kb-text{ white-space:pre-wrap; word-break:break-word; } .kb .kb-zeit{ display:flex; gap:6px; align-items:center; } .sperre-karte{ box-shadow: 0 34px 100px var(--p-schwarz-a55), 0 0 0 1px var(--glas-rand,rgba(160,130,255,.30)), 0 0 90px -22px rgba(124,92,255,.8), inset 0 1px 0 var(--p-weiss-a07) !important; } .sperre-karte .sperre-raute{ background: radial-gradient(circle at 50% 46%, rgba(255,159,67,.20), transparent 60%) !important; } .sperre-karte h1{ font-size: 33px !important; text-shadow: 0 0 26px rgba(124,92,255,.35); } @property --deg { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @keyframes loginRand { to { --deg: 360deg; } } .sperre-karte { position: relative; } .sperre-karte::before { content: ""; position: absolute; inset: 0; top: 0; left: 0; right: 0; height: auto !important; border-radius: 22px; padding: 1.6px; pointer-events: none; opacity: .9 !important; background: conic-gradient(from var(--deg,0deg), rgba(124,92,255,.95), rgba(214,107,196,.75), rgb(var(--neon-c) / .85), rgba(255,159,67,.75), rgba(124,92,255,.95)) !important; -webkit-mask: linear-gradient(var(--p-schwarz) 0 0) content-box, linear-gradient(var(--p-schwarz) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--p-schwarz) 0 0) content-box, linear-gradient(var(--p-schwarz) 0 0); mask-composite: exclude; animation: loginRand 9s linear infinite; } @media (prefers-reduced-motion: reduce) { .sperre-karte::before { animation: none; } } .wz{ padding:7px 12px; border-radius:11px; color:var(--text,var(--p-blau-hell)) !important; background:linear-gradient(120deg,var(--p-violett-a12),rgba(90,141,239,.06)) !important; border:1px solid var(--glas-rand,var(--p-violett-a20)) !important; transition:transform 120ms cubic-bezier(.2,0,0,1), background 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out !important; } .wz:hover{ background:linear-gradient(120deg,var(--p-violett-2-a22),var(--p-pink-a12)) !important; border-color:var(--p-violett-a50) !important; box-shadow:0 6px 16px -8px var(--p-violett-a60) !important; } .wz:active{ transform:scale(.96); } .wz .wz-zeichen{ color:#c9a8f0; } .wz-titel { flex: 0 1 auto !important; } .wz-ort { flex: 0 1 auto !important; } #seite .analyse-knopf, #seite .aktion, #seite .sz-knopf, #seite .werkzeuge-kopf { background-image: linear-gradient(118deg, var(--p-violett-2-a22), rgb(var(--neon-c) / .11)) !important; border-color: color-mix(in srgb, var(--p-violett-2) 40%, var(--glas-rand)) !important; box-shadow: inset 2px 0 0 rgba(139,110,255,.65) !important; } #seite .analyse-knopf:hover, #seite .aktion:hover, #seite .sz-knopf:hover, #seite .werkzeuge-kopf:hover { background-image: linear-gradient(118deg, rgba(124,92,255,.26), var(--p-pink-a12)) !important; border-color: rgba(160,130,255,.55) !important; } #seite .analyse-knopf.aktiv, #seite .aktion.aktiv { background-image: linear-gradient(118deg, var(--p-violett-a30), rgb(var(--neon-c) / .14)) !important; box-shadow: inset 3px 0 0 var(--akzent-cyan,var(--p-cyan)), 0 0 16px var(--p-violett-a18) !important; } #seite .wahl-huelle select { background-image: linear-gradient(118deg, var(--p-violett-a16), rgb(var(--neon-c) / .07)) !important; border-color: color-mix(in srgb, var(--p-violett-2) 24%, var(--glas-rand)) !important; } :root[data-geraet="laptop"] { --seite-breite: 226px; } :root[data-geraet="desktop"] { --seite-breite: 244px; } :root[data-geraet="desktop"] .boards-gitter { grid-template-columns: repeat(3, 1fr); } :root[data-geraet="desktop"] #leitWaechter, :root[data-geraet="laptop"] #leitWaechter { max-width: 1180px; margin-inline: auto; } :root[data-zeiger="grob"] .wz { min-height: 40px; } body.nur-nutzer #navUebersicht, body.nur-nutzer #dashboardKnopf, body.nur-nutzer #eingangKnopf, body.nur-nutzer .reiter-kanal { display: none !important; } body.nur-nutzer #tlReiter { display: none !important; } body.nur-nutzer #monReiterLeiste [data-tab="server"], body.nur-nutzer #monReiterLeiste [data-tab="projekte"], body.nur-nutzer #monReiterLeiste [data-tab="update"] { display: none !important; } .pf-kopf { display: flex; align-items: center; gap: 15px; padding: 16px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(180deg, rgb(var(--neon-c) / .06), var(--p-weiss-a03)); border: 1px solid var(--linie); box-shadow: inset 0 1px 0 var(--p-weiss-a06); } .pf-avatar { width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--auf-orange); background: var(--gx-verlauf); box-shadow: 0 8px 22px -8px rgb(var(--neon-c) / .55), inset 0 1px 0 var(--p-weiss-a50); } .pf-kopf-txt { flex: 1; min-width: 0; } .pf-name { font-size: 22px; font-weight: 700; color: var(--schrift); letter-spacing: -.3px; } .pf-meta { font-size: 12.5px; color: var(--schrift-3); margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .pf-rolle { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; padding: 2px 9px; border-radius: 99px; color: var(--akzent-cyan, var(--p-cyan)); background: var(--p-weiss-a06); border: 1px solid var(--linie); } .pf-rolle.chef { color: var(--orange); } .pf-edit { margin: 14px 0; padding: 12px; border: 1px solid var(--glas-rand, var(--linie)); border-radius: 12px; background: var(--p-violett-a06); } .pf-feld { display: block; font-size: 12px; color: var(--schrift-3); margin-bottom: 10px; } .pf-feld input { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--glas-rand, var(--linie)); background: var(--p-weiss-a05); color: var(--schrift); font: inherit; } .pf-edit-tat { display: flex; gap: 8px; align-items: center; } .pf-hinweis { font-size: 11.5px; color: var(--schrift-3); margin-top: 9px; font-style: italic; } .pf-willkommen { padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); font-size: 13.5px; line-height: 1.5; } .pf-willkommen b { color: var(--akzent-cyan, var(--p-cyan)); } .pf-abschnitt { margin-top: 18px; } .pf-abschnitt h3 { font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--schrift-3); margin: 0 0 11px; font-weight: 700; } .pf-projekt { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name oeffnen" "rechte oeffnen"; align-items: center; column-gap: 10px; row-gap: 6px; padding: 11px 13px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--glas-rand, var(--linie)); border-left: 3px solid var(--pf, var(--p-blau)); background: linear-gradient(118deg, rgb(var(--neon-c) / .07), var(--p-weiss-a03)); box-shadow: inset 0 1px 0 var(--p-weiss-a06); transition: transform .15s cubic-bezier(.23,1,.32,1), border-color .15s; } @media (hover: hover) and (pointer: fine) { .pf-projekt:hover { transform: translateY(-1px); border-left-color: var(--pf, var(--p-blau)); border-color: rgb(var(--neon-c) / .35); } } .pf-p-name { grid-area: name; font-weight: 600; color: var(--schrift); min-width: 0; word-break: normal; overflow-wrap: break-word; } .pf-oeffnen { grid-area: oeffnen; align-self: center; white-space: nowrap; } .pf-term { background: linear-gradient(120deg, var(--p-violett), var(--p-pink)); border-color: transparent; color: var(--p-weiss); font-weight: 650; } .pf-rechte { grid-area: rechte; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-start; } .pf-recht { white-space: nowrap; } .pf-recht { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--p-violett-a18); color: var(--p-violett-hell-7); } .pf-recht.pf-nur { background: var(--p-weiss-a08); color: var(--schrift-3); } .pf-leer { font-size: 12.5px; color: var(--schrift-3); font-style: italic; } .pf-akt-zeile { font-size: 13px; color: var(--schrift-2); margin-bottom: 9px; } .pf-sitz { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; margin-bottom: 5px; border-radius: 9px; background: var(--p-weiss-a04); font-size: 12.5px; } .pf-geraet { color: var(--schrift); } .pf-s-zeit { color: var(--schrift-3); } .kanal-stand { flex: 0 0 auto; margin: 0 0 12px; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--glas-rand, var(--linie)); background: linear-gradient(118deg, var(--p-violett-a10), rgb(var(--neon-c) / .05)); } .kanal-stand:empty { display: none; } .ks-zeile { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--schrift); } .ks-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .ks-dot.gut { background: var(--gruen); box-shadow: 0 0 8px -1px var(--gruen); } .ks-dot.schlecht { background: var(--rot); box-shadow: 0 0 8px -1px var(--rot); } .ks-teil { font-size: 12px; color: var(--schrift-2); margin-top: 4px; } .ks-teil.warn { color: var(--orange); } .proj-terminal { margin: 2px 0 4px; } .proj-terminal:empty { display: none; } .pt-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-left: 10px; padding: 5px 30px; font: inherit; font-size: 12.5px; text-align: center; cursor: pointer; color: var(--schrift-3); background: none; border: none; border-radius: 8px; position: relative; } .pt-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: var(--schrift-3); box-shadow: 0 0 0 3px transparent, 0 0 0 4px color-mix(in srgb, var(--schrift-3) 40%, transparent); } .pt-link:hover { color: var(--schrift); background: var(--p-violett-a10); } .pt-link:hover::before { background: var(--akzent-cyan, var(--p-cyan)); } .pt-link.aktiv { color: var(--schrift); } .pt-link.aktiv::before { background: var(--akzent-cyan, var(--p-cyan)); box-shadow: 0 0 8px -1px var(--akzent-cyan, var(--p-cyan)); } .pt-link .laeuft-punkt { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } :root[data-geraet="laptop"] .analyse-karte { max-width: 760px; } :root[data-geraet="laptop"] .analyse-karte.breit { max-width: 940px; } :root[data-geraet="desktop"] .analyse-karte { max-width: 820px; } :root[data-geraet="desktop"] .analyse-karte.breit { max-width: 1160px; } :root[data-geraet="desktop"] #profil .analyse-inhalt { max-width: 100%; } :root[data-zeiger="grob"] #seite .analyse-knopf, :root[data-zeiger="grob"] .pf-projekt { min-height: 48px; } :root[data-zeiger="grob"] .db-tab, :root[data-zeiger="grob"] .g-reiter { min-height: 36px; } .db-tab, .g-reiter { white-space: nowrap; } @media (max-width: 440px) { :is(#k-system, :root)[data-zeiger="grob"] .db-tabs .db-tab, .db-tabs .db-tab { min-height: 30px; padding: 4px 11px; font-size: 11.5px; } } :root[data-zeiger="grob"] .pt-link { min-height: 40px; } :root[data-zeiger="grob"] .db-akt { padding-top: 12px; padding-bottom: 12px; } :root[data-geraet="handy"] .analyse-karte { max-height: 92dvh; } .kanal-chat { gap: 2px; max-height: 62vh; min-height: 320px; padding: 10px 4px 6px; } :root[data-geraet="desktop"] .kanal-chat, :root[data-geraet="laptop"] .kanal-chat { max-height: 66vh; } .kb-grp { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; max-width: 78%; margin: 12px 0 2px; } .kb-grp.fremd { align-self: flex-start; margin-right: auto; } .kb-grp.mein { align-self: flex-end; margin-left: auto; flex-direction: row-reverse; } .kb-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--p-weiss); margin-bottom: 2px; background: linear-gradient(135deg, var(--av, var(--p-blau)), color-mix(in srgb, var(--av,var(--p-blau)) 55%, var(--p-schwarz))); box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--av,var(--p-blau)) 70%, transparent); } .kb-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kb-grp.mein .kb-col { align-items: flex-end; } .kb-kopf { font-size: 11.5px; color: var(--schrift-3); margin: 0 8px 2px; font-weight: 600; } .kb-name { font: inherit; color: inherit; font-weight: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .kb-name:hover { color: var(--akzent-cyan, var(--p-cyan)); } .kb-name:active { opacity: .7; } .kb-an { color: var(--akzent-cyan, var(--p-cyan)); font-weight: 500; } .kb { max-width: 100%; padding: 8px 12px; border: none !important; } .kb-grp.fremd .kb { border-radius: 16px 16px 16px 5px; } .kb-grp.fremd .kb + .kb { border-radius: 16px 16px 16px 5px; } .kb-grp.mein .kb { border-radius: 16px 16px 5px 16px; } .kb-grp.mein .kb + .kb { border-radius: 16px 16px 5px 16px; } .kb .kb-text { font-size: 14px; line-height: 1.4; } .kb .kb-zeit { font-size: 10.5px; opacity: .6; margin-top: 3px; } .kb-grp.mein .kb .kb-zeit { color: var(--p-weiss-a75); opacity: 1; } .kb-weg { font: inherit; font-size: 13px; line-height: 1; padding: 0 4px; border: 0; background: none; color: inherit; opacity: .45; cursor: pointer; border-radius: 5px; } .kb-weg:hover, .kb-weg:active { opacity: 1; color: var(--rot); } .kb-erw { color: var(--akzent-cyan, var(--p-cyan)); font-weight: 600; } .kb-edit { font: inherit; font-size: 12px; line-height: 1; padding: 0 4px; border: 0; background: none; color: inherit; opacity: .45; cursor: pointer; border-radius: 5px; } .kb-edit:hover, .kb-edit:active { opacity: 1; color: var(--akzent-cyan, var(--p-cyan)); } .kb-edit-feld { width: 100%; min-width: 180px; font: inherit; font-size: 13px; resize: vertical; background: var(--flaeche-2); color: var(--schrift); border: 1px solid var(--akzent-cyan, var(--p-cyan)); border-radius: 8px; padding: 6px 8px; } .kanal-senden { position: relative; } .kb-erw-vorschlag { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: 5px; box-shadow: 0 -6px 24px -8px var(--p-schwarz-a50); max-height: 220px; overflow-y: auto; } .kb-erw-opt { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 13px; text-align: left; padding: 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--schrift); cursor: pointer; } .kb-erw-opt.an, .kb-erw-opt:hover { background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 18%, transparent); } .kb-erw-opt .fp-av { flex-shrink: 0; } .kb-erw-opt .erw-on { margin-left: auto; font-size: 10px; color: var(--gruen); } .kb-art { padding: 0 7px; border-radius: 999px; background: rgba(255,184,77,.22); color: #ffcf8a; font-weight: 600; } .kb-tag { text-align: center; margin: 14px 0 6px; } .kb-aelter { display: block; margin: 4px auto 12px; font: inherit; font-size: 12px; color: var(--schrift-3); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; padding: 5px 14px; cursor: pointer; } .kb-aelter:hover { color: var(--schrift-2); border-color: var(--linie-hell); } .kb-tag span { font-size: 11px; padding: 3px 12px; border-radius: 999px; } .pf-rolle.admin { color: #ff5a7a; text-shadow: 0 0 12px rgba(255,90,122,.5); font-weight: 800; } .pf-rolle.verwalter { color: var(--akzent-cyan, var(--p-cyan)); } .n-rolle-wahl { font: inherit; font-size: 12px; padding: 6px 9px; border-radius: 9px; color: var(--schrift); background: linear-gradient(118deg, var(--p-violett-a16), rgb(var(--neon-c) / .07)); border: 1px solid var(--glas-rand, var(--linie)); } .n-rolle-fest { font-size: 12px; font-weight: 700; color: #ff5a7a; padding: 6px 10px; align-self: center; } .kb-haken { margin-left: 4px; font-size: 11px; letter-spacing: -1px; color: var(--p-weiss-a55); } .kb-haken.gelesen { color: #6fd3ff; } .kb-grp.mein .kb .kb-zeit { justify-content: flex-end; } :root[data-geraet="handy"] .kanal-chat { max-height: none; flex: 1 1 auto; min-height: 40vh; } :root[data-geraet="handy"] .kb-grp { max-width: 88%; } :root[data-geraet="handy"] #kanal .analyse-inhalt { display: flex; flex-direction: column; } :root[data-geraet="handy"] .kanal-senden { position: sticky; bottom: 0; margin-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--grund,var(--p-violett-dunkel-3)) 30%); } :root[data-geraet="handy"] .kanal-senden input { font-size: 16px; } :root[data-geraet="handy"] .kanal-stand { font-size: 12px; } @media (max-width: 520px) { .kb-grp { max-width: 90%; } .kanal-senden { flex-wrap: wrap; } .kanal-ziel { flex: 1 1 100%; } } .db-karte { background: radial-gradient(120% 90% at 0% 0%, var(--p-violett-a14), transparent 60%), linear-gradient(160deg, rgba(20,16,38,.9), rgba(10,9,18,.85)) !important; border: 1px solid var(--glas-rand, rgba(160,130,255,.18)) !important; box-shadow: inset 0 1px 0 var(--p-weiss-a04) !important; } .db-karte .db-zahl { text-shadow: 0 0 10px currentColor; } .db-sek, .db-karte { contain: content; } .db-karte.gut .db-zahl { color: var(--p-gruen-2); } .db-karte.warn .db-zahl { color: var(--p-orange-2); } .db-karte.schlecht .db-zahl { color: var(--p-rot-3); } .board { background: radial-gradient(130% 80% at 0% 0%, color-mix(in srgb, var(--pf, var(--p-blau)) 22%, transparent), transparent 62%), linear-gradient(160deg, rgba(20,16,38,.88), rgba(9,8,16,.82)) !important; border: 1px solid color-mix(in srgb, var(--pf, var(--p-blau)) 26%, var(--glas-rand, var(--linie))) !important; border-left: 3px solid var(--pf, var(--p-blau)) !important; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--pf,var(--p-blau)) 60%, transparent) !important; } .board-name { text-shadow: 0 0 14px color-mix(in srgb, var(--pf,var(--p-blau)) 55%, transparent); } .board-wort { box-shadow: none !important; } .board-wort.w0 { color: var(--p-gruen-2); text-shadow: 0 0 12px var(--p-gruen-a60); } .board-wort.w1 { color: var(--p-orange-2); text-shadow: 0 0 12px rgba(255,184,77,.6); } .board-wort.w2 { color: var(--p-rot-3); text-shadow: 0 0 12px rgba(255,107,107,.6); } .db-gesamt { background: radial-gradient(80% 140% at 100% 0%, rgba(214,107,196,.14), transparent 60%), linear-gradient(120deg, var(--p-violett-a16), rgba(20,16,38,.9)) !important; border: 1px solid var(--glas-rand, var(--p-violett-a20)) !important; } .db-akt { background: linear-gradient(120deg, rgb(var(--neon-c) / .14), rgb(var(--neon-c) / .05)) !important; border: 1px solid rgb(var(--neon-c) / .3) !important; box-shadow: 0 6px 18px -8px rgb(var(--neon-c) / .35) !important; color: var(--p-weiss) !important; } .db-akt.fa { background: linear-gradient(120deg, rgb(var(--neon-c) / .08), rgba(255,159,67,.24)) !important; border-color: rgba(255,184,77,.45) !important; box-shadow: 0 6px 18px -8px rgba(255,159,67,.4) !important; } .db-akt.hr { background: linear-gradient(120deg, rgb(var(--neon-c) / .08), rgb(var(--neon-c) / .26)) !important; border-color: rgb(var(--neon-c) / .45) !important; box-shadow: 0 6px 18px -8px rgb(var(--neon-c) / .4) !important; } .db-akt:hover { border-color: rgb(var(--neon-c) / .7) !important; box-shadow: 0 12px 26px -8px rgb(var(--neon-c) / .5) !important; } .sperre-knopf { background: linear-gradient(120deg, var(--p-violett-3), #d66bc4) !important; color: var(--p-weiss) !important; box-shadow: 0 12px 34px -8px var(--p-violett-a70) !important; } .sperre-knopf:hover { filter: brightness(1.08); box-shadow: 0 14px 40px -8px rgba(214,107,196,.7) !important; } :root:not([data-thema]) .seite { border-right: none !important; } .seite { scrollbar-width: none; } .seite::-webkit-scrollbar { display: none; } .marke { padding: 10px 12px 8px; } .marke-atom { width: 46px; height: 46px; margin: 0 auto 3px; } .marke-text { font-size: 13.5px; letter-spacing: 5px; } #seite .klein.abschnitt { margin-top: 2px !important; margin-bottom: 4px; } #seite .klein.abschnitt::after { margin-top: 4px; } :root[data-zeiger="fein"] #seite .analyse-knopf { min-height: 38px; padding-top: 8px !important; padding-bottom: 8px !important; } .seite-fuss { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; } .seite-fuss > * { margin: 0 !important; box-sizing: border-box; } :root[data-zeiger="fein"] .seite-fuss #profilKnopf, :root[data-zeiger="fein"] .seite-fuss #eingangKnopf { min-height: 34px; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13px !important; } .seite-fuss .fuss-knopf { min-height: 26px; padding: 4px 8px; font-size: 11.5px; opacity: .85; } :root #seite .seite-fuss .analyse-knopf { padding-left: 14px !important; padding-right: 14px !important; text-align: center; white-space: normal !important; line-height: 1.18; height: auto; } .analyse-knopf .warn-punkt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; } .analyse-knopf:has(.warn-punkt.zeig) { padding-right: 36px; } .seite-fuss #verbindung { padding-top: 4px; } .willkommen h1 { text-shadow: 0 0 22px rgba(124,92,255,.45), 0 0 40px rgb(var(--neon-c) / .18); } .willkommen kbd, .willkommen .taste { background: linear-gradient(120deg, var(--p-violett-a16), var(--p-cyan-a08)); border: 1px solid var(--glas-rand, rgba(160,130,255,.25)); } :root { --linie-eins: rgba(160,130,255,.14); } :root:not([data-thema]) .seite, :root:not([data-thema]) .reiterleiste, :root:not([data-thema]) .werkzeuge, :root:not([data-thema]) .buehne { background: transparent !important; animation: none !important; } :root .marke { border-bottom: none !important; margin-bottom: 6px; } :root #seite .klein.abschnitt::after { display: inline; } :root .seite-fuss { border-top: 1px solid var(--linie-eins) !important; } :root .reiterleiste, :root .werkzeuge { border-bottom: 1px solid var(--linie-eins) !important; } :root #seite .analyse-knopf, :root #seite .aktion, :root #seite .werkzeuge-kopf, :root #seite .sz-knopf, :root .seite-fuss .fuss-knopf { font-weight: 500; border-radius: 10px !important; border: 1px solid rgba(160,130,255,.26) !important; opacity: 1 !important; padding: 0 12px !important; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root #seite .wahl-huelle select { border-radius: 10px !important; border: 1px solid rgba(160,130,255,.26) !important; } :root #seite .sz-knopf, :root .seite-fuss .fuss-knopf { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; height: auto; min-height: 40px; padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.18; } :root #seite .sz-knopf > span:not(.sym):not(.warn-punkt) { min-width: 0; } :root #seite .klein.abschnitt, :root #seite .wahl-block .klein { font-size: 12.5px !important; letter-spacing: 1.1px; font-weight: 700; opacity: .95; text-transform: uppercase; } :root .buehne::before, :root .buehne::after { display: none !important; } :root .terminal-huelle.sichtbar { box-shadow: none !important; } :root .terminal-huelle.sichtbar::before, :root .terminal-huelle.sichtbar::after, :root .terminal-huelle::after { display: none !important; } html #seite, html .seite, html .terminal-huelle, html .buehne, html .haupt, html .reiterleiste, html .werkzeuge { background: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } :root #seite .analyse-knopf, :root #seite .aktion, :root #seite .werkzeuge-kopf, :root #seite .sz-knopf, :root .seite-fuss .fuss-knopf { gap: 10px; min-height: 34px !important; height: 34px !important; font-size: 12.5px !important; border-color: rgba(200,150,255,.38) !important; background: linear-gradient(118deg, rgba(150,120,255,.22), rgba(255,110,200,.12) 55%, rgba(96,210,210,.10)) !important; color: #eceaf8 !important; } :root #seite .wahl-huelle select { height: 34px !important; font-size: 12.5px !important; border-color: rgba(180,160,255,.34) !important; } :root #seite .analyse-knopf::before, :root #seite .aktion::before, :root #seite .sz-knopf::before { width: 11px; height: 11px; margin-right: 8px; opacity: .7; } #seite .proj-terminal .pt-link .sammel-lampe { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } #seite .proj-terminal .pt-link .sammel-lampe { left: 12px !important; right: auto !important; } #seite .klein.abschnitt, #seite .proj-block > label.klein, #seite .wahl-block > label.klein { margin: 16px 10px 8px !important; padding-bottom: 5px; font-size: 11px; letter-spacing: 1.6px; font-weight: 700; opacity: 1; text-transform: uppercase; border-bottom: 1px solid var(--linie); } #seite .klein.abschnitt:first-of-type { margin-top: 6px !important; } :root[data-galaxy-ton="orange"] #seite .klein.abschnitt, :root[data-galaxy-ton="orange"] #seite label.klein, :root[data-galaxy-ton="orange"] #seite .wahl-block .klein { color: var(--gxn-muted) !important; } :root[data-galaxy-ton="orange"] #seite .klein.abschnitt::after { color: color-mix(in srgb, var(--akzent) 70%, transparent) !important; } .werkzeuge { justify-content: flex-start !important; } .werkzeuge .wz-knoepfe { order: -1; } .werkzeuge .wz-titel { order: 2; margin-left: auto !important; flex: 0 1 auto !important; } .werkzeuge .wz-ort { order: 3; } .ball-lauf, .ball-atom, .boot-balken-huelle .hinten, .boot-balken-huelle .vorne { display: none !important; } .boot-funke { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, var(--p-weiss) 0 2px, rgba(255,180,84,.95) 3px, rgba(124,92,255,.5) 6px, transparent 8px); box-shadow: 0 0 14px 3px rgba(255,170,80,.55), 0 0 26px 8px var(--p-violett-a30); transition: left 4s cubic-bezier(.12,.8,.2,1); } .boot-funke.schnell { transition: left .32s cubic-bezier(.4,0,.2,1); } .pt-link.hat-lampe::before { display: none; } .pt-link .sammel-lampe { margin: 0 !important; width: 6px !important; height: 6px !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--schrift-3) 40%, transparent); } .pt-link .sammel-lampe.laeuft { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 30%, transparent), 0 0 8px var(--gruen); } .pt-link .sammel-lampe.aus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rot) 30%, transparent), 0 0 8px var(--rot); } .pt-link .sammel-lampe.pruefe { box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 30%, transparent); } .rahmen { position: relative; isolation: isolate; } .rahmen::before, .rahmen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; } html[data-galaxy="aus"] .rahmen::before, html[data-galaxy="aus"] .rahmen::after { display: none !important; } .seite-fuss { margin-top: auto !important; } :root .seite-fuss .fuss-knopf.abmelden-tief { background: none !important; border: none !important; height: auto !important; min-height: 0 !important; padding: 6px 2px 2px !important; margin: 2px 0 0 !important; font-size: 11px !important; justify-content: flex-start; text-align: left; opacity: .8; } .seite-fuss .fuss-knopf.abmelden-tief:hover { color: var(--rot) !important; opacity: 1; } .kb-grp.fremd .kb-kopf { color: color-mix(in srgb, var(--pf,var(--p-blau)) 75%, var(--p-weiss)); } .kb-todo { font-size: 10.5px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; display: inline-block; } #kanalArchivKnopf.an { background: linear-gradient(120deg, rgba(124,92,255,.4), rgba(214,107,196,.25)) !important; } .analyse-karte { background-image: radial-gradient(1.2px 1.2px at 12% 18%, var(--p-weiss-a50), transparent), radial-gradient(1px 1px at 78% 9%, rgba(230,240,255,.4), transparent), radial-gradient(1.1px 1.1px at 91% 55%, rgba(255,235,215,.38), transparent), radial-gradient(1px 1px at 34% 82%, rgba(255,255,255,.32), transparent), radial-gradient(1.2px 1.2px at 62% 38%, rgba(240,225,255,.3), transparent), radial-gradient(900px 500px at 85% 0%, rgba(255,95,190,.07), transparent 60%), linear-gradient(172deg, rgba(22,20,40,.97), rgba(10,12,26,.97)) !important; } .db-karte, .board { background-image: radial-gradient(1px 1px at 18% 24%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 82% 68%, rgba(230,240,255,.32), transparent), radial-gradient(120% 90% at 0% 0%, rgba(150,120,255,.14), transparent 60%), linear-gradient(160deg, rgba(22,18,40,.9), rgba(10,9,18,.85)) !important; } :root #seite .analyse-knopf:hover, :root #seite .aktion:hover, :root #seite .sz-knopf:hover, :root #seite .werkzeuge-kopf:hover { background: linear-gradient(118deg, rgba(170,130,255,.32), rgba(255,110,200,.20) 60%, rgba(96,210,210,.12)) !important; border-color: rgba(255,140,210,.55) !important; } #monP-ueberblick .db-aus { display: none !important; } .rahmen::before { background-image: radial-gradient(1.1px 1.1px at 7px 11px, var(--p-weiss-a95), transparent), radial-gradient(0.96px 0.96px at 29px 37px, rgba(235,225,255,.9), transparent), radial-gradient(1.2px 1.2px at 51px 19px, rgba(255,240,250,.95), transparent), radial-gradient(0.96px 0.96px at 17px 53px, var(--p-weiss-a85), transparent), radial-gradient(1.1px 1.1px at 43px 61px, rgba(220,230,255,.9), transparent), radial-gradient(0.84px 0.84px at 61px 43px, var(--p-weiss-a80), transparent), radial-gradient(1.3px 1.3px at 23px 23px, rgba(255,225,245,.95), transparent), radial-gradient(0.96px 0.96px at 37px 5px, var(--p-weiss-a85), transparent), radial-gradient(1.4px 1.4px at 71px 97px, var(--p-weiss), transparent), radial-gradient(1.1px 1.1px at 101px 31px, rgba(230,235,255,.9), transparent), radial-gradient(1.2px 1.2px at 83px 71px, rgba(255,230,245,.9), transparent); background-size: 67px 67px, 67px 67px, 67px 67px, 67px 67px, 67px 67px, 67px 67px, 67px 67px, 67px 67px, 113px 113px, 113px 113px, 113px 113px; -webkit-mask-image: linear-gradient(118deg, transparent 28%, var(--p-schwarz-a55) 38%, var(--p-schwarz) 45%, var(--p-schwarz) 53%, var(--p-schwarz-a55) 60%, transparent 70%); mask-image: linear-gradient(118deg, transparent 28%, var(--p-schwarz-a55) 38%, var(--p-schwarz) 45%, var(--p-schwarz) 53%, var(--p-schwarz-a55) 60%, transparent 70%); } html[data-sterne="wenig"] .rahmen::after { display: block !important; } html[data-sterne="wenig"] .rahmen::before { display: none !important; } .wolke { background-image: radial-gradient(900px 700px at 20% 95%, rgba(55,120,255,.44), transparent 62%), radial-gradient(820px 640px at 58% 42%, rgba(255,64,176,.50), transparent 60%), radial-gradient(700px 800px at 6% 30%, rgba(255,80,185,.38), transparent 60%), radial-gradient(750px 550px at 90% 10%, rgba(255,140,80,.18), transparent 58%), radial-gradient(2px 2px at 22px 34px, var(--p-weiss), transparent), radial-gradient(1.7px 1.7px at 121px 89px, rgba(225,232,255,1), transparent), radial-gradient(2.3px 2.3px at 201px 151px,rgba(255,238,210,1), transparent), radial-gradient(1.8px 1.8px at 166px 233px,rgba(232,242,255,1), transparent), radial-gradient(2.2px 2.2px at 239px 61px, var(--p-weiss), transparent), radial-gradient(1.6px 1.6px at 47px 161px, rgba(255,225,245,.95), transparent), radial-gradient(1.6px 1.6px at 277px 111px,rgba(255,242,222,.9), transparent) !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 251px 251px, 251px 251px, 251px 251px, 251px 251px, 251px 251px, 337px 337px, 337px 337px !important; } .wolke::before { background: radial-gradient(46% 120% at 20% 50%, rgba(130,95,255,.40), transparent 70%), radial-gradient(50% 120% at 58% 50%, rgba(255,90,190,.56), transparent 72%), radial-gradient(44% 110% at 84% 52%, rgba(255,140,215,.32), transparent 74%), radial-gradient(26% 80% at 36% 48%, rgba(255,240,252,.46), transparent 70%), radial-gradient(18% 60% at 60% 50%, rgba(255,230,248,.26), transparent 70%) !important; } html[data-sterne="wenig"] .sperre::before { opacity: .45 !important; } html[data-sterne="wenig"] .sperre::after { opacity: .3 !important; } @media (max-width: 820px) { html:not([data-galaxy="aus"]) #seite, html:not([data-galaxy="aus"]) .seite { background-repeat: no-repeat !important; } } .werkzeuge .wz-diff { order: 4; margin-left: 8px; } .werkzeuge .wz-diff[hidden] { display: none !important; } @media (max-width: 900px) { .werkzeuge .wz-diff { display: none !important; } } .aktionen-huelle::after, html:not([data-thema]) .aktionen-huelle::after { display: none !important; } .w-tipps, .w-tipps div { color: var(--p-weiss-a85) !important; opacity: 1 !important; text-shadow: 0 1px 8px rgba(8,6,24,.75); } .willkommen p { color: rgba(245,242,255,.92) !important; text-shadow: 0 1px 10px rgba(8,6,24,.7); } #seite .pt-link { color: var(--p-weiss-a75) !important; } #seite #verbindung { color: var(--p-weiss-a80) !important; } #seite #fassungAnzeige { opacity: .8 !important; color: var(--p-weiss-a75) !important; } :root .seite-fuss .fuss-knopf.abmelden-tief { color: var(--p-weiss-a75) !important; } @media (max-width: 1400px) { .werkzeuge .wz-diff .wz-wort { display: none; } .werkzeuge .wz-diff { padding-inline: 9px !important; } } .marke-atom, .w-raute, .sperre-raute, .boot-atom-svg { filter: drop-shadow(0 0 10px rgba(255,110,210,.55)) drop-shadow(0 0 26px rgba(150,100,255,.40)) !important; } .w-raute { filter: drop-shadow(0 0 18px rgba(255,110,210,.55)) drop-shadow(0 0 54px rgba(150,100,255,.40)) !important; } .marke-text, .willkommen h1, .sperre-karte h1, .boot-marke { background: linear-gradient(100deg, var(--p-pink-hell-2) 0%, var(--p-pink-2) 30%, var(--p-violett-hell) 62%, var(--p-violett-hell-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; filter: drop-shadow(0 0 12px rgba(255,120,210,.35)); } :root { --gx-ease: cubic-bezier(0.23, 1, 0.32, 1); } :root:not([data-galaxy="aus"]) .analyse { background: rgba(8,5,24,.46) !important; backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); } :root:not([data-galaxy="aus"]) .analyse-karte { border: 1px solid var(--gx-rand) !important; } .analyse-kopf { border-bottom-color: var(--gx-rand-leise) !important; } .analyse.offen .analyse-karte { animation: gxKarteRein 220ms var(--gx-ease) both !important; transform-origin: center; } @keyframes gxKarteRein { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } .analyse-zu { background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; color: var(--p-violett-hell) !important; } #einstellungen .einst-block, .gruppe-koerper, .adr-zeile, .s-eintrag, .pf-projekt, .ag-karte, .wa-projekt, .ro-projekt, .sz-server, .db-sek { background: var(--gx-flaeche) !important; border-color: var(--gx-rand-leise) !important; } .gruppe-reiter { border-bottom-color: var(--gx-rand-leise) !important; } .g-reiter.an, .db-tab.an { background: linear-gradient(120deg, rgba(255,110,205,.30), rgba(150,110,255,.30)) !important; border-color: var(--p-pink-hell-a55) !important; color: var(--p-weiss) !important; } .analyse input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .analyse select, .analyse textarea { background: var(--gx-feld) !important; border: 1px solid var(--gx-rand) !important; color: #f4eefe !important; transition: border-color 160ms ease, box-shadow 160ms ease; } .analyse input:focus, .analyse select:focus, .analyse textarea:focus { outline: none !important; border-color: var(--p-pink-2) !important; box-shadow: 0 0 0 3px rgba(255,120,210,.20) !important; } .analyse input::placeholder, .analyse textarea::placeholder { color: var(--muted-text) !important; } .analyse .wz.mini, .analyse .cc-btn, .analyse .s-frei, .analyse .fuss-knopf, #kanalArchivKnopf { background: linear-gradient(120deg, rgba(255,120,210,.12), rgb(var(--neon-v) / .12)) !important; border: 1px solid var(--gx-rand) !important; color: #f4eefe !important; transition: transform 160ms var(--gx-ease), background-color 160ms ease, border-color 160ms ease; } #kanalSenden { background: var(--gx-verlauf) !important; border: 0 !important; color: var(--p-weiss) !important; font-weight: 650; box-shadow: 0 8px 24px -10px rgba(255,100,200,.7) !important; } .analyse button:active, .analyse .wz:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { .analyse .wz.mini:hover, .analyse .cc-btn:hover, .analyse .s-frei:hover, .analyse .fuss-knopf:hover { border-color: var(--p-pink-hell-a55) !important; background-color: var(--gx-flaeche-hover) !important; } .analyse-zu:hover { background: rgba(255,90,140,.28) !important; } } .s-wer { color: var(--p-violett-hell-2) !important; } .adr-marke.eigen-server { color: var(--p-pink-hell-2) !important; border-color: rgba(255,150,220,.45) !important; background: rgba(255,120,210,.12) !important; } .einst-titel, #seite .klein.abschnitt { color: #d9b8ff; } .kb-grp.mein .kb { color: var(--p-weiss) !important; background: linear-gradient(135deg, rgb(var(--neon-c) / .30), rgb(var(--neon-c) / .17)) !important; box-shadow: inset 0 0 0 1px rgb(var(--neon-c) / .38), 0 2px 12px -6px rgb(var(--neon-c) / .55) !important; } .kb-grp.mein .kb .kb-zeit, .kb-grp.mein .kb-haken { color: rgba(255,255,255,.82) !important; } .kb-grp.mein .kb-haken.gelesen { color: var(--p-weiss) !important; } .kb-grp.fremd .kb { border: 1px solid color-mix(in srgb, var(--pf, var(--p-violett-4)) 35%, rgba(225,170,255,.16)) !important; border-left: 2px solid color-mix(in srgb, var(--pf, var(--p-violett-4)) 75%, transparent) !important; } .kb-tag span { background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise); color: var(--p-violett-hell-6) !important; } @media (prefers-reduced-motion: reduce) { .analyse.offen .analyse-karte { animation: oxRein 160ms ease both !important; } .analyse button:active, .analyse .wz:active { transform: none; } } .analyse .adr, .analyse .adr-kopf { background: var(--gx-flaeche) !important; border-color: var(--gx-rand-leise) !important; } :root:not([data-galaxy="aus"]) .board, :root:not([data-galaxy="aus"]) .db-karte { background: radial-gradient(1px 1px at 18% 24%, var(--p-weiss-a55), transparent), radial-gradient(1px 1px at 82% 68%, rgba(255,225,245,.45), transparent), radial-gradient(120% 90% at 0% 0%, rgba(255,110,205,.14), transparent 60%), linear-gradient(160deg, rgba(44,28,92,.72), rgba(20,13,46,.78)) !important; border-color: var(--gx-rand-leise) !important; } .update-balken { background: linear-gradient(120deg, rgba(40,24,80,.92), rgba(22,14,50,.94)) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .buehne { --aend-b: clamp(340px, 34vw, 580px); } .buehne.mit-aend .terminal-huelle { right: var(--aend-b); } .aend { position: absolute; top: 0; right: 0; bottom: 0; width: var(--aend-b); z-index: 6; display: flex; flex-direction: column; background: transparent; border-left: 1px solid var(--p-violett-hell-a20); font: 12px/1.5 "Cascadia Mono", "JetBrains Mono", Consolas, monospace; color: #ece6fb; animation: aendRein 220ms cubic-bezier(0.23, 1, 0.32, 1) both; } .aend[hidden] { display: none !important; } @keyframes aendRein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .aend-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--p-violett-hell-a14); font-family: inherit; font-size: 12.5px; } .aend-kopf b { font-family: system-ui, sans-serif; font-weight: 650; background: linear-gradient(100deg, var(--p-pink-hell-2), #c79bff 60%, #7cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .aend-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--p-gruen-3); box-shadow: 0 0 0 3px rgba(70,224,160,.18), 0 0 10px var(--p-gruen-3); animation: aendPuls 2.4s ease-in-out infinite; } @keyframes aendPuls { 50% { opacity: .45; } } .aend-projekt { color: var(--muted-text); } .aend-summe { margin-left: auto; color: var(--muted-text); font-size: 11.5px; } .aend-summe .plus, .aend-z.plus { color: #74ecbc; } .aend-summe .minus, .aend-z.minus { color: #ff9ad8; } .aend-zu { font: inherit; font-size: 16px; line-height: 1; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; color: var(--p-violett-hell); background: var(--p-weiss-a05); border: 1px solid rgba(225,170,255,.18); transition: transform 160ms cubic-bezier(0.23,1,0.32,1); } .aend-zu:active { transform: scale(.94); } .aend-koerper { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0 40px; overscroll-behavior: contain; } .aend-koerper[hidden] { display: none !important; } .aend-abschnitt { top: 0; z-index: 1; } .aend-reiter { flex: 0 0 auto; display: flex; gap: 6px; padding: 4px 8px 0; } .aend-reiter-b { font: inherit; font-size: 11.5px; padding: 4px 12px; border-radius: 8px 8px 0 0; cursor: pointer; color: inherit; opacity: .62; background: var(--p-violett-a06); border: 1px solid var(--p-violett-hell-a20); border-bottom: none; } .aend-reiter-b.an { opacity: 1; background: var(--p-violett-a12); } .aend-reiter-b:active { transform: scale(.97); } .aend-live { flex: 1; min-height: 0; display: flex; flex-direction: column; } .aend-live[hidden] { display: none !important; } .aendlv-leiste { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; } .aendlv-projekt { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; color: inherit; background: var(--flaeche); border: 1px solid var(--p-violett-hell-a20); color-scheme: dark; } .aendlv-projekt option { color: inherit; background: var(--flaeche); } .aendlv-projekt:disabled { opacity: .55; } .aendlv-auto { font-size: 11.5px; opacity: .8; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color-scheme: dark; } .aendlv-auto input { margin: 0; } .aendlv-leiste2 { flex: 0 0 auto; display: flex; gap: 6px; padding: 0 12px 6px; } .aendlv-urlein { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 8px; color: inherit; background: var(--flaeche); border: 1px solid var(--p-violett-hell-a20); color-scheme: dark; } .aendlv-urlein::placeholder { opacity: .5; } .aendlv-status { font-size: 11.5px; opacity: .62; } .aendlv-status.an { opacity: 1; color: var(--p-gruen-3); } .aendlv-buehne { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 2px 8px 8px; } .aendlv-bild { width: 100%; height: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--p-violett-hell-a20); display: block; } .aendlv-bild[hidden] { display: none; } .aendlv-leer { opacity: .5; font-size: 12px; text-align: center; padding: 24px 16px; } .aendlv-url { flex: 0 0 auto; padding: 6px 12px 10px; font-size: 10.5px; opacity: .45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aend.aend-voll { display: flex !important; position: fixed; inset: 0; width: auto; z-index: 940; background: var(--grund); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-left: none; } .aend.aend-voll[hidden] { display: none !important; } .aend-commit, .aend-f { padding: 3px 12px; white-space: pre-wrap; overflow-wrap: anywhere; } .aend-hash { color: #c9a8ff; margin-right: 8px; } .aend-wann { color: var(--muted-text); margin-left: 8px; } .aend-st { display: inline-block; min-width: 22px; margin-right: 8px; text-align: center; border-radius: 5px; font-weight: 700; color: #ffd0ef; } .aend-st.s-A, .aend-st.s-\?\? { color: var(--p-gruen-5); background: rgba(40,190,140,.16); } .aend-st.s-D { color: #ff9aa8; background: rgba(255,80,110,.16); } .aend-datei { margin: 10px 0 2px; padding: 4px 12px; color: var(--p-weiss); font-weight: 650; border-left: 2px solid var(--p-pink-2); overflow-wrap: anywhere; } .aend-z { padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted-text); } .aend-z.hunk { color: #b9a0ff; margin-top: 4px; } .aend-leer { padding: 14px 12px; color: var(--muted-text); font-family: system-ui, sans-serif; } .aend-leer.klein { padding: 4px 12px; font-size: 11.5px; } .aend-folgen { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font: 600 12px system-ui, sans-serif; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 0; color: var(--p-weiss); background: linear-gradient(120deg, var(--p-pink), var(--p-violett) 55%, #6aa8ff); box-shadow: 0 8px 24px -8px rgba(255,100,200,.7); } .aend-folgen[hidden] { display: none; } .werkzeuge .wz-diff.an { border-color: rgba(255,150,220,.6) !important; background: linear-gradient(120deg, rgba(255,110,205,.28), rgba(150,110,255,.24)) !important; } @media (max-width: 900px) { .buehne.mit-aend .terminal-huelle { right: 0; } .aend { display: none !important; } } @media (prefers-reduced-motion: reduce) { .aend, .aend-punkt { animation: none; } } .aend { box-shadow: none !important; border-left-color: rgba(225,170,255,.16) !important; } .aend-datei { background: linear-gradient(90deg, rgba(255,110,210,.09), transparent 70%) !important; } .aend-z.plus { background: rgba(40,190,140,.05) !important; } .aend-z.minus { background: rgba(255,80,170,.05) !important; } .aend-st { background: rgba(255,120,210,.08) !important; } .aend-kopf { border-bottom-color: var(--p-violett-hell-a10) !important; } .gruppe-koerper .g-pane.an { animation: gxPaneRein 180ms cubic-bezier(0.23, 1, 0.32, 1) both; } @keyframes gxPaneRein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .g-reiter { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1) !important; } .g-reiter.wartet-antwort { outline: 1.5px solid var(--gelb) !important; outline-offset: 1px; border-radius: 8px; animation: reiterWarten 1.4s ease-in-out infinite; } @keyframes reiterWarten { 0%, 100% { box-shadow: 0 0 0 0 var(--gelb); } 50% { box-shadow: 0 0 7px 0 var(--gelb); } } @media (prefers-reduced-motion: reduce) { .g-reiter.wartet-antwort { animation: none; } } @media (prefers-reduced-motion: reduce) { .gruppe-koerper .g-pane.an { animation: gxRein 120ms ease both; } } @keyframes gxRein { from { opacity: 0; } to { opacity: 1; } } .aend-abschnitt { position: static !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin-top: 12px; padding-top: 8px; } .kb-grp.mein .kb { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root #seite .analyse-knopf, :root #seite .aktion, :root #seite .sz-knopf, :root #seite .werkzeuge-kopf, :root .seite-fuss .fuss-knopf, :root .seite-fuss .fuss-knopf.abmelden-tief, #einstellungen .analyse-knopf { justify-content: center !important; text-align: center !important; } :root .seite-fuss .fuss-knopf.abmelden-tief { width: 100%; padding-left: 0 !important; padding-right: 0 !important; } .aend-abschnitt { display: flex !important; align-items: center; gap: 10px; margin: 18px 0 6px !important; padding: 0 12px !important; border-top: 0 !important; font: 700 12.5px/1.2 system-ui, -apple-system, "Inter", sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--p-pink-hell) !important; text-shadow: 0 0 14px rgba(255,120,210,.45); } .aend-abschnitt::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--p-pink), var(--p-violett)); box-shadow: 0 0 10px rgba(255,110,210,.7); } .aend-abschnitt::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,140,215,.55), rgba(150,120,255,.2) 60%, transparent); } .aend-koerper > .aend-abschnitt:first-child { margin-top: 8px !important; } .sperre::before { opacity: .45 !important; } .sperre::after { opacity: .25 !important; } .sperre .wolke { opacity: .72 !important; } .wolke::before { opacity: .7 !important; } .wolke::after { opacity: .45 !important; } .sperre { box-shadow: inset 0 0 0 100vmax rgba(5,4,16,.28); } #monGruppe .leit-feld { background: radial-gradient(1px 1px at 16% 20%, var(--p-weiss-a50), transparent), radial-gradient(1px 1px at 84% 72%, var(--p-weiss-a50), transparent), radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--feldfarbe, rgb(var(--neon-c))) 20%, transparent), transparent 62%), linear-gradient(160deg, rgba(14,18,26,.62), rgba(8,11,18,.72)) !important; border: 1px solid var(--gx-rand-leise) !important; border-top: 2px solid color-mix(in srgb, var(--feldfarbe, rgb(var(--neon-c))) 70%, transparent) !important; box-shadow: 0 18px 40px -26px var(--p-schwarz-a60), inset 0 1px 0 var(--p-weiss-a05) !important; } #monGruppe .leit-wert { background: linear-gradient(150deg, var(--p-weiss-a06), var(--p-weiss-a02)) !important; border: 1px solid rgb(var(--neon-c) / .12) !important; border-radius: 10px !important; } #monGruppe .leit-wert .zahl { color: rgb(var(--neon-c)) !important; } #monGruppe .leit-wert .marke { color: var(--schrift-3) !important; } #monGruppe .leit-graph canvas { background: linear-gradient(180deg, rgba(12,16,24,.55), rgba(8,11,18,.45)) !important; border: 1px solid rgb(var(--neon-c) / .12); border-radius: 8px !important; } #monGruppe .leit-graph-kopf { color: var(--schrift-3) !important; } #monGruppe .db-sek > .db-sek-kopf { background: linear-gradient(120deg, rgb(var(--neon-c) / .08), transparent 72%) !important; color: var(--schrift-2) !important; } #monGruppe .db-sek-titel { font-weight: 650; letter-spacing: .01em; } #monGruppe .lw-tabelle th { color: var(--schrift-2) !important; } #monGruppe .lw-tabelle td, #monGruppe .lw-tabelle th { border-color: rgb(var(--neon-c) / .1) !important; } #monGruppe .lw-name { color: var(--schrift-2); } #monGruppe .hb-box { background: transparent !important; border: 0 !important; padding: 2px 0 !important; margin: 0 !important; } #monGruppe .hb-tat { background: linear-gradient(120deg, rgba(255,170,90,.16), rgba(255,170,90,.05)) !important; border: 1px solid rgba(255,170,120,.45) !important; color: #ffd2a8 !important; transition: transform 160ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease; } #monGruppe .hb-tat:active { transform: scale(.97); } #sitzInhalt .sz-monitor { background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; border-left: 3px solid var(--p-gruen-3) !important; color: #eaf8f1; } #sitzInhalt .sz-monitor.aktiv { border-left-color: var(--rot) !important; color: var(--p-rot-hell); } #monGruppe .sz-sess { background: var(--p-weiss-a03) !important; border-left: 2px solid rgb(var(--neon-c) / .55) !important; border-radius: 8px; padding: 6px 8px 6px 10px !important; } #monGruppe .sz-server { border-radius: 12px !important; } #monGruppe .ag-karte, #monGruppe .wa-projekt, #monGruppe .ro-projekt { border-radius: 12px !important; border-left: 2px solid color-mix(in srgb, var(--pf, var(--feldfarbe, rgb(var(--neon-c)))) 70%, transparent) !important; } #monGruppe .db-gesamt { background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; } #monGruppe .db-tab { background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; color: var(--schrift-2) !important; } #monGruppe .db-akt { background: linear-gradient(120deg, rgb(var(--neon-c) / .14), rgb(var(--neon-c) / .05)) !important; border: 1px solid var(--gx-rand) !important; color: var(--schrift) !important; } #monGruppe .db-akt.fa { border-color: rgba(255,170,120,.45) !important; } #monGruppe .db-akt:active, #monGruppe .db-tab:active { transform: scale(.97); } @media (pointer: coarse) { .werkzeuge .wz-diff, .aend { display: none !important; } .buehne.mit-aend .terminal-huelle { right: 0 !important; } } #nutzerGruppe .analyse-karte { max-width: 1180px !important; width: min(1180px, 96vw); } .us { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; min-height: min(70vh, 720px); } .us-liste { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .us-suche input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 11px 14px 11px 38px; border-radius: 12px; background: var(--gx-feld) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d9b8ff' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 13px center !important; } .us-filter { display: flex; flex-wrap: wrap; gap: 6px; } .us-chip { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; color: var(--p-violett-hell); background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--gx-ease); } .us-chip span { opacity: .6; margin-left: 3px; font-variant-numeric: tabular-nums; } .us-chip.an { background: linear-gradient(120deg, rgba(255,110,205,.30), rgba(150,110,255,.30)); border-color: var(--p-pink-hell-a55); color: var(--p-weiss); } .us-chip:active, .us-zeile:active, .us-akt:active, .us-rolle:active, .us-primaer:active, .us-neu:active { transform: scale(.97); } .us-zeilen { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: min(58vh, 600px); padding-right: 2px; } .us-zeile { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font: inherit; color: var(--p-violett-hell-4); cursor: pointer; padding: 9px 11px; border-radius: 12px; background: var(--gx-flaeche); border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--gx-ease); } .us-zeile.an { border-color: rgba(255,150,220,.5); background: linear-gradient(120deg, rgba(255,110,205,.14), rgba(150,110,255,.12)); } .us-zeile.gesperrt .us-txt b { opacity: .6; text-decoration: line-through; } @media (hover: hover) and (pointer: fine) { .us-zeile:hover { border-color: var(--gx-rand-leise); background: var(--gx-flaeche-hover); } .us-chip:hover { border-color: var(--gx-rand); } } .us-av { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--p-weiss); background: linear-gradient(135deg, color-mix(in srgb, var(--uf, var(--p-violett)) 90%, var(--p-weiss) 10%), color-mix(in srgb, var(--uf, var(--p-violett)) 55%, #1a1036)); box-shadow: 0 0 0 2px var(--p-weiss-a08), 0 6px 18px -8px var(--uf, var(--p-violett)); } .us-av.gross { width: 64px; height: 64px; font-size: 26px; } .us-on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--p-gruen-3); box-shadow: 0 0 0 2px #1a1036; } .us-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .us-txt b { font-weight: 650; overflow-wrap: anywhere; } .us-txt small { color: var(--p-violett-hell-a62); font-size: 12px; overflow-wrap: anywhere; } .us-badge { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: rgba(183,123,255,.18); color: #e3ccff; border: 1px solid rgba(183,123,255,.3); white-space: nowrap; } .us-badge.gruen { background: rgba(70,224,160,.14); color: var(--p-gruen-5); border-color: rgba(70,224,160,.3); } .us-badge.rot { background: rgba(255,90,120,.14); color: #ffadbd; border-color: rgba(255,90,120,.35); } .us-badge.test { background: var(--p-orange-a30); color: var(--p-orange-hell-a85); border-color: var(--p-orange-a60); letter-spacing: .06em; } .us-badge.quelle { background: var(--p-weiss-a05); color: var(--schrift-2); border-color: var(--linie); } .us-badge.quelle.warn { background: var(--p-weiss-a05); color: var(--gelb); border-color: var(--gelb); } .us-neu { font: inherit; font-weight: 650; padding: 10px; border-radius: 12px; cursor: pointer; color: var(--p-weiss); border: 1px dashed rgba(255,150,220,.45); background: linear-gradient(120deg, rgba(255,110,205,.12), rgba(150,110,255,.10)); } .us-detail { min-width: 0; overflow-y: auto; max-height: min(74vh, 760px); padding: 4px 4px 12px; border-left: 1px solid var(--gx-rand-leise); padding-left: 18px; } .us-leer { color: var(--muted-text); padding: 30px 10px; text-align: center; } .us-zurueck { display: none; font: inherit; font-size: 13px; color: #ffc2ec; background: none; border: 0; padding: 4px 0 10px; cursor: pointer; } .us-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .us-kopf h3 { margin: 0 0 2px; font-size: 22px; font-weight: 650; color: var(--p-weiss); letter-spacing: -.01em; } .us-meta { color: var(--p-violett-hell-a62); font-size: 13px; overflow-wrap: anywhere; } .us-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .us-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; } .us-kacheln > div { padding: 10px 12px; border-radius: 12px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); display: flex; flex-direction: column; } .us-kacheln b { color: var(--p-weiss); font-size: 15px; } .us-kacheln span { color: var(--p-violett-hell-a55); font-size: 11.5px; } .us-block { margin: 0 0 14px; padding: 14px; border-radius: 14px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); } .us-block h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-pink-hell); } .us-hinweis { margin: 0 0 10px; font-size: 12.5px; color: var(--p-violett-hell-a62); } .us-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .us-rolle { font: inherit; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--p-violett-hell-4); background: var(--p-weiss-a03); border: 1px solid var(--gx-rand-leise); display: flex; flex-direction: column; gap: 2px; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--gx-ease); } .us-rolle small { color: var(--muted-text); font-size: 11.5px; } .us-rolle.an { border-color: rgba(255,150,220,.6); background: linear-gradient(120deg, rgba(255,110,205,.22), rgba(150,110,255,.20)); } .us-rolle:disabled { opacity: .5; cursor: default; } .us-rechte { display: flex; flex-direction: column; gap: 8px; } .us-recht { padding: 10px 12px; border-radius: 12px; background: var(--p-weiss-a03); border: 1px solid var(--p-violett-hell-a10); border-left: 3px solid var(--uf); } .us-recht-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .us-recht-kopf b { color: var(--p-weiss); } .us-schalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 14px; } .us-sch { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--p-violett-hell); cursor: pointer; } .us-sch input { position: absolute; opacity: 0; pointer-events: none; } .us-knopf { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid var(--p-violett-hell-a20); transition: background-color 180ms ease; } .us-knopf::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--p-weiss); transition: transform 200ms var(--gx-ease); } .us-sch input:checked + .us-knopf { background: linear-gradient(120deg, var(--p-pink), var(--p-violett)); border-color: transparent; } .us-sch input:checked + .us-knopf::after { transform: translateX(14px); } .us-sch input:focus-visible + .us-knopf { box-shadow: 0 0 0 3px rgba(255,120,210,.35); } .us-sch.fest { opacity: .6; cursor: default; } .us-funktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 14px; } .us-sch.heikel > span:last-child { color: var(--p-rot); font-weight: 600; } .us-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; } .usn-projekte { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .usn-proj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--p-weiss-a03); border: 1px solid var(--p-violett-hell-a10); border-left: 3px solid var(--uf); } .usn-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .usn-vorlage { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--p-violett-hell-a20); background: var(--p-weiss-a03); color: var(--p-violett-hell); cursor: pointer; } .usn-vorlage:active { transform: scale(.97); } .usn-uebersicht { margin-bottom: 10px; border: 1px solid var(--p-violett-hell-a10); border-radius: 12px; background: var(--p-weiss-a03); overflow: hidden; } .usn-uebersicht > summary { padding: 9px 12px; font-size: 13px; color: var(--p-violett-hell); cursor: pointer; list-style: none; } .usn-uebersicht > summary::-webkit-details-marker { display: none; } .usnu-liste { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 7px; } .usnu-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; } .usnu-zeile b { color: var(--p-weiss); margin-right: 4px; } .usnu-proj { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--p-weiss-a03); border: 1px solid var(--p-violett-hell-a20); border-left: 3px solid var(--uf); color: var(--p-violett-hell); } .usnu-term { font-style: normal; font-weight: 700; font-size: 10px; padding: 0 4px; border-radius: 4px; background: linear-gradient(120deg, var(--p-pink), var(--p-violett)); color: var(--p-weiss); } .usnu-kein { opacity: .55; font-style: italic; } .usnu-legende { padding: 0 12px 8px; font-size: 11px; opacity: .6; } .us-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--p-violett-hell-a70); } .us-form input { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 10px; } .us-primaer { font: inherit; font-weight: 650; padding: 11px 14px; border-radius: 12px; border: 0; cursor: pointer; color: var(--p-weiss); background: var(--gx-verlauf); box-shadow: 0 8px 22px -12px rgba(255,100,200,.8); } .us-primaer:disabled { opacity: .5; cursor: default; } .us-aktionen { display: flex; flex-wrap: wrap; gap: 8px; } .us-akt { font: inherit; font-size: 13.5px; padding: 9px 14px; border-radius: 11px; cursor: pointer; color: var(--p-violett-hell-4); background: var(--p-weiss-a05); border: 1px solid var(--gx-rand); } .us-akt.gefahr { color: #ffb3c0; border-color: rgba(255,90,120,.45); } .us-akt:disabled { opacity: .5; cursor: default; } .us-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 14px; } .us-kv > div { display: flex; flex-direction: column; } .us-kv span { font-size: 11.5px; color: var(--p-violett-hell-a55); } .us-kv b { color: var(--p-weiss); font-weight: 600; overflow-wrap: anywhere; } @media (max-width: 820px) { .us { grid-template-columns: 1fr; min-height: 0; } .us-detail { display: none; border-left: 0; padding-left: 0; max-height: none; } .us.mit-detail .us-liste { display: none; } .us.mit-detail .us-detail { display: block; } .us-zurueck { display: inline-block; } .us-zeilen { max-height: none; } .us-rollen { grid-template-columns: 1fr; } } .us-suche { position: relative; } .us-suche::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d9b8ff' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat center; } .us-suche input, .us-form input { text-align: left !important; } .us-suche input { padding-left: 38px !important; } #nzP-user { padding: 14px 16px; } @media (max-width: 820px) { #nzP-user { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); } } .xterm .xterm-helper-textarea { font-size: 16px !important; left: 0 !important; } html, body { overflow-x: hidden; } @supports (overflow: clip) { .buehne, .terminal-huelle, .haupt { overflow: clip !important; } } @media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } #projektwahl, .kanal-ziel, #kanalZiel { font-size: 16px !important; } } @media (pointer: coarse) { :root #seite .wahl-huelle select, :root #seite #projektwahl { font-size: 16px !important; } } :root #seite .analyse-knopf, :root #seite .aktion, :root #seite .sz-knopf, #einstellungen .analyse-knopf { position: relative; padding-left: 34px !important; padding-right: 34px !important; } :root #seite .analyse-knopf::before, :root #seite .aktion::before, :root #seite .sz-knopf::before, #einstellungen .analyse-knopf::before { position: absolute; left: 13px; top: 50%; margin: -6px 0 0 0 !important; width: 12px !important; height: 12px !important; } :root #seite .wahl-huelle select, :root #seite #projektwahl { height: 40px !important; min-height: 40px; line-height: normal !important; padding: 0 30px 0 12px !important; text-align: center; text-align-last: center; font-weight: 600; color: var(--p-violett-hell-3) !important; border-radius: 10px !important; border: 1px solid rgba(200,150,255,.38) !important; -webkit-appearance: none; appearance: none; } :root #seite .pt-link { justify-content: center !important; text-align: center !important; margin-left: 10px !important; width: calc(100% - 10px) !important; } @media (pointer: coarse) { :root #seite .wahl-huelle select, :root #seite #projektwahl { height: 44px !important; min-height: 44px; } } .kanal-titel { font-weight: 650; } .kanal-titel small { font-weight: 500; font-size: 12px; opacity: .6; margin-left: 6px; } :is(#kanal, #tlP-kanal) .kanal-stand { margin: 0 0 6px; padding: 7px 12px !important; border-radius: 999px !important; background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; } :is(#kanal, #tlP-kanal) .ks-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; font-size: 12.5px; min-width: 0; } :is(#kanal, #tlP-kanal) .ks-zeile b { white-space: nowrap; } :is(#kanal, #tlP-kanal) .ks-teil { color: var(--p-violett-hell-a62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } :is(#kanal, #tlP-kanal) .ks-teil::before { content: "·"; margin-right: 8px; opacity: .6; } :is(#kanal, #tlP-kanal) .kb-grp.mein .kb-kopf { display: none; } :is(#kanal, #tlP-kanal) .kanal-senden { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap !important; margin-top: 8px; padding: 6px; border-radius: 16px; border: 1px solid var(--gx-rand); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } :is(#kanal, #tlP-kanal) .kanal-senden .kanal-ziel { flex: 0 0 auto; width: auto; max-width: 38%; height: 38px; padding: 0 26px 0 12px !important; border-radius: 12px !important; background: linear-gradient(120deg, rgba(255,120,210,.16), rgb(var(--neon-v) / .16)) !important; border: 1px solid var(--gx-rand-leise) !important; color: var(--p-violett-hell-3) !important; font-weight: 600; } :is(#kanal, #tlP-kanal) .kanal-senden input { flex: 1; min-width: 0; height: 38px; padding: 0 12px !important; border: 0 !important; box-shadow: none !important; } :is(#kanal, #tlP-kanal) .kanal-senden input:focus { box-shadow: none !important; } :is(#kanal, #tlP-kanal) #kanalSenden { flex: 0 0 auto; height: 38px; padding: 0 16px !important; border-radius: 12px !important; } @media (max-width: 820px) { #kanal .analyse-karte { max-height: none !important; display: flex; flex-direction: column; } #kanal .analyse-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; } :is(#kanal, #tlP-kanal) .kanal-chat { flex: 1; min-height: 0; max-height: none !important; } :is(#kanal, #tlP-kanal) .kanal-senden { position: static !important; background: rgba(30,18,64,.72); } } .ios-install[hidden] { display: none !important; } .ios-install:not(.zeig) { pointer-events: none !important; } .tastenleiste { border-top: 1px solid var(--p-violett-hell-a14) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .tastenleiste .taste { background: linear-gradient(150deg, var(--p-weiss-a08), var(--p-weiss-a03)) !important; border: 1px solid var(--p-violett-hell-a20) !important; color: var(--p-violett-hell-4) !important; } .tastenleiste .taste.gedrueckt { background: linear-gradient(120deg, rgba(255,110,205,.35), rgba(150,110,255,.32)) !important; transform: scale(.96); } .mehr-leiste { flex: 0 0 auto; padding: 6px 12px; border-bottom: 1px solid var(--p-violett-hell-a14); font-size: 12.5px; color: var(--p-violett-hell); } .mehr-leiste[hidden] { display: none !important; } .ml-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ml-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--p-gruen-3); box-shadow: 0 0 8px var(--p-gruen-3); flex: 0 0 auto; } .ml-punkt.zu { background: #ffb36b; box-shadow: 0 0 8px #ffb36b; } .ml-text { flex: 1; min-width: 180px; } .ml-text b { color: var(--p-weiss); } .praesenz-leiste { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--p-gruen-a45); font-size: 12.5px; color: var(--p-weiss); background: linear-gradient(120deg, var(--p-gruen-a45), transparent); } .praesenz-leiste[hidden] { display: none !important; } .praesenz-leiste .pl-text { flex: 1; min-width: 180px; line-height: 1.4; } .praesenz-leiste .pl-text b { color: var(--p-weiss); } .pl-chat { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--p-weiss); background: var(--p-gruen-a45); border: 1px solid var(--p-gruen-3); border-radius: 8px; padding: 5px 10px; } .pl-chat:hover { background: var(--p-gruen-3); color: var(--grund); } .pl-punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--p-gruen-3); box-shadow: 0 0 8px var(--p-gruen-3); animation: pl-puls 1.6s ease-in-out infinite; } @keyframes pl-puls { 0%,100% { box-shadow: 0 0 6px var(--p-gruen-3); opacity: .85; } 50% { box-shadow: 0 0 14px var(--p-gruen-3); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pl-punkt { animation: none; } } @media (max-width: 820px) { .praesenz-leiste { padding: 7px 10px; } } .ml-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ml-eingabe { font: inherit; font-size: 13px; height: 30px; padding: 0 10px; border-radius: 9px; min-width: 220px; color: var(--p-violett-hell-3); background: rgba(12,8,32,.55); border: 1px solid rgba(225,170,255,.26); } .ml-knopf, .ml-mini { font: inherit; font-size: 12.5px; height: 30px; padding: 0 12px; border-radius: 9px; cursor: pointer; color: var(--p-violett-hell-3); background: linear-gradient(120deg, rgba(255,120,210,.14), rgb(var(--neon-v) / .14)); border: 1px solid rgba(225,170,255,.3); transition: transform 160ms cubic-bezier(0.23,1,0.32,1); } .ml-mini { height: 26px; padding: 0 10px; font-size: 12px; } .ml-mini.an { background: linear-gradient(120deg, var(--p-pink), var(--p-violett)); border: 0; color: var(--p-weiss); } .ml-knopf:active, .ml-mini:active { transform: scale(.96); } .ml-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .ml-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 8px; background: var(--p-weiss-a05); } .ml-q span:first-child { overflow-wrap: anywhere; } .ml-q-k { display: flex; gap: 6px; flex: 0 0 auto; } .ml-q.anfrage { margin-top: 6px; border: 1px solid rgba(255,170,120,.4); } @media (max-width: 820px) { .mehr-leiste { padding: 6px 10px; } .ml-knoepfe { width: 100%; } .ml-knopf { flex: 1; height: 36px; } } @media (max-width: 820px) { .ml-eingabe { flex: 1 1 100%; min-width: 0; height: 40px; font-size: 16px !important; } } #profil .analyse-inhalt { max-width: none !important; } .pf-kopf { flex-wrap: wrap; } .pf-kopf-tat { margin-left: auto; display: flex; gap: 8px; align-items: center; } .pf-admin { white-space: nowrap; } .pf-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .pf-spalten .pf-abschnitt { margin: 0 !important; padding: 14px; border-radius: 14px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); } @media (max-width: 820px) { .pf-spalten { grid-template-columns: 1fr; } .pf-kopf-tat { margin-left: 0; width: 100%; } } :root:not([data-thema]):not([data-galaxy="aus"]) .rahmen { filter: none !important; background: linear-gradient(159deg, transparent 40%, rgba(118,88,240,.14) 50%, rgba(214,118,198,.13) 57%, rgba(240,235,255,.06) 61%, transparent 71%), radial-gradient(30% 26% at 32% 42%, rgba(180,190,255,.12), rgba(150,120,240,.06) 45%, transparent 70%), radial-gradient(22% 18% at 66% 56%, rgba(255,220,245,.08), transparent 66%), radial-gradient(50% 46% at 18% 24%, rgba(104,74,224,.32), transparent 60%), radial-gradient(44% 40% at 78% 40%, rgba(70,200,200,.10), transparent 60%), radial-gradient(56% 46% at 82% 76%, rgba(220,110,196,.26), transparent 62%), radial-gradient(40% 34% at 56% 58%, rgba(255,180,90,.08), transparent 62%), radial-gradient(180% 150% at 50% 6%, var(--p-violett-dunkel) 0%, var(--p-violett-dunkel-2) 50%, var(--p-violett-dunkel-4) 100%) !important; background-repeat: no-repeat !important; } .rahmen::after { background-image: radial-gradient(1.7px 1.7px at 18% 22%, var(--p-weiss-a95), transparent 60%), radial-gradient(1.3px 1.3px at 62% 12%, var(--p-blau-hell-a90), transparent 60%), radial-gradient(1.1px 1.1px at 82% 46%, var(--p-orange-hell-a85), transparent 60%), radial-gradient(1.6px 1.6px at 34% 68%, var(--p-weiss-a90), transparent 60%), radial-gradient(1.2px 1.2px at 72% 82%, var(--p-blau-hell-a85), transparent 60%), radial-gradient(1.1px 1.1px at 10% 88%, var(--p-weiss-a80), transparent 60%), radial-gradient(1.3px 1.3px at 48% 40%, var(--p-blau-hell-2-a85), transparent 60%), radial-gradient(1px 1px at 28% 8%, var(--p-weiss-a80), transparent 60%), radial-gradient(1px 1px at 90% 18%, var(--p-blau-hell-a80), transparent 60%), radial-gradient(1px 1px at 6% 54%, var(--p-weiss-a75), transparent 60%), radial-gradient(1px 1px at 52% 90%, var(--p-blau-hell-2-a80), transparent 60%), radial-gradient(2px 2px at 78% 30%, var(--p-orange-hell-a95), transparent 55%); background-size: 118px 118px !important; background-repeat: repeat !important; opacity: .55 !important; } .rahmen::before { opacity: .3 !important; } html[data-sterne="wenig"] .rahmen::after { opacity: .3 !important; } :root { --gx-feld: rgba(5,3,16,.82); --gx-rand: rgba(255,255,255,.09); --gx-rand-leise: rgba(255,255,255,.055); --gx-flaeche: rgba(255,255,255,.035); --gx-flaeche-hover: rgba(185,168,255,.07); --gx-verlauf: linear-gradient(135deg, #6d4ae2 0%, #9a7bff 100%); } input, textarea, select, .xterm .xterm-helper-textarea { color-scheme: dark; } .analyse input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .analyse select, .analyse textarea, .sperre-karte input, .ml-eingabe, .us-suche input, :is(#kanal, #tlP-kanal) .kanal-senden { background-color: var(--gx-feld) !important; } :is(#kanal, #tlP-kanal) .kanal-senden { background: rgba(5,3,16,.78) !important; } :is(#kanal, #tlP-kanal) .kanal-senden input { background: transparent !important; } .sperre-karte input { background: rgba(5,3,16,.7) !important; } html .reiterleiste .reiter, html .reiterleiste .reiter-kanal { background: linear-gradient(180deg, rgba(28,20,64,.62), rgba(14,10,34,.5)) !important; border: 1px solid rgba(185,168,255,.16) !important; border-bottom: 0 !important; color: var(--p-violett-hell-6) !important; } html .reiterleiste .reiter.aktiv, html .reiterleiste .reiter-kanal.aktiv { background: linear-gradient(180deg, rgba(124,92,255,.26), rgba(40,26,86,.45)) !important; border-top: 2px solid var(--p-violett-hell-2) !important; color: var(--p-weiss) !important; box-shadow: 0 -8px 22px -12px var(--p-violett-a70) !important; } :root:not([data-galaxy="aus"]) .analyse-karte { background: radial-gradient(1px 1px at 12% 18%, var(--p-weiss-a55), transparent), radial-gradient(1px 1px at 78% 9%, rgba(230,225,255,.45), transparent), radial-gradient(1px 1px at 34% 82%, rgba(225,235,255,.4), transparent), radial-gradient(620px 380px at 0% 0%, rgba(104,74,224,.22), transparent 62%), radial-gradient(620px 420px at 100% 100%, rgba(220,110,196,.12), transparent 62%), linear-gradient(165deg, rgba(18,12,42,.92), rgba(8,6,22,.95)) !important; border-color: var(--p-violett-hell-a18) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), 0 0 50px -20px rgba(124,92,255,.35), inset 0 1px 0 var(--p-weiss-a05) !important; } .analyse-karte::before { background: linear-gradient(90deg, transparent, rgba(185,168,255,.75), rgba(215,123,198,.55), transparent) !important; } :root[data-galaxy-ton="mono"] .analyse-karte { background: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.14), transparent), radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.10), transparent), radial-gradient(620px 380px at 0% 0%, rgba(255,255,255,.035), transparent 62%), linear-gradient(165deg, #141418, #0c0c0f) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05) !important; } :root[data-galaxy-ton="mono"] .analyse-karte::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent) !important; } :root[data-galaxy-ton="mono"] { --gx-verlauf: linear-gradient(135deg, #3a3a42, #26262c); } .analyse-kopf { background-image: linear-gradient(120deg, var(--p-violett-a10), rgba(215,123,198,.04)) !important; } .g-reiter.an, .db-tab.an, .us-chip.an, .us-rolle.an, .us-zeile.an { background: linear-gradient(120deg, var(--p-violett-a30), var(--p-pink-a16)) !important; border-color: rgba(185,168,255,.5) !important; } .analyse .wz.mini, .analyse .cc-btn, .analyse .s-frei, .analyse .fuss-knopf, #kanalArchivKnopf, #monGruppe .db-akt, .ml-knopf, .ml-mini:not(.an), .us-akt { background: linear-gradient(120deg, var(--p-violett-a14), var(--p-pink-a08)) !important; border-color: rgba(185,168,255,.26) !important; } .us-sch input:checked + .us-knopf, .ml-mini.an { background: linear-gradient(120deg, var(--p-violett-3), var(--p-violett-hell-2)) !important; } .kb-grp.mein .kb { background: linear-gradient(135deg, rgba(124,92,255,.28), var(--p-pink-a16)) !important; border: 1px solid rgba(185,168,255,.30) !important; box-shadow: 0 8px 22px -16px var(--p-violett-a70) !important; } .kb-grp.fremd .kb { background: color-mix(in srgb, var(--pf, var(--p-violett-4)) 16%, var(--flaeche-2)) !important; } :root[data-galaxy-ton="mono"] .kb-grp.fremd .kb { background: var(--flaeche-2) !important; } :root[data-galaxy-ton="mono"] .kb-grp.mein .kb { background: linear-gradient(135deg, var(--flaeche-3), var(--flaeche-2)) !important; box-shadow: inset 0 0 0 1px var(--p-weiss-a18) !important; } .tastenleiste { background: rgba(8,6,22,.86) !important; } .mehr-leiste { background: linear-gradient(120deg, var(--p-violett-a12), rgba(8,6,22,.6)) !important; } .atom::before, .atom::after { content: none !important; animation: none !important; } html, body { background-color: var(--p-violett-dunkel-5) !important; } :root:not([data-thema]):not([data-galaxy="aus"]) .rahmen { box-shadow: inset 0 0 0 100vmax rgba(3,2,12,.34); } @media (max-width: 820px) { .analyse { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } .analyse .analyse-karte { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; display: flex; flex-direction: column; } .analyse .analyse-kopf { padding-top: calc(12px + env(safe-area-inset-top)) !important; flex: 0 0 auto; } .analyse .analyse-inhalt, .analyse .gruppe-koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; } #kanal .analyse-karte { height: 100% !important; } #kanal .analyse-inhalt { overflow: hidden; } .analyse.offen .analyse-karte { animation: gxSheetRein 240ms cubic-bezier(0.32, 0.72, 0, 1) both !important; } } @keyframes gxSheetRein { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 820px) and (prefers-reduced-motion: reduce) { .analyse.offen .analyse-karte { animation: gxRein 140ms ease both !important; } } .pj-typ-zeile { display: flex; gap: 8px; } .pj-typ-zeile select { flex: 1; min-width: 0; } .sv-tat.zweit { background: linear-gradient(120deg, var(--p-violett-a16), var(--p-pink-a08)) !important; border: 1px solid var(--gx-rand) !important; color: var(--p-violett-hell) !important; } .pj-erkannt { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); color: var(--p-violett-hell-6); } .pj-ergebnis { margin-top: 10px; padding: 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(70,224,160,.10), rgba(124,92,255,.08)); border: 1px solid rgba(70,224,160,.35); } .pj-e-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .pj-e-kopf b { color: var(--p-weiss); } .pj-e-kopf span { font-size: 12.5px; color: var(--p-violett-hell-a70); } .pj-e-tat { display: flex; flex-wrap: wrap; gap: 8px; } .e-vorlage { display: inline-flex; gap: 6px; align-items: center; } .e-vorlage-wahl { font: inherit; font-size: 12.5px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--p-violett-hell); background: var(--gx-feld); border: 1px solid var(--gx-rand); } #spGruppe .sv-tat:not(.zweit), .analyse .sv-tat:not(.zweit) { background: var(--gx-verlauf) !important; color: var(--p-weiss) !important; border: 0 !important; box-shadow: 0 8px 22px -12px rgba(124,92,255,.8) !important; } .analyse .sv-mini:not(.rot) { background: linear-gradient(120deg, var(--p-violett-a14), var(--p-pink-a08)) !important; border: 1px solid var(--gx-rand) !important; color: var(--p-violett-hell) !important; } .analyse .sv-block > summary { color: var(--p-violett-hell-2) !important; } .analyse .sv-farbe { background: var(--gx-feld) !important; border: 1px solid var(--gx-rand) !important; border-radius: 10px; padding: 4px 10px; } .analyse details > summary, .sv-block > summary { list-style: none; cursor: pointer; } .analyse details > summary::-webkit-details-marker, .sv-block > summary::-webkit-details-marker { display: none; } .analyse details > summary::before, .sv-block > summary::before { content: "✧"; display: inline-block; margin-right: 8px; color: var(--p-violett-hell-2); font-size: 13px; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease; } .analyse details[open] > summary::before, .sv-block[open] > summary::before { content: "✦"; transform: rotate(45deg); color: var(--p-pink-hell); } .db-sek-pfeil, .werkzeuge-pfeil, .adr-pfeil, .wahl-pfeil { color: var(--p-violett-hell-2) !important; font-size: 13px !important; display: inline-block; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .db-sek.zu .db-sek-pfeil { transform: rotate(-45deg) !important; } #einstellungen .einst-block.zu .einst-titel::after { content: "✧"; transform: rotate(-45deg) !important; } .pt-erledigt { margin-top: 10px; } .pt-erledigt > summary { font-size: 12.5px; color: var(--p-violett-hell-a70); padding: 6px 2px; } @media (prefers-reduced-motion: reduce) { .analyse details > summary::before, .db-sek-pfeil { transition: none; } } .pt-titel { color: var(--p-pink-hell) !important; } .pt-item.erledigt .pt-titel { color: rgba(255,214,242,.55) !important; } .g-reiter[data-p="__alle"] .pt-badge { background: linear-gradient(120deg, var(--p-violett-3), #d77bc6) !important; color: var(--p-weiss) !important; } @media (pointer: coarse), (max-width: 820px) { .analyse { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #06050f !important; } .analyse *, .tastenleiste, .mehr-leiste, .update-balken, .aend-abschnitt, .us-suche input, :is(#kanal, #tlP-kanal) .kanal-senden { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .analyse .analyse-karte { box-shadow: none !important; } .analyse .board, .analyse .db-karte, .analyse .leit-feld, .kb-grp .kb, .us-av, .us-primaer, #kanalSenden { box-shadow: none !important; } .marke-atom, .w-raute { filter: none !important; } } @media (pointer: coarse), (max-width: 820px) { :root:not([data-galaxy="aus"]) .analyse, :root .analyse { background: #06050f !important; } :root:not([data-galaxy="aus"]) .analyse .analyse-karte { background: radial-gradient(520px 320px at 0% 0%, rgba(104,74,224,.20), transparent 62%), radial-gradient(520px 360px at 100% 100%, rgba(220,110,196,.10), transparent 62%), #0a0718 !important; } } :root { --akzent: #b9a8ff; --akzent-cyan: #b9a8ff; } .u-pfeil { color: var(--p-violett-hell-2) !important; } .audit-art { color: var(--akzent) !important; } .n-knopf:hover:not(:disabled) { border-color: rgba(185,168,255,.55) !important; color: var(--p-weiss) !important; } .n-knopf.haupt, .e-knopf.haupt { background: var(--gx-verlauf) !important; border-color: transparent !important; color: var(--p-weiss) !important; } .e-knopf { background: linear-gradient(120deg, var(--p-violett-a14), var(--p-pink-a08)) !important; border: 1px solid var(--gx-rand) !important; color: var(--p-violett-hell) !important; } .e-knopf.gefahr { color: #ffb3c0 !important; border-color: rgba(255,90,120,.45) !important; } .pt-badge { background: var(--pf, var(--p-violett-3)) !important; color: var(--p-weiss) !important; } .brain-tab, .brain-save, #brGelAdd { border-color: rgba(185,168,255,.35) !important; color: var(--p-violett-hell) !important; } .brain-tab.an, .brain-save, #brGelAdd { background: linear-gradient(120deg, var(--p-violett-a30), var(--p-pink-a16)) !important; border-color: rgba(185,168,255,.55) !important; } .cc-start, .bk-jetzt { background: var(--gx-verlauf) !important; border: 0 !important; color: var(--p-weiss) !important; } .kb-todo { background: rgba(185,168,255,.14) !important; color: #d9c8ff !important; } .kb-todo.fertig { background: rgba(70,224,160,.14) !important; color: var(--p-gruen-5) !important; } .vb-nachzustell { border-color: rgba(255,179,107,.55) !important; } @media (max-width: 820px) { .gruppe-reiter { flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; padding: 8px 12px 10px !important; } .gruppe-reiter .g-reiter { flex: 1 1 auto !important; min-width: 0 !important; padding: 8px 10px !important; font-size: 13px !important; white-space: nowrap; text-align: center; justify-content: center; } .analyse .vbg-zeile, .analyse .wk-zeile, .analyse .vb-ruhe, .analyse .sz-werkzeuge, .analyse .insp-kopf { flex-wrap: wrap !important; } .analyse .wz.mini { max-width: 100%; } } #verbindungen .g-pane { padding: 12px 16px; } #verbindungen .vb-diag-kopf, #verbindungen .vb-diag-tat, #verbindungen .vb-diagnose > div { flex-wrap: wrap; } @media (max-width: 820px) { #verbindungen .g-pane { padding: 10px 14px; } } @media (max-width: 820px) { html:not([data-galaxy="aus"]) #seite, html:not([data-galaxy="aus"]) .seite { background: radial-gradient(1px 1px at 22% 14%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 38%, rgba(230,225,255,.55), transparent), radial-gradient(1px 1px at 34% 72%, var(--p-weiss-a50), transparent), radial-gradient(1px 1px at 80% 88%, rgba(230,225,255,.45), transparent), radial-gradient(420px 360px at 0% 10%, rgba(104,74,224,.20), transparent 62%), radial-gradient(380px 360px at 100% 90%, rgba(220,110,196,.10), transparent 62%), linear-gradient(180deg, var(--p-violett-dunkel) 0%, var(--p-violett-dunkel-2) 55%, #040210 100%) !important; box-shadow: 1px 0 0 rgba(185,168,255,.12) !important; } } :root #seite .analyse-knopf, :root #seite .aktion, :root #seite .sz-knopf, :root #seite .werkzeuge-kopf, :root .seite-fuss .fuss-knopf:not(.abmelden-tief) { background: linear-gradient(180deg, rgba(28,20,64,.55), rgba(14,10,34,.45)) !important; border: 1px solid var(--p-violett-hell-a18) !important; box-shadow: none !important; color: var(--p-violett-hell-6) !important; } @media (hover: hover) and (pointer: fine) { :root #seite .analyse-knopf:hover, :root #seite .aktion:hover, :root #seite .sz-knopf:hover, :root #seite .werkzeuge-kopf:hover, :root .seite-fuss .fuss-knopf:not(.abmelden-tief):hover { background: linear-gradient(180deg, var(--p-violett-2-a22), rgba(28,20,64,.5)) !important; border-color: rgba(185,168,255,.42) !important; } } :root #seite .analyse-knopf.aktiv, :root #seite .aktion.aktiv { background: linear-gradient(180deg, rgba(124,92,255,.28), rgba(40,26,86,.45)) !important; border-color: rgba(185,168,255,.5) !important; color: var(--p-weiss) !important; } :root #seite .wahl-huelle select, :root #seite #projektwahl { background: linear-gradient(180deg, rgba(28,20,64,.6), rgba(14,10,34,.5)) !important; border-color: rgba(185,168,255,.22) !important; } :root #seite .klein.abschnitt, :root #seite .wahl-block .klein { color: #a898d8 !important; } .dw-dauer { display: block; font-size: 10.5px; color: var(--muted-text); font-variant-numeric: tabular-nums; } .pj-e-kopf .pj-e-agent { font-size: 12px; color: rgba(200,235,215,.8); } .ag-tat { display: flex; justify-content: flex-end; margin-top: 8px; } .ag-tat .sv-tat { font: inherit; font-size: 12.5px; } .pt-mv:disabled { opacity: .3; cursor: default; } .tb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; } .tb-kopf .tb-zeit { font-size: 12px; color: var(--p-violett-hell-a55); font-variant-numeric: tabular-nums; } .tb-kopf .wz { margin-left: auto; font: inherit; font-size: 12.5px; } .tb-abschnitt { margin-top: 10px; } .tb-zeile { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; color: var(--muted-text); overflow-wrap: anywhere; } .tb-zeile .dw-dot { flex-shrink: 0; transform: translateY(-1px); } .dw-dot.neutral { background: var(--schrift-3); box-shadow: none; } .us-geheim { display: block; font: 600 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--p-violett-hell); background: rgba(12,8,28,.7); border: 1px solid rgba(185,168,255,.25); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; overflow-wrap: anywhere; user-select: all; } .us-link { color: #cdb9ff; text-decoration: underline; } :root[data-zeiger="grob"] .pt-check, :root[data-zeiger="grob"] .pt-mv { width: 38px; height: 38px; font-size: 15px; } :root[data-zeiger="grob"] .pt-item { gap: 10px; } .hb-score, .leit-wo, .leit-proz-kopf, .lp-cpu, .lp-mem, .s-detail, .s-zeit, .a-titel, .knopf-klein, #menueListe .klein, .klein.abschnitt, .vb-tabelle th, .lw-tabelle th, .warn-leer, .vbs-l, .pf-s-zeit, .pf-meta, .reiter-leer, #fassungAnzeige { color: var(--muted-text) !important; } #fassungAnzeige { opacity: 1 !important; } .lw-tabelle { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .lw-tabelle th:first-child, .lw-tabelle td:first-child { position: sticky; left: 0; background: var(--grund-2); z-index: 1; text-align: left; } body:has(.analyse.offen) #pushBalken { display: none !important; } :root[data-geraet="desktop"] #einstellungen .analyse-inhalt > .einst-block, #einstellungen .analyse-inhalt > .einst-block { max-width: 820px; margin-left: auto !important; margin-right: auto !important; } .gz-mehr { display: block; margin: 10px auto; } .zustand-fehler { padding: 14px; text-align: center; color: #ffc4c4; } .zustand-fehler p { margin: 0 0 10px; } .bk-probe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; font-size: 12.5px; color: var(--muted-text); margin: 4px 0 8px; } .leit-stumm { background: none; border: 1px solid var(--linie); color: var(--schrift-2); border-radius: 7px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12px; } .leit-fuss { flex-wrap: wrap; } .ct-server { margin-bottom: 12px; } .ct-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--p-weiss-a05); } .ct-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--muted-text); } .ct-name small { display: block; font-size: 11px; color: var(--muted-text); } .ct-logs { max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11.5px/1.45 ui-monospace, Menlo, monospace; background: rgba(8,6,20,.85); border: 1px solid rgba(185,168,255,.2); border-radius: 10px; padding: 10px; color: #e9e3ff; } .hilfe-knopf { font: inherit; font-size: 14px; font-weight: 700; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(185,168,255,.35); background: rgba(20,14,40,.6); color: #d9ccff; cursor: pointer; margin-left: auto; margin-right: 8px; flex: 0 0 auto; } .panel-hilfe { margin: 0 14px 8px; padding: 10px 12px; border-radius: 10px; background: rgba(40,28,80,.55); border: 1px solid rgba(185,168,255,.22); color: var(--muted-text); font-size: 13px; line-height: 1.5; } .export-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .export-reihe select { font: inherit; font-size: 14px; flex: 1 1 200px; min-height: 36px; border-radius: 8px; background: rgba(12,8,28,.7); color: #eee; border: 1px solid rgba(185,168,255,.25); } :root[data-schrift="gross"] .analyse-karte, :root[data-schrift="gross"] #seite { zoom: 1.12; } .vl-server { margin-bottom: 12px; } .vl-zeile { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted-text); } .vl-linie { width: 100%; height: 44px; background: var(--p-weiss-a03); border-radius: 6px; } .sz-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-text); } :root :where(button, a, input, select, textarea, [role="button"], [role="tab"], [tabindex]):focus-visible { outline: 2px solid var(--p-violett-hell-2) !important; outline-offset: 2px !important; } :root .xterm-helper-textarea:focus-visible { outline: none !important; } :root .vb-tabelle, :root .lw-tabelle { border-collapse: collapse; font-size: 12px; } :root .vb-tabelle th, :root .lw-tabelle th { font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid var(--p-violett-hell-a18); } :root .vb-tabelle td, :root .lw-tabelle td { border-bottom: 1px solid var(--p-weiss-a05); } .audit-roh { margin-top: 4px; font-size: 11.5px; color: var(--muted-text); } .audit-roh code { overflow-wrap: anywhere; } .komm-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 16px 10px; min-height: 32px; } .komm-hinweis { color: var(--schrift-3); font-size: 12.5px; } .komm-titel { margin: 6px 16px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-pink-hell); } .komm-titel:not(:first-child) { margin-top: 18px; } .komm-platz > .analyse-inhalt { background: var(--p-weiss-a045); border: 1px solid var(--glas-rand); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; } #tlReiter .g-reiter .warn-punkt { margin-left: 6px; min-width: 18px; height: 18px; font-size: 10.5px; } #ptodos.komm-kanal .gruppe-koerper { display: flex; flex-direction: column; overflow: hidden; } #ptodos.komm-kanal #tlP-kanal.an { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #tlP-kanal > .analyse-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; } #tlP-kanal .kanal-chat { flex: 1 1 auto; min-height: 0; } @media (max-width: 820px) { #tlP-kanal > .analyse-inhalt { overflow: hidden; padding-bottom: 10px !important; } #tlP-kanal .kanal-chat { max-height: none !important; } } @media (max-width: 500px) { .komm-platz > .analyse-inhalt { border-radius: 12px; padding: 12px; } } @media (min-width: 768px) and (max-width: 1023px) and (min-height: 600px) { :root { --seite-breite: 200px; } .menue-knopf, .seite-schatten, .seite-schatten.zeig { display: none !important; } .seite { position: static; transform: none; transition: none; box-shadow: none; z-index: auto; } #seite { padding-top: calc(10px + env(safe-area-inset-top)) !important; padding-left: calc(10px + env(safe-area-inset-left)) !important; padding-right: 10px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; } .reiterleiste { padding-left: calc(10px + env(safe-area-inset-left)); } } :root[data-zeiger="grob"] .w-tipps { display: none; } :root { --k-radius: 10px; --k-radius-klein: 8px; --k-hoehe: 36px; --k-hoehe-klein: 30px; --k-schrift: 13px; --k-schrift-klein: 12px; --k-primaer: var(--gx-verlauf); --k-primaer-text: var(--p-weiss); --k-sek-grund: var(--p-weiss-a05); --k-sek-rand: var(--gx-rand); --k-sek-text: var(--schrift); --k-sek-hover: rgba(185,168,255,.12); --k-leise-text: var(--schrift-2); --k-gefahr-grund: rgba(225,87,87,.12); --k-gefahr-rand: rgba(225,87,87,.42); --k-gefahr-text: #ff9d9d; --k-warn-rand: rgba(255,184,107,.55); --k-warn-text: var(--orange-hell); --k-an-grund: rgba(124,92,255,.26); --k-an-rand: rgba(185,168,255,.6); --k-primaer-glow: rgba(124,92,255,.22); --k-uebergang: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease; } :is(#k-system, :root) :is(.k, .us-primaer, .cc-start, .bk-jetzt, .sv-tat, .brain-save, .us-neu, .wz-haupt, .gz-haupt, .ro-los, .wa-jetzt, .pt-add, .fr-ja, .e-knopf, .n-knopf, .br-cta, .wz, .cc-btn, .us-akt, .fr-kbtn, .bk-tat, .db-akt, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .s-alle-ab, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .aend-folgen, .wz-diff, .wm-nochmal, .bus-key-kopie, .hb-tat, .sv-mini, .ml-mini, .fa-kopie, .fa-todo, .us-zurueck, .analyse-zurueck, .fr-nein, .ub-spaeter, .fuss-knopf, .sperre-passkey) { font-family: inherit; font-size: var(--k-schrift) !important; line-height: 1.2; border-radius: var(--k-radius) !important; min-height: var(--k-hoehe); padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 14px !important; padding-right: 14px !important; cursor: pointer; transition: var(--k-uebergang); -webkit-tap-highlight-color: transparent; } :is(#k-system, :root) :is(.k, .us-primaer, .cc-start, .bk-jetzt, .sv-tat, .brain-save, .us-neu, .wz-haupt, .gz-haupt, .ro-los, .wa-jetzt, .pt-add, .fr-ja, .e-knopf, .n-knopf, .br-cta, .wz, .cc-btn, .us-akt, .fr-kbtn, .bk-tat, .db-akt, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .s-alle-ab, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .aend-folgen, .wz-diff, .wm-nochmal, .bus-key-kopie, .hb-tat, .sv-mini, .ml-mini, .fa-kopie, .fa-todo, .us-zurueck, .analyse-zurueck, .fr-nein, .ub-spaeter, .fuss-knopf, .sperre-passkey):active:not(:disabled) { transform: scale(0.97); } :is(#k-system, :root) :is(.k, .us-primaer, .cc-start, .bk-jetzt, .sv-tat, .brain-save, .us-neu, .wz-haupt, .gz-haupt, .ro-los, .wa-jetzt, .pt-add, .fr-ja, .e-knopf, .n-knopf, .br-cta, .wz, .cc-btn, .us-akt, .fr-kbtn, .bk-tat, .db-akt, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .s-alle-ab, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .aend-folgen, .wz-diff, .wm-nochmal, .bus-key-kopie, .hb-tat, .sv-mini, .ml-mini, .fa-kopie, .fa-todo, .us-zurueck, .analyse-zurueck, .fr-nein, .ub-spaeter, .fuss-knopf, .sperre-passkey):disabled { opacity: .5; cursor: default; filter: none; } :is(#k-system, :root) :is(.k-sekundaer, .wz, .cc-btn, .us-akt, .fr-kbtn, .bk-tat, .db-akt, .e-knopf, .n-knopf, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .aend-folgen, .wz-diff, .wm-nochmal, .bus-key-kopie, .sv-mini, .ml-mini, .fa-kopie, .fa-todo, .us-zurueck, .analyse-zurueck, .sv-tat.zweit, .sperre-passkey) { background: var(--k-sek-grund) !important; background-image: none !important; border: 1px solid var(--k-sek-rand) !important; color: var(--k-sek-text) !important; font-weight: 500 !important; box-shadow: none !important; } @media (hover: hover) { :is(#k-system, :root) :is(.k-sekundaer, .wz, .cc-btn, .us-akt, .fr-kbtn, .bk-tat, .db-akt, .e-knopf, .n-knopf, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .aend-folgen, .wz-diff, .wm-nochmal, .bus-key-kopie, .sv-mini, .ml-mini, .fa-kopie, .fa-todo, .us-zurueck, .analyse-zurueck, .sv-tat.zweit, .sperre-passkey):hover:not(:disabled) { background: var(--k-sek-hover) !important; border-color: var(--k-an-rand) !important; } } :is(#k-system, :root) :is(.k-primaer, .us-primaer, .cc-start, .bk-jetzt, .sv-tat:not(.zweit), .brain-save, .us-neu, .wz.wz-haupt, .wz.gz-haupt, .ro-los:not(.warnung), .wa-jetzt, .pt-add, .fr-ja, .e-knopf.haupt, .n-knopf.haupt, .br-cta, .osw-knopf.stark) { background: var(--k-primaer) !important; border: 1px solid transparent !important; color: var(--k-primaer-text) !important; font-weight: 600 !important; box-shadow: 0 2px 10px var(--k-primaer-glow) !important; } @media (hover: hover) { :is(#k-system, :root) :is(.k-primaer, .us-primaer, .cc-start, .bk-jetzt, .sv-tat:not(.zweit), .brain-save, .us-neu, .wz.wz-haupt, .wz.gz-haupt, .ro-los:not(.warnung), .wa-jetzt, .pt-add, .fr-ja, .e-knopf.haupt, .n-knopf.haupt, .br-cta, .osw-knopf.stark):hover:not(:disabled) { filter: brightness(1.08); } } :is(#k-system, :root) :is(.k-leise, .fuss-knopf, .ub-spaeter) { background: transparent !important; background-image: none !important; border: 1px solid transparent !important; color: var(--k-leise-text) !important; font-weight: 500 !important; box-shadow: none !important; } @media (hover: hover) { :is(#k-system, :root) :is(.k-leise, .fuss-knopf, .ub-spaeter):hover:not(:disabled) { color: var(--schrift) !important; background: var(--k-sek-grund) !important; } } :is(#k-system, :root) :is(.k-gefahr, .wz.gefahr, .us-akt.gefahr, .e-knopf.gefahr, .n-knopf.gefahr, .bk-tat.gefahr, .sv-mini.rot, .fr-nein, .s-alle-ab) { background: var(--k-gefahr-grund) !important; background-image: none !important; border: 1px solid var(--k-gefahr-rand) !important; color: var(--k-gefahr-text) !important; font-weight: 500 !important; box-shadow: none !important; } @media (hover: hover) { :is(#k-system, :root) :is(.k-gefahr, .wz.gefahr, .us-akt.gefahr, .e-knopf.gefahr, .n-knopf.gefahr, .bk-tat.gefahr, .sv-mini.rot, .fr-nein, .s-alle-ab):hover:not(:disabled) { background: rgba(225,87,87,.2) !important; } } :is(#k-system, :root) :is(.ro-los.warnung, .hb-tat) { background: transparent !important; background-image: none !important; border: 1px solid var(--k-warn-rand) !important; color: var(--k-warn-text) !important; font-weight: 600 !important; box-shadow: none !important; } :is(#k-system, :root) :is(.wz, .cc-btn, .us-akt, .fr-kbtn, .osw-knopf, .ml-knopf, .aend-folgen, .sv-mini).an { background: var(--k-an-grund) !important; border-color: var(--k-an-rand) !important; color: var(--p-weiss) !important; } :is(#k-system, :root) :is(.k-klein, .wz.mini, .sv-mini, .ml-mini, .fr-kbtn, .bk-tat, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .bus-key-kopie, .fa-kopie, .fa-todo, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .wz-diff, .aend-folgen) { min-height: var(--k-hoehe-klein); font-size: var(--k-schrift-klein) !important; border-radius: var(--k-radius-klein) !important; padding-left: 10px !important; padding-right: 10px !important; } :is(#k-system, :root)[data-zeiger="grob"] :is(.k, .us-primaer, .cc-start, .bk-jetzt, .sv-tat, .brain-save, .us-neu, .ro-los, .wa-jetzt, .pt-add, .fr-ja, .fr-nein, .e-knopf, .n-knopf, .br-cta, .wz:not(.mini), .cc-btn, .us-akt, .db-akt, .osw-knopf, .ml-knopf, .such-knopf, .ub-knopf, .vbg-probe, .menue-sort, .ro-verteilen, .zustand-erneut, .fr-stummbtn, .wm-nochmal, .hb-tat, .us-zurueck, .analyse-zurueck, .sperre-passkey) { min-height: 44px; } :is(#k-system, :root)[data-zeiger="grob"] :is(.k-klein, .wz.mini, .sv-mini, .ml-mini, .fr-kbtn, .bk-tat, .leit-inspekt, .leit-stumm, .leit-neustart, .leit-wartung, .s-frei, .s-ab, .bus-key-kopie, .fa-kopie, .fa-todo, .gz-probe, .gz-mehr, .gz-arch, .gz-abmelden, .wz-diff, .aend-folgen) { min-height: 36px; } :is(#k-system, :root) :is(.analyse-zu, .hilfe-knopf) { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--k-radius) !important; background: var(--gx-flaeche) !important; border: 1px solid var(--gx-rand-leise) !important; color: var(--schrift) !important; box-shadow: none !important; transition: var(--k-uebergang); } :is(#k-system, :root) .analyse-zu { font-size: 20px !important; } :is(#k-system, :root) .hilfe-knopf { font-size: 15px !important; font-weight: 700 !important; } :is(#k-system, :root) :is(.analyse-zu, .hilfe-knopf):active { transform: scale(0.95); } @media (hover: hover) { :is(#k-system, :root) :is(.analyse-zu, .hilfe-knopf):hover { background: var(--k-sek-hover) !important; border-color: var(--k-an-rand) !important; } } :is(#k-system, :root)[data-zeiger="grob"] :is(.analyse-zu, .hilfe-knopf) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } :is(#k-system, :root) :is(.pt-check, .pt-mv, .bl-ok, .fa-check) { border-radius: var(--k-radius-klein) !important; border-color: var(--gx-rand-leise) !important; transition: var(--k-uebergang); } :is(#k-system, :root) :is(.pt-mv.gefahr) { color: var(--k-gefahr-text) !important; } :is(#k-system, :root) :is(.db-tab, .bl-tab, .rf-tab, .us-chip, .brain-tab) { font-family: inherit; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.2; min-height: 30px; padding: 0 12px !important; border-radius: 999px !important; background: var(--gx-flaeche) !important; background-image: none !important; border: 1px solid var(--gx-rand-leise) !important; color: var(--schrift-2) !important; box-shadow: none !important; transition: var(--k-uebergang); } :is(#k-system, :root) :is(.db-tab, .bl-tab, .rf-tab, .us-chip, .brain-tab).an { background: var(--k-an-grund) !important; border-color: var(--k-an-rand) !important; color: var(--p-weiss) !important; font-weight: 600 !important; } :is(#k-system, :root)[data-zeiger="grob"] :is(.db-tab, .bl-tab, .rf-tab, .us-chip, .brain-tab) { min-height: 36px; } :is(#k-system, :root) .analyse :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input:not([type]), select) { font-family: inherit; border-radius: var(--k-radius) !important; min-height: var(--k-hoehe); } :is(#k-system, :root)[data-zeiger="grob"] .analyse :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input:not([type]), select) { min-height: 44px; font-size: 16px; } .audit-mehr { display: block; margin: 10px auto 2px; } .nk-abo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .nk-abo a.k { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } body.nicht-admin .nur-admin { display: none !important; } body.nicht-besitzer .nur-besitzer { display: none !important; } .v-projekte { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .v-proj-chip { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--schrift-2); cursor: pointer; transition: transform 120ms ease-out; } .v-proj-chip:active { transform: scale(.97); } .v-proj-chip.an { color: var(--schrift); border-color: var(--akzent-cyan, var(--p-cyan)); background: color-mix(in srgb, var(--akzent-cyan, var(--p-cyan)) 18%, transparent); } .v-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } .v-tat-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; } .v-form { display: grid; gap: 10px; margin: 10px 0 12px; } .v-form label.klein { display: grid; gap: 4px; color: var(--schrift-2); } .v-tipp { color: var(--schrift-3); margin: 0; font-size: 12.5px; line-height: 1.5; text-transform: none; letter-spacing: normal; font-weight: 400; } .v-marken { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .v-marke { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; color: var(--schrift-2); background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); white-space: nowrap; } .v-marke.gut { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 40%, transparent); background: color-mix(in srgb, var(--gruen) 10%, transparent); } .v-marke.warn { color: var(--k-warn-text); border-color: var(--k-warn-rand); background: color-mix(in srgb, var(--orange-hell) 8%, transparent); } .v-marke.schlecht { color: var(--k-gefahr-text); border-color: var(--k-gefahr-rand); background: var(--k-gefahr-grund); } .v-notiz { color: var(--schrift-3); font-size: 12px; overflow-wrap: anywhere; } .v-zuordnungen { display: grid; gap: 6px; margin-top: 10px; } .v-zuord { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); } .v-zuord-was { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; } .v-zuord-was code, .v-verlauf code { font-size: 12px; color: var(--schrift); } .v-zuord-was small { color: var(--schrift-3); margin-left: 4px; } .v-zuord-tat { display: flex; gap: 6px; margin-left: auto; } .v-leer { color: var(--schrift-3); font-size: 12.5px; } .v-e-form:empty { display: none; } .v-verlauf { display: grid; gap: 2px; } .v-verlauf-z { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gx-rand-leise); font-size: 13px; overflow-wrap: anywhere; } .v-verlauf-zeit { flex: 0 0 auto; color: var(--schrift-3); font-size: 12px; min-width: 84px; } .v-env { align-items: flex-start; } .v-env-vars { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; } button.v-marke.v-uebern { font: inherit; font-size: 11.5px; cursor: pointer; min-height: 26px; } :is(#k-system, :root)[data-zeiger="grob"] button.v-marke.v-uebern { min-height: 36px; } .leit-feld.leit-pausiert { opacity: .82; } .leit-wartet { color: var(--schrift-2); font-size: 12.5px; line-height: 1.5; padding: 8px 2px; } :root[data-galaxy-ton="orange"] { --gx-feld: rgba(16,6,1,.82); --gx-rand: rgba(255,176,102,.24); --gx-rand-leise: rgba(255,176,102,.13); --gx-flaeche: rgba(255,255,255,.035); --gx-flaeche-hover: rgba(255,176,102,.08); --gx-verlauf: linear-gradient(135deg, #e8641d 0%, #ff8c40 100%); --gxn-schleier: rgba(255,138,34,.22); --gxn-schleier-2: rgba(226,102,32,.21); --gxn-schleier-3: rgba(255,230,200,.09); --gxn-wolke-1: rgba(255,185,105,.20); --gxn-wolke-1b: rgba(228,112,32,.13); --gxn-wolke-2: rgba(255,205,160,.13); --gxn-glut: rgba(206,80,18,.50); --gxn-gold: rgba(255,165,58,.20); --gxn-kupfer: rgba(218,70,22,.42); --gxn-bernstein: rgba(255,196,100,.16); --gxn-grund-1: #140902; --gxn-grund-2: #0b0501; --gxn-grund-3: #020100; --gxn-tint: rgba(10,4,0,.48); } :root[data-galaxy-ton="orange"]:not([data-thema]) { --akzent: #ffb86b; --akzent-cyan: #ffb86b; } :root[data-galaxy-ton="orange"]:not([data-thema]):not([data-galaxy="aus"]) .rahmen { background: linear-gradient(159deg, transparent 40%, var(--gxn-schleier) 50%, var(--gxn-schleier-2) 57%, var(--gxn-schleier-3) 61%, transparent 71%), radial-gradient(30% 26% at 32% 42%, var(--gxn-wolke-1), var(--gxn-wolke-1b) 45%, transparent 70%), radial-gradient(22% 18% at 66% 56%, var(--gxn-wolke-2), transparent 66%), radial-gradient(50% 46% at 18% 24%, var(--gxn-glut), transparent 60%), radial-gradient(44% 40% at 78% 40%, var(--gxn-gold), transparent 60%), radial-gradient(56% 46% at 82% 76%, var(--gxn-kupfer), transparent 62%), radial-gradient(40% 34% at 56% 58%, var(--gxn-bernstein), transparent 62%), radial-gradient(180% 150% at 50% 6%, var(--gxn-grund-1) 0%, var(--gxn-grund-2) 50%, var(--gxn-grund-3) 100%) !important; background-repeat: no-repeat !important; box-shadow: inset 0 0 0 100vmax var(--gxn-tint) !important; } :root[data-galaxy-ton="orange"] .rahmen::after { filter: sepia(.5) saturate(1.45) hue-rotate(-12deg) brightness(1.03) !important; } :root[data-galaxy-ton="orange"] { --k-sek-hover: rgba(255,176,102,.12); --k-an-grund: rgba(255,140,40,.24); --k-an-rand: rgba(255,176,102,.60); --k-primaer-glow: rgba(230,120,40,.30); --k-seg-an: rgba(255,150,50,.26); --k-wz-hover-bg: linear-gradient(120deg, rgba(255,150,60,.22), rgba(230,110,40,.14)); --k-wz-diff-bg: linear-gradient(120deg, rgba(255,150,60,.28), rgba(230,110,40,.22)); --k-wz-diff-rand: rgba(255,160,70,.6); } :root[data-galaxy-ton="orange"] .seg-wahl button.an { background: var(--k-seg-an); color: var(--p-orange-hell-a95); } :root[data-galaxy-ton="orange"] .wz:hover { background: var(--k-wz-hover-bg) !important; border-color: var(--k-an-rand) !important; } :root[data-galaxy-ton="orange"] .werkzeuge .wz-diff.an { background: var(--k-wz-diff-bg) !important; border-color: var(--k-wz-diff-rand) !important; } .schl-intro { color: var(--schrift-2); font-size: 13px; line-height: 1.55; margin-bottom: 12px; } .schl-intro code, .schl-ziel code { background: var(--flaeche-2); border-radius: 5px; padding: 1px 5px; font-family: "Cascadia Mono", monospace; font-size: 11.5px; color: var(--schrift-2); } .schl-sperre { background: var(--orange-weich); border: 1px solid var(--k-warn-rand); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--schrift); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .schl-leer { color: var(--schrift-3); font-size: 13px; padding: 8px 0; } .schl-karte { background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .schl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .schl-proj { font-size: 12px; color: var(--akzent); white-space: nowrap; } .schl-zweck { color: var(--schrift-2); font-size: 12.5px; margin-top: 4px; line-height: 1.5; } .schl-ziel { font-size: 12px; color: var(--schrift-3); margin-top: 6px; } .schl-eingabe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .schl-wert { flex: 1 1 200px; min-width: 0; background: var(--gx-feld); border: 1px solid var(--gx-rand); border-radius: 10px; padding: 9px 12px; color: var(--schrift); font: inherit; font-size: 16px; } .schl-erledigt { margin-top: 12px; } .schl-erledigt summary { color: var(--schrift-2); font-size: 13px; cursor: pointer; } .schl-e-zeile { font-size: 12.5px; color: var(--schrift-2); padding: 6px 0; border-top: 1px solid var(--linie); } .schl-e-art { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--flaeche-2); color: var(--schrift-2); } .schl-e-art.erfuellt { color: var(--gruen); } .schl-e-art.abgelehnt, .schl-e-art.fehler { color: var(--rot); } :root[data-galaxy-ton="orange"] { --gxn-nebel: radial-gradient(50% 46% at 16% 24%, var(--gxn-glut), transparent 60%), radial-gradient(40% 38% at 34% 18%, var(--gxn-gold), transparent 58%), radial-gradient(46% 42% at 82% 40%, var(--gxn-bernstein), transparent 60%), radial-gradient(56% 46% at 80% 76%, var(--gxn-kupfer), transparent 62%), radial-gradient(40% 34% at 58% 60%, var(--gxn-wolke-1), transparent 62%), radial-gradient(180% 150% at 50% 6%, var(--gxn-grund-1) 0%, var(--gxn-grund-2) 50%, var(--gxn-grund-3) 100%); --gxn-login-tint: rgba(10,4,0,.30); --gxn-glow-text: rgba(255,150,60,.42); --gxn-glow-knopf: rgba(220,90,30,.62); --gxn-atom-glow: rgba(255,150,70,.42); } :root[data-galaxy-ton="orange"] .sperre { background: var(--gxn-nebel) !important; box-shadow: inset 0 0 0 100vmax var(--gxn-login-tint) !important; } :root[data-galaxy-ton="orange"] .boot { background: var(--gxn-nebel) !important; } :root[data-galaxy-ton="orange"] .sperre::before, :root[data-galaxy-ton="orange"] .sperre::after, :root[data-galaxy-ton="orange"] .boot::before, :root[data-galaxy-ton="orange"] .boot::after { filter: sepia(.95) saturate(1.9) hue-rotate(-22deg) brightness(1.02) !important; } :root[data-galaxy-ton="orange"] .sperre-karte h1 { text-shadow: 0 0 26px var(--gxn-glow-text) !important; } :root[data-galaxy-ton="orange"] .willkommen h1 { text-shadow: 0 0 22px var(--gxn-glow-text) !important; } :root[data-galaxy-ton="orange"] .boot-gruss .bg-name { text-shadow: 0 0 20px var(--gxn-glow-text) !important; } :root[data-galaxy-ton="orange"] .sperre-knopf:hover { box-shadow: 0 14px 40px -8px var(--gxn-glow-knopf) !important; } :root[data-galaxy-ton="orange"] .k-atom { filter: drop-shadow(0 0 10px var(--gxn-atom-glow)) !important; } :root[data-galaxy-ton="orange"] .marke-atom, :root[data-galaxy-ton="orange"] .sperre-raute, :root[data-galaxy-ton="orange"] .boot-atom-svg { filter: drop-shadow(0 0 10px var(--gxn-atom-glow)) drop-shadow(0 0 26px var(--gxn-atom-glow)) !important; } :root[data-galaxy-ton="orange"] .w-raute { filter: drop-shadow(0 0 18px var(--gxn-atom-glow)) drop-shadow(0 0 54px var(--gxn-atom-glow)) !important; } :root[data-galaxy-ton="orange"] .boot-partikel { filter: sepia(.95) saturate(1.9) hue-rotate(-22deg) brightness(1.03) !important; } :root[data-galaxy-ton="orange"] { --gxn-karte-bg: rgba(20,10,2,.74); --gxn-karte-rand: rgba(255,255,255,.09); --gxn-karte-glow: transparent; --gxn-knopf-glow: rgba(230,120,40,.5); --gxn-rand-conic: conic-gradient(from var(--deg,0deg), rgba(255,170,70,.95), rgba(230,110,40,.72), rgba(255,212,160,.85), rgba(255,150,60,.75), rgba(255,170,70,.95)); } :root[data-galaxy-ton="orange"] .sperre-knopf { background: var(--gx-verlauf) !important; box-shadow: 0 12px 34px -8px var(--gxn-knopf-glow) !important; } :root[data-galaxy-ton="orange"] .sperre-karte { background: linear-gradient(180deg, var(--p-weiss-a06), var(--p-weiss-a02)), var(--gxn-karte-bg) !important; border-color: var(--gxn-karte-rand) !important; } :root[data-galaxy-ton="orange"] .sperre-karte { box-shadow: 0 34px 100px var(--p-schwarz-a55), 0 0 0 1px var(--gxn-karte-rand), 0 0 90px -22px var(--gxn-karte-glow), inset 0 1px 0 var(--p-weiss-a06) !important; } :root[data-galaxy-ton="orange"] .sperre-karte::before { background: var(--gxn-rand-conic) !important; } :root[data-galaxy-ton="orange"] .atom { filter: sepia(1) saturate(2.1) hue-rotate(-18deg) brightness(1.06) !important; } body.tastatur-offen .tastenleiste.zeig { position: fixed !important; left: 0; right: 0; bottom: var(--tastatur-unten, 0px) !important; z-index: 80 !important; padding-bottom: 7px !important; box-shadow: 0 -8px 24px -8px var(--p-schwarz-a55); } :root[data-galaxy-ton="orange"] { --linie-eins: rgba(255,176,102,.16); --gxn-leiste-1: rgba(26,14,4,.9); --gxn-leiste-2: rgba(14,8,2,.72); } :root[data-galaxy-ton="orange"] .reiterleiste { background: linear-gradient(180deg, var(--gxn-leiste-1), var(--gxn-leiste-2)) !important; } :root[data-galaxy-ton="orange"] .werkzeuge { background: linear-gradient(180deg, var(--gxn-leiste-1), var(--gxn-leiste-2)) !important; } :root[data-galaxy-ton="orange"] { --gxn-knopf-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); --gxn-knopf-rand: rgba(255,255,255,.09); --gxn-knopf-text: #f0e6da; --gxn-knopf-hover: linear-gradient(180deg, rgba(255,150,60,.2), rgba(40,22,6,.5)); --gxn-knopf-aktiv: linear-gradient(180deg, rgba(255,150,60,.26), rgba(120,60,20,.42)); --gxn-knopf-aktiv-rand: rgba(255,176,102,.6); } :root[data-galaxy-ton="orange"] .reiterleiste .reiter, :root[data-galaxy-ton="orange"] .reiterleiste .reiter-kanal { background: var(--gxn-knopf-bg) !important; border-color: var(--gxn-knopf-rand) !important; color: var(--gxn-knopf-text) !important; } :root[data-galaxy-ton="orange"] .reiterleiste .reiter.aktiv, :root[data-galaxy-ton="orange"] .reiterleiste .reiter-kanal.aktiv { background: var(--gxn-knopf-aktiv) !important; border-top-color: var(--gxn-knopf-aktiv-rand) !important; color: var(--p-weiss) !important; box-shadow: 0 -8px 22px -12px var(--gxn-knopf-glow) !important; } :root[data-galaxy-ton="orange"] #seite .analyse-knopf, :root[data-galaxy-ton="orange"] #seite .aktion, :root[data-galaxy-ton="orange"] #seite .sz-knopf, :root[data-galaxy-ton="orange"] #seite .werkzeuge-kopf, :root[data-galaxy-ton="orange"] .seite-fuss .fuss-knopf:not(.abmelden-tief) { background: var(--gxn-knopf-bg) !important; border-color: var(--gxn-knopf-rand) !important; color: var(--gxn-knopf-text) !important; } :root[data-galaxy-ton="orange"] #seite .analyse-knopf.aktiv, :root[data-galaxy-ton="orange"] #seite .aktion.aktiv { background: var(--gxn-knopf-aktiv) !important; border-color: var(--gxn-knopf-aktiv-rand) !important; color: var(--p-weiss) !important; } :root[data-galaxy-ton="orange"] #seite .wahl-huelle select, :root[data-galaxy-ton="orange"] #seite #projektwahl { background: var(--gxn-knopf-bg) !important; border-color: var(--gxn-knopf-rand) !important; } @media (hover: hover) and (pointer: fine) { :root[data-galaxy-ton="orange"] #seite .analyse-knopf:hover, :root[data-galaxy-ton="orange"] #seite .aktion:hover, :root[data-galaxy-ton="orange"] #seite .sz-knopf:hover, :root[data-galaxy-ton="orange"] #seite .werkzeuge-kopf:hover, :root[data-galaxy-ton="orange"] .seite-fuss .fuss-knopf:not(.abmelden-tief):hover, :root[data-galaxy-ton="orange"] .reiterleiste .reiter:hover:not(.aktiv) { background: var(--gxn-knopf-hover) !important; border-color: var(--gxn-knopf-aktiv-rand) !important; } } .au-proj-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .au-proj { border-left: 3px solid var(--pf, var(--akzent)); background: var(--gx-flaeche); border-radius: 10px; padding: 9px 12px; } .au-proj-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; } .au-proj-kopf b { font-size: 13.5px; } .au-proj-n { font-size: 11.5px; color: var(--schrift-3); white-space: nowrap; } .au-proj-todo { font-size: 12.5px; color: var(--schrift-2); padding: 3px 0 3px 12px; position: relative; line-height: 1.45; } .au-proj-todo::before { content: "·"; position: absolute; left: 2px; color: var(--pf, var(--akzent)); } .au-proj-todo.klein { color: var(--schrift-3); font-style: italic; } .au-user-liste { display: flex; flex-direction: column; gap: 6px; } .au-user { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand-leise); border-radius: 9px; padding: 7px 11px; } .au-user b { font-size: 13px; } .au-user-rolle { font-size: 11.5px; color: var(--schrift-3); white-space: nowrap; } :root[data-galaxy-ton="orange"] { --gxn-kopf-akzent: linear-gradient(90deg, transparent, rgba(255,176,102,.75), rgba(230,120,40,.5), transparent); --gxn-kopf-bg: linear-gradient(120deg, rgba(255,150,60,.10), rgba(230,120,40,.04)); } :root[data-galaxy-ton="orange"] .analyse-karte::before { background: var(--gxn-kopf-akzent) !important; } :root[data-galaxy-ton="orange"] .analyse-kopf, :root[data-galaxy-ton="orange"] .gruppe-reiter { background-image: var(--gxn-kopf-bg) !important; } .au-user { flex-direction: column; align-items: stretch !important; cursor: pointer; } .au-user-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .au-user-rechts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .au-user-n { font-size: 11.5px; color: var(--schrift-3); white-space: nowrap; } .au-user-konto { font: inherit; font-size: 11.5px; padding: 3px 10px; border-radius: 8px; background: var(--gx-flaeche); border: 1px solid var(--gx-rand); color: var(--akzent); cursor: pointer; white-space: nowrap; } .au-user-konto:hover { border-color: var(--akzent); } .au-user-tasks { margin-top: 8px; border-top: 1px solid var(--linie); padding-top: 7px; display: flex; flex-direction: column; gap: 2px; } .au-user.auf { border-color: var(--gx-rand); } :root[data-galaxy-ton="orange"] { --gxn-marke-grad: linear-gradient(100deg, #ffd9a8 0%, #ff9f43 40%, #ff7a1a 72%, #ffb86b 100%); --gxn-muted: rgba(255,224,190,.82); --muted-text: var(--gxn-muted); } :root[data-galaxy-ton="orange"] .marke-text, :root[data-galaxy-ton="orange"] .willkommen h1, :root[data-galaxy-ton="orange"] .sperre-karte h1, :root[data-galaxy-ton="orange"] .boot-marke { background: var(--gxn-marke-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 12px var(--gxn-knopf-glow)) !important; } :root[data-galaxy-ton="orange"] #menueListe .klein, :root[data-galaxy-ton="orange"] .klein.abschnitt, :root[data-galaxy-ton="orange"] .vb-tabelle th, :root[data-galaxy-ton="orange"] .lw-tabelle th, :root[data-galaxy-ton="orange"] .warn-leer, :root[data-galaxy-ton="orange"] .vbs-l, :root[data-galaxy-ton="orange"] .pf-s-zeit, :root[data-galaxy-ton="orange"] .pf-meta, :root[data-galaxy-ton="orange"] .reiter-leer, :root[data-galaxy-ton="orange"] #fassungAnzeige { color: var(--gxn-muted) !important; } :root[data-galaxy-ton="orange"] { --gxn-balken: linear-gradient(120deg, rgba(60,32,8,.92), rgba(34,18,4,.94)); } :root[data-galaxy-ton="orange"] .update-balken { background: var(--gxn-balken) !important; } :root[data-galaxy-ton="orange"] { --gxn-karte-neb: linear-gradient(180deg, #16131c, #100e16); } :root[data-galaxy-ton="orange"] .analyse-karte { background: var(--gxn-karte-neb) !important; border-color: var(--gx-rand) !important; box-shadow: 0 30px 80px -20px var(--p-schwarz-a55), 0 0 50px -20px var(--gxn-karte-glow), inset 0 1px 0 var(--p-weiss-a05) !important; } :root[data-galaxy-ton="orange"] .g-reiter.an, :root[data-galaxy-ton="orange"] .db-tab.an, :root[data-galaxy-ton="orange"] .us-chip.an, :root[data-galaxy-ton="orange"] .us-rolle.an, :root[data-galaxy-ton="orange"] .us-zeile.an { background: var(--gxn-knopf-aktiv) !important; border-color: var(--gxn-knopf-aktiv-rand) !important; } :root[data-galaxy-ton="orange"] .gruppe-reiter .g-reiter.an, :root[data-galaxy-ton="orange"] .g-reiter.an { color: #ffffff !important; border-top-color: rgb(var(--neon-c)) !important; } :root[data-galaxy-ton="orange"] .analyse .wz.mini, :root[data-galaxy-ton="orange"] .analyse .cc-btn, :root[data-galaxy-ton="orange"] .analyse .s-frei, :root[data-galaxy-ton="orange"] .analyse .fuss-knopf, :root[data-galaxy-ton="orange"] #kanalArchivKnopf, :root[data-galaxy-ton="orange"] #monGruppe .db-akt, :root[data-galaxy-ton="orange"] .ml-knopf, :root[data-galaxy-ton="orange"] .ml-mini:not(.an), :root[data-galaxy-ton="orange"] .us-akt { background: var(--gxn-knopf-bg) !important; border-color: var(--gxn-knopf-rand) !important; } :root[data-galaxy-ton="orange"] .us-sch input:checked + .us-knopf, :root[data-galaxy-ton="orange"] .ml-mini.an { background: var(--gxn-knopf-aktiv) !important; } :root[data-galaxy-ton="orange"] .kb-grp.mein .kb { background: var(--gxn-knopf-aktiv) !important; border-color: var(--gxn-knopf-aktiv-rand) !important; } :root[data-galaxy-ton="orange"] { --gxn-scroll: linear-gradient(180deg, #ff9a3d, #d9631a); --gxn-todo-bg: rgba(255,176,102,.14); --gxn-todo-text: #ffd9a8; --gxn-an-bg: linear-gradient(120deg, rgba(255,150,60,.4), rgba(230,110,40,.25)); --gxn-hilfe-bg: rgba(40,22,6,.55); --gxn-hilfe-rand: rgba(255,176,102,.22); --gxn-hilfe-text: rgba(255,238,220,.9); --gxn-log-bg: rgba(16,8,2,.85); } :root[data-galaxy-ton="orange"] ::-webkit-scrollbar-thumb { background: var(--gxn-scroll) !important; } :root[data-galaxy-ton="orange"] .seite::-webkit-scrollbar-thumb { background: var(--gxn-scroll) !important; } :root[data-galaxy-ton="orange"] .kb-todo { background: var(--gxn-todo-bg) !important; color: var(--gxn-todo-text) !important; } :root[data-galaxy-ton="orange"] #kanalArchivKnopf.an { background: var(--gxn-an-bg) !important; } :root[data-galaxy-ton="orange"] .panel-hilfe { background: var(--gxn-hilfe-bg) !important; border-color: var(--gxn-hilfe-rand) !important; color: var(--gxn-hilfe-text) !important; } :root[data-galaxy-ton="orange"] .hilfe-knopf { background: var(--gxn-hilfe-bg) !important; border-color: var(--gxn-hilfe-rand) !important; color: var(--gxn-todo-text) !important; } :root[data-galaxy-ton="orange"] .ct-logs { background: var(--gxn-log-bg) !important; border-color: var(--gxn-hilfe-rand) !important; color: var(--gxn-hilfe-text) !important; } :root[data-galaxy-ton="orange"] .export-reihe select { background: var(--gxn-log-bg) !important; border-color: var(--gxn-hilfe-rand) !important; } #oxyPopup { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 20px) 16px max(env(safe-area-inset-bottom), 20px); background: var(--p-schwarz-a50); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } #oxyPopup.auf { display: flex; } #oxyPopup .pop-karte { width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten-l); padding: 18px; } #oxyPopup .pop-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } #oxyPopup .pop-titel { font-weight: 600; color: var(--schrift); } #oxyPopup .pop-zu { background: none; border: 0; color: var(--schrift); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; } .pwg-feld { display: flex; gap: 8px; align-items: stretch; } .pwg-aus { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; min-height: 1.2em; background: var(--grund); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; color: var(--schrift); } .pwg-opt { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; } .pwg-opt label { display: flex; align-items: center; gap: 6px; } .pwg-opt input[type="number"] { font: inherit; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; color: var(--schrift); padding: 4px 6px; } #seite .marke-text { font-size: 13.5px; font-weight: 600; letter-spacing: 0.4px; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--orange); color: var(--orange); text-shadow: none; } .sperre { background: radial-gradient(60% 45% at 50% 38%, rgb(var(--neon-c) / .10), transparent 60%), radial-gradient(70% 55% at 50% 60%, rgba(160,110,255,.10), transparent 62%), radial-gradient(140% 120% at 50% 0%, var(--p-violett-dunkel-3) 0%, #050310 55%, #020108 100%) !important; } .sperre .sperre-karte { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(20,18,34,.72), rgba(9,8,18,.82)) !important; border: 1px solid rgb(var(--neon-v) / .22) !important; border-radius: 20px !important; backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 2px 0 0 var(--p-weiss-a06) inset, 0 0 0 1px rgb(var(--neon-c) / .10), 0 0 46px -18px rgb(var(--glut-v) / .5) !important; } .sperre .sperre-karte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(180deg, var(--p-weiss-a07), transparent 22%); } .sperre .sperre-karte::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(130,200,255,.028) 1px, transparent 1px); background-size: 100% 5px; opacity: .55; } .sperre .sperre-raute .atom { filter: drop-shadow(0 3px 5px var(--p-schwarz-a55)) drop-shadow(0 0 14px rgb(var(--glut-o) / .5)) drop-shadow(0 0 2px rgba(255,255,255,.3)); } .sperre .sperre-karte h1 { letter-spacing: 2px; text-shadow: 0 0 18px rgb(var(--glut-o) / .35), 0 2px 10px var(--p-schwarz-a50); } .sperre .sperre-karte input { background: rgba(8,7,16,.7) !important; border: 1px solid rgb(var(--neon-v) / .2) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 var(--p-weiss-a04); transition: border-color .15s ease, box-shadow .15s ease; } .sperre .sperre-karte input:focus { border-color: rgb(var(--neon-c) / .55) !important; box-shadow: 0 0 0 3px rgb(var(--neon-c) / .16), inset 0 1px 0 var(--p-weiss-a05) !important; } .sperre .sperre-knopf { border-radius: 12px !important; box-shadow: 0 10px 24px -10px rgb(var(--glut-o) / .6), 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 1px rgb(var(--glut-o) / .3) !important; transition: transform .12s ease, box-shadow .15s ease; } .sperre .sperre-knopf:active { transform: scale(.985); } .sperre .sperre-passkey { border: 1px solid rgb(var(--neon-v) / .28) !important; background: rgba(14,12,26,.6) !important; border-radius: 12px !important; } @media (prefers-reduced-motion: reduce) { .sperre .sperre-karte::after { background-image: none; } } .analyse-karte { border-radius: 20px !important; border: 1px solid rgb(var(--neon-v) / .2) !important; box-shadow: 0 34px 80px -34px rgba(0,0,0,.85), inset 0 1px 0 var(--p-weiss-a07), 0 0 0 1px rgb(var(--neon-c) / .09), 0 0 52px -26px rgb(var(--glut-v) / .4) !important; } .analyse-karte > .analyse-kopf { border-bottom: 1px solid rgb(var(--neon-c) / .14); box-shadow: 0 1px 0 rgb(var(--neon-v) / .08); } @media (max-width: 500px) { .analyse { padding: calc(8px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)) !important; align-items: center !important; justify-content: flex-start !important; } .analyse-karte, .analyse-karte.breit { width: 100% !important; max-width: 460px !important; height: auto !important; max-height: 92dvh !important; border-radius: 20px !important; } .analyse-karte > .analyse-kopf { border-radius: 20px 20px 0 0; } } .gruppe-reiter .g-reiter { background: rgba(14,12,26,.5) !important; border: 1px solid rgb(var(--neon-v) / .16) !important; border-radius: 10px !important; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; } .gruppe-reiter .g-reiter:hover { border-color: rgb(var(--neon-v) / .34) !important; } .gruppe-reiter .g-reiter.an { background: linear-gradient(180deg, rgb(var(--glut-o) / .24), rgb(var(--glut-o) / .12)) !important; border-color: rgb(var(--glut-o) / .55) !important; color: var(--orange-hell, #ffbe86) !important; box-shadow: 0 8px 18px -8px rgb(var(--glut-o) / .5), inset 0 1px 0 var(--p-weiss-a08) !important; } .reiterleiste .reiter.aktiv { box-shadow: 0 2px 0 -1px rgb(var(--neon-c) / .55); } .einst-block, .wk-ziele, .arch-zeile, .ag-karte { background: rgba(12,10,22,.5) !important; border: 1px solid rgb(var(--neon-v) / .14) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 var(--p-weiss-a03); } .s-eintrag { border-bottom-color: rgb(var(--neon-v) / .1) !important; } .analyse-knopf, .aktion, .werkzeuge-kopf, .wz, .cc-btn, .n-knopf, .sv-tat, .db-tab, .osw-knopf { border-color: rgb(var(--neon-v) / .2) !important; transition: transform .12s ease, border-color .14s ease, box-shadow .14s ease; } .analyse-knopf:active, .aktion:active, .werkzeuge-kopf:active, .wz:active, .cc-btn:active, .n-knopf:active, .sv-tat:active { transform: scale(.985); } #seite .analyse-knopf, #seite .aktion, #seite .sz-knopf { transition: background .2s cubic-bezier(.23,1,.32,1), border-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1) !important; } @media (hover: hover) { #seite .analyse-knopf:hover, #seite .aktion:hover, #seite .sz-knopf:hover { transform: translateX(3px); } } :is(#k-system, :root) .board { background: #15121e !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 16px 34px -18px rgba(0,0,0,.6) !important; } :is(#k-system, :root) .board::before { opacity: .7 !important; } :is(#k-system, :root) .n-karte, :is(#k-system, :root) .sv-karte, :is(#k-system, :root) .db-sek { box-shadow: 0 16px 40px -22px rgba(0,0,0,.6) !important; } .dl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--linie); border-radius: 14px; background: linear-gradient(180deg, rgb(var(--neon-c) / .05), var(--p-weiss-a03)); box-shadow: inset 0 1px 0 var(--p-weiss-a06); margin-bottom: 9px; transition: border-color .16s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1); } @media (hover: hover) and (pointer: fine) { .dl-zeile:hover { border-color: rgb(var(--neon-c) / .42); transform: translateY(-1px); } } .dl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dl-info b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-btn { flex: 0 0 auto; } .dl-werkzeuge { display: flex; justify-content: flex-end; margin-bottom: 12px; } .dl-alle-weg { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, transparent); } .dl-alle-weg:hover { background: color-mix(in srgb, var(--rot) 14%, transparent) !important; } .k.k-primaer, .sperre-knopf, .pt-los-alle, button.k-primaer { box-shadow: 0 10px 24px -10px rgb(var(--glut-o) / .55), inset 0 1px 0 rgba(255,255,255,.18) !important; } html:not([data-thema]) .analyse-karte, .analyse-karte { background: linear-gradient(180deg, rgba(15,12,26,.95), rgba(6,5,13,.96)) !important; } .analyse-karte > .analyse-kopf { background: rgba(8,6,16,.92) !important; } .terminal-huelle.sichtbar { box-shadow: inset 0 0 0 1px rgb(var(--neon-v) / .22), inset 0 0 34px -16px rgb(var(--glut-v) / .6) !important; border-radius: 12px; } .kb-grp.fremd .kb { border: 1px solid rgb(var(--neon-v) / .18) !important; } .kb-grp.mein .kb { border: 1px solid rgb(var(--glut-o) / .3) !important; } .us-karte, .db-karte, .leit-karte, .sv-block, .pt-pruefblock { background: rgba(12,10,22,.5) !important; border: 1px solid rgb(var(--neon-v) / .13) !important; } .n-karte, .sv-karte, .gz-karte, .pt-projekt, .brain-block, .einst-block, .np-block, .ag-karte, .bk-projekt, .leit-feld, .fa-e, .wg-z, .db-sek, .us-zeile, .arch-zeile { background: rgba(11,9,20,.55) !important; border: 1px solid rgb(var(--neon-v) / .14) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 var(--p-weiss-a03) !important; } .db-sek-kopf { background: rgba(8,6,16,.5) !important; border-bottom: 1px solid rgb(var(--neon-c) / .12); } .db-sek-titel, .a-titel, .db-sek-koerper .dw-titel { text-shadow: 0 0 10px rgb(var(--neon-v) / .25); } .leit-wert { background: rgba(10,8,18,.55) !important; border: 1px solid rgb(var(--neon-v) / .12) !important; border-radius: 12px !important; } .leit-wert .zahl { text-shadow: 0 0 10px rgb(var(--neon-c) / .3); } .s-eintrag, .d-zeile, .fa-e, .arch-zeile { border-color: rgb(var(--neon-v) / .1) !important; } .sv-mini, .db-akt, .leit-wartung, .np-force-ab, .np-arch, .hb-tat, .br-cta { background: rgba(16,13,28,.7) !important; border: 1px solid rgb(var(--neon-v) / .22) !important; } .analyse-inhalt input:not([type=checkbox]):not([type=radio]), .analyse-inhalt select, .analyse-inhalt textarea, .sv-eingabe, .pt-eingabe { background: rgba(8,7,16,.7) !important; border: 1px solid rgb(var(--neon-v) / .18) !important; } .analyse-inhalt input:focus, .analyse-inhalt select:focus, .analyse-inhalt textarea:focus, .sv-eingabe:focus, .pt-eingabe:focus { border-color: rgb(var(--neon-c) / .5) !important; box-shadow: 0 0 0 3px rgb(var(--neon-c) / .14) !important; } :root[data-galaxy-ton="deck"] { --grund: #050609; --grund-2: #080b11; --flaeche: #0b0f16; --flaeche-2: #11161f; --flaeche-3: #1a212c; --schrift: #EEF3F8; --schrift-2: #9AA7B6; --schrift-3: #5E6C7C; --neon-v: 83 224 214; --neon-c: 83 224 214; --glut-v: 83 224 214; --glut-o: 83 224 214; --akzent: rgb(var(--neon-c)); --akzent-cyan: rgb(var(--neon-c)); --orange: rgb(var(--neon-c)); --orange-hell: #7fece4; --orange-weich: rgb(var(--neon-c) / .10); --auf-orange: #04110f; --glut: rgb(var(--neon-c) / .22); --linie: rgb(var(--neon-c) / .12); --linie-hell: rgb(var(--neon-c) / .24); --p-violett-hell-a18: rgb(var(--neon-c) / .18); --p-violett-hell-6: #cfe6ea; } html:root[data-galaxy-ton="deck"], :root[data-galaxy-ton="deck"] body { background: #050609 !important; } :root[data-galaxy-ton="deck"] #seite .analyse-knopf, :root[data-galaxy-ton="deck"] #seite .aktion, :root[data-galaxy-ton="deck"] #seite .sz-knopf, :root[data-galaxy-ton="deck"] #seite .werkzeuge-kopf, :root[data-galaxy-ton="deck"] .seite-fuss .fuss-knopf:not(.abmelden-tief) { background: linear-gradient(180deg, rgba(14,20,28,.72), rgba(8,11,16,.6)) !important; border: 1px solid rgb(var(--neon-c) / .16) !important; color: var(--schrift) !important; } @media (hover: hover) and (pointer: fine) { :root[data-galaxy-ton="deck"] #seite .analyse-knopf:hover, :root[data-galaxy-ton="deck"] #seite .aktion:hover, :root[data-galaxy-ton="deck"] #seite .sz-knopf:hover, :root[data-galaxy-ton="deck"] .seite-fuss .fuss-knopf:not(.abmelden-tief):hover { background: linear-gradient(180deg, rgb(var(--neon-c) / .14), rgba(14,20,28,.7)) !important; border-color: rgb(var(--neon-c) / .4) !important; } } :root[data-galaxy-ton="deck"] #seite .analyse-knopf.aktiv, :root[data-galaxy-ton="deck"] #seite .aktion.aktiv { background: linear-gradient(180deg, rgb(var(--neon-c) / .22), rgba(14,20,28,.6)) !important; border-color: rgb(var(--neon-c) / .5) !important; color: var(--schrift) !important; } :root[data-galaxy-ton="deck"] .buehne::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55; background-image: linear-gradient(rgb(var(--neon-c) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--neon-c) / .05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(78% 66% at 50% 42%, #000, transparent 100%); mask-image: radial-gradient(78% 66% at 50% 42%, #000, transparent 100%); } :root[data-galaxy-ton="deck"] .willkommen { gap: 0; z-index: 1; } :root[data-galaxy-ton="deck"] .willkommen .w-raute { position: relative; } :root[data-galaxy-ton="deck"] .willkommen .w-raute::after { content: ""; position: absolute; top: 50%; left: 50%; width: 218px; height: 218px; transform: translate(-50%, -50%); border: 1px solid rgb(var(--neon-c) / .22); border-radius: 50%; pointer-events: none; } :root[data-galaxy-ton="deck"] .willkommen .w-raute::before { content: ""; position: absolute; top: 50%; left: 50%; width: 182px; height: 182px; transform: translate(-50%, -50%); border: 1px dashed rgb(var(--neon-c) / .13); border-radius: 50%; pointer-events: none; } :root[data-galaxy-ton="deck"] .willkommen .w-raute .atom { filter: grayscale(1) brightness(1.35) sepia(1) hue-rotate(135deg) saturate(3.1) drop-shadow(0 0 14px rgb(var(--neon-c) / .5)); } :root[data-galaxy-ton="deck"] .willkommen h1 { margin-top: 28px; text-transform: uppercase; letter-spacing: .03em !important; color: #eef3f8 !important; font-weight: 800 !important; text-shadow: 0 0 22px rgb(var(--neon-c) / .22) !important; } :root[data-galaxy-ton="deck"] .willkommen h1::after { content: ""; display: block; width: 54px; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, rgb(var(--neon-c)), transparent); } :root[data-galaxy-ton="deck"] .willkommen p { margin-top: 16px !important; font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace !important; font-size: 11.5px !important; letter-spacing: .09em; text-transform: uppercase; color: #6d7b8a !important; line-height: 1.9 !important; } :root[data-galaxy-ton="deck"] .w-tipps { font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; letter-spacing: .04em; opacity: .9; } :root[data-galaxy-ton="deck"] .g-reiter.an, :root[data-galaxy-ton="deck"] .brain-tab.an { color: var(--schrift) !important; border-color: rgb(var(--neon-c) / .45) !important; box-shadow: inset 0 -2px 0 rgb(var(--neon-c)) !important; } :root[data-galaxy-ton="deck"] .willkommen h1, :root[data-galaxy-ton="deck"] .marke-text, :root[data-galaxy-ton="deck"] .sperre-karte h1, :root[data-galaxy-ton="deck"] .boot-marke { background: linear-gradient(100deg, #eaf6f5 0%, #bfeee9 55%, rgb(var(--neon-c)) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: drop-shadow(0 0 14px rgb(var(--neon-c) / .4)) !important; } :root[data-galaxy-ton="deck"] #seite .klein.abschnitt, :root[data-galaxy-ton="deck"] #seite .wahl-block .klein, :root[data-galaxy-ton="deck"] .einst-titel { color: var(--schrift-2) !important; } :root[data-galaxy-ton="deck"] #seite .klein.abschnitt::after, :root[data-galaxy-ton="deck"] #seite .klein.abschnitt::before { color: rgb(var(--neon-c) / .6) !important; } :root[data-galaxy-ton="deck"] { --p-pink-a08: rgb(var(--neon-c) / .08); --p-pink-a12: rgb(var(--neon-c) / .12); --p-pink-a16: rgb(var(--neon-c) / .16); --p-pink-a18: rgb(var(--neon-c) / .18); --p-pink-hell-a55: rgb(var(--neon-c) / .55); --p-violett-2-a16: rgb(var(--neon-c) / .16); --p-violett-2-a22: rgb(var(--neon-c) / .22); --p-violett-2-a60: rgb(var(--neon-c) / .6); --p-violett-a06: rgb(var(--neon-c) / .06); --p-violett-a10: rgb(var(--neon-c) / .1); --p-violett-a12: rgb(var(--neon-c) / .12); --p-violett-a14: rgb(var(--neon-c) / .14); --p-violett-a16: rgb(var(--neon-c) / .16); --p-violett-a18: rgb(var(--neon-c) / .18); --p-violett-a20: rgb(var(--neon-c) / .2); --p-violett-a22: rgb(var(--neon-c) / .22); --p-violett-a30: rgb(var(--neon-c) / .3); --p-violett-a50: rgb(var(--neon-c) / .5); --p-violett-a60: rgb(var(--neon-c) / .6); --p-violett-a70: rgb(var(--neon-c) / .7); --p-violett-hell-a10: rgb(var(--neon-c) / .1); --p-violett-hell-a14: rgb(var(--neon-c) / .14); --p-violett-hell-a18: rgb(var(--neon-c) / .18); --p-violett-hell-a20: rgb(var(--neon-c) / .2); --p-violett-hell-a55: rgb(var(--neon-c) / .55); --p-violett-hell-a62: rgb(var(--neon-c) / .62); --p-violett-hell-a70: rgb(var(--neon-c) / .7); --p-violett-hell: #8fd6ce; --p-violett-hell-2: #8fd6ce; --p-violett-hell-3: #8fd6ce; --p-violett-hell-4: #8fd6ce; --p-violett-hell-5: #8fd6ce; --p-violett-hell-7: #8fd6ce; --p-violett: #86b7b1; --p-violett-2: #86b7b1; --p-violett-3: #86b7b1; --p-violett-4: #86b7b1; --p-pink: #8fd6ce; --p-pink-2: #8fd6ce; } :root[data-galaxy-ton="deck"] .sperre-raute .atom, :root[data-galaxy-ton="deck"] .boot-atom-svg, :root[data-galaxy-ton="deck"] .marke-atom { filter: grayscale(1) brightness(1.35) sepia(1) hue-rotate(135deg) saturate(3.1) drop-shadow(0 0 14px rgb(var(--neon-c) / .5)) !important; } :root[data-galaxy-ton="deck"] .sperre-karte .sperre-raute { background: radial-gradient(circle at 50% 46%, rgb(var(--neon-c) / .18), transparent 60%) !important; } :root[data-galaxy-ton="deck"] .sperre-karte { box-shadow: 0 34px 100px var(--p-schwarz-a55), 0 0 0 1px rgb(var(--neon-c) / .22), 0 0 90px -26px rgb(var(--neon-c) / .45), inset 0 1px 0 var(--p-weiss-a07) !important; } :root[data-galaxy-ton="deck"] .sperre-karte h1 { text-shadow: 0 0 26px rgb(var(--neon-c) / .3) !important; } :root[data-galaxy-ton="deck"] .sperre-karte::before { background: conic-gradient(from var(--deg,0deg), rgb(var(--neon-c) / .9), rgb(var(--neon-c) / .28), rgb(var(--neon-c) / .85), rgb(var(--neon-c) / .28), rgb(var(--neon-c) / .9)) !important; } :root[data-galaxy-ton="deck"] .e-knopf.haupt, :root[data-galaxy-ton="deck"] .sperre-knopf, :root[data-galaxy-ton="deck"] .s-form button { background: linear-gradient(135deg, rgb(var(--neon-c) / .92), rgb(var(--neon-c) / .55)) !important; color: #04110f !important; border: 1px solid rgb(var(--neon-c) / .6) !important; } :root[data-galaxy-ton="deck"] #seite .analyse-knopf, :root[data-galaxy-ton="deck"] #seite .aktion, :root[data-galaxy-ton="deck"] #seite .sz-knopf, :root[data-galaxy-ton="deck"] #seite .werkzeuge-kopf { box-shadow: inset 2px 0 0 rgb(var(--neon-c) / .55) !important; } :root[data-galaxy-ton="deck"] #seite .analyse-knopf.aktiv, :root[data-galaxy-ton="deck"] #seite .aktion.aktiv { box-shadow: inset 3px 0 0 rgb(var(--neon-c)), 0 0 16px rgb(var(--neon-c) / .18) !important; } :root[data-galaxy-ton="deck"] .analyse-karte::before { background: linear-gradient(90deg, transparent, rgb(var(--neon-c) / .7), rgb(var(--neon-c) / .3), transparent) !important; } :root[data-galaxy-ton="deck"] .analyse-karte { border-color: rgb(var(--neon-c) / .16) !important; } :root[data-galaxy-ton="deck"] .g-reiter.an, :root[data-galaxy-ton="deck"] .db-tab.an, :root[data-galaxy-ton="deck"] .us-chip.an, :root[data-galaxy-ton="deck"] .us-rolle.an, :root[data-galaxy-ton="deck"] .us-zeile.an, :root[data-galaxy-ton="deck"] .brain-tab.an { background: linear-gradient(120deg, rgb(var(--neon-c) / .24), rgb(var(--neon-c) / .1)) !important; border-color: rgb(var(--neon-c) / .5) !important; color: var(--schrift) !important; } :root[data-galaxy-ton="deck"] .n-knopf:hover:not(:disabled), :root[data-galaxy-ton="deck"] .brain-tab { border-color: rgb(var(--neon-c) / .3) !important; } :root[data-galaxy-ton="deck"] .kb-grp.mein .kb { background: linear-gradient(135deg, rgb(var(--neon-c) / .2), rgb(var(--neon-c) / .08)) !important; border: 1px solid rgb(var(--neon-c) / .3) !important; } :root[data-galaxy-ton="deck"] { --k-an-grund: rgb(var(--neon-c) / .22); --k-an-rand: rgb(var(--neon-c) / .55); --k-primaer-glow: rgb(var(--neon-c) / .2); --k-sek-hover: rgb(var(--neon-c) / .12); } :root[data-galaxy-ton="deck"] { --gx-verlauf: linear-gradient(135deg, rgb(var(--neon-c)) 0%, rgb(var(--neon-c) / .62) 100%); --k-primaer-text: #04110f; } :root[data-galaxy-ton="deck"] .us-primaer, :root[data-galaxy-ton="deck"] .sv-tat:not(.zweit), :root[data-galaxy-ton="deck"] .n-knopf.haupt, :root[data-galaxy-ton="deck"] .e-knopf.haupt, :root[data-galaxy-ton="deck"] .cc-start, :root[data-galaxy-ton="deck"] .bk-jetzt { color: #04110f !important; } html:root[data-galaxy-ton="mono"] body { background: var(--grund) !important; } :root[data-galaxy-ton="mono"] .buehne::before, :root[data-galaxy-ton="mono"] .buehne::after, :root[data-galaxy-ton="mono"] .wolke { filter: grayscale(1) brightness(1.1) !important; } :root[data-galaxy-ton="mono"] .sperre::before { filter: grayscale(1) !important; } :root[data-galaxy-ton="mono"] { --p-violett-a30: rgb(var(--neon-c) / .3); --p-violett-a16: rgb(var(--neon-c) / .16); --p-violett-a60: rgb(var(--neon-c) / .6); --p-violett-a14: rgb(var(--neon-c) / .14); --p-violett-a18: rgb(var(--neon-c) / .18); --p-violett-2-a60: rgb(var(--neon-c) / .6); --p-pink-a18: rgb(var(--neon-c) / .18); --p-pink-a16: rgb(var(--neon-c) / .16); --p-pink-a08: rgb(var(--neon-c) / .08); --p-pink-hell-a55: rgb(var(--neon-c) / .55); --p-violett-hell: #e6e6ea; --p-violett-hell-6: #e6e6ea; --p-violett-hell-a18: rgb(var(--neon-c) / .18); --k-an-grund: rgb(var(--neon-c) / .2); --k-an-rand: rgb(var(--neon-c) / .5); --k-primaer-glow: rgb(var(--neon-c) / .18); --k-sek-hover: rgb(var(--neon-c) / .1); --gx-verlauf: linear-gradient(135deg, var(--schrift) 0%, var(--schrift-2) 100%); } :root[data-galaxy-ton="mono"] .willkommen h1, :root[data-galaxy-ton="mono"] .marke-text, :root[data-galaxy-ton="mono"] .sperre-karte h1, :root[data-galaxy-ton="mono"] .boot-marke { background: linear-gradient(100deg, var(--schrift), var(--schrift-2)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: none !important; text-shadow: none !important; } :root[data-galaxy-ton="mono"] #seite .analyse-knopf, :root[data-galaxy-ton="mono"] #seite .aktion, :root[data-galaxy-ton="mono"] #seite .sz-knopf, :root[data-galaxy-ton="mono"] #seite .werkzeuge-kopf, :root[data-galaxy-ton="mono"] .seite-fuss .fuss-knopf:not(.abmelden-tief) { background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche)) !important; border: 1px solid rgb(var(--neon-c) / .14) !important; color: var(--schrift) !important; box-shadow: inset 2px 0 0 rgb(var(--neon-c) / .4) !important; } :root[data-galaxy-ton="mono"] #seite .analyse-knopf.aktiv, :root[data-galaxy-ton="mono"] #seite .aktion.aktiv { background: linear-gradient(180deg, rgb(var(--neon-c) / .18), var(--flaeche)) !important; border-color: rgb(var(--neon-c) / .5) !important; color: var(--schrift) !important; } :root[data-galaxy-ton="mono"] .g-reiter.an, :root[data-galaxy-ton="mono"] .db-tab.an, :root[data-galaxy-ton="mono"] .brain-tab.an, :root[data-galaxy-ton="mono"] .us-chip.an { background: linear-gradient(120deg, rgb(var(--neon-c) / .22), rgb(var(--neon-c) / .08)) !important; border-color: rgb(var(--neon-c) / .5) !important; color: var(--schrift) !important; } :root[data-galaxy-ton="mono"] .analyse-karte::before { background: linear-gradient(90deg, transparent, rgb(var(--neon-c) / .6), transparent) !important; } :root[data-galaxy-ton="mono"] .analyse-karte { border-color: rgb(var(--neon-c) / .14) !important; } :root[data-galaxy-ton="mono"] .sperre-karte { box-shadow: 0 34px 100px var(--p-schwarz-a55), 0 0 0 1px rgb(var(--neon-c) / .2), 0 0 80px -30px rgb(var(--neon-c) / .3), inset 0 1px 0 var(--p-weiss-a07) !important; } :root[data-galaxy-ton="mono"] .sperre-karte::before { background: conic-gradient(from var(--deg,0deg), rgb(var(--neon-c) / .7), rgb(var(--neon-c) / .15), rgb(var(--neon-c) / .7)) !important; } :root[data-galaxy-ton="mono"] .sperre-karte .sperre-raute { background: radial-gradient(circle at 50% 46%, rgb(var(--neon-c) / .14), transparent 60%) !important; } :root[data-galaxy-ton="mono"] .e-knopf.haupt, :root[data-galaxy-ton="mono"] .sperre-knopf { color: var(--grund) !important; } :root[data-galaxy-ton="mono"] .rahmen::before, :root[data-galaxy-ton="mono"] .rahmen::after { filter: grayscale(1) brightness(.85) !important; } :root[data-galaxy-ton="mono"] .reiterleiste .reiter, :root[data-galaxy-ton="mono"] .reiterleiste .reiter-kanal { background: var(--flaeche-2) !important; border-color: rgb(var(--neon-c) / .14) !important; color: var(--schrift-2) !important; } :root[data-galaxy-ton="mono"] .reiterleiste .reiter.aktiv, :root[data-galaxy-ton="mono"] .reiterleiste .reiter-kanal.aktiv { background: var(--flaeche-3) !important; color: var(--schrift) !important; border-top-color: rgb(var(--neon-c) / .5) !important; } :root[data-galaxy-ton="mono"] #seite .wahl-huelle select, :root[data-galaxy-ton="mono"] #seite #projektwahl { color: var(--schrift) !important; border-color: rgb(var(--neon-c) / .22) !important; background: var(--flaeche-2) !important; } :root[data-galaxy-ton="mono"]:not([data-thema]):not([data-galaxy="aus"]) .rahmen { background: var(--grund) !important; } #seite .marke { padding: 18px 12px 13px; gap: 7px; position: relative; } #seite .marke::before { content: ""; position: absolute; top: 8px; left: 50%; width: 84px; height: 84px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgb(var(--neon-c) / .18), transparent 68%); } #seite .marke-atom { width: 58px !important; height: 58px !important; margin: 0 auto 1px; position: relative; z-index: 1; } #seite .marke-text { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 5px !important; position: relative; z-index: 1; } .board { box-shadow: 0 6px 20px -8px var(--p-schwarz-a55), inset 0 1px 0 var(--p-weiss-a05); } .board:hover, .board:focus-visible { box-shadow: 0 16px 38px -10px var(--p-schwarz-a55), inset 0 1px 0 var(--p-weiss-a07) !important; } .analyse-karte { box-shadow: 0 8px 26px -12px var(--p-schwarz-a55), inset 0 1px 0 var(--p-weiss-a05); } .analyse.offen { box-shadow: 0 24px 64px -22px var(--p-schwarz-a55); } #seite .analyse-knopf, #seite .sz-knopf, #seite .aktion { box-shadow: 0 2px 6px -3px var(--p-schwarz-a50), inset 0 1px 0 var(--p-weiss-a05); } .marke-text, .willkommen h1, .sperre-karte h1, .boot-marke, .analyse-kopf > span:first-child, .board-name, .db-sek-kopf > span, .hb-score, .leit-wert b, .st-name { font-family: "Space Grotesk", Inter, system-ui, -apple-system, sans-serif; } :root[data-galaxy-ton="deck"] .reiter.reiter-kanal .rk-sym { color: rgb(var(--neon-c) / .85) !important; } :root[data-galaxy-ton="deck"] #monGruppe .lw-tabelle th, :root[data-galaxy-ton="mono"] #monGruppe .lw-tabelle th { color: var(--schrift-2) !important; } :root[data-galaxy-ton="deck"]:not([data-thema]):not([data-galaxy="aus"]) .rahmen { background: var(--grund) !important; } :root[data-galaxy-ton="deck"] .rahmen::before, :root[data-galaxy-ton="deck"] .rahmen::after, :root[data-galaxy-ton="deck"] .sperre::before, :root[data-galaxy-ton="deck"] .sperre::after, :root[data-galaxy-ton="deck"] .boot::before, :root[data-galaxy-ton="deck"] .boot::after, :root[data-galaxy-ton="mono"] .rahmen::before, :root[data-galaxy-ton="mono"] .rahmen::after, :root[data-galaxy-ton="mono"] .sperre::before, :root[data-galaxy-ton="mono"] .sperre::after, :root[data-galaxy-ton="mono"] .boot::before, :root[data-galaxy-ton="mono"] .boot::after { filter: grayscale(1) !important; } :root[data-galaxy-ton="deck"] .sperre { background: radial-gradient(72% 52% at 50% 40%, rgb(var(--neon-c) / .08), transparent 62%), var(--grund) !important; } :root[data-galaxy-ton="deck"] .boot { background: radial-gradient(72% 52% at 50% 40%, rgb(var(--neon-c) / .08), transparent 62%), var(--grund) !important; } :root[data-galaxy-ton="mono"] .sperre, :root[data-galaxy-ton="mono"] .boot { background: var(--grund) !important; } :root[data-galaxy-ton="deck"] .wolke, :root[data-galaxy-ton="deck"] .wolke::before, :root[data-galaxy-ton="deck"] .wolke::after, :root[data-galaxy-ton="mono"] .wolke::before, :root[data-galaxy-ton="mono"] .wolke::after { filter: grayscale(1) brightness(.5) !important; } :root[data-galaxy-ton="deck"] .s-wer, :root[data-galaxy-ton="mono"] .s-wer { color: var(--schrift-2) !important; } :root[data-galaxy-ton="mono"] .pt-sent { color: var(--schrift-2) !important; background: rgb(var(--neon-c) / .1) !important; } :root[data-galaxy-ton="deck"] .au-user-konto, :root[data-galaxy-ton="mono"] .au-user-konto { color: var(--schrift-2) !important; } :root[data-galaxy-ton="deck"] .kb-todo, :root[data-galaxy-ton="mono"] .kb-todo { background: rgb(var(--neon-c) / .14) !important; color: var(--schrift) !important; } :root[data-galaxy-ton="deck"] :is(#kanal,#tlP-kanal) .ks-teil, :root[data-galaxy-ton="mono"] :is(#kanal,#tlP-kanal) .ks-teil, :root[data-galaxy-ton="deck"] .kanal-ziel, :root[data-galaxy-ton="mono"] .kanal-ziel { color: var(--schrift-2) !important; } :root[data-galaxy-ton="deck"] { --p-violett-hell-a62: rgb(var(--neon-c) / .62); } :root[data-galaxy-ton="mono"] { --p-violett-hell-a62: rgb(var(--neon-c) / .62); } :root[data-galaxy-ton="deck"] { --p-violett-hell-2: #8fd6ce; --p-violett-hell-3: #8fd6ce; --p-violett-hell-4: #8fd6ce; --p-violett-hell-5: #8fd6ce; --p-violett-hell-7: #8fd6ce; } :root[data-galaxy-ton="mono"] { --p-violett-hell-2: #e6e6ea; --p-violett-hell-3: #e6e6ea; --p-violett-hell-4: #e6e6ea; --p-violett-hell-5: #e6e6ea; --p-violett-hell-7: #e6e6ea; } :root[data-galaxy-ton="deck"] .boot-partikel, :root[data-galaxy-ton="deck"] .boot-partikel::before, :root[data-galaxy-ton="deck"] .boot-partikel::after, :root[data-galaxy-ton="deck"] .boot-atom::before, :root[data-galaxy-ton="mono"] .boot-partikel, :root[data-galaxy-ton="mono"] .boot-partikel::before, :root[data-galaxy-ton="mono"] .boot-partikel::after, :root[data-galaxy-ton="mono"] .boot-atom::before { filter: grayscale(1) !important; } :root[data-galaxy-ton="deck"] .analyse .sv-block > summary, :root[data-galaxy-ton="mono"] .analyse .sv-block > summary { color: var(--schrift-2) !important; } #menueListe .klein.abschnitt.kat-kopf { padding: 12px 14px !important; margin: 9px 0 5px !important; border-radius: 12px; background: linear-gradient(180deg, var(--p-weiss-a04), transparent); border: 1px solid var(--linie); cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease; box-shadow: 0 2px 8px -5px var(--p-schwarz-a50), inset 0 1px 0 var(--p-weiss-a05); } @media (hover: hover) { #menueListe .klein.abschnitt.kat-kopf:hover { border-color: rgb(var(--neon-c) / .42); background: rgb(var(--neon-c) / .07); } } #menueListe .klein.abschnitt.kat-kopf:active { transform: scale(.985); } #menueListe .klein.abschnitt.kat-kopf::after { color: rgb(var(--neon-c) / .75) !important; font-size: 13px !important; } #menueListe .klein.abschnitt.kat-kopf.kat-zu { background: transparent; } :root[data-galaxy-ton="deck"] .wz .wz-zeichen, :root[data-galaxy-ton="mono"] .wz .wz-zeichen { color: rgb(var(--neon-c) / .8) !important; } :root[data-galaxy-ton="deck"] .einst-titel, :root[data-galaxy-ton="mono"] .einst-titel { color: var(--schrift) !important; } :root[data-galaxy-ton="deck"] .wz, :root[data-galaxy-ton="mono"] .wz { background: linear-gradient(120deg, rgb(var(--neon-c) / .1), rgb(var(--neon-c) / .03)) !important; border-color: rgb(var(--neon-c) / .18) !important; } :root[data-galaxy-ton="deck"] .wz:hover, :root[data-galaxy-ton="mono"] .wz:hover { background: linear-gradient(120deg, rgb(var(--neon-c) / .2), rgb(var(--neon-c) / .07)) !important; border-color: rgb(var(--neon-c) / .42) !important; } :root[data-galaxy-ton="deck"] .werkzeuge .wz-diff.an, :root[data-galaxy-ton="mono"] .werkzeuge .wz-diff.an { background: linear-gradient(120deg, rgb(var(--neon-c) / .26), rgb(var(--neon-c) / .1)) !important; border-color: rgb(var(--neon-c) / .55) !important; } :root #seite :is(.analyse-knopf, .aktion, .sz-knopf) { justify-content: center !important; text-align: center !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(180deg, rgb(var(--neon-c) / .06), rgb(var(--neon-c) / .015)) !important; box-shadow: inset 0 1px 0 rgb(var(--neon-c) / .10), inset 0 0 0 1px rgb(var(--neon-c) / .09), 0 1px 2px var(--p-schwarz-a25) !important; transition: background .18s ease-out, box-shadow .18s ease-out, transform .12s ease-out !important; } :root #seite .pt-link { justify-content: center !important; text-align: center !important; } :root #seite :is(.wahl-huelle select, #projektwahl) { text-align: center !important; text-align-last: center !important; } :root #seite :is(.analyse-knopf, .aktion, .sz-knopf)::before { position: static !important; left: auto !important; top: auto !important; margin: 0 9px 0 0 !important; width: 7px !important; height: 7px !important; border: 0 !important; border-radius: 1px !important; transform: rotate(45deg); background: rgb(var(--neon-c) / .62) !important; box-shadow: 0 0 7px rgb(var(--neon-c) / .5); opacity: .85; transition: all .18s ease-out; } :root #seite :is(.analyse-knopf:hover, .analyse-knopf.aktiv, .sz-knopf:hover, .aktion:hover)::before { background: rgb(var(--neon-c)) !important; box-shadow: 0 0 10px rgb(var(--neon-c) / .85); opacity: 1; } :root #seite :is(.analyse-knopf, .sz-knopf, .aktion):hover { background: linear-gradient(180deg, rgb(var(--neon-c) / .14), rgb(var(--neon-c) / .04)) !important; box-shadow: inset 0 0 0 1px rgb(var(--neon-c) / .38), inset 0 1px 0 rgb(var(--neon-c) / .22), 0 6px 18px -8px rgb(var(--neon-c) / .45) !important; transform: translateY(-1px); } :root #seite :is(.analyse-knopf, .sz-knopf, .aktion):active { transform: translateY(0) scale(.99); } :root #seite .analyse-knopf.aktiv { background: linear-gradient(180deg, rgb(var(--neon-c) / .22), rgb(var(--neon-c) / .07)) !important; box-shadow: inset 0 0 0 1px rgb(var(--neon-c) / .55), inset 0 1px 0 rgb(var(--neon-c) / .3), 0 0 20px -5px rgb(var(--neon-c) / .5) !important; } :root #seite :is(.klein.abschnitt, .wahl-block label.klein) { display: flex !important; align-items: center; justify-content: center; gap: 12px; text-align: center !important; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--schrift-3); opacity: .85; text-transform: uppercase; padding: 16px 2px 8px !important; } :root #seite :is(.klein.abschnitt, .wahl-block label.klein)::before, :root #seite :is(.klein.abschnitt, .wahl-block label.klein)::after { content: "" !important; float: none !important; flex: 1; height: 1px; } :root #seite :is(.klein.abschnitt, .wahl-block label.klein)::before { background: linear-gradient(90deg, transparent, rgb(var(--neon-c) / .4)); } :root #seite :is(.klein.abschnitt, .wahl-block label.klein)::after { background: linear-gradient(90deg, rgb(var(--neon-c) / .4), transparent); } :root #seite .marke { margin-bottom: 6px; } :root[data-galaxy-ton="orange"] { --neon-c: 255 184 107; --neon-v: 255 184 107; --glut-v: 255 184 107; --glut-o: 245 145 43; --p-violett-hell-2: var(--akzent); --p-violett-hell: var(--schrift-2); --p-violett-hell-3: var(--schrift-2); --p-violett-hell-4: var(--schrift-2); --p-violett-hell-5: var(--schrift-2); --p-violett-hell-6: var(--schrift-2); --p-violett-hell-7: var(--schrift-2); --p-violett: var(--schrift-2); --p-violett-2: var(--schrift-2); --p-violett-3: var(--schrift-2); --p-violett-4: var(--schrift-2); --p-pink-hell: var(--schrift-2); --p-pink-hell-2: var(--schrift-2); --p-pink: var(--schrift-2); --p-pink-2: var(--schrift-2); } :root[data-galaxy-ton="violett"] { --neon-c: 140 120 255; --neon-v: 140 120 255; --glut-v: 140 120 255; --glut-o: 140 120 255; --akzent: var(--p-violett-hell-2); --akzent-cyan: var(--p-violett-hell-2); --orange: var(--p-violett-hell-2); --orange-hell: var(--p-violett-hell); --auf-orange: var(--grund); --p-cyan: var(--p-violett-hell-2); --p-blau: var(--p-violett-hell-2); --p-blau-hell: var(--p-violett-hell-2); --p-blau-hell-2: var(--p-violett-hell-2); } :root #seite :is(.analyse-knopf, .aktion, .sz-knopf) { box-shadow: 0 3px 12px -5px var(--p-schwarz-a50), inset 0 1px 0 var(--p-weiss-a08) !important; transition: transform .14s cubic-bezier(.23,1,.32,1), box-shadow .16s ease-out, border-color .16s ease-out !important; } @media (hover: hover) and (pointer: fine) { :root #seite :is(.analyse-knopf, .aktion, .sz-knopf):hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px -6px var(--p-schwarz-a50), inset 0 1px 0 var(--p-weiss-a10), 0 0 0 1px rgb(var(--neon-c) / .18) !important; } } :root #seite :is(.analyse-knopf, .aktion, .sz-knopf):active { transform: translateY(1px) !important; box-shadow: inset 0 2px 6px var(--p-schwarz-a50) !important; } :root[data-galaxy-ton="mono"] #seite, :root[data-galaxy-ton="mono"] .seite { background: var(--grund) !important; box-shadow: 1px 0 0 var(--p-weiss-a06) !important; } @media (max-width: 400px) { #profil .analyse-kopf { flex-wrap: wrap; row-gap: 8px; } #profil .analyse-kopf > span { flex-wrap: wrap !important; min-width: 0; } } .arch-zeile, .tele-proj, .tele-proj h4, .einst-titel, .bus-regel, .bus-block, .bus-regeln, .gruppe-koerper .g-pane.an { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .bus-regel { flex-wrap: wrap; } :root:is([data-geraet="laptop"], [data-geraet="desktop"]) #einstellungen .analyse-inhalt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; gap: 14px; align-items: start; } :root:is([data-geraet="laptop"], [data-geraet="desktop"]) #einstellungen .analyse-inhalt > .einst-block { max-width: none; margin: 0 !important; grid-column: 2; } :root:is([data-geraet="laptop"], [data-geraet="desktop"]) #einstellungen .analyse-inhalt > .einst-block:first-child { grid-column: 1; grid-row: 1 / -1; } #einstellungen #menueListe .klein.abschnitt.kat-kopf { padding: 12px 14px !important; margin: 9px 0 5px !important; } #einstellungen .einst-titel::after { content: "▾"; color: var(--schrift-2); font-size: 11px; font-weight: 700; transform: none; } #einstellungen .einst-block.zu .einst-titel::after { content: "▸"; transform: none !important; } #einstellungen .einst-block.zu .einst-titel { margin-bottom: 0 !important; } #einstellungen .einst-block.zu { padding-bottom: 16px !important; } .s-titel, .s-detail { display: block; } input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--akzent, var(--orange)); }