/* ===================================================================== GINY · KACHEL- UND FLÄCHEN-STANDARD ("Konzept C · Kopfzeile") QUELLE DER WAHRHEIT für alle Kacheln, Karten und Arbeitsflächen. Beschlossen 27.07.2026. Doku: docs/CARDS.md GLOBAL ANPASSEN = EINE ZAHL ÄNDERN: --gy-veil ..... Deckkraft ALLER Flächen (0 = transparent, 1 = deckend) --gc-pad ...... Innenabstand (der Dichteregler) --gc-r ........ Eckenradius Grundsätze: - EINE Fläche für alles: Kachel und Arbeitsfläche sehen identisch aus. Keine gestapelten Flächen (sonst addieren sich die Deckkräfte). - Jede Kachel hat eine Kopfzeile (Titel) und einen Körper (Inhalt). Die Kopfzeile trennt allein die Linie — sie hat KEINE eigene Fläche. - Status färbt nur die Kopfzeile, nie die ganze Fläche. - Blickdicht bleiben ausschließlich Menüs und Eingabefelder. ===================================================================== */ :root{ /* >>> DER EINE REGLER <<< */ --gy-veil:0.72; /* Deckkraft aller Flächen */ --gy-veil-solid:1; /* Menüs/Eingabefelder — bewusst blickdicht */ --gy-blur:blur(28px) saturate(180%); --gy-edge:rgba(255,255,255,.55); --gy-hairline:rgba(34,38,46,.12); --gy-shadow:0 1px 2px rgba(20,30,60,.10),0 8px 22px rgba(20,30,60,.16); /* Maße */ --gc-r:12px; /* Eckenradius */ --gc-pad:10px 13px; /* Innenabstand Körper (kompakt) */ --gc-hd-pad:8px 13px; /* Innenabstand Kopfzeile */ --gc-gap:10px; /* Abstand im Raster */ --gc-min-h:70px; /* Mindesthöhe kompakt — seit 03.08.2026 auf die zweizeilige Kachel ausgelegt (Kopfzeile + Wert mit Zusatz). Dreizeilige Kacheln sind ohnehin hoeher als der Wert, sie schrumpfen dadurch nur um wenige Pixel. */ /* Typografie in der Kachel */ --gc-fs-hd:10px; /* Kopfzeile (Versalien) */ --gc-fs-v:24px; /* Hauptwert */ --gc-fs-s:10.5px; /* Zusatztext */ --gc-ink-hd:#4A5260; --gc-ink-v:var(--ink,#22262E); --gc-ink-s:#3C424E; /* 5,97:1 ueber Video bei 75 %, 9,16:1 ohne Video */ --gc-ink-small:#434A57; /* 5,28:1 / 8,09:1 */ } /* Video-Hintergrund: EIN Umschalter hebt alle Flächen an. Wird von app/views/layout.php auf gesetzt. */ body.has-bg-video{ --gy-veil:0.75; } /* ---------- Die eine Fläche ---------- Gilt für Kacheln, Karten und Arbeitsflächen gleichermaßen. */ .gy-surface, .gy-card{ background:rgba(255,255,255,var(--gy-veil)); border:1px solid var(--gy-edge); border-radius:var(--gc-r); box-shadow:var(--gy-shadow); backdrop-filter:var(--gy-blur); -webkit-backdrop-filter:var(--gy-blur); } /* ---------- Kachel: Kopfzeile + Körper ---------- */ .gy-card{ display:flex; flex-direction:column; overflow:hidden; min-height:var(--gc-min-h); min-width:0; } .gy-card>.hd{ display:flex; align-items:center; gap:7px; flex:0 0 auto; padding:var(--gc-hd-pad); border-bottom:1px solid var(--gy-hairline); font-size:var(--gc-fs-hd); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gc-ink-hd); min-width:0; } .gy-card>.hd>.t{ /* Titel, kürzt statt umzubrechen */ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .gy-card>.hd>.dot{ /* Statuspunkt */ width:6px;height:6px;border-radius:50%;background:var(--accent,#6B7689);flex:0 0 auto; } .gy-card>.hd>.r{ /* Zusatz rechts, normale Schreibweise */ margin-left:auto;flex:0 0 auto;font-weight:400;letter-spacing:0; text-transform:none;color:#6B7280;font-size:10.5px; } .gy-card>.hd>.cnt{ /* Zähler-Pille rechts */ margin-left:auto;flex:0 0 auto;background:var(--chip,#EEF1F5);border-radius:999px; padding:1px 8px;font-size:10px;letter-spacing:0;color:#3A4150; } .gy-card>.hd .gy-ic{width:13px;height:13px;opacity:.7;flex:0 0 auto;} .gy-card>.bd{padding:var(--gc-pad);flex:1 1 auto;min-width:0;} .gy-card>.bd.mid{display:flex;flex-direction:column;justify-content:center;} .gy-card>.bd.flush{padding:0;} /* randlose Inhalte (Diagramm, Tabelle) */ /* Inhaltsbausteine */ .gy-card .v{font-size:var(--gc-fs-v);font-weight:300;line-height:1.08;color:var(--gc-ink-v);} .gy-card .v small{font-size:11px;font-weight:400;color:var(--gc-ink-small);} .gy-card .s{font-size:var(--gc-fs-s);color:var(--gc-ink-s);margin-top:4px;line-height:1.35;} /* ---------- Größen ---------- */ .gy-card--md{--gc-pad:13px 16px;--gc-hd-pad:9px 16px;--gc-min-h:112px;--gc-fs-v:27px;} .gy-card--lg{--gc-pad:16px 19px;--gc-hd-pad:10px 19px;--gc-min-h:130px;--gc-fs-v:32px;} /* ---------- Status: färbt NUR die Kopfzeile ---------- */ .gy-card--bad>.hd{border-bottom-color:var(--bad,#D24B4B);box-shadow:inset 0 -2px 0 var(--bad,#D24B4B);} .gy-card--bad>.hd>.dot{background:var(--bad,#D24B4B);} .gy-card--warn>.hd{border-bottom-color:var(--warn,#C77A14);box-shadow:inset 0 -2px 0 var(--warn,#C77A14);} .gy-card--warn>.hd>.dot{background:var(--warn,#C77A14);} /* --good faerbt seit 02.08.2026 auch den Trennstrich — vorher tat das nur --bad und --warn, was eine Asymmetrie ohne Grund war. Ein erreichtes Ziel darf genauso deutlich sein wie ein Problem. */ .gy-card--good>.hd{border-bottom-color:var(--good,#1F9D55);box-shadow:inset 0 -2px 0 var(--good,#1F9D55);} .gy-card--good>.hd>.dot{background:var(--good,#1F9D55);} /* ---------- Raster ---------- Container haben KEINE eigene Fläche — sonst stapeln sich Deckkräfte. */ .gy-grid{display:grid;gap:var(--gc-gap);} .gy-grid--4{grid-template-columns:repeat(4,1fr);} .gy-grid--5{grid-template-columns:repeat(5,1fr);} .gy-grid--7{grid-template-columns:repeat(7,1fr);} .gy-grid--12{grid-template-columns:repeat(12,1fr);} .gy-grid--auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));} /* Eine Zeile, gleichmaessig geteilt - unabhaengig von der Kachelanzahl (fuer KPI-Reihen mit bedingten Kacheln, z. B. Ads: 4-6 Stueck). */ .gy-grid--row{grid-auto-flow:column;grid-auto-columns:1fr;} .gy-w2{grid-column:span 2;} .gy-w3{grid-column:span 3;} .gy-w4{grid-column:span 4;} .gy-w5{grid-column:span 5;} .gy-w6{grid-column:span 6;} .gy-w7{grid-column:span 7;} .gy-w8{grid-column:span 8;} @media(max-width:900px){ .gy-grid--row{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);} .gy-grid--4,.gy-grid--5,.gy-grid--7,.gy-grid--12{grid-template-columns:repeat(2,1fr);} .gy-w3,.gy-w4,.gy-w5,.gy-w6,.gy-w7,.gy-w8{grid-column:span 2;} } @media(max-width:560px){ .gy-grid--row{grid-template-columns:1fr;} .gy-grid--4,.gy-grid--5,.gy-grid--7,.gy-grid--12{grid-template-columns:1fr;} .gy-w2,.gy-w3,.gy-w4,.gy-w5,.gy-w6,.gy-w7,.gy-w8{grid-column:span 1;} } /* ---------- Blickdicht: Menüs und Eingabefelder ---------- Bewusste Ausnahme von --gy-veil: durchscheinende Menüs wären unlesbar, in durchscheinende Felder tippt man schlecht. */ .gy-solid{ background:rgba(255,255,255,var(--gy-veil-solid)); border:1px solid var(--line,#E2E5EB); } /* ---------- Sektionsüberschrift über einer Kachelgruppe ---------- */ .gy-seclabel{ font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#22262E;margin:16px 0 6px; /* 4,8:1 auch an der dunkelsten Stelle des Verlaufs */ } body.has-bg-video .gy-seclabel{ color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(10,14,30,.55); }