/* ============================================================================ K360 — RIBBON v4 (Manual Kap. 9, Phase 4 des Umsetzungsplans) ---------------------------------------------------------------------------- WAS DIESE DATEI IST Die Registerkarten-Ribbon nach v4. Das Manual fuehrt die Maße und drei Eigenschaften, die gleichzeitig stimmen muessen — faellt eine weg, "sieht es nach Karteikasten aus" (Kap. 9.3). WARUM EINE EIGENE DATEI NEBEN design-k360.css Phase 3 (Werte) und Phase 4 (Ribbon) sind getrennt abnehmbar. Eine gemeinsame Datei wuerde beim Zuruecknehmen der Ribbon die Token mit zuruecknehmen. Zwei Dateien, zwei Zeilen in index.html, zwei unabhaengige Schalter — das ist die Umkehrbarkeit, die der Umsetzungsplan verlangt ("jede Phase ist fuer sich abnehmbar"). Wird diese Zeile in index.html entfernt, ist die alte Ribbon EXAKT zurueck: die alten Regeln stehen unveraendert in styles.css und ui-2026.css. DER IST-STAND, DEN SIE ABLOEST (live gemessen, 29.09.2026) Leiste 34 px (Soll 36) Befehlsflaeche 79 px (Soll 90) Gesamt 115 px (Soll 126) Registerkarte Radius 0 oben (Soll 9), Polster 9/13/8 (Soll 18) aktive Karte getoente Flaeche + Akzentstrich UNTEN (Soll: Fuellung identisch mit der Flaeche, Kante identisch, unten 0, Akzentstrich OBEN innen 12 px eingezogen) Wrapper Farbverlauf (v4: "Volltonflaechen, keine Verlaeufe") Befehl ab 52 px breit (Soll min. 62, max. 120) ========================================================================== */ /* --------------------------------------------------------------------------- 1) DIE MASSE (Kap. 9.2) --------------------------------------------------------------------------- */ /* Die Kartenleiste ist 36 px — eingeklappt ist das die Gesamthoehe der Ribbon. */ .mail-ribbonbar .mrb-tabs,.cal-ribbonbar .mrb-tabs,.ct-ribbonbar .mrb-tabs,.td-ribbonbar .mrb-tabs,.files-ribbonbar .mrb-tabs,.chat-ribbonbar .mrb-tabs,.git-ribbonbar .mrb-tabs,.cal-win-ribbon .mrb-tabs,.mc-ribbon .mrb-tabs,.mrb-tabs{ height:36px; min-height:36px; padding:0 8px; align-items:flex-end; background:var(--k-flaeche); border-bottom:1px solid var(--k-linie); /* Der Wrapper traegt keinen eigenen Radius mehr (s. Abschnitt 3): die Flaeche ist oben links eckig, weil dort die erste Registerkarte sitzt (Kap. 9.3). */ border-radius:0; } /* Die Befehlsflaeche traegt ihren Inhalt selbst (Kap. 211, Befund 30.09.2026). FRUEHER stand hier eine FESTE Hoehe von 90 px mit der Rechnung "19-px-Symbol + 3 + 11,5-px-Text + 14 Innenabstand". Diese Rechnung ging von EINER Beschriftungszeile aus. Panels mit ZWEI Knopfzeilen (Formatieren: "Format" + "Absatz") brauchen gemessen mehr: 2 x mc-grp-row je 30 px = 60 mc-grp-lbl = 19 Polster 10 oben/unten = 20 Kante oben = 1 --------------------------------- Bedarf = 100 px (gemessen, nicht geschaetzt) Mit height:90px + overflow-y:hidden wurden die letzten 6 px ABGESCHNITTEN — genau die Gruppenbeschriftung: "Format" und "Absatz" waren halb weg. Genau das hat der Nutzer in Kap. 211 gemeldet ("Format + Absatz wird abgeschnitten, generelle Hoehe des Ribbons ueberpruefen"). Deshalb jetzt KEINE feste Hoehe mehr, sondern min-height: die Flaeche waechst mit ihrem Inhalt. Das ist auch fuer kuenftige Panels richtig — ein Panel mit drei Zeilen schneidet dann ebenfalls nichts ab. */ .mail-ribbonbar .mrb-panels,.cal-ribbonbar .mrb-panels,.ct-ribbonbar .mrb-panels,.td-ribbonbar .mrb-panels,.files-ribbonbar .mrb-panels,.chat-ribbonbar .mrb-panels,.git-ribbonbar .mrb-panels,.cal-win-ribbon .mrb-panels,.mc-ribbon .mrb-panels,.mrb-panels{ min-height:100px; padding:10px; /* Innenabstand statt 4/8/6 */ background:var(--k-flaeche); border-top:1px solid var(--k-linie); border-radius:0; /* obere linke Ecke 0 — dort laeuft die Karte ein */ box-shadow:var(--k-sch-1); /* eine Stufe: Karte ueber Grund (Kap. 6.4) */ /* KEIN overflow-y:hidden mehr: das schnitt die Beschriftung ab. Horizontal bleibt es bei auto (die Leiste scrollt bei schmalem Fenster seitlich). */ overflow-x:auto; overflow-y:visible; } /* Registerkarte: Radius 9 px oben (kleiner als die Flaeche mit 10 px, damit die Karte in die Panelkante einlaeuft), Polster 18 px seitlich. */ .mail-ribbonbar .mrb-tab,.cal-ribbonbar .mrb-tab,.ct-ribbonbar .mrb-tab,.td-ribbonbar .mrb-tab,.files-ribbonbar .mrb-tab,.chat-ribbonbar .mrb-tab,.git-ribbonbar .mrb-tab,.cal-win-ribbon .mrb-tab,.mc-ribbon .mrb-tab,.mrb-tab{ border-radius:9px 9px 0 0; padding:8px 18px 8px; font-size:13px; color:var(--k-text-2); background:transparent; border-bottom:0; margin-bottom:0; position:relative; } .mail-ribbonbar .mrb-tab:hover,.cal-ribbonbar .mrb-tab:hover,.ct-ribbonbar .mrb-tab:hover,.td-ribbonbar .mrb-tab:hover,.files-ribbonbar .mrb-tab:hover,.chat-ribbonbar .mrb-tab:hover,.git-ribbonbar .mrb-tab:hover,.cal-win-ribbon .mrb-tab:hover,.mc-ribbon .mrb-tab:hover,.mrb-tab:hover{color:var(--k-text);background:var(--k-subtil)} /* --------------------------------------------------------------------------- 2) DIE AKTIVE REGISTERKARTE SITZT IN DER FLAECHE (Kap. 9.3, verbindlich) Drei Eigenschaften gleichzeitig — fehlt eine, sieht es nach Karteikasten aus: a) Fuellung identisch mit der Flaeche -> #FFFFFF b) Kantenfarbe identisch mit der Flaeche -> #DFE4E9 c) untere Kante 0, dafuer ein 3-px-Streifen, der die Panelkante 2 px ueberdeckt (0 px Luecke gemessen) Dazu: 2-px-Akzentstrich auf der OBERKANTE, innen 12 px eingezogen. --------------------------------------------------------------------------- */ .mail-ribbonbar .mrb-tab.on,.cal-ribbonbar .mrb-tab.on,.ct-ribbonbar .mrb-tab.on,.td-ribbonbar .mrb-tab.on,.files-ribbonbar .mrb-tab.on,.chat-ribbonbar .mrb-tab.on,.git-ribbonbar .mrb-tab.on,.cal-win-ribbon .mrb-tab.on,.mc-ribbon .mrb-tab.on,.mrb-tab.on{ color:var(--k-text); font-weight:600; background:var(--k-flaeche); /* (a) */ border:1px solid var(--k-linie); /* (b) */ border-bottom:0; /* (c) */ padding-bottom:9px; /* gleicht die fehlende untere Kante aus */ z-index:2; } /* (c) der Streifen: 3 px hoch, 2 px unter der Karte -> deckt die 1-px-Kante der Leiste plus 2 px der Flaeche ab. Genau das laesst die Karte "durchgehen". */ .mail-ribbonbar .mrb-tab.on::after,.cal-ribbonbar .mrb-tab.on::after,.ct-ribbonbar .mrb-tab.on::after,.td-ribbonbar .mrb-tab.on::after,.files-ribbonbar .mrb-tab.on::after,.chat-ribbonbar .mrb-tab.on::after,.git-ribbonbar .mrb-tab.on::after,.cal-win-ribbon .mrb-tab.on::after,.mc-ribbon .mrb-tab.on::after,.mrb-tab.on::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--k-flaeche); } /* Der Akzentstrich auf der Oberkante, innen 12 px eingezogen. */ .mail-ribbonbar .mrb-tab.on::before,.cal-ribbonbar .mrb-tab.on::before,.ct-ribbonbar .mrb-tab.on::before,.td-ribbonbar .mrb-tab.on::before,.files-ribbonbar .mrb-tab.on::before,.chat-ribbonbar .mrb-tab.on::before,.git-ribbonbar .mrb-tab.on::before,.cal-win-ribbon .mrb-tab.on::before,.mc-ribbon .mrb-tab.on::before,.mrb-tab.on::before{ content:""; position:absolute; left:12px; right:12px; top:0; height:2px; background:var(--mod,var(--k-brand-800)); border-radius:1px 1px 0 0; } /* Die Flaeche darunter darf den Streifen nicht ueberlagern. */ .mail-ribbonbar .mrb-panel.on,.cal-ribbonbar .mrb-panel.on,.ct-ribbonbar .mrb-panel.on,.td-ribbonbar .mrb-panel.on,.files-ribbonbar .mrb-panel.on,.chat-ribbonbar .mrb-panel.on,.git-ribbonbar .mrb-panel.on,.cal-win-ribbon .mrb-panel.on,.mc-ribbon .mrb-panel.on,.mrb-panel.on{position:relative} /* --------------------------------------------------------------------------- 3) DER WRAPPER — Volltonflaeche statt Verlauf (Kap. 9.1) Heute: linear-gradient + Radius 14 px + Schatten. v4: weisse Flaeche, EINE Kante, EIN weicher Schatten; links bleibt die Rail (keine Office-Schaltflaeche). --------------------------------------------------------------------------- */ .mail-ribbonbar,.cal-ribbonbar,.ct-ribbonbar,.td-ribbonbar, .files-ribbonbar,.chat-ribbonbar,.git-ribbonbar{ background:var(--k-flaeche); border:1px solid var(--k-linie); border-radius:var(--k-r-m); /* 10 px — Flaeche */ border-top-left-radius:0; /* dort sitzt die erste Karte */ box-shadow:var(--k-sch-1); } /* Eingeklappt bleibt die Kartenleiste stehen (nie ganz verstecken) — sie ist dann die ganze Ribbon mit 36 px. */ .rb-collapsed .mrb-panels{display:none} .rb-collapsed .mrb-tabs{border-bottom:1px solid var(--k-linie)} /* --------------------------------------------------------------------------- 4) BEFEHLE UND GRUPPEN (Kap. 9.2, 9.6) --------------------------------------------------------------------------- */ /* Befehl: min. 62 px, max. 120 px — unter 62 px werden Beschriftungen abgeschnitten, ueber 120 px zerfaellt die Gruppe. Symbol 19 px. */ .mrb-panels .mc-btn.big,.mrb-panels .mrb-btn{ min-width:62px; max-width:120px; padding:8px 6px; font-size:11.5px; /* Beschriftung unter dem Symbol */ gap:3px; /* 3 px zwischen Symbol und Text (Kap. 9.2) */ border-radius:var(--k-r-xs); color:var(--k-text-3); /* Befehlsbeschriftung (Token-Rolle) */ } .mrb-panels .mc-btn.big svg, .mrb-panels .mc-btn.big i, .mrb-panels .mrb-btn svg{width:19px;height:19px} .mrb-panels .mc-btn:hover{ background:var(--k-subtil); color:var(--k-text); box-shadow:none; /* v4: keine Struktur aus Schatten */ } /* Gruppen: 1-px-Trenner, 10 px Polster beidseitig — Struktur statt Weissraum (das ist die Korrektur gegenueber v3, Kap. 9.1). */ .mrb-panels .mc-grp{ border-right:1px solid var(--k-linie); padding:0 10px; } .mrb-panels .mc-grp:last-child{border-right:0} .mrb-panels .mc-grp-row{gap:6px} /* Gruppenlabel: normale Schreibweise, 11 px, grau. Keine Versalien — die sind im ganzen Produkt abgeschafft (Kap. 5.3, Phase 3). */ .mrb-panels .mc-grp-lbl{ font-size:11px; font-weight:600; color:var(--k-text-2); text-transform:none; letter-spacing:0; padding-top:2px; } /* GENAU EINE Primaeraktion je Bildschirm, vollfarbig (Kap. 9.6: "Genau eine Primaeraktion je Bildschirm, vollfarbig #115EA3, immer Position 1 in der ersten Gruppe"). Kap. 8.2 ergaenzt: "Ein Primaerknopf pro Ansicht. Zwei Primaerknoepfe bedeuten keinen." NUTZER-BEFUND und meine zwei Fehler dahinter (2026-09-29): "warum ist ueberhaupt 'neue email' oder 'konversation' oder 'neuer termin' farblich hinterlegt? ... ich frage mich, warum das ueberhaupt hinterlegt ist mit einer farbe?" — er hatte recht. Gemessen trugen SIEBEN Registerkarten einen blauen Knopf, davon fuenf zu viel: Kalender/Start "Neuer Termin" (App setzt kein .primary) Kalender/Ansicht "Tag" (Sichtumschalter!) Kontakte/Ansicht "Kollegen (12)" (Filter!) Dokumente/Start "Neuer Ordner" (App setzt .primary auf "Hochladen") Kontakte/Verwalten "Adressbuch-Info" (Nebenweg) Dokumente/Ansicht "Name" (Sortierung!) URSACHE 1: der Rueckfall auf Position 1 (:first-child) faerbte in JEDEM Panel den ersten Befehl — auch dort, wo die App bewusst einen ANDEREN als Primaeraktion markiert hatte (Dokumente markiert "Hochladen", der Rueckfall faerbte "Neuer Ordner" zusaetzlich). URSACHE 2: ":first-child .mc-btn.big:first-child" war zu weit gefasst und traf auch Sichtumschalter, Filter und Sortierungen — also Zustandstraeger, fuer die Kap. 8.2 ein voellig anderes Aussehen vorschreibt (Chip: Ruhe = keine Kante, Text #5A6672; Segment: gefasste Gruppe). Deren Fuellung entsteht beim Anklicken (ui-2026.css:536) — sie darf NICHT von der Primaerregel kommen. Deshalb: nur noch die ausdrueckliche Markierung der App zaehlt. Wo die App keine setzt, bleibt KEIN Knopf vollfarbig — das ist die richtige Antwort, weil dann keine Primaeraktion benannt ist (Kap. 8.2: "Zwei Primaerknoepfe bedeuten keinen"). Die App-Markierung nachzuziehen ist Inhaltsarbeit je App und steht als offener Punkt im Protokoll. */ .mrb-panels .mc-btn.big.primary{ background:var(--k-brand-800); color:#FFFFFF; font-weight:600; } /* FALLE (gemessen am DOM, vom Nutzer gemeldet): die Beschriftung steht in einem eigenen , und ui-2026.css:535 setzt darauf FEST `color:var(--text2)` (#5A6672). Ein `color` am Knopf erreicht den Span nicht — das Symbol wurde weiss, der Text blieb grau: auf #115EA3 nur 1,4:1, also unlesbar. Genau das war der gemeldete Fehler ("Schrift nicht mehr lesen"). Kap. 4.6/Zeile 669 nennt das Soll: Flaeche #115EA3 mit WEISSER Schrift, 6,66:1. Deshalb wird der Span ausdruecklich mitgefuehrt — sonst faerbt die Altregel weiter dagegen. */ .mrb-panels .mc-btn.big.primary .mc-btn-l{ color:#FFFFFF; font-weight:600; } .mrb-panels .mc-btn.big.primary svg{color:#FFFFFF} .mrb-panels .mc-btn.big.primary:hover{ background:var(--k-brand-900); color:#FFFFFF; } .mrb-panels .mc-btn.big.primary:hover .mc-btn-l{color:#FFFFFF} /* Der AKTIVE Zustand traegt die Hausregel ui-2026.css:536: Text in MODULFARBE auf einem 12-%-Schleier derselben Farbe. Gemessen am DOM (Kontakte, Filter "Alle (677)"): Text rgb(16,124,16) auf color(srgb .897 .943 .897) = 3,89:1 — unter der Pflichtgrenze 4,5:1 fuer Text (Manual Kap. 4.6). Kap. 8.2 nennt fuer den gewaehlten Filter-Chip das verbindliche Rezept: "Gewaehlt: Flaeche #DEEBF7, Text #115EA3, halbfett". Das wird hier gesetzt. Gemessen: nur EIN Knopf im Haus traegt .act im Ribbon (Kontakte) — die Aenderung hat also genau die Breite des Befunds und faerbt nichts anderes um. */ .mrb-panels .mc-btn.big.act .mc-btn-l, .mrb-panels .mc-btn.big.act{color:var(--k-brand-800)} .mrb-panels .mc-btn.big.act{background:var(--k-brand-100)} /* Der "Mehr"-Knopf (Kap. 9.6): er sieht wie ein Befehl aus, ist aber ein Weg zu den uebrigen Befehlen — deshalb dieselbe Groesse und Beschriftung, aber am Rand der Flaeche und ohne Vollfarbe. Die Liste darunter benutzt die vorhandene .re-menu-pop-Bauart (eine zweite Popover-Bauart waere ein zweites Verhalten fuer dieselbe Sache). */ .mrb-panels .mc-btn.mrb-mehr{ min-width:62px; max-width:120px; border:1px solid var(--k-linie); background:var(--k-flaeche); } .mrb-panels .mc-btn.mrb-mehr:hover{background:var(--k-subtil);border-color:var(--k-kante)} /* In der Popover-Liste ist die Beschriftung TEXT, nicht eine zweite Knopfzeile: Symbol links, Text daneben, volle Breite, linksbuendig. */ .mrb-mehr-pop .re-menu-it{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; border:0; background:transparent; cursor:pointer; border-radius:var(--k-r-xs); } .mrb-mehr-pop .re-menu-it svg{width:16px;height:16px;flex:none} .mrb-mehr-pop .re-menu-it .mc-btn-l{text-align:left} /* --------------------------------------------------------------------------- 5) EINKLAPPEN (Kap. 9.4) Der Zustand wird gemerkt (macht das JS bereits). Bei prefers-reduced-motion klappt sie hart — das erledigt die Token-Datei global. --------------------------------------------------------------------------- */ .mrb-collapse{color:var(--k-text-2);border-radius:var(--k-r-xs)} .mrb-collapse:hover{background:var(--k-subtil);color:var(--k-text)} /* --------------------------------------------------------------------------- 6) SCHMALE ANSICHTEN (Kap. 9.6) Unter 1024 px fallen zuerst die Beschriftungen, dann wandern Befehle in "Mehr". Primaeraktion und "Mehr" bleiben immer. Die Breitenregel fuer den Befehl faellt dort mit weg — sonst schneidet sie die Symbole ab. --------------------------------------------------------------------------- */ @media (max-width:1023px){ .mrb-panels .mc-btn.big{min-width:44px;max-width:none} .mrb-panels .mc-grp{padding:0 6px} } @media (max-width:767px){ /* Touch: 44 px Ziel, Listenaktionen bleiben sichtbar (kein Hover) */ .mrb-panels{height:auto;min-height:0;padding:8px} .mrb-tabs{height:44px;min-height:44px} .mrb-panels .mc-btn.big{min-width:44px;min-height:44px} /* Kap. 12.4: „Bei 320 px Breite ohne horizontales Scrollen bedienbar." Gemessen vorher bei 320 px: die Registerkarten-Zeile lief 6 px hinaus (rechts 326 statt 320) — der Einklapp-Knopf `.mrb-collapse` steht mit `margin-left:auto` am rechten Rand und wurde von der Innenbreite nicht erfasst. Die Zeile darf bei dieser Breite waagerecht scrollen (sie ist ein Bedienelement mit fester Zielgroesse, kein Inhaltsfluss), die SEITE darf es nicht. */ .mrb-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none; padding:0 10px} .mrb-tabs::-webkit-scrollbar{display:none} .mrb-tab{flex:none} .mrb-collapse{flex:none} }