/* ================================================================== * Overwatch — Cockpit * * Zweite Stilschicht. Liegt bewusst NACH app.css und definiert die * Oberfläche neu, ohne die gewachsenen Klassen der älteren Seiten * (Prüfstand, Akten, Einstellungen) zu zerlegen — die erben nur die * neue Farbwelt und Typografie. * * Leitbild: ein Kontrollraum, kein Formularhaufen. Ruhige, fast * schwarze Fläche; Information sitzt auf schwebenden Glasplatten; * die einzige laute Farbe ist das Prüfgelb aus dem Zeichen. * ================================================================== */ :root { --nacht: #080B10; --nacht-2: #0C1118; --platte: #121924; --platte-2: #172232; --kante: rgba(255,255,255,.07); --kante-hell: rgba(255,255,255,.14); --schrift: #EAF0F7; --schrift-matt: #93A6BB; --schrift-leis: #5D7186; --signal: #F5C542; --gut: #56D9A3; --warn: #F5C542; --schlimm: #FF7062; --kuehl: #6BA4E8; --r-gross: 18px; --r-mittel: 12px; --r-klein: 8px; --schatten: 0 18px 44px rgba(0,0,0,.45); --leiste: 76px; /* Geräteränder (Dynamic Island, Rundungen, Home-Balken). Als installierte App läuft die Seite unter die Statusleiste – ohne diese Abstände sitzt die Überschrift hinter der Insel. Im Desktop-Browser sind sie 0. */ --sicher-oben: env(safe-area-inset-top, 0px); --sicher-unten: env(safe-area-inset-bottom, 0px); --sicher-links: env(safe-area-inset-left, 0px); --sicher-rechts: env(safe-area-inset-right, 0px); } @media (min-width: 1400px) { :root { --leiste: 218px; } } html { background: var(--nacht); } /* Seite füllt immer die volle Höhe, die Fußzeile klebt unten. Sonst hängt sie bei kurzen Seiten (leere Akten) mitten im Bild. */ body { min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(1100px 620px at 78% -12%, rgba(245,197,66,.055), transparent 60%), radial-gradient(900px 520px at 8% 108%, rgba(107,164,232,.05), transparent 62%), var(--nacht); color: var(--schrift); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; padding: 0; margin: 0; } /* ---------- Seitenleiste statt Knopfreihe ---------- */ .ck-leiste { position: fixed; inset: 0 auto 0 0; width: var(--leiste); z-index: 40; display: flex; flex-direction: column; gap: 4px; padding: calc(18px + var(--sicher-oben)) 12px 18px calc(12px + var(--sicher-links)); box-sizing: border-box; background: linear-gradient(180deg, rgba(18,25,36,.96), rgba(8,11,16,.96)); border-right: 1px solid var(--kante); backdrop-filter: blur(14px); } .ck-marke { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: var(--schrift); text-decoration: none; } .ck-marke svg { width: 26px; height: 15px; flex: none; } .ck-marke svg rect { fill: var(--signal); } .ck-marke svg rect.dim { fill: #3C566E; } .ck-marke b { font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.2px; font-weight: 600; } .ck-nav { display: flex; flex-direction: column; gap: 3px; } .ck-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-mittel); color: var(--schrift-matt); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .14s ease, color .14s ease; position: relative; } .ck-nav a:hover { background: rgba(255,255,255,.045); color: var(--schrift); } .ck-nav a.an { background: rgba(245,197,66,.11); color: var(--signal); } .ck-nav a.an::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--signal); } .ck-nav i { width: 18px; height: 18px; flex: none; display: block; } .ck-nav i svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ck-nav span { white-space: nowrap; } .ck-nav em { margin-left: auto; font-style: normal; font-size: 11px; font-family: "IBM Plex Mono", monospace; background: var(--schlimm); color: #14181D; border-radius: 20px; padding: 1px 7px; font-weight: 600; } .ck-leiste-fuss { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 2px; border-top: 1px solid var(--kante); } /* Der Aufgabenblock schiebt sich nach unten; fehlt er, übernimmt das der Fuß. */ .ck-nav { margin-bottom: auto; } .ck-wer { font-size: 12px; color: var(--schrift-leis); font-family: "IBM Plex Mono", monospace; overflow: hidden; text-overflow: ellipsis; } .ck-ab { color: var(--schrift-matt); font-size: 13px; text-decoration: none; } .ck-ab:hover { color: var(--schlimm); } @media (max-width: 1399px) { .ck-nav a { justify-content: center; padding: 12px 0; } .ck-nav span, .ck-marke b, .ck-wer { display: none; } .ck-marke { justify-content: center; padding-left: 0; padding-right: 0; } .ck-nav em { position: absolute; top: 4px; right: 8px; margin: 0; } .ck-leiste-fuss { align-items: center; } } /* Telefon: Leiste wandert nach unten */ @media (max-width: 860px) { :root { --leiste: 0px; } .ck-leiste { inset: auto 0 0 0; width: auto; height: auto; flex-direction: row; align-items: center; padding: 6px calc(8px + var(--sicher-rechts)) calc(6px + var(--sicher-unten)) calc(8px + var(--sicher-links)); border-right: none; border-top: 1px solid var(--kante); } .ck-marke, .ck-leiste-fuss { display: none; } .ck-nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 0; } .ck-nav a { flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10px; } .ck-nav a.an::before { display: none; } .ck-nav a.an { background: transparent; } .ck-nav span { display: block; font-size: 10px; letter-spacing: .01em; } .ck-nav em { position: absolute; top: 2px; right: 22%; } } /* ---------- Bühne ---------- */ .ck-buehne, .ck-hat-leiste .ow-wrap, .ck-hat-leiste .ow-main, .ow-login { flex: 1 0 auto; } .ow-fuss { margin-top: auto; } .ck-buehne { margin-left: var(--leiste); padding: calc(30px + var(--sicher-oben)) calc(32px + var(--sicher-rechts)) 60px calc(32px + var(--sicher-links)); max-width: 1560px; box-sizing: border-box; } @media (max-width: 860px) { .ck-buehne { padding: calc(16px + var(--sicher-oben)) calc(14px + var(--sicher-rechts)) calc(96px + var(--sicher-unten)) calc(14px + var(--sicher-links)); } } .ck-kopf { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .ck-kopf h1 { font-family: "Space Grotesk", sans-serif; font-size: 30px; margin: 0; letter-spacing: -.6px; font-weight: 600; } .ck-kopf p { margin: 4px 0 0; color: var(--schrift-matt); font-size: 13.5px; } .ck-kopf-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- Knöpfe ---------- */ .ck-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--kante-hell); background: rgba(255,255,255,.05); color: var(--schrift); font-size: 13.5px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .13s ease, border-color .13s ease, transform .08s ease; } .ck-knopf:hover { background: rgba(255,255,255,.09); border-color: var(--kante-hell); } .ck-knopf:active { transform: translateY(1px); } .ck-knopf.haupt { background: var(--signal); border-color: var(--signal); color: #131722; font-weight: 600; } .ck-knopf.haupt:hover { background: #FFD65C; } .ck-knopf.stumm { background: transparent; color: var(--schrift-matt); } .ck-knopf.gefahr:hover { border-color: var(--schlimm); color: var(--schlimm); } .ck-knopf.klein { padding: 6px 11px; font-size: 12.5px; } .ck-knopf[disabled] { opacity: .45; pointer-events: none; } .ck-knopf svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ck-knopf.laedt { position: relative; color: transparent !important; } .ck-knopf.laedt::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--schrift); border-radius: 50%; animation: ck-dreh .6s linear infinite; } @keyframes ck-dreh { to { transform: rotate(360deg); } } :where(.ck-knopf, .ck-nav a, .ck-kachel, .ck-zeile):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* ---------- Platten ---------- */ .ck-platte { background: linear-gradient(180deg, var(--platte), var(--nacht-2)); border: 1px solid var(--kante); border-radius: var(--r-gross); padding: 20px 22px; box-shadow: var(--schatten); } .ck-platte + .ck-platte { margin-top: 16px; } .ck-platte-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .ck-platte-kopf h2 { font-family: "Space Grotesk", sans-serif; font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -.2px; } .ck-platte-kopf .ck-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ck-notiz { color: var(--schrift-leis); font-size: 12.5px; } /* ---------- Bühne oben: Lage + Statusband (das Kennzeichen der Seite) ---------- */ .ck-lage { position: relative; overflow: hidden; border: 1px solid var(--kante); border-radius: var(--r-gross); background: linear-gradient(135deg, rgba(18,25,36,.95), rgba(8,11,16,.95)); padding: 32px 30px 26px; margin-bottom: 16px; box-shadow: var(--schatten); } .ck-lage::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(245,197,66,.14), transparent 62%); pointer-events: none; } .ck-lage.gut::after { background: radial-gradient(circle, rgba(86,217,163,.13), transparent 62%); } .ck-lage.warn::after { background: radial-gradient(circle, rgba(245,197,66,.15), transparent 62%); } .ck-lage.rot::after { background: radial-gradient(circle, rgba(255,112,98,.15), transparent 62%); } .ck-lage-satz { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -1.4px; margin: 0 0 10px; font-weight: 600; } .ck-lage.gut .ck-lage-satz { color: var(--gut); } .ck-lage.warn .ck-lage-satz { color: var(--signal); } .ck-lage.rot .ck-lage-satz { color: var(--schlimm); } .ck-lage-zeile { color: var(--schrift-matt); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .ck-lage-zeile b { color: var(--schrift); font-family: "IBM Plex Mono", monospace; font-weight: 500; font-variant-numeric: tabular-nums; } /* Das Statusband: ein Strich je Produkt. Farbe = Zustand, Höhe = Preis. */ .ck-band { display: flex; align-items: flex-end; gap: 3px; height: 62px; margin-top: 22px; } .ck-band-strich { flex: 1; min-width: 4px; border-radius: 3px 3px 1px 1px; background: #33465C; position: relative; cursor: pointer; transform-origin: bottom; animation: ck-aufstehen .5s cubic-bezier(.22,1,.36,1) backwards; transition: filter .12s ease; } .ck-band-strich:hover { filter: brightness(1.5); } .ck-band-strich.ok { background: linear-gradient(180deg, var(--gut), #2C7A5C); } .ck-band-strich.drift { background: linear-gradient(180deg, var(--warn), #8A6E1C); } .ck-band-strich.fehler { background: linear-gradient(180deg, var(--schlimm), #8C382F); } .ck-band-strich.pausiert { background: linear-gradient(180deg, #46586C, #2A3644); opacity: .55; } .ck-band-strich.ungeprueft { background: linear-gradient(180deg, #5A6E86, #333F4E); } @keyframes ck-aufstehen { from { transform: scaleY(.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ck-band-strich { animation: none; } } .ck-band-hinweis { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #05070A; border: 1px solid var(--kante-hell); border-radius: 8px; padding: 6px 10px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 5; } .ck-band-strich:hover .ck-band-hinweis { opacity: 1; } /* ---------- Aufgaben ---------- */ .ck-aufgaben { display: flex; flex-direction: column; gap: 8px; } .ck-aufgabe { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--schrift); background: rgba(255,255,255,.028); border: 1px solid var(--kante); border-left: 3px solid var(--schrift-leis); border-radius: var(--r-mittel); padding: 12px 14px; font-size: 14px; transition: background .13s ease, transform .1s ease; } .ck-aufgabe:hover { background: rgba(255,255,255,.06); transform: translateX(2px); } .ck-aufgabe.rot { border-left-color: var(--schlimm); } .ck-aufgabe.gelb { border-left-color: var(--warn); } .ck-aufgabe.blau { border-left-color: var(--kuehl); } .ck-aufgabe svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: .55; margin-left: auto; } /* ---------- Kacheln ---------- */ .ck-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } .ck-kachel { display: block; text-decoration: none; color: var(--schrift); background: linear-gradient(180deg, var(--platte), var(--nacht-2)); border: 1px solid var(--kante); border-radius: var(--r-gross); padding: 18px 18px 16px; position: relative; overflow: hidden; transition: transform .14s cubic-bezier(.22,1,.36,1), border-color .14s ease; } .ck-kachel:hover { transform: translateY(-3px); border-color: var(--kante-hell); } .ck-kachel-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .ck-kachel-kopf span { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--schrift-leis); } .ck-kachel-kopf svg { width: 15px; height: 15px; stroke: var(--schrift-leis); fill: none; stroke-width: 1.7; } .ck-kachel-wert { font-family: "IBM Plex Mono", monospace; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .ck-kachel-wert.gut { color: var(--gut); } .ck-kachel-wert.warn { color: var(--warn); } .ck-kachel-wert.rot { color: var(--schlimm); } .ck-kachel-fuss { margin-top: 8px; font-size: 12.5px; color: var(--schrift-matt); } .ck-kachel-balken { display: flex; gap: 2px; margin-top: 12px; height: 4px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.05); } .ck-kachel-balken i { display: block; height: 100%; } .ck-kachel-balken i.gut { background: var(--gut); } .ck-kachel-balken i.warn { background: var(--warn); } .ck-kachel-balken i.rot { background: var(--schlimm); } .ck-kachel-balken i.grau { background: #3B4A5C; } @media (max-width: 1200px) { .ck-kacheln { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ck-kacheln { grid-template-columns: 1fr; } } /* ---------- Zwei Spalten ---------- */ .ck-spalten { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1200px) { .ck-spalten { grid-template-columns: 1fr; } } /* ---------- Diagramme ---------- */ .ck-chart { width: 100%; height: 190px; display: block; overflow: visible; } .ck-chart .flaeche { fill: url(#ckVerlauf); } .ck-chart .linie { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ck-chart .linie.zwei { stroke: var(--kuehl); stroke-dasharray: 4 4; stroke-width: 1.6; } .ck-chart .netz { stroke: rgba(255,255,255,.06); stroke-width: 1; } .ck-chart .achse { fill: var(--schrift-leis); font-size: 10px; font-family: "IBM Plex Mono", monospace; } .ck-chart .punkt { fill: var(--signal); stroke: var(--nacht); stroke-width: 2; } .ck-chart .zeichenweg { stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge); animation: ck-zeichnen 1.1s cubic-bezier(.4,0,.2,1) forwards; } @keyframes ck-zeichnen { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .ck-chart .zeichenweg { animation: none; stroke-dashoffset: 0; } } .ck-verteilung { display: flex; flex-direction: column; gap: 9px; } .ck-vert-zeile { display: grid; grid-template-columns: 132px 1fr 78px; align-items: center; gap: 10px; font-size: 13px; } .ck-vert-name { display: block; min-width: 0; color: var(--schrift-matt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-vert-bahn { height: 8px; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden; } .ck-vert-bahn i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #8A6E1C, var(--signal)); width: 0; animation: ck-fuellen .8s cubic-bezier(.22,1,.36,1) forwards; } @keyframes ck-fuellen { to { width: var(--breite); } } @media (prefers-reduced-motion: reduce) { .ck-vert-bahn i { animation: none; width: var(--breite); } } .ck-vert-wert { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; } /* ---------- Produktliste ---------- */ .ck-such { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .ck-feld { background: rgba(255,255,255,.04); border: 1px solid var(--kante); border-radius: 10px; color: var(--schrift); padding: 9px 12px; font-size: 13.5px; font-family: inherit; box-sizing: border-box; } .ck-feld::placeholder { color: var(--schrift-leis); } .ck-feld:focus { outline: none; border-color: var(--signal); background: rgba(255,255,255,.06); } .ck-feld.breit { flex: 1; min-width: 200px; } textarea.ck-feld { resize: vertical; line-height: 1.5; } .ck-filter { display: flex; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--kante); border-radius: 10px; padding: 3px; } .ck-filter button { border: none; background: transparent; color: var(--schrift-matt); font-family: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; } .ck-filter button.an { background: rgba(245,197,66,.15); color: var(--signal); } .ck-liste { display: flex; flex-direction: column; gap: 7px; } .ck-zeile { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--kante); border-radius: var(--r-mittel); padding: 11px 14px; cursor: pointer; text-align: left; width: 100%; box-sizing: border-box; font-family: inherit; color: inherit; transition: background .12s ease, border-color .12s ease; } .ck-zeile:hover { background: rgba(255,255,255,.055); border-color: var(--kante-hell); } .ck-zeile.aus { opacity: .5; } .ck-bild { width: 46px; height: 46px; border-radius: var(--r-klein); object-fit: cover; background: #1B2634; flex: none; } .ck-zeile-mitte { min-width: 0; display: block; overflow: hidden; } /* display:block ist Pflicht – bei inline-Elementen wirken overflow und text-overflow nicht, dann schiebt ein langer Titel die ganze Zeile auf. */ .ck-zeile-titel { display: block; font-size: 14px; font-weight: 500; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-zeile-unter { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--schrift-leis); } .ck-zeile-preis { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ck-zeile-pfeil { color: var(--schrift-leis); } .ck-zeile-pfeil svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .ck-marker { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--kante-hell); color: var(--schrift-matt); white-space: nowrap; font-weight: 500; } .ck-marker.gut { color: var(--gut); border-color: rgba(86,217,163,.35); background: rgba(86,217,163,.09); } .ck-marker.warn { color: var(--warn); border-color: rgba(245,197,66,.35); background: rgba(245,197,66,.09); } .ck-marker.rot { color: var(--schlimm); border-color: rgba(255,112,98,.35); background: rgba(255,112,98,.09); } .ck-marker.kuehl{ color: var(--kuehl); border-color: rgba(107,164,232,.35); background: rgba(107,164,232,.09); } @media (max-width: 720px) { .ck-zeile { grid-template-columns: 40px 1fr auto; gap: 10px; } .ck-zeile-unter { gap: 5px; font-size: 11.5px; } .ck-marker { padding: 1px 7px; font-size: 10.5px; } .ck-zeile-pfeil { display: none; } .ck-bild { width: 40px; height: 40px; } } /* ---------- Schublade (Editor) ---------- */ .ck-schleier { position: fixed; inset: 0; background: rgba(4,6,9,.66); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60; } .ck-schleier.auf { opacity: 1; pointer-events: auto; } .ck-schublade { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%); background: linear-gradient(180deg, #101724, #080B10); border-left: 1px solid var(--kante-hell); z-index: 61; transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; box-shadow: -30px 0 70px rgba(0,0,0,.55); } .ck-schublade.auf { transform: none; } @media (prefers-reduced-motion: reduce) { .ck-schublade { transition: none; } } .ck-sch-kopf { display: flex; align-items: flex-start; gap: 14px; padding: calc(20px + var(--sicher-oben)) calc(22px + var(--sicher-rechts)) 14px 22px; border-bottom: 1px solid var(--kante); } .ck-sch-kopf h2 { font-family: "Space Grotesk", sans-serif; font-size: 18px; margin: 0 0 4px; font-weight: 600; } .ck-sch-kopf p { margin: 0; color: var(--schrift-leis); font-size: 12.5px; font-family: "IBM Plex Mono", monospace; } .ck-zu { margin-left: auto; background: transparent; border: none; color: var(--schrift-matt); cursor: pointer; padding: 4px; } .ck-zu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; } .ck-reiter { display: flex; gap: 2px; padding: 10px 22px 0; border-bottom: 1px solid var(--kante); overflow-x: auto; } .ck-reiter button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--schrift-matt); font-family: inherit; font-size: 13.5px; padding: 9px 13px; cursor: pointer; white-space: nowrap; } .ck-reiter button.an { color: var(--signal); border-bottom-color: var(--signal); } .ck-sch-koerper { flex: 1; overflow-y: auto; padding: 20px 22px 30px; -webkit-overflow-scrolling: touch; } .ck-sch-fuss { display: flex; gap: 10px; align-items: center; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kante); background: rgba(8,11,16,.9); } .ck-sch-fuss .ck-notiz { margin-left: auto; text-align: right; } .ck-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ck-gitter .voll { grid-column: 1 / -1; } @media (max-width: 560px) { .ck-gitter { grid-template-columns: 1fr; } } .ck-eingabe { display: flex; flex-direction: column; gap: 5px; } .ck-eingabe > span { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--schrift-leis); display: flex; gap: 8px; align-items: baseline; } .ck-eingabe > span i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; } .ck-eingabe > span b { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-weight: 500; } .ck-eingabe > span b.zuviel { color: var(--schlimm); } .ck-eingabe .ck-feld { width: 100%; } .ck-warnzeile { font-size: 12.5px; color: var(--warn); display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; text-transform: none; letter-spacing: 0; } /* Warnsätze sind Sätze, keine Versalien */ .ck-befund { border: 1px solid var(--kante); border-radius: var(--r-mittel); padding: 13px 15px; margin-bottom: 10px; background: rgba(255,255,255,.025); } .ck-befund.problem { border-color: rgba(255,112,98,.3); background: rgba(255,112,98,.05); } .ck-befund.hinweis { border-color: rgba(245,197,66,.3); background: rgba(245,197,66,.045); } .ck-befund-kopf { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--schrift-leis); margin-bottom: 5px; } /* Ganze Sätze gehören nicht in Versalien – etwa Googles Beanstandungen, die im Wortlaut übernommen werden. */ .ck-befund-satz { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--schrift); font-weight: 500; line-height: 1.45; } .ck-befund p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; } .ck-vorschlag { background: rgba(0,0,0,.35); border: 1px dashed var(--kante-hell); border-radius: var(--r-klein); padding: 9px 11px; font-size: 13px; line-height: 1.5; margin-bottom: 9px; } .ck-leer { text-align: center; color: var(--schrift-leis); padding: 34px 16px; font-size: 13.5px; } .ck-leer b { display: block; color: var(--schrift-matt); font-size: 15px; margin-bottom: 5px; font-family: "Space Grotesk", sans-serif; } /* ---------- Treffer aus Ecwid ---------- */ .ck-treffer { display: flex; flex-direction: column; gap: 7px; } .ck-treffer-zeile { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--kante); border-radius: var(--r-mittel); padding: 9px 12px; background: rgba(255,255,255,.025); } .ck-treffer-zeile.drin { opacity: .5; } .ck-treffer-name { display: block; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-treffer-name small { display: block; color: var(--schrift-leis); font-family: "IBM Plex Mono", monospace; font-size: 11.5px; } /* ---------- Meldungen ---------- */ .ck-melder { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } @media (max-width: 860px) { .ck-melder { bottom: calc(78px + var(--sicher-unten)); left: 14px; right: 14px; align-items: stretch; } } .ck-meldung { background: #10161F; border: 1px solid var(--kante-hell); border-left: 3px solid var(--signal); border-radius: var(--r-mittel); padding: 12px 16px; font-size: 13.5px; max-width: 420px; box-shadow: var(--schatten); animation: ck-rein .22s cubic-bezier(.22,1,.36,1); } .ck-meldung.gut { border-left-color: var(--gut); } .ck-meldung.schlimm { border-left-color: var(--schlimm); } .ck-meldung.geht { animation: ck-raus .2s ease forwards; } @keyframes ck-rein { from { opacity: 0; transform: translateY(10px); } } @keyframes ck-raus { to { opacity: 0; transform: translateX(16px); } } /* ---------- Ladebalken oben ---------- */ .ck-fortschritt { position: fixed; top: 0; left: 0; height: 2px; background: var(--signal); width: 0; z-index: 100; transition: width .25s ease, opacity .3s ease; box-shadow: 0 0 10px var(--signal); } /* ---------- Fußzeile ---------- */ .ow-fuss { margin-left: var(--leiste); color: var(--schrift-leis); font-size: 12px; text-align: center; padding: 10px 0 30px; } @media (max-width: 860px) { .ow-fuss { margin-left: 0; padding-bottom: calc(90px + var(--sicher-unten)); } } /* Alte Kopfleiste ausblenden, wo die Seitenleiste übernimmt */ .ck-hat-leiste .ow-top { display: none; } /* Die älteren Seiten (Prüfstand, Akten, Protokoll, Technik) rahmen ihren Inhalt in .ow-wrap, die neuen in .ow-main – beide brauchen dieselben Abstände, sonst hängt auf dem Telefon der Inhalt hinter der Statusleiste. */ .ck-hat-leiste .ow-main, .ck-hat-leiste .ow-wrap { margin-left: var(--leiste); max-width: 1560px; padding: calc(26px + var(--sicher-oben)) calc(30px + var(--sicher-rechts)) 60px calc(30px + var(--sicher-links)); } @media (max-width: 860px) { .ck-hat-leiste .ow-main, .ck-hat-leiste .ow-wrap { margin-left: 0; padding: calc(14px + var(--sicher-oben)) calc(14px + var(--sicher-rechts)) calc(96px + var(--sicher-unten)) calc(14px + var(--sicher-links)); } } /* Kontowahl in der Seitenleiste */ .ck-kontowahl { margin: 0 0 4px; } .ck-kontowahl select { width: 100%; background: rgba(255,255,255,.05); color: var(--schrift); border: 1px solid var(--kante); border-radius: 8px; padding: 6px 8px; font-family: inherit; font-size: 12.5px; } .ck-kontowahl select:focus { outline: none; border-color: var(--signal); } .ck-kontoname { font-size: 12.5px; color: var(--schrift-matt); overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1399px) and (min-width: 861px) { .ck-kontowahl, .ck-kontoname { display: none; } } /* ---------- KI-Analyse: goldener Block im Befundbereich ---------- */ .ck-gold-halter:empty { display: none; } .ck-gold:not(.ck-gold-klapp) { position: relative; overflow: hidden; border: 1px solid rgba(245,197,66,.38); border-radius: var(--r-mittel); background: linear-gradient(150deg, rgba(245,197,66,.10), rgba(245,197,66,.02) 45%, transparent); padding: 16px 18px; margin-bottom: 12px; animation: ck-gold-auf .4s cubic-bezier(.22,1,.36,1) both; } .ck-gold:not(.ck-gold-klapp)::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--signal), rgba(245,197,66,.15)); } @keyframes ck-gold-auf { from { opacity: 0; transform: translateY(-6px); } } .ck-gold-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ck-gold-marke { font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); } .ck-gold-lage { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--schrift); } .ck-gold-punkt { border-top: 1px solid rgba(245,197,66,.14); padding: 12px 0 4px; animation: ck-gold-punkt-auf .45s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--verzug, 0ms); } @keyframes ck-gold-punkt-auf { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .ck-gold, .ck-gold-punkt { animation: none; } } .ck-gold-punkt p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; } .ck-gold-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; margin-bottom: 6px; } .ck-gold-punkt.problem .ck-gold-titel b { color: var(--schlimm); } .ck-gold-punkt.hinweis .ck-gold-titel b { color: var(--warn); } .ck-gold-balken { height: 3px; border-radius: 3px; background: rgba(245,197,66,.14); overflow: hidden; } .ck-gold-balken i { display: block; height: 100%; width: 35%; border-radius: 3px; background: var(--signal); animation: ck-gold-lauf 1.1s ease-in-out infinite; } @keyframes ck-gold-lauf { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } /* Kompakte Klappe für Googles Meldungen */ .ck-befund.ck-kompakt { padding: 0; } .ck-befund.ck-kompakt > summary { padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; } .ck-befund.ck-kompakt > summary::-webkit-details-marker { display: none; } .ck-befund.ck-kompakt > summary::before { content: '▸'; color: var(--schrift-leis); font-size: 11px; } .ck-befund.ck-kompakt[open] > summary::before { content: '▾'; } .ck-befund.ck-kompakt > summary:hover { background: rgba(255,255,255,.03); } .ck-kompakt-inhalt { padding: 0 14px 12px 26px; } .ck-kompakt-inhalt p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; } /* ================================================================ * * Befundblock „Was Google beanstandet" – nach Roberts Entwurf * * ================================================================ */ .ck-bef-zahlen { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; } .ck-bef-zahl { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--kante); background: rgba(255,255,255,.025); font-size: 14px; color: var(--schrift-matt); white-space: nowrap; } .ck-bef-zahl b { font-size: 19px; font-weight: 600; color: var(--schrift); font-variant-numeric: tabular-nums; letter-spacing: -.3px; } .ck-bef-zahl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ck-bef-zahl.rot { border-color: rgba(224,101,90,.42); background: rgba(224,101,90,.09); color: #E8A79F; } .ck-bef-zahl.rot b, .ck-bef-zahl.rot svg { color: #E0655A; stroke: #E0655A; } .ck-bef-zahl.blau b { color: #7FA8DA; } .ck-bef-zahl.blau svg { stroke: #7FA8DA; } .ck-bef-balken { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); margin-bottom: 10px; } .ck-bef-balken i { display: block; height: 100%; animation: ck-bef-wachs .55s cubic-bezier(.22,1,.36,1) both; } @keyframes ck-bef-wachs { from { transform: scaleX(0); transform-origin: left; } } @media (prefers-reduced-motion: reduce) { .ck-bef-balken i { animation: none; } } .ck-bef-balken i.rot, .ck-bef-punkt.rot, .ck-bef-legende i.rot { background: #D9736B; } .ck-bef-balken i.gelb, .ck-bef-punkt.gelb, .ck-bef-legende i.gelb { background: #D6C05C; } .ck-bef-balken i.blau, .ck-bef-punkt.blau, .ck-bef-legende i.blau { background: #7A93B8; } .ck-bef-legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 16px; font-size: 13px; color: var(--schrift-matt); } .ck-bef-legende span { display: inline-flex; align-items: center; gap: 8px; } .ck-bef-legende i { width: 9px; height: 9px; border-radius: 50%; display: block; } .ck-bef-liste { display: flex; flex-direction: column; } .ck-bef-zeile { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer; background: transparent; border: none; border-top: 1px solid var(--kante); padding: 14px 4px; font-family: inherit; color: var(--schrift); transition: background .12s ease; } .ck-bef-zeile:first-child { border-top: none; } .ck-bef-zeile:hover { background: rgba(255,255,255,.035); } .ck-bef-punkt { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; } .ck-bef-titel { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-bef-weg { font-size: 13px; color: var(--schrift-leis); white-space: nowrap; } .ck-bef-zaehler { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--kante-hell); color: var(--schrift-matt); } .ck-bef-zaehler.rot { color: #E0655A; border-color: rgba(224,101,90,.45); background: rgba(224,101,90,.08); } .ck-bef-zaehler.gelb { color: #E2CE72; border-color: rgba(214,192,92,.42); background: rgba(214,192,92,.08); } .ck-bef-zaehler.blau { color: #8FB0D8; border-color: rgba(122,147,184,.45); background: rgba(122,147,184,.10); } .ck-bef-mehr { margin-top: 14px; } .ck-bef-mehr > summary { list-style: none; cursor: pointer; text-align: center; padding: 14px; border-radius: 12px; border: 1px solid var(--kante); background: rgba(255,255,255,.022); color: var(--schrift-matt); font-size: 14px; } .ck-bef-mehr > summary::-webkit-details-marker { display: none; } .ck-bef-mehr > summary::after { content: ' ▾'; color: var(--schrift-leis); } .ck-bef-mehr[open] > summary::after { content: ' ▴'; } .ck-bef-mehr > summary:hover { background: rgba(255,255,255,.05); color: var(--schrift); } .ck-bef-voll { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .ck-bef-karte { border: 1px solid var(--kante); border-radius: var(--r-mittel); padding: 13px 15px; background: rgba(255,255,255,.02); } .ck-bef-karte-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .ck-bef-karte-kopf .ck-bef-zaehler { margin-left: auto; } .ck-bef-karte p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; } .ck-bef-karte p:last-child { margin-bottom: 0; } @media (max-width: 720px) { .ck-bef-zahlen { gap: 8px; } .ck-bef-zahl { padding: 9px 12px; font-size: 13px; } .ck-bef-zahl b { font-size: 17px; } .ck-bef-zeile { grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 2px; } .ck-bef-weg { display: none; } .ck-bef-titel { white-space: normal; } } /* ---------- Aufgaben in der Seitenleiste ---------- */ .ck-tun { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kante); } .ck-tun > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; color: var(--schrift-leis); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; } .ck-tun > summary::-webkit-details-marker { display: none; } .ck-tun > summary::after { content: '▾'; margin-left: auto; font-size: 10px; opacity: .6; letter-spacing: 0; } .ck-tun[open] > summary::after { content: '▴'; } .ck-tun > summary:hover { color: var(--schrift-matt); } .ck-tun-zahl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,197,66,.14); border: 1px solid rgba(245,197,66,.4); color: var(--signal); font-size: 12px; font-weight: 600; letter-spacing: 0; font-family: "IBM Plex Mono", monospace; } .ck-tun-liste { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; } .ck-tun-eintrag { display: grid; grid-template-columns: 9px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--schrift-matt); font-size: 12.5px; line-height: 1.4; } .ck-tun-eintrag:hover { background: rgba(255,255,255,.045); color: var(--schrift); } .ck-tun-eintrag i { width: 9px; height: 9px; border-radius: 50%; background: var(--schrift-leis); margin-top: 4px; } .ck-tun-eintrag i.rot { background: #D9736B; } .ck-tun-eintrag i.gelb { background: #D6C05C; } .ck-tun-eintrag i.blau { background: #7A93B8; } .ck-tun-eintrag span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ck-tun-mehr { color: var(--schrift-leis); font-style: italic; } /* Schmale Leiste und Telefon: dort ist kein Platz – dann zeigt sie das Dashboard */ .ck-aufgaben-dash { display: none; } @media (max-width: 1399px) { .ck-tun { display: none; } .ck-aufgaben-dash { display: block; } } /* ================================================================ * * KI-Analyse als Klappe – Leiste mit wanderndem Lichtrahmen * * (nach Roberts Entwurf) * * ================================================================ */ .ck-gold-klapp { position: relative; overflow: hidden; border: none; padding: 0; background: transparent; border-radius: 14px; margin-bottom: 12px; } /* Der Rahmen: ein kreisender Lichtkegel unter dem Inhalt. Bewusst über ein Pseudo-Element statt @property – so läuft es auch auf älteren Safari-Fassungen. */ .ck-gold-klapp::before { content: ''; position: absolute; inset: -160%; z-index: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(245,197,66,.06) 20deg, rgba(245,197,66,.85) 48deg, rgba(255,225,140,.95) 60deg, rgba(245,197,66,.85) 72deg, rgba(245,197,66,.06) 100deg, transparent 130deg, transparent 360deg); animation: ck-kreisen 7s linear infinite; } .ck-gold-klapp::after { content: ''; position: absolute; inset: 1px; z-index: 1; border-radius: 13px; background: linear-gradient(150deg, #141B26, #0C1118 60%); pointer-events: none; } .ck-gold-klapp > * { position: relative; z-index: 2; } @keyframes ck-kreisen { to { transform: rotate(360deg); } } .ck-gold-leiste { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; } /* Bei knappem Platz zuerst den Zeitstempel opfern – er steht auch drinnen */ @media (max-width: 1680px) { .ck-gold-wann { display: none; } } .ck-gold-klapp[open] .ck-gold-wann { display: inline; } .ck-gold-leiste::-webkit-details-marker { display: none; } .ck-gold-stern { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245,197,66,.45); background: linear-gradient(150deg, rgba(245,197,66,.16), rgba(245,197,66,.04)); animation: ck-stern-puls 3.4s ease-in-out infinite; } .ck-gold-stern svg { width: 17px; height: 17px; fill: var(--signal); } @keyframes ck-stern-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); } 45% { box-shadow: 0 0 14px 2px rgba(245,197,66,.30); } } .ck-gold-stern.arbeitet { animation-duration: 1.1s; } .ck-gold-klapp .ck-gold-marke { font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); } .ck-gold-wann { font-size: 13px; color: var(--schrift-leis); } .ck-gold-modell { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--schrift-matt); border: 1px solid var(--kante); border-radius: 999px; padding: 4px 12px; background: rgba(255,255,255,.03); /* Voller Modellname bliebe zu breit und würde die Leiste umbrechen – gekürzt anzeigen, vollständig im Hinweistext und in der offenen Ansicht. */ max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-gold-klapp[open] .ck-gold-modell { max-width: none; } .ck-gold-schalter { margin-left: auto; font-size: 13px; color: var(--schrift-matt); border: 1px solid var(--kante-hell); border-radius: 999px; padding: 6px 14px; white-space: nowrap; transition: background .13s ease, color .13s ease; } .ck-gold-leiste:hover .ck-gold-schalter { background: rgba(255,255,255,.06); color: var(--schrift); } .ck-gold-schalter b { font-weight: 400; opacity: .7; display: inline-block; transition: transform .2s ease; } .ck-gold-klapp[open] .ck-gold-schalter b { transform: rotate(180deg); } .ck-gold-inhalt { padding: 0 18px 16px; } .ck-gold-klapp[open] .ck-gold-inhalt { animation: ck-gold-auf .32s cubic-bezier(.22,1,.36,1) both; } /* Wartezustand nutzt dieselbe Leiste, aber ohne Klappe */ .ck-gold-warten .ck-gold-leiste { cursor: default; } @media (prefers-reduced-motion: reduce) { .ck-gold-klapp::before { animation: none; background: rgba(245,197,66,.35); } .ck-gold-stern { animation: none; } .ck-gold-klapp[open] .ck-gold-inhalt { animation: none; } } @media (max-width: 720px) { .ck-gold-leiste { gap: 10px; padding: 12px 14px; } .ck-gold-modell { display: none; } .ck-gold-schalter { padding: 6px 12px; font-size: 12.5px; } .ck-gold-inhalt { padding: 0 14px 14px; } } /* ================================================================ * * KI-Reparatur * * ================================================================ */ .ck-rep-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(245,197,66,.5); color: #14181F; font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: linear-gradient(135deg, #F5C542, #FFD972); animation: ck-rep-pulsen 2.6s ease-in-out infinite; } .ck-rep-knopf svg { width: 14px; height: 14px; fill: #14181F; } .ck-rep-knopf:hover { filter: brightness(1.08); } @keyframes ck-rep-pulsen { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,66,.42); } 55% { box-shadow: 0 0 0 7px rgba(245,197,66,0); } } /* Kleiner Knopf je Punkt – gleiche Größe wie die Aufwandsmarke */ button.ck-rep-mini { cursor: pointer; font-family: inherit; font-weight: 500; color: var(--signal); border-color: rgba(245,197,66,.45); background: rgba(245,197,66,.10); } button.ck-rep-mini:hover { background: rgba(245,197,66,.2); } .ck-rep-ergebnis { margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--r-mittel); border: 1px solid rgba(245,197,66,.4); background: rgba(245,197,66,.05); } .ck-rep-ergebnis.fertig { animation: ck-rep-rahmen 2.4s ease-in-out infinite; } @keyframes ck-rep-rahmen { 0%, 100% { border-color: rgba(245,197,66,.28); box-shadow: 0 0 0 0 rgba(245,197,66,0); } 50% { border-color: rgba(245,197,66,.75); box-shadow: 0 0 14px 0 rgba(245,197,66,.18); } } .ck-rep-e-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .ck-rep-ergebnis p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; } .ck-rep-eintrag { border-top: 1px solid var(--kante); padding: 9px 0; font-size: 13px; } .ck-rep-eintrag:first-of-type { border-top: none; } .ck-rep-eintrag.zurueck { opacity: .5; } .ck-rep-feld { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--schrift-leis); margin-left: 6px; } .ck-rep-vorher { color: var(--schrift-leis); margin-top: 4px; text-decoration: line-through; } .ck-rep-nachher { color: var(--schrift); margin-top: 3px; } .ck-rep-vorher b, .ck-rep-nachher b { font-weight: 500; text-decoration: none; margin-right: 4px; } .ck-rep-verlauf .ck-rep-lauf { border-top: 1px solid var(--kante); padding: 10px 0; } .ck-rep-lauf-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .ck-rep-lauf-kopf button { margin-left: auto; } .ck-rep-details > summary { cursor: pointer; margin-top: 6px; } /* Ergebnisfenster */ .ck-rep-fenster { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(760px, 92vw); max-height: 86vh; z-index: 70; display: flex; flex-direction: column; background: linear-gradient(160deg, #131A25, #0A0E14); border: 1px solid rgba(245,197,66,.35); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.6); animation: ck-rep-fenster-auf .26s cubic-bezier(.22,1,.36,1) both; } @keyframes ck-rep-fenster-auf { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } } .ck-rep-f-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--kante); } .ck-rep-f-kopf h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; } .ck-rep-f-kopf .ck-zu { margin-left: auto; } .ck-rep-f-koerper { overflow-y: auto; padding: 16px 20px; } .ck-rep-f-koerper h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--schrift-leis); margin: 16px 0 8px; } .ck-rep-f-fuss { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--kante); } .ck-rep-f-fuss .ck-knopf.haupt { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .ck-rep-knopf, .ck-rep-ergebnis.fertig, .ck-rep-fenster { animation: none; } } @media (max-width: 720px) { .ck-rep-knopf { padding: 6px 12px; font-size: 12.5px; } .ck-rep-fenster { width: 94vw; max-height: 90vh; } } /* ================================================================ * * Telefon: schwebender Aufgabenmelder über der unteren Leiste * * (nach Roberts Entwurf) * * ================================================================ */ .ck-melderbau, .ck-melder-tafel { display: none; } @media (max-width: 860px) { .ck-aufgaben-dash { display: none; } /* auf dem Telefon übernimmt der Melder */ .ck-melderbau { display: block; position: fixed; z-index: 46; left: 0; right: 0; bottom: calc(60px + var(--sicher-unten)); height: 46px; pointer-events: none; color: var(--signal); } .ck-melderbau.rot { color: #E0655A; } /* Der Bogen: eine feine Linie, die zur Mitte hin ansteigt und an den Rändern ausläuft */ .ck-melder-bogen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; filter: drop-shadow(0 0 6px currentColor); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); animation: ck-bogen-atmen 3.6s ease-in-out infinite; } @keyframes ck-bogen-atmen { 0%, 100% { opacity: .38; } 50% { opacity: .75; } } .ck-melder-ball { /* color:inherit ist wichtig – ein