:root { --blue: #2d7dc4; --blue-dark: #1f5d92; --bg: #f6f7f9; --card: #ffffff; --border: #e2e5ea; --text: #1c2127; --text-secondary: #6b7280; --success-bg: #e8f5ea; --success-text: #1e7a34; --warning-bg: #fdf3e3; --warning-text: #8a5a07; --danger: #c0392b; --radius: 10px; /* Semantik-Töne, die vorher hart im Code standen - nötig für den Dunkelmodus */ --success-border: #cdeed3; --info-bg: #eaf2fb; --info-border: #c7dcf2; --tint-ueberfaellig-bg: #fdf3f1; --tint-ueberfaellig-bd: #f3c9c2; --tint-bald-bg: #fefaf1; --tint-bald-bd: #f0dca6; --tint-faellig-bg: #eaf5f8; --tint-faellig-bd: #c3e2ea; } /* ---------------- Dunkelmodus (folgt dem Handy oder der Wahl in den Einstellungen; html.dark wird ganz früh im gesetzt, damit nichts hell aufblitzt) ---------------- */ html.dark { --blue: #4a97d6; --blue-dark: #2d7dc4; --bg: #10151c; --card: #1b232e; --border: #2b3644; --text: #e7ecf2; --text-secondary: #94a0af; --success-bg: #17301f; --success-text: #74d091; --warning-bg: #33290f; --warning-text: #e5b95e; --danger: #e26557; --success-border: #2a4a34; --info-bg: #16283a; --info-border: #24405c; --tint-ueberfaellig-bg: #33201c; --tint-ueberfaellig-bd: #55322b; --tint-bald-bg: #2f2814; --tint-bald-bd: #4d421f; --tint-faellig-bg: #16303a; --tint-faellig-bd: #24485a; } html.dark input, html.dark textarea, html.dark select { background: var(--card); border-color: var(--border); color: var(--text); color-scheme: dark; /* native Datums-/Auswahlelemente in dunkel */ } /* Unterschrift bleibt IMMER auf weißem Grund (landet so im PDF) - inline background:white auf den Canvas-Elementen gewinnt ohnehin, hier nur zur Sicherheit */ html.dark canvas { background: #fff; } html.dark .modal-box { background: var(--card); } html.dark .highlight-box { background: #1d2a38; } html.dark .material-reminder { background: var(--warning-bg); border-color: #4d421f; } html.dark .ptr-indicator { background: var(--card); } html.dark .logo-watermark { opacity: 0.05; } html.dark .glas-hinweis-box { background: #322a10; border-color: #4d421f; border-left-color: #b98f1f; } html.dark .glas-hinweis-box .glas-hinweis-title { color: #e5b95e; } /* Die Fliesstexte in Hinweis- und Notiz-Box hatten nur eine helle Fassung (dunkles Braun bzw. dunkles Blau). Auf dem dunklen Kasten waren sie kaum zu lesen. */ html.dark .glas-hinweis-box .glas-hinweis-text { color: #e6d3a4; } html.dark .glas-notiz-box { background: #18242f; border-color: #27394b; color: #bcd4ec; } html.dark .glas-cal-cell { border-top-color: var(--border); } html.dark .glas-cal-cell:hover { background: #1e2833; } html.dark .glas-cal-cell.is-selected { background: #1d3450; } html.dark .glas-cal-cell.out-month .glas-cal-daynum { color: #46525f; } html.dark .glas-cal-kw { border-top-color: var(--border); color: #4d5a68; } html.dark .glas-seg-btn.on { background: #26313f; } html.dark .glas-menu-item:hover { background: #222c38; } html.dark .glas-sheet-chip:hover { background: #26313f; } html.dark .week-heading { color: var(--text-secondary); } html.dark .cal-chip { filter: brightness(0.92); } html.dark .scheine-item { border-color: var(--border); } * { box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; touch-action: pan-y; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.5px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } .wrap { max-width: 720px; margin: 0 auto; padding: 24px 18px 80px; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.2px; } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } h1 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.2px; } h2 { font-size: 13.5px; font-weight: 600; margin: 0 0 10px; } p { line-height: 1.5; } .muted { color: var(--text-secondary); font-size: 12.5px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 12px; } .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease; } .btn:hover { background: var(--bg); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--blue); border-color: var(--blue); color: white; } .btn-primary:hover { background: var(--blue-dark); } .btn-danger { color: var(--danger); } .btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 15px; } .btn-sm { padding: 5px 9px; font-size: 12px; } input, textarea, select { width: 100%; font-size: 15px; font-family: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: white; color: var(--text); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45, 125, 196, 0.12); } label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; } .field { margin-bottom: 14px; } .row { display: flex; gap: 12px; } .row > * { flex: 1; } .badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; } .badge-open { background: var(--warning-bg); color: var(--warning-text); } .badge-signed { background: var(--success-bg); color: var(--success-text); } .badge-danger { background: #fdecea; color: var(--danger); } /* Fällig = orange, Kommend = neutral/weiß, Terminiert = blau (5-Zustands-Logik) */ .badge-faellig { background: #fdf0dc; color: #b26a08; } .badge-kommend { background: var(--surface-2, #eef0f2); color: var(--text-secondary); border: 1px solid var(--border); } .badge-terminiert { background: #e2f1f5; color: #206a80; } :root[data-theme="dark"] .badge-faellig { background: #3a2a12; color: #e6a94e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-faellig { background: #3a2a12; color: #e6a94e; } } .glas-ring { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--ring-color, var(--blue)) var(--pct, 0%), var(--border) 0); transition: background 0.3s ease; } .glas-ring-inner { width: 36px; height: 36px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .glas-section-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin: 22px 0 10px; } .glas-section-title:first-child { margin-top: 4px; } .glas-empty { text-align: center; padding: 50px 20px; } .glas-empty .glas-empty-icon { font-size: 42px; margin-bottom: 12px; } .glas-empty p { margin: 0; } /* Die App baut Formulare (Touren-/Objekt-Planung) bei jedem Tastendruck/Klick komplett neu auf - die normale .card-Eintrittsanimation würde dort bei jeder Kleinigkeit erneut abspielen und wirkt dann eher störend als schön. Innerhalb der Glasreinigung-Seiten daher abgeschaltet. */ .glas-static .card, .glas-static .glas-welcome-logo, .glas-static .glas-welcome-title, .glas-static .glas-welcome-sub, .glas-static .glas-welcome-btn { animation: none !important; } .glas-reorder-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); background: var(--card); } .glas-reorder-row.dragging { opacity: 0.5; } .glas-reorder-handle { cursor: grab; touch-action: none; font-size: 18px; color: var(--text-secondary); padding: 4px 6px; flex-shrink: 0; } .glas-reorder-handle:active { cursor: grabbing; } /* GEKO-Logo sitzt auf den Glasreinigungs-Seiten oben LINKS statt rechts (etwas kleiner, damit es nicht mit dem Header-Text kollidiert) */ .glas-logo-left .logo-badge { right: auto; left: 18px; top: -20px; width: 76px; height: 76px; } .glas-logo-left .logo-badge img { height: 66px; } .glas-logo-left .logo-watermark { right: auto; left: -110px; transform: rotate(-8deg); } .glas-logo-left .app-header { padding-bottom: 52px; } .glas-logo-left .app-sheet-content { padding-top: 66px; } /* Kalender darf die volle Breite nutzen (Handy UND Desktop) - aber nur das Kalender-Raster selbst bricht aus der Spalte aus: Reiter, Suche & Co. bleiben mittig in der normalen Breite (Desktop-Fix: Reiter sprangen nach links). */ .glas-fullwidth { overflow-x: hidden; } .glas-fullwidth .glas-cal-card { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .glas-cal-card { padding: 10px 0 12px; border: none; /* fester Hintergrund + weicher Schatten: der Kalender liegt wie ein Blatt auf der Seite, statt dass das Wasserzeichen durchscheint */ background: var(--card); box-shadow: 0 2px 18px rgba(20, 30, 50, 0.09); } /* Mehrfach-Auswahl (Kunden / Objekte / Touren): runde Checkbox links auf der Karte */ .glas-pick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: var(--card); } .glas-pick.on { background: var(--blue); border-color: var(--blue); } .glas-pick.on::after { content: "\2713"; } /* ---------------- Monatskalender (TimeTree-Optik) ---------------- */ /* Kein Spalten-Abstand: mehrtägige Balken laufen optisch durch. Keine Tages-Boxen, nur eine feine Linie zwischen den Wochen. Kräftige Farbbalken mit weißem Text. */ .glas-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; /* 0 = mehrtägige Balken laufen lückenlos durch (Touren/Urlaub) */ } .glas-cal-cell { min-height: 100px; padding: 3px 0 5px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border: none; border-top: 1px solid #eceef2; transition: background 0.12s ease; /* NICHT hidden: die Beschriftung eines mehrtägigen Balkens läuft bewusst über die Tagesgrenzen (siehe .ccal-txt). Einzelne Chips schneiden ihren Text weiterhin selbst ab (overflow am Chip), es läuft also nichts anderes aus. */ overflow: visible; } .glas-cal-cell:hover { background: #f5f7fa; } .glas-cal-cell.is-selected { background: #eaf2fb; } .glas-cal-cell.out-month .glas-cal-daynum { color: #cdd2d9; } /* Tage aus dem Nachbarmonat treten zurueck - ABER nur bei Einzelterminen. Ein mehrtaegiger Balken, der die Monatsgrenze kreuzt, waere sonst zur Haelfte kraeftig und zur Haelfte blass und saehe aus wie zwei kaputte Stuecke (und die Beschriftung, die im ersten Chip sitzt, haette die falsche Deckkraft). Ein Balken gehoert zu EINEM Termin und wird deshalb einheitlich gezeichnet; dass der Tag zum Nachbarmonat gehoert, zeigt schon die graue Tageszahl. */ .glas-cal-cell.out-month .glas-cal-chip:not(.continues-left):not(.continues-right) { opacity: 0.4; } .glas-cal-daynum { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; font-size: 11.5px; font-weight: 500; flex-shrink: 0; } /* Mit KW-Spalte hat jede Zeile 8 Zellen - Samstag blau, Sonntag rot */ .glas-cal-grid.with-kw { grid-template-columns: 15px repeat(7, 1fr); } .glas-cal-grid.with-kw .glas-cal-cell:nth-child(8n-1) .glas-cal-daynum { color: #2d7dc4; } .glas-cal-grid.with-kw .glas-cal-cell:nth-child(8n) .glas-cal-daynum { color: #d6453b; } .glas-cal-kw { border-top: 1px solid #eceef2; padding-top: 7px; text-align: center; font-size: 8.5px; font-weight: 600; color: #b6bdc7; } .glas-cal-daynum.is-today { background: var(--blue); color: white !important; font-weight: 700; } /* Chips: EINE Basisfarbe pro Termin (--c), kräftig gefüllt mit weißem Text, EINZEILIG und kompakt (wie vorher). Urlaub bewusst transparent (siehe .is-urlaub). */ .glas-cal-chip { font-size: 8px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; border-radius: 3px; padding: 1px 3px; /* Der seitliche Rand steckt in einer Variablen: die Desktop-Regel ändert nur die Variable, damit die "läuft weiter"-Regeln darunter wirksam bleiben. Sonst brechen mehrtägige Balken auf dem Desktop auseinander. */ --chip-rand: 1px; margin: 0 var(--chip-rand); background: var(--c, var(--blue)); color: #fff; white-space: nowrap; overflow: hidden; } /* Leere Lane-Zeile: hält exakt die Chip-Höhe frei (unsichtbar), damit mehrtägige Balken Tag für Tag auf derselben Linie liegen und lückenlos durchlaufen. */ .glas-cal-chip-spacer { visibility: hidden; } /* Erledigte Touren: klar als fertig erkennbar (grün + leicht durchgestrichen) */ .glas-cal-chip.is-done { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.92; } /* Der Balkenname liegt in einem absolut positionierten Feld (.ccal-txt) - dorthin vererbt sich text-decoration NICHT (out-of-flow). Ohne diese Zeile war bei fertigen Touren nur der leere Platzhalter durchgestrichen, der Name selbst nicht - "erledigt" war im Monat also gar nicht mehr zu sehen. */ .glas-cal-chip.is-done .ccal-txt { text-decoration: line-through; text-decoration-thickness: 1px; } .glas-cal-chip.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; } /* -1px: die Chips ueberlappen sich minimal. Die Kanten liegen bei 1fr-Spalten fast immer auf KRUMMEN Pixelpositionen (z.B. 262,328) - rechnerisch ohne Luecke, aber beim Rastern entsteht dort eine helle Naht, und der Balken sah zerschnitten aus. Die Ueberlappung ist unsichtbar (gleiche Farbe) und schliesst die Naht sicher. */ .glas-cal-chip.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; } /* Fortsetzungstage tragen jetzt selbst Textstücke (siehe glasCalTextAufTage) und werden mittig gesetzt - so liest sich der Name über den ganzen Balken. */ .glas-cal-chip { text-align: center; } /* Beschriftung eines mehrtägigen Balkens: EIN Textfeld über den gesamten Wochen-Abschnitt (--span Tage), mittig. So liest sich der Balken als EIN Termin - Wörter auf die Tage zu verteilen sah aus wie mehrere Einzeltermine. */ .glas-cal-chip { position: relative; } /* Der Chip mit der Beschriftung darf sie ueber die Tagesgrenze hinaus zeigen - der Text selbst schneidet an SEINER Breite ab, es laeuft also nichts aus. Alle anderen Chips behalten ihr overflow:hidden. */ /* z-index: der beschriftete Chip muss ueber den Folgetagen liegen, sonst wird sein ueberstehender Text davon verdeckt. Betraf besonders erledigte Touren: deren opacity:0.92 macht einen eigenen Stapel-Kontext auf, in dem der Text sonst gefangen ist - der Name war dort komplett unsichtbar. */ .glas-cal-chip.chip-mittext { overflow: visible; z-index: 3; } /* Haelt die Zeilenhoehe, ohne sichtbar zu sein (auch nicht durchgestrichen) */ .ccal-h { visibility: hidden; } .ccal-txt { position: absolute; left: 0; top: 0; bottom: 0; /* border-box: sonst kommt der Innenabstand zur Breite dazu und der Text ragt bei Einzelterminen seitlich aus der Tageszelle heraus. */ box-sizing: border-box; width: calc(var(--span, 1) * 100%); /* Einzeltermine linksbündig: zentriert würde bei zu langem Namen VORNE abgeschnitten ("platz Außenber" statt "Burgplatz Auß"). Nur echte Mehrtages-Balken werden mittig gesetzt - dort ist Platz genug. */ display: flex; align-items: center; justify-content: flex-start; padding: 0 4px; overflow: hidden; white-space: nowrap; pointer-events: none; z-index: 2; } .chip-mittext .ccal-txt { justify-content: center; } /* Urlaub bewusst hell/kursiv zum Unterscheiden von Touren & Terminen. WICHTIG - gegen den Kartenhintergrund gemischt statt halbdurchsichtig: die Balkenstuecke ueberlappen sich um 1px (siehe continues-right). Bei einer halbdurchsichtigen Fuellung addiert sich in dieser Ueberlappung die Deckkraft und an jeder Tagesgrenze stand ein DUNKLER Strich - der Urlaubsbalken sah aus wie mehrere Einzeltage. Deckend gemischt sieht es identisch aus, die Ueberlappung ist aber unsichtbar. */ .glas-cal-chip.is-urlaub { background: color-mix(in srgb, var(--c, var(--blue)) 22%, var(--card)); color: color-mix(in srgb, var(--c, var(--blue)) 80%, var(--text)); font-style: italic; } /* Im Dunkelmodus verschluckt der dunkle Kartengrund die 22% fast komplett - der Urlaubsbalken war kaum vom leeren Tag zu unterscheiden. Etwas kräftiger gemischt bleibt er dezent, ist aber sicher zu sehen. */ html.dark .glas-cal-chip.is-urlaub { background: color-mix(in srgb, var(--c, var(--blue)) 38%, var(--card)); color: color-mix(in srgb, var(--c, var(--blue)) 45%, #fff); } .glas-cal-more { font-size: 8.5px; font-weight: 700; color: var(--text-secondary); padding: 0 4px; } /* Auf großen Screens dürfen die Kacheln deutlich höher werden -> echter Kalender-Look, der den Platz füllt statt in die Länge gezogen zu wirken */ @media (min-width: 760px) { .glas-cal-cell { min-height: 132px; padding: 5px 0; gap: 2px; } .glas-cal-daynum { width: 23px; height: 23px; font-size: 13px; } .glas-cal-chip { font-size: 11px; padding: 2px 6px; letter-spacing: 0; } } /* ============ Untere Reiterleiste (Bottom-Nav) + Tages-Sheet ============ */ /* Handy (Standard): Reiter fest am unteren Rand, Icon über Label. */ .glas-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 20px rgba(20, 30, 50, 0.06); /* eigene Compositing-Ebene: verhindert das Mitwandern/Nachziehen beim Scrollen (iOS) */ transform: translateZ(0); } /* iOS-Gummiband (Overscroll-Bounce) aus: der Bounce zog die fixe Leiste optisch mit hoch. Pull-to-Refresh ist davon unabhängig (eigener Indikator über Touch-Events). */ html, body { overscroll-behavior-y: none; } /* App-Shell (nur Handy + Seiten mit #glasScroller): Der Body ist ein fester Rahmen (Spalten-Flex, nicht scrollbar), der Inhalt scrollt in #glasScroller. Die untere Reiterleiste ist dabei NORMALER Teil des Rahmens statt position:fixed - fixe Elemente wurden auf iOS je nach Zustand versetzt gezeichnet (Leiste hing über dem unteren Rand bzw. rutschte beim Scrollen mit). Im Fluss ist das unmöglich. */ @media (max-width: 759px) { body.glas-shell { /* An die ECHTEN Viewport-Kanten geklammert statt height:100vh/100dvh - die Viewport-Einheiten rechnen in iOS-Standalone-Apps teils falsch und ließen den Body (samt Leiste) über dem unteren Bildschirmrand enden. */ position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; } body.glas-shell #glasScroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } body.glas-shell #glasNavHost { flex: 0 0 auto; } /* Mit Status-Bar-Style "default" reicht die Seite bis an den echten unteren Bildschirmrand - der Home-Balken schwebt über den letzten ~34pt, deshalb bekommt die Leiste dort ihr Sicherheitspolster (mindestens 6px). */ body.glas-shell #glasNavHost .glas-bottomnav { position: static; transform: none; padding-bottom: max(6px, env(safe-area-inset-bottom, 6px)); } /* Leiste ist nicht mehr fix über dem Inhalt -> der große Freihalte-Abstand entfällt */ body.glas-shell:not(.glas-cal-pur) .wrap { padding-bottom: 24px !important; } } .glas-bottomnav .tabs { margin: 0; border-bottom: none; gap: 0; overflow: visible; padding: 3px 2px; touch-action: auto; } .glas-bottomnav .tab-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; margin: 0; border-bottom: none; font-weight: 600; } .glas-bottomnav .tab-btn .tb-ic { font-size: 19px; line-height: 1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .glas-bottomnav .tab-btn .tb-lb { font-size: 10px; line-height: 1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glas-bottomnav .tab-btn.active { color: var(--blue); border-bottom: none; } .glas-bottomnav .tab-btn.active .tb-ic { transform: translateY(-2px) scale(1.12); } body.glas-cal-pur .glas-bottomnav { display: none; } @media (max-width: 759px) { /* Handy: nur die feste Leiste im body-Host (#glasNavHost) zeigen - die Kopie im Content-Fluss ist für den Desktop */ .glas-nav-inflow { display: none; } /* Platz unten, damit die fixe Leiste nichts verdeckt */ body:not(.glas-cal-pur) .wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important; } body:not(.glas-cal-pur) .glas-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); } } /* Desktop: Reiter wieder oben wie gewohnt (Icon neben Label); der body-Host ist dann aus */ @media (min-width: 760px) { #glasNavHost { display: none; } .glas-bottomnav { position: static; background: transparent; border-top: none; box-shadow: none; padding-bottom: 0; } .glas-bottomnav .tabs { border-bottom: 1px solid var(--border); margin-bottom: 18px; gap: 4px; padding: 0; } .glas-bottomnav .tab-btn { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 8px 14px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .glas-bottomnav .tab-btn .tb-lb { font-size: 14px; } .glas-bottomnav .tab-btn .tb-ic { font-size: 14px; } .glas-bottomnav .tab-btn.active { border-bottom-color: var(--blue); } } /* Tages-Detail als Sheet, das von unten hereinfährt (statt zentriertem Popup) */ .modal-overlay.glas-day-sheet-ov { align-items: flex-end; justify-content: center; padding: 0; } .glas-day-sheet { background: var(--card); width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: 0 -10px 40px rgba(20, 30, 50, 0.22); animation: glasSheetUp 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes glasSheetUp { from { transform: translateY(100%); } to { transform: none; } } .glas-sheet-grip { width: 38px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 12px; } @media (prefers-reduced-motion: reduce) { .glas-day-sheet { animation: none; } } /* Solange ein Sheet/Modal offen ist, den Kalender-Hintergrund NICHT mitscrollen lassen (sonst passieren beim Runterwischen des Tages-Sheets 3 Dinge gleichzeitig). */ body.glas-modal-open #glasScroller { overflow: hidden; touch-action: none; } /* ---------------- Startseite (Hallo GEKO Clean) ---------------- */ .glas-welcome { text-align: center; padding: 46px 20px 60px; } .glas-welcome-logo { height: 120px; width: auto; animation: glasLogoIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .glas-welcome-title { margin: 22px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; animation: glasFadeUp 0.6s ease 0.25s both; } .glas-welcome-heart { display: inline-block; animation: glasHeartbeat 1.6s ease-in-out 1s infinite; } /* ---------------- GEKO Hub Startseite (Abteilungs-Auswahl) ---------------- Große Kacheln statt schmaler Listenzeilen: die Abteilung ist die wichtigste Entscheidung auf dieser Seite, also darf sie auch Platz bekommen. Zwei Spalten, damit alles ohne Scrollen ins Bild passt; die Hauptabteilung liegt als breite Kachel oben. Groß genug, um sie mit dem Daumen sicher zu treffen. */ .hub-hero { text-align: center; margin: 22px 0 20px; } .hub-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; animation: glasFadeUp 0.5s ease 0.05s both; } .hub-sub { margin: 0; color: var(--text-secondary); animation: glasFadeUp 0.5s ease 0.15s both; } .hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hub-tile { position: relative; display: flex; flex-direction: column; min-height: 146px; padding: 15px 14px 14px; border-radius: 20px; border: 1px solid var(--border); /* Zarter Farbschimmer der Abteilung (--tint) über der Kartenfläche: die Kacheln sind dadurch schon an der Farbe auseinanderzuhalten, ohne dass es bunt wird. */ background: linear-gradient(160deg, var(--tint, transparent) 0%, transparent 62%), var(--card); color: var(--text); text-decoration: none; box-shadow: 0 2px 10px rgba(20, 40, 70, 0.05); animation: fadeInUp 0.4s ease both; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hub-tile:active { transform: scale(0.97); } .hub-tile:hover { box-shadow: 0 8px 22px rgba(20, 40, 70, 0.1); } .hub-tile .ht-ic { width: 52px; height: 52px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; background: var(--ic, rgba(31, 93, 146, 0.1)); } /* Text unten: die Kacheln sind unterschiedlich lang beschriftet, so stehen die Titel trotzdem alle auf einer Linie. */ .hub-tile .ht-body { margin-top: auto; padding-top: 12px; min-width: 0; } .hub-tile .ht-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; } .hub-tile .ht-sub { margin: 3px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-secondary); } /* Kleiner Pfeil oben rechts - zeigt, dass die Kachel irgendwo hinführt */ .hub-tile .ht-pfeil { position: absolute; top: 15px; right: 14px; font-size: 20px; line-height: 1; color: var(--text-secondary); opacity: 0.55; } /* Breite Kachel (Hauptabteilung): quer über beide Spalten, Icon neben dem Text */ .hub-tile.breit { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 15px; min-height: 0; padding: 17px 16px; } .hub-tile.breit .ht-ic { width: 60px; height: 60px; border-radius: 19px; font-size: 30px; } .hub-tile.breit .ht-body { margin-top: 0; padding-top: 0; flex: 1; } .hub-tile.breit .ht-title { font-size: 18px; } .hub-tile.breit .ht-sub { font-size: 12.5px; } .hub-tile.breit .ht-pfeil { top: 50%; transform: translateY(-50%); font-size: 24px; } html.dark .hub-tile { box-shadow: none; } /* Ab Tablet drei Spalten - sonst werden die Kacheln auf dem Desktop albern breit */ @media (min-width: 720px) { .hub-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .hub-tile { min-height: 168px; padding: 18px 17px 17px; } .hub-tile .ht-ic { width: 58px; height: 58px; font-size: 29px; } .hub-tile .ht-title { font-size: 16.5px; } .hub-tile .ht-sub { font-size: 12.5px; } } /* ---------------- Pull-to-Refresh ---------------- */ .ptr-indicator { position: fixed; top: -12px; left: 50%; transform: translateX(-50%) translateY(-56px); z-index: 300; width: 42px; height: 42px; border-radius: 50%; background: white; box-shadow: 0 4px 14px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .ptr-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #d6dce4; border-top-color: var(--blue); } .ptr-indicator.ready .ptr-spinner { border-top-color: #2f9e51; } .ptr-indicator.refreshing .ptr-spinner { animation: spin 0.7s linear infinite; } /* ---------------- Tour-Detail: Stopps untergeordnet zur Tour-Überschrift ---------------- */ .glas-stop-list { margin-top: 14px; border-top: 1px solid var(--border); } .glas-stop-row { display: flex; gap: 12px; padding: 12px 0 12px 4px; border-bottom: 1px solid var(--border); } .glas-stop-row:last-child { border-bottom: none; } .glas-stop-row.done { background: linear-gradient(90deg, #f2faf3 0%, transparent 70%); border-radius: 8px; } .glas-stop-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .glas-stop-row.done .glas-stop-num { background: #d9f2dd; border-color: #bfe6c8; color: #1e7a34; } .glas-stop-row.ng { opacity: 0.72; } /* ⋯-Aktionsmenü pro Stopp (Tour-Detail) - bündelt alle Buttons, damit die Karte ruhig bleibt */ .glas-stopmenu-toggle { border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 1px 9px; font-size: 18px; line-height: 1.2; color: var(--text-secondary); cursor: pointer; } .glas-stopmenu-toggle:hover, .glas-stopmenu-toggle.on { background: var(--bg); color: var(--text-primary); } .glas-stopmenu { margin: 8px 0 4px auto; max-width: 260px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,0.14); overflow: hidden; } .glas-stopmenu-item + .glas-stopmenu-item { border-top: 1px solid var(--border); } .glas-stopmenu-btn { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 11px 14px; font-size: 14px; background: none; border: none; color: var(--text-primary); cursor: pointer; text-decoration: none; } .glas-stopmenu-btn:hover { background: var(--bg); } .glas-stopmenu-btn.danger { color: var(--danger); } .glas-stop-row.ng .glas-stop-num { background: var(--border); border-color: var(--border); color: var(--text-secondary); } .glas-ng-box { margin-top: 8px; background: var(--surface-2, rgba(120,120,128,0.1)); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--text-secondary); } /* Hinweis-Box für Mitarbeiter am Stopp: bewusst auffällig (gelb + Icon), damit sie niemand übersieht - erscheint nur, wenn am Objekt etwas hinterlegt ist */ .glas-hinweis-box { display: flex; gap: 10px; align-items: flex-start; background: #fff7e0; border: 1px solid #f0dc9c; border-left: 4px solid #e8b931; border-radius: 10px; padding: 10px 12px; margin-top: 12px; } .glas-hinweis-icon { font-size: 17px; line-height: 1.2; flex-shrink: 0; } .glas-hinweis-title { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #8a5a07; } .glas-hinweis-text { margin: 0; font-size: 13px; color: #5c4a12; white-space: pre-line; font-weight: 500; } /* Vollbild-Unterschrift-Sheet. Grund: Das Unterschrift-Canvas hat touch-action:none (zum Zeichnen nötig) - ein Wisch über das Canvas scrollt nicht, sondern malt. Auf kleinen Android-Handys füllte das Canvas fast den Schirm, dadurch kam man nicht mehr zum Speichern-Knopf. Lösung: eigenes Vollbild mit fester Kopf-/Fußleiste. Der Speichern-Knopf steht IMMER unten, der Mittelteil scrollt frei neben dem Canvas. */ .glas-sign-sheet { position: fixed; /* Explizite Seiten statt nur inset: aeltere Engines (u.a. Xiaomi/MIUI-Browser) kennen die inset-Kurzform nicht zuverlaessig. */ top: 0; right: 0; bottom: 0; left: 0; inset: 0; height: 100%; z-index: 300; background: var(--bg); display: flex; flex-direction: column; animation: gssSlideIn 0.22s ease; } @keyframes gssSlideIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .glas-sign-sheet { animation: none; } } .gss-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; background: var(--card); border-bottom: 1px solid var(--border); } .gss-close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); font-size: 17px; cursor: pointer; } .gss-title { min-width: 0; } .gss-title .gss-t { margin: 0; font-weight: 700; font-size: 15.5px; } .gss-title .gss-s { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gss-body { flex: 1 1 auto; /* min-height:0 ist PFLICHT: ohne dehnt sich ein Flex-Kind auf volle Inhaltshoehe und scrollt auf strengeren Engines (u.a. Xiaomi/MIUI) gar nicht - der Fuss wird rausgeschoben. Modernes Chrome verzeiht das, MIUI oft nicht. */ min-height: 0; height: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 16px; } .gss-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--card); border-top: 1px solid var(--border); } .gss-foot .btn-primary { flex: 1 1 auto; justify-content: center; padding: 14px; font-size: 16px; } .gss-foot .gss-clear { flex: 0 0 auto; padding: 14px 16px; } /* Bewusst KEIN 'overflow:hidden' mehr auf dem Body: das konnte auf manchen Handys (v.a. Xiaomi/MIUI) haengen bleiben und die ganze Seite einfrieren. Das Sheet deckt als deckendes Vollbild ohnehin alles ab; Scroll-Ketten verhindert overscroll-behavior. */ /* ================= Bewegung in der MA-Touren-App ================= Grundregel: es werden ausschliesslich transform und opacity bewegt. Beides rechnet die Grafikeinheit des Handys - dadurch laeuft alles fluessig, ohne dass der Browser die Seite neu vermessen muss. Hoehen, Abstaende oder Farben zu animieren waere sichtbar ruckelig. Alle Effekte haengen an der Eintritts-Situation: bei einem Hintergrund-Neuaufbau setzt das JS die Klasse .glas-static und es laeuft bewusst gar nichts. */ /* --- Seitenwechsel: tiefer hinein von rechts, zurueck von links --- */ @keyframes glasVor { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes glasZurueck{ from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } } /* Doppelte Klasse, um das generelle "#view { animation: none }" zu uebertreffen */ body.glas-logo-left #view.glas-vor { animation: glasVor 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; } body.glas-logo-left #view.glas-zurueck { animation: glasZurueck 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; } /* --- Stopp-Karten laufen nacheinander herein --- */ @keyframes gsmKarteRein { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } .gsm-stopp { animation: gsmKarteRein 0.4s cubic-bezier(0.32, 0.72, 0, 1) both; } /* Hintergrund-Neuaufbau: nichts bewegen, sonst flackert die Liste staendig. WICHTIG: nur #view.glas-static - die Klasse steht ausserdem FEST im HTML auf .app-sheet-content (schaltet dort die alte Karten-Animation ab). Ohne das #view davor waeren die Regeln hier dauerhaft aktiv und nichts wuerde laufen. */ #view.glas-static .gsm-stopp { animation: none !important; } /* --- Aufgeklappter Bereich gleitet heraus --- */ @keyframes gsmAufRein { from { opacity: 0; transform: translate3d(0, -7px, 0); } to { opacity: 1; transform: none; } } .gsm-auf { animation: gsmAufRein 0.26s cubic-bezier(0.32, 0.72, 0, 1) both; } #view.glas-static:not(.glas-tipp) .gsm-auf { animation: none !important; } /* Der Pfeil dreht sich beim Aufklappen mit */ @keyframes gsmPfeilDreh { from { transform: rotate(-180deg); } to { transform: rotate(0); } } .gsm-stopp.offen .gsm-pfeil { display: inline-block; animation: gsmPfeilDreh 0.26s cubic-bezier(0.32, 0.72, 0, 1) both; } #view.glas-static:not(.glas-tipp) .gsm-pfeil { animation: none !important; } /* --- Nach dem Unterschreiben: einmal kurz gruen aufleuchten --- */ @keyframes gsmJubel { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 122, 52, 0.42); } 38% { transform: scale(1.022); box-shadow: 0 0 0 9px rgba(30, 122, 52, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 122, 52, 0); } } @keyframes gsmHakenPop { 0% { transform: scale(0.4); opacity: 0; } 55% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .gsm-stopp.frisch-fertig { animation: gsmJubel 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Der Jubel muss die Karten-Bremse uebertreffen - er gehoert zu einer bewussten Aktion. */ #view.glas-static.glas-tipp .gsm-stopp.frisch-fertig { animation: gsmJubel 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; } #view.glas-static.glas-tipp .gsm-stopp.frisch-fertig .gsm-kugel { animation: gsmHakenPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both !important; } .gsm-stopp.frisch-fertig .gsm-kugel { animation: gsmHakenPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both; } /* --- Knopf-Rueckmeldung beim Antippen: kurz nachgeben --- */ .gsm-abtn, .gsm-ahaupt, .glas-navi-opt { transition: transform 0.11s ease, background 0.14s ease; } .gsm-abtn:active, .gsm-ahaupt:active, .glas-navi-opt:active { transform: scale(0.972); } /* Die aufgeklappte Karte hebt sich weich hervor, statt hart umzuspringen */ .gsm-stopp { transition: border-color 0.2s ease, box-shadow 0.24s ease, background 0.2s ease; } /* Wer im Handy "Bewegung reduzieren" eingestellt hat, bekommt gar keine Animation. */ @media (prefers-reduced-motion: reduce) { body.glas-logo-left #view.glas-vor, body.glas-logo-left #view.glas-zurueck, .gsm-stopp, .gsm-auf, .gsm-stopp.offen .gsm-pfeil, .gsm-stopp.frisch-fertig, .gsm-stopp.frisch-fertig .gsm-kugel { animation: none !important; } .gsm-abtn, .gsm-ahaupt, .glas-navi-opt, .gsm-stopp { transition: none !important; } } /* ================= MA-Touren: geoeffnete Tour ================= Aufbau: oben eine schmale Leiste, die beim Scrollen kleben bleibt (Tourname, Aktualisieren-Symbol, Fortschritt, Pfeile), in der Mitte die Stopp-Liste in FESTER Reihenfolge, unten eine feste Leiste mit Anrufen/Navigation/Unterschreiben zum gerade offenen Stopp. Damit ist der Unterschreiben-Knopf immer erreichbar. */ /* Die Tour-Leiste ist bewusst eine normale Karte im Seitenfluss - kein eigener Kopfbalken, der die Seite uebernimmt. Der GEKO-Kopf und das Logo bleiben stehen, damit die Tour Teil derselben App bleibt und sich nicht wie ein eigenes Menue anfuehlt. */ .gsm-bar { margin: 0 0 10px; padding: 12px 14px 13px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .gsm-bar-oben { display: flex; align-items: center; gap: 9px; } .gsm-tour { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsm-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gsm-ic:not(:disabled):hover { background: var(--border); } .gsm-ic:disabled { opacity: 0.32; cursor: default; } .gsm-refresh.is-loading { opacity: 0.6; pointer-events: none; } .gsm-refresh.is-loading .glas-refresh-ic { animation: glasSpin 0.8s linear infinite; } .gsm-bar-unten { display: flex; align-items: center; gap: 9px; margin-top: 11px; } .gsm-mitte { flex: 1; min-width: 0; } .gsm-zeile { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; } .gsm-track { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .gsm-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-reduced-motion: reduce) { .gsm-fill { transition: none; } } /* --- Stopp-Karten --- */ .gsm-stopp { border-radius: 12px; margin-top: 10px; cursor: pointer; background: var(--card); border: 1px solid var(--border); transition: border-color 0.16s ease, box-shadow 0.16s ease; } .gsm-stopp.fertig { background: var(--success-bg); border-color: var(--success-border); } .gsm-stopp.ng { opacity: 0.66; } .gsm-stopp.offen { border: 2px solid #2d7dc4; box-shadow: 0 5px 18px rgba(45, 125, 196, 0.15); } html.dark .gsm-stopp.offen { box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4); } .gsm-z1 { display: flex; align-items: center; gap: 11px; padding: 13px 14px; } .gsm-stopp.offen .gsm-z1 { padding-bottom: 9px; } .gsm-kugel { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #2d7dc4; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; } .gsm-stopp.fertig .gsm-kugel { background: #1e7a34; } .gsm-stopp.ng .gsm-kugel { background: var(--text-secondary); } .gsm-nam { margin: 0; font-weight: 600; font-size: 14.5px; } .gsm-stopp:not(.offen) .gsm-nam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsm-stopp.offen .gsm-nam { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -0.005em; } .gsm-ort { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsm-rechts { flex-shrink: 0; text-align: right; font-size: 12px; line-height: 1.5; } .gsm-rechts b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .gsm-stopp.fertig .gsm-rechts b { color: var(--success-text); } .gsm-pfeil { color: var(--text-secondary); } /* --- aufgeklappter Bereich --- */ .gsm-auf { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 11px; } .gsm-adr { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; white-space: pre-line; padding-left: 37px; margin-top: -3px; } .gsm-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gsm-kacheln.einzeln { grid-template-columns: 1fr; } .gsm-ka { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; } .gsm-ka .k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-secondary); } .gsm-ka .v { font-size: 16px; font-weight: 800; margin-top: 2px; line-height: 1.15; letter-spacing: -0.01em; } .gsm-ka .v.s { font-size: 13.5px; } .gsm-pos { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; } .gsm-posnr { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; line-height: 15px; } .gsm-posart { flex: 1; min-width: 0; } .gsm-posqm { flex-shrink: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .gsm-postext { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; white-space: pre-line; margin: -3px 0 1px 0; } /* Diese Bloecke bringen eigene Abstaende mit - im Flex-Stapel regelt das gap. */ .gsm-auf > .glas-hinweis-box, .gsm-auf > .glas-notiz-box { margin-top: 0; } .gsm-abschluss { border-top: 1px solid var(--success-border); padding-top: 12px; } /* --- Leistungen: eigener, abgesetzter Block --- */ .gsm-posbox { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .gsm-posbox .gsm-poskopf { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 1px; } /* --- Aktionen: eigener Platz am Fuss der Karte, durch eine Linie abgesetzt --- */ .gsm-aktionen { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .gsm-stopp.fertig .gsm-aktionen { border-top-color: var(--success-border); } .gsm-akt-zwei { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } .gsm-abtn { justify-content: center; padding: 12px 8px; font-size: 14px; font-weight: 600; } .gsm-ahaupt { width: 100%; justify-content: center; padding: 14px; font-size: 15.5px; font-weight: 700; } /* Auswahl der Navigations-App (ein Knopf "Navigation" statt drei kleiner Knoepfe) */ .glas-navi-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 320; background: rgba(0, 0, 0, 0.42); display: flex; align-items: flex-end; justify-content: center; animation: glasNaviFade 0.16s ease; } @keyframes glasNaviFade { from { opacity: 0; } to { opacity: 1; } } .glas-navi-sheet { width: 100%; max-width: 460px; box-sizing: border-box; background: var(--card); border-radius: 18px 18px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); animation: glasNaviUp 0.2s ease; } @keyframes glasNaviUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .glas-navi-back, .glas-navi-sheet { animation: none; } } .glas-navi-t { margin: 0; font-weight: 700; font-size: 16px; text-align: center; } .glas-navi-s { margin: 3px 0 12px; font-size: 12.5px; color: var(--text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glas-navi-opt { display: flex; align-items: center; gap: 12px; padding: 14px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg); color: var(--text-primary); text-decoration: none; font-size: 15.5px; font-weight: 600; } .glas-navi-opt:active { background: var(--border); } .glas-navi-ico { flex: 0 0 auto; font-size: 19px; } .glas-navi-pf { margin-left: auto; color: var(--text-secondary); font-size: 17px; font-weight: 400; } .glas-navi-abbruch { width: 100%; justify-content: center; margin-top: 4px; padding: 13px; } /* Mitarbeiter-Login */ .glas-login { max-width: 420px; margin: 8vh auto 0; padding: 4px; } .glas-login-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; } .glas-login-sub { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; } .glas-login-err { background: #fbe0e0; color: #b5371f; border: 1px solid #f0c2bc; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; } html.dark .glas-login-err { background: #3a1a14; color: #e8735c; border-color: #5a2a20; } .glas-welcome-user { margin: 18px 0 0; font-size: 13px; color: var(--text-secondary); } .glas-welcome-user a { color: var(--blue); text-decoration: underline; } .glas-aktiv-toggle { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; margin-top: 2px; } .glas-aktiv-toggle input { width: 18px; height: 18px; flex-shrink: 0; } /* Fetter "Aktualisieren"-Knopf auf den MA-Touren-Seiten (Ersatz fuer Pull-to-Refresh). Doppelte Klasse (.btn.glas-refresh-btn), damit die spaeteren .btn-Regeln die Farbe nicht ueberschreiben. */ .btn.glas-refresh-btn { width: 100%; justify-content: center; gap: 10px; padding: 15px; margin: 4px 0 14px; font-size: 16.5px; font-weight: 700; color: #fff; background: var(--blue); border: none; border-radius: 14px; box-shadow: 0 4px 14px rgba(31, 93, 146, 0.28); } .btn.glas-refresh-btn:active { transform: translateY(1px); } .btn.glas-refresh-btn.is-loading { opacity: 0.7; pointer-events: none; } .glas-refresh-ic { display: inline-block; font-size: 18px; } .btn.glas-refresh-btn.is-loading .glas-refresh-ic { animation: glasSpin 0.8s linear infinite; } @keyframes glasSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .glas-refresh-btn.is-loading .glas-refresh-ic { animation: none; } } /* ---------------- Foto-Lightbox (Vollbild + Swipe) ---------------- */ .photo-viewer { position: fixed; inset: 0; background: rgba(10, 12, 16, 0.94); z-index: 400; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease both; } .photo-viewer .pv-img { max-width: 94vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); user-select: none; -webkit-user-drag: none; } @keyframes pvSlideL { from { opacity: 0.4; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes pvSlideR { from { opacity: 0.4; transform: translateX(-28px); } to { opacity: 1; transform: none; } } .pv-slide-l { animation: pvSlideL 0.18s ease both; } .pv-slide-r { animation: pvSlideR 0.18s ease both; } .photo-viewer .pv-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: white; font-size: 26px; line-height: 1; cursor: pointer; } .photo-viewer .pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 56px; border: none; background: rgba(255,255,255,0.12); color: white; font-size: 30px; cursor: pointer; border-radius: 10px; } .photo-viewer .pv-prev { left: 8px; } .photo-viewer .pv-next { right: 8px; } .photo-viewer .pv-counter { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 100px; } .photo-thumb img { cursor: pointer; } /* Neutrale Notiz-Box (Objekt-/Stopp-Notiz) - ruhiger als die gelbe Hinweis-Box */ .glas-notiz-box { background: #eef4fb; border: 1px solid #d3e2f2; border-radius: 10px; padding: 9px 12px; margin-top: 10px; font-size: 13px; color: #2a4d6e; white-space: pre-line; } /* ---------------- Animations-Feinschliff ---------------- */ /* Suchergebnis-Container werden bei jedem Tastendruck neu gebaut - dort würde die Karten-Eintrittsanimation als Dauerflackern wirken. Deshalb gezielt aus. */ #scheineListResults .card, #offeneListeErgebnisse .card, #tourSearchResults .card, #glasTabContent .card { animation: none; } /* Glas-App: Eintritts-Animationen laufen NICHT bei jedem Re-Render neu - der ganze #view und seine Karten würden sonst bei jeder Interaktion auf Detailseiten (Kunde/Objekt/Statistik) kurz flackern. Echte Seitenwechsel animiert das JS gezielt. */ body.glas-logo-left #view { animation: none; } body.glas-logo-left #view .card { animation: none; } body.glas-logo-left #view .scheine-item { animation: none; } /* ---- Natives App-Gefühl (iOS): kein grauer Tap-Blitz, kein Text-Markieren / Lupen-Callout beim Halten auf Bedienelementen. Eingabefelder bleiben normal. ---- */ * { -webkit-tap-highlight-color: transparent; } button, .btn, .tab-btn, .card, .chip, .badge, .glas-home-tile, .glas-tour-card, .glas-schein-card, .glas-cal-cell, .glas-cal-kw, .glas-seg-btn, .glas-menu-item, .glas-bottomnav, .glas-stat-tile, .glas-kpi, .glas-vbar, .glas-rankrow, .glas-home-sec-head, .glas-stop-row, .glas-pick, .hub-tile, .glas-fab, .glas-caro-dots, .glas-sheet-grip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select { -webkit-user-select: auto; user-select: auto; } /* Beim Wechseln des Tabs/Inhalts gleitet der neue Inhalt einmal weich herein (auch beim Öffnen des Kalenders) - spürbar sanfter durch Spring-Easing. */ .glas-content-in { animation: fadeInUp 0.32s cubic-bezier(.32,.72,0,1) both; } /* Monatswechsel im Kalender: der neue Monat gleitet aus der Blätter-Richtung herein und blendet dabei auf - deutlicher Weg + weiches Easing = flüssiges Durchwischen. */ @keyframes calSlideL { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes calSlideR { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } .glas-cal-anim-l { animation: calSlideL 0.30s cubic-bezier(.32,.72,0,1) both; } .glas-cal-anim-r { animation: calSlideR 0.30s cubic-bezier(.32,.72,0,1) both; } @media (prefers-reduced-motion: reduce) { .glas-cal-anim-l, .glas-cal-anim-r, .glas-content-in { animation: none !important; } } /* Aufklappende Einstellungs-Kacheln: Inhalt gleitet sanft auf */ @keyframes tileOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .glas-settings-tile-body { animation: tileOpen 0.18s ease both; } /* Hinweis-Box zieht beim Erscheinen einmal kurz die Aufmerksamkeit */ @keyframes hinweisIn { 0% { opacity: 0; transform: translateY(4px); } 60% { opacity: 1; transform: none; } 75% { transform: scale(1.015); } 100% { transform: none; } } .glas-hinweis-box { animation: hinweisIn 0.4s ease both; } /* Tab-Wechsel-Unterstreichung gleitet statt zu springen */ .tab-btn { transition: color 0.15s ease, border-color 0.2s ease, background 0.15s ease; } .glas-welcome-sub { margin: 0; color: var(--text-secondary); animation: glasFadeUp 0.6s ease 0.4s both; } .glas-welcome-buttons { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 34px auto 0; } .glas-welcome-btn { justify-content: center; padding: 15px; font-size: 16px; border-radius: 14px; animation: glasFadeUp 0.55s ease both; } @keyframes glasLogoIn { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes glasFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glasHeartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } 36% { transform: scale(1.18); } 48% { transform: scale(1); } } /* Sanfter Übergang, wenn ein neuer Screen aufgebaut wird (statt der Karten-Einzelanimation) */ .glas-screen-in { animation: glasFadeUp 0.28s ease both; } /* ---------------- Admin-Dashboard (Startseite) ---------------- */ .glas-dash { padding-top: 8px; } .glas-dash > * { animation: glasFadeUp 0.4s ease both; } .glas-dash > *:nth-child(2) { animation-delay: 0.05s; } .glas-dash > *:nth-child(3) { animation-delay: 0.1s; } .glas-dash > *:nth-child(4) { animation-delay: 0.15s; } .glas-dash > *:nth-child(5) { animation-delay: 0.2s; } .glas-dash-hello { margin-bottom: 16px; } .glas-dash-hi { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; } .glas-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .glas-dash-stats-2 { grid-template-columns: repeat(2, 1fr); } .glas-quick-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; } .glas-pos-row { position: relative; } .glas-pos-remove { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e6c9c9; background: #fdf4f4; color: #b23b3b; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } .glas-pos-remove:hover { background: #f8dcdc; border-color: #dba9a9; } .glas-tour-search-list { max-height: 320px; overflow-y: auto; } .glas-tour-search-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); cursor: pointer; } .glas-tour-search-list .glas-tour-search-row:first-child { border-top: none; } .glas-tour-search-row:hover { background: var(--bg); } .glas-tour-search-row.selected { background: #eaf5ec; } .glas-tour-search-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-secondary); border: 1px solid var(--border); } .glas-tour-search-row.selected .glas-tour-search-check { background: #2f9e51; border-color: #2f9e51; color: #fff; } .glas-day-modal-box { max-width: 420px; max-height: 82vh; overflow-y: auto; } .glas-verschieben-picker { padding: 14px; } .glas-settings-tile { padding: 0; overflow: hidden; } .glas-settings-tile-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; } .glas-settings-tile-chevron { color: var(--text-secondary); font-size: 19px; transition: transform 0.15s ease; flex-shrink: 0; } .glas-settings-tile-chevron.open { transform: rotate(90deg); } .glas-settings-tile-body { padding: 0 20px 18px; border-top: 1px solid var(--border); padding-top: 14px; } .glas-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px; text-align: center; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .glas-stat:active { transform: scale(0.97); } .glas-stat.danger { background: #fdf3f1; border-color: #f3c9c2; } .glas-stat.warn { background: #fefaf1; border-color: #f0dca6; } .glas-stat-num { display: block; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1px; } .glas-stat.danger .glas-stat-num { color: var(--danger); } .glas-stat.warn .glas-stat-num { color: var(--warning-text); } .glas-stat-label { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 6px; } .glas-dash-actions { display: flex; gap: 10px; margin-bottom: 16px; } /* ---- Startseite: farbige Status-Kacheln + Fortschritt (neuer Look) ---- */ .glas-home-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; } .glas-home-tile { border-radius: 16px; padding: 14px; position: relative; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(20,30,50,.06); transition: transform .14s cubic-bezier(.34,1.56,.64,1); } .glas-home-tile:active { transform: scale(.96); } .glas-home-tile .ght-num { display: block; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .glas-home-tile .ght-lbl { display: block; font-size: 12.5px; font-weight: 600; margin-top: 5px; opacity: .9; } /* Kacheln mit langen Werten (QM-Zahlen) bzw. Namen (Bester Kunde): kleinere Schrift, damit nichts aus der Kachel läuft; Namen auf 2 Zeilen begrenzt */ .glas-home-tile.t-fit .ght-num { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; } .glas-home-tile.t-name .ght-num { font-size: 15.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .glas-home-tile .ght-ic { position: absolute; right: 10px; top: 10px; font-size: 17px; opacity: .55; } .glas-home-tile.t-crit { background: #fbe9e6; color: #c33623; } .glas-home-tile.t-warn { background: #fdeede; color: #bd6413; } .glas-home-tile.t-info { background: #e7f0fb; color: #1f5d92; } .glas-home-tile.t-ok { background: #e2f3e8; color: #1c7f3e; } html.dark .glas-home-tile.t-crit { background: #37201c; color: #f0917f; } html.dark .glas-home-tile.t-warn { background: #33251a; color: #e8a05f; } html.dark .glas-home-tile.t-info { background: #16283a; color: #7fb4e6; } html.dark .glas-home-tile.t-ok { background: #16301f; color: #6fd08c; } .glas-home-sec { margin-top: 18px; } .glas-home-sec-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; cursor: pointer; padding: 2px 2px 4px; } .glas-home-sec-head .chev { color: var(--text-secondary); font-size: 12px; } .glas-home-empty { color: var(--text-secondary); font-size: 13.5px; padding: 10px 2px; } /* Bereichsinhalt liegt immer im DOM, nur ein-/ausgeblendet -> Auf-/Zuklappen ohne Neuaufbau der Startseite (kein Flackern). */ .glas-home-sec-body { display: none; } .glas-home-sec.open > .glas-home-sec-body { display: block; animation: glasSecReveal .2s ease; } @keyframes glasSecReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .glas-tour-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; margin-top: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(20,30,50,.05); transition: transform .12s ease; } .glas-tour-card:active { transform: scale(.985); } .gtc-row { display: flex; align-items: center; gap: 11px; } .gtc-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; } .gtc-grow { flex: 1; min-width: 0; } .gtc-name { margin: 0; font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gtc-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); } .gtc-notiz { margin-top: 9px; background: #fdeede; color: #a85b16; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; white-space: pre-line; } html.dark .gtc-notiz { background: #33251a; color: #e3a566; } .gtc-pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; } .gtc-pill.p-ok { background: #e2f3e8; color: #1c7f3e; } .gtc-pill.p-run { background: #fdeede; color: #bd6413; } .gtc-pill.p-plan { background: #eef1f5; color: #5b6676; } html.dark .gtc-pill.p-ok { background: #16301f; color: #6fd08c; } html.dark .gtc-pill.p-run { background: #33251a; color: #e8a05f; } html.dark .gtc-pill.p-plan { background: #26313f; color: #9aa6b6; } /* Fortschritt als Ring (ersetzt das Icon auf den Touren-Karten): zeigt X/Y erledigt */ .glas-mini-ring { position: relative; width: 46px; height: 46px; flex: 0 0 auto; } .glas-mini-ring svg { transform: rotate(-90deg); display: block; } .glas-mini-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } @media (min-width: 760px) { .glas-home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- Tour-Detail: Fortschritts-Ring + Timeline ---- */ :root { --prog-track: #eef1f5; } html.dark { --prog-track: #26313f; } .glas-ring-hero { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .glas-ring { position: relative; width: 78px; height: 78px; flex: 0 0 auto; } .glas-ring svg { transform: rotate(-90deg); display: block; } .glas-ring-fill { transition: stroke-dashoffset 1s cubic-bezier(.32,.72,0,1); } .glas-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .glas-ring-txt b { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .glas-ring-txt span { font-size: 9.5px; color: var(--text-secondary); margin-top: 2px; } .glas-ring-info { min-width: 0; } .glas-ring-info .grh-t { margin: 0 0 5px; font-size: 16px; font-weight: 700; } .glas-ring-info .grh-m { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Timeline: durchgehende Linie hinter den Status-Punkten */ .glas-stop-list { position: relative; } .glas-stop-list::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px; background: var(--border); z-index: 0; } .glas-stop-row { position: relative; z-index: 1; } .glas-stop-num { position: relative; z-index: 1; } .glas-stop-row.next .glas-stop-num { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent); } .glas-next-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-bottom: 3px; } /* ---- Kunden-Widgets: wischbares Karussell ---- */ .glas-caro-wrap { margin: 4px 0 14px; position: relative; } /* Bewusst KEIN Scroll-Container: natives scroll-snap brach auf iOS die Wischgesten immer wieder ab. Die Seiten liegen auf einer Schiene (.glas-caro-track), die per transform verschoben wird - gesteuert über Punkte/Pfeile und eigene Wisch-Erkennung. */ .glas-caro { overflow: hidden; transition: height 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .glas-caro-track { display: flex; align-items: flex-start; transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .glas-cpage { flex: 0 0 100%; min-width: 0; } .glas-caro-dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 6px 0 0; } /* Klick-Alternative zum Wischen (Handy): kleine ‹ ›-Knöpfe neben den Punkten */ .glas-caro-step { border: 0; background: transparent; color: var(--text-secondary); font-size: 22px; line-height: 1; padding: 2px 14px 4px; cursor: pointer; position: relative; } .glas-caro-step::after { content: ""; position: absolute; inset: -8px; } .glas-caro-step.off { opacity: 0.25; pointer-events: none; } @media (min-width: 760px) { .glas-caro-step { display: none; } } .glas-caro-dots .cd { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s, width 0.2s; position: relative; cursor: pointer; } .glas-caro-dots .cd::after { content: ""; position: absolute; inset: -9px; } .glas-caro-dots .cd.on { background: var(--blue); width: 16px; border-radius: 4px; } .glas-caro-hint { text-align: center; font-size: 11px; color: var(--text-secondary); padding-top: 3px; } .glas-caro-arrow { display: none; } @media (min-width: 760px) { .glas-caro-arrow { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; top: 50%; transform: translateY(-70%); width: 30px; height: 30px; padding: 0 0 2px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); font-size: 19px; line-height: 1; cursor: pointer; box-shadow: 0 1px 5px rgba(20, 30, 50, 0.12); transition: opacity 0.2s, box-shadow 0.2s; } .glas-caro-arrow:hover { box-shadow: 0 2px 8px rgba(20, 30, 50, 0.18); } .glas-caro-arrow.left { left: -2px; } .glas-caro-arrow.right { right: -2px; } .glas-caro-arrow.off { opacity: 0; pointer-events: none; } .glas-caro-hint { display: none; } /* Seitliche Rinne, damit die Pfeile nicht über den Kacheln liegen */ .glas-caro .glas-cpage { padding: 0 36px; } } .glas-home-tile.t-neu { background: #eef1f5; color: #5b6676; } html.dark .glas-home-tile.t-neu { background: #202a38; color: #9aa6b6; } /* Ranglisten (Top 5 Kunden, Top-Objekte, Länger nicht gereinigt) */ .glas-rankcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; box-shadow: 0 1px 3px rgba(20,30,50,.05); } .glas-rankcard .rt { font-size: 12.5px; font-weight: 700; margin: 0 0 4px; } .glas-rankrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); } .glas-rankrow:first-of-type { border-top: none; } .glas-rankrow .rp { flex: 0 0 18px; font-size: 11px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .glas-rankrow .rn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glas-rankrow .rb { flex: 0 0 70px; height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; } .glas-rankrow .rb i { display: block; height: 100%; border-radius: 4px; background: var(--blue); } .glas-rankrow .rv { flex: 0 0 auto; font-size: 11px; color: var(--text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; } .glas-rankrow .rv.warnv { color: #bd6413; } html.dark .glas-rankrow .rv.warnv { color: #e8a05f; } /* ---- Statistik: KPI-Kacheln + vertikales Balken-Chart ---- */ .glas-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; } .glas-kpi .n { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; } .glas-kpi .l { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; margin-top: 3px; } .glas-kpi .d { font-size: 11px; font-weight: 700; margin-top: 5px; display: inline-block; padding: 2px 7px; border-radius: 999px; } .glas-kpi .d.up { background: #e2f3e8; color: #1c7f3e; } .glas-kpi .d.dn { background: #fbe9e6; color: #c33623; } html.dark .glas-kpi .d.up { background: #16301f; color: #6fd08c; } html.dark .glas-kpi .d.dn { background: #37201c; color: #f0917f; } .glas-vchart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 2px 0; } .glas-vbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: pointer; min-width: 0; } .glas-vbar .vfill { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: #b9d4ec; min-height: 2px; transition: height 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s; } html.dark .glas-vbar .vfill { background: #2a4258; } .glas-vbar.sel .vfill { background: var(--blue); } .glas-vbar .vxl { font-size: 8.5px; color: var(--text-secondary); font-weight: 600; margin-top: 3px; height: 11px; overflow: hidden; } .glas-vbar.sel .vxl { color: var(--blue); font-weight: 800; } /* ---- Scheine: Karten mit Tages-Gruppierung ---- */ .glas-schein-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-top: 9px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(20,30,50,.05); transition: transform .12s ease; } .glas-schein-card:active { transform: scale(.99); } .glas-schein-ic { width: 40px; height: 40px; border-radius: 11px; background: #e2f3e8; color: #1c7f3e; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; } html.dark .glas-schein-ic { background: #16301f; color: #6fd08c; } .glas-schein-ic.manuell { background: #eef1f5; color: #5b6676; } html.dark .glas-schein-ic.manuell { background: #26313f; color: #9aa6b6; } .glas-schein-grow { flex: 1; min-width: 0; } .glas-schein-t { margin: 0; font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glas-schein-s { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glas-schein-dl { width: 38px; height: 38px; border-radius: 10px; background: #eaf2fb; color: var(--blue); border: 0; font-size: 17px; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: transform .1s; } .glas-schein-dl:active { transform: scale(.9); } html.dark .glas-schein-dl { background: #182635; } .glas-schein-day { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin: 18px 2px 2px; } .scheine-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .scheine-item:last-child { border-bottom: none; } .scheine-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-secondary); } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: white; padding: 10px 18px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 50; } .toast.show { opacity: 1; } .sig-pad-wrap { border: 1px solid var(--border); border-radius: 8px; background: white; overflow: hidden; } #sigCanvas { width: 100%; height: 200px; display: block; touch-action: none; } .divider { border-top: 1px solid var(--border); margin: 18px 0; } .bullet-list { margin: 0; padding-left: 18px; } .bullet-list li { margin-bottom: 4px; } .login-box { max-width: 320px; margin: 80px auto 0; text-align: center; } a { color: var(--blue); text-decoration: none; } .highlight-box { background: var(--info-bg); border-radius: 6px; padding: 7px 10px; margin-bottom: 12px; } .tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs { touch-action: pan-x; } .tab-btn { flex: 0 0 auto; white-space: nowrap; background: none; border: none; font-size: 14px; font-weight: 500; color: var(--text-secondary); padding: 8px 14px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .week-heading { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 8px; } .week-heading:first-child { margin-top: 0; } .file-input-wrap { border: 1.5px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; background: var(--bg); } .file-input-wrap:hover { border-color: var(--blue); } .file-input-wrap.dragover { border-color: var(--blue); border-style: solid; background: var(--tint-bald-bg, var(--bg)); } .attachment-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .attachment-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; } .attachment-preview .file-icon { width: 44px; height: 44px; border-radius: 6px; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } /* App header + overlapping logo badge */ .app-header { background: linear-gradient(135deg, #3a8fd0 0%, #1f5d92 100%); padding: 22px 20px 46px; color: white; } .app-header .brand-row { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0.85; margin-bottom: 16px; } .app-header .brand-row .dot { width: 7px; height: 7px; border-radius: 50%; background: white; } .app-header .greeting { font-size: 19px; font-weight: 600; } .app-header .stat { font-size: 13.5px; opacity: 0.88; margin-top: 4px; } .app-sheet { background: var(--bg); border-radius: 22px 22px 0 0; margin-top: -28px; position: relative; min-height: 70vh; } .logo-watermark { position: absolute; top: 6px; right: -110px; width: 360px; opacity: 0.05; transform: rotate(8deg); z-index: 0; pointer-events: none; } .logo-badge { position: absolute; top: -46px; right: 22px; width: 92px; height: 92px; background: white; border-radius: 50%; box-shadow: 0 8px 20px rgba(20, 30, 50, 0.18); display: flex; align-items: center; justify-content: center; z-index: 2; } .logo-badge img { height: 82px; width: auto; display: block; } .photo-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; } .photo-thumb { position: relative; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 7px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-thumb .remove-btn { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,0.55); color: white; border: none; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; padding: 0; } .photo-add-btn { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 7px; border: 1.5px dashed var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--text-secondary); cursor: pointer; } .photo-section-label { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 4px; } .app-sheet-content { position: relative; z-index: 1; padding-top: 56px; } /* Status ribbon (diagonal corner flag) */ .scheine-item { position: relative; overflow: hidden; } .ribbon { position: absolute; top: 11px; right: -32px; width: 120px; transform: rotate(40deg); text-align: center; font-size: 8.5px; font-weight: 700; color: white; letter-spacing: 0.04em; padding: 6px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); z-index: 1; } .ribbon-open { background: #f5a524; } .ribbon-done { background: #2fae5c; } .scheine-item-content { padding-right: 46px; } /* Custom confirm modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(20, 25, 35, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-box { background: var(--card); border-radius: 14px; padding: 22px 20px; max-width: 320px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .modal-box h3 { font-size: 16px; margin: 0 0 8px; } .modal-box p { font-size: 14px; color: var(--text-secondary); margin: 0 0 18px; } .modal-actions { display: flex; gap: 10px; } .modal-actions .btn { flex: 1; justify-content: center; } /* Calendar view */ .cal-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .cal-month-header { display:flex; align-items:center; justify-content:space-between; padding: 6px 2px 12px; } .cal-month-title { font-size: 20px; font-weight: 700; color: var(--text); } .cal-nav-btn { color: var(--blue); font-size: 18px; font-weight: 500; padding: 4px 10px; cursor: pointer; } .cal-card { padding: 12px 10px; } .cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal-table th { font-size: 10px; color: #b0b5bd; font-weight: 600; padding-bottom: 8px; } .cal-table td { padding: 2px; } .cal-day-btn { width: 100%; height: 58px; border: none; background: transparent; border-radius: 10px; padding: 4px 2px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cal-daynum { font-size: 12.5px; color: var(--text); margin-bottom: 3px; } .cal-other .cal-daynum { color: #e0e2e6; } .cal-sat .cal-daynum { color: var(--blue); } .cal-sun .cal-daynum { color: #d6453b; } .cal-todaycircle { display: flex; align-items: center; justify-content: center; margin: 0 auto 3px; width: 21px; height: 21px; border-radius: 50%; background: #d6453b; color: white; font-weight: 600; font-size: 12.5px; } .cal-has-termin .cal-day-btn { background: #eef5fc; } .cal-selected .cal-day-btn { background: var(--blue); box-shadow: 0 3px 8px rgba(31,93,146,0.35); } .cal-selected .cal-daynum, .cal-selected .cal-todaycircle { color: white; } .cal-selected .cal-todaycircle { background: white; color: #d6453b; } .cal-chip { background: var(--blue); color: white; font-size: 8.5px; font-weight: 600; border-radius: 5px; padding: 3px 2px; margin: 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-chip.done { background: #3eb56e; } .cal-selected .cal-chip { background: rgba(255,255,255,0.9); color: var(--blue); } .cal-selected .cal-chip.done { color: #3eb56e; } .cal-day-list-heading { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 18px 0 8px 2px; } .cal-appt-card { display: flex; align-items: center; gap: 10px; cursor: pointer; } .cal-appt-time { font-size: 14px; font-weight: 700; color: var(--blue); min-width: 44px; } .cal-appt-bar { width: 4px; align-self: stretch; border-radius: 3px; background: #f5a524; min-height: 32px; } .cal-appt-bar.done { background: #2fae5c; } /* ===== Animationen & Übergänge ===== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } #view { animation: fadeIn 0.28s ease both; } .card { animation: fadeInUp 0.32s cubic-bezier(0.22, 0.8, 0.32, 1) both; } .scheine-item { animation: fadeIn 0.3s ease both; } .week-heading { animation: fadeIn 0.35s ease both; } .btn { transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .btn:active { transform: scale(0.95); } .btn-primary:active { transform: scale(0.96); } input, textarea, select { transition: border-color 0.18s ease, box-shadow 0.18s ease; } .tab-btn { transition: color 0.2s ease, border-color 0.25s ease; } .toast { transition: opacity 0.25s ease, transform 0.25s ease; transform: translate(-50%, 6px); } .toast.show { transform: translate(-50%, 0); } .modal-overlay { animation: fadeIn 0.18s ease both; } .modal-box { animation: scaleIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Bewusst KEIN "transition: all" mehr - das animierte unbeabsichtigt Layout- Eigenschaften bei jedem Re-Render und erzeugte Mikro-Ruckler. */ .app-header, .logo-badge, .sheet, .app-sheet { transition: box-shadow 0.3s ease; } .photo-thumb, .photo-add-btn { transition: transform 0.15s ease, box-shadow 0.15s ease; animation: scaleIn 0.22s ease both; } .photo-add-btn:active { transform: scale(0.9); } .photo-thumb:hover .remove-btn { transform: scale(1.1); } .ribbon { transition: opacity 0.2s ease; } .cal-day-btn { transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .cal-day-btn:active { transform: scale(0.93); } .cal-card { animation: fadeInUp 0.3s ease both; } .cal-appt-card { animation: fadeInUp 0.28s ease both; transition: transform 0.15s ease; } .cal-appt-card:active { transform: scale(0.98); } .highlight-box { transition: background-color 0.2s ease; } .sig-pad-wrap { animation: fadeIn 0.3s ease both; } .empty-state { animation: fadeIn 0.4s ease both; } .badge { animation: scaleIn 0.25s ease both; } /* Sanftes Einrasten beim Erscheinen der Eckfahne */ .scheine-item .ribbon { animation: pop 0.4s ease 0.15s both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---------- Übergänge & Animationen ---------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes ribbonPop { from { opacity: 0; transform: rotate(40deg) scale(0.7); } to { opacity: 1; transform: rotate(40deg) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } #view { animation: fadeIn 0.2s ease both; } .card { animation: fadeInUp 0.28s ease both; transition: box-shadow 0.15s ease, transform 0.15s ease; } .card:active { transform: scale(0.997); } .scheine-item { animation: fadeInUp 0.28s ease both; } .week-heading { animation: fadeIn 0.3s ease both; } .btn { transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .btn:active { transform: scale(0.96); } .btn-primary:active { box-shadow: 0 1px 4px rgba(31,93,146,0.25) inset; } .tab-btn { transition: color 0.15s ease, border-color 0.2s ease; } .badge { transition: background 0.2s ease, color 0.2s ease; animation: fadeIn 0.25s ease both; } .ribbon { animation: ribbonPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .highlight-box { transition: background 0.2s ease; } .modal-overlay { animation: fadeIn 0.18s ease both; } .modal-box { animation: scaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .toast { transition: opacity 0.25s ease, transform 0.25s ease; transform: translate(-50%, 6px); } .toast.show { transform: translate(-50%, 0); } .photo-thumb, .photo-add-btn { animation: scaleIn 0.2s ease both; transition: transform 0.12s ease; } .photo-thumb:active, .photo-add-btn:active { transform: scale(0.94); } .cal-day-btn { transition: background 0.18s ease, box-shadow 0.18s ease; } .cal-card { animation: fadeInUp 0.25s ease both; } .cal-appt-card { animation: fadeInUp 0.25s ease both; cursor: pointer; transition: transform 0.12s ease; } .cal-appt-card:active { transform: scale(0.98); } .empty-state { animation: fadeIn 0.3s ease both; } input, textarea, select { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .logo-badge { animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Kleiner Lade-Spinner statt nur Text */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 8px; } /* gestaffeltes Erscheinen der Listenelemente */ .scheine-item:nth-child(1) { animation-delay: 0.02s; } .scheine-item:nth-child(2) { animation-delay: 0.05s; } .scheine-item:nth-child(3) { animation-delay: 0.08s; } .scheine-item:nth-child(4) { animation-delay: 0.11s; } .scheine-item:nth-child(5) { animation-delay: 0.14s; } /* Material-Umfrage */ .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .qty-row:last-of-type { border-bottom: none; } .qty-row .qty-label { font-size: 14.5px; font-weight: 500; } .qty-row select { width: 90px; flex: 0 0 auto; } .check-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .check-row:last-of-type { border-bottom: none; } .check-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--blue); flex: 0 0 auto; } .check-row .check-label { font-size: 14.5px; font-weight: 500; } .section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px 2px; } .material-reminder { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13.5px; color: #8a5a07; font-weight: 600; } /* ---------------- App-Modus (vom iPhone-Home-Bildschirm gestartet) ---------------- Läuft die Seite als installierte Web-App (ohne Safari-Leisten), zieht sich der blaue Kopf bis unter die Statusleiste (Uhr/Akku stehen auf unserem Blau) und alles wird kompakter, damit z.B. der Kalender sofort ohne Scrollen dasteht. */ html.app-mode, html.app-mode body { background: var(--bg); } /* Nur die Statusleisten-Zone oben bekommt die Kopf-Farbe (kein blauer Rand unten mehr) */ html.app-mode body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #1f5d92; z-index: 200; } html.app-mode .app-header { padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 34px; } /* Auf der Kalenderseite im App-Modus alles oben so knapp wie möglich, damit der Monat fast bündig startet und den Schirm füllt (TimeTree-Gefühl) */ html.app-mode body.glas-fullwidth .app-sheet-content { padding-top: 14px; } html.app-mode .glas-cal-cell { min-height: 116px; } @media (min-width: 760px) { html.app-mode .glas-cal-cell { min-height: 132px; } } html.app-mode .app-header .brand-row { margin-bottom: 7px; font-size: 13px; } html.app-mode .app-header .greeting { font-size: 16px; } /* Das schwebende Logo-Badge braucht im App-Modus keiner - ohne wirkt es aufgeräumter und der Inhalt startet direkt unter dem Kopf */ html.app-mode .logo-badge { display: none; } html.app-mode .app-sheet-content { padding-top: 20px; } html.app-mode .glas-logo-left .app-sheet-content, html.app-mode body.glas-logo-left .app-sheet-content { padding-top: 20px; } html.app-mode .wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); } /* ---------------- Segmentierte Umschalter (Filter, Kalender-Ansicht) ---------------- */ .glas-seg { display: flex; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .glas-seg-btn { flex: 1; border: none; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; padding: 7px 6px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .glas-seg-btn.on { background: var(--card); color: var(--blue); box-shadow: 0 1px 3px rgba(20, 30, 50, 0.12); } /* ---------------- "☰ Mehr"-Menü ---------------- */ .glas-menu-dd { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 30, 50, 0.16); overflow: hidden; margin: -6px 0 16px; animation: glasMenuIn 0.16s ease both; } @keyframes glasMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .glas-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: transparent; color: var(--text); font-size: 14.5px; font-weight: 500; padding: 14px 16px; cursor: pointer; border-top: 1px solid var(--border); text-align: left; } .glas-menu-item:first-child { border-top: none; } .glas-menu-item:hover { background: var(--bg); } .glas-menu-item.on { color: var(--blue); font-weight: 600; } /* ---------------- Mehrfach-Auswahl-Leiste (schwebt unten) ---------------- */ .glas-auswahl-bar { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18); padding: 10px 14px; margin: 4px 0 14px; } .glas-auswahl-count { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } /* ---------------- Urlaubskalender: Mitarbeiter-Chips ---------------- */ .glas-ma-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 100px; cursor: pointer; } .glas-ma-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; } .glas-ma-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* Lager-Plan: Mitarbeiter zum Antippen. Bewusst große Flächen - das wird morgens in Eile am Handy bedient, nicht in Ruhe am Schreibtisch. */ .glas-lager-chips { display: flex; flex-wrap: wrap; gap: 8px; } .glas-lager-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--card); font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .glas-lager-chip:hover { border-color: var(--blue); } .glas-lager-chip.an { background: var(--blue); border-color: var(--blue); color: #fff; } .glas-lager-chip.an .glas-ma-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); } /* ---- Lager-Plan: eigener, moderner Look. Akzentfarbe Violett - so hebt sich die Seite bewusst von Glas (blau) und Check-ins (orange) ab. ---- */ /* Tages-Pills: zweizeilig wie im Kalender einer Buchungs-App - Wochentag klein oben, Tag groß darunter. Seitlich wischbar. Punkt = an dem Tag ist schon etwas geplant. */ .glas-lager-tage { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .glas-lager-tage::-webkit-scrollbar { display: none; } .glas-lager-tag { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 9px 10px 7px; border-radius: 15px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; } .glas-lager-tag:active { transform: scale(.94); } .glas-lager-tag .lt-wt { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); } .glas-lager-tag .lt-nr { font-size: 19px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; } .glas-lager-tag .lt-punkt { width: 5px; height: 5px; border-radius: 50%; background: transparent; margin-top: 2px; } .glas-lager-tag .lt-punkt.da { background: #6b4ee6; } .glas-lager-tag.an { background: linear-gradient(150deg, #7a5cf0, #5b3fd4); border-color: #6b4ee6; color: #fff; box-shadow: 0 5px 14px rgba(107, 78, 230, .35); } .glas-lager-tag.an .lt-wt { color: rgba(255, 255, 255, .82); } .glas-lager-tag.an .lt-punkt.da { background: #fff; } /* Uhrzeit-Schnellwahl: gleichmäßiges Raster, bleibt markiert bis man umtippt */ .glas-lager-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; align-items: center; } .glas-lager-zeit { display: inline-flex; align-items: center; justify-content: center; padding: 12px 6px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--card); font-size: 15px; font-weight: 700; color: var(--text); font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; } .glas-lager-zeit:active { transform: scale(.94); } .glas-lager-zeit.an { background: linear-gradient(150deg, #7a5cf0, #5b3fd4); border-color: #6b4ee6; color: #fff; box-shadow: 0 5px 14px rgba(107, 78, 230, .35); } /* Eigene Uhrzeit + Notiz: mindestens 16px Schrift, sonst zoomt iOS beim Antippen in die Seite hinein und alles wirkt "verschoben". appearance:none, damit das Feld seine Breite respektiert statt mit iOS-Eigenmaßen überzulaufen. */ .glas-lager-zeitfeld { -webkit-appearance: none; appearance: none; width: auto; min-width: 96px; padding: 10px 12px; font-size: 16px; font-weight: 700; border-radius: 13px; border: 1.5px solid #6b4ee6; font-variant-numeric: tabular-nums; } .glas-lager-notiz { font-size: 16px; -webkit-appearance: none; appearance: none; border-radius: 12px; padding: 11px 13px; } /* Mitarbeiter-Chips: Initialen-Kreis in der Mitarbeiter-Farbe statt Mini-Punkt */ .glas-lager-chips { display: flex; flex-wrap: wrap; gap: 8px; } .glas-lager-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 8px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; } .glas-lager-chip:active { transform: scale(.95); } .glas-lager-chip:hover { border-color: #6b4ee6; } .glas-lager-chip.an { background: linear-gradient(150deg, #7a5cf0, #5b3fd4); border-color: #6b4ee6; color: #fff; box-shadow: 0 5px 14px rgba(107, 78, 230, .35); } .glas-lager-avatar { width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff; } .glas-lager-chip.an .glas-lager-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); } /* Chips ohne Avatar (z.B. "Alle Mitarbeiter") brauchen links normalen Innenabstand */ .glas-lager-chip > .glas-ma-dot:first-child { margin-left: 6px; } /* Senden: der eine große Knopf der Seite - Violett wie die Auswahl */ .glas-lager-senden { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 15px; border: none; border-radius: 15px; background: linear-gradient(150deg, #7a5cf0, #5b3fd4); color: #fff; font-size: 15.5px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(107, 78, 230, .38); transition: transform .12s, opacity .15s; } .glas-lager-senden:active { transform: scale(.98); } .glas-lager-senden[disabled] { opacity: .45; box-shadow: none; cursor: default; } /* ---- Lager: Schritt-Ueberschriften ---- Der Plan wird der Reihe nach ausgefuellt (Tag, Uhrzeit, Leute, senden) - deshalb sind die Abschnitte nummeriert, und rechts steht die aktuelle Wahl. So sieht man beim Runterscrollen, was schon erledigt ist. */ .glas-lager-schritt { display: flex; align-items: center; gap: 9px; margin: 22px 2px 10px; } .glas-lager-schritt .ls-nr { width: 22px; height: 22px; border-radius: 7px; flex: none; background: #6b4ee6; color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; } .glas-lager-schritt .ls-txt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); } .glas-lager-schritt .ls-wahl { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #6b4ee6; } html.dark .glas-lager-schritt .ls-wahl { color: #a48cf5; } /* Schon eingeteilt: bleibt sichtbar statt zu verschwinden - sonst wirkt es, als haette man jemanden vergessen. */ .glas-lager-chip.schon { opacity: .45; } .glas-lager-chip.schon:hover { border-color: var(--border); } /* ---- Lager: Einteilungen des Tages ---- */ .glas-lager-trenner { display: flex; align-items: center; gap: 11px; margin: 26px 2px 14px; } .glas-lager-trenner span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .glas-lager-trenner i { flex: 1; height: 1px; background: var(--border); } .glas-lager-karte { background: var(--card); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; margin-bottom: 11px; } .glas-lager-karte .lk-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 13px 11px; } .glas-lager-karte .lk-zeit { font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1; } .glas-lager-karte .lk-stand { margin-left: auto; display: flex; align-items: center; gap: 7px; } .glas-lager-karte .lk-ring { width: 26px; height: 26px; flex: none; } .glas-lager-karte .lk-zahl { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; } .glas-lager-karte .lk-zahl.voll { color: #2e9e4f; } .glas-lager-karte .lk-weg { border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 15px; padding: 3px 5px; border-radius: 7px; line-height: 1; } .glas-lager-karte .lk-weg:hover { color: var(--danger); background: rgba(209,52,56,.1); } .glas-lager-karte .lk-notiz { display: flex; gap: 7px; font-size: 13px; color: var(--text-secondary); padding: 0 13px 11px; margin-top: -3px; } .glas-lager-karte .lk-leute { border-top: 1px solid var(--border); background: var(--bg); } .glas-lager-karte .lk-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 13px; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; } .glas-lager-karte .lk-zeile:last-child { border-bottom: 0; } .glas-lager-karte .lk-zeile.tippbar { cursor: pointer; } .glas-lager-karte .lk-zeile.tippbar:active { background: var(--card); } .glas-lager-karte .lk-name { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; } .glas-lager-karte .lk-zeile.abw .lk-name { text-decoration: line-through; color: var(--text-secondary); } .glas-lager-karte .lk-wann { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .glas-lager-karte .lk-haken { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; border: 1.5px solid var(--border); color: transparent; } .glas-lager-karte .lk-haken.ja { background: #2e9e4f; border-color: #2e9e4f; color: #fff; } .glas-lager-karte .lk-haken.weg { background: var(--danger); border-color: var(--danger); color: #fff; } .glas-lager-leer { text-align: center; padding: 30px 16px 34px; color: var(--text-secondary); } .glas-lager-leer .lle-ic { font-size: 30px; margin-bottom: 7px; } .glas-lager-leer p { margin: 0; font-size: 13.5px; } /* PDF-Block: eingeklappte Kopfzeile, klappt bei Bedarf auf */ .glas-lager-pdfkopf { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: 15px; border: 1px solid var(--border); background: var(--card); font-family: inherit; cursor: pointer; color: var(--text); transition: border-color .15s; } .glas-lager-pdfkopf:hover { border-color: #6b4ee6; } .glas-lager-pdfkopf .pk-pfeil { flex: none; font-size: 19px; color: var(--text-secondary); transition: transform .2s ease; } .glas-lager-pdfkopf.auf { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .glas-lager-pdfkopf.auf .pk-pfeil { transform: rotate(90deg); } /* ---- MA-App: mehrere auf einmal unterschreiben lassen ---- */ .gsm-sammel-start { width: 100%; justify-content: center; margin: 12px 0 4px; padding: 13px; border-radius: 13px; font-size: 14.5px; font-weight: 700; background: var(--card); border: 1.5px dashed var(--blue); color: var(--blue); } .gsm-sammel-kopf { background: var(--card); border: 1px solid var(--blue); border-radius: 14px; padding: 12px 14px; margin: 12px 0 6px; } .gsm-sammel-kopf .gsk-z1 { display: flex; align-items: center; gap: 10px; } .gsm-sammel-kopf .gsk-z1 b { flex: 1; font-size: 15px; } .gsm-sammel-kopf .gsk-hint { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-secondary); } .gsm-sammel-kopf .gsk-chips { display: flex; gap: 8px; flex-wrap: wrap; } .gsm-sammel-chip { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--text); cursor: pointer; } .gsm-sammel-chip:active { transform: scale(.95); } /* Karten im Auswahlmodus: die Kugel wird zum Haken-Kästchen */ .gsm-stopp.waehlbar { cursor: pointer; } .gsm-stopp.waehlbar .gsm-kugel { border: 2px solid var(--border); background: transparent; color: transparent; } .gsm-stopp.gewaehlt { border-color: var(--blue); background: rgba(45,125,196,.07); } .gsm-stopp.gewaehlt .gsm-kugel { border-color: var(--blue); background: var(--blue); color: #fff; } .gsm-stopp.ruht { opacity: .45; } html.dark .gsm-stopp.gewaehlt { background: rgba(45,125,196,.16); } /* Feste Leiste unten: zeigt die Auswahl und führt weiter - immer erreichbar */ .gsm-sammel-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(10, 24, 42, .12); } .gsm-sammel-leiste span { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); } .gsm-sammel-leiste .btn { flex: none; padding: 12px 18px; font-size: 14.5px; border-radius: 12px; } /* Platz schaffen, damit die Leiste nichts verdeckt. Bewusst über eine Klasse am body statt :has() - das gibt es erst ab iOS 15.4, und hier sind ältere iPhones im Einsatz. */ body.glas-sammel-offen .wrap { padding-bottom: 100px; } /* Liste der gewählten Objekte im Unterschrift-Blatt */ .gsm-sammel-liste { background: var(--bg); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; } .gsm-sammel-liste .gsl-zeile { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; font-weight: 600; color: var(--text); } .gsm-sammel-liste .gsl-hak { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #2e9e4f; color: #fff; font-size: 12px; display: grid; place-items: center; } /* ---- Mitarbeiter-Liste: erst der Überblick, Details erst beim Antippen ---- */ .glas-ma-karte { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 9px; overflow: hidden; transition: border-color .15s; } .glas-ma-karte.auf { border-color: var(--blue); } .glas-ma-zeile { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; color: var(--text); } .glas-ma-zeile:active { background: var(--bg); } .glas-ma-zeile .mz-txt { flex: 1; min-width: 0; } .glas-ma-zeile .mz-txt b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glas-ma-zeile .mz-txt span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .glas-ma-zeile .mz-pfeil { flex: none; color: var(--text-secondary); font-size: 17px; } .glas-ma-status { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glas-ma-status.gruen { background: #e3f3ea; color: #1f7a4d; } .glas-ma-status.rot { background: #fbe0e0; color: #b5371f; } .glas-ma-status.grau { background: var(--bg); color: var(--text-secondary); } html.dark .glas-ma-status.gruen { background: rgba(31,122,77,.22); color: #48d58d; } html.dark .glas-ma-status.rot { background: rgba(181,55,31,.24); color: #ef8b73; } .glas-ma-detail { padding: 0 14px 14px; border-top: 1px solid var(--border); } .glas-ma-fakten { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .glas-ma-fakten > div { display: flex; flex-direction: column; gap: 2px; } /* Nur die Beschriftung ist Kapitälchen - verschachtelte Spans im Wert (z.B. die eingefärbten Resttage) sollen normal bleiben, sonst steht da "30 ÜBRIG". */ .glas-ma-fakten > div > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); } .glas-ma-fakten b { font-size: 13.5px; font-weight: 600; color: var(--text); } .glas-ma-fakten b span { font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; } /* ---- Sammelunterschrift: Objekte antippen statt 13x einzeln unterschreiben ---- */ .glas-sammel-box { margin-top: 12px; border-left: 4px solid var(--blue); } .glas-stop-row.waehlbar { cursor: pointer; -webkit-tap-highlight-color: transparent; } .glas-stop-row.waehlbar:active { transform: scale(.995); } .glas-stop-row.waehlbar .glas-stop-num { border: 2px solid var(--border); background: transparent; color: transparent; } .glas-stop-row.gewaehlt { background: rgba(45, 125, 196, .07); border-color: var(--blue); } .glas-stop-row.gewaehlt .glas-stop-num { border-color: var(--blue); background: var(--blue); color: #fff; } html.dark .glas-stop-row.gewaehlt { background: rgba(45, 125, 196, .16); } /* Eingeteilt-Karte: Kopf mit Uhrzeit, darunter EINE Zeile je Person mit klarem Status rechts. Antippbar (heute/vergangen) für den "war nicht da"-Vermerk. */ .glas-lager-eintrag { background: var(--card); border: 1px solid var(--border); border-left: 4px solid #6b4ee6; border-radius: 15px; padding: 12px 14px; margin: 0 0 10px; } .glas-lager-eintrag .le-kopf { display: flex; align-items: center; gap: 12px; } .glas-lager-eintrag .le-zeit { flex: none; font-size: 21px; font-weight: 800; color: #6b4ee6; font-variant-numeric: tabular-nums; min-width: 58px; } .glas-lager-eintrag .le-info { flex: 1; min-width: 0; } .glas-lager-eintrag .le-notiz { display: block; font-size: 12.5px; color: var(--text); } .glas-lager-eintrag .le-meta { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; } .glas-lager-eintrag .le-personen { margin-top: 9px; border-top: 1px solid var(--border); } .glas-lager-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; border: none; border-bottom: 1px solid var(--border); background: transparent; font-family: inherit; font-size: 14px; color: var(--text); text-align: left; } .glas-lager-person:last-child { border-bottom: none; } .glas-lager-person.tippbar { cursor: pointer; } .glas-lager-person.tippbar:active { background: var(--bg); } .glas-lager-person .p-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glas-lager-person .p-name.abw { text-decoration: line-through; color: var(--text-secondary); } .glas-lager-person .p-status { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); } .glas-lager-person .p-status.ok { color: #0e8443; } .glas-lager-person .p-status.abw { color: #b23a1e; } html.dark .glas-lager-person .p-status.ok { color: #35c97e; } html.dark .glas-lager-person .p-status.abw { color: #e0795e; } /* ---------------- Reine Kalender-App (?app=kalender vom Home-Bildschirm) ---------------- Nur der Kalender, wie TimeTree: kein blauer Kopf, keine Reiter. Gilt ausschließlich auf dem Kalender-Tab - navigiert man weg, erscheint die normale Oberfläche. Der blaue Statusleisten-Streifen oben kommt aus html.app-mode body::before. */ /* Der Kopf wird NICHT mehr komplett versteckt: sonst gibt es keinen Weg zurück zum Hub (der Kalender ist inzwischen eine eigene Hub-Kachel). Versteckt wird nur der große Titel - die schlanke Nav-Zeile mit dem Hub-Knopf bleibt. */ body.glas-cal-pur .app-header { padding-bottom: 10px; } /* Das runde Logo sitzt normalerweise unter dem (hohen) Kopf. Im geschrumpften Kalender-Kopf lief es genau in den Hub-Knopf hinein - dort ist es reine Deko. */ body.glas-cal-pur .logo-badge { display: none; } body.glas-cal-pur .app-header .greeting, body.glas-cal-pur .app-header .stat { display: none; } body.glas-cal-pur .tabs { display: none; } /* Das Blatt schiebt sich normalerweise 28px ueber den Kopf (weicher Uebergang). Im knappen Kalender-Kopf frisst das genau die untere Kante des Hub-Knopfes - der sah dadurch abgeschnitten aus. Hier also buendig anschliessen. */ body.glas-cal-pur .app-sheet { border-radius: 18px 18px 0 0; margin-top: 0; } body.glas-cal-pur .app-header { padding-bottom: 12px; } body.glas-cal-pur .app-sheet-content, html.app-mode body.glas-cal-pur .app-sheet-content { padding-top: 10px; } /* Wochentagsleiste (Grundmaße = Handy, siehe Desktop-Block weiter unten) */ .glas-cal-dow > div { text-align: center; font-size: 11px; font-weight: 600; } /* ---- Kalender auf dem DESKTOP ---- Das Handy-Layout bleibt exakt wie es ist (alle Regeln hier stehen hinter einer min-width-Abfrage). Ab Tablet-Breite bekommt der Kalender das, was auf einem großen Bildschirm fehlte: begrenzte Breite statt über die volle Fensterbreite gezerrt, höhere Tageszellen und Schriftgrößen, die man auch aus Sitzabstand noch lesen kann (8px-Chips waren am Rechner nicht zu entziffern). */ @media (min-width: 760px) { /* Der .wrap ist bewusst schmal (720px). Der Kalender darf daraus ausbrechen, aber nicht mehr über die GANZE Fensterbreite laufen: begrenzt auf 1120px und exakt mittig - der wrap selbst ist ja zentriert. */ .glas-fullwidth .glas-cal-card { margin-left: calc(50% - min(560px, 50vw)); margin-right: calc(50% - min(560px, 50vw)); border-radius: 16px; } .glas-fullwidth .glas-cal-cell { min-height: 122px; padding: 5px 0 7px; gap: 3px; } .glas-fullwidth .glas-cal-daynum { width: 25px; height: 25px; font-size: 13.5px; } .glas-fullwidth .glas-cal-chip { font-size: 11.5px; letter-spacing: 0; line-height: 1.35; border-radius: 5px; padding: 2px 6px; --chip-rand: 3px; } .glas-fullwidth .glas-cal-dow > div { font-size: 13px; padding: 6px 0; } .glas-fullwidth .glas-cal-kw { font-size: 10.5px; } .glas-fullwidth .glas-cal-grid.with-kw { grid-template-columns: 26px repeat(7, 1fr); } } @media (min-width: 1180px) { .glas-fullwidth .glas-cal-cell { min-height: 142px; } .glas-fullwidth .glas-cal-chip { font-size: 12px; } } /* ---------------- Termin-Formular & -Detail im TimeTree-Stil ---------------- */ .glas-termin-sheet { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px 18px; margin-top: 14px; box-shadow: 0 4px 24px rgba(20, 30, 50, 0.08); } .glas-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .glas-sheet-titel { border: none !important; border-radius: 0 !important; padding: 6px 2px 14px !important; font-size: 23px !important; font-weight: 700; background: transparent !important; box-shadow: none !important; } .glas-sheet-titel:focus { box-shadow: none !important; } .glas-sheet-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14.5px; } .glas-sheet-row textarea { flex: 1; font-size: 14.5px; } .glas-sheet-row input[type="date"], .glas-sheet-row select { font-size: 14px; padding: 6px 9px; } .glas-sheet-ico { flex: 0 0 22px; text-align: center; font-size: 15px; } /* Haupt-Kundennummer im Kunden-Kopf: klein, aber sofort auffindbar (und mit Tabellenziffern, damit man sie gut ablesen und vergleichen kann). */ .glas-kdnr { display: inline-block; background: var(--blue-050, #eaf1f8); color: var(--blue); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; padding: 4px 10px; border-radius: 999px; user-select: all; /* ein Klick markiert die ganze Nummer zum Kopieren */ } html.dark .glas-kdnr { background: #16283a; } /* ---- Uhrzeit beim Termin ---- Bewusst gross, mit Tabellenziffern und ohne die winzigen Browser-Pfeilchen. Auf dem Handy oeffnet das Feld das native Uhrzeit-Rad, am Rechner tippt man einfach die Zahlen - darunter liegen zusaetzlich Schnellwahl-Knoepfe. */ .glas-time { font-size: 19px !important; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding: 7px 12px !important; width: auto; min-width: 104px; text-align: center; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-family: inherit; } .glas-time:focus { outline: 2px solid var(--blue); outline-offset: -1px; background: var(--card); } .glas-time::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; } .glas-time::-webkit-inner-spin-button, .glas-time::-webkit-outer-spin-button { -webkit-appearance: none; display: none; } .glas-zeit-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .glas-zeit-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit; transition: transform 0.1s, background 0.15s, border-color 0.15s; } .glas-zeit-chip:active { transform: scale(0.95); } .glas-zeit-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; } .glas-zeit-chip.glas-zeit-clear { color: var(--text-secondary); } .glas-zeit-chip.glas-zeit-clear.on { background: var(--text-secondary); border-color: var(--text-secondary); color: #fff; } .glas-sheet-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 2px; border-top: 1px solid var(--border); } .glas-sheet-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 100px; cursor: pointer; } .glas-sheet-chip:hover { background: var(--card); } /* Schwebender +Knopf unten rechts (wie TimeTree) */ .glas-fab { position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--blue); color: #fff; font-size: 30px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(31, 93, 146, 0.4); z-index: 40; transition: transform 0.15s ease; } .glas-fab:active { transform: scale(0.92); } /* Interne-Notiz-Karte (Graffiti): vorher fixe Gelbtöne, jetzt themefähig */ .glas-warncard { background: #fff8ec; border-color: #f0d9a8; } html.dark .glas-warncard { background: var(--warning-bg); border-color: #4d421f; } /* Kompakte Positions-Vorschau in der Tour-Detailansicht (Admin) */ .glas-stop-positionen { margin-top: 7px; border-left: 2px solid var(--border); padding-left: 8px; display: flex; flex-direction: column; gap: 3px; } .glas-stop-pos-row { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; min-width: 0; } .glas-stop-pos-nr { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; line-height: 16px; } /* Kunden-Objektliste: eine Zeile pro Objekt mit Infos rechts (Fälligkeit) */ .glas-objekt-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; cursor: pointer; border-radius: 8px; transition: background 0.12s ease; } .glas-objekt-row:first-child { border-top: none !important; } .glas-objekt-row-main { flex: 1; min-width: 0; } .glas-objekt-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; text-align: right; } .glas-objekt-row-arrow { flex-shrink: 0; font-size: 15px; } /* Desktop: mehr Luft + Hover, damit die Liste übersichtlich wirkt */ @media (min-width: 720px) { .glas-objekt-liste { padding: 4px 18px !important; } .glas-objekt-row { padding: 15px 8px; gap: 18px; } .glas-objekt-row:hover { background: var(--bg); } .glas-objekt-row-main p:first-child { font-size: 15.5px; } } /* ---- Kennzahlen-Kacheln (Kunden/Fällig-Übersicht) ---- */ .glas-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 16px; } .glas-stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; } .glas-stat-tile-num { display: block; font-size: 23px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; } .glas-stat-tile-lbl { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .glas-stat-tile.tone-accent .glas-stat-tile-num { color: var(--blue); } .glas-stat-tile.tone-crit .glas-stat-tile-num { color: var(--danger); } .glas-stat-tile.tone-warn .glas-stat-tile-num { color: #c8890f; } html.dark .glas-stat-tile.tone-warn .glas-stat-tile-num { color: #e5b95e; } /* ---- Objekt-Karten (Kunden-Detailseite) ---- */ .glas-objekt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; } .glas-objekt-card { border: 1px solid var(--border); border-left: 4px solid var(--stripe, var(--border)); border-radius: 12px; padding: 13px 15px; cursor: pointer; background: var(--card); transition: transform 0.12s ease, box-shadow 0.12s ease; } .glas-objekt-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,35,55,0.08); } html.dark .glas-objekt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .glas-objekt-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .glas-objekt-card-name { margin: 0; font-weight: 700; font-size: 15px; } .glas-objekt-card-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); } .glas-objekt-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } .glas-objekt-card-qm { font-weight: 700; } /* ============================================================ Jahresvorschau (fällige Objekte pro Monat) ============================================================ */ :root{ --jv-done:#1c7f3e; --jv-plan:#1f5d92; --jv-open:#bd6413; --jv-none:#98a2b0; --jv-done-bg:#e2f3e8; --jv-plan-bg:#e7f0fb; --jv-open-bg:#fdeede; --jv-none-bg:#eef1f5; } html.dark{ --jv-done:#3fa25f; --jv-plan:#3f83c4; --jv-open:#c07d3a; --jv-none:#7c8794; --jv-done-bg:#16301f; --jv-plan-bg:#16283a; --jv-open-bg:#33251a; --jv-none-bg:#222a34; } .jv-rail{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; scrollbar-width:none; } .jv-rail::-webkit-scrollbar{ display:none; } .jv-chip{ scroll-snap-align:center; flex:0 0 auto; min-width:58px; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:8px 10px 9px; cursor:pointer; text-align:center; transition:transform .2s cubic-bezier(.32,.72,0,1),border-color .2s,background .2s; } .jv-chip:active{ transform:scale(.92); } .jv-chip .mo{ font-size:13px; font-weight:800; } .jv-chip .cnt{ font-size:11px; color:var(--text-secondary); margin-top:1px; font-weight:600; font-variant-numeric:tabular-nums; } .jv-chip .load{ height:4px; border-radius:3px; background:var(--border); margin-top:6px; overflow:hidden; } .jv-chip .load i{ display:block; height:100%; background:var(--blue); border-radius:3px; } .jv-chip.on{ border-color:var(--blue); background:var(--tint-bald-bg, #e7f0fb); transform:translateY(-1px); } .jv-chip.on .mo{ color:var(--blue); } .jv-mhead{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 6px; } .jv-mhead h2{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em; } .jv-nav{ width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s; } .jv-nav:active{ transform:scale(.9); } .jv-tiles{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin:4px 0 2px; } .jv-tile{ background:var(--card); border:1px solid var(--border); border-radius:13px; padding:11px 12px; } .jv-tile .n{ font-size:21px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .jv-tile .n.a{ color:var(--blue); } .jv-tile .l{ font-size:11.5px; color:var(--text-secondary); font-weight:600; margin-top:1px; } .jv-sbar{ display:flex; gap:7px; margin:8px 0 2px; flex-wrap:wrap; } .jv-sb{ font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:8px; display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; } .jv-done{ background:var(--jv-done-bg); color:var(--jv-done); } .jv-plan{ background:var(--jv-plan-bg); color:var(--jv-plan); } .jv-open{ background:var(--jv-open-bg); color:var(--jv-open); } .jv-none{ background:var(--jv-none-bg); color:var(--jv-none); } /* "offen"-Indikator: gefüllter Punkt (Ampel-Logik) statt hohlem Kreis, der wie ein O aussah */ .jv-ring{ display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; box-sizing:border-box; vertical-align:0; } /* Startseiten-Karte für die Jahresvorschau (eigener, sichtbarer Platz) */ .glas-jahr-card{ display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:14px 15px; border:1px solid var(--border); border-radius:14px; cursor:pointer; text-align:left; font-family:inherit; color:var(--text); background:var(--tint-bald-bg, var(--card)); box-shadow:var(--shadow); transition:transform .15s cubic-bezier(.32,.72,0,1), box-shadow .15s; } .glas-jahr-card:active{ transform:scale(.98); } .gjc-ic{ font-size:22px; flex:0 0 auto; } .gjc-txt{ flex:1; min-width:0; } .gjc-t{ display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; } .gjc-s{ display:block; font-size:12px; color:var(--text-secondary); margin-top:2px; } .gjc-arr{ color:var(--blue); font-size:20px; flex:0 0 auto; font-weight:600; } .jv-kg{ background:var(--card); border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; } .jv-khead{ display:flex; align-items:center; gap:10px; padding:12px 13px; cursor:pointer; transition:background .15s; } .jv-khead:active{ background:var(--tint-bald-bg, #e7f0fb); } .jv-kav{ width:33px; height:33px; border-radius:9px; background:var(--tint-bald-bg, #e7f0fb); color:var(--blue); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13.5px; } .jv-kmeta{ flex:1; min-width:0; } .jv-kname{ font-weight:700; font-size:14px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jv-ksub{ font-size:12px; color:var(--text-secondary); margin-top:2px; display:flex; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jv-kcount{ font-size:12.5px; font-weight:800; color:var(--blue); background:var(--tint-bald-bg, #e7f0fb); padding:3px 9px; border-radius:8px; flex:0 0 auto; } .jv-chev{ color:var(--text-secondary); font-size:12px; transition:transform .3s cubic-bezier(.32,.72,0,1); flex:0 0 auto; } .jv-kg.open .jv-chev{ transform:rotate(180deg); } .jv-objs{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.32,.72,0,1); } .jv-kg.open .jv-objs{ grid-template-rows:1fr; } .jv-objs-in{ overflow:hidden; } .jv-kg.open .jv-objs-in{ border-top:1px solid var(--border); } .jv-orow{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-top:1px solid var(--border); } .jv-objs-in .jv-orow:first-child{ border-top:0; } .jv-obar{ width:4px; align-self:stretch; border-radius:3px; flex:0 0 auto; } .jv-oinfo{ flex:1; min-width:0; } .jv-oname{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jv-oqm{ font-size:11.5px; color:var(--text-secondary); margin-top:2px; display:flex; align-items:center; gap:6px; } .jv-spill{ font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:6px; } .jv-ichip{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:7px; flex:0 1 auto; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; background:var(--tint-bald-bg, #e7f0fb); color:var(--blue); } .jv-orow-arr{ color:var(--text-secondary); font-size:16px; flex:0 0 auto; } .jv-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .jv-ytile{ background:var(--card); border:1px solid var(--border); border-radius:15px; padding:12px 12px 11px; cursor:pointer; text-align:left; font-family:inherit; color:var(--text); position:relative; overflow:hidden; transition:transform .18s cubic-bezier(.32,.72,0,1); animation:jvPop .4s cubic-bezier(.32,.72,0,1) backwards; } .jv-ytile:active{ transform:scale(.95); } .jv-ytile.heavy{ border-color:color-mix(in srgb, var(--danger) 42%, var(--border)); } .jv-ytile.zero{ opacity:.55; } .jv-ytm{ font-size:12.5px; font-weight:800; color:var(--text-secondary); } .jv-ytn{ font-size:29px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:4px 0 1px; font-variant-numeric:tabular-nums; } .jv-ytl{ font-size:10.5px; color:var(--text-secondary); font-weight:600; } .jv-ystack{ display:flex; height:7px; border-radius:4px; overflow:hidden; margin:9px 0 7px; background:var(--border); gap:2px; } .jv-ystack i{ height:100%; } .jv-ycounts{ display:flex; gap:9px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } .jv-ynow{ position:absolute; top:10px; right:10px; font-size:9px; font-weight:800; color:#fff; background:var(--blue); padding:1px 6px; border-radius:5px; } .jv-legend{ display:flex; gap:12px; flex-wrap:wrap; margin:2px 0 12px; font-size:11.5px; color:var(--text-secondary); } .jv-legend span{ display:inline-flex; align-items:center; gap:5px; font-weight:600; } .jv-ldot{ width:10px; height:10px; border-radius:3px; display:inline-block; } .jv-anim-l{ animation:jvSlideL .32s cubic-bezier(.32,.72,0,1); } .jv-anim-r{ animation:jvSlideR .32s cubic-bezier(.32,.72,0,1); } @keyframes jvSlideL{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} } @keyframes jvSlideR{ from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} } @keyframes jvPop{ from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .jv-ytile,.jv-anim-l,.jv-anim-r{ animation:none!important; } .jv-objs{ transition:none!important; } } /* ---------------- Einheitliche Kopf-Navigation (GEKO-weit gleich) ---------------- Ein Knopf-Stil für Hub / Start / Zurück auf ALLEN Seiten - identisch in style.css UND checkins.css, damit er überall pixelgleich aussieht. Großes Tippziel, schnell zu treffen, halbtransparent weiß (steht auf jedem farbigen Kopf gut). */ /* Ein Knopf für Zurück/Start/Hub - überall gleich. Bewusst kompakt und rund, mit ruhigem Glas-Effekt statt harter Umrandung, damit die Kopfzeile aufgeräumt wirkt und nicht "zusammengewürfelt". Mindestens 38px hoch = sicher treffbar am Handy. */ .geko-navbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 14px; border-radius:12px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:14px; font-weight:600; font-family:inherit; text-decoration:none; cursor:pointer; line-height:1; white-space:nowrap; -webkit-tap-highlight-color:transparent; backdrop-filter:saturate(140%) blur(2px); transition:background .15s ease, transform .12s ease; } .geko-navbtn:hover{ background:rgba(255,255,255,.28); } .geko-navbtn:active{ transform:scale(.94); background:rgba(255,255,255,.34); } /* Reines Symbol (z.B. Zurück-Pfeil) quadratisch halten */ .geko-navbtn.icon{ width:38px; padding:0; font-size:17px; } /* ---- Hub-Knopf: der "Zuhause" der ganzen App-Familie ---- Vorher eine halbtransparente Fläche im blauen Kopf - sie verschwamm mit dem Hintergrund und war klein. Jetzt eine solide weiße Pille mit Haussymbol im getönten Kreis: sticht sofort heraus, ist deutlich größer zu treffen (44px statt 38px = Apples empfohlene Mindestgröße) und liest sich als echter Knopf. */ .geko-hubbtn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 6px; border-radius:22px; background:#fff; border:none; text-decoration:none; color:#1f5d92; font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; line-height:1; white-space:nowrap; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 10px rgba(8,26,45,.22); transition:transform .12s ease, box-shadow .15s ease; } .geko-hubbtn .hb-ic{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:17px; line-height:1; background:rgba(31,93,146,.11); color:#1f5d92; } .geko-hubbtn:hover{ box-shadow:0 4px 14px rgba(8,26,45,.28); } .geko-hubbtn:active{ transform:scale(.95); } html.dark .geko-hubbtn{ background:#e8eef5; } .geko-navrow{ display:flex; align-items:center; gap:8px; min-height:44px; } .geko-navrow .geko-navbtn.right{ margin-left:auto; } /* Nav-Knöpfe stehen IMMER oben links; der Seitenname rutscht nach rechts. */ .geko-brand{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; opacity:.92; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------------- Urlaubsanträge: nicht zu übersehen ---------------- Banner ganz oben auf der Admin-Startseite + kleiner roter Zähler am Kalender-Reiter. Beides verschwindet, sobald nichts mehr offen ist. */ .glas-urlaub-banner{ display:flex; align-items:center; gap:13px; width:100%; background:linear-gradient(135deg,#f6b93b,#e58e26); color:#fff; border:0; border-radius:16px; padding:15px 16px; margin:0 0 14px; cursor:pointer; font-family:inherit; text-align:left; box-shadow:0 4px 16px rgba(229,142,38,.28); animation:gubRein .45s ease both; } .glas-urlaub-banner:active{ transform:scale(.985); } .glas-urlaub-banner .gub-ic{ font-size:26px; flex:none; } .glas-urlaub-banner .gub-t{ display:block; font-size:15px; font-weight:800; } .glas-urlaub-banner .gub-s{ display:block; font-size:12.5px; opacity:.92; margin-top:2px; } .glas-urlaub-banner .gub-txt{ flex:1; min-width:0; } .glas-urlaub-banner .gub-arr{ font-size:22px; opacity:.9; flex:none; } @keyframes gubRein{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } /* Roter Zähler am Reiter-Symbol */ .tab-btn .tb-ic{ position:relative; display:inline-block; } .tab-btn .tb-badge{ position:absolute; top:-5px; right:-9px; min-width:17px; height:17px; border-radius:9px; background:#d93025; color:#fff; font-size:10.5px; font-weight:800; font-style:normal; line-height:17px; text-align:center; padding:0 4px; box-shadow:0 0 0 2px var(--card); } /* Ruhiges Ladebild statt einer falschen "nichts da"-Meldung, solange die Touren noch nie geladen wurden. Deutet die kommenden Karten an, damit die Seite nicht springt, sobald die echten Daten da sind. */ .glas-skelett{ padding:16px 0 0; } .glas-skelett-karte{ height:92px; border-radius:16px; margin-bottom:12px; background:linear-gradient(100deg, var(--card) 30%, rgba(0,0,0,.045) 50%, var(--card) 70%); background-size:220% 100%; animation:gekoSchimmer 1.25s ease-in-out infinite; border:1px solid var(--border); } html.dark .glas-skelett-karte{ background:linear-gradient(100deg, var(--card) 30%, rgba(255,255,255,.06) 50%, var(--card) 70%); background-size:220% 100%; } @keyframes gekoSchimmer{ from{ background-position:120% 0; } to{ background-position:-40% 0; } } @media (prefers-reduced-motion:reduce){ .glas-skelett-karte{ animation:none; } } /* ---- Hinweis nach einem Deploy ---- Die geöffnete Seite läuft noch mit den alten Dateien, bis sie neu geladen wird. Bei einer App auf dem Home-Bildschirm passiert das von allein kaum - deshalb dieser Balken. Bewusst unten und antippbar, nie automatisch neu laden. */ .geko-updatebar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translate(-50%, 24px); opacity: 0; z-index: 950; display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 999px; border: none; background: #1f5d92; color: #fff; font-family: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 26px rgba(8, 26, 45, .35); transition: transform .25s cubic-bezier(.2,.9,.3,1), opacity .25s ease; } .geko-updatebar.auf { transform: translate(-50%, 0); opacity: 1; } .geko-updatebar b { font-weight: 800; text-decoration: underline; } .geko-updatebar:active { transform: translate(-50%, 0) scale(.96); } /* ============ Tipp-Rückmeldung (gesetzt von geko-auth.js) ============ */ /* Warum per Script statt nur :active: iOS zeigt :active bei schnellen Tipps gar nicht an - der Finger ist weg, bevor der Zustand greift. Das Script hält den Druck mindestens ~90ms sichtbar und lässt ihn dann mit leichtem Federn zurück. Nur transform/opacity: läuft auf der Grafikeinheit und berechnet kein Layout neu - kostet also keine Geschwindigkeit. */ .tap-federt { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease; will-change: transform; } .tap-druck { transform: scale(.962); opacity: .85; } /* Kleine Bedienelemente duerfen staerker reagieren als grosse Karten */ button.tap-druck:not(.hub-tile):not(.one-kachel):not(.glas-tour-card) { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .tap-federt { transition: none; will-change: auto; } .tap-druck { transform: none; opacity: .75; } }