/* ============================================================ GEMA Native — iOS/iPadOS component layer (Variante 1c) Vanilla CSS, framework-frei. In bestehendes Projekt einbinden: Alle Farben/Radien über CSS-Variablen -> zentral themebar. ============================================================ */ :root{ /* --- GEMA Marke --- */ --gn-accent:#2563eb; --gn-accent-600:#1d4ed8; --gn-ok:#16a34a; --gn-warn:#b45309; --gn-danger:#dc2626; --gn-info:#2563eb; /* --- Flächen / Text --- */ --gn-bg:#eef1f8; --gn-bg-2:#e6eaf3; --gn-card:#ffffff; --gn-ink:#111827; --gn-ink-2:#6b7280; --gn-ink-3:#8e8e93; --gn-hair:rgba(0,0,0,.07); --gn-fill:rgba(118,118,128,.12); /* iOS „tertiary fill" (Suchfeld, Segmented) */ /* --- Kategorie-Farbverläufe (Modul-Icons) --- */ --gn-c-sanitaer:linear-gradient(135deg,#2563eb,#3b82f6); --gn-c-heizung:linear-gradient(135deg,#ea580c,#f59e0b); --gn-c-lueftung:linear-gradient(135deg,#0891b2,#06b6d4); --gn-c-elektro:linear-gradient(135deg,#ca8a04,#eab308); --gn-c-hygiene:linear-gradient(135deg,#16a34a,#22c55e); --gn-c-projekt:linear-gradient(135deg,#7c3aed,#a78bfa); /* die übrigen GEMA-Kategorien (Modulübersicht) — Töne wie index.html */ --gn-c-brand:linear-gradient(135deg,#b91c1c,#ef4444); --gn-c-infra:linear-gradient(135deg,#0e7490,#06b6d4); --gn-c-schaden:linear-gradient(135deg,#be123c,#fb7185); --gn-c-immo:linear-gradient(135deg,#0f766e,#14b8a6); --gn-c-spengler:linear-gradient(135deg,#475569,#94a3b8); --gn-c-ausb:linear-gradient(135deg,#4338ca,#818cf8); --gn-c-admin:linear-gradient(135deg,#1e1b4b,#3730a3); --gn-c-lief:linear-gradient(135deg,#065f46,#16a34a); --gn-c-fav:linear-gradient(135deg,#d97706,#f59e0b); /* --- Form --- */ --gn-r-card:16px; --gn-r-tile:16px; --gn-r-field:14px; --gn-shadow-card:0 1px 2px rgba(15,23,42,.05); --gn-shadow-float:0 12px 32px -8px rgba(0,0,0,.5); --gn-font:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* Safe-Area (iPhone Notch / Home-Indikator). Fallback 0. */ --gn-safe-top:env(safe-area-inset-top,0px); --gn-safe-bottom:env(safe-area-inset-bottom,0px); } .gn,.gn *,.gn *::before,.gn *::after{box-sizing:border-box} /* Text-Markierung nur DORT aus, wo der Long-Press schon etwas anderes tut: Elemente mit Kontextmenue (data-gn-ctx) und alles darin. Sonst markiert der Browser beim Aufziehen des Menues gleichzeitig die Beschriftung und blendet auf iOS das Callout «Kopieren/Nachschlagen» ein. Die Pruefung macht der Browser selbst (Attribut-Selektor) — sie greift damit auch fuer Elemente, die erst spaeter gerendert werden. UEBERALL SONST im Screen bleibt Markieren/Kopieren moeglich (Werte in Detail-Sheets, Adressen, Seriennummern …). */ .gn [data-gn-ctx],.gn [data-gn-ctx] *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } /* Sollte ein Kontextmenue-Element je ein Eingabefeld enthalten, bleibt es bedienbar (Auswahl im Feld waere sonst mit-abgeschaltet). */ .gn [data-gn-ctx] input,.gn [data-gn-ctx] textarea, .gn [data-gn-ctx] select,.gn [data-gn-ctx] [contenteditable]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; } /* Wurzel des App-Screens: füllt den Viewport wie eine echte App. (Im Prototyp sitzt sie im Geräterahmen — für Produktion einfach auf das Seiten-Root / anwenden.) */ .gn{ position:relative; height:100%; background:linear-gradient(180deg,var(--gn-bg),var(--gn-bg-2)); font-family:var(--gn-font); color:var(--gn-ink); -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-tap-highlight-color:transparent; container-type:inline-size; /* Raster/Layout richten sich nach der App-Breite (auch iPad-Split-View) */ } /* Scroll-Fläche */ .gn .gn-screen{ position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain; padding-top:calc(var(--gn-safe-top) + 8px); padding-bottom:calc(var(--gn-safe-bottom) + 96px); -webkit-overflow-scrolling:touch; } .gn .gn-screen::-webkit-scrollbar{width:0;height:0} .gn .gn-screen{scrollbar-width:none} /* ---------- Kopf ---------- */ .gn .gn-header{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 14px} .gn .gn-hello{font-size:13px;color:var(--gn-ink-2);font-weight:500} .gn .gn-name{font-size:23px;font-weight:800;letter-spacing:-.6px;margin-top:1px} .gn .gn-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1d4ed8,#16a34a); color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.15);flex:none} /* ---------- Such-/Befehlsauslöser ---------- */ .gn .gn-search{display:flex;align-items:center;gap:10px;margin:0 20px 20px;background:var(--gn-card); border-radius:var(--gn-r-field);padding:13px 15px;box-shadow:0 4px 14px -4px rgba(15,23,42,.14); cursor:pointer;border:none;width:calc(100% - 40px);font-family:inherit;text-align:left} .gn .gn-search span{font-size:15.5px;color:var(--gn-ink-3);flex:1} .gn .gn-search kbd{font-size:11px;font-weight:700;color:#9ca3af;background:#f1f3f8;border-radius:6px;padding:3px 6px;font-family:inherit} .gn .gn-search:active{transform:scale(.99)} /* ---------- Abschnitts-Label ---------- */ .gn .gn-label{padding:0 20px 8px;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gn-ink-2)} /* ---------- Schnellzugriff-Chips ---------- */ .gn .gn-quick{display:flex;gap:8px;overflow-x:auto;padding:0 20px 22px;scrollbar-width:none} .gn .gn-quick::-webkit-scrollbar{display:none} .gn .gn-chip{flex:none;display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:12px; background:var(--gn-card);box-shadow:var(--gn-shadow-card);font-size:13px;font-weight:600; color:var(--gn-ink);white-space:nowrap;cursor:pointer;border:none;font-family:inherit} .gn .gn-chip:active{transform:scale(.96)} /* ---------- Springboard-Raster ---------- */ /* minmax(0,…) statt 1fr: sonst wächst eine Spalte auf die min-content-Breite eines langen Modulnamens («Baustellencheckliste») und das Raster läuft aus dem Screen (.gn hat overflow:hidden → der Rest wäre unerreichbar). */ .gn .gn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 6px;padding:6px 14px 8px} @container (min-width:540px){ .gn .gn-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @container (min-width:820px){ .gn .gn-grid{grid-template-columns:repeat(6,minmax(0,1fr))} } .gn .gn-tile{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;min-width:0} /* Kachelgrösse unverändert (68px) — NUR das Symbol darin ist grösser (Feedback 26.07.2026: «die kacheln sollen nicht grösser sein, nur die emojis drin»). Die Emoji füllt die Fläche jetzt deutlich besser aus. */ .gn .gn-tile-ic{position:relative;width:68px;height:68px;border-radius:var(--gn-r-tile);display:flex;align-items:center;justify-content:center; color:#fff;background:var(--gn-tile-bg,var(--gn-c-sanitaer));box-shadow:0 6px 14px -4px rgba(37,99,235,.5); font-size:42px;line-height:1} /* GEMA-Modul-Icons sind Emojis, nicht SVG */ .gn .gn-tile-ic svg{width:36px;height:36px} /* Favoriten sind ebenfalls Apps — erkennbar an einem dezenten gelben Rahmen (Feedback 26.07.2026; sie stehen NUR noch in der Favoriten-Sektion). */ .gn .gn-tile--fav .gn-tile-ic{box-shadow:0 0 0 2.5px #f5c04a,0 6px 14px -4px rgba(245,158,11,.45)} /* Favoriten-Marker LINKS oben — rechts sitzt das Mitteilungs-Abzeichen (iOS-Kanon) */ .gn .gn-tile-fav{position:absolute;top:-5px;left:-5px;width:19px;height:19px;border-radius:50%; background:#f59e0b;color:#fff;font-size:10.5px;line-height:19px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.28)} /* Offene Mitteilungen: rote Zahl rechts oben wie auf dem iPhone-Homescreen */ .gn .gn-badge-ios{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px; background:#ff3b30;color:#fff;font:800 12.5px/22px var(--gn-font);text-align:center;letter-spacing:-.2px; box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 6px rgba(0,0,0,.25)} /* Auf dem Chip läuft die Zahl IM Fluss mit — .gn-quick scrollt horizontal und würde ein überstehendes Abzeichen oben abschneiden. */ .gn .gn-chip{position:relative} .gn .gn-chip > .gn-badge-ios{position:static;min-width:19px;height:19px;border-radius:10px; font-size:11.5px;line-height:19px;padding:0 5px;box-shadow:none} /* Lange deutsche Modulnamen («Baustellencheckliste») sind EIN Wort und passen bei 11px nicht in eine Spalte — ohne Gegenmassnahme bricht der Browser mitten im Wort um. Der Home-Screen vergibt darum je nach längstem Wort .is-s/.is-xs; Silbentrennung/Umbruch bleiben als letzte Reserve. */ /* :not(.gn-tile-ic) — KRITISCH: das Icon ist ebenfalls ein in .gn-tile. Ohne die Ausnahme trifft die Titel-Regel (Spezifität 0,2,1) auch das Symbol und überschreibt dessen font-size (0,2,0): die Emoji war real 11px bzw. 8.8px bei langen Modulnamen — daher wirkten die Symbole winzig. */ .gn .gn-tile span:not(.gn-tile-ic){font-size:11px;font-weight:600;color:#374151;text-align:center;line-height:1.15; max-width:100%;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto} .gn .gn-tile.is-s span:not(.gn-tile-ic){font-size:10px} .gn .gn-tile.is-xs span:not(.gn-tile-ic){font-size:8.8px;letter-spacing:-.15px} .gn .gn-tile:active .gn-tile-ic{transform:scale(.92)} .gn .gn-tile-ic{transition:transform .12s} /* ---------- Gruppierte Liste (iOS „inset grouped") ---------- */ .gn .gn-list{padding:0;flex:none;background:var(--gn-card);border-radius:var(--gn-r-card);box-shadow:var(--gn-shadow-card);overflow:hidden;margin:0 16px 22px} .gn .gn-row{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:47px;position:relative;cursor:pointer;background:none;border:none;width:100%;font-family:inherit;text-align:left} .gn .gn-row:active{background:rgba(0,0,0,.04)} .gn .gn-row + .gn-row::before{content:"";position:absolute;left:55px;right:0;top:0;height:1px;background:var(--gn-hair)} .gn .gn-row.gn-row--lg + .gn-row.gn-row--lg::before{left:64px} .gn .gn-row-ic{width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;background:var(--gn-row-bg,var(--gn-c-sanitaer))} .gn .gn-row-ic svg{width:17px;height:17px} .gn .gn-row-body{flex:1;min-width:0} .gn .gn-row-title{display:block;font-size:16px;font-weight:500;color:var(--gn-ink);letter-spacing:-.2px} .gn .gn-row-sub{display:block;font-size:13px;color:var(--gn-ink-2);margin-top:1px} .gn .gn-chevron{width:8px;height:13px;flex:none;color:#c4c8d0} /* ---------- Statusabzeichen / Ampel ---------- */ .gn .gn-badge{display:inline-block;position:static;height:auto;min-width:0;line-height:1.4;box-shadow:none;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap} .gn .gn-badge--ok{color:var(--gn-ok);background:#dcfce7} .gn .gn-badge--warn{color:var(--gn-warn);background:#fef3c7} .gn .gn-badge--danger{color:var(--gn-danger);background:#fee2e2} .gn .gn-badge--info{color:var(--gn-info);background:#dbeafe} /* ---------- Schwebende Aktionsleiste ---------- */ .gn .gn-pill{position:absolute;left:50%;bottom:calc(var(--gn-safe-bottom) + 22px);transform:translateX(-50%); z-index:22;display:flex;align-items:center;gap:6px;background:rgba(28,28,30,.88); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:28px;padding:7px 9px;box-shadow:var(--gn-shadow-float)} .gn .gn-pill-btn{position:relative;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none} .gn .gn-pill-btn svg{width:23px;height:23px;stroke:#fff} /* Ungelesen-Zähler auf einem Pill-Knopf (z.B. Mitteilungen) */ .gn .gn-pill-dot{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--gn-danger);color:#fff;font:800 10.5px/17px var(--gn-font);text-align:center} .gn .gn-pill-btn--primary{background:var(--gn-accent);box-shadow:0 4px 12px -2px rgba(37,99,235,.7)} .gn .gn-pill-btn:active{transform:scale(.92)} /* ============================================================ Overlays — Command-Palette, Sheet, Detail (Push), Kontextmenü Öffnen/Schliessen ausschliesslich über die Klasse .is-open. ============================================================ */ /* gemeinsamer, unscharfer Hintergrund */ .gn .gn-backdrop{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .24s} .gn .gn-backdrop.is-open{opacity:1;pointer-events:auto} /* --- Command-Palette --- */ .gn .gn-cmd-backdrop{z-index:36;background:rgba(15,23,42,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .gn .gn-cmd{position:absolute;top:calc(var(--gn-safe-top) + 8px);left:12px;right:12px;z-index:37; transform:translateY(-14px) scale(.97);opacity:0;pointer-events:none; transition:transform .26s cubic-bezier(.2,.9,.3,1),opacity .2s; background:rgba(248,249,252,.86);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6); border:1px solid rgba(255,255,255,.6);border-radius:20px;overflow:hidden; box-shadow:0 26px 60px -14px rgba(15,23,42,.42);max-height:78%;display:flex;flex-direction:column} .gn .gn-cmd.is-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .gn .gn-cmd-field{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--gn-hair)} .gn .gn-cmd-field svg{width:19px;height:19px;stroke:var(--gn-accent);flex:none} .gn .gn-cmd-input{flex:1;border:none;background:none;font-family:inherit;font-size:16.5px;color:var(--gn-ink);outline:none} .gn .gn-cmd-list{overflow-y:auto;scrollbar-width:none} .gn .gn-cmd-list::-webkit-scrollbar{display:none} .gn .gn-cmd-group{padding:11px 16px 5px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9ca3af} .gn .gn-cmd-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer} .gn .gn-cmd-item:active{background:rgba(0,0,0,.04)} .gn .gn-cmd-item .gn-cmd-ic{width:30px;height:30px;border-radius:8px;background:#eff4ff;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px} .gn .gn-cmd-item .gn-cmd-ic svg{width:17px;height:17px;stroke:var(--gn-accent)} .gn .gn-cmd-item b{font-size:15.5px;color:var(--gn-ink);font-weight:500;display:block} .gn .gn-cmd-item small{font-size:12px;color:var(--gn-ink-3)} /* --- Bottom-Sheet --- */ .gn .gn-sheet-backdrop{z-index:30;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .gn .gn-sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;transform:translateY(101%); transition:transform .36s cubic-bezier(.32,.72,0,1);background:#f2f4f9;border-radius:22px 22px 0 0; height:80%;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(15,23,42,.2)} .gn .gn-sheet.is-open{transform:translateY(0)} .gn .gn-grab{padding:10px 0 4px;display:flex;justify-content:center;cursor:grab;touch-action:none} .gn .gn-grab i{width:38px;height:5px;border-radius:3px;background:rgba(0,0,0,.18);display:block} .gn .gn-sheet-head{padding:4px 20px 12px;display:flex;align-items:center;justify-content:space-between} .gn .gn-sheet-head h2{font-size:21px;font-weight:800;letter-spacing:-.4px;margin:0} .gn .gn-sheet-body{flex:1;overflow-y:auto;padding:0 16px 24px;scrollbar-width:none} .gn .gn-sheet-body::-webkit-scrollbar{display:none} .gn .gn-sheet-body .gn-list{margin:0 0 18px} .gn .gn-sheet-body .gn-label{padding:0 4px 7px;text-transform:none;font-weight:600;font-size:13px} /* runder Icon-Schliess-Button (Sheet & Palette) */ .gn .gn-x{width:30px;height:30px;border-radius:50%;background:var(--gn-fill);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;flex:none} .gn .gn-x svg{width:14px;height:14px;stroke:var(--gn-ink-2)} /* --- Detail (Push/Pop wie native Navigation) --- */ .gn .gn-detail{position:absolute;inset:0;z-index:35;background:var(--gn-bg); transform:translateX(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);overflow:hidden} .gn .gn-detail.is-open{transform:translateX(0)} .gn .gn-detail-scroll{position:absolute;inset:0;overflow-y:auto;padding-top:calc(var(--gn-safe-top) + 4px);padding-bottom:96px} .gn .gn-detail-scroll::-webkit-scrollbar{display:none} .gn .gn-back{height:44px;display:flex;align-items:center;padding:0 8px;background:none;border:none; color:var(--gn-accent);font-family:inherit;font-size:16.5px;cursor:pointer;gap:3px} .gn .gn-back svg{width:11px;height:18px;stroke:var(--gn-accent)} .gn .gn-large-title{padding:2px 18px 10px} .gn .gn-large-title h1{font-size:32px;font-weight:800;letter-spacing:-.8px;margin:0} .gn .gn-large-title p{font-size:13.5px;color:var(--gn-ink-2);margin:3px 0 0} .gn .gn-detail-cta{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(var(--gn-safe-bottom) + 16px); background:rgba(239,242,249,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--gn-hair)} /* Ergebnis-Karte (Akzentfläche) */ .gn .gn-result{margin:0 16px 22px;border-radius:var(--gn-r-card);padding:20px;color:#fff; background:var(--gn-c-sanitaer);box-shadow:0 8px 22px -6px rgba(37,99,235,.5)} .gn .gn-result small{font-size:13px;font-weight:600;opacity:.9} .gn .gn-result .gn-val{font-size:38px;font-weight:800;letter-spacing:-1px;margin-top:2px;font-variant-numeric:tabular-nums} .gn .gn-result .gn-val u{font-size:20px;font-weight:700;text-decoration:none} .gn .gn-result .gn-note{font-size:12.5px;opacity:.85;margin-top:4px} /* Detail-Zeile mit Wert rechts */ .gn .gn-kv{display:flex;align-items:center;gap:12px;padding:11px 15px;position:relative} .gn .gn-kv + .gn-kv::before{content:"";position:absolute;left:15px;right:0;top:0;height:1px;background:var(--gn-hair)} .gn .gn-kv .k{flex:1;font-size:16px;color:var(--gn-ink)} .gn .gn-kv .v{font-size:16px;color:var(--gn-ink-2)} .gn .gn-kv .v.is-strong{font-weight:600;color:var(--gn-ink);font-variant-numeric:tabular-nums} /* --- Segmented Control --- */ .gn .gn-seg{display:flex;background:var(--gn-fill);border-radius:9px;padding:2px;gap:2px;margin:2px 16px 18px} .gn .gn-seg-opt{flex:1;text-align:center;padding:7px 0;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--gn-ink-2);cursor:pointer;border:none;background:none;font-family:inherit;transition:color .15s} .gn .gn-seg-opt.is-active{color:var(--gn-ink);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)} /* --- Primär-Button --- */ .gn .gn-btn{display:block;height:auto;width:100%;background:var(--gn-accent);color:#fff;border:none;border-radius:13px; padding:14px;text-align:center;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer; box-shadow:0 6px 16px -4px rgba(37,99,235,.5)} .gn .gn-btn:active{transform:scale(.99);background:var(--gn-accent-600)} /* --- Kontextmenü (Long-Press) --- */ .gn .gn-ctx-backdrop{z-index:40;background:rgba(15,23,42,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px} .gn .gn-ctx-preview{background:#fff;border-radius:14px;padding:16px 18px;max-width:250px;text-align:center;margin-bottom:14px;box-shadow:0 12px 40px rgba(0,0,0,.25)} .gn .gn-ctx-preview b{font-size:15px;font-weight:700;color:var(--gn-ink)} .gn .gn-ctx-preview small{font-size:12.5px;color:var(--gn-ink-2);display:block;margin-top:3px} .gn .gn-ctx-menu{width:250px;background:rgba(250,250,252,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-radius:14px;overflow:hidden;transform:scale(.88);opacity:0; transition:transform .2s cubic-bezier(.2,1.1,.4,1),opacity .2s;box-shadow:0 12px 40px rgba(0,0,0,.22)} .gn .gn-ctx-backdrop.is-open .gn-ctx-menu{transform:scale(1);opacity:1} .gn .gn-ctx-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:16px;color:var(--gn-ink);font-weight:500;cursor:pointer} .gn .gn-ctx-item + .gn-ctx-item{border-top:1px solid var(--gn-hair)} .gn .gn-ctx-item svg{width:19px;height:19px;stroke:currentColor} .gn .gn-ctx-item--accent{color:var(--gn-accent)} .gn .gn-ctx-item--danger{color:var(--gn-danger)} /* --- Grosser Titel -> kompakte Navigationsleiste beim Scrollen --- */ .gn .gn-compact{position:absolute;top:0;left:0;right:0;z-index:15; padding-top:calc(var(--gn-safe-top) + 6px);padding-bottom:10px; display:flex;align-items:center;justify-content:center; background:rgba(238,241,248,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--gn-hair);opacity:0;transition:opacity .22s;pointer-events:none} .gn .gn-compact.is-visible{opacity:1} .gn .gn-compact b{font-size:16px;font-weight:700;letter-spacing:-.2px} /* --- Pull-to-Refresh --- */ .gn .gn-ptr-spinner{position:absolute;top:calc(var(--gn-safe-top) + 6px);left:50%;transform:translateX(-50%);opacity:0;transition:opacity .2s;z-index:1;pointer-events:none} .gn .gn-ptr-spinner svg{width:22px;height:22px;stroke:var(--gn-accent)} @keyframes gn-spin{to{transform:rotate(360deg)}} .gn .gn-ptr-spinner.is-busy svg{animation:gn-spin .8s linear infinite} /* ============================================================ ERWEITERTE BAUSTEINE (Workspace, Listen, Formulare) ============================================================ */ /* Kopf mit grossem Titel + Aktionen rechts */ .gn .gn-toolbar{display:flex;align-items:flex-end;gap:10px;padding:2px 16px 8px} .gn .gn-toolbar .gn-large-title{flex:1;padding:0} .gn .gn-icon-btn{width:38px;height:38px;border-radius:10px;background:var(--gn-card);box-shadow:var(--gn-shadow-card); display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;flex:none} .gn .gn-icon-btn svg{width:19px;height:19px;stroke:#374151} .gn .gn-icon-btn:active{transform:scale(.94)} .gn .gn-icon-btn--primary{background:var(--gn-accent);box-shadow:0 3px 10px -2px rgba(37,99,235,.5)} .gn .gn-icon-btn--primary svg{stroke:#fff} /* Persistente Suchleiste (iOS) — anders als der Command-Auslöser */ .gn .gn-searchbar{display:flex;align-items:center;gap:8px;margin:2px 16px 16px;background:var(--gn-fill);border-radius:11px;padding:10px 12px} .gn .gn-searchbar svg{width:16px;height:16px;stroke:var(--gn-ink-3);flex:none} .gn .gn-searchbar input{flex:1;border:none;background:none;font-family:inherit;font-size:16px;color:var(--gn-ink);outline:none} .gn .gn-searchbar input::placeholder{color:var(--gn-ink-3)} /* KPI-/Statistik-Karten */ .gn .gn-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 22px} @container (min-width:540px){ .gn .gn-stats{grid-template-columns:repeat(4,1fr)} } .gn .gn-stat{background:var(--gn-card);border-radius:14px;box-shadow:var(--gn-shadow-card);padding:14px 15px} .gn .gn-stat-k{font-size:12px;font-weight:600;color:var(--gn-ink-2)} .gn .gn-stat-v{font-size:27px;font-weight:800;letter-spacing:-.6px;margin-top:3px;font-variant-numeric:tabular-nums} .gn .gn-stat-sub{font-size:12px;margin-top:2px;color:var(--gn-ink-2)} /* Karte mit freiem Inhalt (Fortschritt etc.) */ .gn .gn-card{background:var(--gn-card);border-radius:var(--gn-r-card);box-shadow:var(--gn-shadow-card);padding:16px;margin:0 16px 22px} .gn .gn-card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px} .gn .gn-card-head b{font-size:16px;font-weight:700} .gn .gn-card-head span{font-size:13px;color:var(--gn-ink-2);font-variant-numeric:tabular-nums} .gn .gn-progress{height:7px;border-radius:4px;background:var(--gn-fill);overflow:hidden} .gn .gn-progress i{display:block;height:100%;border-radius:4px;background:var(--gn-accent)} /* Formularfeld / Eingaben */ .gn .gn-field{margin:0 16px 14px} .gn .gn-field > label{display:block;font-size:12.5px;font-weight:600;color:var(--gn-ink-2);margin:0 2px 6px} .gn .gn-input{width:100%;background:var(--gn-card);border:1px solid var(--gn-hair);border-radius:12px;padding:13px 14px; font-family:inherit;font-size:16px;color:var(--gn-ink);outline:none;box-shadow:var(--gn-shadow-card)} .gn .gn-input:focus{border-color:var(--gn-accent)} /* Auswahl-Zeile (tippbar, Wert + Chevron) — nutzt .gn-list als Container */ .gn .gn-select{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;background:none;border:none;width:100%;font-family:inherit;text-align:left} .gn .gn-select .k{flex:1;font-size:16px;color:var(--gn-ink)} .gn .gn-select .v{font-size:16px;color:var(--gn-ink-2)} .gn .gn-select + .gn-select::before{content:"";position:absolute;left:14px;right:0;top:0;height:1px;background:var(--gn-hair)} .gn .gn-select{position:relative} /* Stepper (− Wert +) */ .gn .gn-stepper{display:flex;align-items:center;background:var(--gn-card);border-radius:12px;box-shadow:var(--gn-shadow-card);overflow:hidden;border:1px solid var(--gn-hair)} .gn .gn-stepper button{width:52px;height:50px;border:none;background:none;font-size:22px;color:var(--gn-accent);cursor:pointer;font-family:inherit} .gn .gn-stepper button:active{background:var(--gn-fill)} .gn .gn-stepper-v{flex:1;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums} /* Wert rechts in einer Zeile (z. B. Stunden) */ .gn .gn-row-val{font-size:16px;font-weight:600;color:var(--gn-ink);font-variant-numeric:tabular-nums;margin-left:auto} /* kleines Initialen-Chip (Fahrer / Nutzer) */ .gn .gn-ava-sm{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1d4ed8,#16a34a);color:#fff; display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none} /* Kalender / Einsatzplan — Wochenstreifen */ .gn .gn-weekstrip{display:flex;gap:6px;padding:0 12px 16px} .gn .gn-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;border-radius:12px;cursor:pointer;background:none;border:none;font-family:inherit} .gn .gn-day small{font-size:11px;font-weight:600;color:var(--gn-ink-3)} .gn .gn-day b{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--gn-ink);font-variant-numeric:tabular-nums} .gn .gn-day i{width:5px;height:5px;border-radius:50%;background:var(--gn-accent);opacity:0} .gn .gn-day.has-dot i{opacity:1} .gn .gn-day.is-active b{background:var(--gn-accent);color:#fff} .gn .gn-day.is-active i{background:var(--gn-ink-3)} /* Agenda / Termine */ .gn .gn-agenda{margin:0 16px 22px;display:flex;flex-direction:column;gap:10px} .gn .gn-event{display:flex;gap:12px;background:var(--gn-card);border-radius:14px;box-shadow:var(--gn-shadow-card);padding:12px 14px;position:relative;overflow:hidden;cursor:pointer} .gn .gn-event::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gn-event-c,var(--gn-accent))} .gn .gn-event-time{width:50px;flex:none;font-size:13px;font-weight:700;color:var(--gn-ink);font-variant-numeric:tabular-nums;padding-left:6px} .gn .gn-event-time span{display:block;font-weight:500;color:var(--gn-ink-3);font-size:12px} .gn .gn-event-body{flex:1;min-width:0} .gn .gn-event-title{font-size:15.5px;font-weight:600;color:var(--gn-ink)} .gn .gn-event-meta{font-size:13px;color:var(--gn-ink-2);margin-top:2px} .gn .gn-avatars{display:flex;margin-top:8px} .gn .gn-avatars .gn-ava-sm{margin-right:-8px;border:2px solid var(--gn-card)} /* Tastatur-Fokus sichtbar (nicht Browser-Standardblau) */ .gn :focus-visible{outline:2px solid var(--gn-accent);outline-offset:2px}