/* SalesMap – Oberfläche --------------------------------------------------------------------------- Der Arbeitsbereich ist EINSPALTIG. In 3088_ics, von dem die Bedienung stammt, sind es zwei Spalten (Haushalte links, Detail rechts); hier liegt unter der Nadel direkt der Ausgang, es gibt also nichts auszuwählen. Nur die Verpackung wechselt mit der Geräteausrichtung: • Querformat (>= 900px): ein schmales Panel am rechten Kartenrand, die Karte läuft daneben durch. • Hochformat (< 900px): dasselbe Panel als Bottom-Sheet mit Griff (halb / ganz / zu). Gestaltungsprinzip: ruhige Flächen, Haarlinien statt Rahmen, Bedeutung über Icon-Chips statt über Farbflächen. Jede Kachel trägt ein Icon im abgerundeten Quadrat – im Ruhezustand grau, aktiv in der Farbe der Sache. Primäre Touchziele bleiben bei mindestens 44px. Die eine Farbregel, die überall gilt: die sieben Ausgangsfarben sind dieselben wie in 3060_d2d und 3088_ics, und sie stehen im Skript (OUTCOME_TYPES), nicht hier. Das CSS bekommt sie je Element als --c gereicht. */ :root { --ink: #0f172a; --ink-2: #475569; --muted: #8a97ab; --line: #e4e9f0; --line-soft: #f1f4f8; --bg: #f2f4f8; --card: #ffffff; --accent: #2563eb; --accent-2: #1d4ed8; --accent-soft: rgba(37, 99, 235, .09); /* Kopfzeile / Seitenleiste: ein tiefes Nachtblau statt Schwarz */ --nav-bg: #0b1222; --nav-bg-2: #111a2e; --nav-ink: #e8eef7; --nav-muted: #8494ab; --topbar-h: 50px; --side-w: 232px; /* Seitenleiste ab 1024px (Rechner, iPad quer) */ --r-tile: 14px; --r-field: 11px; --r-big: 20px; --shadow-tile: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03); --shadow-float: 0 10px 30px -6px rgba(15, 23, 42, .22), 0 3px 8px rgba(15, 23, 42, .08); --shadow-pop: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 6px 16px rgba(15, 23, 42, .10); --ring: 0 0 0 3px rgba(37, 99, 235, .18); --ease: cubic-bezier(.2, .8, .2, 1); --glass: rgba(255, 255, 255, .86); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* kein Seiten-Scroll – nur Panels scrollen */ overscroll-behavior: none; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.4; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; } button, input, textarea, select { font: inherit; color: inherit; } svg { display: block; } /* Tastatur-Fokus sichtbar und einheitlich – Maus und Finger zeigen ihn nicht. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } /* Dünne, ruhige Rollbalken am Rechner statt der grauen Systembalken. */ @media (hover: hover) and (pointer: fine) { * { scrollbar-width: thin; scrollbar-color: #c9d2de transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #cfd7e2; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #b5c0cf; } ::-webkit-scrollbar-track { background: transparent; } } /* Ein `hidden`-Attribut muss stärker sein als jede display-Regel einer Klasse. Der Browser bringt dafür nur `[hidden] { display: none }` mit – und das verliert gegen jedes `.klasse { display: flex }`. Einmal zentral geklärt. */ [hidden] { display: none !important; } /* ==================================================================== Kopfzeile =========================================================================== */ .topbar { flex: 0 0 auto; height: calc(var(--topbar-h) + var(--safe-top)); padding: var(--safe-top) 14px 0; display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, var(--nav-bg-2), var(--nav-bg)); color: var(--nav-ink); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); z-index: 30; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: .12em; font-size: 12.5px; color: #f1f5fb; flex: 0 0 auto; } /* Symbol + Schriftzug: ein Tipp dreht die Karte nach Norden. Als Knopf, aber ohne Knopf-Aussehen; das Symbol steht als kleines App-Zeichen im Farbquadrat. */ .brand-marke { display: inline-flex; align-items: center; gap: 9px; margin: -5px; padding: 5px; background: none; border: 0; border-radius: 10px; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; } .brand-marke svg { width: 28px; height: 28px; padding: 5px; border-radius: 9px; flex: 0 0 auto; color: #fff; background: linear-gradient(140deg, #38bdf8 0%, #2563eb 55%, #4f46e5 100%); box-shadow: 0 4px 12px -2px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .25); } .brand-marke:active { background: rgba(255, 255, 255, .08); } @media (hover: hover) { .brand-marke:hover { background: rgba(255, 255, 255, .06); } } /* Das angemeldete Konto – als Schild neben der Marke. Auf einer GEMEINSAMEN Karte ist das keine Zierde: die eigenen Nadeln und die der anderen unterscheiden sich nur in der Deckkraft, und eine Nadel im falschen Namen fällt sonst erst Wochen später auf. Der Punkt davor trägt die Kontofarbe, dieselbe, die am Ring der eigenen Nadeln bei den anderen steht. */ .brand-konto { display: inline-flex; align-items: center; gap: 6px; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #cfdbea; font-weight: 600; font-size: 11px; letter-spacing: .02em; text-transform: lowercase; } .brand-konto::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #38bdf8); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); } .tabs { display: flex; gap: 2px; } .tab { appearance: none; border: 0; background: transparent; position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--nav-muted); font-size: 13px; font-weight: 600; letter-spacing: -.005em; padding: 7px 12px; border-radius: 10px; cursor: pointer; min-height: 34px; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; } .tab-ic { flex: 0 0 auto; width: 17px; height: 17px; opacity: .9; transition: color .15s; } @media (hover: hover) { .tab:not(.active):hover { color: #e2e8f0; background: rgba(255, 255, 255, .06); } } .tab.active { background: #f8fafc; color: #0b1222; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35); } .tab.active .tab-ic { color: var(--accent); opacity: 1; } /* Dringlichkeits-Zähler am Followup-Tab. Sitzt wie eine Benachrichtigung oben rechts an der Beschriftung; die Farbe kommt aus dem Skript (--fu-badge) und sagt, wie nah der nächste Termin ist. */ .tab-badge { position: absolute; top: -1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--fu-badge, #dc2626); color: var(--fu-badge-ink, #fff); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; --fu-ring: #0b1220; /* Rand in Kopfzeilenfarbe, damit er absetzt */ box-shadow: 0 0 0 2px var(--fu-ring); } .tab.active .tab-badge { --fu-ring: #f8fafc; } /* Platz für den Zähler, damit er nicht auf der Beschriftung sitzt – aber nur, solange er wirklich da ist. */ .tab:has(.tab-badge:not([hidden])) { padding-right: 26px; } /* Fünf Minuten vor dem Termin (oder überfällig) schlägt der Zähler Alarm: zwei kurze Schläge, dann Ruhe. Ein Herzschlag fällt im Augenwinkel stärker auf als ein gleichmäßiges Pulsieren und nutzt sich langsamer ab. */ .tab-badge--alarm { animation: fu-alarm 1.4s ease-in-out infinite; } @keyframes fu-alarm { 0% { transform: scale(1); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 0 0 rgba(220, 38, 38, 0); } 11% { transform: scale(1.35); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 16px 6px rgba(220, 38, 38, .95); } 22% { transform: scale(1.06); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 9px 3px rgba(220, 38, 38, .5); } 33% { transform: scale(1.32); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 16px 6px rgba(220, 38, 38, .95); } 52% { transform: scale(1); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 7px 2px rgba(220, 38, 38, .4); } 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 0 0 rgba(220, 38, 38, 0); } } @media (prefers-reduced-motion: reduce) { .tab-badge--alarm { animation: none; box-shadow: 0 0 0 2px var(--fu-ring), 0 0 12px 3px rgba(220, 38, 38, .85); } } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .stat-chip { font-size: 12px; color: var(--nav-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .stat-chip b { color: #f1f5fb; font-weight: 700; } /* Ein Abschluss darf leuchten – in der Farbe seines Ausgangs, aufgehellt für den dunklen Grund. Null bleibt weiß: grün heißt „es gibt einen". */ .stat-chip b.sc-abschl.an { color: #4ade80; } /* „+1": die unbestätigten, gelb wie ihre Nadel, dicht an der grünen Zahl. */ .stat-chip b.sc-unbest { color: #facc15; margin-left: 1px; } /* Der Live-Punkt: steht die Leitung zu den anderen Konten? Ohne sie sieht die Karte genauso aus, nur altert sie still – das hier ist die einzige Stelle, an der ein Abriss auffällt. */ .live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-size: 11.5px; font-weight: 600; color: #7d8da3; font-variant-numeric: tabular-nums; } .live i { width: 7px; height: 7px; border-radius: 50%; background: #64748b; flex: 0 0 auto; transition: background .2s, box-shadow .2s; } .live.on { color: #bbf7d0; } .live.on i { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: live-puls 2.4s ease-out infinite; } @keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { .live.on i { animation: none; } } /* Änderungen aus dem Funkloch, die noch hochgeladen werden müssen. Bernstein: nichts ist verloren, aber es ist auch noch nicht bei den anderen. */ .wartet { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: rgba(245, 158, 11, .18); color: #fcd34d; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .wartet[hidden] { display: none; } /* ---- Handy und iPad hochkant: zwei Zeilen --------------------------------- Neun Tabs plus Marke, Live-Punkt und Tageszahl passen nicht in eine Zeile. Gelöst ohne Änderung am HTML: die Leiste darf umbrechen, die Tabs bekommen die volle Breite der zweiten Zeile und scrollen darin waagerecht. Weil sie zusammen breiter sind als der Bildschirm, steht an einer Kante stets ein angeschnittener Tab – das ist der Hinweis, dass es weitergeht. Dazu scrollt main.js den aktiven Tab in die Mitte. Ab 1024px (Rechner, iPad quer) werden dieselben Tabs zur Seitenleiste, siehe unten – dort ist Platz in der Höhe, nicht in der Breite. */ @media (max-width: 1023.98px) { .topbar { height: auto; min-height: calc(var(--topbar-h) + var(--safe-top)); flex-wrap: wrap; gap: 0 10px; padding: var(--safe-top) 12px 0; } .brand { padding: 9px 0 3px; } .topbar-right { padding-top: 6px; } .tabs { order: 2; flex: 0 0 100%; /* Bis an beide Bildschirmkanten, damit der angeschnittene Tab nicht in einem Innenabstand endet und wie ein Fehler aussieht. */ margin: 2px -12px 0; width: calc(100% + 24px); /* Der Innenabstand oben/unten hält Platz für den Followup-Zähler und seinen Alarmring: overflow-x macht auch die Y-Achse beschneidend. */ padding: 6px 12px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 12px; /* Weich auslaufende Kanten statt hart abgeschnittener Tabs */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; min-height: 38px; /* Daumenziel */ padding: 8px 13px 8px 11px; font-size: 13.5px; background: rgba(255, 255, 255, .05); } .tab-badge { top: 2px; right: 3px; } } /* ---- Rechner und iPad quer: Seitenleiste ------------------------------------ Marke oben, die Tabs untereinander mit Symbol, Live-Punkt und Tagesstand unten. Die Karte bekommt die ganze Höhe. */ @media (min-width: 1024px) { body { flex-direction: row; } .topbar { flex: 0 0 var(--side-w); width: var(--side-w); height: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--safe-top) + 18px) 12px 14px; background: radial-gradient(120% 40% at 0% 0%, rgba(56, 189, 248, .10), transparent 60%), linear-gradient(180deg, var(--nav-bg-2), var(--nav-bg) 45%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .topbar::-webkit-scrollbar { display: none; } .brand { flex-wrap: wrap; padding: 0 8px 20px; row-gap: 12px; } .brand-marke { font-size: 13.5px; } .brand-konto { max-width: 100%; } .tabs { flex-direction: column; gap: 2px; } .tab { justify-content: flex-start; gap: 12px; padding: 9px 12px; min-height: 40px; font-size: 13.5px; } .tab.active { background: rgba(255, 255, 255, .09); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .tab.active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #60a5fa; } .tab.active .tab-ic { color: #7cc4ff; } .tab-badge { top: 11px; right: 10px; } .tab.active .tab-badge { --fu-ring: #1a2336; } .topbar-right { margin: auto 0 0; padding-top: 18px; flex-direction: column; align-items: stretch; gap: 8px; } .topbar-right .live, .topbar-right .wartet { align-self: flex-start; } .stat-chip { white-space: normal; line-height: 1.55; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .views { min-width: 0; } } /* Schmale Telefone: die Tageszahl bleibt immer stehen – sie ist unterwegs die meistgelesene Zahl der App. Platz machen der Reihe nach der Schriftzug (das Symbol bleibt) und zuletzt das Wort „Heute". */ @media (max-width: 400px) { .brand-name { display: none; } .topbar-right { gap: 8px; } } @media (max-width: 340px) { .sc-heute { display: none; } } /* =========================================================================== Ansichten =========================================================================== */ .views { flex: 1 1 auto; position: relative; min-height: 0; } .view { display: none; position: absolute; inset: 0; } .view.active { display: block; } /* Die Karte ist die EINZIGE Ansicht, die nie auf `display:none` fällt. Sie zeichnet auf einer WebGL-Fläche (renderingType VECTOR). Ein Kasten mit `display:none` hat 0×0 Pixel, und eine WebGL-Fläche ohne Maße ist für den Browser eine, die niemand mehr braucht: er kassiert ihren Zeichenkontext ein – auf dem iPhone schon nach Sekunden, wenn das Gerät knapp an Speicher ist. Zurück auf dem Kartentab stand dann das letzte Bild da und ließ sich nicht mehr schieben. Also bleibt sie im Layout stehen und wird nur unsichtbar geschaltet: `visibility` nimmt sie aus dem Bild UND aus der Trefferprüfung, lässt ihr aber ihre Größe – und damit den Zeichenkontext. Der zweite Halt für denselben Fall steht in main.js (karteHeilen). */ #view-map { display: block; } /* Auch alles DARIN, nicht nur die Hülle: `visibility` vererbt sich zwar, ein Kind darf sich mit `visibility: visible` aber wieder hervorholen. */ #view-map:not(.active), #view-map:not(.active) * { visibility: hidden; } .map-area { position: absolute; inset: 0; } #map { position: absolute; inset: 0; background: #e3e8ef; } .list-wrap { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px calc(28px + var(--safe-bottom)); } /* Ab Tablet-Breite: Inhalt mittig auf Lesebreite, der Rollbalken bleibt am Rand. Einstellungen und Season schmaler – dort stehen Zeilen, keine Raster. */ @media (min-width: 700px) { .list-wrap { padding: 24px max(24px, calc((100% - 960px) / 2)) calc(40px + var(--safe-bottom)); } #settingsWrap, #seasonWrap { padding-inline: max(24px, calc((100% - 720px) / 2)); } } /* Kartenausfall: Google Maps kommt über das Netz, und unterwegs kommt es manchmal nicht. Statt einer grauen Fläche, über die man rätselt, steht dann hier, was los ist und was trotzdem geht. */ .map-fehler { position: absolute; z-index: 18; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 20px; border-radius: var(--r-big); text-align: center; background: #fff; color: var(--ink-2); box-shadow: var(--shadow-pop); } .map-fehler strong { font-size: 15px; font-weight: 650; color: var(--ink); } .map-fehler span { font-size: 13px; line-height: 1.5; } .map-fehler-btn { appearance: none; border: 0; cursor: pointer; margin-top: 3px; padding: 9px 16px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; } /* =========================================================================== Potential: Gebiet einkreisen (Tab „Potential", liegt über der Karte) =========================================================================== */ .imp-pruefung { display: block; margin: 2px 0 6px; font-size: 11.5px; color: var(--muted); } .pot-panel { position: absolute; z-index: 20; top: 12px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 15px; border-radius: var(--r-big); background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--shadow-float); } .pot-panel[hidden] { display: none; } .pot-kopf strong { font-size: 15px; font-weight: 700; } .pot-chips { display: flex; flex-wrap: wrap; gap: 5px; } .pot-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .pot-text b { color: var(--ink); } .pot-grau { color: var(--muted); } .pot-fehler { margin: 0; font-size: 12.5px; color: #dc2626; } .pot-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; } .pot-knoepfe .btn { display: inline-flex; align-items: center; gap: 6px; } .pot-name { width: 100%; box-sizing: border-box; padding: 9px 11px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; font-size: 16px; color: var(--ink); /* < 16px zoomt iOS beim Fokus */ } .pot-name:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } /* Fängt den einen Strich: die Karte darunter bewegt sich währenddessen nicht. */ .pot-flaeche { position: absolute; inset: 0; z-index: 19; cursor: crosshair; touch-action: none; background: rgba(37, 99, 235, .04); } .pot-flaeche[hidden] { display: none; } .pot-flaeche svg { display: block; pointer-events: none; } .pot-flaeche path { fill: rgba(37, 99, 235, .1); stroke: #2563eb; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } /* =========================================================================== Kartensteuerung =========================================================================== Liegt mittig unten über der Karte: Joystick (Zoom, Drehen, Standort) und daneben der Schalter für die fremden Nadeln. Mittig statt am Rand, damit sie im Hoch- wie im Querformat mit beiden Daumen erreichbar ist. Das Blatt legt sich beim Aufziehen darüber – ausweichen muss sie ihm also nicht. */ .map-controls { position: absolute; z-index: 19; left: 50%; bottom: calc(var(--safe-bottom) + 16px); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; transition: left .2s ease, bottom .26s cubic-bezier(.32, .72, 0, 1), opacity .2s; } .map-ctrl { appearance: none; border: 1px solid rgba(255, 255, 255, .75); cursor: pointer; width: 48px; height: 48px; border-radius: 16px; flex: 0 0 auto; background: var(--glass); color: var(--ink-2); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); transition: transform .14s var(--ease), color .15s, background .15s; } @media (hover: hover) { .map-ctrl:hover { color: var(--ink); background: #fff; } } .map-ctrl:active { transform: scale(.93); } .map-ctrl.active { color: var(--accent); } /* Der Schalter für die fremden Nadeln hängt NEBEN der Reihe statt in ihr: sonst schöbe er den Joystick um seine halbe Breite aus der Mitte, und der muss mittig unter dem Daumen liegen. Ausgeschaltet ist er durchgestrichen – ein bloß blasser Knopf sähe aus wie einer, der gerade nicht geht. */ #ctrlFremde { position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); } #ctrlFremde:active { transform: translateY(-50%) scale(.93); } #ctrlFremde.aus { color: #b4bfcd; background: #f1f5f9; } #ctrlFremde.aus::after { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; border-radius: 2px; background: #94a3b8; transform: rotate(-38deg); } /* Joystick: runder Hebel mit zwei Achsen, die Auslenkung bestimmt das Tempo. Hoch/runter zoomt, links/rechts dreht die Karte, ein Druck in die Mitte holt den Standort. Er ist größer als die runden Knöpfe und ragt aus der Reihe nach oben wie nach unten heraus – die vier Hinweise sitzen an seinen Rändern, damit man auch ohne Erklärung sieht, wohin sich der Knopf ziehen lässt. */ .map-ctrl.joystick { width: 104px; height: 104px; border-radius: 50%; position: relative; padding: 0; cursor: grab; touch-action: none; } .map-ctrl.joystick:active { transform: none; } /* nicht das ganze Pad stauchen */ .map-ctrl.joystick.dragging { border-color: rgba(37, 99, 235, .35); cursor: grabbing; } .joy-hint { position: absolute; width: 15px; height: 15px; color: #b3bfcf; pointer-events: none; user-select: none; z-index: 1; } .joy-up { top: 7px; left: 50%; transform: translateX(-50%); } .joy-down { bottom: 7px; left: 50%; transform: translateX(-50%); } /* Beide Dreh-Pfeile sind dasselbe Bild; der linke wird gespiegelt. */ .joy-left { left: 8px; top: 50%; transform: translateY(-50%) scaleX(-1); } .joy-right { right: 8px; top: 50%; transform: translateY(-50%); } .joy-knob { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, #3b82f6, var(--accent-2)); box-shadow: 0 3px 9px rgba(29, 78, 216, .45), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translate(-50%, -50%); transition: transform .14s cubic-bezier(.2, .8, .3, 1); display: flex; align-items: center; justify-content: center; } /* Das Fadenkreuz im Knopf. Es ersetzt einen eigenen Standort-Knopf: nur daran ist zu sehen, dass ein Druck in die Mitte den Standort holt. */ .joy-me { width: 20px; height: 20px; color: #fff; opacity: .58; pointer-events: none; transition: opacity .18s ease; } .map-ctrl.joystick.active .joy-me { opacity: 1; } /* Während die Ortung läuft, pulst das Fadenkreuz. Das ist die Antwort auf den Tipp: ein Fix kann draußen Sekunden dauern, und ohne sichtbares „ich suche" hält man den Knopf für kaputt und drückt weiter. */ @keyframes joy-sucht { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .map-ctrl.joystick.sucht .joy-me { animation: joy-sucht 1s ease-in-out infinite; } .map-ctrl.joystick.dragging .joy-knob { transition: none; box-shadow: 0 2px 10px rgba(15, 23, 42, .4), 0 0 0 5px rgba(37, 99, 235, .22); } @keyframes joy-tap { from { box-shadow: 0 2px 7px rgba(15, 23, 42, .3), 0 0 0 0 rgba(37, 99, 235, .35); } to { box-shadow: 0 2px 7px rgba(15, 23, 42, .3), 0 0 0 16px rgba(37, 99, 235, 0); } } .joy-knob.tapped { animation: joy-tap .45s ease-out; } /* ---- Eigener Standort ---- Blauer Punkt, bewusst rund und ohne Spitze: er ist keine Nadel, sondern zeigt, wo man selbst steht. Nadeln hängen mit der Unterkante am Ort – der Punkt wird um seine halbe Höhe nach unten geschoben, damit seine MITTE auf dem Standort sitzt. */ .me-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .45); transform: translateY(50%); pointer-events: none; } .me-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(37, 99, 235, .35); animation: me-pulse 2s ease-out infinite; } @keyframes me-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .me-dot::after { animation: none; opacity: 0; } } /* ---- Die Mannschaft auf der Karte ---- Ein Kreis mit Initialen in der Kontofarbe, darunter eine kurze Spitze: die Spitze sitzt auf dem Standort, wie bei einer Nadel. Bewusst KEINE Nadelform – eine Nadel ist ein Haus, das hier ist ein Mensch. Der Name steht rechts daneben, damit man nicht erst tippen muss, um zu wissen, wer das ist. */ .kollege { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 7px; cursor: pointer; } .kollege::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid var(--c); border-bottom: 0; } .kollege-kreis { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .45); } .kollege-name { position: absolute; left: calc(50% + 21px); top: 8px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .25); } /* Live: ein Ring läuft nach außen – so fällt ein Kollege auf, der sich gerade bewegt, und unterscheidet sich vom Punkt, an dem vor einer halben Stunde jemand stand. */ .kollege.live .kollege-kreis::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); animation: kollege-puls 2s ease-out infinite; } @keyframes kollege-puls { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } } .kollege.offline .kollege-kreis::after { animation: none; opacity: 0; } /* Älter als drei Minuten: blass – er WAR hier. */ .kollege.alt { opacity: .55; } .kollege.alt .kollege-kreis { filter: saturate(.55); } /* Aus der Mannschaft angesprungen: einmal kurz hüpfen, damit man ihn findet. */ .kollege.gesucht { animation: kollege-gesucht .9s cubic-bezier(.3, 1.6, .5, 1); } @keyframes kollege-gesucht { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.25); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .kollege.live .kollege-kreis::after, .kollege.gesucht { animation: none; } } /* Kopfzeile: der eigene Standort kommt bei den anderen an. */ .live-ort { color: #86efac; margin-left: 1px; } .live.teilt { color: #bbf7d0; } /* =========================================================================== Nadeln =========================================================================== Tropfenform, mit der Spitze am Ort. Die Füllung ist die Farbe des Ausgangs – dieselbe wie auf den Ausgangskacheln und in jeder Liste, damit sich eine Nadel ohne Umrechnung lesen lässt. */ .pin { position: relative; width: 32px; height: 32px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--pin-color, #64748b); border: 2.5px solid #fff; box-shadow: 0 3px 9px rgba(15, 23, 42, .42); display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Offene Nadel: weiß gefüllt. Weil der Rand aller Nadeln ebenfalls weiß ist, bekäme sie sonst gar keine Kontur – der dunkle Ring übernimmt das. */ .pin.offen { box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .55), 0 3px 9px rgba(15, 23, 42, .42); } /* ---- Die Nadeln der anderen ---- Halbe Deckkraft, und darum der Ring in der Farbe ihres Kontos. Die Deckkraft sagt „nicht meine" – sie sagt aber nicht, WESSEN, und bei zwei Leuten in derselben Straße ist genau das die Frage. Ein Name passt auf 32px nicht, eine Farbe schon. Dieselbe Farbe trägt das Konto in der Mannschaftsliste, in der Übersicht und am eigenen Schild in der Kopfzeile. */ .pin.fremd { opacity: .5; box-shadow: 0 0 0 2.5px var(--pin-owner, #64748b), 0 3px 9px rgba(15, 23, 42, .42); } .pin.fremd.offen { box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .45), 0 0 0 4px var(--pin-owner, #64748b), 0 3px 9px rgba(15, 23, 42, .42); } /* Eine fremde Nadel, die GERADE über die Leitung hereingekommen ist, blitzt einmal auf. Ohne das erscheint sie lautlos, und man hält sie beim nächsten Blick für eine, die schon immer da war. */ .pin.neu { animation: pin-neu 1.6s cubic-bezier(.22, 1, .36, 1); z-index: 9; } @keyframes pin-neu { 0% { opacity: 0; transform: rotate(-45deg) scale(.3); } 35% { opacity: 1; transform: rotate(-45deg) scale(1.28); } 55% { opacity: 1; transform: rotate(-45deg) scale(1); } 100% { opacity: .5; transform: rotate(-45deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .pin.neu { animation: none; } } /* Die Zahl steht auf der Farbe des Ausgangs – die reicht von hellem Followup-Gelb bis zum fast schwarzen „Übersprungen". Welche Schriftfarbe darauf lesbar ist, rechnet pinInk() je Nadel aus (--pin-ink). */ .pin span { transform: rotate(45deg); color: var(--pin-ink, var(--ink)); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .pin.selected { width: 40px; height: 40px; z-index: 10; opacity: 1; /* auch eine fremde steht offen voll da */ box-shadow: 0 0 0 4px rgba(37, 99, 235, .45), 0 5px 14px rgba(15, 23, 42, .45); } .pin.selected span { font-size: 14px; } /* Am Finger: gestrichelter Ring und ein Hauch größer. Der Unterschied muss aus dem Augenwinkel erkennbar sein – man schaut beim Ziehen auf die Karte, nicht auf den Knopf, den man gerade gedrückt hat. */ .pin.ziehbar { cursor: grab; outline: 2.5px dashed var(--accent); outline-offset: 3px; } .pin.ziehbar:active { cursor: grabbing; } /* Während ein Haus am Finger hängt, tritt der Rest der Karte zurück – sonst greift man im Gedränge die falsche Nadel. */ body.move-mode .pin:not(.ziehbar), body.move-mode .cluster { opacity: .35; } /* Die Blase hängt wie jede Nadel mit ihrer Unterkante am Ort – die halbe Höhe zurück, damit ihre MITTE auf der Lage sitzt. Ohne das säße sie um ihren halben Durchmesser darüber, und der ist je nach Größe verschieden. */ .cluster { --fill: #cbd5e1; transform: translateY(50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fill); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(15, 23, 42, .42); color: var(--ink); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; cursor: pointer; } /* Eine Blase gehört genau EINEM Konto – gebündelt wird je Konto, nie gemischt (siehe applyClustering in main.js). Ist es nicht meines, tritt sie zurück wie eine fremde Nadel: dieselben 50 %, und derselbe Ring in der Farbe ihres Kontos, damit man auch herausgezoomt sieht, wessen Gegend das ist. */ .cluster.fremd { opacity: .5; box-shadow: 0 0 0 2.5px var(--blase-owner, #fff), 0 3px 10px rgba(15, 23, 42, .42); } /* =========================================================================== Das Ausgangs-Blatt =========================================================================== Das Blatt, das ein Kartentipp aufzieht: oben, wonach gefragt wird, in der Mitte die sieben Ausgänge als Kacheln, unten die Wege aus dem Blatt heraus (verschieben, löschen, abbrechen). Im Hochformat kommt es von unten und deckt gut die halbe Höhe ab – der Daumen erreicht jede Kachel, ohne dass die Hand umgreift. Am Schreibtisch steht dasselbe Blatt als Kärtchen in der Mitte. Es hängt am , nicht in der Kartenansicht: so deckt es auch die Kopfzeile ab, und beim Schließen verschwindet es spurlos. */ .blatt { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1); animation: blatt-grund .18s ease; } @keyframes blatt-grund { from { opacity: 0; } to { opacity: 1; } } .blatt-box { width: min(460px, 100%); max-height: 88%; background: var(--card); border-radius: 26px 26px 0 0; padding: 0 16px calc(16px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -16px 50px rgba(15, 23, 42, .28); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: blatt-auf .24s cubic-bezier(.32, .72, 0, 1); } @keyframes blatt-auf { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Beim Schließen gleitet es hinaus, statt schlagartig zu verschwinden – ein Abbruch soll nicht aussehen wie ein Fehler. */ .blatt.zu { animation: blatt-grund .18s ease reverse forwards; pointer-events: none; } .blatt.zu .blatt-box { animation: blatt-auf .18s cubic-bezier(.32, .72, 0, 1) reverse forwards; } /* Wird nur der INHALT ersetzt (eine Meldung von der Leitung zur offenen Nadel), soll das Blatt nicht noch einmal hereinfahren. */ .blatt.ohne-anlauf, .blatt.ohne-anlauf .blatt-box { animation: none; } @media (prefers-reduced-motion: reduce) { .blatt, .blatt-box, .blatt.zu, .blatt.zu .blatt-box { animation: none; } } @media (min-width: 640px) { .blatt { align-items: center; } .blatt-box { width: min(500px, 100%); border-radius: 24px; padding: 4px 20px 20px; max-height: 86%; box-shadow: var(--shadow-pop), 0 0 0 1px rgba(15, 23, 42, .04); animation: blatt-mitte .2s cubic-bezier(.2, .9, .3, 1); } @keyframes blatt-mitte { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .blatt.zu .blatt-box { animation: blatt-mitte .16s ease reverse forwards; } .blatt-griff { display: none; } } /* Der Griff ist hier reine Zierde – gezogen wird am Blatt nicht. Er sagt aber auf einen Blick „das kam von unten und geht auch wieder dorthin". */ .blatt-griff { flex: 0 0 auto; align-self: center; width: 38px; height: 5px; border-radius: 3px; background: #d5dce6; margin: 9px 0 2px; } /* Der Kopf klebt oben: bei sieben Kacheln und einem Verlauf darunter scrollt das Blatt, und dann muss sichtbar bleiben, worum es geht. */ .blatt-kopf { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 10px; background: var(--card); border-bottom: 1px solid var(--line-soft); } .blatt-titel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .blatt-titel strong { font-size: 17px; font-weight: 700; letter-spacing: -.015em; } .blatt-titel small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Die neun Ausgänge ---- Alle gleichwertig, 3 × 3 (seit 31.10.2026 mit „Später klingeln"; vorher 4 × 2, davor sechs zu dritt, Übersprungen und Lead als Leisten). */ .ab-raster { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-bottom: 2px; } .ab-kachel { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink-2); box-shadow: var(--shadow-tile); transition: transform .14s var(--ease), border-color .15s, background .15s, box-shadow .15s; } .ab-kachel .ab-ic { width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 11%, #fff); } @media (hover: hover) { .ab-kachel:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--c) 35%, transparent); transform: translateY(-1px); } } /* Der Druck muss am Finger ankommen: die Kachel IST die Antwort, es gibt kein „Übernehmen" dahinter. */ .ab-kachel:active { transform: scale(.96); background: var(--line-soft); } .ab-ic { color: var(--c); display: flex; } .ab-l { font-size: 11.5px; font-weight: 650; line-height: 1.15; text-align: center; overflow-wrap: anywhere; hyphens: auto; } /* Der gesetzte Ausgang trägt seine Farbe voll – man soll beim Aufschlagen des Blattes sehen, was hier schon steht, ohne die Kopfzeile zu lesen. */ .ab-kachel.on { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: color-mix(in srgb, var(--c) 45%, #fff); color: color-mix(in srgb, var(--c) 74%, #0f172a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, #fff); } .ab-kachel.on .ab-ic { color: #fff; background: var(--c); } /* ---- Feinere Ausgänge (seit 28.10.2026) ---- Nach dem Tipp auf Absage, Ungeeignet … die Gründe als Chips, zwei je Reihe. */ .fein-raster { flex: 0 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-bottom: 2px; } .fein-chip { appearance: none; cursor: pointer; text-align: left; min-height: 46px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 14px; border-left: 4px solid var(--c); background: #fff; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; box-shadow: var(--shadow-tile); transition: transform .14s var(--ease), background .15s; } .fein-chip:active { transform: scale(.97); background: var(--line-soft); } /* Wie oft der Grund schon gewählt wurde – klein oben rechts im Chip. */ .fein-chip { position: relative; padding-right: 30px; } .fein-n { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #0f172a); } .fein-n.null { background: var(--line-soft); color: #94a3b8; } .fein-chip.sonstige { color: #64748b; } .fein-chip.on { background: color-mix(in srgb, var(--c) 10%, #fff); } .fein-sonst { display: flex; gap: 8px; align-items: stretch; } .fein-sonst[hidden] { display: none; } .fein-sonst textarea { flex: 1 1 auto; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; resize: none; } @media (min-width: 520px) { .fein-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- Name, Notiz, Termin (seit 10.10.2026) ---- Eingeklappt eine Leiste über den Kacheln; aufgeklappt drei Felder. Schrift 16px in den Feldern: darunter zoomt Safari beim Antippen die Seite auf. */ .ab-details { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfe; } .ab-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); } .ab-details > summary::-webkit-details-marker { display: none; } .abd-ic { display: flex; color: var(--accent); flex: 0 0 auto; } .abd-l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .abd-pfeil { flex: 0 0 auto; color: var(--muted); transition: transform .15s; } .ab-details[open] .abd-pfeil { transform: rotate(180deg); } .ab-details[open] > summary { border-bottom: 1px solid var(--line-soft); } .abd-felder { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; } .abd-f { display: flex; flex-direction: column; gap: 4px; } .abd-f > span:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .abd-f input, .abd-f textarea { width: 100%; display: block; appearance: none; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; color: var(--ink); padding: 9px 11px; min-height: 42px; font: inherit; font-size: 16px; } .abd-f textarea { resize: vertical; min-height: 64px; line-height: 1.35; } .abd-f input:focus, .abd-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .abd-termin { display: flex; gap: 6px; align-items: center; } .abd-termin input { flex: 1 1 auto; min-width: 0; } .abd-termin .icon-btn[hidden] { display: none; } .abd-termin-wahl { appearance: none; cursor: pointer; flex: 1 1 auto; min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; } .abd-termin-wahl svg { flex: 0 0 auto; color: var(--accent); } .abd-termin-wahl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abd-termin-wahl.leer { color: var(--muted); font-weight: 500; } .abd-termin-wahl:active { background: var(--line-soft); } .abd-f.fehlt > span:first-child { color: #dc2626; } .abd-f.fehlt input, .abd-f.fehlt .abd-termin-wahl { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); } .tk-wann { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); } /* ---- Mini-Kalender beim Eintragen eines Termins ----------------------------- */ .mk { position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .35); } .mk-box { width: min(560px, 100%); height: min(92%, 760px); background: var(--card); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--safe-bottom); box-shadow: 0 -16px 50px rgba(15, 23, 42, .3); animation: blatt-auf .22s cubic-bezier(.32, .72, 0, 1); } @media (min-width: 640px) { .mk { align-items: center; } .mk-box { border-radius: 22px; height: min(88%, 760px); animation: blatt-mitte .2s cubic-bezier(.2, .9, .3, 1); } } .mk-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; } .mk-kopf .btn { flex: 0 0 auto; } .mk-leiste { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; } .mk-leiste .at-schritt { width: 34px; height: 44px; } .mk-leiste .zurueck svg { transform: rotate(180deg); } .mk-tage { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .mk-tag { appearance: none; cursor: pointer; border: 1px solid transparent; border-radius: 10px; background: none; display: flex; flex-direction: column; align-items: center; padding: 3px 0 1px; color: var(--ink-2); font: inherit; } .mk-tag span { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .mk-tag b { font-size: 15px; font-weight: 700; line-height: 1.2; } .mk-tag i { font-style: normal; font-size: 10px; line-height: 10px; height: 10px; color: var(--accent); letter-spacing: -1px; } .mk-tag.sicht { background: var(--accent-soft); } .mk-tag.heute b { color: var(--accent); } .mk-tag.gewaehlt { border-color: var(--accent); } .mk-rkopf, .mk-ganz { display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); } .mk-rkopf span { text-align: center; padding: 4px 0; } .mk-rkopf span.heute { color: var(--accent); } .mk-ganz span { padding: 2px 4px; font-size: 10.5px; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mk-grid { --hh: 48px; display: grid; grid-template-columns: 40px minmax(0, 1fr); } .mk-std { height: var(--hh); position: relative; top: -7px; padding: 0 5px; text-align: right; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .mk-stunden { border-right: 1px solid var(--line); } .mk-spalten { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-dcol { position: relative; border-right: 1px solid var(--line-soft); cursor: copy; } .mk-dcol.heute { background: var(--accent-soft); } .mk-slot { height: var(--hh); border-bottom: 1px solid var(--line-soft); pointer-events: none; } .mk-ev { position: absolute; z-index: 1; margin-left: 1px; pointer-events: none; overflow: hidden; padding: 1px 4px; border-radius: 5px; font-size: 10.5px; line-height: 1.25; color: #fff; background: var(--c); border-left: 3px solid rgba(0, 0, 0, .2); } .mk-ev.fremd { background: #e2e8f0; color: #334155; border-left-color: #94a3b8; } .mk-neu { position: absolute; z-index: 3; margin-left: 2px; touch-action: none; cursor: grab; user-select: none; display: flex; flex-direction: column; overflow: hidden; padding: 2px 6px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11px; line-height: 1.25; box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(37, 99, 235, .45); transition: box-shadow .15s; } .mk-neu b { font-weight: 800; white-space: nowrap; } .mk-neu span { opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-neu.kurz { flex-direction: row; align-items: center; gap: 5px; padding-block: 0; } .mk-neu.fu { background: #ca8a04; box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(202, 138, 4, .45); } .mk-neu.konflikt { box-shadow: 0 0 0 2px #dc2626, 0 4px 14px rgba(220, 38, 38, .35); } .mk-neu.zieht { cursor: grabbing; opacity: .92; box-shadow: 0 0 0 2px #fff, 0 10px 26px rgba(15, 23, 42, .35); } .mk-fuss { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px 10px; border-top: 1px solid var(--line); } .mk-wahl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .mk-wahl > svg { flex: 0 0 auto; color: var(--accent); } .mk-wahl > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .mk-wahl small { color: #b91c1c; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-wahl.konflikt > svg { color: #dc2626; } .mk-wahl input[type="time"] { flex: 0 0 auto; width: 100px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; } .mk-tipp { font-size: 11.5px; color: var(--muted); } .mk-tipp:empty { display: none; } .mk-warn { font-size: 11.5px; color: #b45309; } .abd-kal, .abd-hinweis { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: -4px; } .abd-kal[hidden] { display: none; } /* Fotos zur Notiz (seit 15.10.2026) */ .foto-reihe { display: flex; flex-wrap: wrap; gap: 8px; } .foto-mini, .foto-neu { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-field); overflow: hidden; } .foto-mini { padding: 0; border: 1px solid var(--line); background: var(--line-soft); cursor: zoom-in; } .foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; } .foto-mini.wartet img { opacity: .6; } .foto-wartet { position: absolute; right: 3px; bottom: 3px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; background: rgba(15, 23, 42, .75); color: #fff; font-size: 11px; line-height: 18px; text-align: center; } .foto-neu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px dashed var(--line); background: #fff; color: var(--accent); cursor: pointer; font-size: 11px; font-weight: 600; } .foto-neu:active { background: var(--line-soft); } .lese-fotos { flex: 0 0 auto; margin: 0 0 10px; } .foto-gross { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; background: #020617; touch-action: pan-y pinch-zoom; } .fg-bild { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .fg-oben { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-top) + 8px) 10px 8px 16px; background: linear-gradient(rgba(2, 6, 23, .7), transparent); color: #e2e8f0; } .fg-info { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fg-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .fg-btn.fragt { background: #dc2626; } .fg-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; } .fg-pfeil.links { left: 8px; } .fg-pfeil.rechts { right: 8px; } .fg-pfeil[hidden] { display: none; } /* Adresse, Name, Termin im Kopf des Blattes */ .blatt-titel small.adr-zeile { display: flex; align-items: center; gap: 4px; } .blatt-titel small.adr-zeile svg { flex: 0 0 auto; } .blatt-titel small.lese-notiz { white-space: pre-wrap; color: var(--ink-2); margin-top: 2px; } /* ---- Fuß des Blattes ---- */ .blatt-fuss { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 2px; } .blatt-fuss .btn { flex: 1 1 0; } .blatt-fuss.fragt { flex-wrap: wrap; } .fuss-frage { flex: 1 0 100%; font-size: 13px; font-weight: 600; color: #b91c1c; padding: 2px 2px 4px; } .btn.gefahr { background: #dc2626; border-color: #dc2626; color: #fff; } .btn.gefahr:active { background: #b91c1c; } @media (hover: hover) { .btn.gefahr:hover { background: #c81e1e; border-color: #c81e1e; } } /* ---- Zum Lesen: die Nadel eines anderen Kontos ---- */ .lese-wer { display: flex; align-items: center; gap: 7px; color: var(--c); } .fremd-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: .4; } .fremd-punkt.on { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); } .lese-chip { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c, #cbd5e1) 35%, #fff); background: color-mix(in srgb, var(--c, #cbd5e1) 7%, #fff); } .lese-chip .tile-ic { background: var(--c, #94a3b8); color: #fff; width: 34px; height: 34px; border-radius: 11px; } .lese-l { display: flex; flex-direction: column; min-width: 0; } .lese-l strong { font-size: 14.5px; font-weight: 650; } .lese-l small { font-size: 12px; color: var(--muted); } .lese-verlauf > h4 { margin: 0 0 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .hist { display: flex; flex-direction: column; gap: 2px; } .hist-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; } .hist-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); } .hist-label { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .hist-time { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Der gemeinsame Icon-Chip – gebraucht ihn nur noch der Lese-Chip. */ .tile-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--line-soft); color: #a5b2c4; } /* =========================================================================== Eingabefelder mit Icon =========================================================================== Nur noch die Suche in der Übersicht – an einer Nadel gibt es nichts zu tippen. */ .ifield { position: relative; } .ifield-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; color: #a5b2c4; pointer-events: none; transition: color .15s; } .ifield input { width: 100%; display: block; appearance: none; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; color: var(--ink); padding: 9px 11px 9px 38px; min-height: 40px; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; } .ifield input::placeholder { color: #aab6c6; } .ifield input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .ifield:focus-within .ifield-ic { color: var(--accent); } .ifield-sm .ifield-ic { left: 9px; } .ifield-sm input { min-height: 36px; padding: 7px 9px 7px 32px; font-size: 13px; font-weight: 600; } /* =========================================================================== Knöpfe =========================================================================== */ .icon-btn { appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; } .icon-btn:active { background: var(--line-soft); } @media (hover: hover) { .icon-btn:hover { background: var(--line-soft); color: var(--ink); } } .btn { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 8px 14px; min-height: 44px; font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s var(--ease); } .btn:active { background: var(--line-soft); transform: scale(.985); } @media (hover: hover) { .btn:hover { background: #f8fafc; border-color: #d5dce6; } } .btn.block { width: 100%; } .btn.ghost-danger { color: #e11d48; border-color: #fadfe4; background: #fff; } .btn.ghost-danger:active { background: #fff1f2; } .chip { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 6px 12px; min-height: 34px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, color .15s; } .chip:active { background: var(--line-soft); } @media (hover: hover) { .chip:not(.on):hover { border-color: #d0d8e3; color: var(--ink); } } .chip.on { border-color: color-mix(in srgb, var(--accent) 55%, #fff); color: var(--accent-2); background: var(--accent-soft); } /* =========================================================================== Listen (Übersicht, Mannschaft) =========================================================================== */ .filterbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .fkacheln { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; } .fkachel { appearance: none; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-height: 40px; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-tile); transition: border-color .15s, background .15s; } .fkachel .tile-ic { width: 26px; height: 26px; border-radius: 8px; background: transparent; color: var(--c); } .fkachel.on { border-color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 8%, #fff); } .fkachel.on .tile-ic { background: var(--c); color: #fff; } .frow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .frow-n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .liste { display: flex; flex-direction: column; gap: 6px; } /* Eine Zeile: Farbpunkt des Ausgangs, Adresse, Zeit. Als